/* ==========================================================================
   One look for every app page (loaded last, after tailwind.css).
   The reference is the decision dashboard: slate-navy palette, Tajawal,
   24px cards with a 1px navy hairline and a soft white fill, no coloured
   blue/sky/indigo badges. Old pages still carry per-page Tailwind colours
   (from-sky via-blue to-indigo, bg-blue-100 ...) and glass cards with white
   borders / heavy shadows; this file folds them into the one palette
   without touching page markup.
   Semantic colours (emerald = good, amber = warning, rose = bad) are kept.
   ========================================================================== */

:root {
  --un-navy: #37406e;
  --un-slate: #5f6f92;
  --un-tint: rgba(95, 111, 146, .16);
  --un-card-bg: rgba(255, 255, 255, .72);
  --un-card-border: rgba(55, 64, 110, .12);
}

/* ---- 1. coloured gradient tiles / buttons / icon badges -> slate gradient ---- */
html.app-shell main :is([class*="from-sky"], [class*="from-blue"], [class*="from-cyan"], [class*="from-teal"], [class*="from-indigo"], [class*="from-violet"], [class*="from-purple"], [class*="from-fuchsia"], [class*="from-pink"]) {
  --tw-gradient-from: #37406e var(--tw-gradient-from-position) !important;
  --tw-gradient-to: #5f6f92 var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.app-shell.dark main :is([class*="from-sky"], [class*="from-blue"], [class*="from-cyan"], [class*="from-teal"], [class*="from-indigo"], [class*="from-violet"], [class*="from-purple"], [class*="from-fuchsia"], [class*="from-pink"]) {
  --tw-gradient-from: #4a5a85 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: #7d8ea8 var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.app-shell main :is([class*="shadow-sky"], [class*="shadow-blue"], [class*="shadow-cyan"], [class*="shadow-teal"], [class*="shadow-indigo"], [class*="shadow-violet"], [class*="shadow-purple"]) {
  box-shadow: 0 8px 20px -10px rgba(55, 64, 110, .35) !important;
}

