/* =========================================================================
   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)
     body.theme-ocean      (bright aqua — Project Manager / Coordinator)
   ========================================================================= */

: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);
}

/* Project Manager / Project Coordinator — bright "shallow ocean" palette.
   Sits one octave brighter than Admin's deep-ocean gradient: a cyan-leaning
   aqua that signals coordination / clarity. Distinct from Admin (which
   starts midnight-blue), Gerente teal (which is greener), and Director
   purple. Both PM roles share this theme. */
body.theme-ocean {
    --role-accent: #06b6d4;            /* cyan-500 */
    --role-accent-soft: rgba(6, 182, 212, 0.36);
    --role-topbar-bg: linear-gradient(135deg, #0e4e6e 0%, #0c7da3 55%, #22a7c4 100%);
    --role-topbar-border: rgba(6, 182, 212, 0.40);
}

/* 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,
body.theme-ocean .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,
body.theme-ocean .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,
body.theme-ocean .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);
}

body.theme-ocean .topbar__logo {
    background: linear-gradient(145deg, var(--role-accent), #0c7da3);
    box-shadow: 0 2px 12px rgba(6, 182, 212, 0.42);
}

.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);
}

body.theme-ocean .topbar__role-pill {
    background: linear-gradient(145deg, var(--role-accent), #0c7da3);
    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):not(.theme-ocean) .topbar__badge {
    background: #ef4444;
}

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

/* ----- One-time release announcement (v1.25+) --------------------------- */
.release-modal {
    width: min(520px, 92vw);
    max-height: min(85vh, 680px);
    position: relative;
    z-index: 10000;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(30, 61, 88, 0.12);
    border-radius: 14px;
    background: #ffffff;
    color: #1e293b;
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.04),
        0 16px 36px rgba(15, 23, 42, 0.14);
}
.release-modal::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Branded subject band */
.release-modal__subject {
    padding: var(--space-3) var(--space-4) var(--space-3);
    background: linear-gradient(145deg, #1e3d58 0%, #1d4ed8 55%, #2563eb 100%);
    color: #ffffff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}
.release-modal__subject-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.release-modal__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.release-modal__logo {
    flex-shrink: 0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.release-modal__brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.release-modal__brand-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.release-modal__brand-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.82;
}
.release-modal__version-pill {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
}
.release-modal__subject-title {
    margin: 0 0 4px;
    font-size: clamp(1.15rem, 3.5vw, 1.35rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
}
.release-modal__subject-sub {
    margin: 0 0 var(--space-2);
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.9;
    max-width: 48ch;
}
.release-modal__greeting-box {
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.release-modal__greeting {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}
.release-modal__lead {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.92;
    color: rgba(255, 255, 255, 0.95);
}

/* White body */
.release-modal__body {
    padding: var(--space-3) var(--space-4);
    background: #ffffff;
    overflow: auto;
    max-height: min(36vh, 280px);
}
/* White body — force dark readable text (overrides themed / modal globals) */
.release-modal__body,
.release-modal__body .release-modal__section-label,
.release-modal__body .release-modal__bullet-text,
.release-modal__footer .release-modal__meta {
    color: #111827;
    -webkit-text-fill-color: currentColor;
}
.release-modal__section-label {
    margin: 0 0 var(--space-2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}
.release-modal__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}
.release-modal__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #111827;
}
.release-modal__bullet-text {
    flex: 1;
    min-width: 0;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-weight: 500;
}
.release-modal__bullet-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: #1d4ed8;
    background: #dbeafe;
}

.release-modal__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-3);
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.release-modal__meta {
    margin: 0;
    font-size: 11px;
    color: #374151;
}
.release-modal__btn {
    margin-left: auto;
    min-width: 7rem;
    padding: 8px 16px;
    font-size: 13px;
}

/* ----- Mail loading overlays (AI classifier + Sync) ---------------------- */
.mail-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: mailOverlayIn 0.3s ease;
}
@keyframes mailOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mail-loading-card {
    width: min(420px, 88vw);
    padding: var(--space-5);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
    text-align: center;
    animation: mailCardPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mailCardPop {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- AI Classifier variant --- */
.mail-loading-card--ai .mail-loading__icon {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-3);
}
.mail-loading__brain {
    font-size: 40px;
    line-height: 64px;
    animation: brainPulse 2s ease-in-out infinite;
}
@keyframes brainPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.12); opacity: 0.8; }
}
.mail-loading__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.mail-loading__sparkles span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #6366f1;
    animation: sparkOrbit 2.4s linear infinite;
}
.mail-loading__sparkles span:nth-child(1) { top: 0; left: 50%; animation-delay: 0s; }
.mail-loading__sparkles span:nth-child(2) { top: 50%; right: 0; animation-delay: 0.6s; }
.mail-loading__sparkles span:nth-child(3) { bottom: 0; left: 50%; animation-delay: 1.2s; }
.mail-loading__sparkles span:nth-child(4) { top: 50%; left: 0; animation-delay: 1.8s; }
@keyframes sparkOrbit {
    0%   { opacity: 0; transform: scale(0); }
    25%  { opacity: 1; transform: scale(1.3); }
    75%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

/* --- Sync / Digest variant --- */
.mail-loading-card--sync .mail-loading__icon {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-3);
}
.mail-loading__envelope {
    font-size: 36px;
    line-height: 64px;
    animation: envelopeBounce 1.6s ease-in-out infinite;
}
@keyframes envelopeBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-8px) rotate(-3deg); }
    60%      { transform: translateY(-4px) rotate(2deg); }
}
.mail-loading__waves {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
}
.mail-loading__waves span {
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: #2563eb;
    animation: waveBar 1.2s ease-in-out infinite;
}
.mail-loading__waves span:nth-child(1) { animation-delay: 0s; }
.mail-loading__waves span:nth-child(2) { animation-delay: 0.15s; }
.mail-loading__waves span:nth-child(3) { animation-delay: 0.3s; }
.mail-loading__waves span:nth-child(4) { animation-delay: 0.45s; }
.mail-loading__waves span:nth-child(5) { animation-delay: 0.6s; }
@keyframes waveBar {
    0%, 100% { height: 6px; opacity: 0.4; }
    50%      { height: 16px; opacity: 1; }
}

