/* ============================================================
   Cardify "The Stack" (approved by Ali, 13 Oct 2026)
   One flooded world colour: Cardify brand teal. The objects that hold
   the data are business cards: a rubber-banded stack, card edges for
   lists, the box of 100. White pill for the main action.

   Scope:
     .cf-stack.cardify-brand  apex marketing and auth pages (ui-header)
     .cf-stack.cf-app         admin, superadmin and print shop chrome
   Tenant subdomain public pages (portal, company pages) do NOT get the
   teal world: they keep the tenant's own brand. The public card page
   (digital_card.php) has its own scoped block that floods the COMPANY
   colour instead.
   ============================================================ */

:root {
  --cs-world: #067a98;     /* white text 4.95:1 */
  --cs-deep: #053b49;      /* ink, tab bar, scan frame */
  --cs-brand: #009bc1;     /* active tab fill, label #021E26 (5.3:1) */
  --cs-teal: #45c0ba;      /* light accent, sparingly */
  --cs-card: #FFFDF9;      /* a printed card */
  --cs-ink: #053b49;
  --cs-mute: #3A5A63;
  --cs-on: #FFFFFF;
  --cs-sheet: #FFFFFF;
  --cs-sheet-text: #053b49;
  --cs-field: #F2F8FA;
  --cs-line: rgba(255, 255, 255, .22);
  --cs-head: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cs-body: system-ui, -apple-system, 'Segoe UI', 'IBM Plex Sans Arabic', sans-serif;
}
html.dark {
  --cs-world: #053b49;
  --cs-deep: #021E26;
  --cs-sheet: #0B4B5C;
  --cs-sheet-text: #FFFFFF;
  --cs-mute: #BFE0E8;
  --cs-field: #0F5869;
}

