/* ═══════════════════════════════════════════════════════════════
   easyCongés — Main stylesheet
   Design system: Glassmorphism, green/teal palette
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Variables ──────────────────────────────────────────────── */

:root {
    --ease: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── DARK MODE ──────────────────────────────────────────────── */

.theme-dark {
    /* Background */
    --bg-a: #001a10;
    --bg-b: #003d2e;
    --bg-c: #001a2e;

    /* Orbs (backdrop depth) */
    --orb-a: rgba(0, 200, 120, 0.32);
    --orb-b: rgba(0, 160, 200, 0.22);
    --orb-c: rgba(80, 255, 180, 0.12);

    /* Glass surfaces */
    --glass:   rgba(255, 255, 255, 0.07);
    --glass-2: rgba(255, 255, 255, 0.11);
    --glass-3: rgba(255, 255, 255, 0.17);

    /* Borders */
    --bd:  rgba(255, 255, 255, 0.13);
    --bd2: rgba(255, 255, 255, 0.24);

    /* Text */
    --tx1: rgba(255, 255, 255, 0.95);
    --tx2: rgba(255, 255, 255, 0.65);
    --tx3: rgba(255, 255, 255, 0.48);

    /* Accent (electric green) */
    --accent:  #00e096;
    --acc-dim: rgba(0, 224, 150, 0.18);
    --acc-bd:  rgba(0, 224, 150, 0.38);

    /* CP — green */
    --cp-bg: rgba(0, 200, 120, 0.22);
    --cp-bd: rgba(0, 220, 140, 0.38);
    --cp-tx: rgba(160, 255, 210, 0.95);

    /* RTT — blue */
    --rtt-bg: rgba(0, 140, 200, 0.22);
    --rtt-bd: rgba(0, 180, 230, 0.38);
    --rtt-tx: rgba(160, 220, 255, 0.95);

    /* Sick — coral */
    --mal-bg: rgba(255, 100, 80, 0.18);
    --mal-bd: rgba(255, 130, 110, 0.36);
    --mal-tx: rgba(255, 200, 190, 0.95);

    /* Pending / warning — amber */
    --warn-bg: rgba(240, 165, 0, 0.14);
    --warn-bd: rgba(240, 165, 0, 0.30);
    --warn-tx: rgba(255, 215, 120, 0.95);

    /* Admin / role — purple */
    --pur-bg: rgba(160, 100, 255, 0.18);
    --pur-bd: rgba(180, 120, 255, 0.34);
    --pur-tx: rgba(220, 190, 255, 0.95);

    /* Info — blue */
    --info-bg: rgba(0, 140, 200, 0.12);
    --info-bd: rgba(0, 180, 230, 0.28);
    --info-tx: rgba(160, 220, 255, 0.9);

    /* Inputs */
    --input-bg: rgba(255, 255, 255, 0.06);
    --input-bd: rgba(255, 255, 255, 0.14);

    /* Staffing risk */
    --risk-ok:   #00c87a;
    --risk-warn: #f0a500;
    --risk-crit: #e84040;
    --risk-na:   rgba(255, 255, 255, 0.10);

    /* Public holidays */
    --fer-bg: rgba(255, 255, 255, 0.04);
    --fer-tx: rgba(255, 255, 255, 0.22);

    /* Today highlight */
    --today-col: rgba(0, 224, 150, 0.06);
    --today-bd:  rgba(0, 224, 150, 0.22);

    /* Row hover */
    --row-hover: rgba(255, 255, 255, 0.04);
}

/* ── LIGHT MODE ─────────────────────────────────────────────── */

.theme-light {
    --bg-a: #e4f5ec;
    --bg-b: #cceedd;
    --bg-c: #d8f0f5;

    --orb-a: rgba(0, 180, 110, 0.20);
    --orb-b: rgba(0, 150, 190, 0.16);
    --orb-c: rgba(80, 220, 170, 0.18);

    --glass:   rgba(255, 255, 255, 0.42);
    --glass-2: rgba(255, 255, 255, 0.62);
    --glass-3: rgba(255, 255, 255, 0.80);

    --bd:  rgba(255, 255, 255, 0.75);
    --bd2: rgba(255, 255, 255, 0.95);

    --tx1: rgba(0, 40, 25, 0.92);
    --tx2: rgba(0, 40, 25, 0.52);
    --tx3: rgba(0, 40, 25, 0.48);

    --accent:  #007a4d;
    --acc-dim: rgba(0, 122, 77, 0.11);
    --acc-bd:  rgba(0, 122, 77, 0.28);

    --cp-bg: rgba(0, 160, 90, 0.11);
    --cp-bd: rgba(0, 160, 90, 0.28);
    --cp-tx: rgba(0, 80, 45, 0.95);

    --rtt-bg: rgba(0, 100, 180, 0.10);
    --rtt-bd: rgba(0, 120, 200, 0.26);
    --rtt-tx: rgba(0, 60, 120, 0.95);

    --mal-bg: rgba(200, 60, 40, 0.09);
    --mal-bd: rgba(200, 80, 60, 0.26);
    --mal-tx: rgba(140, 30, 20, 0.95);

    --warn-bg: rgba(160, 110, 0, 0.09);
    --warn-bd: rgba(160, 110, 0, 0.24);
    --warn-tx: rgba(100, 60, 0, 0.90);

    --pur-bg: rgba(100, 60, 200, 0.09);
    --pur-bd: rgba(120, 70, 220, 0.24);
    --pur-tx: rgba(60, 30, 140, 0.90);

    --info-bg: rgba(0, 100, 180, 0.08);
    --info-bd: rgba(0, 120, 200, 0.22);
    --info-tx: rgba(0, 60, 120, 0.85);

    --input-bg: rgba(255, 255, 255, 0.55);
    --input-bd: rgba(255, 255, 255, 0.90);

    --risk-ok:   #007a4d;
    --risk-warn: #9a6500;
    --risk-crit: #b02020;
    --risk-na:   rgba(0, 40, 25, 0.10);

    --fer-bg: rgba(0, 40, 25, 0.04);
    --fer-tx: rgba(0, 40, 25, 0.22);

    --today-col: rgba(0, 122, 77, 0.06);
    --today-bd:  rgba(0, 122, 77, 0.20);

    --row-hover: rgba(0, 40, 25, 0.03);
}

/* ── Typography ─────────────────────────────────────────────── */

body {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--tx1);
    min-height: 100vh;
    transition: var(--ease);
}

