/* =====================================================================
   ProjectSpace — Modern CRM theme layer
   Loaded AFTER bootstrap + main.css. Restyles the PlainAdmin classes
   used across all pages, and styles the new shell (sidebar, topbar).
   ===================================================================== */

:root {
  --ps-font: "Plus Jakarta Sans", "Noto Sans Malayalam", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ps-primary: #4f46e5;
  --ps-primary-600: #4338ca;
  --ps-primary-rgb: 79, 70, 229;
  --ps-accent: #7c3aed;
  --ps-teal: #0ea5a4;
  --ps-success: #16a34a;
  --ps-success-rgb: 22, 163, 74;
  --ps-warning: #f59e0b;
  --ps-warning-rgb: 245, 158, 11;
  --ps-danger: #e11d48;
  --ps-danger-rgb: 225, 29, 72;
  --ps-info: #0284c7;
  --ps-info-rgb: 2, 132, 199;
  --ps-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c026d3 120%);

  --ps-bg: #f4f6fb;
  --ps-surface: #ffffff;
  --ps-surface-2: #f8f9fd;
  --ps-border: #e7e9f2;
  --ps-text: #111827;
  --ps-text-2: #4b5563;
  --ps-muted: #8a91a6;

  --ps-side-bg: #0e1330;
  --ps-side-bg-2: #151b42;
  --ps-side-text: #a9b0d4;
  --ps-side-text-hi: #ffffff;

  --ps-radius-sm: 10px;
  --ps-radius: 16px;
  --ps-radius-lg: 22px;

  --ps-e1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --ps-e2: 0 4px 10px -2px rgba(16, 24, 40, .06), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --ps-e3: 0 18px 40px -12px rgba(16, 24, 40, .18), 0 6px 12px -6px rgba(16, 24, 40, .08);
  --ps-glow: 0 10px 30px -8px rgba(var(--ps-primary-rgb), .55);

  --ps-ease: cubic-bezier(.2, .8, .2, 1);
  --ps-side-w: 272px;
  --ps-rail-w: 84px;
  --ps-top-h: 72px;

  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-body-font-family: var(--ps-font);
  --bs-border-radius: 10px;
}

/* ---------- Dark mode ---------- */
html[data-ps-theme="dark"] {
  color-scheme: dark;
  --ps-bg: #0b1020;
  --ps-surface: #121831;
  --ps-surface-2: #182042;
  --ps-border: #26305a;
  --ps-text: #e8eaf6;
  --ps-text-2: #b7bddb;
  --ps-muted: #8189b0;
  --ps-side-bg: #080c1d;
  --ps-side-bg-2: #0e1430;
  --ps-e1: 0 1px 2px rgba(0, 0, 0, .4);
  --ps-e2: 0 4px 12px -2px rgba(0, 0, 0, .45);
  --ps-e3: 0 20px 40px -12px rgba(0, 0, 0, .6);
  --bs-body-bg: #0b1020;
  --bs-body-color: #e8eaf6;
  --bs-border-color: #26305a;
  --bs-secondary-color: #8189b0;
  --bs-tertiary-bg: #182042;
}

/* =====================================================================
   Base
   ===================================================================== */
html { scroll-behavior: smooth; }
body {
  font-family: var(--ps-font) !important;
  background: var(--ps-bg) !important;
  color: var(--ps-text-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14.5px;
  letter-spacing: -.005em;
}
body::before {
  /* soft ambient colour blobs behind content */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 105% -10%, rgba(124, 58, 237, .10), transparent 60%),
    radial-gradient(700px 420px at 20% 110%, rgba(14, 165, 164, .08), transparent 60%);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ps-font);
  color: var(--ps-text);
  letter-spacing: -.02em;
}
a { color: var(--ps-primary); transition: color .2s var(--ps-ease); }
a:hover { color: var(--ps-accent); }
::selection { background: rgba(var(--ps-primary-rgb), .18); }
.text-primary { color: var(--ps-primary) !important; }
.bg-primary { background-color: var(--ps-primary) !important; }
.text-dark { color: var(--ps-text) !important; }
.text-muted, .color-gray, .text-gray { color: var(--ps-muted) !important; }
.text-medium { color: var(--ps-text-2); }
hr { border-color: var(--ps-border); opacity: 1; }

/* thin, modern scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: rgba(120, 128, 170, .35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(120, 128, 170, .35); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--ps-primary-rgb), .55); }

/* Material Symbols helper */
.msr {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
  user-select: none;
}
.msr.fill { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }

/* =====================================================================
   Top progress bar (page navigation)
   ===================================================================== */
#ps-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--ps-grad);
  box-shadow: 0 0 12px rgba(var(--ps-primary-rgb), .7);
  z-index: 3000; opacity: 0;
  transition: width .35s var(--ps-ease), opacity .3s;
}
#ps-progress.run { opacity: 1; width: 75%; transition: width 8s cubic-bezier(.1, .7, .1, 1), opacity .2s; }
#ps-progress.done { opacity: 0; width: 100%; transition: width .2s, opacity .4s .2s; }

/* =====================================================================
   Sidebar
   ===================================================================== */
.sidebar-nav-wrapper.ps-sidebar {
  width: var(--ps-side-w);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(124, 58, 237, .35), transparent 70%),
    radial-gradient(380px 260px at 100% 100%, rgba(14, 165, 164, .18), transparent 70%),
    linear-gradient(180deg, var(--ps-side-bg) 0%, var(--ps-side-bg-2) 100%);
  box-shadow: 8px 0 30px -12px rgba(8, 12, 40, .45);
  border-right: 1px solid rgba(255, 255, 255, .04);
  transition: transform .35s var(--ps-ease), width .3s var(--ps-ease);
  z-index: 1040;
}
.ps-brand {
  display: flex; align-items: center; gap: 12px;
  height: var(--ps-top-h);
  padding: 0 22px;
  flex-shrink: 0;
  text-decoration: none !important;
}
.ps-brand-mark {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--ps-grad);
  color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -.04em;
  box-shadow: var(--ps-glow);
  position: relative; overflow: hidden;
}
.ps-brand-mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: ps-shine 5s ease-in-out infinite 1.5s;
}
@keyframes ps-shine { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.ps-brand-text { line-height: 1.1; white-space: nowrap; }
.ps-brand-text strong { display: block; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.ps-brand-text small { color: var(--ps-side-text); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

.ps-side-scroll {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: 6px 14px 18px;
}
.ps-side-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); }
.ps-nav-label {
  color: rgba(169, 176, 212, .55);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 18px 12px 8px;
  white-space: nowrap;
}
.ps-nav { list-style: none; margin: 0; padding: 0; }
.ps-nav > li { margin-bottom: 3px; position: relative; }
.ps-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ps-side-text) !important;
  font-weight: 600; font-size: 14px;
  text-decoration: none;
  position: relative; overflow: hidden;
  white-space: nowrap;
  transition: background .25s var(--ps-ease), color .25s var(--ps-ease), transform .25s var(--ps-ease);
}
.ps-nav-link .msr { font-size: 22px; flex-shrink: 0; width: 24px; text-align: center; transition: transform .3s var(--ps-ease); }
.ps-nav-link .ps-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ps-nav-link .ps-caret { font-size: 20px; margin-left: auto; opacity: .7; transition: transform .3s var(--ps-ease); }
.ps-nav-link:not(.collapsed) .ps-caret { transform: rotate(180deg); }
.ps-nav-link:hover { background: rgba(255, 255, 255, .06); color: var(--ps-side-text-hi) !important; }
.ps-nav-link:hover .msr:first-child { transform: scale(1.08); }
.ps-nav-link[aria-expanded="true"] { color: #fff !important; background: rgba(255, 255, 255, .04); }
.ps-nav > li.active > .ps-nav-link {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, .95), rgba(124, 58, 237, .95));
  box-shadow: 0 10px 24px -10px rgba(124, 58, 237, .9);
}
.ps-nav > li.active > .ps-nav-link .msr:first-child { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }

