/* Cairo (SIL Open Font License, see fonts/OFL-Cairo.txt), self-hosted from the Google Fonts release so the strict
 * Content-Security-Policy needs no change. Arabic and Latin subsets; regular 400, semibold 600 and bold 700. */
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/cairo-regular-400.woff") format("woff"); }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/cairo-semibold-600.woff") format("woff"); }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/cairo-bold-700.woff") format("woff"); }

/* Arabic interface: Cairo wherever the page font is used. English keeps the existing font. */
html[lang="ar"] {
  --font: "Cairo", system-ui, "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
}

/* ALFIDAONE Control Center — stylesheet.
   Logical properties (inline-start/end) are used throughout so the layout mirrors
   automatically when the interface switches to Arabic (RTL). */

:root {
  --navy-950: #07142a;
  --navy-900: #0b1d3a;
  --navy-800: #13294f;
  --navy-700: #1f3d70;
  --gold: #c9a349;
  --gold-strong: #b08a2e;
  --gold-soft: #f7f0de;
  --bg: #f5f8fd;
  --surface: #ffffff;
  --ink: #0b1f44;
  --muted: #64748b;
  --line: #e4ebf5;
  --primary: #1677ff;
  --pastel-blue: #e8f2ff;
  --pastel-green: #e5faf1;
  --pastel-purple: #f1e9ff;
  --pastel-orange: #fff1df;
  --pastel-pink: #ffe9f3;
  --pastel-red: #ffebee;
  --pastel-amber: #fff4d6;
  --pastel-teal: #e2f7f6;
  --pastel-violet: #ece8ff;
  --pastel-emerald: #e3f8ee;
  --pastel-sky: #e4f4ff;
  --success: #12805c;
  --success-bg: #e6f6ef;
  --warn: #9a5b00;
  --warn-bg: #fff4df;
  --danger: #b42318;
  --danger-bg: #fdecea;
  --info: #1d4ed8;
  --info-bg: #e8effd;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15, 28, 51, 0.05), 0 8px 24px rgba(15, 28, 51, 0.06);
  --drawer-closed: -100%;
  --font: system-ui, "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", "Helvetica Neue", Arial, sans-serif;
}

html[dir="rtl"] {
  --drawer-closed: 100%;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 26px;
  font-weight: 750;
}

h2 {
  font-size: 17px;
  font-weight: 700;
}

h3 {
  font-size: 15px;
  font-weight: 700;
}

a {
  color: var(--navy-700);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- Login ---------- */

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1000px 500px at 10% -10%, rgba(201, 163, 73, 0.22), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(31, 61, 112, 0.55), transparent 60%),
    linear-gradient(160deg, var(--navy-950), var(--navy-800));
}

.login-card {
  width: min(420px, 100%);
  background: var(--surface);
  border-radius: 22px;
  padding: 36px 32px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.login-card .brand-mark {
  width: 52px;
  height: 52px;
  font-size: 24px;
  margin-bottom: 18px;
}

.login-card h1 {
  font-size: 22px;
  margin-bottom: 6px;
}

.login-card .hint {
  color: var(--muted);
  margin: 0 0 22px;
}

.login-card .footnote {
  color: var(--muted);
  font-size: 12px;
  margin-top: 22px;
  text-align: center;
}

/* ---------- Brand ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-weight: 800;
  color: var(--navy-950);
  background: linear-gradient(135deg, #e8cf8a, var(--gold) 55%, var(--gold-strong));
  box-shadow: 0 6px 18px rgba(201, 163, 73, 0.35);
}

.brand-logo {
  display: block;
  height: auto;
  max-width: 100%;
}

.brand-login {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.brand-login .brand-logo {
  width: 210px;
}

.sidebar .brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar .brand-text .brand-logo {
  width: 168px;
}

.brand-mark-img {
  display: none;
  width: 34px;
  height: auto;
}

.brand-name {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 15px;
}

.brand-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ---------- Shell ---------- */

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 264px;
  flex: 0 0 264px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  overflow-y: auto;
  color: var(--ink);
  background: var(--surface);
  border-inline-end: 1px solid rgba(15, 28, 51, 0.08);
  z-index: 40;
}

.sidebar .brand-name {
  color: var(--ink);
}

.sidebar .brand-sub {
  color: #5b6b85;
}

.nav {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nav-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7a8aa5;
  padding: 0 12px 6px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #1f2d45;
  font-weight: 550;
  border-inline-start: 3px solid transparent;
  cursor: pointer;
}

.nav-link:hover {
  background: rgba(15, 28, 51, 0.05);
  text-decoration: none;
  color: var(--ink);
}

.nav-link.active {
  background: rgba(201, 163, 73, 0.14);
  color: var(--navy-950);
  border-inline-start-color: var(--gold);
}

.nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b5c0d3;
  flex: 0 0 auto;
}

.nav-link.active .nav-dot {
  background: var(--gold);
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 12px 0;
  border-top: 1px solid rgba(15, 28, 51, 0.08);
  font-size: 13px;
}

.sidebar-footer .user-name {
  color: var(--ink);
  font-weight: 650;
}

.sidebar-footer .user-role {
  color: #5b6b85;
  font-size: 12px;
  margin-bottom: 10px;
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
}

.topbar-spacer {
  flex: 1;
}

.content {
  padding: 28px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.page-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.head-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

.btn:hover {
  background: #f8fafc;
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

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

.btn-primary:hover {
  background: var(--navy-700);
}

.btn-gold {
  background: linear-gradient(135deg, #e8cf8a, var(--gold));
  border-color: var(--gold-strong);
  color: var(--navy-950);
}

.btn-danger {
  color: var(--danger);
  border-color: #f5c2bd;
  background: #fff;
}

.btn-danger:hover {
  background: var(--danger-bg);
}

.btn-sm {
  min-height: 30px;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 8px;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
}

.btn-ghost:hover {
  background: rgba(15, 28, 51, 0.06);
}

.lang-toggle {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  color: var(--navy-800);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--navy-950);
  background: var(--gold-soft);
  border: 1px solid #ead9a6;
}

.menu-toggle {
  display: none;
}

.search {
  position: relative;
  min-width: 240px;
  flex: 1;
  max-width: 420px;
}

input,
select,
textarea {
  font: inherit;
  color: var(--ink);
}

.input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfd8e6;
  border-radius: var(--radius-sm);
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 163, 73, 0.2);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field label,
.field .label {
  font-size: 13px;
  font-weight: 650;
  color: #34445e;
}

.field .hint-text {
  font-size: 12px;
  color: var(--muted);
}

.field .error {
  font-size: 12px;
  color: var(--danger);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #e9a29c;
}

.field-check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.field-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--navy-800);
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.toolbar select {
  width: auto;
  min-width: 150px;
  padding: 8px 10px;
}

/* ---------- Cards & layout ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  min-width: 0;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.card-head small {
  color: var(--muted);
}

.grid-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
  align-items: stretch;
}

.kpi {
  position: relative;
  overflow: hidden;
}

.kpi::after {
  content: "";
  position: absolute;
  inset-inline-end: -24px;
  top: -24px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--gold-soft);
  opacity: 0.8;
}

.kpi .label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.kpi .value {
  font-size: 24px;
  font-weight: 780;
  margin-top: 6px;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.kpi .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.kpi.alert .value {
  color: var(--danger);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-title {
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ---------- Tables ---------- */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.data th,
table.data td {
  padding: 12px 14px;
  text-align: start;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
}

table.data th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: #fafbfd;
  font-weight: 700;
}

table.data tbody tr:last-child td {
  border-bottom: none;
}

table.data tbody tr.clickable {
  cursor: pointer;
}

table.data tbody tr.clickable:hover {
  background: #f8fafc;
}

table.data td.num,
table.data th.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

table.data.compact th,
table.data.compact td {
  padding: 10px 12px;
}

table.data th.actions-cell,
table.data td.actions-cell {
  position: sticky;
  inset-inline-end: 0;
  background: var(--surface);
  box-shadow: -8px 0 12px -12px rgba(15, 28, 51, 0.25);
  z-index: 1;
}

html[dir="rtl"] table.data th.actions-cell,
html[dir="rtl"] table.data td.actions-cell {
  box-shadow: 8px 0 12px -12px rgba(15, 28, 51, 0.25);
}

table.data td.wrap {
  white-space: normal;
  min-width: 220px;
  max-width: 420px;
}

.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
  flex-wrap: wrap;
}

.pager-buttons {
  display: flex;
  gap: 8px;
}

.empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
}

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  background: #eef2f7;
  color: #3b4a63;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.badge-success {
  background: var(--success-bg);
  color: var(--success);
}

.badge-warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.badge-info {
  background: var(--info-bg);
  color: var(--info);
}

.badge-gold {
  background: var(--gold-soft);
  color: #7a5c16;
}

/* ---------- Detail view ---------- */

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px 24px;
}

.detail-item dt {
  font-size: 12px;
  color: var(--muted);
  font-weight: 650;
  margin-bottom: 3px;
}

.detail-item dd {
  margin: 0;
  font-weight: 560;
  word-break: break-word;
  white-space: pre-wrap;
}

.kv-note {
  white-space: pre-wrap;
  background: #fafbfd;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 6px;
}

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bubble {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
}

.bubble.internal {
  background: #fffbeb;
  border-color: #f3e3a6;
}

.bubble-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.bubble-body {
  white-space: pre-wrap;
}

/* ---------- Charts ---------- */

.hbars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hbar-row {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}

.hbar-track {
  height: 10px;
  border-radius: 999px;
  background: #edf1f7;
  overflow: hidden;
}

.hbar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.hbar-fill.gold {
  background: #f5b041;
}

.hbar-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.columns {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 220px;
  padding-top: 10px;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.column-bar {
  width: 100%;
  max-width: 56px;
  border-radius: 10px 10px 4px 4px;
  background: var(--primary);
  min-height: 3px;
}

.column-value {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.column-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #f7f9fc;
  border: 1px solid var(--line);
  min-width: 140px;
}

.chip strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.progress {
  height: 8px;
  border-radius: 999px;
  background: #edf1f7;
  overflow: hidden;
  margin-top: 6px;
}

.progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #34b38b, var(--success));
  border-radius: inherit;
}

.list-plain {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.list-plain li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.list-plain li:last-child {
  border-bottom: none;
}

.list-plain .muted {
  color: var(--muted);
  font-size: 12px;
}

/* ---------- Modal & toast ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 20, 42, 0.55);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 100;
  animation: fade 0.15s ease-out;
}

.modal {
  width: min(760px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  padding: 24px;
  animation: rise 0.2s ease-out;
}

.modal.narrow {
  width: min(460px, 100%);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.form-grid .span-2 {
  grid-column: 1 / -1;
}

.form-alert {
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 14px;
}

.toast-root {
  position: fixed;
  inset-inline-end: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
}

.toast {
  min-width: 260px;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: 12px;
  color: #fff;
  background: var(--navy-900);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  animation: rise 0.2s ease-out;
  font-weight: 550;
}

.toast.error {
  background: var(--danger);
}

.toast.success {
  background: var(--success);
}

.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
  margin: 40px auto;
}

.scrim {
  display: none;
}

.access-denied {
  text-align: center;
  padding: 80px 20px;
  color: var(--muted);
}

.access-denied h2 {
  color: var(--ink);
  margin-bottom: 8px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Responsive ---------- */

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

@media (max-width: 960px) {
  .shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    transform: translateX(var(--drawer-closed));
    transition: transform 0.22s ease;
    box-shadow: 0 0 60px rgba(15, 28, 51, 0.18);
  }

  .shell.nav-open .sidebar {
    transform: translateX(0);
  }

  .shell.nav-open .scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(7, 20, 42, 0.45);
    z-index: 35;
  }

  .menu-toggle {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 12px 16px;
  }

  .content {
    padding: 18px 14px;
  }

  .topbar-title {
    display: none;
  }
}

