/* ZurTech design layer - "כחול-טורקיז".
   Light background, dark text, indigo -> teal accents. Visual only: it
   restyles the Tailwind utility classes the pages already use, so no page
   markup or behaviour depends on it.

   Scope: the frame (sidebar, top bar) everywhere; page content everywhere
   except the CEO dashboard, which has its own dark design (body.ceo-page).
   Base rules sit inside :where() so any utility class a page sets on purpose
   (the red/blue/yellow form-field legend, status colours) still wins. */

:root {
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #64748b;
    --line: #d9e7ee;
    --line-strong: #c9dbe5;
    --bg: #e8f2f6;
    --brand: #143d6b;
    --brand-2: #1f5f99;
    --teal: #17a2a0;
    --grad: linear-gradient(135deg, #143d6b 0%, #1f5f99 45%, #19b3b0 100%);
    --grad-soft: linear-gradient(135deg, rgba(31, 95, 153, .12), rgba(25, 179, 176, .14));
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -14px rgba(15, 23, 42, .16);
    --shadow-lift: 0 2px 4px rgba(15, 23, 42, .05), 0 22px 40px -18px rgba(20, 61, 107, .32);
    --sidebar-w: 16.5rem;
}

/* ---------- page canvas & type ---------- */
body.ds {
    font-family: 'Heebo', system-ui, sans-serif;
    color: var(--ink);
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 560px at 100% -8%, rgba(25, 179, 176, .22), transparent 62%),
        radial-gradient(1000px 620px at -6% 108%, rgba(31, 95, 153, .20), transparent 62%),
        radial-gradient(700px 420px at 45% 55%, rgba(25, 179, 176, .07), transparent 70%),
        linear-gradient(180deg, #eaf4f8 0%, #e3eef5 100%);
    background-attachment: fixed;
}
body.ds main { background: transparent !important; }
:where(body.ds:not(.ceo-page)) h1,
:where(body.ds:not(.ceo-page)) h2,
:where(body.ds:not(.ceo-page)) h3 { font-family: 'Rubik', 'Heebo', sans-serif; letter-spacing: -.01em; }
:where(body.ds:not(.ceo-page)) main h1.text-3xl,
:where(body.ds:not(.ceo-page)) main h1.text-2xl {
    font-weight: 800;
    background: linear-gradient(120deg, #0f172a 0%, #0e2c4f 55%, #134e4a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------- frame: sidebar ---------- */
.ds-aside {
    width: var(--sidebar-w);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    border-left: 1px solid var(--line);
    box-shadow: -12px 0 40px -28px rgba(15, 23, 42, .35);
    color: var(--ink-2);
}
.ds-brand { display: flex; align-items: center; gap: .6rem; font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--ink); }
.ds-brand-mark {
    width: 2.2rem; height: 2.2rem; border-radius: .8rem; display: grid; place-items: center;
    background: var(--grad); color: #fff; font-size: 1rem; box-shadow: 0 8px 18px -8px rgba(20, 61, 107, .7);
}
.ds-brand-name span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-link {
    position: relative; display: flex; align-items: center; gap: .75rem;
    padding: .62rem .9rem; border-radius: .85rem; font-size: .95rem; font-weight: 500;
    color: var(--ink-2); transition: background .18s, color .18s, transform .18s;
}
.nav-link i { width: 1.6rem; text-align: center; font-size: 1rem; color: #94a3b8; transition: color .18s; }
.nav-link:hover { background: #ebf4f8; color: var(--ink); transform: translateX(-2px); }
.nav-link:hover i { color: var(--brand-2); }
.nav-link.is-active { background: var(--grad-soft); color: var(--brand); font-weight: 700; }
.nav-link.is-active i { color: var(--brand); }
.nav-link.is-active::before {
    content: ""; position: absolute; right: -1rem; top: 22%; bottom: 22%; width: 4px; border-radius: 4px 0 0 4px; background: var(--grad);
}
.nav-section { padding: 1rem .9rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: #94a3b8; }
.ds-user {
    display: flex; align-items: center; gap: .65rem; padding: .7rem; border-radius: 1rem;
    background: #f0f7fa; border: 1px solid var(--line);
}
.ds-avatar {
    width: 2.3rem; height: 2.3rem; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--grad); color: #fff; font-weight: 700; font-size: .85rem; font-family: 'Rubik', sans-serif;
}

/* ---------- frame: top bar ---------- */
.ds-topbar {
    background: rgba(255, 255, 255, .78); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

/* desktop: the sidebar stays open (not on the CEO dashboard, which keeps the full width) */
@media (min-width: 1024px) {
    body.ds:not(.ceo-page) .ds-aside { transform: translateX(0) !important; box-shadow: none; }
    body.ds:not(.ceo-page) .ds-backdrop,
    body.ds:not(.ceo-page) .ds-menu-btn,
    body.ds:not(.ceo-page) .ds-aside-close { display: none !important; }
    body.ds:not(.ceo-page) .ds-main { margin-right: var(--sidebar-w); }
}

/* ---------- content: brand colour ---------- */
:where(body.ds:not(.ceo-page)) .bg-military {
    background-image: var(--grad); background-color: var(--brand);
}
:where(body.ds:not(.ceo-page)) :is(button, a).bg-military {
    box-shadow: 0 8px 20px -10px rgba(20, 61, 107, .75);
    transition: filter .18s, transform .18s, box-shadow .18s;
}
:where(body.ds:not(.ceo-page)) :is(button, a).bg-military:hover:not(:disabled) {
    filter: brightness(1.07) saturate(1.05); transform: translateY(-1px);
    box-shadow: 0 12px 26px -10px rgba(20, 61, 107, .8);
}
/* the accent stripe on list cards */
:where(body.ds:not(.ceo-page)) main .absolute.top-0.right-0.h-full.bg-military { background-image: linear-gradient(180deg, #1f5f99, #19b3b0); width: 5px; }

/* ---------- content: cards ---------- */
:where(body.ds:not(.ceo-page)) main :is(.rounded-xl, .rounded-2xl, .rounded-3xl):is(.bg-white, .bg-red-50).shadow-sm,
:where(body.ds:not(.ceo-page)) main :is(.rounded-xl, .rounded-2xl, .rounded-3xl).bg-white.border {
    box-shadow: var(--shadow-card);
}
:where(body.ds:not(.ceo-page)) main .border-gray-100 { border-color: var(--line); }
:where(body.ds:not(.ceo-page)) main .rounded-2xl { border-radius: 1.25rem; }
:where(body.ds:not(.ceo-page)) main .rounded-3xl { border-radius: 1.6rem; }
/* clickable cards lift */
:where(body.ds:not(.ceo-page)) main :is(a, div).hover\:shadow-lg { transition: transform .22s ease, box-shadow .22s ease, border-color .22s; }
:where(body.ds:not(.ceo-page)) main :is(a, div).hover\:shadow-lg:hover {
    transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #a9d8e2;
}
:where(body.ds:not(.ceo-page)) main .hover\:shadow-md:hover { box-shadow: var(--shadow-lift); }
:where(body.ds:not(.ceo-page)) main .bg-gray-50 { background-color: #f0f7fa; }
:where(body.ds:not(.ceo-page)) main .hover\:bg-gray-50:hover { background-color: #ebf4f8; }

/* ---------- content: forms ---------- */
:where(body.ds:not(.ceo-page)) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea) {
    border-color: var(--line-strong);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
:where(body.ds:not(.ceo-page)) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea).rounded-lg { border-radius: .8rem; }
:where(body.ds:not(.ceo-page)) :is(input, select, textarea):focus {
    outline: none; border-color: var(--brand-2);
    box-shadow: 0 0 0 4px rgba(31, 95, 153, .14);
}
:where(body.ds:not(.ceo-page)) :is(input[type=checkbox], input[type=radio]) { accent-color: var(--brand-2); }
:where(body.ds:not(.ceo-page)) label { color: var(--ink-2); }

/* ---------- content: tables ---------- */
:where(body.ds:not(.ceo-page)) main table thead tr { background: #e9f3f7; }
:where(body.ds:not(.ceo-page)) main table thead th { color: var(--muted); font-weight: 700; font-size: .8rem; letter-spacing: .02em; }
:where(body.ds:not(.ceo-page)) main table tbody tr { transition: background-color .12s; }
:where(body.ds:not(.ceo-page)) main table tbody tr:hover { background-color: #eef7fa; }

/* ---------- content: tabs (the border-b-2 tab strip every profile page uses) ---------- */
:where(body.ds:not(.ceo-page)) main button.border-b-2 { transition: color .15s, background-color .15s; }
:where(body.ds:not(.ceo-page)) main button.border-b-2.border-military {
    border-image: var(--grad) 1; color: var(--brand);
}
:where(body.ds:not(.ceo-page)) main .border-b.bg-gray-50 { background: #eef6f9; }

/* ---------- content: modals ---------- */
:where(body.ds:not(.ceo-page)) .fixed.inset-0 > .absolute.inset-0.bg-black,
:where(body.ds:not(.ceo-page)) .fixed.inset-0.bg-black.bg-opacity-50 {
    background-color: rgba(15, 23, 42, .42) !important; opacity: 1 !important; backdrop-filter: blur(4px);
}
:where(body.ds:not(.ceo-page)) .fixed.inset-0 .shadow-2xl,
:where(body.ds:not(.ceo-page)) .fixed.inset-0 .shadow-xl {
    box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .45); border: 1px solid var(--line);
}
:where(body.ds:not(.ceo-page)) .fixed.inset-0 :is(.rounded-xl, .rounded-2xl).bg-white { border-radius: 1.35rem; }

/* ---------- small things ---------- */
:where(body.ds:not(.ceo-page)) main .rounded-full.text-xs.font-bold { letter-spacing: .01em; }
:where(body.ds:not(.ceo-page)) main .text-military { color: var(--brand); }
:where(body.ds:not(.ceo-page)) main a.text-military:hover { color: var(--teal); }
::selection { background: rgba(31, 95, 153, .18); }

/* floating action button and the saving overlay */
.ds-fab { background-image: var(--grad) !important; box-shadow: 0 14px 30px -10px rgba(20, 61, 107, .75) !important; }
#global-saving-overlay { backdrop-filter: blur(3px); }

@media (prefers-reduced-motion: reduce) {
    .nav-link, :where(body.ds) main :is(a, div).hover\:shadow-lg { transition: none; }
}

/* ---------- character ---------- */
/* icon chips become soft squares (avatars and photos stay round) */
:where(body.ds:not(.ceo-page)) main .rounded-full:is(.w-8, .w-10, .w-12, .w-14, .w-16):has(> i.fas, > i.far, > i.fab) { border-radius: 30%; }
/* the top card of a profile page gets a quiet gradient glow */
:where(body.ds:not(.ceo-page)) main [data-layout-id="hero"] { position: relative; isolation: isolate; }
:where(body.ds:not(.ceo-page)) main [data-layout-id="hero"]::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background:
        radial-gradient(520px 220px at 0% 0%, rgba(25, 179, 176, .10), transparent 70%),
        radial-gradient(420px 200px at 100% 100%, rgba(31, 95, 153, .08), transparent 70%);
}
/* buttons */
:where(body.ds:not(.ceo-page)) main :is(button, a).rounded-lg { border-radius: .8rem; }
:where(body.ds:not(.ceo-page)) main :is(button, a).rounded:not([class*="rounded-"]) { border-radius: .7rem; }
/* light outline buttons (edit / delete / secondary) */
:where(body.ds:not(.ceo-page)) main button.bg-gray-50.rounded-full { background: #ebf4f8; }
/* numbers read as numbers */
:where(body.ds:not(.ceo-page)) main :is(.text-2xl, .text-3xl, .text-4xl).font-bold { font-family: 'Rubik', 'Heebo', sans-serif; letter-spacing: -.01em; }
/* empty-state boxes */
:where(body.ds:not(.ceo-page)) main .border-dashed { border-color: #a9d8e2; background: #f1f9fb; }

/* ---------- pages outside the frame (login, error, student portal) ---------- */
body.ds-standalone .shadow-lg.rounded-2xl,
body.ds-standalone .rounded-2xl.bg-white { box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .35); border-color: var(--line); }
body.ds-standalone .rounded-2xl { border-radius: 1.4rem; }


/* ---------- colour in the object cards ---------- */
:where(body.ds:not(.ceo-page)) main :is(.rounded-xl, .rounded-2xl, .rounded-3xl).bg-white {
    background-image: linear-gradient(170deg, #ffffff 0%, #ffffff 45%, #eef8fa 100%);
    border-color: var(--line);
}
:where(body.ds:not(.ceo-page)) main :is(.rounded-2xl, .rounded-3xl).bg-white.shadow-sm {
    box-shadow: inset 0 3px 0 0 rgba(25, 179, 176, .55), var(--shadow-card);
}
/* the brand logos */
.ds-logo-wide { height: 3.6rem; width: auto; max-width: 100%; display: block; }
.ds-avatar { position: relative; overflow: hidden; }
.ds-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-avatar:has(img) { background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(25, 179, 176, .6); }


/* ---------- number-only tiles: the gradient look of the "active soldiers" tile ---------- */
.ds-stat {
    position: relative; overflow: hidden; color: #fff; border: 0;
    background: linear-gradient(to left, #143d6b, #1f5f99);
}
.ds-stat::after {  /* soft turquoise glow, like the logo */
    content: ""; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1;
    border-radius: 9999px; background: radial-gradient(circle, rgba(25, 179, 176, .35), transparent 70%);
    pointer-events: none;
}
.ds-stat > * { position: relative; z-index: 1; }
.ds-stat [class*="text-gray-"], .ds-stat .text-military { color: #fff !important; }
.ds-stat :is(.text-xs, .text-sm, .text-base) { color: rgba(255, 255, 255, .82) !important; }
.ds-stat .text-gray-300 { color: rgba(255, 255, 255, .5) !important; }
/* good / bad numbers keep their meaning in light tones */
.ds-stat :is(.text-green-600, .text-emerald-600) { color: #86efac !important; }
.ds-stat .text-red-600 { color: #fecaca !important; }
/* the round icon becomes a frosted badge */
.ds-stat > .rounded-full.shrink-0 { background: rgba(255, 255, 255, .16) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
/* progress bars inside a tile */
.ds-stat .bg-gray-100 { background: rgba(255, 255, 255, .2) !important; }
.ds-stat .bg-military { background: #19b3b0 !important; }

/* the repeated-icon background of a coloured tile (dsStatPatterns in base.html) */
.ds-has-pattern { position: relative; overflow: hidden; isolation: isolate; }
.ds-has-pattern > .ds-stat-pattern {
    position: absolute; inset: -35% -15%; z-index: 0; pointer-events: none;
    display: grid; grid-template-columns: repeat(14, 1fr); gap: .7rem .9rem; place-items: center;
    font-size: .9rem; color: #fff; opacity: .16; transform: rotate(-14deg);
}
.ds-has-pattern > .ds-stat-pattern i:nth-child(odd) { transform: translateY(.45rem) scale(.8); }
.ds-has-pattern > :not(.ds-stat-pattern) { position: relative; z-index: 1; }

/* ---------- phones ---------- */
@media (max-width: 767px) {
    /* iPhone zooms the whole page into any field whose text is under 16px
       the moment it is tapped - keep every field at 16px on a phone. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select, textarea { font-size: 16px !important; }
    /* room under the last block, so the floating "+" button never hides it */
    main { padding-bottom: 6.5rem !important; }
    /* finger-sized buttons: small text buttons and icon buttons grow to 36px */
    main button:not(.absolute):not([class*=" h-"]):not([class^="h-"]) { min-height: 2.25rem; }
    main button:not([class*="px-"]):not([class*=" w-"]):not([class^="w-"]):not(.absolute) { min-width: 2.25rem; justify-content: center; }
    main a[class*="px-"]:is([class*="py-1"], [class*="py-0.5"]) {
        min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center;
    }
    /* a section title with its action button: the button keeps its words on
       one line, and drops under the title when there is no room beside it */
    main .flex.justify-between:has(> :is(h1, h2, h3)) { flex-wrap: wrap; gap: .5rem; }
    main .flex.justify-between:has(> :is(h1, h2, h3)) > :is(button, a) { white-space: nowrap; flex-shrink: 0; }
}