.ps-subnav { list-style: none; margin: 4px 0 6px; padding: 0 0 0 14px; position: relative; }
.ps-subnav::before {
  content: ""; position: absolute; left: 26.5px; top: 4px; bottom: 4px; width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02));
}
.ps-subnav li a {
  display: block;
  padding: 7px 12px 7px 26px;
  margin: 1px 0;
  border-radius: 10px;
  color: var(--ps-side-text) !important;
  font-size: 13.3px; font-weight: 500;
  text-decoration: none;
  position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s, background .2s, padding .25s var(--ps-ease);
}
.ps-subnav li a::before {
  content: ""; position: absolute; left: 9px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--ps-side-bg-2); border: 1.5px solid rgba(169, 176, 212, .45);
  transition: all .25s var(--ps-ease);
}
.ps-subnav li a:hover { color: #fff !important; background: rgba(255, 255, 255, .05); padding-left: 30px; }
.ps-subnav li a.active { color: #fff !important; background: rgba(255, 255, 255, .08); font-weight: 600; }
.ps-subnav li a.active::before { background: #a78bfa; border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(167, 139, 250, .2); }

.ps-side-footer {
  flex-shrink: 0;
  margin: 0 14px 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .06);
  display: flex; align-items: center; gap: 12px;
  white-space: nowrap; overflow: hidden;
}
.ps-side-footer img { width: 36px; height: 36px; object-fit: contain; border-radius: 10px; background: #fff; padding: 4px; flex-shrink: 0; }
.ps-side-footer strong { display: block; color: #fff; font-size: 13px; }
.ps-side-footer a { color: var(--ps-side-text) !important; font-size: 12px; text-decoration: none; }
.ps-side-footer a:hover { color: #fff !important; }
.ps-perm-note { color: #fbbf24; font-size: 12.5px; padding: 8px 12px; }

/* Desktop collapsed "rail" (main.js toggles .active) */
@media (min-width: 1200px) {
  .sidebar-nav-wrapper.ps-sidebar.active { transform: none !important; width: var(--ps-rail-w); }
  .main-wrapper.active { margin-left: var(--ps-rail-w) !important; }
  .ps-sidebar.active .ps-brand { padding: 0 22px; }
  .ps-sidebar.active .ps-brand-text,
  .ps-sidebar.active .ps-nav-label,
  .ps-sidebar.active .ps-txt,
  .ps-sidebar.active .ps-caret,
  .ps-sidebar.active .ps-side-footer > div { opacity: 0; pointer-events: none; }
  .ps-sidebar.active .ps-subnav { display: none !important; }
  .ps-sidebar.active .ps-side-footer { padding: 14px 10px; justify-content: center; margin: 0 14px 14px; }
  .ps-sidebar .ps-brand-text, .ps-sidebar .ps-nav-label, .ps-sidebar .ps-txt,
  .ps-sidebar .ps-caret, .ps-sidebar .ps-side-footer > div { transition: opacity .2s var(--ps-ease); }
  /* hover to peek the full menu while collapsed */
  .ps-sidebar.active:hover { width: var(--ps-side-w); box-shadow: 20px 0 60px -10px rgba(8, 12, 40, .55); }
  .ps-sidebar.active:hover .ps-brand-text,
  .ps-sidebar.active:hover .ps-nav-label,
  .ps-sidebar.active:hover .ps-txt,
  .ps-sidebar.active:hover .ps-caret,
  .ps-sidebar.active:hover .ps-side-footer > div { opacity: 1; pointer-events: auto; }
  .ps-sidebar.active:hover .ps-subnav.show { display: block !important; }
  .ps-sidebar.active:hover .ps-side-footer { justify-content: flex-start; }
}
.main-wrapper { margin-left: var(--ps-side-w); transition: margin-left .3s var(--ps-ease); padding-bottom: 76px; }
@media (max-width: 1199.98px) {
  .sidebar-nav-wrapper.ps-sidebar { transform: translateX(calc(-1 * var(--ps-side-w) - 20px)); }
  .sidebar-nav-wrapper.ps-sidebar.active { transform: translateX(0); }
  .main-wrapper, .main-wrapper.active { margin-left: 0 !important; }
}
.overlay { background: rgba(8, 12, 32, .45); backdrop-filter: blur(3px); z-index: 1030; transition: opacity .3s; }
.overlay.active { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1200px) { .overlay { display: none !important; } }

/* =====================================================================
   Top bar
   ===================================================================== */
.ps-topbar {
  position: sticky; top: 0; z-index: 1020;
  height: var(--ps-top-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 28px;
  background: rgba(244, 246, 251, .72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s, background .3s;
}
html[data-ps-theme="dark"] .ps-topbar { background: rgba(11, 16, 32, .72); }
.ps-topbar.scrolled { box-shadow: 0 8px 30px -14px rgba(16, 24, 40, .25); border-bottom-color: var(--ps-border); }
@media (max-width: 767px) { .ps-topbar { padding: 0 14px; gap: 8px; } }

.ps-icon-btn {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-grid; place-items: center;
  background: var(--ps-surface); color: var(--ps-text-2);
  border: 1px solid var(--ps-border);
  box-shadow: var(--ps-e1);
  position: relative; overflow: hidden;
  transition: transform .2s var(--ps-ease), box-shadow .2s, color .2s, border-color .2s;
  cursor: pointer; flex-shrink: 0;
}
.ps-icon-btn:hover { color: var(--ps-primary); border-color: rgba(var(--ps-primary-rgb), .35); box-shadow: var(--ps-e2); transform: translateY(-1px); }
.ps-icon-btn:active { transform: scale(.94); }
.ps-icon-btn .msr { font-size: 22px; }
.ps-icon-btn .ps-dot {
  position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ps-danger); box-shadow: 0 0 0 2px var(--ps-surface);
}
.ps-icon-btn .ps-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ps-danger); animation: ps-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes ps-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
#menu-toggle i { display: none; } /* main.js swaps classes on this <i>; we show our own icon */

.ps-search {
  flex: 1; max-width: 460px;
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 8px 0 14px;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 14px;
  color: var(--ps-muted);
  box-shadow: var(--ps-e1);
  cursor: text;
  transition: border-color .2s, box-shadow .2s;
}
.ps-search:hover { border-color: rgba(var(--ps-primary-rgb), .35); box-shadow: 0 0 0 4px rgba(var(--ps-primary-rgb), .08); }
.ps-search span.ps-ph { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-kbd {
  font: 600 11px/1 var(--ps-font);
  color: var(--ps-text-2);
  padding: 5px 7px; border-radius: 7px;
  background: var(--ps-surface-2); border: 1px solid var(--ps-border);
  white-space: nowrap;
}
.ps-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.ps-dept-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px 0 10px; max-width: 280px;
  border-radius: 12px;
  background: rgba(var(--ps-primary-rgb), .08);
  color: var(--ps-primary); font-weight: 600; font-size: 13px;
  border: 1px solid rgba(var(--ps-primary-rgb), .16);
  cursor: pointer;
  transition: background .2s, transform .2s;
  position: relative; overflow: hidden;
}
.ps-dept-chip:hover { background: rgba(var(--ps-primary-rgb), .14); }
.ps-dept-chip span.t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ps-profile-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px; border-radius: 14px;
  background: var(--ps-surface); border: 1px solid var(--ps-border);
  box-shadow: var(--ps-e1);
  cursor: pointer;
  transition: box-shadow .2s, border-color .2s;
}
.ps-profile-btn:hover { box-shadow: var(--ps-e2); border-color: rgba(var(--ps-primary-rgb), .3); }
.ps-profile-btn::after { display: none; }
.ps-avatar {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--ps-grad); color: #fff;
  font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
}
.ps-avatar.lg { width: 48px; height: 48px; border-radius: 14px; font-size: 17px; }
.ps-profile-meta { line-height: 1.15; text-align: left; }
.ps-profile-meta strong { display: block; color: var(--ps-text); font-size: 13.5px; font-weight: 700; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-profile-meta small { color: var(--ps-muted); font-size: 11.5px; font-weight: 500; }

/* dropdowns (all) */
.dropdown-menu {
  border: 1px solid var(--ps-border);
  border-radius: 16px;
  box-shadow: var(--ps-e3);
  padding: 8px;
  background: var(--ps-surface);
  color: var(--ps-text-2);
  font-size: 14px;
}
.dropdown-menu.show { animation: ps-pop .22s var(--ps-ease); }
@keyframes ps-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.dropdown-item, .ps-menu-item {
  display: flex; align-items: center; gap: 10px;
  border-radius: 10px; padding: 9px 12px;
  color: var(--ps-text-2); font-weight: 500;
  text-decoration: none;
}
.dropdown-item:hover, .dropdown-item:focus, .ps-menu-item:hover { background: var(--ps-surface-2); color: var(--ps-primary); }
.ps-menu-item .msr { font-size: 20px; color: var(--ps-muted); }
.ps-menu-item:hover .msr { color: var(--ps-primary); }
.ps-menu-item.danger:hover, .ps-menu-item.danger:hover .msr { color: var(--ps-danger); background: rgba(var(--ps-danger-rgb), .07); }
.dropdown-divider { border-color: var(--ps-border); margin: 6px 4px; }
.ps-dd-head { padding: 10px 12px 12px; display: flex; gap: 12px; align-items: center; }
.ps-dd-head strong { color: var(--ps-text); display: block; font-size: 14px; }
.ps-dd-head small { color: var(--ps-muted); font-size: 12px; }
.ps-notify-menu { width: 360px; max-width: calc(100vw - 24px); }
.ps-notify-item { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ps-text-2); }
.ps-notify-item:hover { background: var(--ps-surface-2); }
.ps-notify-item .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: rgba(var(--ps-primary-rgb), .1); color: var(--ps-primary); }
.ps-notify-item p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ps-text-2); }

/* =====================================================================
   Command palette
   ===================================================================== */
.ps-cmd-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(8, 12, 32, .45); backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.ps-cmd-backdrop.open { display: flex; animation: ps-fade .2s ease; }
@keyframes ps-fade { from { opacity: 0; } to { opacity: 1; } }
.ps-cmd {
  width: 100%; max-width: 620px;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(8, 12, 40, .55);
  overflow: hidden;
  animation: ps-pop .25s var(--ps-ease);
}
.ps-cmd-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ps-border); }
.ps-cmd-input .msr { color: var(--ps-primary); }
.ps-cmd-input input { flex: 1; border: 0; outline: 0; background: transparent; font: 500 16px var(--ps-font); color: var(--ps-text); }
.ps-cmd-list { max-height: 52vh; overflow-y: auto; padding: 8px; margin: 0; list-style: none; }
.ps-cmd-group { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ps-muted); padding: 10px 12px 6px; }
.ps-cmd-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ps-text-2); cursor: pointer; text-decoration: none !important; }
.ps-cmd-item .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ps-surface-2); color: var(--ps-text-2); flex-shrink: 0; }
.ps-cmd-item .ic .msr { font-size: 20px; }
.ps-cmd-item.sel, .ps-cmd-item:hover { background: rgba(var(--ps-primary-rgb), .08); color: var(--ps-primary); }
.ps-cmd-item.sel .ic { background: var(--ps-grad); color: #fff; }
.ps-cmd-item small { margin-left: auto; color: var(--ps-muted); font-size: 12px; }
.ps-cmd-empty { padding: 28px; text-align: center; color: var(--ps-muted); }
.ps-cmd-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--ps-border); color: var(--ps-muted); font-size: 12px; background: var(--ps-surface-2); }

