/* Per-app colour, the switcher waffle, and the right-hand cluster beside it.
 *
 * Shared admin chrome, so it sits at the top of css/ rather than in an app's
 * subdirectory -- the same rule that keeps styles.css and tabler-inspired.css
 * here. Loaded by base.html for both audiences. Only the admin bar is colour-washed
 * by it: the employee bar is translucent glass and takes the app colour as an
 * accent on the waffle and the title icon, wired in employee-portal.css.
 *
 * ONE definition per app colour, below, read by two things: the waffle tile
 * (which shows every app at once, so it names them explicitly) and the top bar
 * (which shows one, through the --app-color alias the body class sets). They
 * cannot drift, which is the point -- a launcher whose tile disagrees with the
 * bar it takes you to is worse than no colour at all.
 *
 * Scope is deliberately the bar and the waffle, not the page. The palette
 * variable a page body uses (--tblr-primary) is bypassed by 67 hardcoded navy
 * literals across nine app stylesheets, so overriding it per app would leave
 * every page half themed and half navy. Cleaning those up is its own job;
 * until then the bar carries the app identity and the page does not pretend to.
 */

/* Three stops per app. The tile wants the brightest version -- it is 44px of
 * solid fill on a white panel and should read as an icon. The bar wants a
 * darker one, because it carries white text across its whole width.
 *
 * The bar shades are the tile colour at 75% brightness, which is a measured
 * choice rather than an aesthetic one. White at the 0.92 the nav links use
 * scores 4.21:1 on the tile blue and 4.24:1 on the tile green -- both under
 * WCAG AA's 4.5:1 for normal text, and not just the one I first assumed. At
 * 75% they score 6.97 and 6.91: headroom, rather than a pass by two
 * hundredths. The violet cleared AA either way; it is darkened with them so
 * the three stay siblings.
 */
:root {
    /* Scheduler: the blue of the schedule grid it takes you to. */
    --app-scheduler-bar: #145292;
    --app-scheduler: #1b6ec2;
    --app-scheduler-lt: #2d8fe0;
    /* Tickets: violet, furthest from the other two at a glance. */
    --app-tickets-bar: #543688;
    --app-tickets: #7048b6;
    --app-tickets-lt: #9163d8;
    /* Home: green, a sibling of the mint the brand already uses as its accent. */
    --app-portal-bar: #235c44;
    --app-portal: #2f7a5a;
    --app-portal-lt: #3fa176;
    /* Admin: slate, deliberately neutral -- it is administration, not a
       product with a brand colour of its own. */
    /* Amber: the board is a status display, and the one thing it has to do
       from across a room is say whether the morning is on track. */
    --app-tasks-bar: #8a5a12;
    --app-tasks: #b8791c;
    --app-tasks-lt: #d9a03f;

    --app-admin-bar: #52606d;
    --app-admin: #64748b;
    --app-admin-lt: #94a3b8;

    /* The current app: --app-color is the bar, --app-color-lt its highlight.
       Both fall back to the brand palette, which is what an unthemed page gets
       and what the employee portal keeps. */
    --app-color: var(--tblr-primary);
    --app-color-lt: var(--tblr-accent);
}

body.app-scheduler { --app-color: var(--app-scheduler-bar); --app-color-lt: var(--app-scheduler-lt); }
body.app-tickets   { --app-color: var(--app-tickets-bar);   --app-color-lt: var(--app-tickets-lt); }
body.app-portal    { --app-color: var(--app-portal-bar);    --app-color-lt: var(--app-portal-lt); }
body.app-tasks     { --app-color: var(--app-tasks-bar);     --app-color-lt: var(--app-tasks-lt); }
body.app-admin     { --app-color: var(--app-admin-bar);     --app-color-lt: var(--app-admin-lt); }

/* --- the brand mark --------------------------------------------------- */

/* The mark is square and carries fill="currentColor" (templates/_brand_mark.html),
   so the bar's white text colour paints it and it needs no per-app rule -- it
   inherits whichever app colour the body class has selected the bar for.
   Sized by height only: it is square, where the wordmark it replaced was
   2.7:1, so any width assumption here would be wrong. */
.navbar-brand .brand-mark {
    height: 34px;
    width: auto;
    color: #fff;
    flex: none;
}

/* --- the button ------------------------------------------------------- */

.app-waffle__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    transition: background-color .12s ease;
}

.app-waffle__button:hover,
.app-waffle__button:focus-visible,
.app-waffle__button[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, .14);
}

/* Three rows of three. Drawn rather than an icon-font glyph so the dots stay
   crisp at any zoom and so the shape does not depend on Font Awesome having
   loaded -- the switcher is how you leave an app, and it should not be the
   thing that goes missing when a CDN is slow. */
.app-waffle__grid {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 3px;
}

.app-waffle__dot {
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background-color: currentColor;
}

/* --- the panel -------------------------------------------------------- */

/* --- panels that hang off the top bar ------------------------------------
 *
 * The waffle, the inbox bell and the admin gear. All three float over the page
 * rather than sitting inside the collapsed navy menu, so all three state their
 * own colours instead of inheriting them.
 *
 * Under the mobile breakpoint tabler-inspired.css restyles every navbar
 * dropdown for a dark surface -- translucent background, white items, white
 * icons, faint headers and dividers. That is right for a menu rendering
 * *inside* the navy bar and wrong for a panel over the page: it produced a
 * see-through waffle with dark labels, and would have produced white-on-white
 * items in the bell and gear the moment their background went opaque.
 *
 * Overridden by specificity, not !important, and it has to be specificity:
 * base.html loads tabler-inspired.css *after* this file for admin sessions, so
 * an equally specific rule here would lose wherever it sat. Each selector
 * below carries one class more than the rule it beats.
 */

