/*
 * Ruumid theme: "ruled planner".
 * A white ruled sheet on a cool desk, inked in Roomday's fixed navy (--accent); booking-type
 * colours keep their meaning. The account's own colours (/style.css, core::style()) are never
 * a background behind text: --rd-brand-main fills the header bar, whose text is
 * --rd-on-brand-main (Contrast::readableTextOn()), --rd-brand-element its selected view (text
 * --rd-on-brand-element). Otherwise they show only as lines: the main colour edges the
 * new-booking button and today's underline, the menu colour (--rd-brand-dropdown) the open
 * menu item and the keyboard focus ring inside the dark sidebar. Focus rings on light surfaces
 * stay on the fixed palette (a light menu colour would vanish there). tests/brand_css_test.php
 * holds the list.
 * Loaded last, so it overrides style.css, structure.css and module CSS.
 */

:root {
    --desk: #ECEFF3;
    --sheet: #FFFFFF;
    --ink: #1B2533;
    --ink-2: #5A6678;
    --ink-3: #687284;
    --field-border: #848E9D;
    --rule: #D8DEE6;
    --rule-soft: #E8ECF1;
    /* Roomday's own navy, never the account's colour: links, the sidebar, primary buttons
       and tints all sit behind or under text. */
    --accent: #1F3B6F;
    /* Darkened for text and for surfaces under white text. */
    --accent-strong: color-mix(in srgb, var(--accent) 70%, black);
    --accent-wash: color-mix(in srgb, var(--accent) 7%, transparent);
    --accent-tint: color-mix(in srgb, var(--accent) 14%, white);
    --free: #1E7A4F;
    --warn: #B5650D;
    --stop: #B42318;

    --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-grid: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;

    --r-control: 6px;
    --r-panel: 12px;

    --bs-body-font-family: var(--font-ui);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--rule);
    --bs-primary: var(--accent-strong);
    --bs-link-color: var(--accent-strong);
    --bs-link-hover-color: var(--ink);
    --bs-focus-ring-color: color-mix(in srgb, var(--accent) 30%, transparent);

    --fc-border-color: var(--rule-soft);
    --fc-today-bg-color: transparent;
    --fc-page-bg-color: var(--sheet);
    --fc-neutral-bg-color: var(--desk);
    --fc-now-indicator-color: var(--stop);
    --fc-non-business-color: rgba(27, 37, 51, .035);
}

/* ---------- Base ---------- */

html, body {
    font-family: var(--font-ui) !important;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

body {
    background: var(--desk) !important;
    font-size: 15px;
}

a { color: var(--accent-strong); }

.text-primary { color: var(--accent-strong) !important; }
a:hover { color: var(--ink); }

#content {
    background: var(--desk) !important;
    padding: 0 24px 32px;
}

/* ---------- Header: app switch + toolbar ---------- */

header.navbar {
    background: var(--sheet);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 1px 3px rgba(27, 37, 51, .07);
}

/* The header bar: the account's main colour, with text in the colour that reads on it. */
#logo {
    background: var(--rd-brand-main, #1F3B6F) !important;
    color: var(--rd-on-brand-main, #FFFFFF);
    margin-left: 0;
    padding: 0 16px;
    height: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Rooms plan / timetable: a segmented control, so it reads as a switch you can
   press. The current view is the filled segment. The tray is an outline, not a
   shade: a shade over the brand colour could take its text below 4.5:1. */
.app-switch {
    display: flex;
    width: 100%;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd-on-brand-main, #FFFFFF) 45%, transparent);
}

#logo .app-switch a {
    flex: 1 1 0;
    min-width: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 2px;
    border-radius: 5px;
    font: 500 13.5px/1 var(--font-ui);
    color: var(--rd-on-brand-main, #FFFFFF);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

#logo .app-switch a > i { font-size: 13px; }

#logo .app-switch a > span { overflow: hidden; text-overflow: ellipsis; }

#logo .app-switch a:hover {
    color: var(--rd-on-brand-main, #FFFFFF);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The selected view: the account's element colour, with text in the colour that reads on it. */
#logo .app-switch a.active {
    background: var(--rd-brand-element, #FFFFFF);
    color: var(--rd-on-brand-element, #111111);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

#logo .app-switch a:focus-visible { outline: 2px solid var(--rd-on-brand-main, #FFFFFF); outline-offset: 1px; }

/* Only one view configured: show it as a title, not a lone button. */
.app-switch:has(> a:only-child) { background: transparent; padding: 0; box-shadow: none; }

#logo .app-switch a:only-child,
#logo .app-switch a:only-child:hover {
    justify-content: flex-start;
    background: transparent;
    color: var(--rd-on-brand-main, #FFFFFF);
    box-shadow: none;
    padding: 0 8px;
}

#top-panel {
    background: var(--sheet) !important;
    border: 0;
}

#top-panel .left-toolbar > .btn {
    color: var(--ink-2);
    border: 0;
}

/* Search: a clearly outlined field with a hint of what it finds. Field
   outlines use --field-border (3:1 against white, WCAG 1.4.11). */
#top-panel .input-group { flex-wrap: nowrap; }

#top-panel .input-group-text {
    background: var(--sheet);
    border: 1px solid var(--field-border);
    color: var(--ink-2);
}

#top-panel .input-group:has(#global-search) .input-group-text {
    border-right: 0;
    border-radius: 8px 0 0 8px;
    padding: 0 4px 0 12px;
}

#global-search {
    background: var(--sheet) !important;
    border: 1px solid var(--field-border);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    width: 100%;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 36px;
    font-size: 14.5px;
    color: var(--ink);
}

#global-search::placeholder { color: var(--ink-2); opacity: 1; }

#top-panel .input-group:has(#global-search):focus-within {
    border-radius: 8px;
    box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

#top-panel .input-group:has(#global-search):focus-within .input-group-text,
#global-search:focus {
    border-color: var(--accent);
    box-shadow: none;
}

#page-navbar {
    height: 50px;
    padding-top: 0;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}

/* Every action sits centred in the 50px bar. The items keep Bootstrap's
   d-*-block display (it hides them on small screens), so centre by box size. */
#page-navbar > li {
    margin: 0;
    padding: 0;
    height: 50px;
    line-height: normal;
}

#page-navbar > li > a { vertical-align: top; }

/* Toolbar controls (search, and the home page's date and house filters) sit on
   one row, all 38px tall and vertically centred; search gives way first. */
#top-panel .left-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    height: 50px;
    min-width: 0;
}

#top-panel .left-toolbar > * { flex: 0 0 auto; margin: 0 !important; }

#top-panel .left-toolbar > .inline:has(#global-search) { flex: 1 1 360px; min-width: 180px; max-width: 360px; }

/* The account (organisation) name: plain text in the bar's ink, never on a brand colour. */
#top-panel .left-toolbar > .account-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--ink);
}

#top-panel .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
    width: auto;
}

#top-panel .input-group > .input-group-text,
#top-panel .input-group > .form-control,
#top-panel .input-group > .form-select,
#top-panel .input-group > .btn {
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
}

#top-panel .input-group > .form-control {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 36px;
}

#top-panel .input-group > .btn {
    display: inline-flex;
    align-items: center;
    border-color: var(--field-border);
    color: var(--ink-2);
    background: var(--sheet);
}

