/* 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 create button in an app's bar -------------------------------- */

/* A light pill on the app-coloured bar, so it reads as the thing to press
   rather than as one more place to go. Its ink is the bar's own colour, which
   is what ties it to the app it creates in. */
.btn-nav-create {
    background: #fff;
    border: 1px solid #fff;
    color: var(--app-color, var(--tblr-primary));
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.btn-nav-create:hover,
.btn-nav-create:focus-visible {
    background: var(--app-color-lt, #f3f4f6);
    border-color: var(--app-color-lt, #f3f4f6);
    color: #1f1a12;
}

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

/* The same account's apps in its other capacity (templates/_nav_app_switcher.html):
   the admin apps under an employee page, the person's own work under an admin
   page. Set apart by a rule and a label rather than mixed into the tiles
   above, because opening one changes which capacity the page is in. */
.app-waffle__other {
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.app-waffle__other-label {
    padding: .5rem .9rem 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6c757d;
}

/* "Verify": opening this app asks for the second factor first. */
.app-waffle__verify {
    font-size: .7rem;
    color: #6c757d;
    white-space: nowrap;
}

@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__other { border-top-color: rgba(255, 255, 255, .12); }
    .app-waffle__other-label,
    .app-waffle__verify { color: #adb5bd; }
    .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);
    }
}