/* =====================================================================
   Page sections, titles, breadcrumbs
   ===================================================================== */
.section { padding-bottom: 30px; }
.main-wrapper .container-fluid { padding-left: 28px; padding-right: 28px; }
@media (max-width: 767px) { .main-wrapper .container-fluid { padding-left: 14px; padding-right: 14px; } }
.title-wrapper { padding-top: 24px !important; }
.title-wrapper .title, .title-wrapper .breadcrumb-wrapper { margin-bottom: 18px; }
.title-wrapper .title h2, .title-wrapper .title h3 { font-weight: 800; font-size: 24px; letter-spacing: -.03em; }
.page-icon-wrapper {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--ps-grad) !important; color: #fff !important;
  box-shadow: var(--ps-glow);
}
.breadcrumb { background: transparent; padding: 0; font-size: 13px; }
.breadcrumb-wrapper .breadcrumb {
  display: inline-flex; padding: 7px 14px; border-radius: 999px;
  background: var(--ps-surface); border: 1px solid var(--ps-border); box-shadow: var(--ps-e1);
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--ps-muted); content: "›"; }
.breadcrumb-item a { color: var(--ps-text-2); }
.breadcrumb-item.active { color: var(--ps-primary); font-weight: 600; }

/* =====================================================================
   Cards
   ===================================================================== */
