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

/* CSS Custom Properties */
:root {
    --color-primary:     #2387ba; /* Brand deep blue (theme primary-600) */
    --color-primary-alt: #0d71a0; /* Theme secondary-600, the gradients' far end */
    --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;
}
/* A filled button is primary-700 (white on it is 5.4:1; on --color-primary it
   was 4.0:1) and primary-800 on hover (UI-13). */
.tb-action-btn.primary {
    background: #20719c;
    border-color: #20719c;
    color: white;
}
.tb-action-btn.primary:hover {
    background: #1d5d7f;
    border-color: #1d5d7f;
}
.tb-action-btn.confirming {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}
.tb-action-btn.confirming:hover {
    background: #fee2e2;
    border-color: #f87171;
}
/* The Edit dialog's Delete, armed (UI-23): "press again", like Clear All
   above. The id out-ranks the button's own Tailwind colours; the ring is a
   shadow, so arming it moves nothing. */
#delete-timetable-btn.confirming,
#delete-timetable-btn.confirming:hover {
    background: #fee2e2;
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px #fca5a5;
}

/* --------------------------------------------------------------------------
   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;
}