#top-panel .input-group > .btn:hover { background: var(--desk); color: var(--ink); }

#top-panel #filter_date { width: 112px; }

/* Selects in the toolbar show a chevron, so they read as choices, not labels. */
#top-panel select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235A6678' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 10px;
    padding-right: 32px;
    cursor: pointer;
}

@media (min-width: 992px) {
    #top-panel .d-lg-inline:has(#global-search) { display: block !important; }
}

/* One quiet icon style for every toolbar action. */
#page-navbar > li > a,
#page-navbar > li.blue-button > a,
#page-navbar > li.messages > a,
#page-navbar > li.help > a {
    background: transparent !important;
    color: var(--ink-2) !important;
    border-radius: var(--r-control);
    width: 38px;
    height: 38px;
    margin: 6px 0;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 17px;
}

#page-navbar > li > a i,
#page-navbar > li.help > a i {
    color: inherit !important;
}

#page-navbar > li > a:hover {
    background: var(--desk) !important;
    color: var(--ink) !important;
}

#page-navbar .messages .badge {
    position: absolute;
    top: 2px;
    right: -2px;
    background: var(--stop) !important;
    color: #fff;
    font: 600 10px/1 var(--font-ui);
    padding: 3px 5px;
    border-radius: 8px;
    border: 2px solid var(--sheet);
}

#page-navbar .account {
    width: auto;
    flex-shrink: 0;
    height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 0 4px;
    margin: 4px 0 4px 4px;
    border-radius: 21px;
    color: var(--ink) !important;
    background: transparent !important;
    line-height: 1.2;
    text-decoration: none;
}

#page-navbar .account:hover,
#page-navbar .account[aria-expanded="true"] { background: var(--desk) !important; }

#page-navbar .account:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--bs-focus-ring-color); }

#page-navbar .account::after { color: var(--ink-2); margin-left: 0; transition: transform .15s; }

#page-navbar .account[aria-expanded="true"]::after { transform: rotate(180deg); }

#page-navbar .avatar { width: auto; margin: 0; float: none; display: inline-flex; flex-shrink: 0; }

#page-navbar .avatar img {
    max-width: none;
    width: 34px;
    height: 34px;
    object-fit: cover;
}

#page-navbar .user-mini {
    font-size: 14px;
    font-weight: 500;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Account menu: a white card under the avatar, readable on any page. */
#page-navbar .dropdown-menu.account-menu {
    background: var(--sheet) !important;
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(27, 37, 51, .16), 0 2px 6px rgba(27, 37, 51, .08);
    padding: 6px;
    min-width: 240px;
    margin-top: 6px !important;
    line-height: 1.3;
    z-index: 2100;
}

.account-menu-head {
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rule-soft);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.account-menu-head strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }

.account-menu-head span {
    font-size: 13px;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-navbar .account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px !important;
    border-radius: var(--r-control);
    color: var(--ink) !important;
    font-size: 14.5px;
    background: transparent;
}

#page-navbar .account-menu .dropdown-item > i {
    width: 18px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    text-align: center;
    color: var(--ink-2);
    box-shadow: none;
    background: none;
}

#page-navbar .account-menu .dropdown-item:hover,
#page-navbar .account-menu .dropdown-item:focus { background: var(--desk) !important; color: var(--ink) !important; }

#page-navbar .account-menu .dropdown-item.logout,
#page-navbar .account-menu .dropdown-item.logout > i { color: var(--stop) !important; }

#page-navbar .account-menu .dropdown-item.logout:hover { background: color-mix(in srgb, var(--stop) 8%, white) !important; }

#page-navbar .account-menu .dropdown-divider { margin: 4px 0; border-color: var(--rule-soft); opacity: 1; }

/* ---------- Sidebar ---------- */

#sidebar-left {
    background: var(--accent-strong) !important;
    padding-top: 12px;
}

/* Legacy style.css pulls the list out by -15px on both sides to undo column padding that is gone now. */
.nav.main-menu { margin-left: 0; margin-right: 0; }

.sidebar-heading {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font: 600 12px/1 var(--font-ui) !important;
    color: rgba(255, 255, 255, .72) !important;
    padding: 20px 20px 8px !important;
}

/* Groups are separated by space, not by hard rules. */
.nav.main-menu > li:has(> hr) { height: 16px; }

.nav.main-menu hr { display: none; }

.nav.main-menu > li > a {
    font: 500 14.5px/1.2 var(--font-ui) !important;
    color: rgba(255, 255, 255, .84) !important;
    background: transparent !important;
    padding: 10px 20px !important;
    margin: 1px 0 1px 10px;
    border-radius: var(--r-control) 0 0 var(--r-control);
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav.main-menu > li > a > i {
    width: 18px;
    text-align: center;
    font-size: 15px;
    opacity: .8;
    margin: 0 !important;
}

.nav.main-menu > li > a:hover {
    background: rgba(255, 255, 255, .09) !important;
    color: #fff !important;
}

/* Active item becomes a tab of the desk it opens onto, edged in the account's menu colour. */
.nav.main-menu a.active,
.nav.main-menu a.active:hover {
    background: var(--desk) !important;
    color: var(--ink) !important;
    box-shadow: inset 4px 0 0 var(--rd-brand-dropdown, var(--accent));
}

/* Keyboard focus in the dark sidebar: a ring in the account's menu colour, inside the item so it stays on the navy.
   The open item sits on the light desk, so its ring is the fixed navy, as on every light surface. */
#sidebar-left :where(a, button, summary, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--rd-brand-dropdown, #6aa6d6);
    outline-offset: -2px;
}

#sidebar-left .nav.main-menu a.active:focus-visible { outline-color: var(--accent); }

.nav.main-menu a.active > i {
    color: var(--accent-strong);
    opacity: 1;
}

/* ---------- Layout: navigation column, rail and drawer ---------- */

:root {
    --nav-w: 248px;
    --rail-w: 72px;
}

#menu-backdrop { display: none; }

#top-panel > .row { flex-wrap: nowrap; }

#top-panel .left-toolbar { flex: 1 1 auto; width: auto; min-width: 0; }

#top-panel .right-toolbar { flex: 0 0 auto; width: auto; }

/* Narrow toolbars: filters scroll sideways under a pinned menu button, and drop
   their decorative icons to make room. */
@media (max-width: 991.98px) {
    #top-panel .left-toolbar {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    #top-panel .left-toolbar > .menu-toggle {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--sheet);
    }

    /* The search field is desktop-only; its empty wrapper must not hold space. */
    #top-panel .left-toolbar > .inline:has(#global-search) { display: none; }

    #top-panel .input-group:has(#filter_date) > .input-group-text,
    #top-panel .input-group:has(#filter_house) > .input-group-text { display: none; }

    #top-panel #filter_house { max-width: 170px; border-radius: var(--r-control) !important; }
}