.app-nav-panel,
.navbar-navy .dropdown-menu.app-nav-panel {
    background-color: #fff;
    color: #212529;
    border: 0;
    border-radius: .75rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28);
    min-width: 14rem;
}

.app-nav-panel--wide,
.navbar-navy .dropdown-menu.app-nav-panel--wide { min-width: 15rem; }

.app-waffle__panel,
.navbar-navy .dropdown-menu.app-waffle__panel {
    min-width: 20rem;
    overflow: hidden;
}

/* The items inside them, against the same media query. */
.navbar-navy .app-nav-panel .dropdown-item { color: #212529; }
.navbar-navy .app-nav-panel .dropdown-item i { color: #6c757d; }

.navbar-navy .app-nav-panel .dropdown-item:hover,
.navbar-navy .app-nav-panel .dropdown-item:focus {
    background-color: rgba(0, 0, 0, .06);
    color: #212529;
}

.navbar-navy .app-nav-panel .dropdown-item:hover i { color: #212529; }

/* `active` still means the page you are on, and has to stay legible against
   the light surface rather than the navy one it was written for. */
.navbar-navy .app-nav-panel .dropdown-item.active,
.navbar-navy .app-nav-panel .dropdown-item.active:hover {
    background-color: var(--app-color, var(--tblr-primary));
    color: #fff;
}

.navbar-navy .app-nav-panel .dropdown-item.active i { color: #fff; }

.navbar-navy .app-nav-panel .dropdown-header { color: #6c757d; }
.navbar-navy .app-nav-panel .dropdown-divider { border-color: rgba(0, 0, 0, .12); }

.app-waffle__header {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font-size: .95rem;
    color: #212529;
}

.app-waffle__tiles {
    display: grid;
    /* Three across, like the waffle itself. A fourth and fifth app wrap into a
       second row without this needing to be touched. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .25rem;
    padding: .75rem;
}

.app-waffle__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .85rem .5rem;
    border-radius: .5rem;
    text-decoration: none;
    color: inherit;
    transition: background-color .12s ease;
}

.app-waffle__tile:hover,
.app-waffle__tile:focus-visible {
    background-color: rgba(0, 0, 0, .05);
    color: inherit;
}

/* The app you are in. A ring rather than a fill: the tile is still a link to
   somewhere, and a filled tile reads as "selected, nothing to do here". The
   ring takes the app's own light stop, so it matches the tile it surrounds. */
.app-waffle__tile--current .app-waffle__icon {
    /* The 2px gap is the panel's own surface, stated explicitly for the same
       reason the panel is: inside .navbar-navy, --bs-body-bg can resolve to
       something dark and the ring would sit on a colour the panel is not. */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--app-color-lt);
}

.app-waffle__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .65rem;
    font-size: 1.2rem;
    color: #fff;
    /* Per-app colour so the tiles are distinguishable at a glance, which is
       most of what a launcher is for. Grey is the fallback for an app added to
       the switcher without one: visible and obviously unfinished rather than
       invisible. tests/test_admin_nav_snapshot.py fails on that case. */
    background: #6c757d;
}

.app-waffle__icon--scheduler { background: linear-gradient(135deg, var(--app-scheduler), var(--app-scheduler-lt)); }
.app-waffle__icon--tickets   { background: linear-gradient(135deg, var(--app-tickets), var(--app-tickets-lt)); }
.app-waffle__icon--portal    { background: linear-gradient(135deg, var(--app-portal), var(--app-portal-lt)); }
.app-waffle__icon--tasks     { background: linear-gradient(135deg, var(--app-tasks), var(--app-tasks-lt)); }
.app-waffle__icon--admin     { background: linear-gradient(135deg, var(--app-admin), var(--app-admin-lt)); }

.app-waffle__count {
    position: absolute;
    top: -.25rem;
    right: -.35rem;
}

.app-waffle__label {
    font-size: .8rem;
    line-height: 1.15;
    text-align: center;
    /* Explicit, not var(--bs-body-color): inside .navbar-navy that resolves to
       white on mobile, which is invisible on this panel's white surface. */
    color: #212529;
}

@media (prefers-color-scheme: dark) {
    .app-nav-panel,
    .navbar-navy .dropdown-menu.app-nav-panel {
        background-color: #1f2733;
        color: #e9ecef;
    }
    .navbar-navy .app-nav-panel .dropdown-item { color: #e9ecef; }
    .navbar-navy .app-nav-panel .dropdown-item i { color: #adb5bd; }
    .navbar-navy .app-nav-panel .dropdown-item:hover,
    .navbar-navy .app-nav-panel .dropdown-item:focus {
        background-color: rgba(255, 255, 255, .08);
        color: #fff;
    }
    .navbar-navy .app-nav-panel .dropdown-item:hover i { color: #fff; }
    .navbar-navy .app-nav-panel .dropdown-header { color: #adb5bd; }
    .navbar-navy .app-nav-panel .dropdown-divider { border-color: rgba(255, 255, 255, .14); }
    .app-waffle__header {
        border-bottom-color: rgba(255, 255, 255, .12);
        color: #e9ecef;
    }
    .app-waffle__label { color: #e9ecef; }
    .app-waffle__tile:hover,
    .app-waffle__tile:focus-visible { background-color: rgba(255, 255, 255, .08); }
    /* The ring's inner gap should match the panel it sits on, not the page. */
    .app-waffle__tile--current .app-waffle__icon {
        box-shadow: 0 0 0 2px #1f2733, 0 0 0 4px var(--app-color-lt);
    }
}