.card-style, .card, .icon-card, .stat-card {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border) !important;
  border-radius: var(--ps-radius) !important;
  box-shadow: var(--ps-e2);
  color: var(--ps-text-2);
  transition: box-shadow .3s var(--ps-ease), transform .3s var(--ps-ease), border-color .3s;
}
.card-style { padding: 24px; }
.card-style:hover, .card:hover { box-shadow: var(--ps-e3); }
.icon-card:hover, .stat-card:hover { transform: translateY(-3px); box-shadow: var(--ps-e3); }
.card-header { background: transparent; border-bottom: 1px solid var(--ps-border); }
.card-style h6, .card-style .title h6 { color: var(--ps-text); font-weight: 700; }

/* staggered entrance */
.ps-anim { opacity: 0; transform: translateY(14px); }
.ps-anim.in { opacity: 1; transform: none; transition: opacity .55s var(--ps-ease), transform .55s var(--ps-ease); }
@media (prefers-reduced-motion: reduce) {
  .ps-anim, .ps-anim.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* =====================================================================
   Buttons (PlainAdmin .main-btn + Bootstrap .btn)
   ===================================================================== */
.main-btn, .btn {
  font-family: var(--ps-font);
  font-weight: 600;
  border-radius: 12px;
  position: relative; overflow: hidden;
  letter-spacing: .005em;
  transition: transform .18s var(--ps-ease), box-shadow .25s var(--ps-ease), background-color .2s, color .2s, border-color .2s;
}
.main-btn { padding: 10px 18px; font-size: 14px; border: 1px solid transparent; }
.main-btn.btn-sm, .btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.main-btn:active, .btn:active { transform: scale(.97); }
.square-btn { border-radius: 10px !important; }
.rounded-full { border-radius: 999px !important; }

.primary-btn, .btn-primary {
  background: var(--ps-grad) !important; background-size: 160% 160% !important;
  color: #fff !important; border-color: transparent !important;
  box-shadow: 0 6px 16px -6px rgba(var(--ps-primary-rgb), .6);
}
.primary-btn:hover, .btn-primary:hover { background-position: 100% 0 !important; box-shadow: var(--ps-glow); color: #fff !important; transform: translateY(-1px); }
.primary-btn-outline, .btn-outline-primary { background: transparent !important; color: var(--ps-primary) !important; border: 1.5px solid rgba(var(--ps-primary-rgb), .45) !important; }
.primary-btn-outline:hover, .btn-outline-primary:hover { background: rgba(var(--ps-primary-rgb), .08) !important; border-color: var(--ps-primary) !important; }
.success-btn, .btn-success { background: var(--ps-success) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 16px -8px rgba(var(--ps-success-rgb), .7); }
.danger-btn, .btn-danger { background: var(--ps-danger) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 16px -8px rgba(var(--ps-danger-rgb), .7); }
.warning-btn, .btn-warning { background: var(--ps-warning) !important; color: #1f1300 !important; border-color: transparent !important; }
.info-btn, .btn-info { background: var(--ps-info) !important; color: #fff !important; border-color: transparent !important; }
.dark-btn, .btn-dark { background: #1e2340 !important; color: #fff !important; }
.light-btn, .btn-light, .btn-secondary { background: var(--ps-surface-2) !important; color: var(--ps-text-2) !important; border: 1px solid var(--ps-border) !important; }
.success-btn-outline, .btn-outline-success { background: transparent !important; color: var(--ps-success) !important; border: 1.5px solid rgba(var(--ps-success-rgb), .5) !important; }
.danger-btn-outline, .btn-outline-danger { background: transparent !important; color: var(--ps-danger) !important; border: 1.5px solid rgba(var(--ps-danger-rgb), .5) !important; }
.success-btn:hover, .danger-btn:hover, .info-btn:hover, .warning-btn:hover, .btn-success:hover, .btn-danger:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* status pills (.status-btn in PlainAdmin) */
.status-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  border: 0 !important; box-shadow: none !important;
}
.status-btn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-btn.success-btn { background: rgba(var(--ps-success-rgb), .12) !important; color: var(--ps-success) !important; }
.status-btn.warning-btn { background: rgba(var(--ps-warning-rgb), .15) !important; color: #b45309 !important; }
.status-btn.close-btn, .status-btn.danger-btn { background: rgba(var(--ps-danger-rgb), .1) !important; color: var(--ps-danger) !important; }
.status-btn.info-btn, .status-btn.active-btn { background: rgba(var(--ps-info-rgb), .1) !important; color: var(--ps-info) !important; }
.status-btn.primary-btn { background: rgba(var(--ps-primary-rgb), .1) !important; color: var(--ps-primary) !important; }

.badge { font-weight: 600; border-radius: 8px; padding: .42em .7em; letter-spacing: .01em; }

/* Ripple (Material) */
.ps-ripple-ink {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .25;
  transform: scale(0);
  animation: ps-ripple .6s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes ps-ripple { to { transform: scale(1); opacity: 0; } }

/* =====================================================================
   Forms
   ===================================================================== */
.input-style-1, .input-style-2, .input-style-3, .select-style-1, .select-style-2 { margin-bottom: 20px; }
.input-style-1 label, .input-style-2 label, .select-style-1 label, .select-style-2 label, .form-label {
  font-size: 13px; font-weight: 600; color: var(--ps-text); margin-bottom: 7px; letter-spacing: .005em;
}
.input-style-1 input, .input-style-1 textarea, .input-style-2 input, .input-style-2 textarea,
.input-style-3 input, .input-style-3 textarea,
.select-style-1 .select-position select, .select-style-2 .select-position select,
.form-control, .form-select {
  font-family: var(--ps-font);
  font-size: 14px;
  color: var(--ps-text);
  background-color: var(--ps-surface) !important;
  border: 1.5px solid var(--ps-border);
  border-radius: 12px;
  padding: 11px 14px;
  min-height: 46px;
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.select-style-1 .select-position select, .select-style-2 .select-position select { padding-right: 38px; }
textarea.form-control, .input-style-1 textarea { min-height: 90px; }
.input-style-1 input:hover, .input-style-1 textarea:hover, .form-control:hover, .form-select:hover,
.select-style-1 .select-position select:hover { border-color: #cfd4e6; }
.input-style-1 input:focus, .input-style-1 textarea:focus, .input-style-2 input:focus, .input-style-2 textarea:focus,
.input-style-3 input:focus, .input-style-3 textarea:focus,
.select-style-1 .select-position select:focus, .select-style-2 .select-position select:focus,
.form-control:focus, .form-select:focus {
  border-color: var(--ps-primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--ps-primary-rgb), .12) !important;
  outline: none;
}
input::placeholder, textarea::placeholder { color: #a3a9bf !important; }
.form-control-sm { min-height: 36px; padding: 6px 10px; border-radius: 10px; }
.input-group-text { background: var(--ps-surface-2) !important; border: 1.5px solid var(--ps-border); color: var(--ps-muted); border-radius: 12px; }
.form-check-input { width: 1.15em; height: 1.15em; border: 1.5px solid #c3c8dc; cursor: pointer; transition: all .2s; }
.form-check-input:checked { background-color: var(--ps-primary); border-color: var(--ps-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(var(--ps-primary-rgb), .15); border-color: var(--ps-primary); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }
.form-check-label { color: var(--ps-text-2); }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 46px; border: 1.5px solid var(--ps-border) !important; border-radius: 12px !important;
  background: var(--ps-surface) !important; display: flex; align-items: center;
}
.select2-container .selection { display: block; width: 100%; }
.select2-container .dropdown-wrapper { display: none; }
.select2.select2-container--default .select2-selection--single { width: 100%; display: flex; align-items: center; position: relative; height: auto; }
.select2.select2-container--default .select2-selection--single .select2-selection__rendered { flex: 1; min-width: 0; padding-top: 0; padding-bottom: 0; }
.select2.select2-container--default .select2-selection--single .select2-selection__arrow { position: absolute; top: 0; bottom: 0; right: 10px; width: 20px; height: auto; display: flex; align-items: center; justify-content: center; }
.select2.select2-container--default .select2-selection--single .select2-selection__arrow b { position: static; margin: 0; }
.select2.select2-container--default .select2-selection--single .select2-selection__clear { margin-right: 26px; font-size: 18px; color: var(--ps-muted); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding-left: 14px; padding-right: 34px; color: var(--ps-text); width: 100%; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #a3a9bf; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--ps-primary) !important; box-shadow: 0 0 0 4px rgba(var(--ps-primary-rgb), .12); }
.select2-dropdown { border: 1px solid var(--ps-border) !important; border-radius: 14px !important; box-shadow: var(--ps-e3); overflow: hidden; background: var(--ps-surface); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--ps-primary) !important; }
.select2-search--dropdown .select2-search__field { border-radius: 10px; border: 1.5px solid var(--ps-border) !important; padding: 7px 10px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: rgba(var(--ps-primary-rgb), .1); border: 0; color: var(--ps-primary); border-radius: 8px; padding: 2px 8px; }
.select-position .selection { border: 0 !important; padding: 0 !important; }

/* Flatpickr */
.flatpickr-calendar { border-radius: 16px !important; box-shadow: var(--ps-e3) !important; border: 1px solid var(--ps-border) !important; font-family: var(--ps-font); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--ps-primary) !important; border-color: var(--ps-primary) !important; }

/* Flatpickr — dark theme */
html[data-ps-theme="dark"] .flatpickr-calendar {
  background: var(--ps-surface) !important;
  border-color: var(--ps-border) !important;
  color: var(--ps-text);
}
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-month,
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-weekdays,
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-weekday,
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-current-month,
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInputWrapper span { color: var(--ps-text-2); }
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-current-month input.cur-year,
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-monthDropdown-months { background: var(--ps-surface) !important; color: var(--ps-text) !important; }
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-monthDropdown-months option { background: var(--ps-surface); color: var(--ps-text); }
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-day { color: var(--ps-text-2); }
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-day:hover,
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-day.prevMonthDay:hover,
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-day.nextMonthDay:hover { background: var(--ps-surface-2); border-color: var(--ps-surface-2); color: var(--ps-text); }
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-day.today { border-color: var(--ps-primary); }
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-day.today:hover { background: var(--ps-primary); color: #fff; }
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-day.prevMonthDay,
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-day.nextMonthDay { color: var(--ps-muted); }
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover { color: rgba(255, 255, 255, .22); background: transparent; }
html[data-ps-theme="dark"] .flatpickr-calendar .flatpickr-day.selected { color: #fff; }
html[data-ps-theme="dark"] .flatpickr-calendar.arrowTop::before,
html[data-ps-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--ps-surface); }
html[data-ps-theme="dark"] .flatpickr-calendar.arrowBottom::before,
html[data-ps-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--ps-surface); }

/* =====================================================================
   Tables + DataTables
   ===================================================================== */
.table-wrapper { border-radius: 14px; }
.table { color: var(--ps-text-2); --bs-table-bg: transparent; --bs-table-color: var(--ps-text-2); margin-bottom: 0; }
.table > thead > tr > th, .table thead th, .table th h6 {
  background: var(--ps-surface-2) !important;
  color: var(--ps-muted) !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--ps-border) !important;
  padding: 13px 14px !important;
  white-space: nowrap;
}
.table > thead > tr > th > *, .table > thead > tr > th h6 { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.table > thead > tr > th:first-child { border-top-left-radius: 12px; }
.table > thead > tr > th:last-child { border-top-right-radius: 12px; }
.table > tbody > tr > td, .table td {
  padding: 13px 14px !important;
  border-bottom: 1px solid var(--ps-border) !important;
  border-top: 0 !important;
  vertical-align: middle;
  color: var(--ps-text-2);
  font-size: 13.8px;
}
.table td p, .table td h6 { font-size: 13.8px; }
.table > tbody > tr { transition: background-color .15s; }
.table > tbody > tr:hover > td { background: rgba(var(--ps-primary-rgb), .035) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(var(--ps-primary-rgb), .02); }
.table .action { display: flex; gap: 6px; }
.table .action button, .table .action a {
  width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center;
  background: var(--ps-surface-2); border: 1px solid var(--ps-border); color: var(--ps-text-2);
  transition: all .2s var(--ps-ease);
}
.table .action button:hover, .table .action a:hover { background: rgba(var(--ps-primary-rgb), .1); color: var(--ps-primary); border-color: rgba(var(--ps-primary-rgb), .3); transform: translateY(-1px); }
.table .action .text-danger:hover { background: rgba(var(--ps-danger-rgb), .08); color: var(--ps-danger); }

.dataTables_wrapper, .dt-container { font-size: 13.5px; color: var(--ps-text-2); }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input,
.dt-container .dt-length select, .dt-container .dt-search input {
  border: 1.5px solid var(--ps-border) !important; border-radius: 10px !important;
  padding: 6px 10px !important; background: var(--ps-surface) !important; color: var(--ps-text);
  min-height: 38px; outline: 0;
  transition: border-color .2s, box-shadow .2s;
}
.dataTables_wrapper .dataTables_filter input:focus, .dt-container .dt-search input:focus {
  border-color: var(--ps-primary) !important; box-shadow: 0 0 0 4px rgba(var(--ps-primary-rgb), .12);
}
.dataTables_wrapper .dataTables_filter input, .dt-container .dt-search input { min-width: 220px; margin-left: 8px; }
.dataTables_wrapper .dataTables_info, .dt-container .dt-info { color: var(--ps-muted) !important; padding-top: 16px !important; }
.dataTables_wrapper .dataTables_paginate { padding-top: 12px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button, .dt-container .dt-paging .dt-paging-button {
  border-radius: 10px !important; border: 1px solid transparent !important;
  min-width: 36px; padding: 6px 11px !important; margin: 0 2px !important;
  color: var(--ps-text-2) !important; background: transparent !important;
  transition: all .2s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dt-container .dt-paging .dt-paging-button:hover {
  background: rgba(var(--ps-primary-rgb), .08) !important; color: var(--ps-primary) !important; border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dt-container .dt-paging .dt-paging-button.current, .dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--ps-grad) !important; color: #fff !important; box-shadow: 0 6px 14px -6px rgba(var(--ps-primary-rgb), .6);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; }
table.dataTable { border-collapse: separate !important; }
table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after { opacity: .5; }
table.dataTable.no-footer { border-bottom: 0 !important; }
.dt-buttons .dt-button, .dt-buttons .btn, button.dt-button {
  border-radius: 10px !important; border: 1px solid var(--ps-border) !important;
  background: var(--ps-surface) !important; color: var(--ps-text-2) !important;
  font-weight: 600; padding: 7px 14px !important; box-shadow: var(--ps-e1);
}
.dt-buttons .dt-button:hover { border-color: var(--ps-primary) !important; color: var(--ps-primary) !important; }

/* =====================================================================
   Modals, tabs, alerts, pagination, tooltips
   ===================================================================== */
.modal-backdrop.show { opacity: 1; background: rgba(8, 12, 32, .5); backdrop-filter: blur(4px); }
.modal-content {
  border: 1px solid var(--ps-border) !important;
  border-radius: var(--ps-radius-lg) !important;
  box-shadow: 0 40px 80px -24px rgba(8, 12, 40, .5) !important;
  background: var(--ps-surface);
  color: var(--ps-text-2);
  overflow: hidden;
}
.modal.fade .modal-dialog { transform: translateY(18px) scale(.97); transition: transform .35s var(--ps-ease), opacity .3s; }
.modal.show .modal-dialog { transform: none; }
.modal-header { border-bottom: 1px solid var(--ps-border); padding: 18px 24px; }
.modal-header .modal-title { font-weight: 800; color: var(--ps-text); letter-spacing: -.02em; }
.modal-footer { border-top: 1px solid var(--ps-border); }
.modal-body { padding: 22px 24px; }
.btn-close { border-radius: 10px; padding: 10px; opacity: .55; transition: all .2s; }
.btn-close:hover { opacity: 1; background-color: var(--ps-surface-2); transform: rotate(90deg); }
html[data-ps-theme="dark"] .btn-close { filter: invert(1); }

/* Dark theme modal surface (overrides legacy main.css !important whites) */
html[data-ps-theme="dark"] .modal-content {
  background-color: var(--ps-surface) !important;
  border-color: var(--ps-border) !important;
  color: var(--ps-text-2) !important;
}
html[data-ps-theme="dark"] .modal-header {
  background-color: var(--ps-surface) !important;
  border-bottom: 1px solid var(--ps-border) !important;
}
html[data-ps-theme="dark"] .modal-header .modal-title { color: var(--ps-text) !important; }
html[data-ps-theme="dark"] .modal-body { background-color: var(--ps-surface) !important; }
html[data-ps-theme="dark"] .modal-footer {
  background-color: var(--ps-surface-2) !important;
  border-top: 1px solid var(--ps-border) !important;
}
#sdmodal .sdmodal { padding: 16px; }
#sdmodal .form-check-input + .form-check-label { font-weight: 600; font-size: 13px; }
#sdmodal .float-start {
  border: 1.5px solid var(--ps-border); border-radius: 12px; padding: 10px 14px 10px 36px;
  background: var(--ps-surface-2); position: relative; transition: all .2s;
}
#sdmodal .float-start:hover { border-color: rgba(var(--ps-primary-rgb), .45); }
#sdmodal .float-start .form-check-input { position: absolute; left: 12px; top: 12px; margin: 0; }
#sdmodal .float-start:has(:checked) { border-color: var(--ps-primary); background: rgba(var(--ps-primary-rgb), .07); box-shadow: 0 0 0 4px rgba(var(--ps-primary-rgb), .08); }

.nav-tabs { border-bottom: 1px solid var(--ps-border); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-radius: 10px 10px 0 0; color: var(--ps-muted); font-weight: 600; padding: 10px 16px; position: relative; }
.nav-tabs .nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ps-grad); transform: scaleX(0); transition: transform .3s var(--ps-ease); }
.nav-tabs .nav-link.active { color: var(--ps-primary); background: transparent; }
.nav-tabs .nav-link.active::after { transform: scaleX(1); }
.nav-pills .nav-link { border-radius: 10px; font-weight: 600; color: var(--ps-text-2); }
.nav-pills .nav-link.active { background: var(--ps-grad); box-shadow: 0 6px 16px -6px rgba(var(--ps-primary-rgb), .6); }

.alert { border-radius: 14px; border: 1px solid transparent; }
.alert-primary { background: rgba(var(--ps-primary-rgb), .08); color: var(--ps-primary-600); border-color: rgba(var(--ps-primary-rgb), .15); }
.pagination .page-link { border-radius: 10px !important; margin: 0 2px; border: 0; color: var(--ps-text-2); background: transparent; }
.pagination .page-item.active .page-link { background: var(--ps-grad); color: #fff; }
.tooltip { --bs-tooltip-bg: #111633; --bs-tooltip-color: #fff; --bs-tooltip-opacity: 1; }
.tooltip-inner { background: #111633 !important; color: #fff !important; border-radius: 9px; padding: 6px 10px; font-size: 12px; font-weight: 500; }
.tooltip .tooltip-arrow::before { border-top-color: #111633; }
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before { border-top-color: #111633; }
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #111633; }
.bs-tooltip-auto[data-popper-placement^="start"] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before { border-left-color: #111633; }
.bs-tooltip-auto[data-popper-placement^="end"] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before { border-right-color: #111633; }
.progress { background: var(--ps-surface-2); border-radius: 999px; height: 8px; }
.progress-bar { background: var(--ps-grad); border-radius: 999px; }

/* SweetAlert2 */
.swal2-popup { border-radius: 22px !important; font-family: var(--ps-font) !important; padding: 1.6em 1.4em !important; background: var(--ps-surface) !important; color: var(--ps-text-2) !important; }
.swal2-title { color: var(--ps-text) !important; font-weight: 800 !important; letter-spacing: -.02em; }
.swal2-styled { border-radius: 12px !important; font-weight: 600 !important; padding: .65em 1.4em !important; }
.swal2-styled.swal2-confirm { background: var(--ps-grad) !important; box-shadow: 0 8px 20px -8px rgba(var(--ps-primary-rgb), .7) !important; }
.swal2-styled.swal2-cancel { background: var(--ps-surface-2) !important; color: var(--ps-text-2) !important; }
.swal2-container.swal2-backdrop-show { background: rgba(8, 12, 32, .45) !important; backdrop-filter: blur(4px); }

/* Summernote / Quill editors */
.note-editor.note-frame, .ql-toolbar, .ql-container { border-color: var(--ps-border) !important; }
.note-editor.note-frame { border-radius: 12px; overflow: hidden; }

/* =====================================================================
   Footer
   ===================================================================== */
.ps-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 18px 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  font-size: 12.5px; color: var(--ps-muted);
}
.ps-footer a { color: var(--ps-text-2); text-decoration: none; }
.ps-footer a:hover { color: var(--ps-primary); }
.ps-footer .links { display: flex; gap: 18px; }

/* =====================================================================
   Dashboard
   ===================================================================== */
.ps-hero {
  position: relative; overflow: hidden;
  border-radius: var(--ps-radius-lg);
  padding: 28px 30px;
  color: #fff;
  background: var(--ps-grad);
  box-shadow: 0 24px 50px -24px rgba(var(--ps-primary-rgb), .75);
  isolation: isolate;
}
.ps-hero::before, .ps-hero::after {
  content: ""; position: absolute; border-radius: 50%; z-index: -1;
  background: rgba(255, 255, 255, .12);
}
.ps-hero::before { width: 360px; height: 360px; right: -90px; top: -170px; animation: ps-float 9s ease-in-out infinite; }
.ps-hero::after { width: 220px; height: 220px; right: 200px; bottom: -150px; background: rgba(255, 255, 255, .08); animation: ps-float 11s ease-in-out infinite reverse; }
@keyframes ps-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, 14px); } }
.ps-hero h1 { color: #fff; font-size: 27px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.03em; }
.ps-hero p { color: rgba(255, 255, 255, .82); margin: 0; font-size: 14px; }
.ps-hero .ps-hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: rgba(255, 255, 255, .16); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
}
.ps-hero .ps-hero-chip .msr { font-size: 17px; }
.ps-hero select.ps-fy {
  appearance: none; -webkit-appearance: none;
  background: rgba(255, 255, 255, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  color: #fff !important; border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 12px; padding: 8px 34px 8px 14px; font: 600 13.5px var(--ps-font);
  min-height: 0; cursor: pointer; backdrop-filter: blur(6px);
}
.ps-hero select.ps-fy option { color: #111; }
.ps-hero .ps-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ps-hero .ps-qa {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .95); color: var(--ps-primary-600) !important;
  font-weight: 700; font-size: 13px; text-decoration: none;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .4);
  position: relative; overflow: hidden;
  transition: transform .2s var(--ps-ease), box-shadow .2s;
}
.ps-hero .ps-qa:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .45); }
.ps-hero .ps-qa.ghost { background: rgba(255, 255, 255, .14); color: #fff !important; border: 1px solid rgba(255, 255, 255, .26); box-shadow: none; }
.ps-hero .ps-qa .msr { font-size: 19px; }
.ps-hero-ring { display: flex; align-items: center; gap: 16px; }
.ps-ring { --p: 0; width: 104px; height: 104px; border-radius: 50%; position: relative; flex-shrink: 0;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .2) 0);
  transition: --p 1.2s;
}
.ps-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: rgba(60, 40, 180, .55); backdrop-filter: blur(4px); }
.ps-ring span { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font-weight: 800; font-size: 21px; color: #fff; }
.ps-hero-ring small { display: block; font-size: 12px; color: rgba(255, 255, 255, .75); }
.ps-hero-ring strong { display: block; font-size: 15px; color: #fff; }

.ps-kpi {
  position: relative; overflow: hidden;
  padding: 20px 20px 18px;
  border-radius: var(--ps-radius);
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  box-shadow: var(--ps-e2);
  height: 100%;
  transition: transform .3s var(--ps-ease), box-shadow .3s var(--ps-ease);
}
.ps-kpi:hover { transform: translateY(-4px); box-shadow: var(--ps-e3); }
.ps-kpi::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--k-rgb), .14), transparent 70%);
  transition: transform .5s var(--ps-ease);
}
.ps-kpi:hover::after { transform: scale(1.3); }
.ps-kpi .ps-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ps-kpi .ps-kpi-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--k-rgb), .12); color: rgb(var(--k-rgb)); }
.ps-kpi .ps-kpi-ic .msr { font-size: 24px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.ps-kpi .ps-kpi-tag { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(var(--k-rgb), .1); color: rgb(var(--k-rgb)); }
.ps-kpi .ps-kpi-label { font-size: 13px; font-weight: 600; color: var(--ps-muted); margin-bottom: 4px; }
.ps-kpi .ps-kpi-val { font-size: 26px; font-weight: 800; color: var(--ps-text); letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-kpi .ps-kpi-sub { margin-top: 10px; font-size: 12.5px; color: var(--ps-muted); }
.ps-kpi .ps-kpi-bar { height: 6px; border-radius: 99px; background: var(--ps-surface-2); margin-top: 12px; overflow: hidden; }
.ps-kpi .ps-kpi-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: rgb(var(--k-rgb)); transition: width 1.4s var(--ps-ease); }
.k-primary { --k-rgb: 79, 70, 229; }
.k-violet { --k-rgb: 124, 58, 237; }
.k-success { --k-rgb: 22, 163, 74; }
.k-danger { --k-rgb: 225, 29, 72; }
.k-teal { --k-rgb: 13, 148, 136; }

.ps-panel { padding: 22px 22px 18px; height: 100%; }
.ps-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ps-panel-head h4 { font-size: 16.5px; font-weight: 800; margin: 0; }
.ps-panel-head p { font-size: 12.5px; color: var(--ps-muted); margin: 3px 0 0; }
.ps-legend { display: flex; gap: 14px; font-size: 12px; font-weight: 600; color: var(--ps-text-2); flex-wrap: wrap; }
.ps-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ps-donut-wrap { position: relative; height: 230px; }
.ps-donut-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; text-align: center; }
.ps-donut-center strong { display: block; font-size: 28px; font-weight: 800; color: var(--ps-text); letter-spacing: -.03em; }
.ps-donut-center small { font-size: 12px; color: var(--ps-muted); font-weight: 600; }
.ps-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ps-split > div { padding: 12px 14px; border-radius: 12px; background: var(--ps-surface-2); border: 1px solid var(--ps-border); }
.ps-split small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ps-muted); }
.ps-split small i { width: 8px; height: 8px; border-radius: 50%; }
.ps-split strong { display: block; margin-top: 4px; font-size: 15px; color: var(--ps-text); font-variant-numeric: tabular-nums; }