.menu-toggle { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

#top-panel .left-toolbar > .menu-toggle:hover { background: var(--desk); color: var(--ink); }

@media (min-width: 768px) {
    /* The header's navy block and the sidebar share one width, so they move together. */
    header.navbar .expanded-panel > .row,
    #main > .row { flex-wrap: nowrap; }

    #logo,
    #main #sidebar-left {
        flex: 0 0 var(--nav-w);
        width: var(--nav-w);
        max-width: none;
        opacity: 1;
        transition: flex-basis .2s ease, width .2s ease;
    }

    #main #sidebar-left { padding-left: 0; padding-right: 0; }

    #top-panel,
    #content {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    body.menu-collapsed #logo,
    body.menu-collapsed #main #sidebar-left {
        flex-basis: var(--rail-w);
        width: var(--rail-w);
    }

    body.menu-collapsed #logo { padding: 0 8px; }

    body.menu-collapsed #logo .app-switch a { gap: 0; }

    body.menu-collapsed #logo .app-switch a > span { display: none; }

    body.menu-collapsed #logo .app-switch a > i { font-size: 14px; }

    /* Rail: icons only; group headings become short rules. */
    body.menu-collapsed #sidebar-left { z-index: 11; }

    body.menu-collapsed .sidebar-heading {
        font-size: 0 !important;
        padding: 14px 0 8px !important;
    }

    body.menu-collapsed .sidebar-heading::after {
        content: '';
        display: block;
        width: 24px;
        height: 1px;
        margin: 0 auto;
        background: rgba(255, 255, 255, .3);
    }

    body.menu-collapsed .nav.main-menu > li > a {
        position: relative;
        justify-content: center;
        /* The tab still runs to the desk edge; the right padding matches the left margin, so the icon sits on the rail's centre line. */
        padding: 11px 6px 11px 0 !important;
        margin-left: 6px;
    }

    body.menu-collapsed .nav.main-menu > li > a > i { font-size: 17px; }

    body.menu-collapsed .nav.main-menu > li > a > span { display: none !important; }

    /* The label appears as a flyout on hover or keyboard focus. */
    body.menu-collapsed .nav.main-menu > li > a:hover > span,
    body.menu-collapsed .nav.main-menu > li > a:focus-visible > span {
        display: block !important;
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        padding: 6px 10px;
        border-radius: var(--r-control);
        background: var(--ink);
        color: #fff;
        font-size: 13.5px;
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(27, 37, 51, .2);
        pointer-events: none;
        z-index: 30;
    }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    #logo, #sidebar-left { transition: none; }
}

/* ---------- Breadcrumb ---------- */

#breadcrumb {
    background: transparent !important;
    padding: 12px 0 10px !important;
    min-height: 0;
    line-height: 1.4;
    margin-bottom: 8px;
}

/* Full-width views (home timeline, rooms, room page) zero #content padding; their
   breadcrumb keeps a small inset so it doesn't touch the menu. */
#content:has(#resource-table, .rooms-content, .room-info) #breadcrumb { padding-left: 12px !important; }

.breadcrumb {
    margin: 0;
    font-size: 14px;
    align-items: center;
}

.breadcrumb-item { display: inline-flex; align-items: center; }

.breadcrumb > li > a,
.breadcrumb-item a {
    color: var(--ink-2) !important;
    text-decoration: none;
    padding: 3px 6px;
    margin: 0 -6px;
    border-radius: 6px;
}

.breadcrumb > li > a:hover {
    color: var(--ink) !important;
    background: rgba(27, 37, 51, .06);
}

/* Where you are: the last crumb reads as the page title. */
.breadcrumb > li:last-child > a {
    color: var(--ink) !important;
    font-weight: 600;
}

/* Some pages add a one-line description after the title. */
.breadcrumb small {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-2);
    margin-left: 8px;
}

.breadcrumb > li:first-child > a::before {
    content: '\f015';
    font: 900 12px/1 'Font Awesome 5 Free';
    margin-right: 7px;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '\f054' !important;
    font: 900 9px/1 'Font Awesome 5 Free';
    color: var(--ink-3) !important;
    float: none;
    padding: 0 12px 0 10px !important;
}

/* ---------- Calendar: the ruled sheet ---------- */

.fc {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-panel);
    padding: 16px 16px 8px;
    font-family: var(--font-ui);
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 14px;
    gap: 12px;
    flex-wrap: wrap;
}

.fc .fc-toolbar-title {
    font: 600 26px/1.1 var(--font-grid);
    letter-spacing: -.01em;
    color: var(--ink);
}

/* Toolbar buttons: quiet segmented controls instead of dark slabs. */
.fc .fc-button,
.fc .fc-button-primary {
    background: var(--sheet);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--r-control);
    font: 500 14px/1 var(--font-ui);
    padding: 9px 14px;
    box-shadow: none !important;
    text-transform: none;
}

.fc .fc-button-primary:hover {
    background: var(--desk);
    color: var(--ink);
    border-color: var(--rule);
}

/* Selected view: a light tinted state, so the dark primary action stays unique. */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--accent-tint);
    border-color: color-mix(in srgb, var(--accent) 40%, white);
    color: var(--accent-strong);
    font-weight: 600;
}

.fc .fc-button-primary:disabled {
    background: var(--sheet);
    color: var(--ink-3);
    border-color: var(--rule);
    opacity: 1;
}

.fc .fc-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fc .fc-today-button { margin-left: 8px !important; }

.fc .fc-prev-button, .fc .fc-next-button { padding: 9px 10px; }

.fc .new_booking.btn {
    border-radius: var(--r-control) !important;
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    font: 600 14px/1 var(--font-ui);
    padding: 10px 16px;
    margin-right: 12px !important;
    display: inline-flex;
    align-items: center;
    /* The account's main colour as an underline edge; the button itself stays on the fixed palette. */
    box-shadow: inset 0 -3px 0 var(--rd-brand-main, var(--accent));
}

/* Column headers: weekday small, date large. The one loud element. */
.fc .fc-col-header-cell {
    background: var(--sheet) !important;
    background-image: none !important;
    border-color: transparent;
    padding: 6px 0 10px;
    position: relative;
}

.fc .fc-col-header-cell-cushion {
    font: 600 22px/1.1 var(--font-grid);
    font-variant-numeric: tabular-nums;
    color: var(--ink) !important;
    text-decoration: none !important;
    padding: 4px 6px !important;
}

.fc .fc-day-past .fc-col-header-cell-cushion { color: var(--ink-3) !important; }

.fc .fc-col-header-cell.fc-day-today::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--rd-brand-main, var(--accent));
}

.fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion { color: var(--accent-strong) !important; }

.fc .fc-scrollgrid {
    border: 0 !important;
}

.fc-theme-standard td, .fc-theme-standard th {
    border-color: var(--rule-soft);
}

.fc .fc-timegrid-slot {
    height: 26px;
}

.fc .fc-timegrid-slot-minor {
    border-top-style: dotted;
}

.fc .fc-timegrid-slot-label-cushion,
.fc .fc-timegrid-axis-cushion {
    font: 500 12.5px/1 var(--font-grid);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}

.fc .fc-timegrid-axis-cushion { color: var(--accent-strong); font-weight: 600; }

.fc .fc-non-business { background: var(--fc-non-business-color) !important; }

/* The day requested in the URL (?d=) is marked in its header like today, not greyed out. */
.fc td.fc-day.bg-light {
    background: transparent !important;
    background-image: none !important;
}

.fc th.fc-col-header-cell.bg-light .fc-col-header-cell-cushion { color: var(--accent-strong) !important; }

.fc th.fc-col-header-cell.bg-light::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--rd-brand-main, var(--accent));
    opacity: .45;
}