@media (max-width: 640px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .search {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .user-chip .user-text {
    display: none;
  }

  h1 {
    font-size: 22px;
  }
}

/* ===========================================================================
   Sidebar v2 — light, multi-level, collapsible, searchable navigation
   =========================================================================== */

.sidebar {
  overflow: hidden;
  padding: 20px 14px 14px;
  border-inline-end: 1px solid var(--line);
  transition: width 0.22s ease, flex-basis 0.22s ease;
}

.sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 16px;
}

.brand-text {
  min-width: 0;
}

.sb-toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--navy-800);
  cursor: pointer;
}

.sb-toggle:hover {
  background: var(--bg);
}

.sb-toggle svg {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.sb-toggle[aria-expanded="false"] svg {
  transform: none;
}

html[dir="rtl"] .sb-toggle svg {
  transform: none;
}

html[dir="rtl"] .sb-toggle[aria-expanded="false"] svg {
  transform: rotate(180deg);
}

.sb-search {
  margin: 0 2px 12px;
}

.sb-search { position: relative; }

.sb-kbd {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.sb-search:focus-within .sb-kbd { display: none; }

@media (max-width: 960px), (pointer: coarse) {
  .sb-kbd { display: none; }
}

.sb-search .input {
  padding-inline-end: 62px;
  height: 38px;
  font-size: 14px;
  background: var(--bg);
  border-color: transparent;
}

.nav {
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 2px 8px;
  scrollbar-width: thin;
}

.nav [hidden],
.nav-group[hidden],
.nav-item[hidden],
.nav-link[hidden] {
  display: none !important;
}

.nav-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 14px 10px;
  margin: 0;
}

.nav-group-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 10px 6px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a8aa5;
  text-align: start;
}

.nav-group-title:hover {
  color: var(--ink);
}

.nav-group-body,
.nav-sub {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.24s ease;
}

.nav-group-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-sub-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-start: 30px;
  position: relative;
}

.nav-sub-inner::before {
  content: "";
  position: absolute;
  inset-block: 2px;
  inset-inline-start: 19px;
  width: 1px;
  background: var(--line);
}

.nav-group[data-open="false"]:not(.force-open) .nav-group-body,
.nav-item[data-open="false"]:not(.force-open) .nav-sub {
  grid-template-rows: 0fr;
}

.nav-item {
  display: flex;
  flex-direction: column;
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-row .nav-link {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-caret {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #7a8aa5;
  cursor: pointer;
}

.nav-caret:hover {
  background: rgba(15, 28, 51, 0.06);
  color: var(--ink);
}

.nav-chev svg,
.nav-caret svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
  transform: rotate(90deg);
}

.nav-group[data-open="false"]:not(.force-open) .nav-chev svg,
.nav-item[data-open="false"]:not(.force-open) .nav-caret svg {
  transform: rotate(0deg);
}

.nav-link {
  min-height: 40px;
  text-decoration: none;
  font-size: 14px;
}

.nav-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #55688a;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link.active .nav-icon {
  color: var(--gold-strong);
}

.nav-link.active {
  font-weight: 650;
  color: var(--navy-950);
}

.nav-link-sub {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: #4b5b77;
}

.nav-link-sub.active {
  color: var(--navy-950);
}

.sidebar-footer {
  padding: 14px 4px 0;
  border-top: 1px solid var(--line);
}

.sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: 10px;
}

.sb-user .user-meta {
  min-width: 0;
}

.sb-user .user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sb-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sb-action-icon {
  display: inline-grid;
  place-items: center;
}

.sb-action-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-tip {
  position: fixed;
  transform: translateY(-50%);
  z-index: 90;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--navy-900);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 8px 20px rgba(15, 28, 51, 0.18);
  transition: opacity 0.12s ease;
}

.nav-tip.show {
  opacity: 1;
}

/* Icon-only mode exists on desktop only; the mobile drawer always shows labels. */
@media (min-width: 961px) {
  .sidebar.is-collapsed {
    width: 80px;
    flex-basis: 80px;
    padding: 20px 10px 12px;
  }

  .sidebar.is-collapsed .sb-head {
    flex-direction: column;
    gap: 12px;
    padding: 2px 0 14px;
  }

  .sidebar.is-collapsed .brand {
    justify-content: center;
  }

  .sidebar.is-collapsed .brand-mark-img {
    display: block;
  }

  .sidebar.is-collapsed .brand-text,
  .sidebar.is-collapsed .sb-search,
  .sidebar.is-collapsed .nav-label,
  .sidebar.is-collapsed .nav-chev,
  .sidebar.is-collapsed .nav-caret,
  .sidebar.is-collapsed .nav-sub,
  .sidebar.is-collapsed .nav-empty,
  .sidebar.is-collapsed .sb-user .user-meta,
  .sidebar.is-collapsed .btn-label {
    display: none !important;
  }

  .sidebar.is-collapsed .nav-group-title {
    height: 12px;
    padding: 0;
    font-size: 0;
  }

  .sidebar.is-collapsed .nav-group + .nav-group {
    margin-top: 10px;
  }

  .sidebar.is-collapsed .nav-link {
    justify-content: center;
    padding: 10px 0;
  }

  .sidebar.is-collapsed .nav-link.active {
    background: rgba(201, 163, 73, 0.16);
  }

  .sidebar.is-collapsed .nav-row {
    display: block;
  }

  .sidebar.is-collapsed .sidebar-footer {
    padding-top: 12px;
  }

  .sidebar.is-collapsed .sb-user {
    justify-content: center;
  }

  .sidebar.is-collapsed .sb-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sidebar.is-collapsed .sb-action {
    justify-content: center;
    padding: 8px 0;
  }
}

@media (max-width: 960px) {
  .sb-toggle {
    display: none;
  }
}

/* ===========================================================================
   Dashboard v2 — period filter, KPI cards, trends and charts
   =========================================================================== */

.dash-head {
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.seg {
  min-height: 34px;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.seg:hover {
  color: var(--ink);
  background: rgba(15, 28, 51, 0.04);
}

.seg.active {
  background: var(--navy-800);
  color: #fff;
}

.seg:focus-visible,
.kpi-card:focus-visible {
  outline: 3px solid rgba(201, 163, 73, 0.55);
  outline-offset: 2px;
}

.range-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 14px;
}

.range-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.range-form .input {
  min-width: 160px;
}

.period-line {
  margin: -4px 0 16px;
  color: var(--muted);
  font-size: 13px;
}

.kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  height: 100%;
  padding: 18px 18px 16px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Accent rule along the card's top edge, in the logical start direction for both LTR and RTL. */
.kpi-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--a);
  opacity: 0.85;
}