/* ---- 2. tinted badges and coloured text -> slate tint / navy ---- */
html.app-shell main :is([class*="bg-sky-"], [class*="bg-blue-"], [class*="bg-cyan-"], [class*="bg-teal-"], [class*="bg-indigo-"], [class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-fuchsia-"]):not([class*="from-"]):not([class*="bg-gradient"]) {
  background-color: var(--un-tint) !important;
}
html.app-shell.dark main :is([class*="bg-sky-"], [class*="bg-blue-"], [class*="bg-cyan-"], [class*="bg-teal-"], [class*="bg-indigo-"], [class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-fuchsia-"]):not([class*="from-"]):not([class*="bg-gradient"]) {
  background-color: rgba(95, 111, 146, .25) !important;
}
html.app-shell:not(.dark) main :is([class*="text-sky-"], [class*="text-blue-"], [class*="text-cyan-"], [class*="text-teal-"], [class*="text-indigo-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-fuchsia-"]):not([class*="text-white"]) {
  color: var(--un-navy) !important;
}
html.app-shell.dark main :is([class*="text-sky-"], [class*="text-blue-"], [class*="text-cyan-"], [class*="text-teal-"], [class*="text-indigo-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-fuchsia-"]) {
  color: #91a3b6 !important;
}
html.app-shell main :is([class*="border-sky-"], [class*="border-blue-"], [class*="border-cyan-"], [class*="border-teal-"], [class*="border-indigo-"], [class*="border-violet-"], [class*="border-purple-"]) {
  border-color: var(--un-card-border) !important;
}

/* ---- 3. cards: same radius, hairline, fill and (no) shadow as the dashboard cards ---- */
html.app-shell:not(.dark) main :is(.glass, .glass-strong, .card, [class*="rounded-2xl"][class*="border"], [class*="rounded-3xl"][class*="border"]):not(header):not([class*="bg-gradient"]):not([class*="from-"]):not([class*="text-white"]):not([class*="bg-rose"]):not([class*="bg-red"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-yellow"]):not(button):not(input):not(select):not(textarea) {
  border: 1px solid var(--un-card-border) !important;
  background-color: var(--un-card-bg) !important;
  box-shadow: none !important;
  border-radius: 24px;
}
html.app-shell.dark main :is(.glass, .glass-strong, .card, [class*="rounded-2xl"][class*="border"], [class*="rounded-3xl"][class*="border"]):not(header):not([class*="bg-gradient"]):not([class*="from-"]):not([class*="text-white"]):not([class*="bg-rose"]):not([class*="bg-red"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-yellow"]):not(button):not(input):not(select):not(textarea) {
  border: 1px solid rgba(180, 192, 208, .14) !important;
  background-color: rgba(255, 255, 255, .05) !important;
  box-shadow: none !important;
  border-radius: 24px;
}

/* ---- 4. collapsed icon rail: only the 5 primary destinations, rest live in the opened menu ---- */
@media (min-width: 1024px) {
  html.app-shell #appSidebar.app-rail:not(.is-open) .rail-secondary,
  html.app-shell #appSidebar.app-rail:not(.is-open) .rail-upgrade { display: none !important; }
}

/* ---- 5. popovers (account / notifications) must be opaque and sit above the page content ---- */
html.app-shell header.app-topbar { z-index: 500 !important; }
html.app-shell #profileDropdown, html.app-shell #notifDropdown {
  background-color: #ffffff !important; border: 1px solid var(--sh-border) !important;
  box-shadow: 0 24px 50px -20px rgba(27, 32, 51, .35) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.app-shell.dark #profileDropdown, html.app-shell.dark #notifDropdown {
  background-color: #14112e !important; border-color: rgba(180, 192, 208, .18) !important;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8) !important;
}

/* ---- 6. side menu: fixed panel, no scrollbar, compact enough to fit without scrolling ---- */
html.app-shell #appSidebar.app-rail { scrollbar-width: none; -ms-overflow-style: none; }
html.app-shell #appSidebar.app-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (min-width: 1024px) {
  html.app-shell #appSidebar.app-rail.is-open { padding: 10px 10px !important; gap: 2px; }
  html.app-shell #appSidebar.app-rail.is-open .nav-item { min-height: 40px; padding: 8px 14px !important; }
  html.app-shell #appSidebar.app-rail.is-open > div[class*="text-[10px]"], html.app-shell #appSidebar.app-rail.is-open nav > div[class*="text-[10px]"] { margin: 8px 0 2px; }
  html.app-shell #appSidebar.app-rail.is-open .mt-auto { padding-top: 8px; margin-top: 4px; }
  html.app-shell #appSidebar.app-rail.is-open #upgradeBox { padding: 10px !important; margin-top: 4px; }
}
@media (max-width: 1023.98px) {
  html.app-shell #appSidebar.app-rail { padding: 10px 10px !important; overflow-y: auto; overscroll-behavior: contain; }
  html.app-shell #appSidebar.app-rail nav { gap: 2px !important; margin-bottom: 4px !important; }
  html.app-shell #appSidebar.app-rail .nav-item { min-height: 38px; padding: 7px 12px; font-size: 13px; }
  html.app-shell #appSidebar.app-rail > div[class*="text-[10px]"], html.app-shell #appSidebar.app-rail nav > div[class*="text-[10px]"] { margin: 6px 0 2px !important; }
  html.app-shell #appSidebar.app-rail #upgradeBox { padding: 10px !important; margin-top: 4px !important; }
  html.app-shell #appSidebar.app-rail .rail-toggle { display: none; }
}
/* the night/day row inside the account menu is a plain menu row, not a bordered pill */
html.app-shell #profileDropdown #themeToggleBtn { border: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
html.app-shell #profileDropdown #themeToggleBtn:hover { background: var(--sh-pill) !important; }