/* Free slots invite a click. */
.fc .fc-timegrid-col:not(.fc-day-past) .fc-timegrid-col-frame:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    cursor: pointer;
}

/* Events: priority colour kept as a stripe; fill softened so text stays readable. */
.fc .fc-v-event,
.fc .fc-h-event {
    border-width: 0 0 0 4px !important;
    border-style: solid !important;
    border-radius: 4px 6px 6px 4px;
    background-image: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55));
    box-shadow: inset 4px 0 0 rgba(27, 37, 51, .22), 0 0 0 1px var(--sheet);
    overflow: hidden;
}

.fc .fc-event-main {
    color: var(--ink) !important;
    padding: 3px 6px;
}

.fc .fc-event-time {
    font: 600 12px/1.3 var(--font-grid);
    font-variant-numeric: tabular-nums;
}

.fc .fc-event-title {
    font: 500 13px/1.25 var(--font-ui);
}

.fc .fc-v-event:hover { filter: brightness(.97); }

.fc .fc-daygrid-day-number {
    font: 600 14px/1 var(--font-grid);
    color: var(--ink);
    text-decoration: none;
}

.fc .fc-list { border-radius: var(--r-control); }

/* ---------- Filter bars (general calendar) ---------- */

.calendar-filters { padding: 12px 16px; }

.calendar-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
}

.calendar-filter-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    flex: 1 1 auto;
}

.calendar-filter-fields.d-none { display: none !important; }

.calendar-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 260px;
    max-width: 420px;
    min-width: 0;
}

.calendar-filter > label {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
}

.calendar-filter > .form-select,
.calendar-filter > .bootstrap-select {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

.calendar-filter > .form-select,
.calendar-filter > .bootstrap-select > .dropdown-toggle { height: 38px; min-height: 38px; }

/* All pickers share one chevron: native selects and bootstrap-select alike. */
.form-select,
.bootstrap-select > .dropdown-toggle {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235A6678' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 10px !important;
    padding-right: 36px !important;
}

.bootstrap-select > .dropdown-toggle::after { display: none; }

.bootstrap-select > .dropdown-toggle { display: flex; align-items: center; }

/* Toggle groups (radio buttons styled as a segmented control). */
.btn-outline-primary {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--field-border);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--desk);
    --bs-btn-hover-border-color: var(--field-border);
    --bs-btn-active-color: var(--accent-strong);
    --bs-btn-active-bg: var(--accent-tint);
    --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 40%, white);
    height: 38px;
    display: inline-flex;
    align-items: center;
}

.btn-check:checked + .btn-outline-primary { font-weight: 600; }

/* Inside an input group a button takes the field's height (40px), not the toolbar's 38px.
   inline-flex drops the space between icon and label, so put it back as a gap. */
.input-group > .btn { height: auto; column-gap: 5px; }

.btn-check:focus-visible + .btn { box-shadow: 0 0 0 3px var(--bs-focus-ring-color); }

/* ---------- Dialogs (Bootbox) ---------- */

.modal-content {
    border: 0;
    border-radius: var(--r-panel);
    box-shadow: 0 24px 64px -16px rgba(27, 37, 51, .35), 0 0 0 1px rgba(27, 37, 51, .06);
    overflow: hidden;
}

.modal-backdrop.show { opacity: .38; background: #0E1622; }

.modal-header {
    background: var(--sheet) !important;
    border-bottom: 1px solid var(--rule-soft);
    padding: 18px 24px;
}

.modal-title {
    font: 600 19px/1.3 var(--font-ui);
    color: var(--ink);
}

/* Long forms scroll inside the dialog so the action button stays in view. */
.bootbox .modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    padding: 20px 24px;
}

.modal-footer {
    border-top: 1px solid var(--rule-soft);
    background: var(--desk);
    padding: 12px 24px;
}

.modal-footer .btn { min-width: 96px; }

.bootbox .card {
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-control);
    box-shadow: none;
}

.bootbox .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--rule-soft);
    font-weight: 600;
    font-size: 14.5px;
    padding: 12px 16px;
}

.bootbox .card-header i { color: var(--ink-3); margin-right: 4px; }

/* Availability line under the end time. */
.already-callback, .linking-callback { font-size: 13.5px; margin-top: 6px; }
.already-callback .text-success { color: var(--free) !important; }
.already-callback .text-danger { color: var(--warn) !important; }
.already-callback .overlap-booking {
    margin-top: 8px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--warn) 9%, white);
    border-radius: var(--r-control);
    border: 1px solid color-mix(in srgb, var(--warn) 25%, white);
}

/* Recently used activity names: quiet chips, not loud buttons. */
.bootbox .btn.tag {
    background: var(--desk);
    border: 1px solid var(--rule);
    color: var(--ink-2);
    border-radius: 999px;
    font-size: 12.5px;
    padding: 3px 10px;
}

.bootbox .btn.tag:hover { background: var(--accent-tint); color: var(--ink); }

/* ---------- Forms & buttons ---------- */

.form-label, label { color: var(--ink); font-weight: 500; font-size: 14px; }

.form-control, .form-select, .bootstrap-tagsinput,
.bootstrap-select > .dropdown-toggle {
    border-color: var(--field-border);
    border-radius: var(--r-control);
    color: var(--ink);
    min-height: 40px;
    box-shadow: none;
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
}

.btn { border-radius: var(--r-control); font-weight: 500; }

