/* =========================================================================
   Shell layer — global chrome (loaded after app.css).
   See STRUCTURE.md: tokens.css → app.css → shell.css.
   Theme hooks:
     body.theme-gerente    (teal)
     body.theme-director   (purple)
     body.theme-vice       (bronze / amber — Vice Director)
     body.theme-tech-vice  (plum-slate + hot pink — Technical Vice)
     body.theme-admin      (deep ocean — superuser)
   ========================================================================= */

:root {
    --shell-max: min(1280px, 94vw);
    --shell-radius: var(--radius-xl);
    --role-accent: var(--primary);
}

/* -----------------------------------------------------------------
   Role themes
   The topbar uses `glass--dark` by default (deep-navy). To make the
   role of the logged-in user obvious at a glance, each theme tints
   the topbar background AND brings its own accent color for the logo
   and role pill.
   ----------------------------------------------------------------- */

/* Gerente — teal/cyan tint */
body.theme-gerente {
    --role-accent: #14b8a6;            /* teal-500 */
    --role-accent-soft: rgba(20, 184, 166, 0.35);
    --role-topbar-bg: linear-gradient(135deg, #0f3a4d 0%, #0c5a5e 60%, #0e6e63 100%);
    --role-topbar-border: rgba(20, 184, 166, 0.32);
}

/* Director — purple/indigo tint */
body.theme-director {
    --role-accent: #9b8fd9;
    --role-accent-soft: rgba(155, 143, 217, 0.35);
    --role-topbar-bg: linear-gradient(135deg, #1a224a 0%, #3a2f6b 60%, #4b3a8a 100%);
    --role-topbar-border: rgba(155, 143, 217, 0.32);
}

/* Vice Director — bronze / amber tint.
   Same permission set as Director (handled in the model), but a warm
   bronze topbar so users can tell the two profiles apart. Distinct from
   Gerente teal, Director purple, and Admin ocean. */
body.theme-vice {
    --role-accent: #d97706;            /* amber-600 / bronze */
    --role-accent-soft: rgba(217, 119, 6, 0.32);
    --role-topbar-bg: linear-gradient(135deg, #2b1a0a 0%, #6b3a0f 55%, #a05a14 100%);
    --role-topbar-border: rgba(217, 119, 6, 0.36);
}

/* Technical Vice — plum-slate gradient with a hot pink accent.
   Designed to read as both "technical" and "feminine" at once: the cool
   plum-slate base still signals engineering / code-editor (no other
   theme uses that base), while the bright pink accent on the logo, role
   pill, and badge gives it a clearly feminine character. The classic
   "women-in-tech" pairing (PyLadies / GirlsInTech style). Distinct from
   Director purple, Vice bronze, Gerente teal, and Admin ocean. */
body.theme-tech-vice {
    --role-accent: #ec4899;            /* pink-500 — hot pink */
    --role-accent-soft: rgba(236, 72, 153, 0.32);
    --role-topbar-bg: linear-gradient(135deg, #1a1326 0%, #2a1f3d 55%, #3d2d56 100%);
    --role-topbar-border: rgba(236, 72, 153, 0.36);
}

/* Admin (superuser) — deep ocean. Midnight-blue depths fading up to a
   bright turquoise surface, with a turquoise accent. Distinct from
   Gerente teal (which is greener) and Director purple. */
body.theme-admin {
    --role-accent: #00b4d8;            /* deep turquoise */
    --role-accent-soft: rgba(0, 180, 216, 0.38);
    --role-topbar-bg: linear-gradient(135deg, #03045e 0%, #023e8a 55%, #0077b6 100%);
    --role-topbar-border: rgba(0, 180, 216, 0.42);
}

/* Apply the tint to the sticky top bar for themed users only.
   Falls back to the default dark glass for Operators / anonymous. */
body.theme-gerente .topbar.glass--dark,
body.theme-director .topbar.glass--dark,
body.theme-vice .topbar.glass--dark,
body.theme-tech-vice .topbar.glass--dark,
body.theme-admin .topbar.glass--dark {
    background: var(--role-topbar-bg);
    border-color: var(--role-topbar-border);
    box-shadow:
        0 12px 40px rgba(30, 61, 88, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Admin gets a soft underwater glow around the bar — feels "deep" without
   being shouty, with a turquoise highlight along the top edge. */
body.theme-admin .topbar.glass--dark {
    box-shadow:
        0 14px 44px rgba(3, 30, 96, 0.42),
        inset 0 1px 0 rgba(144, 224, 239, 0.22);
}

/* Slightly tinted dropdown menus + group chips so they match the bar. */
body.theme-gerente .topbar__drop-menu,
body.theme-director .topbar__drop-menu,
body.theme-vice .topbar__drop-menu,
body.theme-tech-vice .topbar__drop-menu,
body.theme-admin .topbar__drop-menu {
    border-color: var(--role-topbar-border);
}
body.theme-gerente .topbar__group,
body.theme-director .topbar__group,
body.theme-vice .topbar__group,
body.theme-tech-vice .topbar__group,
body.theme-admin .topbar__group {
    border-color: rgba(255, 255, 255, 0.14);
}

.topbar {
    width: var(--shell-max);
    border-radius: var(--shell-radius);
    box-shadow: 0 12px 40px rgba(30, 61, 88, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.topbar__logo {
    box-shadow: 0 2px 8px rgba(5, 125, 205, 0.25);
}

body.theme-director .topbar__logo {
    background: linear-gradient(145deg, var(--role-accent), #6b5ba8);
}

body.theme-gerente .topbar__logo {
    background: linear-gradient(145deg, var(--role-accent), #0f766e);
}

body.theme-vice .topbar__logo {
    background: linear-gradient(145deg, var(--role-accent), #6b3a0f);
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.35);
}

body.theme-tech-vice .topbar__logo {
    background: linear-gradient(145deg, var(--role-accent), #9d174d);
    box-shadow: 0 2px 10px rgba(236, 72, 153, 0.40);
}

body.theme-admin .topbar__logo {
    background: linear-gradient(145deg, var(--role-accent), #023e8a);
    box-shadow: 0 2px 12px rgba(0, 180, 216, 0.45);
}

.topbar__group {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.topbar__group-links a {
    padding: 4px 10px;
    border-radius: 999px;
    transition: background 140ms ease, opacity 140ms ease;
}

.topbar__group-links a:hover {
    background: rgba(255, 255, 255, 0.12);
    text-decoration: none !important;
}

.topbar__drop-menu {
    border-color: rgba(255, 255, 255, 0.16);
}

.topbar__role-pill {
    background: linear-gradient(145deg, var(--role-accent), var(--primary));
    box-shadow: 0 1px 4px rgba(30, 61, 88, 0.2);
}

body.theme-director .topbar__role-pill {
    background: linear-gradient(145deg, var(--role-accent), #6b5ba8);
}

body.theme-gerente .topbar__role-pill {
    background: linear-gradient(145deg, var(--role-accent), #0f766e);
}

body.theme-vice .topbar__role-pill {
    background: linear-gradient(145deg, var(--role-accent), #6b3a0f);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

body.theme-tech-vice .topbar__role-pill {
    background: linear-gradient(145deg, var(--role-accent), #9d174d);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

body.theme-admin .topbar__role-pill {
    background: linear-gradient(145deg, var(--role-accent), #023e8a);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* Pending-count badge on the Inbox / Pending nav link. Small pill so
   it never crowds the link, but visible enough to draw the eye. */
.topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.topbar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--role-accent, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    /* Stay readable on the dark topbar even with no role theme. */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
/* Operators don't get a role accent color, so the badge falls back to a
   bright red so it still pops against the dark glass topbar. */
body:not(.theme-gerente):not(.theme-director):not(.theme-vice):not(.theme-tech-vice):not(.theme-admin) .topbar__badge {
    background: #ef4444;
}

main.container {
    width: var(--shell-max);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: var(--space-7);
}