/* ── Shell (background + orbs) ──────────────────────────────── */

.shell {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.bg-layer {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 50%, var(--bg-c) 100%);
    transition: var(--ease);
    z-index: 0;
}

.orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    transition: var(--ease);
    z-index: 0;
}

.orb-1 { width: 500px; height: 500px; background: var(--orb-a); filter: blur(100px); top: -150px; right: -100px; }
.orb-2 { width: 350px; height: 350px; background: var(--orb-b); filter: blur(80px);  bottom: -50px; left: -80px; }
.orb-3 { width: 250px; height: 250px; background: var(--orb-c); filter: blur(70px);  top: 50%; left: 40%; }

.page-content {
    position: relative;
    z-index: 1;
}

/* ── Top bar ────────────────────────────────────────────────── */

.topbar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 72px;
    padding: 0 36px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: var(--glass);
    border-bottom: 1px solid var(--bd);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: var(--ease);
}

.brand {
    font-size: 26px;
    font-weight: 700;
    color: var(--tx1);
    letter-spacing: -0.02em;
    margin-right: 18px;
    white-space: nowrap;
    text-decoration: none;
}

.brand em {
    font-style: normal;
    font-weight: 400;
    opacity: 0.50;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 72px;
    padding: 0 18px;
    font-size: 18px;
    color: var(--tx2);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--tx1);
}

.nav-link.active {
    color: var(--tx1);
    font-weight: 500;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
}

.nav-badge {
    background: var(--mal-bg);
    border: 1px solid var(--mal-bd);
    color: var(--mal-tx);
    font-size: 14px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
}

.nav-spacer {
    flex: 1;
}

.nav-username {
    font-size: 18px;
    color: var(--tx2);
    margin-right: 8px;
}

.nav-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}

.nav-avatar[data-color="cp"]  { background: var(--cp-bg);  border: 1px solid var(--cp-bd);  color: var(--cp-tx); }
.nav-avatar[data-color="rtt"] { background: var(--rtt-bg); border: 1px solid var(--rtt-bd); color: var(--rtt-tx); }
.nav-avatar[data-color="mal"] { background: var(--mal-bg); border: 1px solid var(--mal-bd); color: var(--mal-tx); }
.nav-avatar[data-color="pur"] { background: var(--pur-bg); border: 1px solid var(--pur-bd); color: var(--pur-tx); }
.nav-avatar[data-color="acc"] { background: var(--acc-dim); border: 1px solid var(--acc-bd); color: var(--accent); }

/* ── Theme toggle ───────────────────────────────────────────── */

.theme-toggle-bar {
    display: flex;
    justify-content: flex-end;
    padding: 18px 36px 0;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-2);
    border: 1px solid var(--bd2);
    border-radius: 20px;
    padding: 6px 10px 6px 14px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: var(--ease);
}