.btn-primary {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.btn-primary:hover, .btn-primary:focus {
    background: color-mix(in srgb, var(--accent-strong) 85%, black);
    border-color: color-mix(in srgb, var(--accent-strong) 85%, black);
}

/* ---------- List navigation (profile tabs etc.) ---------- */

.list-group {
    border-radius: var(--r-panel);
    border: 1px solid var(--rule);
    padding: 6px;
    background: var(--sheet);
    --bs-list-group-border-width: 0;
}

.list-group-item {
    border-radius: var(--r-control) !important;
    color: var(--ink-2);
    font-weight: 500;
    padding: 9px 12px;
}

.list-group-item-action:hover { background: var(--desk); color: var(--ink); }

.list-group-item.active {
    background: var(--accent-tint);
    color: var(--accent-strong);
    border-color: transparent;
}

/* Select pickers: placeholder text readable, field outlined like inputs. */
.bootstrap-select > .dropdown-toggle {
    background-color: var(--sheet) !important;
    border: 1px solid var(--field-border) !important;
    border-radius: var(--r-control);
    color: var(--ink);
}

.bootstrap-select .bs-placeholder .filter-option-inner-inner,
.bootstrap-select .filter-option-inner-inner { color: inherit !important; }

.bootstrap-select > .dropdown-toggle.bs-placeholder { color: var(--ink-2) !important; }

/* ---------- Notifications ---------- */

[data-notify="container"] {
    border: 0 !important;
    border-radius: var(--r-control) !important;
    background: var(--ink) !important;
    color: #fff !important;
    box-shadow: 0 12px 32px -8px rgba(27, 37, 51, .45);
    font-size: 14px;
    padding: 12px 16px !important;
}

[data-notify="container"] [data-notify="dismiss"] { color: #fff; opacity: .6; }

/* ---------- Small screens ---------- */

@media (max-width: 767.98px) {
    #content { padding: 0 12px 24px; }

    /* Header: the view switch on top, then one toolbar row that never wraps. */
    #logo { padding: 0 16px; }

    #top-panel .left-toolbar { padding-right: 0; }

    #top-panel .right-toolbar { padding-left: 4px; }

    #page-navbar { padding-right: 0; }

    #page-navbar .account { padding-right: 4px; }

    /* Menu: an off-canvas drawer under the header, over a dimmed page. */
    #main #sidebar-left {
        position: fixed;
        top: 100px;
        bottom: 0;
        left: 0;
        z-index: 1990;
        width: min(300px, 86vw);
        max-width: none;
        padding: 8px 0 24px !important;
        margin: 0 !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 1;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform .22s ease, visibility 0s linear .22s;
        box-shadow: 8px 0 24px rgba(14, 22, 34, .18);
    }

    body.menu-open #main #sidebar-left {
        visibility: visible;
        transform: none;
        transition: transform .22s ease;
    }

    #menu-backdrop {
        display: block;
        position: fixed;
        inset: 100px 0 0 0;
        z-index: 1980;
        background: rgba(14, 22, 34, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
    }

    body.menu-open #menu-backdrop { opacity: 1; pointer-events: auto; }

    body.menu-open { overflow: hidden; }

    .nav.main-menu > li > a { padding: 12px 20px !important; }

    .fc { padding: 12px 8px 4px; border-radius: 10px; }

    .fc .fc-toolbar.fc-header-toolbar {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "title title" "nav views";
        row-gap: 10px;
    }

    .fc .fc-toolbar-chunk:nth-child(1) { grid-area: nav; }
    .fc .fc-toolbar-chunk:nth-child(2) { grid-area: title; }
    .fc .fc-toolbar-chunk:nth-child(3) { grid-area: views; display: flex; justify-content: flex-end; }

    .fc .fc-toolbar-title { font-size: 22px; }

    /* Add-booking becomes an icon button next to the view switch. */
    .fc .fc-toolbar-chunk:nth-child(3) .new_booking {
        font-size: 0;
        padding: 0;
        width: 38px;
        height: 34px;
        justify-content: center;
        margin-right: 8px !important;
    }
    .fc .fc-toolbar-chunk:nth-child(3) .new_booking i { font-size: 15px; margin: 0 !important; }

    .fc .fc-col-header-cell-cushion { font-size: 14px; padding: 2px 0 !important; }

    .bootbox .modal-body { max-height: calc(100vh - 170px); padding: 16px; }

    /* Home date/house filter: one scrollable line instead of spilling onto the page. */
    #top-panel .left-toolbar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        height: 50px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    #top-panel .left-toolbar > * { flex: 0 0 auto; margin: 0 !important; }

    #top-panel .left-toolbar .input-group { flex-wrap: nowrap; width: auto; }

    #top-panel .left-toolbar #filter_date { width: 96px; }

    #top-panel #filter_house { max-width: 130px; }

    /* Multi-row booking form: rows scroll sideways, actions stay in view. */
    #reservetion-rows {
        display: block;
        overflow-x: auto;
    }

    #reservetion-rows tfoot td {
        position: sticky;
        left: 0;
        display: flex;
        justify-content: space-between;
        width: calc(100vw - 50px);
        border: 0;
    }

    #reservetion-rows tfoot td .float-end { float: none !important; }

    /* Messages: subject on its own line, sender and date below. */
    .one-list-message { padding: 12px 12px 12px 46px !important; position: relative; }
    .one-list-message > div:first-child { position: absolute; left: 16px !important; top: 12px; margin: 0 !important; padding: 0; width: auto !important; }
    .one-list-message > div:nth-child(2) { flex: 0 0 100%; max-width: 100%; }
    .one-list-message > div:nth-child(3) { flex: 1 1 auto; width: auto; max-width: none; font-size: 13px; }
    .one-list-message .message-date { flex: 0 0 auto; width: auto; max-width: none; }

    .row > .col-2:has(> #messages-menu),
    .row > .col-2:has(> #messages-menu) + .col-10 { flex: 0 0 100%; max-width: 100%; }

    #messages-menu {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
        padding: 4px;
        margin-bottom: 12px !important;
    }
    #messages-menu > li > a .d-none { display: inline !important; }
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog { transition: none; }
    #main #sidebar-left, #menu-backdrop { transition: none !important; }
}

/* ---------- Panels ("box") and data tables ---------- */

.box {
    background: var(--sheet) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--r-panel) !important;
    box-shadow: none !important;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Only real panels: the home timeline reuses .box-header for its floor rows. */
.box > .box-header {
    background: transparent !important;
    border-bottom: 1px solid var(--rule-soft) !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 10px 16px;
}

.box > .box-header .box-name, .box > .box-header .box-name:hover {
    font: 600 15px/1.4 var(--font-ui);
    color: var(--ink);
    padding: 0;
    cursor: default;
}

.box > .box-header .box-name > i { color: var(--ink-3); margin-right: 6px; }

.box-icons { margin-left: auto; position: static; }

.box-icons a { color: var(--ink-3) !important; }

.box-icons a:hover { color: var(--ink) !important; }

.box-content.no-padding .dataTables_wrapper { padding: 12px 16px 10px; }

.table {
    --bs-table-striped-bg: rgba(27, 37, 51, .025);
    --bs-table-hover-bg: var(--accent-wash);
    color: var(--ink);
}

.table > thead th {
    font: 600 13px/1.3 var(--font-ui);
    color: var(--ink-2);
    border-bottom: 1px solid var(--rule) !important;
    white-space: nowrap;
}

.table > :not(caption) > * > * { border-color: var(--rule-soft); }

/* Row actions: icon buttons coloured by intent, not solid slabs. */
.table .btn-xs.btn-danger,
.table .btn-xs.btn-info,
.table .btn-xs.btn-primary,
.table .btn-xs.btn-success,
.table .btn-xs.btn-warning {
    background: transparent;
    border-color: transparent;
    color: var(--ink-2);
    padding: 4px 8px;
}

.table .btn-xs.btn-danger { color: var(--stop); }

.table .btn-xs:hover { background: var(--desk); color: var(--ink); }

.table .btn-xs.btn-danger:hover { background: color-mix(in srgb, var(--stop) 10%, white); color: var(--stop); }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info { color: var(--ink-2); font-size: 13.5px; }

.dataTables_wrapper .dataTables_filter input { min-width: 220px; }

.page-link { color: var(--ink-2); border-color: var(--rule); }

.page-item.disabled .page-link { color: var(--ink-3); background: var(--sheet); }

.page-item.active .page-link { background: var(--accent-strong); border-color: var(--accent-strong); }

/* ---------- Messages ---------- */

#messages-menu {
    background: var(--sheet) !important;
    border: 1px solid var(--rule);
    border-radius: var(--r-panel);
    height: auto !important;
    margin: 0 !important;
    padding: 8px;
}

#messages-menu > li > a {
    color: var(--ink-2) !important;
    background: transparent !important;
    border-radius: var(--r-control);
    padding: 9px 12px !important;
    font: 500 14.5px/1.2 var(--font-ui);
}

#messages-menu > li > a:hover { background: var(--desk) !important; color: var(--ink) !important; }

#messages-menu > li > a.active { background: var(--accent-tint) !important; color: var(--accent-strong) !important; }

