/* ==========================================================================
   Timetable Layout — grid, container, positioning
   ========================================================================== */

/* CSS Custom Properties */
:root {
    --color-primary:     #6366f1; /* Indigo-500 — brand primary */
    --color-primary-alt: #8b5cf6; /* Violet-500 — brand secondary */
    --color-border:      #e5e7eb; /* Gray-200   — borders and dividers */
    --color-danger:      #ef4444; /* Red-500    — conflicts and errors */
    --color-text-dark:   #374151; /* Gray-700   — dark text */
}

/* Navigation transitions */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.nav-hidden {
    transform: translateY(-100%);
}
.nav-visible {
    transform: translateY(0);
}

/* Main layout container */
.container {
    display: flex;
    height: calc(100vh - 200px);
    justify-content: center;
    gap: 1rem;
    padding: 0 1rem;
    min-height: 800px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Timetable grid */
#schTimes {
    height: calc(100vh - 200px);
    width: 700px;
    border: 1px solid #ddd;
    background-color: #fff;
    position: relative;
    min-height: 1200px;
}

/* Sidebar widths come from the template (w-full md:w-80) so the two side
   columns stay symmetric; no CSS overrides here. */

/* Day header row container */
#schDays {
    background-color: white;
    z-index: 10;
}

/* Desktop: shrink the scroll container to the grid's own width so the
   vertical scrollbar sits right beside Friday (no dead gutter) and the grid
   centres in its card. Mobile keeps the scale-to-fit path (mobile.css). */
@media (min-width: 769px) {
    .timetable-scroll-container {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        scrollbar-gutter: stable; /* the 6px scrollbar must not clip Friday's edge */
    }
}

/* --------------------------------------------------------------------------
   Timetable action bar — sticky bar below the navbar
   -------------------------------------------------------------------------- */
#timetable-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: white;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 5rem; /* stick below the fixed navbar (~80px) */
    z-index: 40;
}

.tb-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: white;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
}
.tb-action-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.tb-action-btn.primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}
.tb-action-btn.primary:hover {
    background: #4f46e5;
    border-color: #4f46e5;
}
.tb-action-btn.confirming {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}
.tb-action-btn.confirming:hover {
    background: #fee2e2;
    border-color: #f87171;
}

/* --------------------------------------------------------------------------
   Version tabs
   -------------------------------------------------------------------------- */
.version-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: white;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    max-width: 220px;
}
.version-tab .tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.version-tab .tab-context {
    font-size: 0.6rem;
    font-weight: 400;
    opacity: 0.6;
    background: rgba(0,0,0,0.07);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    flex-shrink: 0;
}
.version-tab.active .tab-context {
    background: rgba(255,255,255,0.2);
    opacity: 0.85;
}
.version-tab:hover {
    background: #f3f4f6;
}
.version-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}
.tab-rename-btn {
    flex-shrink: 0;
    opacity: 0;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
    transition: opacity 0.15s;
    cursor: pointer;
}
.version-tab:hover .tab-rename-btn,
.version-tab.active:hover .tab-rename-btn {
    opacity: 0.75;
}
.tab-rename-btn:hover {
    opacity: 1 !important;
    background: rgba(255,255,255,0.2);
}

/* --------------------------------------------------------------------------
   Search floating label — hide label when input has content or is focused
   -------------------------------------------------------------------------- */
.floating-label-container input:not(:placeholder-shown) ~ .floating-label,
.floating-label-container input:focus ~ .floating-label {
    opacity: 0;
    pointer-events: none;
}