/* Shared text styles */
.mail-loading__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}
.mail-loading__sub {
    margin: 0 0 var(--space-3);
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}
.mail-loading__progress {
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: #e2e8f0;
    overflow: hidden;
}
.mail-loading__progress-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #6366f1, #2563eb, #6366f1);
    background-size: 200% 100%;
    animation: progressShimmer 2s linear infinite, progressGrow 35s ease-out forwards;
    width: 5%;
}
.mail-loading-card--sync .mail-loading__progress-bar {
    background: linear-gradient(90deg, #2563eb, #0ea5e9, #2563eb);
    background-size: 200% 100%;
    animation: progressShimmer 1.8s linear infinite, progressGrow 25s ease-out forwards;
    width: 5%;
}
@keyframes progressShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes progressGrow {
    0%   { width: 5%; }
    30%  { width: 40%; }
    60%  { width: 65%; }
    80%  { width: 80%; }
    100% { width: 92%; }
}
.mail-loading__tip {
    margin: var(--space-3) 0 0;
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
    min-height: 2.4em;
    transition: opacity 0.4s ease;
}
.mail-loading__tip.is-fading {
    opacity: 0;
}
.mail-loading__elapsed {
    margin: var(--space-2) 0 0;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.mail-loading__steps {
    margin: var(--space-2) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.mail-loading__step-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    transition: background 0.4s ease, transform 0.3s ease;
}
.mail-loading__step-dot.is-active {
    background: #6366f1;
    transform: scale(1.3);
}
.mail-loading-card--sync .mail-loading__step-dot.is-active {
    background: #2563eb;
}