#messages-menu sup { color: var(--ink-3); top: 0; font-size: 12px; }

#messages-menu > li > a.active sup { color: var(--ink-2); }

#messages-list {
    margin: 0 !important;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-panel);
    overflow: hidden;
}

.one-list-message {
    background: transparent !important;
    border-bottom: 1px solid var(--rule-soft) !important;
    padding: 12px 16px 12px 24px !important;
    align-items: center;
}

.one-list-message:hover { background: var(--accent-wash) !important; }

.one-list-message:last-child { border-bottom: 0 !important; }

.one-list-message > div:nth-child(3) { color: var(--ink-2); font-size: 14px; }

.one-list-message .message-date {
    position: static !important;
    background: transparent !important;
    color: var(--ink-2);
    font: 500 13px/1.4 var(--font-grid) !important;
    font-variant-numeric: tabular-nums;
    text-align: right !important;
}

/* ---------- Home: today's timeline ---------- */

table.timeline thead tr:first-child th {
    background: var(--sheet) !important;
    background-image: none !important;
    color: var(--ink-2) !important;
    font: 500 12.5px/1 var(--font-grid);
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--rule) !important;
}

table.timeline thead tr:first-child th.now {
    background: var(--accent-tint) !important;
    color: var(--accent-strong) !important;
    font-weight: 600;
}

table.timeline thead tr:first-child th:first-child {
    color: var(--ink) !important;
    font-weight: 600;
}

/* Floor rows: a thin labelled band, as compact as the room rows. */
table.timeline tr.floor > td.box-header {
    background: var(--accent-wash) !important;
    border-bottom: 1px solid var(--rule) !important;
    padding: 0 !important;
}

table.timeline tr.floor .box-name {
    background: transparent !important;
    font: 600 13px/26px var(--font-ui);
    color: var(--ink);
    padding: 0 8px;
    cursor: pointer;
}

table.timeline tr.floor .box-name i { color: var(--accent-strong); margin-right: 4px; }

/* Page actions injected into the toolbar keep the quiet icon style. */
#page-navbar > li > a > i.bg-success,
#page-navbar > li > a > i.bg-primary {
    background: transparent !important;
    color: inherit !important;
}

/* ---------- Login ---------- */

.login-box {
    background: var(--sheet) !important;
    border: 1px solid var(--rule);
    border-radius: var(--r-panel);
    box-shadow: 0 24px 64px -24px rgba(27, 37, 51, .25);
    overflow: hidden;
}

/* The login card sits in the middle at every width (its column is wide below 1200px). */
#page-login .login-box {
    display: block;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* The account's uploaded logo (any shape) and its name under it. */
.login-logo { max-width: 100%; max-height: 96px; width: auto; }

.login-account {
    font: 600 18px/1.3 var(--font-ui);
    color: var(--ink);
    margin: 12px 0 18px;
    overflow-wrap: anywhere;
}

/* ---------- Subject dialog (admin/subjects, "edit subject" in the booking form) ---------- */

.subject-dialog .modal-body { background: var(--sheet); }

.subject-title-code {
    margin-left: 10px;
    font: 500 14px/1 var(--font-grid);
    color: var(--ink-3);
    letter-spacing: .02em;
}

.subject-section + .subject-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rule-soft);
}

.subject-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.subject-section-head .subject-section-title { margin: 0; }

.subject-section-title {
    font: 600 12.5px/1.2 var(--font-ui);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 0 0 12px;
}

.subject-count {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--desk);
    color: var(--ink-2);
    font-size: 12px;
    letter-spacing: 0;
    text-align: center;
}

.subject-empty { color: var(--ink-3); font-size: 14px; margin: 0 0 12px; }
.subject-empty-warn { color: var(--warn); }

.subject-list { list-style: none; margin: 0 0 12px; padding: 0; }

.subject-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 2px 0 2px 2px;
    border-bottom: 1px solid var(--rule-soft);
}

.btn-icon {
    border: 0;
    background: transparent;
    color: var(--ink-3);
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--r-control);
}

.btn-icon:hover, .btn-icon:focus-visible { background: color-mix(in srgb, var(--stop) 10%, white); color: var(--stop); }

.subject-parts { display: flex; flex-wrap: wrap; gap: 6px; }

.subject-chip {
    border: 1px solid var(--rule);
    background: var(--desk);
    color: var(--ink);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13.5px;
}

.subject-chip:hover { background: var(--accent-tint); }

.subject-chip-add {
    background: transparent;
    border-style: dashed;
    color: var(--accent-strong);
}

.subject-groups { margin: 0; }
.subject-groups td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.subject-groups th { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.subject-group-history td { opacity: .55; }

/* Autosave status, placed in the dialog footer next to the Close button. */
.subject-save-state { font-size: 13.5px; color: var(--ink-3); margin-right: 8px; }
.subject-save-state.is-saved { color: var(--free); }
.subject-save-state.is-error { color: var(--stop); font-weight: 600; }

.add-speciality-form .btn-group .btn { min-width: 0; }

@media (max-width: 576px) {
    .subject-save-state { display: none; }
}

/* ---------- Curricula (admin/speciality) ---------- */

.sp-page { max-width: 1100px; }

.sp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.sp-search { position: relative; flex: 1 1 280px; max-width: 420px; }
.sp-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 13px; }
.sp-search .form-control { padding-left: 36px; background: var(--sheet); }

.sp-toolbar-actions { display: flex; gap: 8px; }

.sp-dept + .sp-dept { margin-top: 28px; }

.sp-dept-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.sp-dept-head h2 { font: 600 17px/1.3 var(--font-ui); color: var(--ink); margin: 0; }
.sp-dept-empty { padding: 4px 2px; }

.sp-curr {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-panel);
    margin-bottom: 8px;
    overflow: hidden;
}

.sp-curr-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 4px;
}

.sp-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 8px 8px;
    border-radius: var(--r-control);
    text-align: left;
    color: var(--ink);
}

.sp-toggle:hover { background: var(--accent-wash); }

.sp-chevron { color: var(--ink-3); font-size: 12px; width: 12px; transition: transform .15s; }
.sp-curr.is-open .sp-chevron { transform: rotate(90deg); }

.sp-swatch {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(27, 37, 51, .15);
}

.sp-curr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sp-code {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--desk);
    color: var(--ink-2);
    font: 500 12.5px/1.5 var(--font-grid);
    letter-spacing: .03em;
}

.sp-meta { flex: none; color: var(--ink-3); font-size: 13.5px; white-space: nowrap; }
.sp-curr-actions { flex: none; display: flex; align-items: center; gap: 4px; }

.sp-ghost {
    border: 0;
    color: var(--accent-strong);
    font-weight: 500;
    padding: 6px 10px;
}

.sp-ghost:hover, .sp-ghost:focus-visible { background: var(--accent-wash); color: var(--accent-strong); }
.sp-page .btn > .fa-plus { margin-right: 4px; }

.btn-icon-edit:hover, .btn-icon-edit:focus-visible { background: var(--accent-wash); color: var(--accent-strong); }

.sp-courses { border-top: 1px solid var(--rule-soft); padding: 4px 16px 10px 46px; }
.sp-courses > .subject-empty { margin: 10px 0 4px; }

