/*
 * Accounting Premium UI v2.1
 * Shared responsive design layer for all authenticated and public screens.
 * Includes system-wide zebra striping for financial data tables.
 */

:root {
  --ui-navy-950: #071426;
  --ui-navy-900: #0b1f3a;
  --ui-navy-850: #102947;
  --ui-navy-800: #163454;
  --ui-blue-700: #174ea6;
  --ui-blue-600: #1f67d2;
  --ui-blue-500: #2f7ee6;
  --ui-blue-100: #dbeafe;
  --ui-blue-50: #eff6ff;
  --ui-teal-600: #0f8f84;
  --ui-teal-100: #ccfbf1;
  --ui-green-700: #137044;
  --ui-green-100: #d8f6e5;
  --ui-amber-700: #a35409;
  --ui-amber-100: #fef0c7;
  --ui-red-700: #b42318;
  --ui-red-100: #fee4e2;
  --ui-purple-700: #6941c6;
  --ui-purple-100: #ebe4ff;
  --ui-pink-700: #c11574;
  --ui-pink-100: #fce7f6;

  --ui-bg: #f4f7fb;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-surface-muted: #eef3f8;
  --ui-text: #152238;
  --ui-text-soft: #46566c;
  --ui-text-muted: #758398;
  --ui-border: #dfe6ef;
  --ui-border-strong: #cbd5e1;
  --ui-table-row-odd: var(--ui-surface);
  --ui-table-row-even: color-mix(in srgb, var(--ui-blue-50) 78%, var(--ui-surface));
  --ui-table-row-hover: color-mix(in srgb, var(--ui-blue-100) 72%, var(--ui-surface));
  --ui-focus: rgba(47, 126, 230, .3);
  --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --ui-shadow-sm: 0 8px 24px rgba(15, 35, 66, .07);
  --ui-shadow-md: 0 18px 42px rgba(15, 35, 66, .12);
  --ui-shadow-lg: 0 28px 68px rgba(7, 20, 38, .2);
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-radius-xl: 24px;
  --ui-sidebar-width: 286px;
  --ui-sidebar-collapsed: 88px;
  --ui-topbar-height: 74px;
  --ui-mobile-nav-height: 72px;
  --ui-container: 1600px;

  /* Compatibility aliases used by the premium screen patterns. */
  --app-bg: var(--ui-bg);
  --app-surface: var(--ui-surface);
  --app-surface-elevated: var(--ui-surface);
  --app-surface-muted: var(--ui-surface-muted);
  --app-text: var(--ui-text);
  --app-text-soft: var(--ui-text-soft);
  --app-text-muted: var(--ui-text-muted);
  --app-border: var(--ui-border);
  --app-border-strong: var(--ui-border-strong);
  --app-primary: var(--ui-blue-600);
  --app-primary-soft: var(--ui-blue-50);
  --app-info: #1677a6;
  --app-info-soft: #e5f6fb;
  --app-success: var(--ui-green-700);
  --app-success-soft: var(--ui-green-100);
  --app-warning: var(--ui-amber-700);
  --app-warning-soft: var(--ui-amber-100);
  --app-danger: var(--ui-red-700);
  --app-danger-soft: var(--ui-red-100);
  --app-shadow-xs: var(--ui-shadow-xs);
  --app-shadow-sm: var(--ui-shadow-sm);
  --app-shadow-md: var(--ui-shadow-md);
  --app-shadow-lg: var(--ui-shadow-lg);
  --app-font: "Cairo", "Segoe UI", Tahoma, Arial, "Noto Sans Arabic", sans-serif;
  --app-transition: 180ms cubic-bezier(.2, .8, .2, 1);

  --color-brand-25: #f7fbff;
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #2f7ee6;
  --color-brand-600: #1f67d2;
  --color-brand-700: #174ea6;
  --color-brand-800: #163f7d;
  --color-brand-900: #173761;
}

html.dark {
  --ui-bg: #07111f;
  --ui-surface: #0d1b2d;
  --ui-surface-soft: #112238;
  --ui-surface-muted: #172a41;
  --ui-text: #edf4ff;
  --ui-text-soft: #c5d1e0;
  --ui-text-muted: #91a2b8;
  --ui-border: #25374e;
  --ui-border-strong: #344a65;
  --ui-table-row-odd: var(--ui-surface);
  --ui-table-row-even: color-mix(in srgb, var(--ui-surface-muted) 54%, var(--ui-surface));
  --ui-table-row-hover: color-mix(in srgb, var(--ui-blue-500) 18%, var(--ui-surface));
  --ui-focus: rgba(96, 165, 250, .35);
  --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);
  --ui-shadow-sm: 0 10px 28px rgba(0, 0, 0, .18);
  --ui-shadow-md: 0 20px 48px rgba(0, 0, 0, .28);
  --ui-shadow-lg: 0 30px 72px rgba(0, 0, 0, .4);
  --app-primary-soft: #142b47;
  --app-info: #72c7e3;
  --app-info-soft: rgba(22, 119, 166, .2);
  --app-success: #83ddb0;
  --app-success-soft: rgba(19, 112, 68, .22);
  --app-warning: #f0bb68;
  --app-warning-soft: rgba(163, 84, 9, .22);
  --app-danger: #ff9c93;
  --app-danger-soft: rgba(180, 35, 24, .2);
}

html {
  min-height: 100%;
  background: var(--ui-bg);
  scroll-behavior: smooth;
}