.theme-toggle span {
    font-size: 16px;
    color: var(--tx2);
    transition: var(--ease);
}

.toggle-track {
    width: 48px;
    height: 28px;
    background: var(--acc-dim);
    border: 1px solid var(--acc-bd);
    border-radius: 9px;
    position: relative;
}

.toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-light .toggle-knob {
    transform: translateX(22px);
}

/* ── Content wrapper ────────────────────────────────────────── */

.content {
    padding: 32px 44px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Glass card ─────────────────────────────────────────────── */

.glass-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: var(--glass-2);
    border: 1px solid var(--bd);
    border-radius: 18px;
    padding: 28px 30px;
    transition: var(--ease);
}

.glass-card:hover {
    background: var(--glass-3);
}

/* ── Stat card ──────────────────────────────────────────────── */

.stat-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: var(--glass-2);
    border: 1px solid var(--bd);
    border-radius: 18px;
    padding: 24px 28px;
    transition: var(--ease);
}

.stat-label { font-size: 16px; color: var(--tx3); margin-bottom: 6px; }
.stat-value { font-size: 40px; font-weight: 700; color: var(--tx1); line-height: 1; }
.stat-value em { font-style: normal; font-size: 20px; font-weight: 400; color: var(--tx3); margin-left: 5px; }
.stat-sub { margin-top: 6px; }

/* ── Pills / badges ─────────────────────────────────────────── */

.pill {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 10px;
}

.pill-cp      { background: var(--cp-bg);   border: 1px solid var(--cp-bd);   color: var(--cp-tx); }
.pill-rtt     { background: var(--rtt-bg);  border: 1px solid var(--rtt-bd);  color: var(--rtt-tx); }
.pill-mal     { background: var(--mal-bg);  border: 1px solid var(--mal-bd);  color: var(--mal-tx); }
.pill-pending { background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn-tx); }
.pill-accent  { background: var(--acc-dim); border: 1px solid var(--acc-bd);  color: var(--accent); }
.pill-warn    { background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn-tx); }
.pill-member  { background: var(--glass-2); border: 1px solid var(--bd);      color: var(--tx2); }
.pill-leader  { background: var(--rtt-bg);  border: 1px solid var(--rtt-bd);  color: var(--rtt-tx); }
.pill-admin   { background: var(--pur-bg);  border: 1px solid var(--pur-bd);  color: var(--pur-tx); }

/* ── Avatar ─────────────────────────────────────────────────── */

.avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.avatar[data-color="cp"]  { background: var(--cp-bg);   border: 1px solid var(--cp-bd);  color: var(--cp-tx); }
.avatar[data-color="rtt"] { background: var(--rtt-bg);  border: 1px solid var(--rtt-bd); color: var(--rtt-tx); }
.avatar[data-color="mal"] { background: var(--mal-bg);  border: 1px solid var(--mal-bd); color: var(--mal-tx); }
.avatar[data-color="pur"] { background: var(--pur-bg);  border: 1px solid var(--pur-bd); color: var(--pur-tx); }
.avatar[data-color="acc"] { background: var(--acc-dim);  border: 1px solid var(--acc-bd); color: var(--accent); }

/* ── Buttons ────────────────────────────────────────────────── */

.btn {
    border-radius: 12px;
    border: none;
    padding: 16px 30px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: inherit;
}

.btn-primary {
    background: var(--accent);
    color: #001a10;
}
.theme-light .btn-primary { color: #fff; }
.btn-primary:hover { opacity: 0.85; }

.btn-secondary {
    background: var(--glass-2);
    border: 1px solid var(--bd);
    color: var(--tx2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: var(--glass-3); color: var(--tx1); }

.btn-approve {
    background: var(--acc-dim);
    border: 1px solid var(--acc-bd);
    color: var(--accent);
    font-size: 18px;
    padding: 10px 24px;
}
.btn-approve:hover { background: var(--accent); color: #001a10; }
.theme-light .btn-approve:hover { color: #fff; }

.btn-reject {
    background: var(--glass-2);
    border: 1px solid var(--bd);
    color: var(--tx2);
    font-size: 18px;
    padding: 10px 24px;
}
.btn-reject:hover { background: var(--mal-bg); border-color: var(--mal-bd); color: var(--mal-tx); }

.btn-sm {
    background: var(--glass-2);
    border: 1px solid var(--bd);
    border-radius: 10px;
    padding: 7px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--tx2);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.btn-sm:hover { background: var(--glass-3); color: var(--tx1); }
.btn-sm-ok { border-color: var(--acc-bd); color: var(--accent); }
.btn-sm-ok:hover { background: var(--acc-dim); }

/* ── Inputs / forms ─────────────────────────────────────────── */

.field { margin-bottom: 20px; }

.field-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tx3);
    margin-bottom: 8px;
}

.glass-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--input-bg);
    border: 1px solid var(--input-bd);
    border-radius: 12px;
    padding: 10px 14px;
    color: var(--tx1);
    font-size: 14px;
    outline: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.18s;
    font-family: inherit;
}