.sp-course-table { margin: 0; }
.sp-course-table th { font-weight: 600; color: var(--ink-2); font-size: 13px; border-bottom-color: var(--rule-soft); }
.sp-course-table td { vertical-align: middle; border-bottom-color: var(--rule-soft); }
.sp-course-table tr:last-child td { border-bottom: 0; }
.sp-col-code { width: 90px; }
.sp-col-switch { width: 110px; }
.sp-col-switch .form-check { margin: 0; min-height: 0; }
.sp-col-actions { width: 80px; text-align: right; white-space: nowrap; }

.sp-inactive .sp-course-name, .sp-inactive .sp-code { color: var(--ink-3); }
.sp-inactive .sp-course-name { text-decoration: none; }

@media (max-width: 768px) {
    .sp-curr-head { flex-wrap: wrap; padding-right: 8px; }
    .sp-meta { order: 3; padding-left: 34px; }
    .sp-courses { padding-left: 12px; padding-right: 8px; }
    .sp-col-code { width: auto; }
    .sp-col-switch { width: 70px; }
}

@media (max-width: 576px) {
    .sp-courses { padding-left: 6px; padding-right: 4px; }
    .sp-course-table th, .sp-course-table td { padding-left: 3px; padding-right: 3px; }
    .sp-course-table th { font-size: 12px; }
    .sp-col-switch { width: 56px; }
    .sp-col-actions { width: 60px; }
    .sp-col-actions .btn-icon { width: 28px; }
}

/* ---------- Timetable approval (schedule-confirm) ---------- */

.sc-page { max-width: 1100px; }

/* One colour + icon per state, so status never relies on colour alone. */
.sc-page {
    --sc-unsent: var(--ink-3);
    --sc-waiting: var(--warn);
    --sc-rejected: var(--stop);
    --sc-confirmed: var(--free);
}

.sc-from { display: flex; align-items: center; gap: 8px; margin: 0; }
.sc-from label { margin: 0; color: var(--ink-2); white-space: nowrap; }
.sc-from .form-control { width: auto; background: var(--sheet); }

.sc-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.sc-summary-meta { margin-left: auto; color: var(--ink-3); font-size: 13.5px; }

.sc-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--rule);
    background: var(--sheet);
    color: var(--ink);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13.5px;
}

.sc-filter-chip:hover { background: var(--accent-wash); }
.sc-filter-chip.is-active { border-color: var(--accent); background: var(--accent-tint); font-weight: 600; }
.sc-filter-chip .subject-count { margin-left: 0; background: var(--desk); }
.sc-filter-chip.sc-unsent i { color: var(--sc-unsent); font-size: 9px; }
.sc-filter-chip.sc-waiting i { color: var(--sc-waiting); }
.sc-filter-chip.sc-rejected i { color: var(--sc-rejected); }
.sc-filter-chip.sc-confirmed i { color: var(--sc-confirmed); }

.sc-lecturer {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-panel);
    margin-bottom: 12px;
    overflow: hidden;
}

.sc-lecturer-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule-soft);
}

.sc-lecturer-head h2 { font: 600 16px/1.3 var(--font-ui); margin: 0; color: var(--ink); }
.sc-email { font-size: 13.5px; color: var(--ink-3); }

.sc-course {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 16px;
}

.sc-course + .sc-course { border-top: 1px solid var(--rule-soft); }
.sc-course-main { flex: 1 1 auto; min-width: 0; }
.sc-course-action { flex: none; }

.sc-course-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; }
.sc-course-title a { color: var(--ink); }
.sc-course-title a:hover { color: var(--accent-strong); }

.sc-course-status { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; font-size: 13.5px; }
.sc-count { font-weight: 500; }
.sc-count.sc-unsent { color: var(--sc-unsent); }
.sc-count.sc-waiting { color: var(--sc-waiting); }
.sc-count.sc-rejected { color: var(--sc-rejected); }
.sc-count.sc-confirmed { color: var(--sc-confirmed); }
.sc-count.sc-unsent i { font-size: 8px; vertical-align: 1px; }
.sc-sent { color: var(--ink-3); }

.sc-comment {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--sc-rejected);
    background: color-mix(in srgb, var(--stop) 6%, white);
    border-radius: 0 var(--r-control) var(--r-control) 0;
    font-size: 14px;
}

.sc-comment small { display: block; color: var(--ink-3); margin-top: 2px; }

.sc-lectures { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }

.sc-lecture {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: var(--r-control);
    border: 1px solid color-mix(in srgb, var(--sc-color) 30%, white);
    background: color-mix(in srgb, var(--sc-color) 8%, white);
    color: var(--ink);
    font: 500 13px/1.3 var(--font-grid);
    text-decoration: none;
}

.sc-lecture:hover { border-color: var(--sc-color); color: var(--ink); }
.sc-lecture i { color: var(--sc-color); font-size: 11px; }
.sc-lecture .sc-time { color: var(--ink-3); }
.sc-lecture.sc-unsent { --sc-color: var(--sc-unsent); }
.sc-lecture.sc-unsent i { font-size: 7px; }
.sc-lecture.sc-waiting { --sc-color: var(--sc-waiting); }
.sc-lecture.sc-rejected { --sc-color: var(--sc-rejected); }
.sc-lecture.sc-confirmed { --sc-color: var(--sc-confirmed); }

@media (max-width: 768px) {
    .sc-course { flex-direction: column; gap: 10px; }
    .sc-summary-meta { margin-left: 0; width: 100%; }
}

/* ---------- My calendar (your-bookings) ---------- */

.mc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.mc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.mc-actions .btn > i { margin-right: 4px; }

.mc-viewing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--ink);
    font-size: 14px;
}

.mc-viewing[hidden] { display: none; }
.mc-viewing > i { color: var(--accent-strong); }

/* The theme already draws the calendar as a sheet; this wrapper only anchors the empty-state note. */
.mc-card { position: relative; }

.mc-empty {
    position: absolute;
    left: 50%;
    top: 140px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 22px;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-panel);
    box-shadow: 0 12px 32px -16px rgba(27, 37, 51, .35);
    text-align: center;
}

.mc-empty[hidden] { display: none; }
.mc-empty-text { margin: 0; color: var(--ink-2); }
.mc-empty-none { margin: 0; color: var(--ink-3); font-size: 13.5px; }

.mc-event { overflow: hidden; line-height: 1.25; }
.mc-event-time { display: block; font: 500 11.5px/1.3 var(--font-grid); opacity: .8; }
.mc-event-what { display: block; font-weight: 600; font-size: 12.5px; }
.mc-event-room { display: block; font-size: 12px; opacity: .8; }
.fc-list-event .mc-event-room, .fc-list-event .mc-event-person { display: inline; color: var(--ink-3); font-size: inherit; opacity: 1; }
.fc-daygrid-event .mc-event { white-space: nowrap; text-overflow: ellipsis; }
.fc-daygrid-event .mc-event-time, .fc-daygrid-event .mc-event-what, .fc-daygrid-event .mc-event-room { display: inline; margin-right: 4px; }

.mc-tip { text-align: left; }
.mc-tip span { opacity: .75; }

.mc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 2px 0; padding: 0; font-size: 13.5px; color: var(--ink-2); }
.mc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mc-swatch { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(27, 37, 51, .15); }

@media (max-width: 767px) {
    .mc-actions { margin-left: 0; }
    .mc-empty { position: static; transform: none; margin: 12px auto 4px; box-shadow: none; }
}

