/*
 * public/css/brand-theme.css — AiyaHR brand theme (P1, complete).
 *
 * The app uses ONE Tailwind `brand` palette (tailwind.config.js):
 *     brand-50…600  = CloudSync cyan accent  (brand-500 = #00aeef)
 *     brand-700…900 = navy / primary         (brand-700 = #274186)  ← shared, untouched
 *
 * AiyaHR shares the navy but swaps the cyan ACCENT for AI-teal. So this file
 * remaps every brand-50…600 accent utility to a matching teal under
 * html[data-brand="aiyahr"] only. CampusTrack (default / no attr) is untouched.
 *
 * Loaded AFTER tailwind.css; the [data-brand="aiyahr"] scope + !important win
 * the cascade for AiyaHR tenants only. Reversible: remove the <link> to revert.
 *
 * Teal accent scale (mirrors the cyan scale positions):
 *   50 #e6fbf5 · 100 #cdf7ec · 200 #9befd9 · 300 #67e6c4
 *   400 #34deb0 · 500 #06d6a0 · 600 #05c091
 */

:root { --brand-primary:#274186; --brand-accent:#00AEEF; } /* CampusTrack default */
html[data-brand="aiyahr"] { --brand-accent:#06D6A0; }

/* ── Module / page-header icon tiles — unified to the brand gradient ──────────
   Every page header tile (.ct-mod-icon) used to hard-code its own colour (purple
   Calendar, green Leaves, cyan Announcements, …). They are now all driven by the
   brand: navy → accent, where accent is cyan for CampusTrack and teal for AiyaHR
   (--brand-accent flips per brand). !important overrides each tile's inline
   gradient. User-approved global unification (23 May 2026). */
.ct-mod-icon { background: linear-gradient(135deg, var(--brand-primary,#274186), var(--brand-accent,#00AEEF)) !important; }

/* ── Backgrounds (accent shades only) ─────────────────────────────────────── */
html[data-brand="aiyahr"] .bg-brand-50  { background-color:#e6fbf5 !important; }
html[data-brand="aiyahr"] .bg-brand-100 { background-color:#cdf7ec !important; }
html[data-brand="aiyahr"] .bg-brand-200 { background-color:#9befd9 !important; }
html[data-brand="aiyahr"] .bg-brand-300 { background-color:#67e6c4 !important; }
html[data-brand="aiyahr"] .bg-brand-400 { background-color:#34deb0 !important; }
html[data-brand="aiyahr"] .bg-brand-500 { background-color:#06d6a0 !important; }
html[data-brand="aiyahr"] .bg-brand-600 { background-color:#05c091 !important; }

/* ── Text ─────────────────────────────────────────────────────────────────── */
html[data-brand="aiyahr"] .text-brand-50  { color:#e6fbf5 !important; }
html[data-brand="aiyahr"] .text-brand-100 { color:#cdf7ec !important; }
html[data-brand="aiyahr"] .text-brand-200 { color:#9befd9 !important; }
html[data-brand="aiyahr"] .text-brand-300 { color:#67e6c4 !important; }
html[data-brand="aiyahr"] .text-brand-400 { color:#34deb0 !important; }
html[data-brand="aiyahr"] .text-brand-500 { color:#06d6a0 !important; }
html[data-brand="aiyahr"] .text-brand-600 { color:#05c091 !important; }

/* ── Borders ──────────────────────────────────────────────────────────────── */
html[data-brand="aiyahr"] .border-brand-50  { border-color:#e6fbf5 !important; }
html[data-brand="aiyahr"] .border-brand-100 { border-color:#cdf7ec !important; }
html[data-brand="aiyahr"] .border-brand-200 { border-color:#9befd9 !important; }
html[data-brand="aiyahr"] .border-brand-300 { border-color:#67e6c4 !important; }
html[data-brand="aiyahr"] .border-brand-400 { border-color:#34deb0 !important; }
html[data-brand="aiyahr"] .border-brand-500 { border-color:#06d6a0 !important; }
html[data-brand="aiyahr"] .border-brand-600 { border-color:#05c091 !important; }

/* ── Focus rings ──────────────────────────────────────────────────────────── */
html[data-brand="aiyahr"] .ring-brand-200 { --tw-ring-color:#9befd9 !important; }
html[data-brand="aiyahr"] .ring-brand-300 { --tw-ring-color:#67e6c4 !important; }
html[data-brand="aiyahr"] .ring-brand-400 { --tw-ring-color:#34deb0 !important; }
html[data-brand="aiyahr"] .ring-brand-500 { --tw-ring-color:#06d6a0 !important; }
html[data-brand="aiyahr"] .focus\:ring-brand-500:focus { --tw-ring-color:#06d6a0 !important; }

/* ── Gradient stops (from / via / to) — accent shades only ────────────────── */
html[data-brand="aiyahr"] .from-brand-400 { --tw-gradient-from:#34deb0 !important; --tw-gradient-to:rgb(52 222 176 / 0); --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to); }
html[data-brand="aiyahr"] .from-brand-500 { --tw-gradient-from:#06d6a0 !important; --tw-gradient-to:rgb(6 214 160 / 0);  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to); }
html[data-brand="aiyahr"] .from-brand-600 { --tw-gradient-from:#05c091 !important; --tw-gradient-to:rgb(5 192 145 / 0);  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to); }
html[data-brand="aiyahr"] .via-brand-400  { --tw-gradient-to:rgb(52 222 176 / 0); --tw-gradient-stops:var(--tw-gradient-from),#34deb0 var(--tw-gradient-via-position,50%),var(--tw-gradient-to) !important; }
html[data-brand="aiyahr"] .via-brand-500  { --tw-gradient-to:rgb(6 214 160 / 0);  --tw-gradient-stops:var(--tw-gradient-from),#06d6a0 var(--tw-gradient-via-position,50%),var(--tw-gradient-to) !important; }
html[data-brand="aiyahr"] .to-brand-400   { --tw-gradient-to:#34deb0 !important; }
html[data-brand="aiyahr"] .to-brand-500   { --tw-gradient-to:#06d6a0 !important; }
html[data-brand="aiyahr"] .to-brand-600   { --tw-gradient-to:#05c091 !important; }

/* ── Hover variants on the accent (buttons, links) ────────────────────────── */
html[data-brand="aiyahr"] .hover\:bg-brand-50:hover  { background-color:#e6fbf5 !important; }
html[data-brand="aiyahr"] .hover\:bg-brand-100:hover { background-color:#cdf7ec !important; }
html[data-brand="aiyahr"] .hover\:bg-brand-500:hover { background-color:#06d6a0 !important; }
html[data-brand="aiyahr"] .hover\:bg-brand-600:hover { background-color:#05c091 !important; }
html[data-brand="aiyahr"] .hover\:text-brand-500:hover { color:#06d6a0 !important; }
html[data-brand="aiyahr"] .hover\:text-brand-600:hover { color:#05c091 !important; }
html[data-brand="aiyahr"] .hover\:border-brand-500:hover { border-color:#06d6a0 !important; }

/* ── Raw cyan hex fallbacks (inline styles / box-shadows using #00AEEF) ───── */
html[data-brand="aiyahr"] [style*="#00AEEF"],
html[data-brand="aiyahr"] [style*="#00aeef"] { /* can't recolour inline hex via CSS;
   these are handled per-component as audited. Listed for documentation. */ }

/* ── Optional convenience hooks (use in markup if you want explicit accents) ─ */
html[data-brand="aiyahr"] [data-accent-bg]     { background-color:var(--brand-accent) !important; }
html[data-brand="aiyahr"] [data-accent-fg]     { color:var(--brand-accent) !important; }
html[data-brand="aiyahr"] [data-accent-border] { border-color:var(--brand-accent) !important; }

/* ── Module gating utility (P3) ───────────────────────────────────────────── */
.brand-hidden { display:none !important; }

/* ── AiyaHR header: use the full "Aiya" wordmark (sized naturally) and hide the
   redundant text product-name, since the wordmark already reads "Aiya".
   CampusTrack (no data-brand attr) keeps its icon-tile + "CampusTrack" text. ── */
html[data-brand="aiyahr"] [data-brand-logo]{ height:38px !important; width:auto !important; max-width:200px; }
html[data-brand="aiyahr"] [data-brand-name]{ display:none !important; }

/* ════════════════════════════════════════════════════════════════════════
   AiyaHR DISTINCT IDENTITY — Home + Sidebar reskin (approved mockup 23 May 2026)
   Source: docs/Output/aiyahr-mockup/AiyaHR_HomeSidebarMockup_23052026_v1.html

   Everything below is scoped to html[data-brand="aiyahr"] ONLY. CampusTrack
   (no data-brand attr) matches none of these selectors → byte-identical.
   !important is required to beat (a) the rail styles injected at runtime by
   public/js/dual-pane-sidebar.js and (b) the .ct-greeting gradient in
   ui-system.css, both of which are non-!important so this always wins.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Icon rail → deep-navy gradient + teal active glow (vs CampusTrack slate-900/sky-400) ── */
html[data-brand="aiyahr"] .ct-dp-rail{
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(6,214,160,.15) 0%, rgba(6,214,160,0) 42%),
    linear-gradient(195deg,#16285A 0%,#0B1A3E 60%,#060f29 100%) !important;
  border-right:1px solid rgba(255,255,255,.05) !important;
}
html[data-brand="aiyahr"] .ct-dp-rail-btn{ color:#7e88a6 !important; }
html[data-brand="aiyahr"] .ct-dp-rail-btn:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
html[data-brand="aiyahr"] .ct-dp-rail-btn.active{
  background:linear-gradient(90deg, rgba(6,214,160,.18), rgba(6,214,160,.03)) !important;
  color:#34deb0 !important;
  box-shadow:inset 3px 0 0 #06D6A0 !important;
}
html[data-brand="aiyahr"] .ct-dp-rail-btn[data-tooltip]::after{ background:#0B1A3E !important; }
html[data-brand="aiyahr"] .ct-dp-rail-btn[data-tooltip]::before{ border-right-color:#0B1A3E !important; }
html[data-brand="aiyahr"] .ct-dp-rail-expand{ color:#7e88a6 !important; }
html[data-brand="aiyahr"] .ct-dp-rail-expand:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }

/* ── Greeting / hero banner → teal-forward gradient (vs CampusTrack navy→cyan) ── */
html[data-brand="aiyahr"] .ct-greeting{
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(6,214,160,.5) 0%, rgba(6,214,160,0) 50%),
    linear-gradient(120deg,#0B1A3E 0%,#274186 55%,#1d3a7a 100%) !important;
  box-shadow:0 18px 40px -24px rgba(11,26,62,.7);
}
html[data-brand="aiyahr"] .ct-greeting-btn.primary{
  background:#06D6A0 !important; border-color:transparent !important; color:#04251c !important; font-weight:700 !important;
}
html[data-brand="aiyahr"] .ct-greeting-btn.primary:hover{ background:#34deb0 !important; }

/* ── AI assistant panel: brand the purple header/avatar → navy→teal for AiyaHR ── */
html[data-brand="aiyahr"] .ai-header-gradient{ background:linear-gradient(135deg,#274186 0%,#0B1A3E 45%,#06D6A0 130%) !important; }