/* ---------- World ---------- */
.cf-stack.cardify-brand, .cf-stack.cf-app {
  background: var(--cs-world) !important;
  color: var(--cs-on);
  font-family: var(--cs-body);
  -webkit-font-smoothing: antialiased;
}
html[dir="rtl"] .cf-stack.cardify-brand, html[dir="rtl"] .cf-stack.cf-app { font-family: 'IBM Plex Sans Arabic', var(--cs-body); }
.cf-stack.cardify-brand h1, .cf-stack.cardify-brand h2, .cf-stack.cf-app h1, .cf-stack.cf-app h2, .cf-stack .cs-h {
  font-family: var(--cs-head); font-weight: 900; letter-spacing: -.02em; line-height: 1.06;
}
html[dir="rtl"] .cf-stack h1, html[dir="rtl"] .cf-stack h2, html[dir="rtl"] .cf-stack .cs-h { font-family: 'IBM Plex Sans Arabic', var(--cs-body); font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.cf-stack.cardify-brand, .cf-stack.cf-app { font-variant-numeric: tabular-nums; }

/* Text on the world is white; text inside sheets and cards is ink. */
.cf-stack :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800) { color: var(--cs-on) !important; }
.cf-stack :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500) { color: rgba(255, 255, 255, .9) !important; }
.cf-stack :is(.text-blue-600, .text-blue-700, .text-blue-500, .text-indigo-600, .text-cyan-700) { color: #FFFFFF !important; text-decoration-color: var(--cs-teal); }

/* ---------- Sheets: white panels the eye reads as paper ---------- */
.cf-stack :is(.bg-white, .bg-gray-50, .bg-slate-50) { background-color: transparent !important; }
.cf-stack :is(.bg-white, .bg-gray-50)[class*="border"],
.cf-stack :is(.bg-white, .bg-gray-50)[class*="shadow"],
.cf-stack :is(.bg-white, .bg-gray-50)[class*="rounded-xl"],
.cf-stack :is(.bg-white, .bg-gray-50)[class*="rounded-2xl"],
.cf-stack .cs-sheet {
  background-color: var(--cs-sheet) !important; color: var(--cs-sheet-text);
  border-radius: 24px !important; border-color: transparent !important; box-shadow: none !important;
}
.cf-stack :is(.bg-white, .bg-gray-50)[class*="border"] :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900),
.cf-stack :is(.bg-white, .bg-gray-50)[class*="shadow"] :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900),
.cf-stack :is(.bg-white, .bg-gray-50)[class*="rounded"] :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900),
.cf-stack .cs-sheet :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--cs-sheet-text) !important; }
.cf-stack :is(.bg-white, .bg-gray-50)[class*="border"] :is(.text-gray-600, .text-gray-500, .text-gray-400),
.cf-stack :is(.bg-white, .bg-gray-50)[class*="shadow"] :is(.text-gray-600, .text-gray-500, .text-gray-400),
.cf-stack :is(.bg-white, .bg-gray-50)[class*="rounded"] :is(.text-gray-600, .text-gray-500, .text-gray-400),
.cf-stack .cs-sheet :is(.text-gray-600, .text-gray-500, .text-gray-400) { color: var(--cs-mute) !important; }
.cf-stack :is(.bg-white, .bg-gray-50)[class*="border"] :is(.text-blue-600, .text-blue-700),
.cf-stack :is(.bg-white, .bg-gray-50)[class*="rounded"] :is(.text-blue-600, .text-blue-700),
.cf-stack .cs-sheet :is(.text-blue-600, .text-blue-700) { color: #067a98 !important; }
.cf-stack [class*="shadow-"] { box-shadow: none !important; }
.cf-stack :is(.bg-gray-100, .bg-gray-200) { background-color: rgba(2, 30, 38, .22) !important; }
.cf-stack [class*="bg-gradient-to"], .cf-stack [style*="linear-gradient"] { background: var(--cs-deep) !important; color: var(--cs-on) !important; }
.cf-stack [style*="linear-gradient"][style*="--tbrand"] { background: var(--cs-deep) !important; }
.cf-stack [class*="border-gray-"], .cf-stack .divide-y > * + * { border-color: var(--cs-line) !important; }
.cf-stack :is(.bg-white, .bg-gray-50)[class*="border"] [class*="border-gray-"],
.cf-stack :is(.bg-white, .bg-gray-50)[class*="rounded"] [class*="border-gray-"] { border-color: rgba(5, 59, 73, .14) !important; }

/* Pastel status tints become a stripe on the start edge, not a pill. */
.cf-stack :is(.bg-blue-50, .bg-green-50, .bg-amber-50, .bg-yellow-50, .bg-red-50, .bg-purple-50, .bg-indigo-50, .bg-emerald-50, .bg-orange-50, .bg-cyan-50) {
  background-color: var(--cs-card) !important; color: var(--cs-ink) !important; border-color: transparent !important;
}
.cf-stack :is(.bg-blue-50, .bg-green-50, .bg-amber-50, .bg-yellow-50, .bg-red-50, .bg-purple-50, .bg-indigo-50, .bg-emerald-50, .bg-orange-50, .bg-cyan-50) * { color: var(--cs-ink) !important; }
.cf-stack :is(.bg-amber-50, .bg-yellow-50, .bg-red-50, .bg-orange-50)[class*="border"] { box-shadow: inset 6px 0 0 #C8102E !important; }
html[dir="rtl"] .cf-stack :is(.bg-amber-50, .bg-yellow-50, .bg-red-50, .bg-orange-50)[class*="border"] { box-shadow: inset -6px 0 0 #C8102E !important; }

/* ---------- Actions: the white pill ---------- */
.cf-stack :is(a, button):is(.bg-blue-600, .bg-blue-700, .bg-indigo-600, .bg-cyan-600, .bg-amber-600, .bg-green-600, .bg-emerald-600, .bg-gray-900).text-white,
.cf-stack .cs-pill {
  background: #FFFFFF !important; color: var(--cs-deep) !important; border-radius: 9999px !important;
  font-weight: 700; box-shadow: 0 2px 0 rgba(2, 30, 38, .35) !important; border: 0 !important;
}
.cf-stack :is(a, button):is(.bg-blue-600, .bg-blue-700, .bg-indigo-600, .bg-cyan-600, .bg-amber-600, .bg-green-600, .bg-emerald-600, .bg-gray-900).text-white:hover { background: #E8F6F9 !important; }
.cf-stack :is(.bg-white, .bg-gray-50)[class*="rounded"] :is(a, button):is(.bg-blue-600, .bg-blue-700, .bg-indigo-600).text-white,
.cf-stack .cs-sheet :is(a, button):is(.bg-blue-600, .bg-blue-700).text-white,
.cf-stack .cs-pill-dark { background: var(--cs-deep) !important; color: #FFFFFF !important; box-shadow: none !important; }
.cf-stack :is(a, button):is(.bg-red-600, .bg-red-500).text-white { border-radius: 9999px !important; }
.cf-stack :focus-visible { outline: 3px solid var(--cs-teal) !important; outline-offset: 3px; }

/* ---------- Fields ---------- */
.cf-stack.cf-app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea) {
  background-color: var(--cs-field) !important; color: var(--cs-sheet-text) !important; border: 1px solid transparent !important; border-radius: 12px !important; font-size: 16px;
}
.cf-stack.cf-app :is(input, select, textarea):focus { border-color: var(--cs-brand) !important; box-shadow: none !important; }
.cf-stack label { font-weight: 600; }

/* ---------- Tables become card edges: one row = one card edge ---------- */
.cf-stack.cf-app table { border-collapse: separate !important; border-spacing: 0 6px !important; background: transparent !important; }
.cf-stack.cf-app thead th, .cf-stack.cf-app table th {
  background: transparent !important; color: rgba(255, 255, 255, .95) !important; font-size: 14px; font-weight: 700;
  text-transform: none !important; letter-spacing: 0 !important; border: 0 !important;
}
.cf-stack.cf-app tbody tr { background: transparent !important; }
.cf-stack.cf-app tbody td {
  background: var(--cs-card) !important; color: var(--cs-ink) !important; border: 0 !important;
  box-shadow: 0 2px 0 rgba(2, 30, 38, .28); font-size: 15px;
}
.cf-stack.cf-app tbody td * { color: inherit; }
.cf-stack.cf-app tbody td :is(.text-gray-500, .text-gray-400, .text-gray-600) { color: var(--cs-mute) !important; }
.cf-stack.cf-app tbody tr td:first-child { border-start-start-radius: 4px; border-end-start-radius: 4px; box-shadow: inset 12px 0 0 var(--cs-row-stripe, var(--cs-brand)), 0 2px 0 rgba(2, 30, 38, .28); padding-inline-start: 26px !important; }
html[dir="rtl"] .cf-stack.cf-app tbody tr td:first-child { box-shadow: inset -12px 0 0 var(--cs-row-stripe, var(--cs-brand)), 0 2px 0 rgba(2, 30, 38, .28); }
.cf-stack.cf-app tbody tr td:last-child { border-start-end-radius: 4px; border-end-end-radius: 4px; }
.cf-stack.cf-app tbody tr:hover td { background: #FFFFFF !important; }
.cf-stack.cf-app :is(.bg-white, .bg-gray-50)[class*="rounded"]:has(> table), .cf-stack.cf-app :is(.bg-white)[class*="rounded"]:has(> div > table) { background: transparent !important; padding: 0 !important; }

/* ---------- Admin chrome: top bar on the world, pill nav ---------- */
.cf-stack.cf-app nav.fixed { background: var(--cs-world) !important; border-bottom: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
.cf-stack.cf-app nav.fixed img[alt] { background: #FFFFFF; border-radius: 9999px; padding: 3px 10px; height: 34px !important; }
.cf-pillnav { align-items: center; gap: 4px; background: var(--cs-deep); border-radius: 28px; padding: 5px; }
.cf-pill-link { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 22px; font-weight: 600; font-size: 15px; color: #CFEAF1; white-space: nowrap; background: transparent; border: 0; cursor: pointer; }
.cf-pill-link:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); }
.cf-pill-link.is-on { background: var(--cs-brand); color: #021E26; }
.cf-pill-menu { position: absolute; inset-inline-end: 0; top: 52px; z-index: 50; min-width: 240px; max-height: 70vh; overflow: auto; background: var(--cs-deep); border-radius: 18px; padding: 8px; }
.cf-pill-menu a { display: block; padding: 10px 14px; border-radius: 12px; color: #FFFFFF; font-weight: 600; font-size: 15px; }
.cf-pill-menu a:hover { background: rgba(255, 255, 255, .1); }
@media (min-width: 1024px) {
  .cf-stack.cf-app #sidebar { display: none !important; }
  .cf-stack.cf-app .lg\:ml-64 { margin-inline-start: 0 !important; margin-left: 0 !important; }
}
.cf-stack.cf-app #sidebar > div, .cf-stack.cf-app #sidebar .bg-white { background: var(--cs-deep) !important; border: 0 !important; }
.cf-stack.cf-app #sidebar a, .cf-stack.cf-app #sidebar button { color: #FFFFFF !important; border-radius: 22px !important; }
.cf-stack.cf-app #sidebar a.bg-blue-50 { background: var(--cs-brand) !important; color: #021E26 !important; }
.cf-stack.cf-app main h1 { font-size: clamp(30px, 3.4vw, 46px) !important; color: #FFFFFF !important; }
.cf-stack.cf-app main .border-b.border-gray-200\/80 { border: 0 !important; }
.cf-stack.cf-app .page-loader { background: var(--cs-world) !important; }

/* ---------- Marketing chrome ---------- */
.cf-stack.cardify-brand header, .cf-stack.cardify-brand nav.fixed, .cf-stack.cardify-brand > nav {
  background: var(--cs-world) !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
}
.cf-stack.cardify-brand footer { background: var(--cs-deep) !important; color: #FFFFFF; }
.cf-stack.cardify-brand footer :is(a, p, span, h2, h3, h4, li) { color: #FFFFFF !important; }
.cf-stack.cardify-brand .hero-gradient { background: var(--cs-world) !important; }
.cf-stack.cardify-brand section { background: transparent !important; }
.cf-stack.cardify-brand section:nth-of-type(even) { background: rgba(2, 30, 38, .12) !important; }
.cf-stack.cardify-brand :is(p, li) { font-size: max(1em, 16px); }

/* ---------- The Stack art and card edges ---------- */
.cs-edges { display: flex; flex-direction: column; gap: 5px; }
.cs-edge { position: relative; display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 8px 18px; padding-inline-start: 28px; background: var(--cs-card); color: var(--cs-ink); border-radius: 4px; box-shadow: 0 2px 0 rgba(2, 30, 38, .28); overflow: hidden; }
.cs-edge::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 12px; background: var(--cs-stripe, var(--cs-brand)); }
.cs-edge .cs-edge-title { font-weight: 700; font-size: 17px; }
.cs-edge .cs-edge-sub { font-size: 15px; color: var(--cs-mute); }
html.dark .cs-edge .cs-edge-sub { color: #3A5A63; }
.cs-edge .cs-edge-end { margin-inline-start: auto; font-weight: 700; color: #067a98; white-space: nowrap; }
.cs-edge:hover { background: #FFFFFF; }
.cs-stack-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 40px; align-items: start; margin-bottom: 32px; }
@media (max-width: 1023px) { .cs-stack-hero { grid-template-columns: 1fr; } }
.cs-kicker { font-family: var(--cs-head); font-weight: 800; font-size: 18px; color: #FFFFFF; }
.cs-big { font-family: var(--cs-head); font-weight: 900; font-size: clamp(34px, 4vw, 54px); line-height: 1.05; color: #FFFFFF; letter-spacing: -.02em; }
html[dir="rtl"] .cs-big, html[dir="rtl"] .cs-kicker { font-family: 'IBM Plex Sans Arabic', var(--cs-body); letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) { .cf-stack * { transition: none !important; animation: none !important; } }
@media print { .cf-stack { background: #fff !important; color: #000 !important; } }

/* Marketing header controls (currency, language) sit on the world: outline pills, white text. */
.cf-stack.cardify-brand :is(header, nav) :is(button, select, a)[class*="border"]:not(.cs-pill) {
  background: transparent !important; color: #FFFFFF !important; border: 1.5px solid rgba(255, 255, 255, .7) !important; border-radius: 9999px !important;
}
.cf-stack.cardify-brand :is(header, nav) :is(button, select, a)[class*="border"]:not(.cs-pill) * { color: #FFFFFF !important; }
.cf-stack .cs-pill { padding-inline: 32px !important; white-space: nowrap; }

/* Inside dark bands every line is white, whatever its utility class says. */
.cf-stack :is([class*="bg-gradient-to"], [style*="linear-gradient"]) :is(p, span, h2, h3, h4, div, li, small, strong, label) { color: #FFFFFF !important; }
/* Pages without the theme toggle follow the system setting. */
@media (prefers-color-scheme: dark) {
  html:not(.light):not([data-theme="light"]) { --cs-world: #053b49; --cs-deep: #021E26; --cs-sheet: #0B4B5C; --cs-sheet-text: #FFFFFF; --cs-mute: #BFE0E8; --cs-field: #0F5869; }
}

/* Team roster: the grid of card tiles becomes the edges of a stack (md and up).
   One row = one person's card edge: stripe = department, their card small at the start. */
@media (min-width: 768px) {
  .cf-stack .cs-roster { display: flex !important; flex-direction: column; gap: 6px !important; }
  .cf-stack .cs-roster > .cs-roster-edge {
    flex-direction: row !important; align-items: center; min-height: 96px;
    background: var(--cs-card) !important; color: var(--cs-ink) !important; border-radius: 4px !important;
    box-shadow: inset 12px 0 0 var(--cs-stripe, var(--cs-brand)), 0 2px 0 rgba(2, 30, 38, .28) !important;
    padding-inline-start: 14px; transform: none !important;
  }
  html[dir="rtl"] .cf-stack .cs-roster > .cs-roster-edge { box-shadow: inset -12px 0 0 var(--cs-stripe, var(--cs-brand)), 0 2px 0 rgba(2, 30, 38, .28) !important; }
  .cf-stack .cs-roster > .cs-roster-edge > :first-child { flex: 0 0 170px; padding: 10px !important; background: transparent !important; border-radius: 0 !important; }
  .cf-stack .cs-roster > .cs-roster-edge > :first-child .cf-badge, .cf-stack .cs-roster > .cs-roster-edge > :first-child .cf-flipbtn { display: none !important; }
  .cf-stack .cs-roster > .cs-roster-edge > :nth-child(2) { flex: 1 1 auto; padding-top: 0 !important; min-width: 0; }
  .cf-stack .cs-roster > .cs-roster-edge > :nth-child(2) > div.mt-3 { margin-top: 6px !important; }
  .cf-stack .cs-roster > .cs-roster-edge > :last-child { flex: 0 0 auto; margin-top: 0 !important; border-top: 0 !important; padding: 10px 16px !important; }
  .cf-stack .cs-roster > .cs-roster-edge :is(.text-gray-900, .text-gray-700) { color: var(--cs-ink) !important; }
  .cf-stack .cs-roster > .cs-roster-edge :is(.text-gray-500, .text-gray-400, .text-gray-600) { color: var(--cs-mute) !important; }
  .cf-stack .cs-roster > .cs-roster-edge .bg-blue-600.text-white { background: var(--cs-deep) !important; color: #FFFFFF !important; box-shadow: none !important; }
}