.kpi-card {
  --a: #1677ff;
  --a-bg: var(--pastel-blue);
}
.kpi-blue { --a: #1677ff; --a-bg: var(--pastel-blue); }
.kpi-green { --a: #12a150; --a-bg: var(--pastel-green); }
.kpi-amber { --a: #d98b00; --a-bg: var(--pastel-amber); }
.kpi-purple { --a: #7c3aed; --a-bg: var(--pastel-purple); }
.kpi-red { --a: #dc2626; --a-bg: var(--pastel-red); }
.kpi-pink { --a: #db2777; --a-bg: var(--pastel-pink); }
.kpi-emerald { --a: #059669; --a-bg: var(--pastel-emerald); }
.kpi-orange { --a: #ea580c; --a-bg: var(--pastel-orange); }
.kpi-sky { --a: #0284c7; --a-bg: var(--pastel-sky); }
.kpi-teal { --a: #0d9488; --a-bg: var(--pastel-teal); }
.kpi-violet { --a: #6d5dfc; --a-bg: var(--pastel-violet); }

.kpi-card:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}
.kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--a);
  box-shadow: 0 14px 30px rgba(15, 28, 51, 0.12);
  text-decoration: none;
}

.kpi-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.kpi-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: var(--a-bg);
  color: var(--a);
}

.kpi-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kpi-card .kpi-label {
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  min-width: 0;
  line-height: 1.3;
  /* At the narrowest required width (320px) a KPI card's label column is only ~71px wide; English
     only wraps at word boundaries by default, so a single long word ("Subscriptions",
     "Outstanding") that doesn't fit on its own line overflowed the card instead of wrapping.
     Arabic strings in the same column happened not to trigger this, which is why it surfaced only
     in English during this round's sweep. `.kpi-value-text` already uses the same property below
     for the same reason. */
  overflow-wrap: anywhere;
}

.kpi-card .kpi-value {
  font-size: 26px;
  font-weight: 780;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.kpi-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 12px;
  color: var(--muted);
}

.kpi-sub {
  min-width: 0;
}

/* Comparison meter: this period vs the previous period, both drawn to one shared scale. */
.kpi-meter {
  margin-top: auto;
  display: grid;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.kpi-meter-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(40px, 1fr) max-content;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.kpi-meter-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.kpi-meter-track {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.kpi-meter-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: 999px;
  background: var(--a);
}

.kpi-meter-row.is-previous .kpi-meter-fill {
  background: var(--a-bg);
  box-shadow: inset 0 0 0 1px var(--a);
}

.kpi-meter-val {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
}

.kpi-meter-empty {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

/* Four KPIs per row on wide screens, three on tablets, two on phones. */
@media (max-width: 1180px) {
  .grid-kpi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.trend {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.trend-up {
  background: var(--success-bg);
  color: var(--success);
}

.trend-down {
  background: var(--danger-bg);
  color: var(--danger);
}

.trend-flat {
  background: var(--bg);
  color: var(--muted);
}


.trend-total {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.tbars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 170px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}

.tbar {
  flex: 1 1 0;
  min-width: 3px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.tbar-fill {
  width: 100%;
  min-height: 0;
  border-radius: 4px 4px 0 0;
  background: var(--primary);
}

.tbars-axis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .grid-kpi {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .kpi-card {
    padding: 14px 12px 12px;
    gap: 10px;
  }

  /* Phone cards are narrow. The label takes a full-width line and the bar and figure sit beneath it,
     so labels wrap at word breaks instead of splitting inside a word. */
  .kpi-meter-row {
    grid-template-columns: minmax(40px, 1fr) auto;
    grid-template-areas: "name name" "track val";
    gap: 4px 6px;
    font-size: 11px;
  }

  .kpi-meter-name {
    grid-area: name;
    overflow-wrap: break-word;
  }

  .kpi-meter-track {
    grid-area: track;
  }

  .kpi-meter-val {
    grid-area: val;
  }

  .kpi-card .kpi-value {
    font-size: 19px;
  }

  .kpi-card .kpi-label {
    font-size: 12px;
  }

  .kpi-icon {
    width: 34px;
    height: 34px;
  }

  .tbars {
    height: 130px;
  }

  .segmented {
    width: 100%;
  }

  .seg {
    flex: 1 1 auto;
    padding: 7px 8px;
  }
}

/* ---- Sidebar visual design (approved reference) -------------------------------------------
   Three levels: section heading, primary menu (coloured icon tile), submenu (connector lines).
   Each section has its own accent and pastel tint. Behaviour is unchanged. */
.sidebar {
  background: #ffffff;
}

.nav-group {
  --t-accent: #2563eb;
  --t-tint: #eef4ff;
  --t-strong: #d6e6ff;
  --t-line: rgba(37, 99, 235, 0.35);
  margin-bottom: 2px;
}
.nav-group.nav-tone-0 { --t-accent: #2563eb; --t-tint: #eef4ff; --t-strong: #d6e6ff; --t-line: rgba(37, 99, 235, 0.35); }
.nav-group.nav-tone-1 { --t-accent: #3b82f6; --t-tint: #eff6ff; --t-strong: #dbeafe; --t-line: rgba(59, 130, 246, 0.35); }
.nav-group.nav-tone-2 { --t-accent: #7c3aed; --t-tint: #f5f0ff; --t-strong: #ebe0ff; --t-line: rgba(124, 58, 237, 0.35); }
.nav-group.nav-tone-3 { --t-accent: #e11d68; --t-tint: #fdf0f6; --t-strong: #fbdcea; --t-line: rgba(225, 29, 104, 0.35); }
.nav-group.nav-tone-4 { --t-accent: #f97316; --t-tint: #fff6ee; --t-strong: #ffe6d1; --t-line: rgba(249, 115, 22, 0.35); }
.nav-group.nav-tone-5 { --t-accent: #dc2626; --t-tint: #fef2f2; --t-strong: #fde0e0; --t-line: rgba(220, 38, 38, 0.35); }
.nav-group.nav-tone-6 { --t-accent: #16a34a; --t-tint: #effbf3; --t-strong: #d8f5e2; --t-line: rgba(22, 163, 74, 0.35); }
.nav-group.nav-tone-7 { --t-accent: #2563eb; --t-tint: #eef4ff; --t-strong: #d6e6ff; --t-line: rgba(37, 99, 235, 0.35); }
.nav-group.nav-tone-8 { --t-accent: #f43f5e; --t-tint: #fff1f3; --t-strong: #ffdde3; --t-line: rgba(244, 63, 94, 0.35); }
.nav-group.nav-tone-9 { --t-accent: #475569; --t-tint: #f1f4f8; --t-strong: #dfe5ee; --t-line: rgba(71, 85, 105, 0.35); }

.nav-group-title {
  color: #64748b;
  padding: 16px 10px 6px;
}

/* Primary menu: coloured tile icon, rounded row */
.nav-row .nav-link,
.nav-link {
  border-radius: 12px;
  padding: 5px 8px;
  min-height: 44px;
  color: #0f1c33;
  font-weight: 600;
  gap: 10px;
}
.nav-link:hover {
  background: rgba(15, 28, 51, 0.04);
}
.nav-link .nav-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--t-accent);
  color: #ffffff;
  box-shadow: 0 6px 12px -8px var(--t-accent);
}
.nav-link .nav-icon svg {
  width: 17px;
  height: 17px;
}
.nav-link.active .nav-icon {
  color: #ffffff;
}
.nav-link.active {
  background: var(--t-strong);
  color: #0a1a33;
  font-weight: 700;
}

/* Expanded menu: pastel block that belongs to its section */
.nav-item[data-open="true"] {
  background: var(--t-tint);
  border-radius: 14px;
  padding-bottom: 6px;
}
.nav-item[data-open="true"] .nav-caret {
  color: var(--t-accent);
}

/* Submenu: connector line and short branches */
.nav-sub-inner {
  padding-inline-start: 40px;
  padding-inline-end: 8px;
  gap: 0;
}
.nav-sub-inner::before {
  inset-block: 4px;
  inset-inline-start: 25px;
  width: 2px;
  border-radius: 2px;
  background: var(--t-line);
}
.nav-link-sub {
  position: relative;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  color: #334766;
  font-size: 13.5px;
  font-weight: 500;
}
.nav-link-sub::before {
  content: "";
  position: absolute;
  inset-inline-start: -21px;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--t-line);
}
.nav-link-sub .nav-dot {
  width: 7px;
  height: 7px;
  background: var(--t-accent);
}
.nav-link-sub:hover {
  background: rgba(255, 255, 255, 0.7);
}
.nav-link-sub.active {
  background: #ffffff;
  color: #0a1a33;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(15, 28, 51, 0.08);
}
.nav-link-sub.active .nav-dot {
  background: var(--t-accent);
  box-shadow: 0 0 0 3px var(--t-tint);
}

/* Sidebar icon system: primary tiles 18px glyphs, submenu glyphs 14px in small section-coloured chips */
.nav-link .nav-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.nav-link-sub .nav-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--t-accent);
  border: 1px solid var(--t-line);
  box-shadow: none;
}
.nav-link-sub .nav-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}
.nav-link-sub.active .nav-icon {
  background: var(--t-accent);
  color: #ffffff;
  border-color: transparent;
}
.nav-link-sub:hover .nav-icon {
  border-color: var(--t-accent);
}

.nav-link-sub {
  gap: 8px;
  white-space: normal;
}

/* ---------------------------------------------------------------------------
   Full-page create and edit forms (main content area; sidebar and header stay visible)
   --------------------------------------------------------------------------- */
.form-page {
  max-width: 980px;
  margin-inline: auto;
  min-width: 0;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #64748b;
}
.crumbs a {
  color: #475569;
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--t-accent, #2563eb);
  text-decoration: underline;
}
.crumbs [aria-current="page"] {
  color: #0f1c33;
  font-weight: 650;
}
.crumb-sep {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
[dir="rtl"] .crumb-sep {
  transform: scaleX(-1);
}
.form-head {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}
.form-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.form-title-wrap h1 {
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.form-title-wrap p {
  margin: 2px 0 0;
}
.form-title-icon,
.fs-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--t-accent, #2563eb);
  color: #ffffff;
  box-shadow: 0 6px 12px -8px var(--t-accent, #2563eb);
}
.form-title-icon {
  width: 44px;
  height: 44px;
}
.fs-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}
.form-title-icon svg,
.fs-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fs-icon svg {
  width: 16px;
  height: 16px;
}
.form-body {
  display: grid;
  gap: 16px;
}
.form-section {
  padding: 0;
  overflow: hidden;
  border-color: var(--t-line, #e2e8f0);
}
.form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--t-tint, #f5f7fb);
  border-bottom: 1px solid var(--t-line, #e2e8f0);
}
.form-section-head h2 {
  margin: 0;
  font-size: 15px;
  color: #0f1c33;
}
.form-section-body {
  padding: 18px;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.form-actions .btn {
  min-width: 120px;
}
@media (max-width: 640px) {
  .form-section-body {
    padding: 14px;
  }
  .form-actions .btn {
    flex: 1 1 140px;
  }
}
/* Form pages take the same section colours as their sidebar group */
.form-page.nav-tone-0 { --t-accent: #2563eb; --t-tint: #eef4ff; --t-strong: #d6e6ff; --t-line: rgba(37, 99, 235, 0.35); }
.form-page.nav-tone-1 { --t-accent: #3b82f6; --t-tint: #eff6ff; --t-strong: #dbeafe; --t-line: rgba(59, 130, 246, 0.35); }
.form-page.nav-tone-2 { --t-accent: #7c3aed; --t-tint: #f5f0ff; --t-strong: #ebe0ff; --t-line: rgba(124, 58, 237, 0.35); }
.form-page.nav-tone-3 { --t-accent: #e11d68; --t-tint: #fdf0f6; --t-strong: #fbdcea; --t-line: rgba(225, 29, 104, 0.35); }
.form-page.nav-tone-4 { --t-accent: #f97316; --t-tint: #fff6ee; --t-strong: #ffe6d1; --t-line: rgba(249, 115, 22, 0.35); }
.form-page.nav-tone-5 { --t-accent: #dc2626; --t-tint: #fef2f2; --t-strong: #fde0e0; --t-line: rgba(220, 38, 38, 0.35); }
.form-page.nav-tone-6 { --t-accent: #16a34a; --t-tint: #effbf3; --t-strong: #d8f5e2; --t-line: rgba(22, 163, 74, 0.35); }
.form-page.nav-tone-7 { --t-accent: #2563eb; --t-tint: #eef4ff; --t-strong: #d6e6ff; --t-line: rgba(37, 99, 235, 0.35); }
.form-page.nav-tone-8 { --t-accent: #f43f5e; --t-tint: #fff1f3; --t-strong: #ffdde3; --t-line: rgba(244, 63, 94, 0.35); }
.form-page.nav-tone-9 { --t-accent: #475569; --t-tint: #f1f4f8; --t-strong: #dfe5ee; --t-line: rgba(71, 85, 105, 0.35); }

/* ---------------------------------------------------------------------------
   Global search (top bar)
   --------------------------------------------------------------------------- */
.global-search {
  position: relative;
  flex: 0 1 300px;
  min-width: 0;
  margin-inline-end: 12px;
}
.gs-icon {
  position: absolute;
  inset-inline-start: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: inline-grid;
  pointer-events: none;
}
.gs-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gs-input {
  width: 100%;
  height: 38px;
  padding-inline: 36px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.gs-input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: transparent;
}
.gs-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.gs-results {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  z-index: 60;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(11, 31, 68, 0.16);
  min-width: 260px;
}
.gs-results[hidden] {
  display: none;
}
.gs-group + .gs-group {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}
.gs-group-title,
.gs-status {
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.gs-more {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.gs-more:hover,
.gs-more[aria-selected="true"] {
  background: var(--surface-2, rgba(37, 99, 235, 0.08));
}

.gs-item {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.gs-item:hover,
.gs-item[aria-selected="true"] {
  background: var(--pastel-blue);
  outline: none;
}
@media (max-width: 760px) {
  .global-search {
    flex: 1 1 140px;
    margin-inline-end: 8px;
  }
  .gs-results {
    /* Anchored to the sticky top bar, which spans the viewport, so the list keeps the page gutter at every phone width. */
    position: fixed;
    inset-inline: 16px;
    width: auto;
    min-width: 0;
  }
  .gs-item,
  .gs-more {
    /* 44 px touch target on phones. */
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .gs-input {
    height: 44px;
  }
}
/* Touch-first devices get the same 44 px targets at any width (for example tablets above the phone breakpoint). */
@media (pointer: coarse) {
  .gs-item,
  .gs-more {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .gs-input {
    height: 44px;
  }
  /* Dashboard panel record links (Recent transactions, Licenses expiring soon, Recently updated tickets,
     Upcoming releases) are a single short line of text by default; on a touch-first pointer they get the same
     44 px minimum tap target as the search combobox above, without changing layout on a fine-pointer device. */
  .list-plain li > div:first-child > a:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Dashboard SVG charts, pipeline stage colours, mobile Show more
   --------------------------------------------------------------------------- */
.chart {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  overflow: visible;
}
.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}
.chart-axis {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
/* Chart text reads left to right in both languages, so start/end anchors and numbers keep their order in Arabic. */
.chart text,
.donut text {
  direction: ltr;
}
/* Numeric labels are drawn in logical order. Arabic-Indic digit ranges such as ٠–٣٠ otherwise reverse, because a dash
   between two digit runs takes right-to-left direction. Only numeric labels use this, never words. */
.chart .chart-num {
  unicode-bidi: bidi-override;
  direction: ltr;
}
.chart-bar rect {
  transition: opacity 0.15s ease;
}
.chart-bar:hover rect,
.chart-bar:focus-within rect {
  opacity: 0.8;
}
.card-note {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Stage 01 Task 04 (owner decisions L-01, L-05, L-07): bar readout, focus, closed pipeline outcomes and revenue note. */
.chart-selectable { cursor: pointer; border-radius: 8px; }
.chart-selectable:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.chart-hit { fill: transparent; pointer-events: all; }
.chart-bar.is-selected rect { stroke: var(--ink); stroke-width: 2; }
.chart-hint { margin: 8px 0 0; font-size: 12px; }
.chart-note { margin: 6px 0 0; font-size: 12.5px; }
.chart-readout {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding: 8px 10px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--pastel-blue);
}
.chart-readout[hidden] { display: none; }
.chart-readout-text { min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.chart-readout-text strong { font-size: 15px; color: var(--ink); }
.chart-readout-close {
  flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
}
.chart-readout-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pipeline-closed { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pipeline-closed-head { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.04em; }
.pipeline-closed-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 4px 0; min-width: 0; }
.pipeline-closed-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }

.chart-empty {
  padding: 24px 0;
  text-align: center;
}
.donut {
  max-width: 200px;
  margin-inline: auto;
}
.donut-value {
  fill: var(--ink);
  font-size: 24px;
  font-weight: 700;
}
.donut-label {
  fill: var(--muted);
  font-size: 11px;
}
.chart-legend {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.chart-legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}
.chart-legend .swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.chart-legend strong {
  font-variant-numeric: tabular-nums;
}
/* Chart values as a table: collapsed by default, reachable by touch, keyboard and screen readers. */
.chart-host {
  min-width: 0;
}
.chart-host svg {
  display: block;
}
.chart-values {
  margin-top: 12px;
  font-size: 13px;
}
.chart-values summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.chart-values-scroll {
  max-height: 260px;
  overflow: auto;
  margin-top: 6px;
}
.chart-values table {
  width: 100%;
  border-collapse: collapse;
}
.chart-values th,
.chart-values td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: start;
}
.chart-values td {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hbar-fill.stage-prospecting { background: #64748b; }
.hbar-fill.stage-demo { background: #0ea5e9; }
.hbar-fill.stage-proposal { background: #7c3aed; }
.hbar-fill.stage-negotiation { background: #d98b00; }
.hbar-fill.stage-won { background: #12a150; }
.hbar-fill.stage-lost { background: #dc2626; }

.kpi-more-wrap {
  display: none;
  margin-top: 10px;
}
.kpi-more {
  width: 100%;
  min-height: 44px;
}
@media (max-width: 760px) {
  .kpi-more-wrap {
    display: block;
  }
  .grid-kpi:not(.kpi-expanded) .kpi-secondary {
    display: none;
  }
  .chart {
    max-height: 200px;
  }
}


/* ---------------------------------------------------------------------------
 * Licensing & subscriptions: KPI variants, drill-down chips, sorting, dialogs
 * ------------------------------------------------------------------------- */
.kpi-card .kpi-value-money { font-size: 19px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.kpi-card .kpi-value-text { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.kpi-card .kpi-value-na { color: #94a3b8; }
.kpi-muted { opacity: 0.78; border-style: dashed; }
.kpi-card .kpi-list { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.kpi-card .kpi-list li { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.kpi-card .kpi-list li > * { min-width: 0; overflow-wrap: anywhere; }
.kpi-card .kpi-list a { display: flex; justify-content: space-between; gap: 10px; width: 100%; color: inherit; text-decoration: none; }
.kpi-card .kpi-list a:hover span { text-decoration: underline; }
.kpi-card .kpi-list strong { font-variant-numeric: tabular-nums; }

.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; }
.filter-chips:empty { display: none; }
.filter-chips-label { font-size: 13px; color: var(--muted, #64748b); font-weight: 650; margin-inline-end: 4px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line, #e2e8f0); font-size: 13px; max-width: 100%;
}
.fchip-x {
  border: 0; background: #f1f5f9; border-radius: 999px; width: 22px; height: 22px; line-height: 20px;
  cursor: pointer; color: inherit; font-size: 15px; flex: 0 0 auto;
}
.fchip-x:focus-visible { outline: 3px solid rgba(201, 163, 73, 0.55); outline-offset: 2px; }

th.sortable { padding: 0; }
.th-sort {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 12px 14px; width: 100%; font: inherit; font-weight: 700; color: inherit;
}
.th-sort:focus-visible { outline: 3px solid rgba(201, 163, 73, 0.55); outline-offset: -3px; }
.sort-ind { font-size: 11px; color: #94a3b8; }
th[aria-sort="ascending"] .sort-ind, th[aria-sort="descending"] .sort-ind { color: var(--a, #1677ff); }

.notice { padding: 12px 16px; border-radius: 14px; margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.notice-warn { background: #fff7e6; border: 1px solid #f5d28a; color: #7a4d00; }

.override-box {
  margin-top: 14px; padding: 14px; border-radius: 14px; border: 1px solid #f5d28a; background: #fffbf0;
  display: grid; gap: 10px;
}
.override-box p { margin: 0; font-size: 13px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.check-row input { margin-top: 3px; flex: 0 0 auto; }
.form-error { color: #b42318; font-size: 13px; margin: 10px 0 0; }
.form-error[hidden] { display: none; }

/* Sidebar: labels wrap onto a readable second line instead of being cut off; the menu scrolls
   on its own and the profile footer stays fixed at the bottom. */
.sidebar { display: flex; flex-direction: column; min-height: 0; }
.sidebar > .sb-head,
.sidebar > .sb-search,
.sidebar > .nav-empty { flex: 0 0 auto; }
.sidebar .nav { padding-bottom: 18px; }
.sidebar .nav:focus-visible {
  outline: 3px solid rgba(201, 163, 73, 0.55);
  outline-offset: -3px;
}
.nav-link .nav-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.sidebar .sidebar-footer { flex: 0 0 auto; position: relative; z-index: 1; background: inherit; }

/* ===========================================================================
   Sidebar scroll grid (Stage 01 Task 01)
   Every navigation row is one 42px box: a 40px visible row plus 2px of blank space at its
   foot. Rows carry no margins or gaps, so every row edge sits on a 42px grid. The list is
   given a height that holds a whole number of rows and snaps to that grid (scroll-snap),
   so no row is cut off when scrolling stops. The administrator footer is outside the list.
   =========================================================================== */
.nav {
  gap: 0;
  padding: 0 2px;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
}
.sidebar .nav {
  padding-bottom: 0;
}
.nav-group {
  margin-bottom: 0;
}
.nav-group-inner,
.nav-sub-inner {
  gap: 0;
}
.nav-item[data-open="true"] {
  padding-bottom: 0;
}
.nav-group-title,
.nav-row,
.nav-row .nav-link,
.nav-item > .nav-link,
.nav-link-sub {
  box-sizing: border-box;
  height: 42px;
  min-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 2px;
  scroll-snap-align: start;
}
.nav-group-title {
  align-items: center;
}
.nav-link .nav-label,
.nav-link-sub .nav-label {
  line-height: 1.25;
}
.sidebar-footer {
  margin-top: auto;
}

/* Expiring licenses split (Task 02): two counts that add up to the 30-day headline. */
.kpi-split {
  display: grid;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.kpi-split-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}
.kpi-split-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.kpi-split-row strong {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* ===========================================================================
   System-wide touch-target sweep (Stage 01 Task 07)
   The Global Search combobox (Task 05, D-6-02) and the Dashboard panel links (Task 06, T06-02)
   were already brought up to a 44px minimum tap target under a coarse (touch) pointer. This
   round's full-system crawl found the rest of the chrome still below that standard: the sidebar's
   nav rows run a deliberate 42px scroll-snap grid (see the comment above `.nav-group-title,
   .nav-row, ...` earlier in this file) sized for mouse/trackpad use, its expand/collapse caret is
   a 28px icon button, the small "Edit"/"Delete" row-action buttons (`.btn-sm`, used throughout
   every list and detail page) are 30px, and the language toggle is 34px. This block is placed at
   the very end of the file, after every earlier rule for these selectors (including the
   unconditional `height: 42px; min-height: 0` on the nav scroll-snap grid), so it wins the
   cascade on a touch-first pointer while changing nothing for a mouse/trackpad user.

   Collapsed submenus stay collapsed: a closed `.nav-sub`/`.nav-group-body` clips its children via
   its own `grid-template-rows: 0fr` + overflow, independent of the child's own min-height, so
   giving `.nav-link-sub` a 44px minimum here only takes effect once its parent group is actually
   expanded (verified empirically in this round's retest, not just reasoned about). */
@media (pointer: coarse) {
  .nav-group-title,
  .nav-row,
  .nav-row .nav-link,
  .nav-item > .nav-link,
  .nav-link-sub {
    min-height: 44px;
  }
  .nav-caret {
    width: 44px;
    height: 44px;
  }
  .btn-sm {
    min-height: 44px;
  }
  .lang-toggle {
    min-height: 44px;
  }
  /* The rest of this round's full-system sweep: the base 38px button (and everything that extends
     it - .btn-primary, .btn-danger, .btn-gold, and the "← Back" link on a detail page's head,
     `<a class="btn">`), the two breadcrumb trails (the `.crumbs` on a create/edit page, and the
     plain "← Back · <Resource>" link on a detail page, neither of which carries a .btn class), the
     dashboard's Today/Week/Month/Year/Custom period segmented buttons, a table column's sort
     button, a KPI card's "by product" list-row links, the filter chip's remove ("×") button, and
     the desktop sidebar's own collapse/expand toggle (hidden below 960px in favour of the mobile
     drawer, but a real, visible, tappable control from 1024px up - an iPad in landscape, for
     example). */
  .btn {
    min-height: 44px;
  }
  .crumbs a,
  .page-head > div:first-child > a:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .seg {
    min-height: 44px;
  }
  .th-sort {
    min-height: 44px;
  }
  .kpi-card .kpi-list a {
    min-height: 44px;
    align-items: center;
  }
  .fchip-x {
    width: 44px;
    height: 44px;
  }
  .sb-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* POS feature entitlements field */
.features-field { display: flex; flex-direction: column; gap: 8px; }
.features-field .feature-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; }
.features-field .feature-opt { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.features-field .feature-opt input { width: auto; flex: none; }
@media (pointer: coarse) { .features-field .feature-opt { min-height: 44px; } }

.copy-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.copy-row .input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
@media (pointer: coarse) { .copy-row .btn { min-height: 44px; } }

.dash-refresh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#view-error .btn { margin-top: 12px; }

/* ===========================================================================
   Dashboard KPI cards: premium presentation (presentation only; data, filters, drill-downs unchanged)
   One system: each card keeps its accent (--a / --a-bg); surface, ring, tint and meter colours are derived from it,
   so the twelve cards read as one family. Logical properties keep English and Arabic (RTL) mirrored.
   =========================================================================== */
.grid-kpi {
  gap: 18px;
}

.grid-kpi .kpi-card {
  --a-ring: color-mix(in srgb, var(--a) 22%, transparent);
  --a-tint: color-mix(in srgb, var(--a) 7%, #ffffff);
  --a-soft: color-mix(in srgb, var(--a) 11%, #ffffff);
  gap: 14px;
  padding: 20px 20px 18px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--a) 12%, var(--line));
  background: linear-gradient(160deg, var(--a-tint) 0%, #ffffff 52%);
  box-shadow: 0 1px 2px rgba(15, 28, 51, 0.04), 0 14px 30px -16px rgba(15, 28, 51, 0.18);
}

.grid-kpi .kpi-card::before {
  display: none;
}

/* Drill-down affordance: a quiet round arrow that mirrors in RTL. Decorative only; the whole card is the link. */
.grid-kpi a.kpi-card::after {
  content: "\203A";
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: var(--a);
  font-size: 19px;
  line-height: 1;
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--a-ring), 0 3px 8px -3px var(--a-ring);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

html[dir="rtl"] .grid-kpi a.kpi-card::after {
  content: "\2039";
}

.grid-kpi a.kpi-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--a) 40%, var(--line));
  box-shadow: 0 1px 2px rgba(15, 28, 51, 0.05), 0 22px 38px -18px color-mix(in srgb, var(--a) 40%, rgba(15, 28, 51, 0.25));
}

.grid-kpi a.kpi-card:hover::after {
  background: var(--a);
  color: #ffffff;
  transform: translateX(2px);
}

html[dir="rtl"] .grid-kpi a.kpi-card:hover::after {
  transform: translateX(-2px);
}

.grid-kpi .kpi-top {
  gap: 12px;
  padding-inline-end: 36px;
  min-height: 46px;
}

.grid-kpi .kpi-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: linear-gradient(145deg, #ffffff 0%, var(--a-soft) 100%);
  box-shadow: inset 0 0 0 1px var(--a-ring), 0 6px 14px -8px var(--a);
}

.grid-kpi .kpi-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.7;
}

.grid-kpi .kpi-card .kpi-label {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #3b4a66;
  letter-spacing: 0.005em;
}

.kpi-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.grid-kpi .kpi-card .kpi-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.kpi-main .trend {
  padding: 3px 9px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
}

.grid-kpi .kpi-foot {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* Comparison: one tidy panel, name and figure on one line, a slim bar beneath. */
.grid-kpi .kpi-meter,
.grid-kpi .kpi-split,
.grid-kpi .kpi-meter-empty {
  margin-top: auto;
  padding: 12px 14px;
  border: 0;
  border-radius: 13px;
  background: var(--a-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 8%, transparent);
}

.grid-kpi .kpi-meter {
  gap: 10px;
}

.grid-kpi .kpi-meter-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name val" "track track";
  gap: 5px 10px;
  font-size: 12px;
}

.grid-kpi .kpi-meter-name {
  grid-area: name;
  overflow-wrap: break-word;
}

.grid-kpi .kpi-meter-val {
  grid-area: val;
  font-size: 12.5px;
  font-weight: 700;
}

.grid-kpi .kpi-meter-track {
  grid-area: track;
  height: 7px;
  background: color-mix(in srgb, var(--a) 14%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 6%, transparent);
}

.grid-kpi .kpi-meter-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--a) 78%, #ffffff), var(--a));
}

.grid-kpi .kpi-meter-row.is-previous .kpi-meter-fill {
  background: color-mix(in srgb, var(--a) 38%, #ffffff);
  box-shadow: none;
}

.grid-kpi .kpi-meter-row.is-previous {
  color: #7a889f;
}

.grid-kpi .kpi-split {
  gap: 8px;
}

.grid-kpi .kpi-split-row {
  font-size: 12.5px;
}

.grid-kpi .kpi-split-row strong {
  font-size: 13.5px;
}

.grid-kpi .kpi-meter-empty {
  font-size: 12px;
}

/* A card with no comparison or breakdown carries its supporting text in the same panel, so no card looks unfinished. */
.grid-kpi .kpi-bare .kpi-foot {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--a-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 8%, transparent);
  color: #4b5b76;
}

@media (max-width: 1180px) {
  .grid-kpi {
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .grid-kpi {
    gap: 10px;
  }

  .grid-kpi .kpi-bare .kpi-foot {
    padding: 9px 10px;
    border-radius: 11px;
  }

  .grid-kpi .kpi-card {
    gap: 10px;
    padding: 14px 13px 13px;
    border-radius: 16px;
  }

  .grid-kpi a.kpi-card::after {
    display: none;
  }

  .grid-kpi .kpi-top {
    padding-inline-end: 0;
    min-height: 0;
    align-items: flex-start;
    gap: 9px;
  }

  .grid-kpi .kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .grid-kpi .kpi-icon svg {
    width: 20px;
    height: 20px;
  }

  .grid-kpi .kpi-card .kpi-label {
    font-size: 12.5px;
  }

  .grid-kpi .kpi-card .kpi-value {
    font-size: clamp(16px, 5.1vw, 22px);
    white-space: nowrap;
    overflow-wrap: normal;
    letter-spacing: -0.025em;
  }

  /* Narrow cards: the meter name takes its own line; bar and figure share the line beneath it. */
  .grid-kpi .kpi-meter-row {
    grid-template-columns: minmax(40px, 1fr) auto;
    grid-template-areas: "name name" "track val";
    align-items: center;
    gap: 5px 8px;
    font-size: 11px;
  }

  .grid-kpi .kpi-meter-val {
    font-size: 11.5px;
  }

  .kpi-main .trend {
    font-size: 11px;
    padding: 2px 7px;
  }

  .grid-kpi .kpi-foot {
    font-size: 11.5px;
  }

  .grid-kpi .kpi-meter,
  .grid-kpi .kpi-split,
  .grid-kpi .kpi-meter-empty {
    padding: 9px 10px;
    border-radius: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grid-kpi a.kpi-card,
  .grid-kpi a.kpi-card::after {
    transition: none;
  }
  .grid-kpi a.kpi-card:hover,
  .grid-kpi a.kpi-card:hover::after {
    transform: none;
  }
}

/* ===========================================================================
   License Plans: premium KPI section and page heading (presentation only)
   Figures, rings and bars are drawn from the server summary; nothing here is decorative data.
   =========================================================================== */
.plan-head {
  align-items: center;
}

.plan-head-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.ph-icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(145deg, #4f8bff, #1f5fe0);
  box-shadow: 0 12px 24px -12px rgba(31, 95, 224, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ph-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ph-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.ph-updated {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.plan-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-block: 4px 8px;
}

.pk-card {
  --pa: #4f46e5;
  --pa-soft: color-mix(in srgb, var(--pa) 10%, #ffffff);
  --pa-ring: color-mix(in srgb, var(--pa) 24%, transparent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 22px;
  border-radius: 20px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--pa) 14%, var(--line));
  background: linear-gradient(155deg, color-mix(in srgb, var(--pa) 8%, #ffffff) 0%, #ffffff 58%);
  box-shadow: 0 1px 2px rgba(15, 28, 51, 0.04), 0 16px 32px -18px rgba(15, 28, 51, 0.22);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

a.pk-card:hover,
a.pk-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--pa) 45%, var(--line));
  box-shadow: 0 1px 2px rgba(15, 28, 51, 0.05), 0 24px 40px -20px color-mix(in srgb, var(--pa) 45%, rgba(15, 28, 51, 0.3));
  text-decoration: none;
}

a.pk-card:focus-visible {
  outline: 3px solid var(--pa-ring);
  outline-offset: 2px;
}

.pk-violet { --pa: #6d4df2; }
.pk-green { --pa: #12a150; }
.pk-rose { --pa: #e11d48; }
.pk-blue { --pa: #1677ff; }
.pk-amber { --pa: #e08a00; }
.pk-indigo { --pa: #5b5ce6; }

.pk-wide {
  grid-column: span 2;
}

.pk-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.pk-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: var(--pa);
  background: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--pa) 14%, #ffffff));
  box-shadow: inset 0 0 0 1px var(--pa-ring), 0 10px 20px -12px var(--pa);
}

.pk-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pk-title {
  font-size: 15px;
  font-weight: 750;
  color: #34445f;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pk-value {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.pk-value-text {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pk-value-na {
  color: #94a3b8;
}

.pk-note {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.pk-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.pk-split > div:first-child {
  min-width: 0;
}

.pk-ring {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
}

.pk-ring svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pk-ring circle {
  fill: none;
  stroke-width: 9;
}

.pk-ring-bg {
  stroke: color-mix(in srgb, var(--pa) 14%, #ffffff);
}

.pk-ring-fg {
  stroke: var(--pa);
  stroke-linecap: round;
}

.pk-ring-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--pa);
  font-variant-numeric: tabular-nums;
}

.pk-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--pa) 20%, var(--line));
  font-size: 12.5px;
  font-weight: 650;
  color: #4b5b76;
}

.pk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pa);
  box-shadow: 0 0 0 4px var(--pa-ring);
}

.pk-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.pk-chip-ok { background: var(--success-bg); color: var(--success); }
.pk-chip-warn { background: var(--warn-bg); color: var(--warn); }

.pk-viz {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  min-width: 0;
}

.pk-viz-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.pk-meter {
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pa) 14%, #ffffff);
  overflow: hidden;
}

.pk-meter > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pa) 70%, #ffffff), var(--pa));
}

.pk-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Featured card: the Total plans figure sits on a deep gradient with a billing-period bar chart. */
.pk-featured {
  color: #ffffff;
  border-color: transparent;
  background: radial-gradient(120% 120% at 0% 0%, #7b5cff 0%, #5a46e8 45%, #3b36c9 100%);
  box-shadow: 0 2px 4px rgba(59, 54, 201, 0.2), 0 24px 40px -18px rgba(59, 54, 201, 0.7);
}

.pk-featured .pk-title,
.pk-featured .pk-note,
.pk-featured .pk-viz-title {
  color: rgba(255, 255, 255, 0.82);
}

.pk-featured .pk-icon {
  color: #5a46e8;
  background: #ffffff;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.45);
}

a.pk-featured:hover,
a.pk-featured:focus-visible {
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(59, 54, 201, 0.25), 0 30px 46px -18px rgba(59, 54, 201, 0.85);
}

a.pk-featured:focus-visible {
  outline-color: rgba(255, 255, 255, 0.7);
}

.pk-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 92px;
}

.pk-bar {
  flex: 1 1 0;
  min-width: 0;
  max-width: 64px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
}

.pk-bar-col {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}

.pk-bar-fill {
  display: block;
  width: 100%;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55));
}

.pk-bar-val {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pk-bar-name {
  color: rgba(255, 255, 255, 0.82);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pk-wide-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 22px;
  align-items: end;
  min-width: 0;
}

.pk-hbars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.pk-hbars li {
  display: grid;
  grid-template-columns: minmax(70px, 0.9fr) minmax(40px, 1.4fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.pk-hname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #3b4a66;
  font-weight: 600;
}

.pk-htrack {
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pa) 14%, #ffffff);
  overflow: hidden;
}

.pk-hfill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pa) 65%, #ffffff), var(--pa));
}

.pk-hval {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pk-caption {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .plan-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .plan-kpis {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .pk-wide {
    grid-column: auto;
  }

  .pk-wide-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .pk-card {
    padding: 18px;
    border-radius: 18px;
  }

  .pk-value {
    font-size: 34px;
  }

  .pk-value-text {
    font-size: 26px;
  }

  .plan-head-main {
    gap: 12px;
  }

  .ph-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .ph-icon svg {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-card {
    transition: none;
  }
  a.pk-card:hover,
  a.pk-card:focus-visible {
    transform: none;
  }
}

/* Company tax and legal identity card */
.ct-group { border: 1px solid var(--line, #e5e7eb); border-radius: 14px; padding: 12px 16px 16px; margin: 0 0 14px; min-width: 0; }
.ct-group legend { padding: 0 8px; font-weight: 600; font-size: 14px; }
.ct-group .input { width: 100%; box-sizing: border-box; }
.ct-group .input[readonly] { background: #f4f5f7; }
.ct-status { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 640px) { .ct-group .form-grid { grid-template-columns: minmax(0, 1fr); } .ct-actions .btn { flex: 1 1 100%; } }

/* ===== Follow-ups (.fu-*) — module blocks for Financial Reports (.fr-*) and System Settings (.ss-*) follow below ===== */
.nav-count {
  margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.is-collapsed .nav-count { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; font-size: 10px; }
.fu-due { display: block; width: max-content; max-width: 100%; margin-top: 4px; white-space: nowrap; }
.fu-kpis { grid-template-columns: repeat(auto-fit, minmax(max(220px, calc((100% - 40px) / 3)), 1fr)); }
@media (max-width: 560px) { .fu-kpis { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 561px) and (max-width: 900px) { .fu-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fu-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fu-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted, #64748b); }
.fu-links-hint { margin: 0 0 12px; }
.row-actions .btn-gold { white-space: nowrap; }
/* ===== end Follow-ups ===== */

/* ===== System Settings (.ss-*) ===== */
.ss-page { container: ss / inline-size; min-width: 0; }
.ss-page [hidden] { display: none !important; }
.ss-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; align-items: start; }
.ss-nav { min-width: 0; }
.ss-tabs { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.ss-tab { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: inherit; font-weight: 600; text-align: start; cursor: pointer; }
.ss-tab:hover { background: var(--pastel-blue); }
.ss-tab:focus-visible { outline: 3px solid rgba(201, 163, 73, 0.55); outline-offset: 1px; }
.ss-tab.is-active { background: var(--navy-800); color: #fff; }
.ss-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.ss-pick { display: none; flex-direction: column; gap: 6px; }
.ss-pick-label { font-size: 13px; font-weight: 650; color: #34445e; }
.ss-panel { padding: 22px; }
.ss-panel-head { align-items: flex-start; }
.ss-panel-head h2 { margin: 0 0 4px; }
.ss-desc { margin: 0; max-width: 70ch; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px 22px; }
.ss-span { grid-column: 1 / -1; }
.ss-field { position: relative; }
.ss-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.ss-field-head label { overflow-wrap: anywhere; }
.ss-badge { font-size: 11px; padding: 2px 8px; flex: none; }
.ss-ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ss-ctl .input, .ss-ctl select, .ss-ctl textarea { min-width: 0; flex: 1 1 auto; }
.ss-ctl select { height: 42px; }
.ss-ctl .input { height: 42px; }
.ss-ctl textarea { min-height: 84px; }
.ss-unit { color: var(--muted); font-size: 13px; white-space: nowrap; flex: none; }
.ss-field.is-dirty .input, .ss-field.is-dirty select, .ss-field.is-dirty textarea { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 163, 73, 0.18); }
.ss-field .hint-text { overflow-wrap: anywhere; }
.ss-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.ss-effect { overflow-wrap: anywhere; }
.ss-example { font-size: 13px; color: var(--navy-800); background: var(--gold-soft); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; }
.ss-field .error { min-height: 0; }
.ss-field .error:empty { display: none; }
.ss-reset { align-self: flex-start; padding-inline: 8px; }
.ss-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 10px 30px rgba(15, 28, 51, 0.2); }
.ss-bar-msg { font-weight: 650; }
.ss-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.ss-status { min-height: 0; margin: 0 0 12px; font-size: 14px; }
.ss-status:empty { display: none; }
.ss-status-ok { color: var(--success); }
.ss-status-err { color: var(--danger); }
.ss-conflict { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ss-ro { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.ss-ro-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ss-ro-row:last-child { border-bottom: 0; }
.ss-ro-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; font-weight: 600; }
.ss-ro-label .hint-text { font-weight: 400; color: var(--muted); font-size: 12px; }
.ss-ro-value { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-ro-link { margin: 14px 0 0; }
.ss-h3 { margin: 22px 0 10px; font-size: 14px; color: #34445e; text-transform: none; }
.ss-h3:first-of-type { margin-top: 4px; }
.ss-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.ss-tile { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); min-width: 0; }
.ss-tile-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ss-tile-value { font-weight: 650; overflow-wrap: anywhere; }
.ss-info-head { display: flex; justify-content: flex-end; margin-bottom: 4px; }
@container ss (max-width: 760px) {
  .ss-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ss-tabs { display: none; }
  .ss-pick { display: flex; }
  .ss-pick select { height: 44px; }
  .ss-panel { padding: 16px; }
  .ss-bar { bottom: 8px; }
  .ss-bar-actions { width: 100%; }
  .ss-bar-actions .btn { flex: 1 1 0; }
}
/* ===== end System Settings ===== */

/* =====================================================================================================================
   Financial Reports (.fr-*). Logical properties throughout, so Arabic (RTL) mirrors on its own.
   ===================================================================================================================== */
.fr-page { container-type: inline-size; container-name: frpage; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fr-page .page-head { margin-bottom: 0; }
.fr-org { font-weight: 700; color: var(--navy-800); margin: 4px 0 0; }
.fr-head p { max-width: 70ch; }
.fr-print-head { display: none; }

.fr-controls { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.fr-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-preset { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.fr-preset:hover { background: #f1f5fb; text-decoration: none; }
.fr-preset.on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.fr-preset.on:hover { background: var(--navy-700); }
.fr-custom { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.fr-field { display: flex; flex-direction: column; gap: 4px; flex: 0 1 190px; min-width: min(100%, 150px); }
.fr-field label { font-size: 12px; font-weight: 700; color: var(--muted); }
.fr-custom .btn { min-height: 42px; }
.fr-error { margin: 0; color: var(--danger); font-weight: 600; }
.fr-error[hidden] { display: none; }

.fr-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; border-bottom: 1px solid var(--line); }
.fr-tabs a { display: block; padding: 10px 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.fr-tabs a:hover { color: var(--ink); text-decoration: none; }
.fr-tabs a.on { color: var(--ink); border-bottom-color: var(--gold); }
.fr-page a:focus-visible, .fr-page button:focus-visible, .fr-page select:focus-visible, .fr-page input:focus-visible, .fr-page summary:focus-visible { outline: 3px solid rgba(22, 119, 255, 0.55); outline-offset: 2px; }

.fr-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fr-block { display: flex; flex-direction: column; gap: 12px; }
.fr-block .card-head { margin-bottom: 0; }
.fr-block h2 { margin: 0; font-size: 17px; }
.fr-note { margin: 0; font-size: 13px; }
.fr-cur { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--navy-800); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; }
.fr-currency-block { display: flex; flex-direction: column; gap: 10px; }
.fr-cur-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 6px 0 0; font-size: 17px; }
.fr-cur-title small { color: var(--muted); font-weight: 500; font-size: 13px; }
.fr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.fr-kpi { display: block; padding: 16px; color: inherit; text-decoration: none; min-width: 0; }
.fr-kpi .value { font-size: 21px; }
a.fr-kpi-link:hover { border-color: var(--gold); text-decoration: none; }
.fr-kpi.fr-strong .value { color: var(--success); }
.fr-kpi.fr-warn .value { color: var(--warn); }

.fr-page table.data { min-width: 0; }
.fr-table td.num, .fr-table th.num { text-align: end; }
.fr-table tfoot td { font-weight: 700; background: #fafbfd; border-top: 2px solid var(--line); border-bottom: 0; }

.fr-chart { margin: 0; }
.fr-chart figcaption { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.fr-chart svg { display: block; width: 100%; height: auto; max-height: 260px; }
.fr-grid { stroke: var(--line); stroke-width: 1; }
.fr-axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.fr-bar.fr-s1 { fill: var(--navy-700); }
.fr-bar.fr-s2 { fill: var(--gold); }
.fr-bar.fr-age0 { fill: #12805c; }
.fr-bar.fr-age1 { fill: #6aa84f; }
.fr-bar.fr-age2 { fill: #d98b00; }
.fr-bar.fr-age3 { fill: #e0562a; }
.fr-bar.fr-age4 { fill: #b42318; }
.fr-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
.fr-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; }
.fr-swatch.fr-s1 { background: var(--navy-700); }
.fr-swatch.fr-s2 { background: var(--gold); }

.fr-defs summary { cursor: pointer; font-weight: 700; }
.fr-defs ul { margin: 10px 0 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); font-size: 14px; }
.fr-defs h3 { margin: 14px 0 0; font-size: 14px; }

@container frpage (max-width: 719px) {

  .fr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fr-table, .fr-table tbody, .fr-table tfoot, .fr-table tr, .fr-table td { display: block; width: 100%; box-sizing: border-box; }
  .fr-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .fr-table tfoot tr { background: #fafbfd; border-bottom: 0; }
  .fr-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0; padding: 5px 14px; white-space: normal; text-align: end; overflow-wrap: anywhere; }
  .fr-table td::before { content: attr(data-label); flex: 0 0 auto; max-width: 48%; font-size: 12px; font-weight: 700; color: var(--muted); text-align: start; }
  .fr-table td:empty { display: none; }
  .fr-tabs ul { flex-wrap: nowrap; overflow-x: auto; }
  .fr-custom .btn { flex: 1 1 100%; }
  .fr-field { flex: 1 1 100%; }
}
@container frpage (max-width: 959px) {

  .fr-table.fr-wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fr-table.fr-wide, .fr-table.fr-wide tbody, .fr-table.fr-wide tfoot, .fr-table.fr-wide tr, .fr-table.fr-wide td { display: block; width: 100%; box-sizing: border-box; }
  .fr-table.fr-wide tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .fr-table.fr-wide tfoot tr { background: #fafbfd; border-bottom: 0; }
  .fr-table.fr-wide td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0; padding: 5px 14px; white-space: normal; text-align: end; overflow-wrap: anywhere; }
  .fr-table.fr-wide td::before { content: attr(data-label); flex: 0 0 auto; max-width: 48%; font-size: 12px; font-weight: 700; color: var(--muted); text-align: start; }
  .fr-table.fr-wide td:empty { display: none; }
}

@media print {
  body:has(.fr-page) { background: #fff; }
  body:has(.fr-page) .sidebar, body:has(.fr-page) .scrim, body:has(.fr-page) .topbar, body:has(.fr-page) .no-print { display: none !important; }
  body:has(.fr-page) .shell, body:has(.fr-page) .main { display: block; min-height: 0; }
  body:has(.fr-page) .content { padding: 0; max-width: none; }
  .fr-print-head { display: block; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--navy-800); font-size: 13px; }
  .fr-page .card { box-shadow: none; break-inside: avoid; }
  .fr-defs:not([open]) > :not(summary) { display: block; }
  .fr-chart svg { max-height: 200px; }
}

.fr-list-totals { list-style: none; margin: 0; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; border-block-start: 1px solid var(--line, #e5e7eb); font-size: 14px; }
.fr-list-totals li { display: inline-flex; gap: 6px; align-items: baseline; }
@media print { .fr-list-totals { break-inside: avoid; } }

/* ===== Maintenance Mode (.mm-*) and the red banner (.mnt-banner) ===== */
.mnt-banner { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 6px 14px; height: 36px; padding: 0 16px; background: #b3261e; color: #fff; font-size: 13.5px; line-height: 1.2; overflow: hidden; white-space: nowrap; }
.mnt-banner[hidden] { display: none; }
.mnt-banner strong { font-weight: 800; }
.mnt-banner .mnt-detail { overflow: hidden; text-overflow: ellipsis; opacity: 0.95; }
.mnt-banner a { color: #fff; text-decoration: underline; font-weight: 700; flex: none; }
body.has-mnt .sidebar { top: 36px; height: calc(100vh - 36px); }
body.has-mnt .topbar { top: 36px; }
.mm-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mm-page [hidden] { display: none !important; }
.mm-state { padding: 12px 16px; border-radius: 12px; font-weight: 650; border: 1px solid var(--line); background: var(--surface); }
.mm-state-active { background: #fdecea; border-color: #e5a29c; color: #7a1812; }
.mm-state-warn { background: #fff7e5; border-color: #e6c36a; color: #6b4b00; }
.mm-card { padding: 18px 20px; }
.mm-card h2 { margin: 0 0 12px; font-size: 16px; }
.mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.mm-field textarea { min-height: 74px; resize: vertical; }
.mm-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mm-row .input { flex: 1 1 200px; min-width: 0; }
.mm-short { max-width: 90px; }
.mm-switch-row { display: flex; align-items: flex-start; gap: 14px; }
.mm-switch { flex: none; position: relative; width: 52px; height: 30px; border-radius: 999px; border: 0; background: #b9c2d3; cursor: pointer; padding: 0; transition: background 0.15s; }
.mm-switch[aria-checked="true"] { background: #b3261e; }
.mm-switch .mm-knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: inset-inline-start 0.15s; }
.mm-switch[aria-checked="true"] .mm-knob { inset-inline-start: 25px; }
.mm-switch:focus-visible { outline: 3px solid rgba(201, 163, 73, 0.6); outline-offset: 2px; }
.mm-switch-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-checks { display: flex; flex-direction: column; gap: 10px; }
.mm-roles { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.mm-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.mm-check input { margin-top: 3px; flex: none; }
.mm-check .hint-text { display: block; margin-top: 2px; }
.mm-bar .mm-preview-hint { flex: 1 1 220px; }
.mm-history td, .mm-history th { text-align: start; }
@media (max-width: 760px) { .mm-grid { grid-template-columns: minmax(0, 1fr); } }
/* ===== end Maintenance Mode ===== */

/* =====================================================================================================================
   Billing & Finance (.bl-*): invoices, editor, details, payments, refunds. Logical properties throughout (RTL mirrors itself).
   ===================================================================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bl-page { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bl-page .page-head { margin-bottom: 0; }
.bl-page a:focus-visible, .bl-page button:focus-visible, .bl-page select:focus-visible, .bl-page input:focus-visible, .bl-page textarea:focus-visible,
.bl-menu-pop a:focus-visible, .bl-menu-pop button:focus-visible { outline: 3px solid rgba(22, 119, 255, 0.55); outline-offset: 2px; }
.bl-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bl-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-neg { color: var(--danger); }
.bl-sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.bl-foot { font-size: 13px; margin: 8px 0 0; }
.bl-h3 { font-size: 15px; margin: 16px 0 8px; }
.bl-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.bl-hash { font-size: 12px; overflow-wrap: anywhere; word-break: break-all; background: #f1f5fb; padding: 2px 6px; border-radius: 6px; }
.bl-muted-row td { color: var(--muted); }
.bl-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.bl-inline .input { min-height: 38px; }

/* Tabs with counts */
.bl-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; border-bottom: 1px solid var(--line); }
.bl-tabs a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.bl-tabs a:hover { color: var(--ink); text-decoration: none; }
.bl-tabs a.on { color: var(--ink); border-bottom-color: var(--gold); }
.bl-count { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #eef2f9; color: var(--navy-800); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.bl-tabs a.on .bl-count { background: var(--gold-soft); }
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-chip { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.bl-chip:hover { background: #f1f5fb; }
.bl-chip.on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* List toolbar and advanced filters */
.bl-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bl-toolbar .search { flex: 1 1 240px; min-width: min(100%, 200px); }
.bl-toolbar .search .input { width: 100%; }
.bl-adv { padding: 14px 16px; }
.bl-adv[hidden] { display: none; }
.bl-adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.bl-list { min-width: 0; }
.bl-table th.sortable { white-space: nowrap; }
.bl-table td .row-actions { flex-wrap: wrap; justify-content: flex-end; }
.bl-table td a strong { color: var(--navy-800); }

/* Row action menu (floating, appended to <body>) */
.bl-menu-pop { position: fixed; z-index: 1200; min-width: 220px; max-width: min(92vw, 320px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(15, 28, 51, 0.18); display: flex; flex-direction: column; }
.bl-menu-item { display: block; width: 100%; text-align: start; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.bl-menu-item:hover, .bl-menu-item:focus { background: #f1f5fb; text-decoration: none; }
.bl-menu-item.danger { color: var(--danger); }
.bl-menu-item.danger:hover { background: var(--danger-bg); }
.bl-menu-label { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Editor */
.bl-editor { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bl-ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.bl-ed-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bl-ed-side { min-width: 0; }
.bl-sticky { position: sticky; top: 76px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.bl-lines { display: flex; flex-direction: column; gap: 12px; }
.bl-line { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: #fbfcfe; min-width: 0; }
.bl-line-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bl-line-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bl-line-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bl-line-grid .bl-desc { grid-column: span 2; }
.bl-line-calc { margin-top: 8px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.bl-lines-foot { margin-top: 12px; }
.bl-cat { max-width: 220px; min-height: 32px; font-size: 13px; }
.bl-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 600; }
.bl-fs { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 12px; }
.bl-fs legend { padding: 0 6px; font-weight: 700; font-size: 13px; }
.bl-dn-line { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; align-items: end; }
.bl-bullets { margin: 0 0 8px; padding-inline-start: 20px; }
.bl-bullets li { margin: 4px 0; }

/* Totals */
.bl-totals-box { display: flex; justify-content: flex-end; margin-top: 12px; }
.bl-totals { margin: 0; width: min(100%, 360px); display: flex; flex-direction: column; gap: 6px; }
.bl-totals > div { display: flex; justify-content: space-between; gap: 16px; }
.bl-totals dt { color: var(--muted); font-weight: 600; font-size: 13px; }
.bl-totals dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; unicode-bidi: isolate; }
.bl-totals .bl-sub-row dt, .bl-totals .bl-sub-row dd { font-weight: 400; font-size: 12px; }
.bl-totals .bl-grand { border-top: 2px solid var(--navy-800); padding-top: 8px; margin-top: 4px; }
.bl-totals .bl-grand dt { color: var(--ink); font-size: 15px; }
.bl-totals .bl-grand dd { font-size: 19px; color: var(--navy-800); }
.bl-sub-row { display: flex; justify-content: space-between; gap: 16px; }

/* Details page */
.bl-details .bl-card { scroll-margin-top: 90px; }
.bl-secnav { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
.bl-sec { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.bl-sec:hover { background: #f1f5fb; color: var(--ink); }
.bl-sec.on { background: var(--navy-800); color: #fff; }
.bl-detail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.bl-detail .span-2 { grid-column: 1 / -1; }
.bl-kpis { margin-bottom: 12px; }
.bl-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-banner { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info); font-weight: 600; font-size: 14px; }
.bl-banner.warn { background: var(--warn-bg); color: var(--warn); }
.bl-banner.danger { background: var(--danger-bg); color: var(--danger); }
.bl-table-wrap { overflow-x: auto; }

/* Timeline and refund steps */
.bl-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.bl-timeline li { position: relative; padding: 0 0 14px; padding-inline-start: 22px; border-inline-start: 2px solid var(--line); margin-inline-start: 6px; }
.bl-timeline li::before { content: ""; position: absolute; inset-inline-start: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface); }
.bl-timeline li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.bl-tl-head { font-size: 14px; }
.bl-tl-reason { font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.bl-tl-meta { font-size: 12px; margin-top: 2px; }
.bl-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bl-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.bl-steps li.done { color: var(--success); }
.bl-steps li.now { color: var(--navy-800); }
.bl-step-dot { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); font-weight: 700; }
.bl-steps li.done .bl-step-dot { background: var(--success-bg); border-color: var(--success); }
.bl-steps li.now .bl-step-dot { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

@media (max-width: 1100px) {
  .bl-ed-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-sticky { position: static; }
  .bl-line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bl-secnav { border-radius: var(--radius-sm); top: 56px; }
  .bl-line-grid, .bl-dn-line { grid-template-columns: minmax(0, 1fr); }
  .bl-line-grid .bl-desc { grid-column: auto; }
  .bl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-actions { justify-content: stretch; }
  .bl-actions .btn { flex: 1 1 140px; }
  /* Tables become stacked cards on a phone: every cell carries its own label. */
  .bl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .bl-table, .bl-table tbody, .bl-table tr, .bl-table td { display: block; width: 100%; }
  .bl-table tr { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; padding: 6px 12px; background: var(--surface); }
  .bl-table td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; text-align: end; }
  .bl-table td::before { content: attr(data-label); flex: 0 0 38%; text-align: start; font-size: 12px; font-weight: 700; color: var(--muted); }
  .bl-table td.actions-cell { justify-content: flex-end; }
  .bl-table td.actions-cell::before, .bl-table td:not([data-label])::before { content: none; }
  .bl-table td .bl-sub { text-align: end; }
  .bl-table td[colspan] { display: block; }
  .bl-table td[colspan]::before { content: none; }
  /* A cell with a second line (type, reference) wraps it under the value instead of clipping it. */
  .bl-table td:has(.bl-sub) { flex-wrap: wrap; }
  .bl-table td .bl-sub { flex: 0 0 100%; }
  /* The sticky Actions column of the wide table is a plain card row on a phone: no pinned shadow. */
  html[dir] table.data.bl-table td.actions-cell { position: static; box-shadow: none; background: transparent; }
  /* A sortable list keeps its sort buttons on a phone: the header row becomes a visible "Sort by" row of pills. */
  .bl-sortable thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; margin-bottom: 10px; }
  .bl-sortable thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 0; padding: 0; margin: 0; background: transparent; }
  .bl-sortable thead tr::before { content: attr(data-sort-label); flex: 0 0 100%; font-size: 12px; font-weight: 700; color: var(--muted); }
  .bl-sortable thead th { display: block; width: auto; padding: 0; border: 0; background: transparent; }
  .bl-sortable thead th:not(.sortable) { display: none; }
  .bl-table.bl-sortable thead th.sortable .th-sort, .bl-table.bl-sortable thead th.sortable:first-child .th-sort { width: auto; padding: 6px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; text-transform: none; letter-spacing: normal; }
  .bl-sortable thead th[aria-sort="ascending"] .th-sort, .bl-sortable thead th[aria-sort="descending"] .th-sort { border-color: var(--navy-800, #1b2a4a); background: #f1f5f9; }
}
@media print {
  .bl-secnav, .bl-actions, .bl-menu-pop, .bl-toolbar, .bl-tabs, .pager { display: none !important; }
}
.bl-field { margin-bottom: 12px; }
.bl-field > label { display: block; margin-bottom: 4px; }
.bl-field .hint-text { margin-top: 4px; }
#bl-excess-box { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fbfcfe; }
#bl-excess-box label { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; }
#bl-excess-box .hint-text { margin-top: 6px; }
table.data.bl-table th, table.data.bl-table td { padding-inline: 8px; }
table.data.bl-table th:first-child, table.data.bl-table td:first-child { padding-inline-start: 14px; }
table.data.bl-table td:nth-child(2) { white-space: normal; min-width: 130px; }
.bl-table th.sortable .th-sort { padding: 12px 8px; gap: 4px; }
.bl-table th.sortable:first-child .th-sort { padding-inline-start: 14px; }
table.data.bl-table th.sortable { padding-inline: 0; }
.bl-table td.actions-cell .bl-menu-label { display: none; }
.bl-table td.actions-cell .bl-menu-btn { min-width: 40px; justify-content: center; }
@media (max-width: 760px) { .bl-table td.actions-cell .bl-menu-label { display: inline; } }

/* ---- billing documents: preview frame, language switch, radios ---- */
.modal.bl-doc-modal { width: min(1040px, 100%); }
.bl-doc-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bl-seg { display: inline-flex; gap: 4px; }
.bl-doc-frame { display: block; width: 100%; height: min(68vh, 760px); border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.bl-radio { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 500; }
.bl-lbl { display: block; font-weight: 600; margin-bottom: 4px; }

/* Financial reports: reconciliation banner and secondary links */
.fr-recon { margin: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2, var(--surface)); font-weight: 600; }
.fr-recon.ok { border-color: var(--success, #1a7f4b); color: var(--success, #1a7f4b); }
.fr-recon.bad { border-color: var(--danger, #b42318); color: var(--danger, #b42318); }
.fr-aux { margin-inline-start: 6px; text-decoration: none; opacity: .7; }
.fr-controls .fr-custom { flex-wrap: wrap; }
@media print { .fr-recon { border: 0; padding: 0; } }

/* ---- System Settings > Email & SMTP (public/js/email_settings.js) ---- */
.es-wrap { display: grid; gap: 14px; min-width: 0; }
.es-wrap [hidden] { display: none !important; }
.es-note { padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.55; border: 1px solid var(--line); background: #f7f9fd; overflow-wrap: anywhere; }
.es-note-ok { background: var(--success-bg); border-color: #bfe6d3; color: #0d5c42; }
.es-note-warn { background: #fff7e6; border-color: #f5d28a; color: #7a4d00; }
.es-note-err { background: var(--pastel-red); border-color: #f4c7cd; color: var(--danger); }
.es-note-info { background: var(--pastel-sky); border-color: #cfe5fb; color: #1d4a7a; }
.es-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.es-tab { border: 0; background: transparent; padding: 9px 14px; border-radius: 10px; font: inherit; font-weight: 650; color: #34445e; cursor: pointer; min-height: 40px; }
.es-tab:hover { background: var(--pastel-blue); }
.es-tab.is-active { background: var(--navy-800); color: #fff; }
.es-tab:focus-visible { outline: 3px solid rgba(201, 163, 73, 0.55); outline-offset: 1px; }
.es-body { display: grid; gap: 16px; min-width: 0; }
.es-card { padding: 18px; min-width: 0; }
.es-card .card-head { align-items: flex-start; }
.es-card h3 { margin: 0 0 4px; font-size: 17px; }
.es-card h4 { margin: 14px 0 6px; font-size: 14px; }
.es-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px 20px; }
.es-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-bottom: 12px; }
.es-span { grid-column: 1 / -1; }
.es-field { min-width: 0; }
.es-field .input, .es-field select { width: 100%; min-width: 0; }
.es-field select { height: 42px; }
.es-field .input:not(textarea) { height: 42px; }
.es-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.es-ctl .input { flex: 1 1 200px; min-width: 0; }
.es-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.es-check { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.es-kinds { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.es-kind { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.es-kind .hint-text { margin-inline-start: 28px; }
.es-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; word-break: break-word; }
.es-dl { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0 0 12px; align-items: center; }
.es-dl dt { color: var(--muted); font-size: 13px; }
.es-dl dd { margin: 0; overflow-wrap: anywhere; }
.es-from { margin: 12px 0 0; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px; background: #fbfcfe; overflow-wrap: anywhere; }
.es-dns { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.es-dns-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fbfcfe; }
.es-dns-row p { margin: 6px 0; }
.es-dns-row code { display: block; padding: 6px 8px; border-radius: 8px; background: #eef3fb; }
.es-dns-sum { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.es-prev { display: block; width: 100%; height: min(70vh, 720px); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.es-prev-subject { margin: 0 0 10px; overflow-wrap: anywhere; }
.es-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.es-tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fbfcfe; }
.es-tile-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.es-tile-row { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.es-tile-n small { color: var(--muted); }
.es-last { margin: 10px 0; font-size: 13px; }
.es-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.es-filters select, .es-filters .input { height: 40px; min-width: 150px; flex: 0 1 220px; }
.es-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.es-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.es-table th, .es-table td { padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.es-table th { color: var(--muted); font-weight: 650; font-size: 12.5px; white-space: nowrap; position: relative; } /* position: the hidden label inside stays within the scrolling table box (an absolutely placed child is not clipped by it otherwise) */
.es-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.es-events { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; font-size: 13px; }
.es-events time { color: var(--muted); }
@container ss (max-width: 640px) {
  .es-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .es-dl dd { margin-bottom: 8px; }
  .es-tab { flex: 1 1 auto; }
}

/* ---- Company page: POS users and account access (public/js/pos_access.js) ---- */
.pa-intro { margin: 0 0 12px; max-width: 70ch; }
.pa-ws { margin: 18px 0 8px; font-size: 15.5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pa-wrap { overflow-x: auto; }
.pa-table td, .pa-table th { vertical-align: top; }
.pa-mail { font-size: 12.5px; display: inline-block; max-width: 34ch; }
.pa-mail-failed { color: var(--danger); }
.pa-why { font-size: 12.5px; display: inline-block; max-width: 28ch; }
.pa-lang label { display: inline-flex; gap: 6px; align-items: center; }
.pa-confirm { margin-top: 10px; cursor: pointer; }
.pa-confirm input { margin-top: 3px; flex: none; }
@media (max-width: 760px) {
  .pa-table thead { display: none; }
  .pa-table, .pa-table tbody { display: block; width: 100%; }
  .pa-table tr { display: block; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 6px 12px; background: var(--surface); }
  .pa-table td { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border: 0; text-align: end; min-width: 0; overflow-wrap: anywhere; }
  .pa-table td::before { content: attr(data-label); font-weight: 650; color: var(--muted); text-align: start; flex: none; max-width: 40%; }
  .pa-table td + td { border-top: 1px solid var(--line); }
  .pa-mail, .pa-why { max-width: none; }
}

/* ---------- Notifications & Announcements (Customer Support) ---------- */
.an-page { min-width: 0; container: an / inline-size; }
.an-page [hidden] { display: none !important; }
.an-tabs { margin-bottom: 16px; max-width: 100%; }
.an-tabs .seg, .an-status .seg { text-decoration: none; display: inline-flex; align-items: center; }
.an-status { margin-bottom: 14px; }
.an-body { min-width: 0; }
.an-card-sec { margin-bottom: 16px; }
.an-card-sec h2 { margin: 0 0 12px; font-size: 16px; }
.an-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.an-sec-head h2 { margin: 0; }
.an-actions { align-items: center; }
.an-dl { margin: 0 0 8px; }
.an-pager { justify-content: space-between; margin-top: 12px; }
.an-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; margin: 10px 0 6px; }
.an-tile { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); min-width: 0; }
.an-tile-main { background: var(--gold-soft); border-color: #ecd9a6; }
.an-tile-label { font-size: 12px; color: var(--muted); font-weight: 650; margin-bottom: 4px; overflow-wrap: anywhere; }
.an-tile-value { font-size: 24px; font-weight: 750; line-height: 1.2; }
.an-tile-sub { font-size: 12px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.an-rates { margin: 8px 0; }
.an-how { margin-top: 10px; }
.an-how summary { cursor: pointer; font-weight: 650; }
.an-how ul { margin: 8px 0 0; padding-inline-start: 20px; color: #34445e; }
.an-prev-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.an-prev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 16px; }
.an-frame { display: grid; place-items: start center; padding: 18px; border-radius: 14px; background: linear-gradient(180deg, #e9eef6, #f4f6fa); border: 1px dashed #c3cde0; min-width: 0; }
.an-frame .an-card { width: min(380px, 100%); }
.an-frame.an-mobile .an-card { width: min(340px, 100%); border-radius: 20px 20px 14px 14px; }

/* editor */
.an-ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 20px; align-items: start; }
.an-ed-form { min-width: 0; }
.an-prev-side { position: sticky; top: 76px; min-width: 0; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px 18px; }
.an-lang { display: grid; gap: 14px; }
.an-counter { align-self: flex-end; font-size: 12px; }
.an-radios { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.an-radios-col { flex-direction: column; }
.an-radio, .an-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; min-height: 28px; }
.an-radio input, .an-check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--navy-800); flex: none; }
.an-selected { display: grid; gap: 14px; margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.an-picklist { max-height: 190px; overflow: auto; padding: 8px 10px; border: 1px solid #cfd8e6; border-radius: var(--radius-sm); background: #fff; display: grid; gap: 2px; }
.an-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.an-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.an-chip-sel { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--pastel-blue, #e8effd); font-size: 13px; }
.an-chip-x { border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 999px; color: #34445e; }
.an-chip-x:hover { background: rgba(15, 28, 51, 0.1); }
.an-count { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--gold-soft); border: 1px solid #ecd9a6; }
.an-count h3 { margin: 0 0 4px; font-size: 14px; }
.an-count p { margin: 4px 0; }
.an-image { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; }
.an-image-box { display: grid; place-items: center; min-height: 100px; padding: 6px; border: 1px dashed #c3cde0; border-radius: var(--radius-sm); background: var(--bg); }
.an-image-box img { display: block; max-width: 100%; max-height: 160px; border-radius: 8px; }
.an-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 10px 30px rgba(15, 28, 51, 0.2); }
.an-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.an-bar-msg, .an-unsaved { font-weight: 650; }
.an-unsaved { color: var(--warn); }
.an-set .an-grid { align-items: start; }
@media (max-width: 1100px) { .an-ed-grid { grid-template-columns: minmax(0, 1fr); } .an-prev-side { position: static; } }
@media (max-width: 640px) { .an-image { grid-template-columns: minmax(0, 1fr); } .an-bar-actions { margin-inline-start: 0; width: 100%; } .an-bar-actions .btn { flex: 1 1 auto; } }
.an-page .page-head > div:first-child { flex: 1 1 420px; min-width: 0; }
table.data.an-table th, table.data.an-table td { white-space: normal; overflow-wrap: anywhere; padding: 10px 12px; vertical-align: top; }
table.data.an-table th.num, table.data.an-table td.num { text-align: end; }
.an-table td a { overflow-wrap: anywhere; }
@container an (max-width: 880px) {
  .an-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .an-table, .an-table tbody, .an-table tr, .an-table td { display: block; width: 100%; box-sizing: border-box; }
  .an-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .an-table tbody tr:last-child { border-bottom: 0; }
  table.data.an-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0; padding: 5px 14px; text-align: end; }
  .an-table td::before { content: attr(data-label); flex: 0 0 auto; max-width: 44%; font-size: 12px; font-weight: 700; color: var(--muted); text-align: start; }
  .an-table td:empty { display: none; }
}