body.accounting-app,
body.auth-premium {
  min-height: 100%;
  margin: 0;
  color: var(--ui-text);
  background: var(--ui-bg);
  font-family: var(--app-font);
  font-size: 15px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.accounting-app * {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;
}

body.accounting-app *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.accounting-app *::-webkit-scrollbar-thumb {
  background: var(--ui-border-strong);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

body.accounting-app *::-webkit-scrollbar-track { background: transparent; }

[x-cloak] { display: none !important; }

.ui-skip-link {
  position: fixed;
  z-index: 100000;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 10px 16px;
  color: #fff;
  background: var(--ui-blue-700);
  border-radius: 10px;
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.ui-skip-link:focus { transform: translateY(0); }

.ui-page-progress {
  position: fixed;
  z-index: 100001;
  inset: 0 0 auto 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ui-blue-500), #22c1b4);
  opacity: 0;
  transition: width .35s ease, opacity .2s ease;
}
.ui-page-progress.is-loading { width: 72%; opacity: 1; }
.ui-page-progress.is-complete { width: 100%; opacity: 0; transition: width .18s ease, opacity .35s ease .12s; }

/* Application shell */
.app-shell {
  display: flex;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 76% -15%, rgba(47, 126, 230, .08), transparent 32%),
    var(--ui-bg);
}

.app-workspace {
  min-width: 0;
  min-height: 100dvh;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  transition: padding .25s ease;
}

.app-main {
  min-width: 0;
  flex: 1 1 auto;
  outline: none;
}

.app-container {
  width: min(100%, var(--ui-container));
  margin-inline: auto;
  padding: 28px 30px 46px;
}

/* Sidebar */
.app-sidebar {
  position: sticky;
  z-index: 60;
  inset-block-start: 0;
  width: var(--ui-sidebar-width);
  min-width: var(--ui-sidebar-width);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  color: #dbe8f8;
  background:
    radial-gradient(circle at 90% 0, rgba(47, 126, 230, .24), transparent 30%),
    linear-gradient(180deg, var(--ui-navy-900) 0%, var(--ui-navy-950) 100%);
  border-inline-end: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 14px 0 40px rgba(7, 20, 38, .08);
  transition: width .25s ease, min-width .25s ease, transform .25s ease;
  overflow: hidden;
}

.app-sidebar-brand {
  min-height: var(--ui-topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-block-end: 1px solid rgba(255, 255, 255, .08);
}

.app-brand-link {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

.app-brand-mark,
.app-mobile-brand span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, #3d8cf0, #1751a7);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 13px;
  box-shadow: 0 10px 25px rgba(31, 103, 210, .32), inset 0 1px rgba(255, 255, 255, .18);
  font-weight: 800;
  letter-spacing: -.04em;
}

.app-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .18s ease, width .2s ease;
}
.app-brand-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 750; }
.app-brand-copy small { margin-block-start: 4px; color: #91aaca; font-size: 11px; }

.app-sidebar-close,
.app-sidebar-collapse {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a9bdd7;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.app-sidebar-close:hover,
.app-sidebar-collapse:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.app-sidebar-close { display: none; }

.app-sidebar-context {
  margin: 14px 14px 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
}
.app-sidebar-context-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #83b8ff;
  background: rgba(47, 126, 230, .16);
  border-radius: 10px;
}
.app-sidebar-context-copy {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
}
.app-sidebar-context-copy small { color: #8fa7c5; font-size: 10px; }
.app-sidebar-context-copy strong { overflow: hidden; color: #f4f8fd; font-size: 12px; text-overflow: ellipsis; }
.app-sidebar-context > a {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a9bdd7;
  border-radius: 9px;
}
.app-sidebar-context > a:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.app-sidebar-search {
  position: relative;
  margin: 6px 14px 10px;
  transition: opacity .18s ease;
}
.app-sidebar-search > svg {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: 12px;
  width: 18px;
  height: 18px;
  color: #8da5c3;
  transform: translateY(-50%);
  pointer-events: none;
}
.app-sidebar-search input {
  width: 100%;
  height: 42px;
  padding-inline: 40px 50px;
  color: #f1f6fc;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  outline: none;
  font-size: 12px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.app-sidebar-search input::placeholder { color: #829ab8; }
.app-sidebar-search input:focus { background: rgba(255, 255, 255, .1); border-color: rgba(96, 165, 250, .7); box-shadow: 0 0 0 3px rgba(59, 130, 246, .16); }
.app-sidebar-search kbd {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 9px;
  padding: 2px 6px;
  color: #8fa7c5;
  background: rgba(5, 15, 29, .45);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: 9px;
}

.app-sidebar-nav {
  min-height: 0;
  flex: 1;
  padding: 6px 12px 18px;
  overflow-x: hidden;
  overflow-y: auto;
}

.app-nav-section { margin-block-end: 19px; }
.app-nav-section > h2 {
  margin: 0 10px 7px;
  color: #6f89aa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: opacity .18s ease;
}
.app-nav-list { display: grid; gap: 3px; }

.app-nav-link,
.app-nav-group-trigger {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  color: #afc1d8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.app-nav-group-trigger::-webkit-details-marker { display: none; }
.app-nav-link:hover,
.app-nav-group-trigger:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.app-nav-link.is-active,
.app-nav-group.is-active > .app-nav-group-trigger {
  color: #fff;
  background: linear-gradient(90deg, rgba(47, 126, 230, .26), rgba(47, 126, 230, .1));
  border-color: rgba(96, 165, 250, .2);
  box-shadow: inset -3px 0 #5ea1f7;
}
.app-nav-link.is-active::after {
  content: "";
  position: absolute;
  inset-inline-end: 10px;
  width: 5px;
  height: 5px;
  background: #7db5ff;
  border-radius: 999px;
}
.app-nav-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #87a5c9;
  transition: color .18s ease;
}
.app-nav-link:hover .app-nav-icon,
.app-nav-link.is-active .app-nav-icon,
.app-nav-group-trigger:hover .app-nav-icon,
.app-nav-group.is-active > .app-nav-group-trigger .app-nav-icon { color: #83b8ff; }
.app-nav-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 13px;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity .18s ease;
}
.app-nav-chevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7891b1;
  transition: transform .2s ease, opacity .18s ease;
}
.app-nav-group[open] > .app-nav-group-trigger .app-nav-chevron { transform: rotate(180deg); }
.app-nav-children {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 4px 15px 5px 0;
  padding-inline-start: 13px;
  border-inline-start: 1px solid rgba(255, 255, 255, .1);
}
.app-nav-child { min-height: 39px; padding: 7px 9px; border-radius: 10px; }
.app-nav-child .app-nav-icon { width: 21px; height: 21px; flex-basis: 21px; }
.app-nav-child .app-nav-label { font-size: 12px; }
.app-nav-empty { padding: 28px 16px; color: #8fa7c5; text-align: center; }
.app-nav-empty svg { margin: 0 auto 8px; }
.app-nav-empty p { margin: 0; font-size: 12px; }
.app-nav-section.is-filtered-out,
.app-nav-link.is-filtered-out,
.app-nav-group.is-filtered-out { display: none !important; }

.app-sidebar-footer {
  min-height: 70px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-block-start: 1px solid rgba(255, 255, 255, .08);
  background: rgba(2, 10, 21, .22);
}
.app-sidebar-user {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.app-sidebar-user-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a8c8f4;
  background: rgba(255, 255, 255, .07);
  border-radius: 11px;
}
.app-sidebar-user > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .18s ease;
}
.app-sidebar-user strong { overflow: hidden; color: #f4f8fd; font-size: 12px; text-overflow: ellipsis; }
.app-sidebar-user small { color: #829ab8; font-size: 10px; }

@media (min-width: 1280px) {
  body.app-sidebar-collapsed .app-sidebar { width: var(--ui-sidebar-collapsed); min-width: var(--ui-sidebar-collapsed); }
  body.app-sidebar-collapsed .app-brand-copy,
  body.app-sidebar-collapsed .app-sidebar-context-copy,
  body.app-sidebar-collapsed .app-sidebar-context > a,
  body.app-sidebar-collapsed .app-sidebar-search,
  body.app-sidebar-collapsed .app-nav-section > h2,
  body.app-sidebar-collapsed .app-nav-label,
  body.app-sidebar-collapsed .app-nav-chevron,
  body.app-sidebar-collapsed .app-sidebar-user > span:last-child { width: 0; opacity: 0; pointer-events: none; }
  body.app-sidebar-collapsed .app-sidebar-brand { padding-inline: 22px; }
  body.app-sidebar-collapsed .app-sidebar-context { justify-content: center; margin-inline: 12px; padding-inline: 10px; }
  body.app-sidebar-collapsed .app-nav-section { margin-block-end: 8px; }
  body.app-sidebar-collapsed .app-nav-link,
  body.app-sidebar-collapsed .app-nav-group-trigger { justify-content: center; padding-inline: 11px; }
  body.app-sidebar-collapsed .app-nav-link.is-active::after { display: none; }
  body.app-sidebar-collapsed .app-nav-children { display: none; }
  body.app-sidebar-collapsed .app-sidebar-footer { justify-content: center; padding-inline: 12px; }
  body.app-sidebar-collapsed .app-sidebar-user { flex: 0; }
  body.app-sidebar-collapsed .app-sidebar-collapse { transform: rotate(180deg); }
  body.app-sidebar-collapsed .app-nav-link,
  body.app-sidebar-collapsed .app-nav-group-trigger { position: relative; }
  body.app-sidebar-collapsed .app-nav-link:hover::before,
  body.app-sidebar-collapsed .app-nav-group-trigger:hover::before {
    content: attr(data-tooltip);
  }
}

/* Topbar */
.app-topbar {
  position: sticky;
  z-index: 50;
  inset-block-start: 0;
  min-height: var(--ui-topbar-height);
  background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
  border-block-end: 1px solid color-mix(in srgb, var(--ui-border) 82%, transparent);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.app-topbar-inner {
  min-height: var(--ui-topbar-height);
  padding-inline: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.app-topbar-leading,
.app-topbar-actions { display: flex; align-items: center; gap: 10px; }
.app-topbar-leading { min-width: 0; }
.app-topbar-actions { flex: 0 0 auto; }

.app-icon-button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text-soft);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  box-shadow: var(--ui-shadow-xs);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.app-icon-button svg { width: 21px; height: 21px; }
.app-icon-button:hover { color: var(--ui-blue-700); background: var(--ui-blue-50); border-color: #bed6f4; transform: translateY(-1px); box-shadow: var(--ui-shadow-sm); }
html.dark .app-icon-button:hover { color: #8cbcff; background: #142b47; border-color: #335579; }

.app-context-block { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.app-context-eyebrow { color: var(--ui-text-muted); font-size: 10px; font-weight: 650; }
.app-context-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; margin-block-start: 4px; }
.app-context-title { max-width: 340px; overflow: hidden; color: var(--ui-text); font-size: 14px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.app-context-dot { width: 5px; height: 5px; flex: 0 0 5px; background: var(--ui-teal-600); border-radius: 999px; }
.app-context-activity { color: var(--ui-text-muted); font-size: 11px; white-space: nowrap; }
.app-mobile-brand { display: none; }

.app-search-trigger {
  min-width: 190px;
  height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ui-text-muted);
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.app-search-trigger:hover { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border-strong); }
.app-search-trigger svg { width: 18px; height: 18px; }
.app-search-trigger span { flex: 1; text-align: start; font-size: 12px; }
.app-search-trigger kbd,
.ui-command kbd {
  padding: 2px 6px;
  color: var(--ui-text-muted);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-block-end-width: 2px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 9px;
  line-height: 1.3;
}

.app-mode-chip,
.app-quick-button {
  height: 42px;
  padding-inline: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.app-mode-chip { color: var(--ui-text-soft); background: var(--ui-surface); border: 1px solid var(--ui-border); }
.app-mode-chip:hover { background: var(--ui-surface-soft); border-color: var(--ui-border-strong); }
.app-mode-chip-dot { width: 7px; height: 7px; background: var(--ui-teal-600); border-radius: 999px; box-shadow: 0 0 0 3px rgba(15, 143, 132, .12); }
.app-quick-button { color: #fff; background: linear-gradient(135deg, var(--ui-blue-600), var(--ui-blue-700)); border: 1px solid rgba(23, 78, 166, .4); box-shadow: 0 7px 18px rgba(31, 103, 210, .18); }
.app-quick-button svg { width: 18px; height: 18px; }
.app-quick-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(31, 103, 210, .26); }

.app-quick-wrap,
.app-account-wrap { position: relative; }
.app-popover {
  position: absolute;
  z-index: 80;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 17px;
  box-shadow: var(--ui-shadow-lg);
  transform-origin: top right;
  overflow: hidden;
}
.app-quick-menu { width: min(410px, calc(100vw - 24px)); }
.app-popover-head { padding: 15px 17px; display: flex; flex-direction: column; border-block-end: 1px solid var(--ui-border); }
.app-popover-head span { font-size: 13px; font-weight: 750; }
.app-popover-head small { margin-block-start: 3px; color: var(--ui-text-muted); font-size: 10px; }
.app-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.app-quick-item { min-height: 72px; padding: 11px; display: flex; align-items: center; gap: 10px; color: var(--ui-text); background: var(--ui-surface-soft); border: 1px solid transparent; border-radius: 13px; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.app-quick-item:hover { background: var(--ui-blue-50); border-color: #c9dcf6; transform: translateY(-1px); }
html.dark .app-quick-item:hover { background: #142b47; border-color: #2f5278; }
.app-quick-icon { width: 37px; height: 37px; flex: 0 0 37px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-blue-700); background: var(--ui-blue-100); border-radius: 11px; }
html.dark .app-quick-icon { color: #8cbcff; background: #173557; }
.app-quick-item > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.app-quick-item strong { font-size: 11px; font-weight: 700; }
.app-quick-item small { margin-block-start: 2px; color: var(--ui-text-muted); font-size: 9px; }

.app-account-trigger {
  min-height: 44px;
  padding: 4px 8px 4px 5px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ui-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 13px;
  transition: background .18s ease, border-color .18s ease;
}
.app-account-trigger:hover { background: var(--ui-surface-soft); border-color: var(--ui-border); }
.app-avatar {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, var(--ui-navy-800), var(--ui-blue-600));
  border: 2px solid color-mix(in srgb, var(--ui-blue-100) 75%, transparent);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}
.app-avatar--large { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; font-size: 14px; }
.app-account-copy { max-width: 145px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; text-align: start; }
.app-account-copy strong { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.app-account-copy small { margin-block-start: 2px; color: var(--ui-text-muted); font-size: 9px; }
.app-account-chevron { width: 16px; height: 16px; color: var(--ui-text-muted); transition: transform .18s ease; }
.app-account-chevron.is-open { transform: rotate(180deg); }
.app-account-menu { width: min(305px, calc(100vw - 24px)); }
.app-account-summary { padding: 15px; display: flex; align-items: center; gap: 11px; border-block-end: 1px solid var(--ui-border); }
.app-account-summary > div { min-width: 0; display: flex; flex-direction: column; }
.app-account-summary strong { font-size: 12px; }
.app-account-summary small { overflow: hidden; margin-block-start: 2px; color: var(--ui-text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.app-account-company { margin: 10px 12px 0; padding: 10px 11px; display: flex; flex-direction: column; background: var(--ui-surface-soft); border-radius: 11px; }
.app-account-company span { color: var(--ui-text-muted); font-size: 9px; }
.app-account-company strong { margin-block-start: 2px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.app-account-links { display: grid; gap: 2px; padding: 9px; }
.app-account-links a,
.app-logout-form button { min-height: 42px; width: 100%; padding: 9px 10px; display: flex; align-items: center; gap: 10px; color: var(--ui-text-soft); background: transparent; border: 0; border-radius: 10px; text-decoration: none; font-size: 11px; text-align: start; transition: color .18s ease, background .18s ease; }
.app-account-links a:hover { color: var(--ui-blue-700); background: var(--ui-blue-50); }
html.dark .app-account-links a:hover { color: #8cbcff; background: #142b47; }
.app-logout-form { padding: 9px; border-block-start: 1px solid var(--ui-border); }
.app-logout-form button { color: var(--ui-red-700); cursor: pointer; }
.app-logout-form button:hover { background: var(--ui-red-100); }
html.dark .app-logout-form button:hover { background: rgba(180, 35, 24, .16); }

/* Mobile bottom navigation */
.app-mobile-nav { display: none; }

/* Command palette */
.ui-command {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: min(12vh, 100px) 16px 20px;
}
.ui-command[hidden] { display: none !important; }
.ui-command-backdrop { position: absolute; inset: 0; background: rgba(4, 13, 25, .62); border: 0; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.ui-command-panel { position: relative; width: min(690px, 100%); max-height: min(720px, 80vh); display: flex; flex-direction: column; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 20px; box-shadow: var(--ui-shadow-lg); overflow: hidden; animation: ui-command-in .18s ease both; }
@keyframes ui-command-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ui-command-search { min-height: 67px; padding: 10px 15px; display: flex; align-items: center; gap: 12px; border-block-end: 1px solid var(--ui-border); }
.ui-command-search > svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--ui-text-muted); }
.ui-command-search > div { flex: 1; }
.ui-command-search input { width: 100%; height: 44px; color: var(--ui-text); background: transparent; border: 0; outline: 0; font-size: 15px; }
.ui-command-search input::placeholder { color: var(--ui-text-muted); }
.ui-command-results { min-height: 150px; padding: 10px; overflow-y: auto; }
.ui-command-group-label { padding: 8px 10px 5px; color: var(--ui-text-muted); font-size: 10px; font-weight: 700; }
.ui-command-item { width: 100%; min-height: 50px; padding: 8px 10px; display: flex; align-items: center; gap: 11px; color: var(--ui-text); background: transparent; border: 0; border-radius: 12px; text-decoration: none; text-align: start; cursor: pointer; }
.ui-command-item:hover,
.ui-command-item.is-selected { background: var(--ui-blue-50); }
html.dark .ui-command-item:hover,
html.dark .ui-command-item.is-selected { background: #142b47; }
.ui-command-item-icon { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-blue-700); background: var(--ui-blue-100); border-radius: 10px; }
html.dark .ui-command-item-icon { color: #8cbcff; background: #173557; }
.ui-command-item-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ui-command-item-copy strong { font-size: 12px; }
.ui-command-item-copy small { margin-block-start: 2px; color: var(--ui-text-muted); font-size: 9px; }
.ui-command-item-arrow { color: var(--ui-text-muted); font-size: 16px; }
.ui-command-empty { padding: 42px 20px; color: var(--ui-text-muted); text-align: center; }
.ui-command-empty svg { width: 34px; height: 34px; margin: 0 auto 8px; }
.ui-command-empty p { margin: 0; font-size: 12px; }
.ui-command-footer { min-height: 43px; padding: 8px 14px; display: flex; align-items: center; gap: 18px; color: var(--ui-text-muted); background: var(--ui-surface-soft); border-block-start: 1px solid var(--ui-border); font-size: 9px; }
.ui-command-footer span { display: inline-flex; align-items: center; gap: 4px; }
body.ui-command-open { overflow: hidden; }

/* Core UI components */
.ui-page-header {
  margin-block-end: 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.ui-page-header-copy { min-width: 0; }
.ui-page-eyebrow { display: inline-block; margin-block-end: 6px; color: var(--ui-blue-700); font-size: 10px; font-weight: 750; }
html.dark .ui-page-eyebrow { color: #82b7ff; }
.ui-page-header h1 { margin: 0; color: var(--ui-text); font-size: clamp(21px, 2vw, 29px); font-weight: 760; line-height: 1.28; letter-spacing: -.02em; }
.ui-page-header p { max-width: 760px; margin: 6px 0 0; color: var(--ui-text-muted); font-size: 12px; line-height: 1.7; }
.ui-page-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ui-back-link { min-height: 42px; padding: 8px 13px; display: inline-flex; align-items: center; gap: 7px; color: var(--ui-text-soft); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 11px; text-decoration: none; font-size: 11px; font-weight: 650; }
.ui-back-link:hover { color: var(--ui-blue-700); border-color: #bdd5f3; }
.ui-back-link svg { width: 17px; height: 17px; }

.ui-btn {
  min-height: 42px;
  padding-inline: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  text-decoration: none;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ui-btn:hover { transform: translateY(-1px); }
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.ui-btn svg { width: 17px; height: 17px; }
.ui-btn--xs { min-height: 36px; padding-inline: 11px; border-radius: 10px; font-size: 10px; }
.ui-btn--sm { min-height: 39px; padding-inline: 13px; font-size: 11px; }
.ui-btn--md { font-size: 12px; }
.ui-btn--lg { min-height: 48px; padding-inline: 19px; font-size: 13px; }
.ui-btn--brand { color: #fff; background: linear-gradient(135deg, var(--ui-blue-600), var(--ui-blue-700)); border-color: rgba(23, 78, 166, .35); box-shadow: 0 7px 16px rgba(31, 103, 210, .17); }
.ui-btn--brand:hover { box-shadow: 0 10px 22px rgba(31, 103, 210, .24); }
.ui-btn--info { color: #1555a0; background: var(--ui-blue-100); border-color: #bed7f5; }
.ui-btn--success { color: #fff; background: #168151; border-color: #0f7044; }
.ui-btn--warning { color: #fff; background: #b9650e; border-color: #a35409; }
.ui-btn--danger { color: #fff; background: #c2362a; border-color: #a92b21; }
.ui-btn--soft { color: var(--ui-text-soft); background: var(--ui-surface); border-color: var(--ui-border); box-shadow: var(--ui-shadow-xs); }
.ui-btn--soft:hover { color: var(--ui-text); background: var(--ui-surface-soft); border-color: var(--ui-border-strong); }
.ui-btn--outline { color: var(--ui-text-soft); background: transparent; border-color: var(--ui-border-strong); }
.ui-btn--outline:hover { color: var(--ui-blue-700); background: var(--ui-blue-50); border-color: #b8d2f2; }
.ui-btn--soft-success { color: var(--ui-green-700); background: var(--ui-green-100); border-color: #b7ebcd; }
.ui-btn--soft-warning { color: var(--ui-amber-700); background: var(--ui-amber-100); border-color: #f7d990; }
.ui-btn--soft-danger { color: var(--ui-red-700); background: var(--ui-red-100); border-color: #f7c7c2; }
.ui-btn--soft-brand { color: var(--ui-blue-700); background: var(--ui-blue-100); border-color: #bdd6f6; }
.ui-btn--pink { color: var(--ui-pink-700); }
.ui-btn--purple { color: var(--ui-purple-700); }
html.dark .ui-btn--info,
html.dark .ui-btn--soft-brand { color: #91c0ff; background: #173557; border-color: #2f5278; }
html.dark .ui-btn--soft-success { color: #87e6b3; background: rgba(19, 112, 68, .18); border-color: rgba(56, 165, 105, .32); }
html.dark .ui-btn--soft-warning { color: #f5c67c; background: rgba(163, 84, 9, .2); border-color: rgba(185, 101, 14, .38); }
html.dark .ui-btn--soft-danger { color: #ffaba3; background: rgba(180, 35, 24, .17); border-color: rgba(222, 70, 58, .32); }

.ui-card {
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-xs);
}
.ui-card--no-padding { padding: 0; }
.ui-card--sm { padding: 14px; }
.ui-card--md { padding: 19px; }
.ui-card--lg { padding: 24px; }

.ui-stat-card {
  position: relative;
  min-height: 168px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-xs);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ui-stat-card:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-sm); border-color: var(--ui-border-strong); }
.ui-stat-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 105px; height: 105px; background: radial-gradient(circle, var(--ui-stat-soft) 0, transparent 70%); opacity: .68; transform: translate(-24%, -32%); pointer-events: none; }
.ui-stat-card-top { display: flex; align-items: center; justify-content: space-between; }
.ui-stat-card-icon { width: 43px; height: 43px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-stat); background: var(--ui-stat-soft); border-radius: 13px; }
.ui-stat-card-accent { width: 26px; height: 4px; background: var(--ui-stat); border-radius: 999px; opacity: .75; }
.ui-stat-card-copy { position: relative; margin-block-start: 19px; }
.ui-stat-card-title { margin: 0; color: var(--ui-text-muted); font-size: 11px; font-weight: 650; }
.ui-stat-card-value { margin: 6px 0 0; color: var(--ui-text); font-size: clamp(22px, 2.2vw, 29px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.ui-stat-card-subtitle { margin: 7px 0 0; color: var(--ui-text-muted); font-size: 9px; line-height: 1.55; }
.ui-stat-card--blue,
.ui-stat-card--brand { --ui-stat: var(--ui-blue-600); --ui-stat-soft: var(--ui-blue-100); }
.ui-stat-card--success { --ui-stat: var(--ui-green-700); --ui-stat-soft: var(--ui-green-100); }
.ui-stat-card--warning { --ui-stat: var(--ui-amber-700); --ui-stat-soft: var(--ui-amber-100); }
.ui-stat-card--error,
.ui-stat-card--danger { --ui-stat: var(--ui-red-700); --ui-stat-soft: var(--ui-red-100); }
.ui-stat-card--purple { --ui-stat: var(--ui-purple-700); --ui-stat-soft: var(--ui-purple-100); }
.ui-stat-card--neutral { --ui-stat: #52657d; --ui-stat-soft: #e8edf3; }
html.dark .ui-stat-card--blue,
html.dark .ui-stat-card--brand { --ui-stat: #8cbcff; --ui-stat-soft: #173557; }
html.dark .ui-stat-card--success { --ui-stat: #83ddb0; --ui-stat-soft: rgba(19, 112, 68, .22); }
html.dark .ui-stat-card--warning { --ui-stat: #f0bb68; --ui-stat-soft: rgba(163, 84, 9, .22); }
html.dark .ui-stat-card--error,
html.dark .ui-stat-card--danger { --ui-stat: #ff9c93; --ui-stat-soft: rgba(180, 35, 24, .2); }
html.dark .ui-stat-card--purple { --ui-stat: #c4a7ff; --ui-stat-soft: rgba(105, 65, 198, .24); }
html.dark .ui-stat-card--neutral { --ui-stat: #b6c4d5; --ui-stat-soft: #1b3049; }

.ui-badge {
  min-height: 25px;
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.ui-badge-dot { width: 5px; height: 5px; background: currentColor; border-radius: 999px; opacity: .8; }
.ui-badge--xs { min-height: 22px; padding-inline: 7px; font-size: 8px; }
.ui-badge--md { min-height: 28px; font-size: 10px; }
.ui-badge--brand,
.ui-badge--info { color: var(--ui-blue-700); background: var(--ui-blue-100); border-color: #c5dcf7; }
.ui-badge--success { color: var(--ui-green-700); background: var(--ui-green-100); border-color: #bdebd0; }
.ui-badge--warning { color: var(--ui-amber-700); background: var(--ui-amber-100); border-color: #f5d991; }
.ui-badge--danger { color: var(--ui-red-700); background: var(--ui-red-100); border-color: #f5cbc7; }
.ui-badge--neutral { color: #52657d; background: #edf1f5; border-color: #dce3ea; }
.ui-badge--purple { color: var(--ui-purple-700); background: var(--ui-purple-100); border-color: #dcd0ff; }
.ui-badge--pink { color: var(--ui-pink-700); background: var(--ui-pink-100); border-color: #f8cee9; }
html.dark .ui-badge--brand,
html.dark .ui-badge--info { color: #94c3ff; background: #173557; border-color: #2d527b; }
html.dark .ui-badge--success { color: #8ce2b6; background: rgba(19, 112, 68, .2); border-color: rgba(61, 173, 112, .32); }
html.dark .ui-badge--warning { color: #f4c373; background: rgba(163, 84, 9, .2); border-color: rgba(196, 112, 23, .35); }
html.dark .ui-badge--danger { color: #ffa29a; background: rgba(180, 35, 24, .19); border-color: rgba(224, 72, 61, .32); }
html.dark .ui-badge--neutral { color: #b9c7d7; background: #1b2c41; border-color: #2c4057; }

.ui-icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ui-icon-btn:hover { transform: translateY(-1px); box-shadow: var(--ui-shadow-xs); }
.ui-icon-btn--sm { width: 34px; height: 34px; border-radius: 9px; }
.ui-icon-btn--lg { width: 44px; height: 44px; border-radius: 12px; }
.ui-icon-btn--brand { color: var(--ui-blue-700); background: var(--ui-blue-100); border-color: #c7dcf6; }
.ui-icon-btn--info { color: #16629b; background: #dff2ff; border-color: #c5e7fb; }
.ui-icon-btn--success { color: var(--ui-green-700); background: var(--ui-green-100); border-color: #bdebd0; }
.ui-icon-btn--warning { color: var(--ui-amber-700); background: var(--ui-amber-100); border-color: #f3d68d; }
.ui-icon-btn--danger { color: var(--ui-red-700); background: var(--ui-red-100); border-color: #f5c7c2; }
.ui-icon-btn--neutral { color: var(--ui-text-soft); background: var(--ui-surface-soft); border-color: var(--ui-border); }
.ui-icon-btn--purple { color: var(--ui-purple-700); background: var(--ui-purple-100); border-color: #ddcfff; }

/* Forms */
.ui-field { display: grid; gap: 7px; }
.ui-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ui-text-soft); font-size: 11px; font-weight: 650; }
.ui-label em { color: var(--ui-red-700); font-size: 8px; font-style: normal; font-weight: 650; }
.ui-control-wrap,
.ui-select-wrap { position: relative; }
.ui-control {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-strong);
  border-radius: 11px;
  outline: none;
  font-family: inherit;
  font-size: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ui-control::placeholder { color: color-mix(in srgb, var(--ui-text-muted) 78%, transparent); }
.ui-control:hover { border-color: #aebdcd; }
.ui-control:focus { border-color: var(--ui-blue-500); box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-control:disabled,
.ui-control[readonly] { color: var(--ui-text-muted); background: var(--ui-surface-muted); cursor: not-allowed; }
.ui-textarea { min-height: 112px; resize: vertical; }
.ui-control-wrap--icon .ui-control { padding-inline-start: 42px; }
.ui-control-icon { position: absolute; inset-block-start: 50%; inset-inline-start: 12px; display: inline-flex; color: var(--ui-text-muted); transform: translateY(-50%); pointer-events: none; }
.ui-select { appearance: none; padding-inline-end: 38px; }
.ui-select-wrap::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 14px;
  width: 7px;
  height: 7px;
  border-inline-end: 1.5px solid var(--ui-text-muted);
  border-block-end: 1.5px solid var(--ui-text-muted);
  transform: translateY(-67%) rotate(45deg);
  pointer-events: none;
}
.ui-field-hint { margin: 0; color: var(--ui-text-muted); font-size: 9px; }
.ui-field-error { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--ui-red-700); font-size: 9px; }
.ui-field-error svg { width: 15px; height: 15px; flex: 0 0 15px; }
.ui-field--error .ui-control,
.ui-control[aria-invalid="true"] { border-color: #e27469; }
.ui-field--error .ui-control:focus,
.ui-control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .14); }

.ui-check-row,
.ui-radio-row { min-height: 42px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 11px; cursor: pointer; }
.ui-checkbox,
.ui-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ui-check-control,
.ui-radio-control { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--ui-surface); border: 1.5px solid var(--ui-border-strong); transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ui-check-control { border-radius: 6px; }
.ui-check-control svg { width: 14px; height: 14px; opacity: 0; transform: scale(.75); transition: opacity .15s ease, transform .15s ease; }
.ui-radio-control { border-radius: 999px; }
.ui-checkbox:checked + .ui-check-control { background: var(--ui-blue-600); border-color: var(--ui-blue-600); }
.ui-checkbox:checked + .ui-check-control svg { opacity: 1; transform: scale(1); }
.ui-radio:checked + .ui-radio-control { border: 5px solid var(--ui-blue-600); }
.ui-checkbox:focus-visible + .ui-check-control,
.ui-radio:focus-visible + .ui-radio-control { box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-check-copy { min-width: 0; display: flex; flex-direction: column; }
.ui-check-copy strong { font-size: 11px; font-weight: 650; }
.ui-check-copy small { margin-block-start: 2px; color: var(--ui-text-muted); font-size: 9px; }

.ui-toggle-field { display: grid; gap: 7px; }
.ui-toggle-card { min-height: 64px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 13px; cursor: pointer; }
.ui-toggle-copy { min-width: 0; display: flex; flex-direction: column; }
.ui-toggle-copy strong { font-size: 11px; }
.ui-toggle-copy small { margin-block-start: 3px; color: var(--ui-text-muted); font-size: 9px; }
.ui-toggle-action { display: flex; align-items: center; gap: 8px; }
.ui-toggle-state { color: var(--ui-text-muted); font-size: 9px; font-weight: 650; }
.ui-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.ui-toggle-track { width: 42px; height: 24px; padding: 3px; display: inline-flex; align-items: center; background: #b7c1cd; border-radius: 999px; transition: background .18s ease, box-shadow .18s ease; }
.ui-toggle-thumb { width: 18px; height: 18px; background: #fff; border-radius: 999px; box-shadow: 0 2px 6px rgba(15, 23, 42, .2); transform: translateX(0); transition: transform .18s ease; }
.ui-toggle-input:checked + .ui-toggle-track { background: var(--ui-blue-600); }
.ui-toggle-input:checked + .ui-toggle-track .ui-toggle-thumb { transform: translateX(-18px); }
.ui-toggle-input:focus-visible + .ui-toggle-track { box-shadow: 0 0 0 3px var(--ui-focus); }

/* Choices.js */
.choices { margin: 0; color: var(--ui-text); }
.choices__inner { min-height: 44px !important; padding: 7px 11px !important; color: var(--ui-text) !important; background: var(--ui-surface) !important; border: 1px solid var(--ui-border-strong) !important; border-radius: 11px !important; font-size: 12px !important; }
.is-focused .choices__inner,
.is-open .choices__inner { border-color: var(--ui-blue-500) !important; box-shadow: 0 0 0 3px var(--ui-focus); }
.choices__list--single { padding: 3px 3px 3px 16px !important; }
.choices__list--dropdown,
.choices__list[aria-expanded] { z-index: 120 !important; color: var(--ui-text) !important; background: var(--ui-surface) !important; border-color: var(--ui-border) !important; border-radius: 12px !important; box-shadow: var(--ui-shadow-md); overflow: hidden; }
.choices__input { color: var(--ui-text) !important; background: var(--ui-surface-soft) !important; border-color: var(--ui-border) !important; }
.choices__item--choice.is-highlighted { background: var(--ui-blue-50) !important; }
html.dark .choices__item--choice.is-highlighted { background: #142b47 !important; }

/* Tables */
.ui-table-shell {
  width: 100%;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-xs);
  overflow: hidden;
}
.ui-table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.ui-data-table,
.ui-table-shell table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.ui-data-table thead,
.ui-table-shell table thead { background: var(--ui-surface-soft); }
.ui-table-th,
.ui-table-shell table th { min-height: 44px; padding: 12px 14px; color: var(--ui-text-muted); border-block-end: 1px solid var(--ui-border); font-size: 9px; font-weight: 750; letter-spacing: .01em; text-align: start; white-space: nowrap; }
.ui-table-td,
.ui-table-shell table td { padding: 13px 14px; color: var(--ui-text-soft); border-block-end: 1px solid color-mix(in srgb, var(--ui-border) 78%, transparent); text-align: start; vertical-align: middle; }
.ui-table-shell table tbody tr:last-child td { border-block-end: 0; }
.ui-table-shell table tbody > tr { transition: background-color .15s ease; }
.ui-table-shell table tbody > tr:not([class*="bg-"]):nth-child(odd) { background-color: var(--ui-table-row-odd); }
.ui-table-shell table tbody > tr:not([class*="bg-"]):nth-child(even) { background-color: var(--ui-table-row-even); }
.ui-table-shell table tbody > tr:not([class*="bg-"]):hover { background-color: var(--ui-table-row-hover); }
.ui-table-shell [data-align="center"] { text-align: center; }
.ui-table-shell [data-align="left"] { text-align: left; }
.ui-table-shell td[dir="ltr"],
.ui-table-shell .tabular-nums { font-variant-numeric: tabular-nums; }
.ui-table-empty { padding: 30px 16px !important; color: var(--ui-text-muted) !important; text-align: center !important; }
.ui-table-shell .ui-btn,
.ui-table-shell .ui-icon-btn { flex-shrink: 0; }

/* Raw tables are enhanced by JS */
.ui-auto-table-shell { margin-block: 14px; }

/* Alerts */
.ui-alert-stack { display: grid; gap: 10px; margin-block-end: 18px; }
.ui-alert { position: relative; min-height: 60px; padding: 12px 48px 12px 13px; display: flex; align-items: flex-start; gap: 11px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-inline-start: 4px solid var(--ui-alert-color); border-radius: 13px; box-shadow: var(--ui-shadow-xs); }
.ui-alert-icon { width: 31px; height: 31px; flex: 0 0 31px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-alert-color); background: var(--ui-alert-soft); border-radius: 9px; }
.ui-alert-icon svg { width: 18px; height: 18px; }
.ui-alert-copy { min-width: 0; flex: 1; }
.ui-alert-copy strong { display: block; color: var(--ui-text); font-size: 11px; }
.ui-alert-copy p { margin: 2px 0 0; color: var(--ui-text-soft); font-size: 10px; }
.ui-alert-copy ul { margin: 5px 0 0; padding-inline-start: 18px; color: var(--ui-text-soft); font-size: 9px; }
.ui-alert-close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-text-muted); background: transparent; border: 0; border-radius: 8px; }
.ui-alert-close:hover { color: var(--ui-text); background: var(--ui-surface-muted); }
.ui-alert-close svg { width: 16px; height: 16px; }
.ui-alert--success { --ui-alert-color: var(--ui-green-700); --ui-alert-soft: var(--ui-green-100); }
.ui-alert--danger { --ui-alert-color: var(--ui-red-700); --ui-alert-soft: var(--ui-red-100); }
.ui-alert--warning { --ui-alert-color: var(--ui-amber-700); --ui-alert-soft: var(--ui-amber-100); }
.ui-alert--info { --ui-alert-color: var(--ui-blue-700); --ui-alert-soft: var(--ui-blue-100); }
html.dark .ui-alert--success { --ui-alert-color: #86dfb1; --ui-alert-soft: rgba(19, 112, 68, .22); }
html.dark .ui-alert--danger { --ui-alert-color: #ff9c93; --ui-alert-soft: rgba(180, 35, 24, .2); }
html.dark .ui-alert--warning { --ui-alert-color: #f0bb68; --ui-alert-soft: rgba(163, 84, 9, .22); }
html.dark .ui-alert--info { --ui-alert-color: #8cbcff; --ui-alert-soft: #173557; }

/* Empty state */
.ui-empty-state { min-height: 250px; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ui-text); background: var(--ui-surface); border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-lg); text-align: center; }
.ui-empty-state-icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-blue-700); background: var(--ui-blue-100); border-radius: 16px; }
.ui-empty-state-icon svg { width: 26px; height: 26px; }
.ui-empty-state h3 { margin: 14px 0 0; font-size: 14px; }
.ui-empty-state p { max-width: 430px; margin: 6px 0 0; color: var(--ui-text-muted); font-size: 10px; }
.ui-empty-state-actions { margin-block-start: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Dropdowns */
.ui-dropdown { position: relative; display: inline-flex; }
.ui-dropdown-chevron { width: 15px; height: 15px; }
.ui-dropdown-menu { position: absolute; z-index: 130; inset-block-start: calc(100% + 7px); inset-inline-end: 0; min-width: 190px; padding: 6px; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-md); }
.ui-dropdown-menu[hidden] { display: none !important; }
.ui-dropdown-menu a,
.ui-dropdown-menu button { width: 100%; min-height: 39px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; color: var(--ui-text-soft); background: transparent; border: 0; border-radius: 9px; text-decoration: none; text-align: start; font-size: 10px; }
.ui-dropdown-menu a:hover,
.ui-dropdown-menu button:hover { color: var(--ui-blue-700); background: var(--ui-blue-50); }

/* Modals */
.ui-modal { position: fixed; z-index: 10020; inset: 0; display: grid; place-items: center; padding: 18px; }
.ui-modal[hidden] { display: none !important; }
.ui-modal-backdrop { position: absolute; inset: 0; background: rgba(4, 13, 25, .62); border: 0; backdrop-filter: blur(6px); }
.ui-modal-panel { position: relative; width: 100%; max-height: calc(100dvh - 36px); display: flex; flex-direction: column; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 19px; box-shadow: var(--ui-shadow-lg); overflow: hidden; }
.ui-modal-header { min-height: 66px; padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-block-end: 1px solid var(--ui-border); }
.ui-modal-header h2 { margin: 0; font-size: 15px; }
.ui-modal-header p { margin: 3px 0 0; color: var(--ui-text-muted); font-size: 9px; }
.ui-modal-close { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-text-muted); background: var(--ui-surface-soft); border: 1px solid var(--ui-border); border-radius: 11px; }
.ui-modal-close svg { width: 18px; height: 18px; }
.ui-modal-body { min-height: 0; padding: 18px; overflow-y: auto; }
.ui-modal-footer { padding: 13px 17px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; background: var(--ui-surface-soft); border-block-start: 1px solid var(--ui-border); }
body.ui-modal-open { overflow: hidden; }

/* Pagination */
.ui-pagination { margin-block-start: 16px; min-height: 52px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--ui-text-muted); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 13px; }
.ui-pagination p { margin: 0; font-size: 9px; }
.ui-pagination p strong { color: var(--ui-text-soft); }
.ui-pagination-links { display: flex; align-items: center; gap: 4px; }
.ui-pagination-links > a,
.ui-pagination-links > span { min-width: 34px; height: 34px; padding-inline: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-text-soft); background: var(--ui-surface-soft); border: 1px solid transparent; border-radius: 9px; text-decoration: none; font-size: 9px; }
.ui-pagination-links > a:hover { color: var(--ui-blue-700); background: var(--ui-blue-50); border-color: #c5dcf7; }
.ui-pagination-links > .is-current { color: #fff; background: var(--ui-blue-600); }
.ui-pagination-links > .is-disabled { opacity: .45; }
.ui-pagination-ellipsis { background: transparent !important; }

/* Dashboard design language */
.ui-dashboard { display: grid; gap: 22px; }
.ui-dashboard-hero {
  position: relative;
  min-height: 188px;
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  align-items: center;
  gap: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 10%, rgba(86, 160, 255, .28), transparent 30%),
    linear-gradient(125deg, var(--ui-navy-900), #113b72 72%, #145f82);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 23px;
  box-shadow: 0 20px 45px rgba(11, 31, 58, .16);
  overflow: hidden;
}
.ui-dashboard-hero::after { content: ""; position: absolute; width: 270px; height: 270px; inset: auto -80px -140px auto; border: 44px solid rgba(255, 255, 255, .045); border-radius: 50%; }
.ui-dashboard-hero-copy { position: relative; z-index: 1; }
.ui-dashboard-kicker { display: inline-flex; align-items: center; gap: 7px; color: #a8cffd; font-size: 10px; font-weight: 700; }
.ui-dashboard-kicker::before { content: ""; width: 7px; height: 7px; background: #36d5c6; border-radius: 999px; box-shadow: 0 0 0 4px rgba(54, 213, 198, .14); }
.ui-dashboard-hero h1 { margin: 9px 0 0; color: #fff; font-size: clamp(24px, 3vw, 36px); font-weight: 800; line-height: 1.3; letter-spacing: -.025em; }
.ui-dashboard-hero p { max-width: 700px; margin: 9px 0 0; color: #bcd0e7; font-size: 12px; }
.ui-dashboard-hero-actions { margin-block-start: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.ui-dashboard-hero-actions .ui-btn--soft,
.ui-dashboard-hero-actions .ui-btn--outline { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); }
.ui-dashboard-hero-actions .ui-btn--soft:hover,
.ui-dashboard-hero-actions .ui-btn--outline:hover { background: rgba(255, 255, 255, .15); }
.ui-dashboard-meta { position: relative; z-index: 1; padding: 16px; display: grid; gap: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .11); border-radius: 17px; backdrop-filter: blur(8px); }
.ui-dashboard-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block-end: 9px; border-block-end: 1px solid rgba(255, 255, 255, .09); }
.ui-dashboard-meta-row:last-child { padding-block-end: 0; border-block-end: 0; }
.ui-dashboard-meta-row span { color: #a8bdd5; font-size: 9px; }
.ui-dashboard-meta-row strong { max-width: 175px; overflow: hidden; color: #fff; font-size: 11px; text-align: end; text-overflow: ellipsis; white-space: nowrap; }

.ui-dashboard-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-dashboard-columns { display: grid; gap: 17px; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); }
.ui-dashboard-panel { padding: 19px; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-xs); }
.ui-dashboard-panel-head { margin-block-end: 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ui-dashboard-panel-head h2 { margin: 0; font-size: 14px; font-weight: 750; }
.ui-dashboard-panel-head p { margin: 4px 0 0; color: var(--ui-text-muted); font-size: 9px; }
.ui-dashboard-panel-head > a { color: var(--ui-blue-700); font-size: 10px; font-weight: 650; text-decoration: none; }
html.dark .ui-dashboard-panel-head > a { color: #8cbcff; }
.ui-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ui-action-card { min-height: 82px; padding: 12px; display: flex; align-items: center; gap: 11px; color: var(--ui-text); background: var(--ui-surface-soft); border: 1px solid var(--ui-border); border-radius: 13px; text-decoration: none; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ui-action-card:hover { transform: translateY(-2px); background: var(--ui-blue-50); border-color: #c3daf6; box-shadow: var(--ui-shadow-sm); }
html.dark .ui-action-card:hover { background: #142b47; border-color: #2f5278; }
.ui-action-card-icon { width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-blue-700); background: var(--ui-blue-100); border-radius: 12px; }
html.dark .ui-action-card-icon { color: #8cbcff; background: #173557; }
.ui-action-card-copy { min-width: 0; display: flex; flex-direction: column; }
.ui-action-card-copy strong { font-size: 11px; }
.ui-action-card-copy small { margin-block-start: 3px; color: var(--ui-text-muted); font-size: 9px; line-height: 1.45; }
.ui-report-list { display: grid; gap: 7px; }
.ui-report-link { min-height: 52px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; color: var(--ui-text); background: var(--ui-surface-soft); border: 1px solid transparent; border-radius: 11px; text-decoration: none; transition: background .18s ease, border-color .18s ease; }
.ui-report-link:hover { background: var(--ui-blue-50); border-color: #c8dcf5; }
html.dark .ui-report-link:hover { background: #142b47; border-color: #2f5278; }
.ui-report-link > span:first-child { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-blue-700); background: var(--ui-blue-100); border-radius: 10px; }
html.dark .ui-report-link > span:first-child { color: #8cbcff; background: #173557; }
.ui-report-link > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ui-report-link strong { font-size: 10px; }
.ui-report-link small { margin-block-start: 2px; color: var(--ui-text-muted); font-size: 8px; }
.ui-report-link > svg { width: 16px; height: 16px; color: var(--ui-text-muted); transform: rotate(180deg); }
.ui-activity-list { display: grid; gap: 8px; }
.ui-activity-item { padding: 10px 11px; display: flex; align-items: center; gap: 10px; background: var(--ui-surface-soft); border-radius: 11px; }
.ui-activity-dot { width: 9px; height: 9px; flex: 0 0 9px; background: var(--ui-blue-500); border: 3px solid var(--ui-blue-100); border-radius: 999px; box-sizing: content-box; }
.ui-activity-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ui-activity-copy strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ui-activity-copy small { color: var(--ui-text-muted); font-size: 8px; }
.ui-activity-value { font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Global legacy screen uplift */
.app-main > .app-container > .space-y-5,
.app-main > .app-container > .space-y-6 { display: grid; gap: 20px; }

.accounting-app .rounded-2xl.border.border-gray-200.bg-white,
.accounting-app .rounded-xl.border.border-gray-200.bg-white,
.accounting-app .rounded-2xl.border.bg-white,
.accounting-app .rounded-xl.border.bg-white {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-xs);
}
html.dark .accounting-app .dark\:bg-black,
html.dark .accounting-app .dark\:bg-white\/\[0\.03\],
html.dark .accounting-app .dark\:bg-gray-900 { background: var(--ui-surface) !important; }
html.dark .accounting-app .dark\:border-gray-800 { border-color: var(--ui-border) !important; }

.accounting-app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.ui-control):not([class*="choices"]),
.accounting-app select:not(.ui-control),
.accounting-app textarea:not(.ui-control) {
  min-height: 44px;
  color: var(--ui-text);
  background-color: var(--ui-surface);
  border-color: var(--ui-border-strong);
  border-radius: 11px;
  font-family: inherit;
  font-size: 12px;
}
.accounting-app textarea:not(.ui-control) { min-height: 100px; }
.accounting-app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.accounting-app select:focus,
.accounting-app textarea:focus { border-color: var(--ui-blue-500) !important; box-shadow: 0 0 0 3px var(--ui-focus) !important; outline: none !important; }
.accounting-app label { color: var(--ui-text-soft); }
.accounting-app input[type="checkbox"],
.accounting-app input[type="radio"] { accent-color: var(--ui-blue-600); }
.accounting-app button,
.accounting-app a { -webkit-tap-highlight-color: transparent; }
.accounting-app button:focus-visible,
.accounting-app a:focus-visible,
.accounting-app summary:focus-visible,
.accounting-app input:focus-visible,
.accounting-app select:focus-visible,
.accounting-app textarea:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
.accounting-app h1,
.accounting-app h2,
.accounting-app h3,
.accounting-app h4 { color: var(--ui-text); }
.accounting-app .text-gray-900,
.accounting-app .text-gray-800,
.accounting-app .text-gray-700 { color: var(--ui-text) !important; }
.accounting-app .text-gray-600,
.accounting-app .text-gray-500,
.accounting-app .text-gray-400 { color: var(--ui-text-muted) !important; }
html.dark .accounting-app .dark\:text-white,
html.dark .accounting-app .dark\:text-white\/90,
html.dark .accounting-app .dark\:text-gray-100,
html.dark .accounting-app .dark\:text-gray-200 { color: var(--ui-text) !important; }

.ui-auto-form { min-width: 0; }
.ui-filter-form {
  padding: 15px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-xs);
}
.ui-filter-form::before {
  content: "تصفية النتائج";
  display: block;
  margin-block-end: 11px;
  color: var(--ui-text-muted);
  font-size: 10px;
  font-weight: 750;
}
.ui-form-action-bar { margin-block-start: 18px; padding-block-start: 14px; border-block-start: 1px solid var(--ui-border); }
.ui-submit-loading { position: relative; pointer-events: none; opacity: .82; }
.ui-submit-loading::after { content: ""; width: 15px; height: 15px; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Auth screens */
body.auth-premium {
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 12%, rgba(47, 126, 230, .25), transparent 30%),
    radial-gradient(circle at 86% 80%, rgba(15, 143, 132, .18), transparent 30%),
    linear-gradient(135deg, #071426 0%, #0b1f3a 53%, #103a62 100%);
}
.auth-shell { width: min(1180px, 100%); min-height: min(720px, calc(100dvh - 48px)); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); color: var(--ui-text); background: var(--ui-surface); border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; box-shadow: 0 35px 90px rgba(0, 0, 0, .32); overflow: hidden; }
.auth-visual { position: relative; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: radial-gradient(circle at 70% 15%, rgba(96, 165, 250, .26), transparent 28%), linear-gradient(145deg, #0a1d37, #123c6a 72%, #126477); overflow: hidden; }
.auth-visual::before,
.auth-visual::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; }
.auth-visual::before { width: 330px; height: 330px; inset: -110px auto auto -110px; }
.auth-visual::after { width: 430px; height: 430px; inset: auto -210px -220px auto; border-width: 70px; }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.auth-brand-mark { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, #4a9bff, #1d61bf); border: 1px solid rgba(255, 255, 255, .2); border-radius: 15px; box-shadow: 0 12px 28px rgba(0, 0, 0, .18); font-weight: 850; }
.auth-brand-copy { display: flex; flex-direction: column; }
.auth-brand-copy strong { font-size: 14px; }
.auth-brand-copy small { margin-block-start: 2px; color: #a9c1db; font-size: 9px; }
.auth-visual-content { position: relative; z-index: 1; max-width: 560px; }
.auth-visual-kicker { display: inline-flex; align-items: center; gap: 7px; color: #8cc5ff; font-size: 10px; font-weight: 700; }
.auth-visual-kicker::before { content: ""; width: 7px; height: 7px; background: #38d5c6; border-radius: 999px; box-shadow: 0 0 0 4px rgba(56, 213, 198, .14); }
.auth-visual h1 { margin: 12px 0 0; color: #fff; font-size: clamp(29px, 4vw, 46px); font-weight: 820; line-height: 1.3; letter-spacing: -.035em; }
.auth-visual p { margin: 13px 0 0; color: #b8cee5; font-size: 12px; line-height: 1.9; }
.auth-feature-list { margin: 26px 0 0; padding: 0; display: grid; gap: 11px; list-style: none; }
.auth-feature-list li { display: flex; align-items: center; gap: 10px; color: #d9e8f7; font-size: 11px; }
.auth-feature-list span { width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; color: #74e0d3; background: rgba(56, 213, 198, .12); border: 1px solid rgba(56, 213, 198, .18); border-radius: 8px; }
.auth-feature-list svg { width: 14px; height: 14px; }
.auth-security-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: #9fb8d3; font-size: 9px; }
.auth-security-note svg { width: 17px; height: 17px; color: #76dacc; }
.auth-form-column { padding: clamp(32px, 5vw, 66px); display: flex; align-items: center; justify-content: center; background: var(--ui-surface); }
.auth-form-wrap { width: min(410px, 100%); }
.auth-form-head { margin-block-end: 28px; }
.auth-form-head span { color: var(--ui-blue-700); font-size: 10px; font-weight: 750; }
.auth-form-head h2 { margin: 8px 0 0; color: var(--ui-text); font-size: 28px; font-weight: 800; line-height: 1.35; }
.auth-form-head p { margin: 7px 0 0; color: var(--ui-text-muted); font-size: 11px; }
.auth-form { display: grid; gap: 17px; }
.auth-field { display: grid; gap: 7px; }
.auth-field label { color: var(--ui-text-soft); font-size: 11px; font-weight: 650; }
.auth-control-wrap { position: relative; }
.auth-control-wrap > svg { position: absolute; inset-block-start: 50%; inset-inline-start: 13px; width: 18px; height: 18px; color: var(--ui-text-muted); transform: translateY(-50%); }
.auth-control { width: 100%; min-height: 48px; padding: 11px 42px 11px 12px; color: var(--ui-text); background: var(--ui-surface-soft); border: 1px solid var(--ui-border-strong); border-radius: 12px; outline: none; font-family: inherit; font-size: 12px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.auth-control:focus { background: var(--ui-surface); border-color: var(--ui-blue-500); box-shadow: 0 0 0 3px var(--ui-focus); }
.auth-password-toggle { position: absolute; inset-block-start: 50%; inset-inline-end: 9px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-text-muted); background: transparent; border: 0; border-radius: 9px; transform: translateY(-50%); }
.auth-password-toggle:hover { color: var(--ui-text); background: var(--ui-surface-muted); }
.auth-error { margin: 0; color: var(--ui-red-700); font-size: 9px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-remember { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-text-muted); font-size: 10px; cursor: pointer; }
.auth-remember input { width: 17px; height: 17px; accent-color: var(--ui-blue-600); }
.auth-link { color: var(--ui-blue-700); font-size: 10px; font-weight: 650; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-submit { width: 100%; min-height: 49px; margin-block-start: 3px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: #fff; background: linear-gradient(135deg, var(--ui-blue-600), var(--ui-blue-700)); border: 1px solid rgba(23, 78, 166, .4); border-radius: 12px; box-shadow: 0 10px 24px rgba(31, 103, 210, .21); font-size: 12px; font-weight: 750; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(31, 103, 210, .28); }
.auth-submit svg { width: 18px; height: 18px; transform: rotate(180deg); }
.auth-footer-note { margin: 22px 0 0; color: var(--ui-text-muted); font-size: 9px; text-align: center; }
.auth-theme-toggle { position: fixed; z-index: 4; inset-block-start: 18px; inset-inline-end: 18px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: #d6e6f8; background: rgba(7, 20, 38, .38); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; backdrop-filter: blur(10px); }
.auth-theme-toggle svg { width: 20px; height: 20px; }

/* Responsive */
@media (max-width: 1279px) {
  .app-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(var(--ui-sidebar-width), calc(100vw - 42px));
    min-width: min(var(--ui-sidebar-width), calc(100vw - 42px));
    transform: translateX(105%);
    box-shadow: -18px 0 50px rgba(0, 0, 0, .24);
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .app-sidebar-close { display: inline-flex; }
  .app-sidebar-collapse { display: none; }
  .app-sidebar-overlay { position: fixed; z-index: 55; inset: 0; display: block; background: rgba(4, 13, 25, .52); border: 0; backdrop-filter: blur(3px); }
  body.app-sidebar-open { overflow: hidden; }
}

@media (max-width: 1023px) {
  .app-container { padding: 23px 20px 42px; }
  .app-search-trigger { min-width: 42px; width: 42px; padding: 0; justify-content: center; }
  .app-search-trigger span,
  .app-search-trigger kbd { display: none; }
  .app-context-activity { display: none; }
  .ui-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-dashboard-columns { grid-template-columns: 1fr; }
  .ui-dashboard-hero { grid-template-columns: 1fr; }
  .ui-dashboard-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-dashboard-meta-row { padding: 9px 10px; background: rgba(255, 255, 255, .04); border: 0; border-radius: 10px; }
  .auth-shell { grid-template-columns: 1fr; width: min(600px, 100%); min-height: auto; }
  .auth-visual { display: none; }
}

@media (max-width: 767px) {
  :root { --ui-topbar-height: 64px; }
  body.accounting-app { padding-block-end: calc(var(--ui-mobile-nav-height) + env(safe-area-inset-bottom)); }
  .app-topbar-inner { min-height: var(--ui-topbar-height); padding-inline: 12px; gap: 8px; }
  .app-topbar-leading,
  .app-topbar-actions { gap: 7px; }
  .app-sidebar-toggle { width: 40px; height: 40px; flex-basis: 40px; }
  .app-mobile-brand { display: inline-flex; text-decoration: none; }
  .app-mobile-brand span { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; font-size: 11px; }
  .app-context-block { display: none; }
  .app-search-trigger,
  .app-theme-button { width: 40px; height: 40px; flex-basis: 40px; }
  .app-mode-switch-form { display: none; }
  .app-quick-button { width: 40px; height: 40px; padding: 0; border-radius: 12px; }
  .app-quick-button span { display: none; }
  .app-account-trigger { min-height: 40px; padding: 1px; }
  .app-avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .app-account-copy,
  .app-account-chevron { display: none; }
  .app-popover { position: fixed; inset-block-start: 70px; inset-inline: 12px; width: auto; max-height: calc(100dvh - 88px); overflow-y: auto; }
  .app-container { padding: 19px 12px 26px; }

  .app-mobile-nav {
    position: fixed;
    z-index: 45;
    inset: auto 10px calc(8px + env(safe-area-inset-bottom)) 10px;
    min-height: var(--ui-mobile-nav-height);
    padding: 7px 8px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
    border: 1px solid var(--ui-border);
    border-radius: 19px;
    box-shadow: 0 18px 50px rgba(7, 20, 38, .2);
    backdrop-filter: blur(17px) saturate(140%);
  }
  .app-mobile-nav > a,
  .app-mobile-nav > button { min-width: 0; min-height: 54px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: inherit; background: transparent; border: 0; border-radius: 12px; text-decoration: none; font-size: 9px; }
  .app-mobile-nav > a svg,
  .app-mobile-nav > button svg { width: 21px; height: 21px; }
  .app-mobile-nav > .is-active { color: var(--ui-blue-700); background: var(--ui-blue-50); }
  html.dark .app-mobile-nav > .is-active { color: #8cbcff; background: #142b47; }
  .app-mobile-create { transform: translateY(-10px); }
  .app-mobile-create > span { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, var(--ui-blue-500), var(--ui-blue-700)); border: 4px solid var(--ui-surface); border-radius: 16px; box-shadow: 0 10px 22px rgba(31, 103, 210, .3); }
  .app-mobile-create small { color: var(--ui-blue-700); font-size: 8px; font-weight: 700; }
  html.dark .app-mobile-create small { color: #8cbcff; }

  .ui-page-header { margin-block-end: 17px; flex-direction: column; gap: 14px; }
  .ui-page-header h1 { font-size: 22px; }
  .ui-page-header-actions { width: 100%; justify-content: flex-start; }
  .ui-page-header-actions > * { flex: 1 1 auto; }
  .ui-page-header-actions .ui-btn,
  .ui-page-header-actions .ui-back-link { min-width: 0; }

  .ui-dashboard { gap: 15px; }
  .ui-dashboard-hero { min-height: 0; padding: 20px 17px; border-radius: 19px; }
  .ui-dashboard-hero h1 { font-size: 25px; }
  .ui-dashboard-hero p { font-size: 10px; }
  .ui-dashboard-meta { grid-template-columns: 1fr; padding: 11px; }
  .ui-dashboard-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ui-stat-card { min-height: 145px; padding: 14px; border-radius: 15px; }
  .ui-stat-card-icon { width: 38px; height: 38px; }
  .ui-stat-card-value { font-size: 20px; }
  .ui-stat-card-subtitle { font-size: 8px; }
  .ui-dashboard-panel { padding: 14px; border-radius: 15px; }
  .ui-action-grid { grid-template-columns: 1fr; }
  .ui-action-card { min-height: 70px; }

  .ui-filter-form { padding: 12px; }
  .ui-form-action-bar.ui-form-action-bar--sticky {
    position: sticky;
    z-index: 20;
    inset-block-end: calc(var(--ui-mobile-nav-height) + 18px + env(safe-area-inset-bottom));
    margin-inline: -12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
    border-block: 1px solid var(--ui-border);
    box-shadow: 0 -10px 25px rgba(7, 20, 38, .08);
    backdrop-filter: blur(13px);
  }

  .ui-pagination { align-items: stretch; flex-direction: column; }
  .ui-pagination p { text-align: center; }
  .ui-pagination-links { justify-content: center; overflow-x: auto; }

  .ui-command { padding: 10px; place-items: center; }
  .ui-command-panel { max-height: calc(100dvh - 20px); border-radius: 17px; }
  .ui-command-footer { justify-content: center; }
  .ui-command-footer span:last-child { display: none; }

  /* Read-only tables become labelled cards on narrow screens */
  .ui-table-cards .ui-table-scroll { overflow: visible; }
  .ui-table-cards table,
  .ui-table-cards tbody,
  .ui-table-cards tr,
  .ui-table-cards td { display: block; width: 100%; }
  .ui-table-cards table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui-table-cards { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .ui-table-cards table { display: block; }
  .ui-table-cards tbody { display: grid; gap: 10px; }
  .ui-table-cards tbody tr { padding: 8px 12px; display: grid; gap: 0; border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow-xs); }
  .ui-table-cards tbody td { min-height: 39px; padding: 9px 0; display: grid; grid-template-columns: minmax(92px, 37%) minmax(0, 1fr); align-items: center; gap: 10px; color: var(--ui-text); border-block-end: 1px dashed var(--ui-border); text-align: start !important; }
  .ui-table-cards tbody td:last-child { border-block-end: 0; }
  .ui-table-cards tbody td::before { content: attr(data-label); color: var(--ui-text-muted); font-size: 9px; font-weight: 700; }
  .ui-table-cards tbody td[colspan] { display: block; }
  .ui-table-cards tbody td[colspan]::before { display: none; }
  .ui-table-cards tbody td > .flex { justify-content: flex-start; }

  .ui-modal { padding: 8px; align-items: end; }
  .ui-modal-panel { max-height: calc(100dvh - 8px); border-radius: 19px 19px 0 0; }
  .ui-modal-footer > * { flex: 1 1 auto; }

  body.auth-premium { padding: 10px; align-items: stretch; }
  .auth-shell { min-height: calc(100dvh - 20px); border-radius: 20px; }
  .auth-form-column { padding: 26px 18px; align-items: flex-start; }
  .auth-form-wrap { margin: auto 0; }
  .auth-form-head h2 { font-size: 24px; }
  .auth-theme-toggle { inset-block-start: 16px; inset-inline-end: 16px; }
}

@media (max-width: 430px) {
  .app-topbar-actions { gap: 5px; }
  .app-theme-button { display: none; }
  .app-quick-grid { grid-template-columns: 1fr; }
  .ui-dashboard-grid { grid-template-columns: 1fr; }
  .ui-page-header-actions > * { width: 100%; }
  .ui-page-header-actions .ui-dropdown { width: 100%; }
  .ui-page-header-actions .ui-dropdown > .ui-btn { width: 100%; }
  .ui-command-footer span:nth-child(2) { display: none; }
  .auth-row { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .app-sidebar,
  .app-topbar,
  .app-mobile-nav,
  .ui-command,
  .ui-page-progress,
  .ui-skip-link { display: none !important; }
  body.accounting-app { padding: 0 !important; background: #fff !important; }
  .app-container { width: 100% !important; max-width: none !important; padding: 0 !important; }
  .ui-card,
  .ui-table-shell,
  .ui-dashboard-panel { box-shadow: none !important; }
}

/* ========================================================================== 
   Premium UX extensions: accessibility, command search, dashboards and auth
   ========================================================================== */

.ui-skip-link {
  position: fixed;
  top: 10px;
  right: 50%;
  z-index: 100000;
  transform: translate(50%, -160%);
  border-radius: 10px;
  padding: 9px 14px;
  color: #fff;
  background: #0b1f3a;
  font-size: 12px;
  font-weight: 750;
  box-shadow: var(--app-shadow-md);
  transition: transform var(--app-transition);
}
.ui-skip-link:focus { transform: translate(50%, 0); }

.ui-page-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100001;
  width: 34%;
  height: 3px;
  transform-origin: right center;
  background: linear-gradient(90deg, #4dc8b9, #4d8fea, #175cd3);
  box-shadow: 0 0 16px rgba(23, 92, 211, .32);
  transition: width 260ms ease, opacity 220ms ease, transform 220ms ease;
}
.ui-page-progress.is-loading { width: 72%; opacity: 1; }
.ui-page-progress.is-complete { width: 100%; }
.ui-page-progress.is-hidden { opacity: 0; transform: translateY(-4px); }

body.ui-overlay-open { overflow: hidden; }
@media (min-width: 1280px) {
  .app-sidebar-overlay { display: none !important; }
}

/* More legible baseline for dense financial screens. */
.ui-page-header p { font-size: 13px; }
.ui-btn--xs { font-size: 11px; }
.ui-btn--sm { font-size: 11.5px; }
.ui-btn--md { font-size: 12.5px; }
.ui-label { font-size: 12px; }
.ui-control { font-size: 13px !important; }
.ui-field-hint { font-size: 10.5px; }
.ui-stat-card-title { font-size: 11.5px; }
.ui-stat-card-subtitle { font-size: 10px; }
.ui-data-table,
table[data-ui-enhanced="true"] { font-size: 12px; }
.ui-data-table thead th,
table[data-ui-enhanced="true"] thead th { font-size: 10.5px !important; }
table[data-ui-enhanced="true"] thead th { padding: 12px 14px; text-align: right; }
table[data-ui-enhanced="true"] tbody td { padding: 12px 14px; color: var(--app-text-soft); }
.ui-section-head h2 { font-size: 14px; }
.ui-section-head p { font-size: 10.5px; }
.ui-quick-link-copy strong { font-size: 11.5px; }
.ui-quick-link-copy small { font-size: 9.5px; }
.ui-operation-card strong { font-size: 13px; }
.ui-operation-card small { font-size: 10px; }

/* Submit feedback */
.ui-submit-spinner {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ui-submit-spin .7s linear infinite;
}
@keyframes ui-submit-spin { to { transform: rotate(360deg); } }
button.is-submitting,
input.is-submitting { cursor: wait !important; }
form[aria-busy="true"] { cursor: progress; }

/* Command palette */
.ui-command {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: start center;
  padding: min(12vh, 110px) 16px 24px;
}
.ui-command[hidden] { display: none !important; }
.ui-command-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(4, 13, 26, .62);
  backdrop-filter: blur(5px);
}
.ui-command-panel {
  position: relative;
  width: min(680px, 100%);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--app-border) 86%, transparent);
  border-radius: 20px;
  color: var(--app-text);
  background: var(--app-surface-elevated);
  box-shadow: var(--app-shadow-lg);
}
.ui-command-search {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--app-border);
  padding: 15px 16px;
}
.ui-command-search > svg { width: 23px; height: 23px; color: var(--app-primary); }
.ui-command-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--app-text);
  background: transparent;
  font-family: var(--app-font);
  font-size: 15px;
}
.ui-command-search input::placeholder { color: var(--app-text-muted); }
.ui-command-search kbd,
.ui-command-footer kbd,
.ui-command-item kbd {
  border: 1px solid var(--app-border);
  border-bottom-width: 2px;
  border-radius: 7px;
  padding: 2px 6px;
  color: var(--app-text-muted);
  background: var(--app-surface-muted);
  font: 600 10px/1.5 var(--app-font);
}
.ui-command-results { max-height: min(56vh, 470px); overflow-y: auto; padding: 8px; }
.ui-command-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  border-radius: 12px;
  padding: 7px 10px;
  color: var(--app-text-soft);
  font-size: 12.5px;
  font-weight: 650;
  transition: var(--app-transition);
}
.ui-command-item:hover,
.ui-command-item.is-active { color: var(--app-primary); background: var(--app-primary-soft); }
.ui-command-item-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: var(--app-primary); background: var(--app-surface); }
.ui-command-item-icon svg { width: 18px; height: 18px; }
.ui-command-empty { display: flex; min-height: 190px; align-items: center; justify-content: center; flex-direction: column; color: var(--app-text-muted); text-align: center; }
.ui-command-empty strong { color: var(--app-text); font-size: 13px; }
.ui-command-empty span { margin-top: 4px; font-size: 11px; }
.ui-command-footer { display: flex; align-items: center; justify-content: flex-start; gap: 16px; border-top: 1px solid var(--app-border); padding: 10px 15px; color: var(--app-text-muted); background: var(--app-surface-muted); font-size: 9.5px; }
.ui-command-footer span { display: inline-flex; align-items: center; gap: 4px; }

/* Dashboard detail patterns */
.ui-dashboard-hero--simple {
  background:
    radial-gradient(circle at 10% 0%, rgba(111, 224, 199, .24), transparent 22rem),
    linear-gradient(125deg, #10324d, #125f70 64%, #167f72);
}
.ui-operation-grid--simple { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ui-distribution-list { display: grid; gap: 17px; }
.ui-distribution-row { display: grid; gap: 9px; }
.ui-distribution-copy { display: flex; align-items: center; gap: 10px; }
.ui-distribution-copy > span:last-child { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.ui-distribution-copy strong { color: var(--app-text); font-size: 11.5px; font-weight: 720; }
.ui-distribution-copy small { margin-top: 2px; color: var(--app-text-muted); font-size: 9.5px; }
.ui-distribution-icon { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border-radius: 11px; color: var(--app-primary); background: var(--app-primary-soft); }
.ui-distribution-icon--info { color: var(--app-info); background: var(--app-info-soft); }
.ui-distribution-icon--neutral { color: var(--app-text-soft); background: var(--app-surface-muted); }
.ui-progress { height: 7px; overflow: hidden; border-radius: 999px; background: var(--app-surface-muted); }
.ui-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--app-primary), #6da6ff); }
.ui-progress--info span { background: linear-gradient(90deg, var(--app-info), #65c5df); }
.ui-progress--neutral span { background: linear-gradient(90deg, #718198, #a9b5c5); }
.ui-health-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 21px; }
.ui-health-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--app-border); border-radius: 12px; padding: 10px 11px; background: var(--app-surface-muted); }
.ui-health-summary span { color: var(--app-text-muted); font-size: 9.5px; }
.ui-health-summary strong { color: var(--app-text); font-size: 13px; font-weight: 780; }

.ui-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ui-role-card { --role-color: var(--app-primary); --role-soft: var(--app-primary-soft); display: flex; min-width: 0; align-items: flex-start; gap: 10px; border: 1px solid var(--app-border); border-radius: 14px; padding: 13px; background: var(--app-surface-muted); }
.ui-role-card--success { --role-color: var(--app-success); --role-soft: var(--app-success-soft); }
.ui-role-card--warning { --role-color: var(--app-warning); --role-soft: var(--app-warning-soft); }
.ui-role-card-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 11px; color: var(--role-color); background: var(--role-soft); }
.ui-role-card > div { display: flex; min-width: 0; flex-direction: column; }
.ui-role-card strong { color: var(--app-text); font-size: 19px; font-weight: 800; line-height: 1.1; }
.ui-role-card span:not(.ui-role-card-icon) { margin-top: 4px; color: var(--app-text-soft); font-size: 10.5px; font-weight: 700; }
.ui-role-card small { margin-top: 2px; color: var(--app-text-muted); font-size: 8.5px; }
.ui-admin-actions { display: grid; gap: 7px; margin-top: 16px; }
.ui-admin-actions > a { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 10px; border-radius: 11px; padding: 8px 10px; color: var(--app-text-soft); background: var(--app-surface-muted); font-size: 10.5px; font-weight: 650; transition: var(--app-transition); }
.ui-admin-actions > a:hover { color: var(--app-primary); background: var(--app-primary-soft); }
.ui-admin-actions > a > span { display: inline-flex; align-items: center; gap: 8px; }

.ui-card-header-block { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--app-border); padding: 17px 18px; }
.ui-card-header-block h2 { margin: 0; color: var(--app-text); font-size: 14px; font-weight: 760; }
.ui-card-header-block p { margin: 4px 0 0; color: var(--app-text-muted); font-size: 10px; }
.ui-company-cell { display: flex; min-width: 0; align-items: center; gap: 9px; }
.ui-company-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; color: var(--app-primary); background: var(--app-primary-soft); font-weight: 800; }
.ui-company-cell > div { display: flex; min-width: 0; flex-direction: column; }
.ui-company-cell strong { overflow: hidden; color: var(--app-text); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.ui-company-cell small { margin-top: 2px; color: var(--app-text-muted); font-size: 9px; }
.ui-onboarding-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.ui-onboarding-list li { display: flex; align-items: flex-start; gap: 10px; }
.ui-onboarding-list li > span { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-primary) 20%, var(--app-border)); border-radius: 9px; color: var(--app-primary); background: var(--app-primary-soft); font-size: 10px; font-weight: 800; }
.ui-onboarding-list li > div { display: flex; min-width: 0; flex-direction: column; padding-top: 1px; }
.ui-onboarding-list strong { color: var(--app-text); font-size: 10.5px; font-weight: 720; }
.ui-onboarding-list small { margin-top: 2px; color: var(--app-text-muted); font-size: 9px; line-height: 1.55; }

/* Company switch */
.ui-switch-shell { width: min(1120px, 100%); margin-inline: auto; }
.ui-switch-intro { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 24px; }
.ui-switch-intro-icon { display: grid; width: 50px; height: 50px; flex: 0 0 50px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-primary) 18%, var(--app-border)); border-radius: 15px; color: var(--app-primary); background: var(--app-primary-soft); }
.ui-switch-intro h1 { margin: 0; color: var(--app-text); font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.03em; }
.ui-switch-intro p { max-width: 700px; margin: 7px 0 0; color: var(--app-text-soft); font-size: 12.5px; line-height: 1.7; }
.ui-company-select-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ui-company-select-form { min-width: 0; }
.ui-company-select-card { display: flex; width: 100%; min-height: 260px; flex-direction: column; border: 1px solid var(--app-border); border-radius: 19px; padding: 17px; color: var(--app-text); background: var(--app-surface); box-shadow: var(--app-shadow-xs); font-family: var(--app-font); text-align: right; transition: var(--app-transition); }
.ui-company-select-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--app-primary) 32%, var(--app-border)); box-shadow: var(--app-shadow-md); }
.ui-company-select-card.is-current { border-color: color-mix(in srgb, var(--app-success) 35%, var(--app-border)); background: linear-gradient(145deg, var(--app-surface), var(--app-success-soft)); }
.ui-company-select-top { display: flex; align-items: center; justify-content: space-between; }
.ui-company-select-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #2a76dd, #124da8); box-shadow: 0 10px 24px rgba(23, 92, 211, .18); font-size: 18px; font-weight: 800; }
.ui-company-select-arrow { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--app-text-muted); background: var(--app-surface-muted); }
.ui-company-current-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 5px 8px; color: var(--app-success); background: var(--app-success-soft); font-size: 9px; font-weight: 750; }
.ui-company-select-copy { display: flex; min-width: 0; flex-direction: column; margin-top: 16px; }
.ui-company-select-copy strong { overflow: hidden; color: var(--app-text); font-size: 15px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.ui-company-select-copy small { margin-top: 3px; color: var(--app-text-muted); font-size: 10px; }
.ui-company-select-meta { display: grid; gap: 8px; margin-top: 16px; }
.ui-company-select-meta > span { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--app-text-soft); font-size: 10px; }
.ui-company-select-meta svg { color: var(--app-primary); }
.ui-company-select-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; border-top: 1px solid var(--app-border); padding-top: 14px; color: var(--app-primary); font-size: 10.5px; font-weight: 720; }
.ui-switch-security-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 19px 0 0; color: var(--app-text-muted); font-size: 10px; }

/* Authentication */
body.auth-app {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--app-text);
  background: var(--app-bg);
  font-family: var(--app-font);
}
body.auth-app * { box-sizing: border-box; }
body.auth-app :focus-visible { outline: 3px solid color-mix(in srgb, var(--app-primary) 28%, transparent); outline-offset: 2px; }
.auth-premium-shell { display: grid; min-height: 100dvh; grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr); }
.auth-premium-panel { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 15% 8%, rgba(79, 157, 242, .28), transparent 24rem), linear-gradient(145deg, #081a30, #0d3158 58%, #0b5a64); }
.auth-premium-panel::before { content: ""; position: absolute; width: 520px; height: 520px; left: -235px; bottom: -300px; border: 82px solid rgba(255,255,255,.045); border-radius: 50%; }
.auth-premium-panel::after { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.auth-premium-panel-inner { position: relative; z-index: 1; display: flex; width: min(620px, 100%); min-height: 100dvh; flex-direction: column; margin-inline: auto; padding: 38px clamp(28px, 6vw, 72px); }
.auth-premium-brand,
.auth-premium-mobile-brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.auth-premium-brand-mark { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: #fff; background: linear-gradient(145deg, rgba(80,155,244,.96), rgba(20,81,173,.96)); box-shadow: 0 13px 30px rgba(0,0,0,.18); font-size: 14px; font-weight: 850; letter-spacing: -.03em; }
.auth-premium-brand > span:last-child,
.auth-premium-mobile-brand > span:last-child { display: flex; flex-direction: column; }
.auth-premium-brand strong { color: #fff; font-size: 15px; font-weight: 780; }
.auth-premium-brand small { margin-top: 2px; color: #9fb9d3; font-size: 9.5px; }
.auth-premium-hero-copy { margin-top: auto; margin-bottom: 42px; }
.auth-premium-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; color: #86ddd0; font-size: 10.5px; font-weight: 720; }
.auth-premium-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #62ddc9; box-shadow: 0 0 0 4px rgba(98,221,201,.14); }
.auth-premium-hero-copy h1 { margin: 0; color: #fff; font-size: clamp(32px, 4.1vw, 55px); font-weight: 830; letter-spacing: -.045em; line-height: 1.18; }
.auth-premium-hero-copy p { max-width: 560px; margin: 17px 0 0; color: #bad0e4; font-size: 13px; line-height: 1.9; }
.auth-premium-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.auth-premium-features > div { min-width: 0; border: 1px solid rgba(255,255,255,.10); border-radius: 15px; padding: 13px; background: rgba(255,255,255,.055); backdrop-filter: blur(10px); }
.auth-premium-features > div > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: #78ddd0; background: rgba(88,210,194,.11); }
.auth-premium-features svg { width: 18px; height: 18px; }
.auth-premium-features strong { display: block; margin-top: 12px; color: #f5f9fd; font-size: 10.5px; font-weight: 720; }
.auth-premium-features small { display: block; margin-top: 4px; color: #93abc3; font-size: 8.5px; line-height: 1.55; }
.auth-premium-panel-footer { margin: 22px 0 0; color: #7894ae; font-size: 9px; }
.auth-premium-form-side { position: relative; display: flex; min-height: 100dvh; align-items: center; justify-content: center; flex-direction: column; padding: 34px 24px; background: radial-gradient(circle at 100% 0%, rgba(23,92,211,.06), transparent 28rem), var(--app-bg); }
.auth-theme-toggle { position: absolute; top: 24px; left: 24px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--app-border); border-radius: 13px; color: var(--app-text-soft); background: var(--app-surface); box-shadow: var(--app-shadow-xs); }
.auth-theme-toggle svg { width: 19px; height: 19px; }
.auth-premium-mobile-brand { display: none; margin-bottom: 24px; color: var(--app-text); }
.auth-premium-mobile-brand .auth-premium-brand-mark { width: 42px; height: 42px; flex-basis: 42px; border: 0; }
.auth-premium-mobile-brand strong { color: var(--app-text); font-size: 14px; }
.auth-premium-mobile-brand small { color: var(--app-text-muted); font-size: 9px; }
.auth-premium-card { width: min(460px, 100%); border: 1px solid var(--app-border); border-radius: 23px; padding: clamp(24px, 4vw, 38px); background: var(--app-surface); box-shadow: var(--app-shadow-md); }
.auth-premium-copyright { margin: 18px 0 0; color: var(--app-text-muted); font-size: 9.5px; }
.auth-form-heading { margin-bottom: 23px; }
.auth-form-eyebrow { color: var(--app-primary); font-size: 10px; font-weight: 750; }
.auth-form-heading h2 { margin: 7px 0 0; color: var(--app-text); font-size: 27px; font-weight: 820; letter-spacing: -.035em; }
.auth-form-heading p { margin: 7px 0 0; color: var(--app-text-soft); font-size: 11.5px; line-height: 1.75; }
.auth-form { display: grid; gap: 17px; }
.auth-field { min-width: 0; }
.auth-field > label { display: block; margin-bottom: 7px; color: var(--app-text-soft); font-size: 11.5px; font-weight: 700; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > input,
.auth-field > input:not([type="hidden"]) { width: 100%; height: 48px; border: 1px solid var(--app-border); border-radius: 13px; padding: 0 44px 0 44px; color: var(--app-text); background: var(--app-surface); box-shadow: var(--app-shadow-xs); font-family: var(--app-font); font-size: 13px; transition: var(--app-transition); }
.auth-field > input:not([type="hidden"]) { padding-inline: 13px; }
.auth-input-wrap > input:hover,
.auth-field > input:not([type="hidden"]):hover { border-color: var(--app-border-strong); }
.auth-input-wrap > input:focus,
.auth-field > input:not([type="hidden"]):focus { outline: 0; border-color: var(--app-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-primary) 11%, transparent); }
.auth-field.has-error .auth-input-wrap > input { border-color: var(--app-danger); }
.auth-input-icon { position: absolute; top: 50%; right: 14px; display: grid; transform: translateY(-50%); color: var(--app-text-muted); pointer-events: none; }
.auth-password-toggle { position: absolute; top: 50%; left: 8px; display: grid; width: 34px; height: 34px; place-items: center; transform: translateY(-50%); border: 0; border-radius: 10px; color: var(--app-text-muted); background: transparent; }
.auth-password-toggle:hover { color: var(--app-primary); background: var(--app-primary-soft); }
.auth-password-toggle svg { width: 18px; height: 18px; }
.auth-field-error { margin: 5px 0 0; color: var(--app-danger); font-size: 9.5px; }
.auth-field-hint { margin: 6px 0 0; color: var(--app-text-muted); font-size: 9.5px; }
.auth-form-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-form-options > a { color: var(--app-primary); font-size: 10px; font-weight: 680; }
.auth-remember { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.auth-remember input { position: absolute; opacity: 0; }
.auth-remember > span { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid var(--app-border-strong); border-radius: 6px; color: transparent; background: var(--app-surface); transition: var(--app-transition); }
.auth-remember input:checked + span { border-color: var(--app-primary); color: #fff; background: var(--app-primary); }
.auth-remember em { color: var(--app-text-soft); font-size: 10px; font-style: normal; }
.auth-submit-button { display: flex; width: 100%; min-height: 49px; align-items: center; justify-content: center; gap: 9px; border: 1px solid #1451ad; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #2777e0, #124da8); box-shadow: 0 12px 24px rgba(23,92,211,.19); font-family: var(--app-font); font-size: 12px; font-weight: 750; transition: var(--app-transition); }
.auth-submit-button:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(23,92,211,.24); }
.auth-trust-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; color: var(--app-text-muted); font-size: 9.5px; text-align: center; }
.auth-form-alert { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; margin-bottom: 17px; border: 1px solid color-mix(in srgb, var(--app-danger) 25%, var(--app-border)); border-radius: 13px; padding: 10px; color: var(--app-danger); background: var(--app-danger-soft); }
.auth-form-alert--success { border-color: color-mix(in srgb, var(--app-success) 25%, var(--app-border)); color: var(--app-success); background: var(--app-success-soft); }
.auth-form-alert > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--app-surface); }
.auth-form-alert strong { display: block; color: currentColor; font-size: 10.5px; }
.auth-form-alert p { margin: 3px 0 0; color: var(--app-text-soft); font-size: 9.5px; }
.auth-two-factor { display: grid; gap: 17px; }
.auth-segmented { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; border: 1px solid var(--app-border); border-radius: 12px; padding: 4px; background: var(--app-surface-muted); }
.auth-segmented button { min-height: 36px; border: 0; border-radius: 9px; color: var(--app-text-muted); background: transparent; font-family: var(--app-font); font-size: 10.5px; font-weight: 700; }
.auth-segmented button.is-active { color: var(--app-primary); background: var(--app-surface); box-shadow: var(--app-shadow-xs); }
.auth-otp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.auth-otp-grid input { width: 100%; aspect-ratio: 1 / 1.05; min-width: 0; border: 1px solid var(--app-border); border-radius: 12px; color: var(--app-text); background: var(--app-surface); font-family: var(--app-font); font-size: 18px; font-weight: 800; text-align: center; }
.auth-otp-grid input:focus { outline: 0; border-color: var(--app-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-primary) 11%, transparent); }
.auth-secondary-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--app-border); padding-top: 15px; }
.auth-secondary-actions a,
.auth-secondary-actions button { display: inline-flex; align-items: center; gap: 5px; border: 0; color: var(--app-text-muted); background: transparent; font-family: var(--app-font); font-size: 9.5px; font-weight: 650; }
.auth-secondary-actions a:hover,
.auth-secondary-actions button:hover { color: var(--app-primary); }

@media (max-width: 1180px) {
  .auth-premium-shell { grid-template-columns: minmax(0, .85fr) minmax(480px, 1.15fr); }
  .auth-premium-features { grid-template-columns: 1fr; }
  .auth-premium-features > div { display: grid; grid-template-columns: 35px minmax(0, 1fr); column-gap: 10px; }
  .auth-premium-features > div > span { grid-row: 1 / span 2; }
  .auth-premium-features strong { margin-top: 1px; }
}

@media (max-width: 960px) {
  .auth-premium-shell { display: block; }
  .auth-premium-panel { display: none; }
  .auth-premium-form-side { padding: 28px 18px; }
  .auth-premium-mobile-brand { display: inline-flex; }
  .auth-theme-toggle { top: 18px; left: 18px; }
  .ui-company-select-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ui-command { align-items: end; place-items: end stretch; padding: 0; }
  .ui-command-panel { width: 100%; max-height: 90dvh; border-radius: 22px 22px 0 0; }
  .ui-command-footer { display: none; }
  .ui-role-grid { grid-template-columns: 1fr; }
  .ui-health-summary { grid-template-columns: 1fr; }
  .ui-operation-grid--simple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-company-select-grid { grid-template-columns: 1fr; }
  .ui-company-select-card { min-height: 235px; }
  .ui-switch-intro { gap: 11px; }
  .ui-switch-intro-icon { width: 43px; height: 43px; flex-basis: 43px; border-radius: 13px; }
  .ui-switch-intro h1 { font-size: 22px; }
  .ui-switch-intro p { font-size: 11px; }
  .auth-premium-form-side { justify-content: flex-start; min-height: 100dvh; padding-top: 76px; }
  .auth-premium-card { border-radius: 19px; padding: 23px 18px; box-shadow: var(--app-shadow-sm); }
  .auth-form-heading h2 { font-size: 24px; }
  .auth-form-options { align-items: flex-start; flex-direction: column; }
  .auth-otp-grid { gap: 5px; }
  .auth-otp-grid input { border-radius: 10px; font-size: 16px; }
}

@media (max-width: 420px) {
  .auth-premium-form-side { padding-inline: 12px; }
  .auth-premium-card { padding-inline: 15px; }
  .auth-theme-toggle { left: 12px; }
  .auth-input-wrap > input { height: 46px; }
  .auth-otp-grid { gap: 4px; }
  .auth-otp-grid input { border-radius: 9px; font-size: 15px; }
  .ui-command-search { padding-inline: 12px; }
}

@media (min-width: 1280px) {
  body.app-sidebar-collapsed .app-sidebar { width: 92px !important; }
  body.app-sidebar-collapsed .app-sidebar:not(:hover) .app-brand-copy,
  body.app-sidebar-collapsed .app-sidebar:not(:hover) .app-sidebar-search,
  body.app-sidebar-collapsed .app-sidebar:not(:hover) .app-sidebar-footer,
  body.app-sidebar-collapsed .app-sidebar:not(:hover) .menu-item-text,
  body.app-sidebar-collapsed .app-sidebar:not(:hover) .menu-item-arrow,
  body.app-sidebar-collapsed .app-sidebar:not(:hover) nav a.menu-item + div.mt-2.overflow-hidden {
    display: none !important;
  }
  body.app-sidebar-collapsed .app-sidebar:not(:hover) .app-sidebar-brand { justify-content: center; padding-inline: 12px; }
  body.app-sidebar-collapsed .app-sidebar:not(:hover) .app-brand-link { justify-content: center; }
  body.app-sidebar-collapsed .app-sidebar:not(:hover) nav > .mb-2 > a.menu-item,
  body.app-sidebar-collapsed .app-sidebar:not(:hover) nav > a.menu-item {
    justify-content: center;
    padding-inline: 8px;
  }
}

/* ========================================================================== 
   Dashboard composition patterns used by role-specific landing screens
   ========================================================================== */
.ui-dashboard-hero-head {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ui-dashboard-hero-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  color: #acd4ff;
  font-size: 11px;
  font-weight: 750;
}
.ui-dashboard-hero-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: #4ed8c8;
  box-shadow: 0 0 0 4px rgba(78, 216, 200, .14);
}
.ui-dashboard-meta > span {
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: #d0e0f2;
  background: rgba(255, 255, 255, .045);
  border-radius: 10px;
  font-size: 10.5px;
  line-height: 1.45;
}
.ui-dashboard-meta > span svg { flex: 0 0 auto; color: #92c5ff; }

.ui-section-head {
  min-width: 0;
  margin-block-end: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ui-section-head > div { min-width: 0; }
.ui-section-head h2 { margin: 0; color: var(--ui-text); font-weight: 770; line-height: 1.4; }
.ui-section-head p { margin: 4px 0 0; color: var(--ui-text-muted); line-height: 1.65; }
.ui-section-link {
  min-height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: var(--ui-blue-700);
  background: var(--ui-blue-50);
  border: 1px solid color-mix(in srgb, var(--ui-blue-500) 16%, var(--ui-border));
  border-radius: 10px;
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 700;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ui-section-link:hover { transform: translateY(-1px); background: var(--ui-blue-100); border-color: color-mix(in srgb, var(--ui-blue-500) 34%, var(--ui-border)); }
.ui-section-link svg { transform: rotate(180deg); }
html.dark .ui-section-link { color: #9cc7ff; background: #142b47; border-color: #294967; }

.ui-operation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}
.ui-operation-card {
  --operation-color: var(--ui-blue-700);
  --operation-soft: var(--ui-blue-50);
  min-width: 0;
  min-height: 98px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 15px;
  box-shadow: var(--ui-shadow-xs);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ui-operation-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--operation-color) 30%, var(--ui-border));
  box-shadow: var(--ui-shadow-sm);
  background: color-mix(in srgb, var(--operation-soft) 42%, var(--ui-surface));
}
.ui-operation-card-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--operation-color);
  background: var(--operation-soft);
  border-radius: 13px;
}
.ui-operation-card > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.ui-operation-card strong { color: var(--ui-text); font-weight: 750; }
.ui-operation-card small { margin-block-start: 3px; color: var(--ui-text-muted); line-height: 1.55; }
.ui-operation-card--success { --operation-color: var(--ui-green-700); --operation-soft: var(--ui-green-100); }
.ui-operation-card--warning { --operation-color: var(--ui-amber-700); --operation-soft: var(--ui-amber-100); }
.ui-operation-card--danger { --operation-color: var(--ui-red-700); --operation-soft: var(--ui-red-100); }
.ui-operation-card--purple { --operation-color: var(--ui-purple-700); --operation-soft: var(--ui-purple-100); }
.ui-operation-card--info { --operation-color: #1677a6; --operation-soft: #e5f6fb; }
html.dark .ui-operation-card--success { --operation-color: #83ddb0; --operation-soft: rgba(19, 112, 68, .22); }
html.dark .ui-operation-card--warning { --operation-color: #f0bb68; --operation-soft: rgba(163, 84, 9, .22); }
html.dark .ui-operation-card--danger { --operation-color: #ff9c93; --operation-soft: rgba(180, 35, 24, .2); }
html.dark .ui-operation-card--purple { --operation-color: #c4a7ff; --operation-soft: rgba(105, 65, 198, .24); }
html.dark .ui-operation-card--info { --operation-color: #72c7e3; --operation-soft: rgba(22, 119, 166, .2); }

.ui-quick-list { display: grid; gap: 8px; }
.ui-quick-link {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  color: var(--ui-text);
  background: var(--ui-surface-soft);
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.ui-quick-link:hover { transform: translateX(-2px); background: var(--ui-blue-50); border-color: color-mix(in srgb, var(--ui-blue-500) 18%, var(--ui-border)); }
html.dark .ui-quick-link:hover { background: #142b47; border-color: #294967; }
.ui-quick-link-main { min-width: 0; display: flex; align-items: center; gap: 10px; }
.ui-quick-link-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-blue-700);
  background: var(--ui-blue-100);
  border-radius: 10px;
}
html.dark .ui-quick-link-icon { color: #8cbcff; background: #173557; }
.ui-quick-link-copy { min-width: 0; display: flex; flex-direction: column; }
.ui-quick-link-copy strong { overflow: hidden; color: var(--ui-text); font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.ui-quick-link-copy small { margin-block-start: 2px; color: var(--ui-text-muted); line-height: 1.5; }
.ui-quick-link-arrow { width: 16px; height: 16px; flex: 0 0 16px; color: var(--ui-text-muted); transform: rotate(180deg); }
.ui-distribution-icon--brand { color: var(--app-primary); background: var(--app-primary-soft); }

/* Raw tables receive the same card shell as component tables. */
.ui-auto-table-shell > .ui-table-scroll > table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-table-scroll-mode { overflow: hidden; }

@media (max-width: 1180px) {
  .ui-operation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ui-dashboard-hero-head { gap: 2px; }
  .ui-dashboard-hero-actions { width: 100%; }
  .ui-dashboard-hero-actions > * { flex: 1 1 auto; }
  .ui-section-head { align-items: stretch; flex-direction: column; }
  .ui-section-link { width: fit-content; }
  .ui-operation-grid { grid-template-columns: 1fr; gap: 9px; }
  .ui-operation-grid--simple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-operation-card { min-height: 86px; padding: 12px; }
  .ui-operation-card-icon { width: 40px; height: 40px; flex-basis: 40px; }
}

@media (max-width: 430px) {
  .ui-operation-grid--simple { grid-template-columns: 1fr; }
  .ui-quick-link { padding-inline: 9px; }
  .ui-quick-link-copy small { white-space: normal; }
}

@media (min-width: 1280px) {
  body.app-sidebar-collapsed .app-sidebar:not(:hover) .app-sidebar-footer { display: flex !important; }
  body.app-sidebar-collapsed .app-sidebar:not(:hover) .app-sidebar-user > span:last-child { display: none !important; }
}


/* Sidebar filtering and command result details. */
.ui-sidebar-empty {
  display: block;
  margin: 9px 4px 15px;
  padding: 18px 13px;
  color: #91a9c5;
  background: rgba(255, 255, 255, .045);
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 13px;
  text-align: center;
}
.ui-sidebar-empty[hidden] { display: none !important; }
.ui-sidebar-empty svg { margin: 0 auto 7px; color: #7392b7; }
.ui-sidebar-empty strong { display: block; color: #dbe8f8; font-size: 12px; }
.ui-sidebar-empty small,
.ui-sidebar-empty span { display: block; margin-block-start: 3px; font-size: 10px; line-height: 1.6; }

.ui-command-item > span:nth-child(2) {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}
.ui-command-item > span:nth-child(2) strong {
  width: 100%;
  overflow: hidden;
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-command-item > span:nth-child(2) small {
  width: 100%;
  margin-block-start: 2px;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-command-item:hover > span:nth-child(2) strong,
.ui-command-item.is-active > span:nth-child(2) strong { color: var(--ui-blue-700); }
html.dark .ui-command-item:hover > span:nth-child(2) strong,
html.dark .ui-command-item.is-active > span:nth-child(2) strong { color: #9cc7ff; }

.ui-alert.is-leaving {
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  transition: opacity .18s ease, transform .18s ease;
}

/* Stable compact-sidebar behaviour for the data-driven navigation. */
@media (min-width: 1280px) {
  body.app-sidebar-collapsed .app-sidebar {
    width: var(--ui-sidebar-collapsed) !important;
    min-width: var(--ui-sidebar-collapsed) !important;
  }
  body.app-sidebar-collapsed .app-sidebar-footer { gap: 0; }
  body.app-sidebar-collapsed .app-sidebar-user { display: none !important; }
  body.app-sidebar-collapsed .app-sidebar-collapse { margin-inline: auto; }
  body.app-sidebar-collapsed .app-nav-link::before,
  body.app-sidebar-collapsed .app-nav-group-trigger::before {
    position: fixed;
    z-index: 90;
    inset-inline-start: calc(var(--ui-sidebar-collapsed) + 8px);
    min-width: max-content;
    max-width: 230px;
    padding: 7px 10px;
    color: #fff;
    background: #071426;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 9px;
    box-shadow: var(--ui-shadow-md);
    font-size: 11px;
    font-weight: 650;
    opacity: 0;
    transform: translateX(4px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
  }
  body.app-sidebar-collapsed .app-nav-link:hover::before,
  body.app-sidebar-collapsed .app-nav-link:focus-visible::before,
  body.app-sidebar-collapsed .app-nav-group-trigger:hover::before,
  body.app-sidebar-collapsed .app-nav-group-trigger:focus-visible::before {
    content: attr(data-tooltip);
    opacity: 1;
    transform: translateX(0);
  }
}

/* Contextual contrast overrides after the legacy typography compatibility layer. */
.accounting-app .ui-dashboard-hero h1,
.accounting-app .ui-dashboard-hero h2,
.accounting-app .ui-dashboard-hero h3 { color: #fff !important; }
.accounting-app .ui-dashboard-hero p { color: #c9daec; }
.accounting-app .app-sidebar .app-nav-section > h2 { color: #6f89aa !important; }
.accounting-app .app-sidebar .app-brand-copy strong,
.accounting-app .app-sidebar .app-sidebar-context-copy strong,
.accounting-app .app-sidebar .app-sidebar-user strong { color: #f4f8fd !important; }

/* Subtle contextual accents for general-purpose content cards. */
.ui-card--brand,
.ui-card--blue {
  border-color: color-mix(in srgb, var(--ui-blue-500) 19%, var(--ui-border));
  background: linear-gradient(145deg, var(--ui-surface), color-mix(in srgb, var(--ui-blue-50) 38%, var(--ui-surface)));
}
.ui-card--warning {
  border-color: color-mix(in srgb, var(--ui-amber-700) 18%, var(--ui-border));
  background: linear-gradient(145deg, var(--ui-surface), color-mix(in srgb, var(--ui-amber-100) 26%, var(--ui-surface)));
}
html.dark .ui-card--brand,
html.dark .ui-card--blue { background: linear-gradient(145deg, var(--ui-surface), #102741); }
html.dark .ui-card--warning { background: linear-gradient(145deg, var(--ui-surface), #272014); }

/* Compatibility and high-density editor refinements. */
.ui-control-wrap--date::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 13px;
  width: 18px;
  height: 18px;
  opacity: .72;
  transform: translateY(-50%);
  pointer-events: none;
  background: currentColor;
  color: var(--ui-text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 3v3M17 3v3M4 9h16M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 3v3M17 3v3M4 9h16M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ui-control-wrap--date .ui-control { padding-inline-end: 43px; }
.ui-control-wrap--date input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.ui-control--inline { display: inline-flex; width: auto; min-width: 96px; }
.ui-control--xs { min-height: 34px; padding: 6px 9px; border-radius: 9px; font-size: 11px !important; }
.ui-control--sm { min-height: 38px; padding: 7px 10px; border-radius: 10px; font-size: 12px !important; }
.ui-control--md { min-height: 44px; }
.ui-control--lg { min-height: 50px; padding: 12px 14px; font-size: 14px !important; }
.ui-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.ui-toggle-field--field .ui-toggle-card { min-height: 46px; padding: 8px 0; background: transparent; border: 0; border-radius: 0; }
.ui-dropdown-item { width: 100%; min-height: 39px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; color: var(--ui-text-soft); border-radius: 9px; text-decoration: none; font-size: 11px; }
.ui-dropdown-item:hover { color: var(--ui-blue-700); background: var(--ui-blue-50); }
html.dark .ui-dropdown-item:hover { color: #9cc7ff; background: #142b47; }
.ui-alert--validation { --ui-alert-color: var(--ui-red-700); --ui-alert-soft: var(--ui-red-100); }

.ui-empty-state--success .ui-empty-state-icon { color: var(--ui-green-700); background: var(--ui-green-100); }
.ui-empty-state--warning .ui-empty-state-icon { color: var(--ui-amber-700); background: var(--ui-amber-100); }
.ui-empty-state--danger .ui-empty-state-icon,
.ui-empty-state--error .ui-empty-state-icon { color: var(--ui-red-700); background: var(--ui-red-100); }
.ui-empty-state--purple .ui-empty-state-icon { color: var(--ui-purple-700); background: var(--ui-purple-100); }
.ui-empty-state--neutral .ui-empty-state-icon { color: #52657d; background: #e8edf3; }
html.dark .ui-empty-state--success .ui-empty-state-icon { color: #83ddb0; background: rgba(19,112,68,.22); }
html.dark .ui-empty-state--warning .ui-empty-state-icon { color: #f0bb68; background: rgba(163,84,9,.22); }
html.dark .ui-empty-state--danger .ui-empty-state-icon,
html.dark .ui-empty-state--error .ui-empty-state-icon { color: #ff9c93; background: rgba(180,35,24,.2); }
html.dark .ui-empty-state--purple .ui-empty-state-icon { color: #c4a7ff; background: rgba(105,65,198,.24); }
html.dark .ui-empty-state--neutral .ui-empty-state-icon { color: #b6c4d5; background: #1b3049; }

/* Legacy UI-kit and analytical card helpers. */
.ui-btn-motion,
.ui-action-motion,
.ui-card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.ui-btn-motion:hover,
.ui-action-motion:hover { transform: translateY(-1px); }
.ui-btn-motion:active,
.ui-action-motion:active { transform: translateY(0) scale(.98); }
.ui-card-hover:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-sm); }
.ui-card-tone { --legacy-card-tone: #52657d; --legacy-card-soft: #edf1f5; }
.ui-card-tone[data-tone="brand"],
.ui-card-tone[data-tone="blue"] { --legacy-card-tone: var(--ui-blue-700); --legacy-card-soft: var(--ui-blue-100); }
.ui-card-tone[data-tone="success"] { --legacy-card-tone: var(--ui-green-700); --legacy-card-soft: var(--ui-green-100); }
.ui-card-tone[data-tone="warning"] { --legacy-card-tone: var(--ui-amber-700); --legacy-card-soft: var(--ui-amber-100); }
.ui-card-tone[data-tone="error"],
.ui-card-tone[data-tone="danger"] { --legacy-card-tone: var(--ui-red-700); --legacy-card-soft: var(--ui-red-100); }
.ui-card-kicker { color: var(--legacy-card-tone) !important; }
.ui-card-value { color: var(--ui-text) !important; font-variant-numeric: tabular-nums; }
.ui-card-desc { color: var(--ui-text-muted) !important; }
.ui-card-iconbox { color: var(--legacy-card-tone); background: var(--legacy-card-soft); border-color: color-mix(in srgb, var(--legacy-card-tone) 18%, var(--ui-border)) !important; }
.ui-card-link { color: var(--legacy-card-tone) !important; text-decoration: none; }
.ui-card-link:hover { text-decoration: underline; }
html.dark .ui-card-tone[data-tone="brand"],
html.dark .ui-card-tone[data-tone="blue"] { --legacy-card-tone: #8cbcff; --legacy-card-soft: #173557; }
html.dark .ui-card-tone[data-tone="success"] { --legacy-card-tone: #83ddb0; --legacy-card-soft: rgba(19,112,68,.22); }
html.dark .ui-card-tone[data-tone="warning"] { --legacy-card-tone: #f0bb68; --legacy-card-soft: rgba(163,84,9,.22); }
html.dark .ui-card-tone[data-tone="error"],
html.dark .ui-card-tone[data-tone="danger"] { --legacy-card-tone: #ff9c93; --legacy-card-soft: rgba(180,35,24,.2); }

/* Editable terminology and UI-copy screens. */
.ui-settings-editor { display: grid; gap: 18px; }
.ui-settings-editor-card { overflow: hidden; }
.ui-settings-editor-toolbar { padding: 16px 18px; background: var(--ui-surface-soft); border-block-end: 1px solid var(--ui-border); }
.ui-settings-filter-grid { display: grid; grid-template-columns: minmax(240px, 1.55fr) minmax(160px, .65fr) minmax(140px, .5fr) auto; align-items: end; gap: 10px; }
.ui-settings-filter-actions { display: flex; align-items: center; gap: 8px; }
.ui-settings-filter-actions .ui-btn { min-width: 92px; }
.ui-settings-editor-note { margin: 0; display: inline-flex; align-items: center; gap: 7px; color: var(--ui-text-muted); font-size: 11px; }
.ui-settings-editor-note svg { width: 17px; height: 17px; color: var(--ui-blue-600); }
.ui-settings-table { table-layout: fixed; }
.ui-settings-table textarea,
.ui-settings-table input[type="text"] { min-height: 44px; resize: vertical; }
.ui-settings-table textarea:focus,
.ui-settings-table input[type="text"]:focus { position: relative; z-index: 2; }
.ui-settings-default { margin-block-start: 6px; color: var(--ui-text-muted); font-size: 10px; line-height: 1.55; }
.ui-settings-default span { color: var(--ui-text-soft); }
.ui-settings-override { margin-block-start: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ui-settings-reset { min-height: 28px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; color: var(--ui-blue-700); background: transparent; border: 0; border-radius: 8px; font-size: 10px; font-weight: 700; cursor: pointer; }
.ui-settings-reset:hover { background: var(--ui-blue-50); }
.ui-settings-status { min-width: 104px; display: inline-flex; align-items: center; gap: 9px; color: var(--ui-text-soft); font-size: 11px; font-weight: 650; }
.ui-settings-status-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.ui-settings-status-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ui-text-switch,
.glossary-switch { width: 44px; height: 25px; padding: 3px; display: inline-flex !important; align-items: center; background: #b7c1cd; border: 0 !important; border-radius: 999px; transition: background .18s ease, box-shadow .18s ease; }
.ui-text-knob,
.glossary-knob { width: 19px !important; height: 19px !important; flex: 0 0 19px; display: block !important; background: #fff !important; border-radius: 999px; box-shadow: 0 2px 6px rgba(15,23,42,.22); transform: translateX(0); transition: transform .18s ease !important; }
.ui-text-switch.bg-brand-500,
.glossary-switch.bg-brand-500 { background: var(--ui-blue-600) !important; }
.ui-text-knob.translate-x-5,
.glossary-knob.translate-x-5 { transform: translateX(-19px) !important; }
.ui-text-knob.translate-x-1,
.glossary-knob.translate-x-1 { transform: translateX(0) !important; }
.ui-settings-status-toggle input:focus-visible + .ui-text-switch,
.ui-settings-status-toggle input:focus-visible + .glossary-switch { box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-text-active-label,
.glossary-active-label { min-width: 48px; }
.ui-text-saving-status,
.ui-text-saving-text,
.glossary-saving-status,
.glossary-saving-reset,
.glossary-saving-title,
.glossary-saving-description,
.glossary-saving-example { color: var(--ui-blue-600); }
.ui-saving-spinner { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-blue-600); font-size: 10px; }
.ui-saving-spinner svg { animation: uiSpin .75s linear infinite; }
.ui-settings-editor-pagination { padding: 0 18px 18px; }
.ui-text-row.is-saving,
.glossary-row.is-saving { opacity: .78; }
.ui-text-row.is-saved,
.glossary-row.is-saved { animation: uiRowSaved .65s ease; }
.ui-text-row.has-save-error,
.glossary-row.has-save-error { background: color-mix(in srgb, var(--ui-red-100) 42%, var(--ui-surface)); }
@keyframes uiSpin { to { transform: rotate(360deg); } }
@keyframes uiRowSaved { 0%,100% { background: transparent; } 35% { background: color-mix(in srgb, var(--ui-green-100) 55%, transparent); } }

/* Non-blocking application notifications. */
.ui-toast-stack { position: fixed; z-index: 10050; inset-block-start: calc(var(--ui-topbar-height) + 14px); inset-inline-end: 18px; width: min(390px, calc(100vw - 28px)); display: grid; gap: 9px; pointer-events: none; }
.ui-toast { --toast-color: var(--ui-blue-700); --toast-soft: var(--ui-blue-100); min-height: 58px; padding: 11px 12px; display: grid; grid-template-columns: 32px minmax(0, 1fr) 28px; align-items: center; gap: 9px; color: var(--ui-text); background: color-mix(in srgb, var(--ui-surface) 96%, transparent); border: 1px solid var(--ui-border); border-inline-start: 4px solid var(--toast-color); border-radius: 13px; box-shadow: var(--ui-shadow-md); backdrop-filter: blur(14px); pointer-events: auto; animation: uiToastIn .2s ease both; }
.ui-toast--success { --toast-color: var(--ui-green-700); --toast-soft: var(--ui-green-100); }
.ui-toast--warning { --toast-color: var(--ui-amber-700); --toast-soft: var(--ui-amber-100); }
.ui-toast--danger,
.ui-toast--error { --toast-color: var(--ui-red-700); --toast-soft: var(--ui-red-100); }
.ui-toast-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--toast-color); background: var(--toast-soft); border-radius: 9px; font-weight: 800; }
.ui-toast-copy { min-width: 0; }
.ui-toast-copy strong { display: block; color: var(--ui-text); font-size: 11px; }
.ui-toast-copy span { display: block; margin-block-start: 1px; color: var(--ui-text-muted); font-size: 10px; line-height: 1.45; }
.ui-toast-close { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ui-text-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.ui-toast-close:hover { color: var(--ui-text); background: var(--ui-surface-muted); }
.ui-toast.is-leaving { animation: uiToastOut .18s ease both; }
@keyframes uiToastIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes uiToastOut { to { opacity: 0; transform: translateY(-8px) scale(.98); } }

@media (max-width: 1023px) {
  .ui-settings-filter-grid { grid-template-columns: minmax(220px, 1fr) minmax(150px, .6fr) minmax(130px, .5fr); }
  .ui-settings-filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .ui-settings-editor { gap: 14px; }
  .ui-settings-editor-toolbar { padding: 13px; }
  .ui-settings-filter-grid { grid-template-columns: 1fr; }
  .ui-settings-filter-actions { grid-column: auto; }
  .ui-settings-filter-actions > * { flex: 1 1 auto; }
  .ui-settings-editor-pagination { padding-inline: 12px; }
  .ui-settings-editor .ui-table-cards tbody td { display: block; padding: 11px 0; }
  .ui-settings-editor .ui-table-cards tbody td::before { display: block; margin-block-end: 7px; font-size: 10px; }
  .ui-settings-editor .ui-table-cards tbody tr { padding: 9px 13px; }
  .ui-settings-table textarea { min-height: 74px; }
  .ui-settings-table .glossary-title { min-height: 48px; }
  .ui-settings-status { min-height: 38px; }
  .ui-toast-stack { inset-block-start: 72px; inset-inline: 12px; width: auto; }
}

/* ========================================================================== 
   Premium UI v3: unclipped searchable selects and mobile-first data entry
   ========================================================================== */

/* Searchable selects are positioned against the viewport while open. This
   prevents tables, cards, modals and horizontal scrollers from clipping them. */
.choices.ui-choices-layer-open {
  position: relative;
  z-index: 10020 !important;
}
.choices__list--dropdown.ui-choices-floating,
.choices__list[aria-expanded].ui-choices-floating {
  z-index: 10040 !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 13px !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 24px 70px rgba(7, 20, 38, .24) !important;
}
.choices__list--dropdown.ui-choices-floating .choices__input,
.choices__list[aria-expanded].ui-choices-floating .choices__input {
  flex: 0 0 auto;
  margin: 9px !important;
  width: calc(100% - 18px) !important;
  min-height: 40px;
  border-radius: 9px !important;
}
.choices__list--dropdown.ui-choices-floating > .choices__list,
.choices__list[aria-expanded].ui-choices-floating > .choices__list {
  min-height: 0;
  height: auto !important;
  flex: 0 1 auto;
  max-height: calc(var(--ui-choices-max-height, 320px) - 58px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.choices__list--dropdown.ui-choices-floating .choices__item--choice,
.choices__list[aria-expanded].ui-choices-floating .choices__item--choice {
  min-height: 42px;
  padding: 10px 13px !important;
  display: flex;
  align-items: center;
  line-height: 1.45;
  white-space: normal;
}
.choices.ui-choices-opens-up .choices__inner {
  border-radius: 11px !important;
}


/* A closed Choices menu must never remain as a blank white overlay. */
.choices__list--dropdown:not(.is-active),
.choices__list[aria-expanded="false"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.choices__list--dropdown.is-active,
.choices__list[aria-expanded="true"] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Keep every layout item shrinkable. A single wide field must never expand the
   entire application viewport. */
.app-workspace,
.app-main,
.app-container,
.app-main form,
.app-main .grid,
.app-main .flex,
.app-main .ui-card,
.app-main .ui-table-shell {
  min-width: 0;
  max-width: 100%;
}
.app-main .grid > *,
.app-main .flex > * { min-width: 0; }
.app-main :where(p, span, strong, small, a, td, th) { overflow-wrap: anywhere; }

/* Better visual affordance for tables that intentionally remain horizontal. */
.ui-table-scroll-mode .ui-table-scroll {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}
.ui-table-scroll-mode.ui-table-editor thead th:first-child,
.ui-table-scroll-mode.ui-table-editor tbody td:first-child {
  position: sticky;
  z-index: 3;
  inset-inline-start: 0;
  background: inherit;
  box-shadow: -1px 0 0 var(--ui-border);
}
.ui-table-scroll-mode.ui-table-editor thead th:first-child {
  z-index: 4;
  background: var(--ui-surface-soft);
}

/* Card-mode tables are also used for compact editors. */
.ui-table-editor.ui-table-cards tbody { counter-reset: ui-editor-row; }
.ui-table-editor.ui-table-cards tbody tr { counter-increment: ui-editor-row; }
.ui-table-editor.ui-table-cards tbody tr::before {
  content: "السطر " counter(ui-editor-row);
  display: none;
}

@media (max-width: 900px) {
  /* Read-only and compact editable tables become labelled cards on landscape
     phones and small tablets, not only on portrait phones. */
  .ui-table-cards .ui-table-scroll { overflow: visible; }
  .ui-table-cards table,
  .ui-table-cards tbody,
  .ui-table-cards tr,
  .ui-table-cards td {
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }
  .ui-table-cards table {
    table-layout: auto !important;
    border-collapse: separate;
  }
  .ui-table-cards table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ui-table-cards {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .ui-table-cards tbody { display: grid; gap: 11px; }
  .ui-table-cards tbody tr {
    position: relative;
    padding: 9px 13px;
    display: grid;
    gap: 0;
    overflow: visible;
    border: 1px solid var(--ui-border);
    border-radius: 15px;
    box-shadow: var(--ui-shadow-xs);
  }
  .ui-table-cards tbody td {
    min-height: 42px;
    padding: 9px 0;
    display: grid;
    grid-template-columns: minmax(96px, 35%) minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    border-block-end: 1px dashed var(--ui-border);
    color: var(--ui-text);
    text-align: start !important;
  }
  .ui-table-cards tbody td:last-child { border-block-end: 0; }
  .ui-table-cards tbody td::before {
    content: attr(data-label);
    color: var(--ui-text-muted);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.35;
  }
  .ui-table-cards tbody td[colspan] { display: block; }
  .ui-table-cards tbody td[colspan]::before { display: none; }
  .ui-table-cards tbody td > :where(.flex, form) { min-width: 0; justify-content: flex-start; }
  .ui-table-cards tbody :where(.ui-control, .choices, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .ui-table-cards tbody td[data-align="center"] > .flex,
  .ui-table-cards tbody td[data-align="center"] > form { justify-content: flex-start; }

  .ui-table-editor.ui-table-cards tbody tr { padding-block-start: 46px; }
  .ui-table-editor.ui-table-cards tbody tr::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    min-height: 37px;
    padding-inline: 13px;
    display: flex;
    align-items: center;
    color: var(--ui-blue-700);
    background: color-mix(in srgb, var(--ui-blue-50) 72%, var(--ui-surface));
    border-block-end: 1px solid var(--ui-border);
    border-radius: 14px 14px 0 0;
    font-size: 11px;
    font-weight: 800;
  }
  html.dark .ui-table-editor.ui-table-cards tbody tr::before {
    color: #93c5fd;
    background: #122942;
  }

  .ui-table-scroll-mode::after {
    content: "مرّر أفقياً لعرض بقية الأعمدة";
    min-height: 34px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-text-muted);
    background: var(--ui-surface-soft);
    border-block-start: 1px solid var(--ui-border);
    font-size: 10px;
    font-weight: 650;
  }
  .ui-table-scroll-mode .ui-table-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .app-main details form {
    width: min(100%, 420px);
    min-width: 0 !important;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  /* Prevent iOS focus zoom and improve touch accuracy. */
  body.accounting-app :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    .ui-control,
    .choices__inner,
    .choices__input
  ) {
    font-size: 16px !important;
  }
  .ui-control,
  .choices__inner { min-height: 48px !important; }
  .ui-label { font-size: 12.5px; }
  .ui-field-hint,
  .ui-field-error { font-size: 11px; }

  /* Exact, unprefixed multi-column grids inside forms are legacy desktop
     layouts. Collapse them without affecting sm:/md:/lg: responsive grids. */
  .app-main form .grid[class~="grid-cols-2"],
  .app-main form .grid[class~="grid-cols-3"],
  .app-main form .grid[class~="grid-cols-4"],
  .app-main form .grid[class~="grid-cols-5"],
  .app-main form .grid[class~="grid-cols-6"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .app-container { padding-inline: 11px; }
  .app-main .rounded-2xl { border-radius: 16px; }
  .app-main :where(.p-5, .sm\:p-6) { max-width: 100%; }

  .ui-page-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .ui-page-header-actions > *,
  .ui-page-header-actions .ui-btn,
  .ui-page-header-actions .ui-back-link { width: 100%; }

  .ui-form-action-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }
  .ui-form-action-bar > * { width: 100%; min-width: 0; }

  .ui-table-cards tbody td {
    grid-template-columns: minmax(88px, 33%) minmax(0, 1fr);
  }

  .ui-table-editor.ui-table-cards tbody td {
    display: block;
    padding: 10px 0;
  }
  .ui-table-editor.ui-table-cards tbody td::before {
    display: block;
    margin-block-end: 7px;
  }

  .app-main .ui-btn,
  .app-main .ui-icon-btn,
  .app-main button:not(.ui-toast-close) { touch-action: manipulation; }
}

@media (max-width: 480px) {
  .app-container { padding: 14px 9px 24px; }
  .ui-page-header h1 { font-size: 20px; }
  .ui-page-header-actions,
  .ui-form-action-bar { grid-template-columns: minmax(0, 1fr); }
  .ui-table-cards tbody td { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .ui-table-cards tbody td::before { margin-block-end: 2px; }
}

/* Journal entry editor */
.ui-journal-balance-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(47, 126, 230, .12), transparent 48%),
    var(--ui-surface);
}
.ui-journal-balance-card::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--ui-blue-500), var(--ui-teal-600));
}
.ui-journal-balance-badge {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  color: var(--ui-text-muted);
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.ui-journal-balance-badge.is-balanced {
  color: var(--ui-green-700);
  background: var(--ui-green-100);
  border-color: #bdebd0;
  transform: scale(1.03);
}
.ui-journal-balance-badge.is-unbalanced {
  color: var(--ui-amber-700);
  background: var(--ui-amber-100);
  border-color: #f3d68d;
}
html.dark .ui-journal-balance-badge.is-balanced { color: #8ce2b6; background: rgba(19, 112, 68, .2); border-color: rgba(61, 173, 112, .32); }
html.dark .ui-journal-balance-badge.is-unbalanced { color: #f4c373; background: rgba(163, 84, 9, .2); border-color: rgba(196, 112, 23, .35); }
.ui-journal-total-row {
  min-height: 43px;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--ui-surface-soft) 78%, transparent);
  border: 1px solid var(--ui-border);
  border-radius: 11px;
}
.ui-journal-total-row dt { color: var(--ui-text-muted); font-size: 11px; }
.ui-journal-total-row dd { margin: 0; color: var(--ui-text); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ui-journal-total-row--difference { background: transparent; border-style: dashed; }
.ui-journal-lines-section { max-width: 100%; }
.ui-journal-lines .ui-table-scroll { overflow-y: visible; }
.ui-journal-lines .ui-data-table tbody tr.has-debit { box-shadow: inset -3px 0 0 color-mix(in srgb, var(--ui-blue-500) 72%, transparent); }
.ui-journal-lines .ui-data-table tbody tr.has-credit { box-shadow: inset -3px 0 0 color-mix(in srgb, var(--ui-green-700) 66%, transparent); }
.ui-journal-lines .ui-control:disabled { opacity: .58; }
.ui-journal-lines .je_remove_line:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

@media (max-width: 900px) {
  .ui-journal-lines.ui-table-editor.ui-table-cards tbody tr::before { content: "بند القيد " counter(ui-editor-row); }
  .ui-journal-lines .ui-data-table tbody tr.has-debit,
  .ui-journal-lines .ui-data-table tbody tr.has-credit { box-shadow: var(--ui-shadow-xs); }
  .ui-journal-lines .ui-data-table tbody tr.has-debit::before { box-shadow: inset -4px 0 0 var(--ui-blue-500); }
  .ui-journal-lines .ui-data-table tbody tr.has-credit::before { box-shadow: inset -4px 0 0 var(--ui-green-700); }
}

@media (max-width: 767px) {
  .ui-journal-overview { gap: 12px; }
  .ui-journal-lines-section { margin-block-start: 14px; padding: 13px; }
  .ui-journal-lines-header { align-items: stretch; flex-direction: column; }
  .ui-journal-lines-header .ui-btn { width: 100%; }
  .ui-journal-total-row { min-height: 46px; }
}

/* --------------------------------------------------------------------------
   Premium UI v3: visual chart of accounts
   -------------------------------------------------------------------------- */
.ui-account-tree-workspace {
  --tree-line: color-mix(in srgb, var(--ui-blue-500) 25%, var(--ui-border));
  position: relative;
  overflow: hidden;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  box-shadow: var(--ui-shadow-sm);
}
.ui-account-tree-workspace::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--ui-blue-600), var(--ui-teal-600), var(--ui-purple-700));
}
.ui-account-tree-toolbar {
  position: relative;
  z-index: 1;
  padding: 22px 22px 18px;
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(230px, .8fr) minmax(150px, .42fr) auto;
  align-items: center;
  gap: 12px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ui-blue-100) 74%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-soft) 86%, var(--ui-surface)), var(--ui-surface));
  border-block-end: 1px solid var(--ui-border);
}
html.dark .ui-account-tree-toolbar {
  background:
    radial-gradient(circle at 100% 0, rgba(47,126,230,.14), transparent 43%),
    linear-gradient(180deg, #10233a, var(--ui-surface));
}
.ui-account-tree-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ui-account-tree-heading-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  color: var(--ui-blue-700);
  background: color-mix(in srgb, var(--ui-blue-100) 76%, var(--ui-surface));
  border: 1px solid color-mix(in srgb, var(--ui-blue-500) 20%, var(--ui-border));
  border-radius: 14px;
  box-shadow: var(--ui-shadow-xs);
}
html.dark .ui-account-tree-heading-icon { color: #9ac7ff; background: #163250; }
.ui-account-tree-heading h2 { margin: 0; color: var(--ui-text); font-size: 16px; font-weight: 800; }
.ui-account-tree-heading p { margin: 2px 0 0; color: var(--ui-text-muted); font-size: 11px; line-height: 1.55; }
.ui-account-tree-search-wrap {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
}
.ui-account-tree-search-wrap > svg {
  position: absolute;
  z-index: 2;
  inset-inline-start: 13px;
  color: var(--ui-text-muted);
  pointer-events: none;
}
.ui-account-tree-search-wrap input,
.ui-account-tree-filter {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
  border: 1px solid var(--ui-border-strong);
  border-radius: 12px;
  outline: 0;
  font: inherit;
  font-size: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ui-account-tree-search-wrap input { padding: 10px 40px 10px 38px; }
.ui-account-tree-filter { padding: 9px 12px; cursor: pointer; }
.ui-account-tree-search-wrap input:focus,
.ui-account-tree-filter:focus {
  border-color: var(--ui-blue-500);
  box-shadow: 0 0 0 3px var(--ui-focus);
  background: var(--ui-surface);
}
.ui-account-tree-search-wrap [data-account-tree-clear] {
  position: absolute;
  z-index: 2;
  inset-inline-end: 7px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--ui-text-muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ui-account-tree-search-wrap [data-account-tree-clear]:hover { color: var(--ui-red-700); background: var(--ui-red-100); }
.ui-account-tree-toolbar-actions { display: inline-flex; align-items: center; gap: 7px; }
.ui-account-tree-toolbar-actions button {
  min-height: 42px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--ui-text-soft);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 750;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.ui-account-tree-toolbar-actions button:hover {
  color: var(--ui-blue-700);
  background: var(--ui-blue-50);
  border-color: color-mix(in srgb, var(--ui-blue-500) 34%, var(--ui-border));
  transform: translateY(-1px);
}
html.dark .ui-account-tree-toolbar-actions button:hover { color: #9cc7ff; background: #142b47; }
.ui-account-tree-summary {
  position: relative;
  z-index: 1;
  padding: 11px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--ui-surface-soft) 84%, transparent);
  border-block-end: 1px solid var(--ui-border);
}
.ui-account-tree-summary > span {
  min-height: 29px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ui-text-muted);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  font-size: 10px;
  white-space: nowrap;
}
.ui-account-tree-summary strong { color: var(--ui-text); font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-account-tree-summary .is-warning { color: var(--ui-amber-700); background: var(--ui-amber-100); border-color: #f4d892; }
.ui-account-tree-summary .is-warning strong { color: inherit; }
.ui-account-tree-visible-count { margin-inline-start: auto; color: var(--ui-blue-700) !important; background: var(--ui-blue-50) !important; border-color: color-mix(in srgb, var(--ui-blue-500) 25%, var(--ui-border)) !important; }
.ui-account-tree-visible-count strong { color: inherit; }
html.dark .ui-account-tree-summary .is-warning { color: #f0bb68; background: rgba(163,84,9,.2); border-color: rgba(196,112,23,.35); }
html.dark .ui-account-tree-visible-count { color: #9cc7ff !important; background: #142b47 !important; }
.ui-account-tree-scroll {
  position: relative;
  padding: 18px 20px 22px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.ui-account-tree,
.ui-account-tree-children {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ui-account-tree { display: grid; gap: 10px; }
.ui-account-tree-node { --account-color: var(--ui-blue-600); --account-soft: var(--ui-blue-50); position: relative; min-width: 0; }
.ui-account-tree-node[hidden],
.ui-account-tree-children[hidden],
.ui-account-tree[hidden] { display: none !important; }
.ui-account-tree-node[data-account-type="asset"] { --account-color: #1f67d2; --account-soft: #eff6ff; }
.ui-account-tree-node[data-account-type="liability"] { --account-color: #b06a08; --account-soft: #fff7df; }
.ui-account-tree-node[data-account-type="equity"] { --account-color: #6941c6; --account-soft: #f3efff; }
.ui-account-tree-node[data-account-type="revenue"] { --account-color: #137044; --account-soft: #eaf9f0; }
.ui-account-tree-node[data-account-type="expense"] { --account-color: #b42318; --account-soft: #fff1f0; }
html.dark .ui-account-tree-node[data-account-type="asset"] { --account-color: #8cbcff; --account-soft: #142b47; }
html.dark .ui-account-tree-node[data-account-type="liability"] { --account-color: #f0bb68; --account-soft: rgba(163,84,9,.19); }
html.dark .ui-account-tree-node[data-account-type="equity"] { --account-color: #c4a7ff; --account-soft: rgba(105,65,198,.2); }
html.dark .ui-account-tree-node[data-account-type="revenue"] { --account-color: #83ddb0; --account-soft: rgba(19,112,68,.2); }
html.dark .ui-account-tree-node[data-account-type="expense"] { --account-color: #ff9c93; --account-soft: rgba(180,35,24,.19); }
.ui-account-tree-children {
  position: relative;
  margin-block-start: 8px;
  margin-inline-start: 35px;
  padding-inline-start: 27px;
  display: grid;
  gap: 8px;
  border-inline-start: 2px solid var(--tree-line);
}
.ui-account-tree-children > .ui-account-tree-node::before {
  content: "";
  position: absolute;
  inset-block-start: 29px;
  inset-inline-start: -27px;
  width: 26px;
  border-block-start: 2px solid var(--tree-line);
}
.ui-account-tree-children > .ui-account-tree-node:last-child::after {
  content: "";
  position: absolute;
  inset-block-start: 31px;
  inset-block-end: -10px;
  inset-inline-start: -29px;
  width: 4px;
  background: var(--ui-surface);
}
.ui-account-tree-row {
  position: relative;
  min-width: 680px;
  min-height: 70px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 68px minmax(230px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 15px;
  box-shadow: var(--ui-shadow-xs);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.ui-account-tree-row::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--account-color);
  opacity: .84;
}
.ui-account-tree > .ui-account-tree-node > .ui-account-tree-row {
  min-height: 78px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--account-soft) 46%, transparent)),
    var(--ui-surface);
  border-color: color-mix(in srgb, var(--account-color) 24%, var(--ui-border));
  box-shadow: 0 8px 22px rgba(15,35,66,.055);
}
.ui-account-tree-node:not(.is-filter-context) > .ui-account-tree-row:hover {
  border-color: color-mix(in srgb, var(--account-color) 42%, var(--ui-border));
  box-shadow: var(--ui-shadow-sm);
  transform: translateY(-1px);
}
.ui-account-tree-node.is-filter-context > .ui-account-tree-row { opacity: .72; border-style: dashed; }
.ui-account-tree-node.is-search-match > .ui-account-tree-row {
  border-color: color-mix(in srgb, var(--account-color) 70%, var(--ui-border));
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--account-soft) 84%, transparent)),
    var(--ui-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-color) 13%, transparent), var(--ui-shadow-sm);
}
.ui-account-tree-branch {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.ui-account-tree-toggle,
.ui-account-tree-leaf {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}
.ui-account-tree-toggle {
  color: var(--ui-text-muted);
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.ui-account-tree-toggle svg { transition: transform .18s ease; }
.ui-account-tree-node.is-expanded > .ui-account-tree-row .ui-account-tree-toggle svg { transform: rotate(180deg); }
.ui-account-tree-toggle:hover,
.ui-account-tree-toggle:focus-visible {
  color: var(--account-color);
  background: var(--account-soft);
  border-color: color-mix(in srgb, var(--account-color) 35%, var(--ui-border));
  outline: 0;
}
.ui-account-tree-leaf::before {
  content: "";
  width: 8px;
  height: 8px;
  background: color-mix(in srgb, var(--account-color) 55%, var(--ui-border));
  border: 2px solid var(--ui-surface);
  border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--account-color) 32%, var(--ui-border));
}
.ui-account-tree-type-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  color: var(--account-color);
  background: var(--account-soft);
  border: 1px solid color-mix(in srgb, var(--account-color) 21%, var(--ui-border));
  border-radius: 11px;
}
.ui-account-tree-copy { min-width: 0; }
.ui-account-tree-title-row { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.ui-account-tree-copy h3 { min-width: 0; margin: 0; color: var(--ui-text); font-size: 13px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.ui-account-tree-copy > p { margin: 3px 0 0; color: var(--ui-text-muted); font-size: 10.5px; line-height: 1.55; overflow-wrap: anywhere; }
.ui-account-code {
  min-height: 25px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  color: var(--account-color);
  background: var(--account-soft);
  border: 1px solid color-mix(in srgb, var(--account-color) 20%, var(--ui-border));
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.ui-account-children-count {
  min-height: 23px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  color: var(--ui-text-muted);
  background: var(--ui-surface-muted);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}
.ui-account-tree-meta { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.ui-account-tree-meta > span {
  min-height: 25px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 750;
}
.ui-account-type-chip { color: var(--account-color); background: var(--account-soft); border-color: color-mix(in srgb, var(--account-color) 20%, var(--ui-border)) !important; }
.ui-account-mode-chip.is-posting { color: var(--ui-blue-700); background: var(--ui-blue-50); }
.ui-account-mode-chip.is-group { color: var(--ui-purple-700); background: var(--ui-purple-100); }
.ui-account-status-chip.is-active { color: var(--ui-green-700); background: var(--ui-green-100); }
.ui-account-status-chip.is-inactive { color: var(--ui-red-700); background: var(--ui-red-100); }
html.dark .ui-account-mode-chip.is-posting { color: #9cc7ff; background: #142b47; }
html.dark .ui-account-mode-chip.is-group { color: #c4a7ff; background: rgba(105,65,198,.2); }
html.dark .ui-account-status-chip.is-active { color: #83ddb0; background: rgba(19,112,68,.2); }
html.dark .ui-account-status-chip.is-inactive { color: #ff9c93; background: rgba(180,35,24,.2); }
.ui-account-tree-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  opacity: .38;
  transition: opacity .18s ease;
}
.ui-account-tree-row:hover .ui-account-tree-actions,
.ui-account-tree-row:focus-within .ui-account-tree-actions { opacity: 1; }
.ui-account-tree-actions form { margin: 0; display: contents; }
.ui-account-tree-empty {
  min-height: 250px;
  padding: 32px 20px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--ui-text-muted);
  text-align: center;
}
.ui-account-tree-empty > svg { color: var(--ui-blue-600); }
.ui-account-tree-empty strong { color: var(--ui-text); font-size: 14px; }
.ui-account-tree-empty span { font-size: 11px; }

@media (max-width: 1180px) {
  .ui-account-tree-toolbar { grid-template-columns: minmax(260px, 1fr) minmax(240px, .85fr); }
  .ui-account-tree-filter { grid-column: 1; }
  .ui-account-tree-toolbar-actions { grid-column: 2; justify-content: flex-end; }
}

@media (max-width: 767px) {
  .ui-account-tree-workspace { border-radius: 17px; }
  .ui-account-tree-toolbar { padding: 18px 13px 13px; grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .ui-account-tree-heading,
  .ui-account-tree-search-wrap,
  .ui-account-tree-filter,
  .ui-account-tree-toolbar-actions { grid-column: 1; }
  .ui-account-tree-heading { align-items: flex-start; }
  .ui-account-tree-heading-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .ui-account-tree-heading h2 { font-size: 15px; }
  .ui-account-tree-heading p { font-size: 10.5px; }
  .ui-account-tree-search-wrap input,
  .ui-account-tree-filter { min-height: 48px; font-size: 16px; }
  .ui-account-tree-toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-account-tree-toolbar-actions button { width: 100%; min-height: 44px; font-size: 11px; }
  .ui-account-tree-summary { padding: 9px 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ui-account-tree-summary::-webkit-scrollbar { display: none; }
  .ui-account-tree-visible-count { margin-inline-start: 0; }
  .ui-account-tree-scroll { padding: 12px 10px 16px; overflow: visible; }
  .ui-account-tree { gap: 9px; }
  .ui-account-tree-children { margin-inline-start: 13px; padding-inline-start: 12px; gap: 7px; border-inline-start-width: 1px; }
  .ui-account-tree-children > .ui-account-tree-node::before { inset-block-start: 28px; inset-inline-start: -12px; width: 11px; border-block-start-width: 1px; }
  .ui-account-tree-children > .ui-account-tree-node:last-child::after { inset-block-start: 29px; inset-inline-start: -14px; width: 4px; }
  .ui-account-tree-row,
  .ui-account-tree > .ui-account-tree-node > .ui-account-tree-row {
    min-width: 0;
    min-height: 0;
    padding: 11px 10px;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    border-radius: 14px;
  }
  .ui-account-tree-branch { grid-row: 1 / span 3; align-self: stretch; align-items: flex-start; padding-block-start: 1px; gap: 4px; }
  .ui-account-tree-toggle,
  .ui-account-tree-leaf { width: 24px; height: 24px; flex-basis: 24px; border-radius: 8px; }
  .ui-account-tree-type-icon { width: 31px; height: 31px; flex-basis: 31px; border-radius: 9px; }
  .ui-account-tree-type-icon svg { width: 17px; height: 17px; }
  .ui-account-tree-copy { grid-column: 2; }
  .ui-account-tree-copy h3 { font-size: 12.5px; }
  .ui-account-tree-copy > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ui-account-tree-meta { grid-column: 2; justify-content: flex-start; }
  .ui-account-tree-meta > span { min-height: 23px; padding: 2px 7px; }
  .ui-account-tree-actions { grid-column: 2; justify-content: flex-start; opacity: 1; }
  .ui-account-tree-actions .ui-icon-btn { width: 38px; height: 38px; }
  .ui-account-tree-node.is-filter-context > .ui-account-tree-row { opacity: .78; }
}

@media (max-width: 420px) {
  .ui-account-tree-toolbar-actions { grid-template-columns: minmax(0, 1fr); }
  .ui-account-tree-children { margin-inline-start: 7px; padding-inline-start: 8px; }
  .ui-account-tree-children > .ui-account-tree-node::before { inset-inline-start: -8px; width: 7px; }
  .ui-account-tree-children > .ui-account-tree-node:last-child::after { inset-inline-start: -10px; }
  .ui-account-tree-row,
  .ui-account-tree > .ui-account-tree-node > .ui-account-tree-row { grid-template-columns: 50px minmax(0, 1fr); padding-inline: 8px; }
  .ui-account-tree-branch { gap: 2px; }
  .ui-account-tree-toggle,
  .ui-account-tree-leaf { width: 22px; height: 22px; flex-basis: 22px; }
  .ui-account-tree-type-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .ui-account-tree-title-row { gap: 5px; }
  .ui-account-children-count { display: none; }
}


/* Audit hardening: enforce Cairo consistently across generated controls and third-party widgets. */
.accounting-app,
.auth-app,
.choices,
.choices__inner,
.choices__input,
.choices__list,
.flatpickr-calendar,
.apexcharts-text,
.apexcharts-tooltip,
.apexcharts-legend-text,
button,
input,
select,
textarea {
  font-family: var(--app-font) !important;
}

@media print {
  body,
  table,
  input,
  select,
  textarea,
  button {
    font-family: var(--app-font) !important;
  }
}

/* Company Notification Center */
.app-notifications-wrap {
  position: relative;
}

.app-notification-button {
  position: relative;
}

.app-notification-button.has-critical {
  color: var(--app-danger);
  background: color-mix(in srgb, var(--app-danger-soft) 80%, var(--ui-surface));
  border-color: color-mix(in srgb, var(--app-danger) 30%, var(--ui-border));
}

.app-notification-badge {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-end: -6px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--app-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--ui-surface);
}

.app-notifications-menu {
  width: min(420px, calc(100vw - 24px));
  inset-inline-end: 0;
  overflow: hidden;
}

.app-notifications-head small {
  color: var(--ui-text-muted);
}

.app-notifications-list {
  max-height: 390px;
  overflow: auto;
  padding: 8px;
}

.app-notification-preview {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  color: var(--ui-text);
  text-decoration: none;
  transition: background var(--app-transition), border-color var(--app-transition), transform var(--app-transition);
}

.app-notification-preview:hover {
  background: var(--ui-surface-soft);
  border-color: var(--ui-border);
  transform: translateY(-1px);
}

.app-notification-preview strong,
.app-notifications-empty strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.app-notification-preview small,
.app-notifications-empty small {
  display: block;
  margin-top: 4px;
  color: var(--ui-text-muted);
  font-size: 12px;
  line-height: 1.7;
}

.app-notification-dot {
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--app-info);
  box-shadow: 0 0 0 4px var(--app-info-soft);
}

.app-notification-preview--critical .app-notification-dot {
  background: var(--app-danger);
  box-shadow: 0 0 0 4px var(--app-danger-soft);
}

.app-notification-preview--warning .app-notification-dot {
  background: var(--app-warning);
  box-shadow: 0 0 0 4px var(--app-warning-soft);
}

.app-notification-preview.is-read {
  opacity: .72;
}

.app-notifications-empty {
  margin: 10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--ui-surface-soft);
  border: 1px dashed var(--ui-border-strong);
}

.app-notifications-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface-soft);
}

.app-notifications-footer a,
.app-notifications-footer button {
  border: 0;
  background: transparent;
  color: var(--app-primary);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}

.notify-center {
  display: grid;
  gap: 18px;
}

.notify-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.notify-kpi {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--ui-border);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--app-primary-soft) 82%, transparent) 0, transparent 46%),
    var(--ui-surface);
  box-shadow: var(--ui-shadow-xs);
}

.notify-kpi::after {
  content: "";
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--app-primary) 14%, transparent);
}

.notify-kpi--critical::after { background: color-mix(in srgb, var(--app-danger) 16%, transparent); }
.notify-kpi--unread::after { background: color-mix(in srgb, var(--app-warning) 18%, transparent); }
.notify-kpi--snoozed::after { background: color-mix(in srgb, var(--ui-purple-700) 16%, transparent); }

.notify-kpi span,
.notify-kpi small {
  display: block;
  color: var(--ui-text-muted);
  font-size: 13px;
  font-weight: 700;
}

.notify-kpi strong {
  display: block;
  margin: 10px 0 8px;
  color: var(--ui-text);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  line-height: 1;
}

.notify-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface) 84%, var(--ui-surface-soft));
  box-shadow: var(--ui-shadow-xs);
}

.notify-status-tabs,
.notify-filter-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.notify-status-tab {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-soft);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.notify-status-tab.is-active {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: #fff;
}

.notify-filter-form label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.notify-filter-form select {
  min-height: 38px;
  min-width: 150px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface);
  color: var(--ui-text);
  padding: 6px 10px;
  font-weight: 700;
}

.notify-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.notify-list {
  display: grid;
  gap: 14px;
}

.notify-card {
  position: relative;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.notify-card.is-read {
  box-shadow: var(--ui-shadow-xs);
}

.notify-card.is-snoozed {
  opacity: .72;
}

.notify-card-priority {
  background: var(--app-info);
}

.notify-card--critical .notify-card-priority { background: var(--app-danger); }
.notify-card--warning .notify-card-priority { background: var(--app-warning); }
.notify-card--success .notify-card-priority { background: var(--app-success); }

.notify-card-main {
  padding: 18px;
}

.notify-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.notify-card-head h2 {
  margin: 9px 0 0;
  color: var(--ui-text);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 900;
  line-height: 1.35;
}

.notify-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.notify-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
  color: var(--ui-text-soft);
  font-size: 12px;
  font-weight: 800;
}

.notify-badge--critical {
  background: var(--app-danger-soft);
  border-color: color-mix(in srgb, var(--app-danger) 24%, var(--ui-border));
  color: var(--app-danger);
}

.notify-badge--warning {
  background: var(--app-warning-soft);
  border-color: color-mix(in srgb, var(--app-warning) 24%, var(--ui-border));
  color: var(--app-warning);
}

.notify-badge--info {
  background: var(--app-info-soft);
  border-color: color-mix(in srgb, var(--app-info) 24%, var(--ui-border));
  color: var(--app-info);
}

.notify-badge--success {
  background: var(--app-success-soft);
  border-color: color-mix(in srgb, var(--app-success) 24%, var(--ui-border));
  color: var(--app-success);
}

.notify-badge--new {
  background: var(--app-primary-soft);
  color: var(--app-primary);
}

.notify-badge--muted,
.notify-badge--audience {
  background: color-mix(in srgb, var(--ui-purple-100) 62%, var(--ui-surface));
  color: var(--ui-purple-700);
}

.notify-card-state {
  flex: 0 0 auto;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.notify-card-state strong {
  color: var(--app-danger);
}

.notify-message {
  margin: 13px 0 0;
  color: var(--ui-text-soft);
  font-size: 14px;
  line-height: 1.9;
}

.notify-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.notify-metrics span {
  padding: 12px;
  border-radius: 16px;
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-border);
}

.notify-metrics small,
.notify-metrics strong {
  display: block;
}

.notify-metrics small {
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.notify-metrics strong {
  margin-top: 4px;
  color: var(--ui-text);
  font-size: 15px;
  font-weight: 900;
}

.notify-details {
  display: grid;
  gap: 8px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.notify-details li {
  position: relative;
  padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-surface-soft) 80%, var(--ui-surface));
  border: 1px dashed var(--ui-border-strong);
  color: var(--ui-text-soft);
  font-size: 13px;
  line-height: 1.7;
}

.notify-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.notify-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-soft);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.notify-action--primary {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: #fff;
}

.notify-action--muted {
  color: var(--ui-text-muted);
}

.notify-insight-panel {
  position: sticky;
  top: calc(var(--ui-topbar-height) + 18px);
  display: grid;
  gap: 14px;
}

.notify-insight-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-xs);
}

.notify-insight-card--manager {
  background: linear-gradient(135deg, color-mix(in srgb, var(--app-danger-soft) 58%, var(--ui-surface)), var(--ui-surface));
}

.notify-insight-card--accountant {
  background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary-soft) 70%, var(--ui-surface)), var(--ui-surface));
}

.notify-insight-eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 900;
}

.notify-insight-card h3 {
  margin: 0;
  color: var(--ui-text);
  font-size: 17px;
  font-weight: 900;
}

.notify-insight-card p,
.notify-insight-card li {
  color: var(--ui-text-soft);
  font-size: 13px;
  line-height: 1.9;
}

.notify-insight-card ul {
  margin: 12px 0 0;
  padding-inline-start: 18px;
}

@media (max-width: 1180px) {
  .notify-layout {
    grid-template-columns: 1fr;
  }

  .notify-insight-panel {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .notify-kpi-grid,
  .notify-insight-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notify-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .notify-filter-form label,
  .notify-filter-form select {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .app-notifications-menu {
    inset-inline-end: -84px;
  }

  .notify-kpi-grid,
  .notify-metrics,
  .notify-insight-panel {
    grid-template-columns: 1fr;
  }

  .notify-card-head,
  .notify-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .notify-action,
  .notify-actions form {
    width: 100%;
  }
}

/* Smart notification center page */
.nc-page {
  display: grid;
  gap: 18px;
}

.nc-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--ui-border);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--app-primary-soft) 84%, transparent) 0, transparent 40%),
    linear-gradient(135deg, var(--ui-surface), color-mix(in srgb, var(--ui-surface-soft) 76%, var(--ui-surface)));
  box-shadow: var(--ui-shadow-sm);
}

.nc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--app-primary);
  background: var(--app-primary-soft);
  font-size: 12px;
  font-weight: 900;
}

.nc-hero h1 {
  margin: 12px 0 8px;
  color: var(--ui-text);
  font-size: clamp(25px, 4vw, 42px);
  font-weight: 950;
  letter-spacing: -.03em;
}

.nc-hero p {
  max-width: 820px;
  margin: 0;
  color: var(--ui-text-soft);
  font-size: 14px;
  line-height: 1.95;
}

.nc-hero-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.nc-btn,
.nc-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 15px;
  border-radius: 14px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-soft);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--app-transition), box-shadow var(--app-transition), border-color var(--app-transition), background var(--app-transition);
}

.nc-btn:hover,
.nc-link-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow-xs);
}

.nc-btn-primary {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: #fff;
}

.nc-btn-soft {
  background: var(--ui-surface-soft);
}

.nc-link-btn {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 11px;
  background: transparent;
  color: var(--app-primary);
}

.nc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.nc-stat-card {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-xs);
}

.nc-stat-card::after {
  content: "";
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--app-primary) 12%, transparent);
}

.nc-stat-card.is-critical::after {
  background: color-mix(in srgb, var(--app-danger) 15%, transparent);
}

.nc-stat-card span,
.nc-stat-card small {
  display: block;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.nc-stat-card strong {
  display: block;
  margin: 10px 0 8px;
  color: var(--ui-text);
  font-size: clamp(27px, 4vw, 40px);
  font-weight: 950;
  line-height: 1;
}

.nc-filter-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--ui-surface) 84%, var(--ui-surface-soft));
  box-shadow: var(--ui-shadow-xs);
}

.nc-filter-bar label {
  display: grid;
  gap: 7px;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 850;
}

.nc-filter-bar select {
  min-height: 42px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  color: var(--ui-text);
  padding: 8px 12px;
  font-weight: 800;
}

.nc-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nc-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.nc-feed {
  display: grid;
  gap: 14px;
}

.nc-alert-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.nc-alert-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 6px;
  background: var(--app-info);
}

.nc-alert-card.is-unread {
  border-color: color-mix(in srgb, var(--app-primary) 26%, var(--ui-border));
}

.nc-alert-card.is-snoozed {
  opacity: .72;
}

.nc-alert-head {
  display: grid;
  gap: 10px;
}

.nc-alert-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.nc-alert-head strong {
  color: var(--ui-text);
  font-size: clamp(17px, 2.3vw, 22px);
  font-weight: 950;
  line-height: 1.35;
}

.nc-severity,
.nc-category,
.nc-audience,
.nc-unread-dot,
.nc-snoozed {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-soft);
  color: var(--ui-text-soft);
  font-size: 12px;
  font-weight: 850;
}

.nc-severity-critical {
  background: var(--app-danger-soft);
  border-color: color-mix(in srgb, var(--app-danger) 28%, var(--ui-border));
  color: var(--app-danger);
}

.nc-severity-warning {
  background: var(--app-warning-soft);
  border-color: color-mix(in srgb, var(--app-warning) 28%, var(--ui-border));
  color: var(--app-warning);
}

.nc-severity-info {
  background: var(--app-info-soft);
  border-color: color-mix(in srgb, var(--app-info) 28%, var(--ui-border));
  color: var(--app-info);
}

.nc-severity-success {
  background: var(--app-success-soft);
  border-color: color-mix(in srgb, var(--app-success) 28%, var(--ui-border));
  color: var(--app-success);
}

.nc-unread-dot {
  background: var(--app-primary-soft);
  color: var(--app-primary);
}

.nc-snoozed {
  background: color-mix(in srgb, var(--ui-purple-100) 64%, var(--ui-surface));
  color: var(--ui-purple-700);
}

.nc-message {
  margin: 13px 0 0;
  color: var(--ui-text-soft);
  font-size: 14px;
  line-height: 1.95;
}

.nc-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.nc-metrics span {
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: var(--ui-surface-soft);
}

.nc-metrics small,
.nc-metrics strong {
  display: block;
}

.nc-metrics small {
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 850;
}

.nc-metrics strong {
  margin-top: 4px;
  color: var(--ui-text);
  font-size: 15px;
  font-weight: 950;
}

.nc-details {
  margin-top: 14px;
  border: 1px dashed var(--ui-border-strong);
  border-radius: 17px;
  background: color-mix(in srgb, var(--ui-surface-soft) 80%, var(--ui-surface));
}

.nc-details summary {
  padding: 11px 13px;
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.nc-details ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0 14px 14px 26px;
  color: var(--ui-text-soft);
  font-size: 13px;
  line-height: 1.75;
}

.nc-alert-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.nc-primary-actions,
.nc-secondary-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.nc-side-panel {
  position: sticky;
  top: calc(var(--ui-topbar-height) + 18px);
  display: grid;
  gap: 14px;
}

.nc-guide-card {
  padding: 18px;
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-xs);
}

.nc-guide-card.is-quiet {
  background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary-soft) 70%, var(--ui-surface)), var(--ui-surface));
}

.nc-guide-card h2 {
  margin: 0 0 8px;
  color: var(--ui-text);
  font-size: 17px;
  font-weight: 950;
}

.nc-guide-card p,
.nc-guide-card li {
  color: var(--ui-text-soft);
  font-size: 13px;
  line-height: 1.9;
}

.nc-guide-card ul {
  margin: 10px 0 0;
  padding-inline-start: 20px;
}

.nc-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nc-category-list a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-soft);
  color: var(--ui-text-soft);
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
}

.nc-empty {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 34px 20px;
  text-align: center;
  border: 1px dashed var(--ui-border-strong);
  border-radius: 24px;
  background: var(--ui-surface);
}

.nc-empty svg {
  color: var(--app-success);
}

.nc-empty h2 {
  margin: 12px 0 6px;
  color: var(--ui-text);
  font-size: 20px;
  font-weight: 950;
}

.nc-empty p {
  max-width: 520px;
  margin: 0 0 15px;
  color: var(--ui-text-muted);
  line-height: 1.8;
}

@media (max-width: 1180px) {
  .nc-workspace {
    grid-template-columns: 1fr;
  }

  .nc-side-panel {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .nc-hero {
    flex-direction: column;
  }

  .nc-hero-actions {
    justify-content: flex-start;
  }

  .nc-stats,
  .nc-side-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nc-filter-bar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .nc-stats,
  .nc-metrics,
  .nc-side-panel {
    grid-template-columns: 1fr;
  }

  .nc-alert-actions,
  .nc-primary-actions,
  .nc-secondary-actions,
  .nc-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .nc-btn,
  .nc-link-btn,
  .nc-alert-actions form {
    width: 100%;
  }
}

/* Dashboard notification decision strip */
.notify-dashboard-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 6% 0%, color-mix(in srgb, var(--app-warning-soft) 70%, transparent) 0, transparent 42%),
    var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.notify-dashboard-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.notify-dashboard-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--app-warning);
  background: var(--app-warning-soft);
  border: 1px solid color-mix(in srgb, var(--app-warning) 22%, var(--ui-border));
}

.notify-dashboard-kicker {
  display: block;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 900;
}

.notify-dashboard-strip h2 {
  margin: 3px 0 0;
  color: var(--ui-text);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 900;
}

.notify-dashboard-strip p {
  margin: 4px 0 0;
  color: var(--ui-text-soft);
  font-size: 13px;
  line-height: 1.75;
}

.notify-dashboard-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.notify-dashboard-item {
  display: block;
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-soft);
  color: var(--ui-text);
  text-decoration: none;
}

.notify-dashboard-item strong,
.notify-dashboard-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notify-dashboard-item strong {
  font-size: 13px;
  font-weight: 900;
}

.notify-dashboard-item small {
  margin-top: 4px;
  color: var(--ui-text-muted);
  font-size: 12px;
}

.notify-dashboard-item--critical {
  border-color: color-mix(in srgb, var(--app-danger) 26%, var(--ui-border));
  background: color-mix(in srgb, var(--app-danger-soft) 54%, var(--ui-surface));
}

.notify-dashboard-item--warning {
  border-color: color-mix(in srgb, var(--app-warning) 26%, var(--ui-border));
  background: color-mix(in srgb, var(--app-warning-soft) 54%, var(--ui-surface));
}

.notify-dashboard-action {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 13px;
  background: var(--app-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.notify-empty-state {
  border-radius: 24px;
  border: 1px dashed var(--ui-border-strong);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-xs);
}

@media (max-width: 1180px) {
  .notify-dashboard-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .notify-dashboard-strip { grid-template-columns: 1fr; }
  .notify-dashboard-action { justify-self: stretch; }
  .notify-dashboard-list { grid-template-columns: 1fr; }
}


/* Arabic native date-field direction normalization. */
.accounting-app input[type="date"] {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.accounting-app input[type="date"]::-webkit-datetime-edit,
.accounting-app input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: right !important;
}

.accounting-app input[type="date"]::-webkit-datetime-edit-day-field,
.accounting-app input[type="date"]::-webkit-datetime-edit-month-field,
.accounting-app input[type="date"]::-webkit-datetime-edit-year-field,
.accounting-app input[type="date"]::-webkit-datetime-edit-text {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* Keep the calendar icon on the visual left after isolating the native editor. */
.accounting-app .ui-control-wrap--date,
.accounting-app .ui-control-wrap--icon:has(> input[type="date"]) {
  direction: ltr;
}

.accounting-app .ui-control-wrap--date::after {
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  right: auto !important;
  left: 13px !important;
}

.accounting-app .ui-control-wrap--date > input[type="date"],
.accounting-app .ui-control-wrap--icon:has(> input[type="date"]) > input[type="date"] {
  padding-right: 12px !important;
  padding-left: 43px !important;
}

.accounting-app .ui-control-wrap--icon:has(> input[type="date"]) > .ui-control-icon {
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  right: auto !important;
  left: 12px !important;
}