.glass-input:focus {
    border-color: var(--acc-bd);
    background: var(--glass-3);
}

.glass-input::placeholder { color: var(--tx3); }
.glass-input option { background: #1a2e26; color: #fff; }

/* ── Toggle group (type/duration selector) ──────────────────── */

.toggle-group { display: flex; gap: 8px; }

.tg-btn {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--input-bd);
    border-radius: 12px;
    padding: 14px 10px;
    cursor: pointer;
    color: var(--tx2);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.18s;
    font-family: inherit;
}
.tg-btn:hover { background: var(--glass-3); color: var(--tx1); }

.tg-btn.tg-cp.active  { background: var(--cp-bg);  border-color: var(--cp-bd);  color: var(--cp-tx); }
.tg-btn.tg-rtt.active { background: var(--rtt-bg); border-color: var(--rtt-bd); color: var(--rtt-tx); }
.tg-btn.tg-mal.active { background: var(--mal-bg); border-color: var(--mal-bd); color: var(--mal-tx); }
.tg-btn.tg-acc.active { background: var(--acc-dim); border-color: var(--acc-bd); color: var(--accent); }

/* ── Toggle switch (on/off) ─────────────────────────────────── */

.sw-track {
    width: 48px;
    height: 26px;
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s;
}
.sw-track.on  { background: var(--acc-dim); border: 1px solid var(--acc-bd); }
.sw-track.off { background: var(--glass-2); border: 1px solid var(--bd); }

.sw-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transition: transform 0.25s;
}
.sw-track.on  .sw-knob { background: var(--accent); transform: translateX(22px); }
.sw-track.off .sw-knob { background: var(--tx3);    transform: none; }

/* ── Staffing risk indicators ───────────────────────────────── */

/* Month view: bar under day number */
.risk-bar { height: 4px; border-radius: 2px; margin-bottom: 4px; }
.risk-bar.risk-ok   { background: var(--risk-ok);   opacity: 0.7; }
.risk-bar.risk-warn { background: var(--risk-warn); }
.risk-bar.risk-crit { background: var(--risk-crit); }

/* Week view: half-day pills */
.risk-pills { display: flex; gap: 2px; justify-content: center; }
.rpill { display: inline-block; width: 28px; height: 8px; border-radius: 4px; }
.rpill-ok   { background: var(--risk-ok);   opacity: 0.7; }
.rpill-warn { background: var(--risk-warn); }
.rpill-crit { background: var(--risk-crit); }
.rpill-na   { background: var(--risk-na); }

/* ── Calendar half-day cells ────────────────────────────────── */

.half-pair { display: flex; gap: 3px; justify-content: center; }

.half {
    width: 30px;
    height: 32px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.half-cp  { background: var(--cp-bg);  border: 1px solid var(--cp-bd);  color: var(--cp-tx); }
.half-rtt { background: var(--rtt-bg); border: 1px solid var(--rtt-bd); color: var(--rtt-tx); }
.half-mal { background: var(--mal-bg); border: 1px solid var(--mal-bd); color: var(--mal-tx); }
.half-off { background: var(--fer-bg); border: 1px solid transparent; }
.half-fer { background: var(--fer-bg); opacity: 0.5; }

/* ── Info / warning banners ─────────────────────────────────── */

.info-banner {
    background: var(--info-bg);
    border: 1px solid var(--info-bd);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 17px;
    color: var(--info-tx);
    margin-bottom: 14px;
    line-height: 1.5;
    transition: var(--ease);
}

.warn-banner {
    background: var(--warn-bg);
    border: 1px solid var(--warn-bd);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 17px;
    color: var(--warn-tx);
    margin-bottom: 14px;
    line-height: 1.5;
    transition: var(--ease);
}

/* ── Section label ──────────────────────────────────────────── */

.section-label {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tx3);
    margin-bottom: 14px;
    transition: var(--ease);
}

/* ── Page header ────────────────────────────────────────────── */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--tx1);
    transition: var(--ease);
}

/* ── Transitions ────────────────────────────────────────────── */

.bg-layer,
.glass-card,
.stat-card,
.topbar,
.pill,
.btn { transition: var(--ease); }