/* ---------- Free subjects (free_subjects) ---------- */

.fs-page { max-width: 900px; }
.fs-intro { color: var(--ink-2); margin-bottom: 18px; }
.fs-section + .fs-section { margin-top: 28px; }
.fs-section h2 { font: 600 17px/1.3 var(--font-ui); color: var(--ink); margin: 0 0 10px; }
.fs-search { max-width: 420px; margin-bottom: 10px; }

.fs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-panel);
    overflow: hidden;
}

.fs-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.fs-item + .fs-item { border-top: 1px solid var(--rule-soft); }
.fs-item-main { flex: 1 1 auto; min-width: 0; }
.fs-item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; }
.fs-item-meta { margin-top: 2px; color: var(--ink-3); font-size: 13.5px; }
.fs-item-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.fs-item-actions .btn > i { margin-right: 4px; }

.fs-blocked {
    padding: 12px 16px;
    background: var(--accent-wash);
    border-radius: var(--r-control);
    color: var(--ink-2);
}

.fs-blocked i { color: var(--accent-strong); margin-right: 6px; }

@media (max-width: 576px) {
    .fs-item { flex-wrap: wrap; }
    .fs-item-actions { width: 100%; justify-content: flex-end; }
}

/* ---------- Booking dialog (calendar/views/showBooking.php) ---------- */

/* The event colour (curriculum or priority) is an edge line and a dot, never a
   background behind text, so a user-chosen colour can't hide a label. */
.bd-modal { border-left: 6px solid var(--bd-color, var(--rule)); }

.bd { display: flex; flex-direction: column; gap: 14px; }

.bd-summary { display: flex; flex-direction: column; gap: 6px; }
.bd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.bd-type, .bd-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    background: var(--sheet);
}

.bd-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(27, 37, 51, .25);
    flex: none;
}

.bd-chip i { font-size: 11px; }
.bd-chip-ok { color: var(--free); border-color: color-mix(in srgb, var(--free) 35%, white); }
.bd-chip-wait { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, white); }
.bd-chip-stop { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 35%, white); }

.bd-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15.5px; }
.bd-when-day { font-weight: 600; }
.bd-when-time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bd-when-dur { color: var(--ink-3); font-size: 13px; }

.bd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.bd-card {
    border: 1px solid var(--rule);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    --bd-head-bg: var(--desk);
    --bd-head-ink: var(--ink-2);
}

.bd-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    min-height: 38px;
    background: var(--bd-head-bg);
    color: var(--bd-head-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bd-card-head i { color: inherit; margin: 0; }
.bd-head-note { font-weight: 400; text-transform: none; letter-spacing: 0; }
.bd-head-note::before { content: '· '; }
.bd-head-action { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; padding: 2px 10px; background: var(--sheet); }
.bd-head-action i { font-size: 11px; }

.bd-saved {
    margin-left: auto;
    color: var(--free);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0;
    transition: opacity .25s;
}
.bd-saved.is-on { opacity: 1; }
.bd-head-action + .bd-saved, .bd-saved + .bd-head-action { margin-left: 0; }

.bd-card-body { padding: 12px 14px 14px; flex: 1 1 auto; }
.bd-card-body label { font-size: 12.5px; color: var(--ink-2); margin-bottom: 3px; }
.bd-card-body .form-control { font-size: 14px; }
.bd-card-body textarea.form-control { resize: vertical; min-height: 64px; }
.bd-value { font-size: 14.5px; padding: 6px 0; }

.bd-person { display: flex; align-items: center; gap: 12px; }
.bd-avatar { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: none; background: var(--desk); }
.bd-person-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bd-person-name { font-size: 16px; font-weight: 600; }
.bd-person-name small { font-weight: 400; color: var(--ink-3); font-size: 13px; margin-left: 4px; }
.bd-person-meta { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }

.bd-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bd-meta { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.bd-meta b { font-weight: 500; color: var(--ink); }

.bd-linked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    font-size: 13.5px;
}
.bd-linked i { color: var(--ink-3); font-size: 12px; }
.bd-linked-label { color: var(--ink-2); }

.bd-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--desk);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    margin-right: 4px;
}
a.bd-pill:hover { background: var(--accent-tint); color: var(--ink); }

.bd-location label { font-size: 12.5px; color: var(--ink-2); margin-bottom: 3px; }

.bd-card-lecture { border-color: color-mix(in srgb, var(--bd-color, var(--rule)) 45%, var(--rule)); }
.bd-card-lecture .bd-card-head { border-bottom: 3px solid var(--bd-color, var(--rule)); }
.bd-course-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.bd-course-title span { font-weight: 400; color: var(--ink-2); }

.bd-facts { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.bd-facts dt { font-weight: 400; color: var(--ink-2); }
.bd-facts dd { margin: 0; overflow-wrap: anywhere; }

.bd-card-public { border-color: #B9DEC8; --bd-head-bg: #EAF6EF; --bd-head-ink: #145C38; }
.bd-card-private { border-color: #F0D9A6; --bd-head-bg: #FFF7E6; --bd-head-ink: #7A4A00; }

.bd-dialog .modal-footer { gap: 8px; }
.bd-dialog .modal-footer .btn { margin: 0; }
.bd-dialog .modal-footer .bd-btn-delete { margin-right: auto; }
.bd-dialog .modal-footer .bd-btn-close { color: var(--ink-2); text-decoration: none; min-width: 0; }
.bd-dialog .modal-footer .bd-btn-close:hover { color: var(--ink); }

@media (max-width: 575.98px) {
    .bd-grid, .bd-times { grid-template-columns: minmax(0, 1fr); }
    .bd-facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .bd-facts dt { margin-top: 6px; font-size: 12.5px; }
    .bd-dialog .modal-footer .bd-btn-delete { margin-right: 0; }
    .bd-dialog .modal-footer .btn { flex: 1 1 40%; }
}

/* Change-room dialog: say which booking is being moved before asking where. */
.bd-move {
    border: 1px solid var(--rule);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bd-move-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.bd-move-what { font-size: 16px; font-weight: 600; }
.bd-move-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--ink-2); }
.bd-move-facts i { color: var(--ink-3); font-size: 12px; margin-right: 2px; }
.bd-move-to { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.bd-repeat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (max-width: 575.98px) { .bd-repeat { grid-template-columns: minmax(0, 1fr); } }
.bd-field { display: flex; flex-direction: column; gap: 3px; }
.bd-field + .bd-field, .bd-times + .bd-field, .bd-field + .bd-times { margin-top: 10px; }
.bd-field label { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.bd-field-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bd-field-row .bd-head-action { margin-left: 0; }
.bd-card-body .form-check { margin-top: 8px; }
.bd-card-body .form-check + .form-check { margin-top: 4px; }
.bd-lecture-text { margin-top: 6px; }
.bd-lecture-text:empty { display: none; }
.bd-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bd-link { align-self: flex-start; padding: 0; color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.bd-link:hover { color: var(--ink); }
.bd-link i { font-size: 11px; margin-right: 4px; }
.bd-move-note { margin-top: 6px; font-size: 13.5px; color: var(--warn); }
.bd-move-note i { margin-right: 4px; }
.bd .bootstrap-tagsinput { width: 100%; }