/* =====================================================================
   Dark-mode adjustments for template classes with hard-coded colours
   ===================================================================== */
html[data-ps-theme="dark"] .bg-white, html[data-ps-theme="dark"] .bg-light { background-color: var(--ps-surface) !important; }
html[data-ps-theme="dark"] .text-black, html[data-ps-theme="dark"] .text-dark { color: var(--ps-text) !important; }
html[data-ps-theme="dark"] .table-light, html[data-ps-theme="dark"] .table-light > * > * { --bs-table-bg: var(--ps-surface-2); color: var(--ps-text-2); }
html[data-ps-theme="dark"] .border, html[data-ps-theme="dark"] .border-bottom, html[data-ps-theme="dark"] .border-top { border-color: var(--ps-border) !important; }
html[data-ps-theme="dark"] .list-group-item { background: var(--ps-surface); color: var(--ps-text-2); border-color: var(--ps-border); }
html[data-ps-theme="dark"] .select2-results__option { color: var(--ps-text-2); }
html[data-ps-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ps-text); }
html[data-ps-theme="dark"] input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--ps-surface) inset; -webkit-text-fill-color: var(--ps-text); }

/* =====================================================================
   Print — keep invoices clean
   ===================================================================== */
@media print {
  .ps-sidebar, .ps-topbar, .ps-footer, .overlay, #ps-progress, .ps-cmd-backdrop { display: none !important; }
  .main-wrapper { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
  body::before { display: none; }
  .card-style, .card { box-shadow: none !important; border: 0 !important; }
  .ps-anim { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   Modal windows: square corners, compact spacing (overrides page-level styles)
   ===================================================================== */
.modal .modal-content,
.modal .modal-content.card-style { border-radius: 0 !important; padding: 0 !important; }
.modal .modal-header { padding: 12px 16px !important; border-radius: 0 !important; }
.modal .modal-header .btn-close { margin: 0 0 0 auto; padding: 8px; }
.modal .modal-body { padding: 16px !important; }
.modal .modal-body .modal-body { padding: 0 !important; }          /* fragments that wrap themselves in another modal-body */
.modal .modal-footer { padding: 10px 16px !important; border-radius: 0 !important; }
.modal .modal-footer > * { margin: 0; }
.modal .modal-footer { gap: 8px; }
@media (max-width: 575.98px) {
  .modal .modal-dialog { margin: 0; max-width: 100%; min-height: 100%; align-items: stretch; }
  .modal .modal-dialog-centered { min-height: 100%; }
  .modal .modal-content { border-left: 0 !important; border-right: 0 !important; min-height: 100vh; }
}

/* =====================================================================
   Side menu — light theme (dark theme keeps the dark menu above)
   ===================================================================== */
html:not([data-ps-theme="dark"]) .sidebar-nav-wrapper.ps-sidebar {
  background:
    radial-gradient(420px 240px at 0% 0%, rgba(124, 58, 237, .07), transparent 70%),
    radial-gradient(360px 240px at 100% 100%, rgba(14, 165, 164, .05), transparent 70%),
    #ffffff;
  border-right: 1px solid var(--ps-border);
  box-shadow: 4px 0 24px -16px rgba(16, 24, 40, .25);
}
html:not([data-ps-theme="dark"]) .ps-brand-text strong { color: var(--ps-text); }
html:not([data-ps-theme="dark"]) .ps-brand-text small { color: var(--ps-muted); }
html:not([data-ps-theme="dark"]) .ps-side-scroll::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .12); }
html:not([data-ps-theme="dark"]) .ps-nav-label { color: #9aa1b5; }
html:not([data-ps-theme="dark"]) .ps-nav-link { color: #4b5563 !important; }
html:not([data-ps-theme="dark"]) .ps-nav-link .msr { color: #7c8499; }
html:not([data-ps-theme="dark"]) .ps-nav-link:hover { background: rgba(var(--ps-primary-rgb), .07); color: var(--ps-primary) !important; }
html:not([data-ps-theme="dark"]) .ps-nav-link:hover .msr { color: var(--ps-primary); }
html:not([data-ps-theme="dark"]) .ps-nav-link[aria-expanded="true"] { color: var(--ps-text) !important; background: rgba(var(--ps-primary-rgb), .05); }
html:not([data-ps-theme="dark"]) .ps-nav-link[aria-expanded="true"] .msr { color: var(--ps-primary); }
/* selected section/item: keep the violet button (it is also "open", which would otherwise give a pale background) */
html:not([data-ps-theme="dark"]) .ps-nav > li.active > .ps-nav-link,
html:not([data-ps-theme="dark"]) .ps-nav > li.active > .ps-nav-link:hover,
html:not([data-ps-theme="dark"]) .ps-nav > li.active > .ps-nav-link[aria-expanded="true"] {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, .95), rgba(124, 58, 237, .95));
  box-shadow: 0 10px 24px -12px rgba(124, 58, 237, .8);
}
html:not([data-ps-theme="dark"]) .ps-nav > li.active > .ps-nav-link .msr { color: #fff !important; }
html:not([data-ps-theme="dark"]) .ps-subnav::before { background: linear-gradient(180deg, rgba(16, 24, 40, .12), rgba(16, 24, 40, .02)); }
html:not([data-ps-theme="dark"]) .ps-subnav li a { color: #5b6275 !important; }
html:not([data-ps-theme="dark"]) .ps-subnav li a::before { background: #fff; border-color: #c3c8d6; }
html:not([data-ps-theme="dark"]) .ps-subnav li a:hover { color: var(--ps-primary) !important; background: rgba(var(--ps-primary-rgb), .06); }
html:not([data-ps-theme="dark"]) .ps-subnav li a.active { color: var(--ps-primary) !important; background: rgba(var(--ps-primary-rgb), .09); }
html:not([data-ps-theme="dark"]) .ps-subnav li a.active::before { background: var(--ps-primary); border-color: var(--ps-primary); box-shadow: 0 0 0 4px rgba(var(--ps-primary-rgb), .15); }
html:not([data-ps-theme="dark"]) .ps-side-footer { background: var(--ps-surface-2, #f6f7fb); border-color: var(--ps-border); }
html:not([data-ps-theme="dark"]) .ps-side-footer strong { color: var(--ps-text); }
html:not([data-ps-theme="dark"]) .ps-side-footer a { color: var(--ps-muted) !important; }
html:not([data-ps-theme="dark"]) .ps-side-footer a:hover { color: var(--ps-primary) !important; }
html:not([data-ps-theme="dark"]) .ps-perm-note { color: #b45309; }
@media (min-width: 1200px) {
  html:not([data-ps-theme="dark"]) .ps-sidebar.active:hover { box-shadow: 20px 0 60px -20px rgba(16, 24, 40, .3); }
}

/* =====================================================================
   Top bar notifications (the user's notes)
   ===================================================================== */
.ps-icon-btn .ps-notify-count { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--ps-surface); }
.ps-notify-pill { margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; background: rgba(220, 38, 38, .1); color: #dc2626; vertical-align: 1px; }
.ps-notify-menu { max-height: 70vh; overflow-y: auto; }
.ps-notify-item .tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ps-notify-item .tx b { font-size: 13px; font-weight: 700; color: var(--ps-text); line-height: 1.35; }
.ps-notify-item .tx small { font-size: 12px; color: var(--ps-muted); line-height: 1.4; }
.ps-notify-item .tx em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ps-primary); margin-top: 2px; }
.ps-notify-item.n-overdue .ic { background: rgba(220, 38, 38, .1); color: #dc2626; }
.ps-notify-item.n-overdue .tx em { color: #dc2626; }
.ps-notify-item.n-today .ic { background: rgba(217, 119, 6, .12); color: #d97706; }
.ps-notify-item.n-today .tx em { color: #d97706; }
.ps-notify-item.n-undated .ic { background: var(--ps-surface-2); color: var(--ps-muted); }
.ps-notify-item.n-undated .tx em { color: var(--ps-muted); }
.ps-notify-empty { text-align: center; padding: 22px 16px 18px; font-size: 12.5px; color: var(--ps-muted); }
.ps-notify-empty .msr { display: block; font-size: 34px; opacity: .6; margin-bottom: 4px; }
.ps-notify-empty strong { display: block; font-size: 14px; color: var(--ps-text); }