:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-soft: #f8f9fa;
  --sidebar: #f8f9fa;
  --text: #343a40;
  --text-strong: #212529;
  --muted: #6c757d;
  --line: #dee2e6;
  --line-soft: #e9ecef;
  --primary: #0d6efd;
  --primary-dark: #0b5ed7;
  --green: #198754;
  --teal: #20c997;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --red: #dc3545;
  --purple: #6f42c1;
  --cyan: #0dcaf0;
  --grey: #6c757d;
  --shadow: 0 1px 4px rgba(0, 0, 0, .09);
  --shadow-raised: 0 5px 16px rgba(0, 0, 0, .12);
  --radius: 6px;
  --sidebar-width: 248px;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; font-size: 16px; }
body {
  margin: 0;
  min-height: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--primary); }
.hidden { display: none !important; }
.muted { color: var(--muted) !important; }

/* Login */
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(520px, 1.15fr) minmax(420px, .85fr);
  background: #eef2f6;
}
.login-art {
  position: relative;
  overflow: hidden;
  padding: 56px 66px;
  color: #fff;
  background: linear-gradient(145deg, #0d6efd 0%, #0b5ed7 48%, #084298 100%);
}
.login-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 42px 42px;
}
.brand-lockup, .mobile-brand { display: flex; align-items: center; gap: 13px; position: relative; z-index: 2; }
.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #fff;
  color: var(--primary);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  font-size: 23px;
}
.brand-lockup strong { display: block; font-size: 24px; line-height: 1.1; }
.brand-lockup span { display: block; margin-top: 4px; color: rgba(255,255,255,.78); font-size: 13px; }
.login-copy { position: relative; z-index: 2; max-width: 680px; margin-top: 24vh; }
.eyebrow { color: #dbeafe; font-size: 12px; font-weight: 700; letter-spacing: .13em; }
.login-copy h1 { margin: 17px 0 22px; font-size: clamp(42px, 4.8vw, 66px); line-height: 1.06; letter-spacing: -.045em; }
.login-copy p { max-width: 640px; margin: 0; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.7; }
.login-features { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 31px; color: #fff; font-size: 14px; }
.login-features i { margin-right: 6px; }
.signal { position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; right: -20%; top: 12%; aspect-ratio: 1; }
.signal-a { width: 520px; }
.signal-b { width: 720px; right: -29%; top: 4%; }
.signal-c { width: 920px; right: -38%; top: -7%; }
.login-panel { display: grid; place-items: center; padding: 42px; background: #f4f6f9; }
.login-card { width: min(450px, 100%); padding: 43px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 18px 52px rgba(28,39,55,.16); }
.mobile-brand { display: none; margin-bottom: 30px; }
.login-card .eyebrow { color: var(--primary); }
.login-card h2 { margin: 12px 0 7px; color: var(--text-strong); font-size: 30px; font-weight: 600; }
.login-card > p { margin: 0 0 28px; font-size: 14px; }
.login-card label, .form-grid label, .field { display: grid; gap: 7px; color: #495057; font-size: 13px; font-weight: 600; }
.login-card label + label { margin-top: 18px; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  color: var(--text);
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  font-size: 14px;
}
input:focus, select:focus, textarea:focus { border-color: #86b7fe; box-shadow: 0 0 0 3px rgba(13,110,253,.14); }
textarea { min-height: 104px; resize: vertical; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 44px; }
.password-wrap button { position: absolute; top: 4px; right: 5px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); }
.form-error { min-height: 20px; margin-top: 10px; color: var(--red); font-size: 13px; }
.demo-note { margin-top: 19px; padding: 11px 13px; color: #495057; background: #f8f9fa; border: 1px solid var(--line-soft); border-radius: 4px; font-size: 13px; }

/* App shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed;
  z-index: 50;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  transition: transform .24s ease;
}
.sidebar-brand { min-height: 68px; display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.brand-mark.small { width: 38px; height: 38px; border-radius: 6px; color: #fff; background: var(--primary); box-shadow: none; font-size: 17px; flex: 0 0 auto; }
.sidebar-brand strong { display: block; color: var(--text-strong); font-size: 17px; line-height: 1.2; }
.sidebar-brand span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.sidebar-search { position: relative; padding: 12px 14px 7px; }
.sidebar-search > i { position: absolute; left: 25px; top: 25px; color: var(--muted); font-size: 13px; }
.sidebar-search input { min-height: 38px; padding: 8px 10px 8px 34px; background: #fff; font-size: 13px; }
.nav-root { flex: 1; overflow-y: auto; padding: 4px 0 20px; scrollbar-width: thin; }
.nav-group { margin: 0; }
.nav-parent, .nav-link {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 15px;
  color: #343a40;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .18s, color .18s, border-color .18s;
}
.nav-parent:hover, .nav-link:hover, .nav-link.active, .nav-group.open > .nav-parent { color: var(--primary); background: #e9ecef; border-left-color: var(--primary); }
.nav-icon { width: 21px; flex: 0 0 21px; color: #495057; text-align: center; font-size: 14px; }
.nav-parent:hover .nav-icon, .nav-link:hover .nav-icon, .nav-link.active .nav-icon, .nav-group.open > .nav-parent .nav-icon { color: var(--primary); }
.chevron { margin-left: auto; color: var(--muted); font-size: 11px; transition: transform .2s; }
.nav-group.open .chevron { transform: rotate(180deg); }
.nav-children { display: none; padding: 6px 0 7px 31px; background: rgba(0,0,0,.018); }
.nav-group.open .nav-children { display: block; }
.nav-child {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 14px 7px 9px;
  color: #495057;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 13px;
}
.nav-child .submenu-icon { color: var(--muted); font-size: 7px; }
.nav-child:hover, .nav-child.active { color: var(--primary-dark); }
.nav-child:hover .submenu-icon, .nav-child.active .submenu-icon { color: var(--primary); }
.sidebar-footer { padding: 12px 14px; border-top: 1px solid var(--line); }
.router-pulse { display: flex; align-items: center; gap: 10px; padding: 10px 11px; background: #fff; border: 1px solid var(--line-soft); border-radius: 5px; }
.router-pulse > i { width: 9px; height: 9px; flex: 0 0 auto; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(25,135,84,.13); }
.router-pulse strong, .router-pulse small { display: block; }
.router-pulse strong { color: var(--text); font-size: 12px; }
.router-pulse small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.workspace { width: calc(100% - var(--sidebar-width)); min-height: 100vh; margin-left: var(--sidebar-width); display: flex; flex-direction: column; }
.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-left { min-width: 260px; flex: 1; }
.icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; color: #495057; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.icon-btn:hover { color: var(--primary); background: #f8f9fa; }
.global-search { position: relative; width: min(420px, 40vw); }
.global-search > i { position: absolute; left: 13px; top: 13px; color: var(--muted); font-size: 13px; }
.global-search input { min-height: 40px; padding-left: 36px; background: #fff; font-size: 13px; }
.global-results { position: absolute; top: 45px; right: 0; left: 0; max-height: 340px; overflow: auto; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow-raised); }
.global-result { display: flex; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.global-result:hover { background: #f1f3f5; }
.global-result small { display: block; margin-top: 2px; color: var(--muted); }
.quick-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; color: #343a40; background: transparent; border: 0; border-radius: 4px; font-size: 13px; }
.quick-link:hover { color: var(--primary); background: #f1f3f5; }
.quick-link > i { color: var(--primary); }
.notification { position: relative; }
.notification .notification-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; color: #fff; background: var(--red); border: 2px solid #fff; border-radius: 10px; font-size: 9px; line-height: 1; }
.user-menu-wrap { position: relative; }
.user-button { display: flex; align-items: center; gap: 9px; padding: 3px 5px; color: var(--text); background: transparent; border: 0; text-align: left; }
.user-button > span { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--primary); border-radius: 50%; font-weight: 700; }
.user-button strong, .user-button small { display: block; }
.user-button strong { font-size: 13px; }
.user-button small { margin-top: 1px; color: var(--muted); font-size: 11px; }
.user-button > i { color: var(--muted); font-size: 11px; }
.user-dropdown { position: absolute; top: 48px; right: 0; width: 165px; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow-raised); }
.user-dropdown button { width: 100%; padding: 9px 10px; color: var(--text); background: transparent; border: 0; border-radius: 3px; text-align: left; font-size: 13px; }
.user-dropdown button:hover { color: var(--primary); background: #f1f3f5; }

/* Main content */
.content { flex: 1; padding: 22px; overflow-x: hidden; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--line-soft); }
.breadcrumbs { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.breadcrumbs span:first-child { color: var(--primary); }
.breadcrumbs b { font-size: 12px; font-weight: 400; }
.page-head h1 { margin: 0; color: var(--text-strong); font-size: 27px; line-height: 1.25; font-weight: 500; }
.page-head h1 span { margin-left: 7px; color: var(--muted); font-size: 14px; font-weight: 400; }
.head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; border: 1px solid transparent; border-radius: 4px; font-size: 13px; font-weight: 600; transition: background-color .16s, border-color .16s, transform .16s; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { color: #fff; background: var(--primary); border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn.success { color: #fff; background: var(--green); border-color: var(--green); }
.btn.danger { color: #fff; background: var(--red); border-color: var(--red); }
.btn.warning { color: #212529; background: var(--yellow); border-color: var(--yellow); }
.btn.secondary { color: #343a40; background: #e9ecef; border-color: #e9ecef; }
.btn.outline { color: #343a40; background: #fff; border-color: #ced4da; }
.btn.outline:hover { color: var(--primary); border-color: #86b7fe; }
.btn.full { width: 100%; justify-content: space-between; margin-top: 25px; min-height: 46px; padding: 11px 15px; font-size: 14px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 15px; margin-bottom: 20px; }
.metric-strip { display: grid; grid-template-columns: repeat(5, minmax(175px, 1fr)); gap: 13px; margin-bottom: 18px; }
.stat-card {
  position: relative;
  min-height: 126px;
  overflow: hidden;
  padding: 16px 18px;
  color: var(--stat-card-text, #fff);
  background: var(--accent);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,.10);
  transition: transform .18s, box-shadow .18s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,.14); }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; }
.stat-icon { position: absolute; right: 11px; bottom: 6px; color: var(--stat-card-text, #fff); font-size: 58px; line-height: 1; opacity: .18; transform: rotate(-8deg); }
.stat-trend { position: relative; z-index: 2; margin-left: auto; padding: 3px 6px; color: var(--stat-card-text, #fff); background: rgba(255,255,255,.16); border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.stat-card > strong { position: relative; z-index: 2; display: block; max-width: calc(100% - 25px); margin-top: 7px; font-size: 24px; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.stat-card .label { position: relative; z-index: 2; display: block; margin-top: 5px; font-size: 13px; font-weight: 600; }
.stat-card small { position: relative; z-index: 2; display: block; max-width: calc(100% - 38px); margin-top: 5px; color: var(--stat-card-muted, rgba(255,255,255,.82)); font-size: 11.5px; line-height: 1.35; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 18px; margin-bottom: 18px; }
.split-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.panel { min-width: 0; background: #fff; border: 1px solid var(--line-soft); border-radius: 5px; box-shadow: var(--shadow); }
.panel-head { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.panel-head h3 { margin: 0; color: #495057; font-size: 16px; font-weight: 600; }
.panel-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.panel-body { padding: 16px; }
.chart { min-height: 250px; display: flex; align-items: flex-end; gap: 11px; padding: 18px 8px 4px; }
.bar-wrap { flex: 1; min-width: 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.bar { width: min(42px, 76%); min-height: 2px; background: var(--primary); border-radius: 4px 4px 0 0; }
.bar-label { color: var(--muted); font-size: 11px; white-space: nowrap; }
.activity-list { padding: 4px 14px; }
.activity-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 12px 2px; border-bottom: 1px solid var(--line-soft); }
.activity-row:last-child { border-bottom: 0; }
.activity-avatar { width: 38px; height: 38px; display: grid; place-items: center; color: var(--primary); background: #e7f1ff; border-radius: 4px; font-size: 15px; font-weight: 700; }
.activity-row strong { display: block; font-size: 13px; }
.activity-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.activity-row > span:last-child { font-size: 13px; font-weight: 600; }

/* Lists and tables */
.toolbar { min-height: 59px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.toolbar-left, .toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.toolbar label { display: flex; align-items: center; gap: 7px; color: #495057; font-size: 13px; }
.toolbar input, .toolbar select { min-height: 38px; }
.filter-select { width: auto; min-width: 86px; }
.search-box { position: relative; }
.search-box > i { position: absolute; left: 12px; top: 12px; color: var(--muted); font-size: 13px; }
.search-box input { width: 245px; padding-left: 34px; }
.table-wrap { width: 100%; overflow: auto; }
.data-table { width: 100%; min-width: 860px; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px 13px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; white-space: nowrap; }
.data-table th { color: #495057; background: #f8f9fa; font-size: 12.5px; font-weight: 700; }
.data-table td { color: #343a40; font-size: 13px; }
.data-table tbody tr:hover { background: #f8fbff; }
.data-table td a { color: var(--primary); font-weight: 600; text-decoration: none; }
.data-table td a:hover { text-decoration: underline; }
.table-empty { padding: 34px 20px; color: var(--muted); text-align: center; font-size: 13px; }
.table-pagination { min-height: 58px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; color: var(--muted); font-size: 12.5px; }
.data-table tfoot .client-due-total-row td { padding: 0; border-top: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--panel)); }
.client-due-total { min-height: 52px; padding: 12px 16px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; font-size: 14px; }
.client-due-total span { color: var(--muted); font-weight: 700; }
.client-due-total strong { color: var(--text); font-size: 17px; white-space: nowrap; }
.pagination-buttons { display: flex; gap: 4px; }
.pagination-buttons button { min-width: 34px; height: 34px; padding: 0 8px; color: #495057; background: #fff; border: 1px solid var(--line); border-radius: 3px; font-size: 12px; }
.pagination-buttons button.active, .pagination-buttons button:hover { color: #fff; background: var(--primary); border-color: var(--primary); }
.row-actions { display: flex; align-items: center; gap: 5px; }
.action-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; color: #495057; background: #fff; border: 1px solid #ced4da; border-radius: 4px; font-size: 12px; }
.action-btn:hover { color: #fff; background: var(--primary); border-color: var(--primary); }
.action-btn.danger:hover { background: var(--red); border-color: var(--red); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: capitalize; }
.badge.active, .badge.paid, .badge.solved, .badge.online, .badge.credit, .badge.running { color: #0f5132; background: #d1e7dd; }
.badge.inactive, .badge.unpaid, .badge.offline, .badge.deleted, .badge.debit, .badge.old, .badge.disconnected { color: #842029; background: #f8d7da; }
.badge.due, .badge.pending, .badge.medium, .badge.advance { color: #664d03; background: #fff3cd; }
.badge.high, .badge.urgent { color: #842029; background: #f8d7da; }
.badge.low, .badge.open { color: #055160; background: #cff4fc; }
.toggle { position: relative; width: 38px; height: 21px; padding: 0; background: #adb5bd; border: 0; border-radius: 11px; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; background: #fff; border-radius: 50%; transition: left .18s; }
.toggle.on { background: var(--green); }
.toggle.on::after { left: 20px; }
.online-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(25,135,84,.12); }

/* Forms */
.form-panel { padding: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.summary-sheet { padding: 17px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.summary-row.total { padding-top: 14px; color: var(--text-strong); border-bottom: 0; font-size: 15px; font-weight: 700; }

/* Modal and details */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(33,37,41,.62); }
.modal { width: min(880px, 96vw); max-height: 92vh; overflow: auto; background: #fff; border-radius: 6px; box-shadow: 0 28px 75px rgba(0,0,0,.28); }
.modal.large { width: min(1140px, 97vw); }
.modal-head { position: sticky; z-index: 3; top: 0; min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; color: var(--text-strong); font-size: 17px; font-weight: 600; }
.modal-close { width: 34px; height: 34px; display: grid; place-items: center; color: #495057; background: #f1f3f5; border: 0; border-radius: 4px; }
.modal-body { padding: 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--line); }
.tabs { display: flex; gap: 3px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tab { padding: 10px 12px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 13px; }
.tab.active { color: var(--primary); border-color: var(--primary); font-weight: 600; }
.profile-grid { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 18px; }
.profile-card { padding: 24px 20px; color: #fff; background: linear-gradient(145deg, #0d6efd, #084298); border-radius: 5px; text-align: center; }
.profile-avatar { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 13px; color: var(--primary); background: #fff; border-radius: 50%; font-size: 26px; font-weight: 700; }
.profile-card h3 { margin: 0; font-size: 19px; }
.profile-card p { margin: 6px 0 12px; color: rgba(255,255,255,.78); font-size: 13px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.detail-item { padding: 11px 12px; background: #f8f9fa; border: 1px solid var(--line-soft); border-radius: 4px; }
.detail-item span, .detail-item strong { display: block; }
.detail-item span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.detail-item strong { margin-top: 4px; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }

/* Invoice */
.invoice-paper { padding: 30px; color: #273147; background: #fff; }
.invoice-header { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 2px solid #343a40; }
.invoice-company h2, .invoice-meta h2 { margin: 0 0 6px; font-size: 24px; }
.invoice-company p, .invoice-meta p { margin: 3px 0; color: #667287; font-size: 12.5px; }
.invoice-meta { text-align: right; }
.invoice-client { display: flex; justify-content: space-between; gap: 20px; margin: 18px 0; padding: 14px; background: #f8f9fa; border-radius: 4px; }
.invoice-client p { margin: 3px 0; font-size: 12.5px; }
.invoice-table { width: 100%; border-collapse: collapse; }
.invoice-table th, .invoice-table td { padding: 11px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12.5px; }
.invoice-table th { background: #f8f9fa; }
.invoice-totals { width: 310px; margin-top: 16px; margin-left: auto; }
.invoice-totals div { display: flex; justify-content: space-between; padding: 8px 9px; font-size: 12.5px; }
.invoice-totals .grand { color: #fff; background: #343a40; border-radius: 4px; font-weight: 700; }

/* Feedback */
.page-loading { min-height: 240px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--muted); font-size: 14px; }
.spinner { width: 35px; height: 35px; border: 3px solid #dbe5f3; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast-root { position: fixed; z-index: 200; top: 18px; right: 18px; display: grid; gap: 8px; }
.toast { min-width: 290px; max-width: 400px; padding: 12px 14px; color: #fff; background: #343a40; border-left: 4px solid var(--primary); border-radius: 4px; box-shadow: var(--shadow-raised); font-size: 13px; animation: toastIn .2s ease; }
.toast.error { border-color: var(--red); }
.toast.success { border-color: var(--green); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-7px); } }
.app-footer { min-height: 45px; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 10px 20px; color: var(--muted); background: #fff; border-top: 1px solid var(--line); font-size: 12px; }
.mobile-only { display: none; }

@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(190px,1fr)); }
  .metric-strip { grid-template-columns: repeat(3, minmax(180px,1fr)); }
}
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); box-shadow: 9px 0 30px rgba(0,0,0,.18); }
  .sidebar.open { transform: translateX(0); }
  .workspace { width: 100%; margin-left: 0; }
  .mobile-only { display: inline-grid; }
  .dashboard-grid, .split-panels { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form-grid .span-3 { grid-column: 1 / -1; }
  .profile-grid { grid-template-columns: 1fr; }
  .login-shell { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-panel { min-height: 100vh; }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .content { padding: 15px; }
  .topbar { padding: 8px 12px; }
  .quick-link b, .user-button div, .user-button > i { display: none; }
  .global-search { width: min(58vw, 360px); }
  .stats-grid, .metric-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-head { align-items: flex-start; flex-direction: column; }
  .head-actions { width: 100%; justify-content: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2, .form-grid .span-3 { grid-column: auto; }
  .login-card { padding: 32px 25px; }
  .toolbar { align-items: stretch; }
  .toolbar-left, .toolbar-right { width: 100%; }
  .search-box { flex: 1; }
  .search-box input { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 7px; }
  .app-footer { display: none; }
}
@media (max-width: 500px) {
  .stats-grid, .metric-strip { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 23px; }
  .page-head h1 span { display: block; margin: 4px 0 0; }
  .topbar-right { gap: 2px; }
  .global-search { width: 53vw; }
}

@media print {
  body > *:not(#modal-root) { display: none !important; }
  .modal-backdrop { position: static; padding: 0; background: none; }
  .modal { width: 100%; max-height: none; box-shadow: none; border-radius: 0; }
  .modal-head, .modal-foot { display: none; }
  .modal-body { padding: 0; }
  .invoice-paper { padding: 10mm; }
}

/* Fresh workspace maintenance */
.danger-zone { border: 1px solid #f1b8be; }
.danger-zone .panel-head { background: #fff7f8; border-bottom-color: #f1c7cc; }
.danger-zone .panel-head h3 { color: #a61e2d; }
.danger-zone .panel-head h3 i { margin-right: 8px; }
.reset-warning { margin-bottom: 18px; padding: 14px 16px; border-left: 4px solid #0d6efd; background: #f2f7ff; color: #23354d; line-height: 1.55; }
.preserve-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.preserve-option { display: flex; align-items: flex-start; gap: 11px; min-height: 82px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 6px; background: #fff; cursor: pointer; }
.preserve-option:hover { border-color: #9fc1ff; background: #f8fbff; }
.preserve-option input { width: 18px; height: 18px; margin-top: 2px; accent-color: #0d6efd; }
.preserve-option span { display: grid; gap: 5px; }
.preserve-option strong { color: #27364a; font-size: 14px; }
.preserve-option small { color: var(--muted); line-height: 1.45; }
.reset-confirmation { margin-top: 5px; }
.reset-list { display: grid; gap: 5px; margin-top: 17px; padding: 13px 15px; border: 1px dashed #dc3545; border-radius: 5px; color: #7a2630; background: #fffafa; line-height: 1.5; }
.maintenance-counts .stat-card { min-height: 105px; }
@media (max-width: 760px) { .preserve-grid { grid-template-columns: 1fr; } }
.admin-brand-mark img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:inherit}.branding-settings{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center;margin-bottom:24px;padding:18px;background:#f8f9fa;border:1px solid var(--line-soft);border-radius:6px}.company-logo-preview{width:160px;height:110px;display:grid;place-items:center;object-fit:contain;padding:8px;background:#fff;border:1px solid var(--line);border-radius:6px}.company-logo-preview.empty{color:var(--muted);font-size:12px;text-align:center}.company-logo-preview.empty i{display:block;margin-bottom:7px;font-size:28px}.branding-upload{display:grid;gap:8px}.branding-upload small{color:var(--muted);font-size:12px}.inline-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.inline-check input{width:auto;min-height:auto}.action-btn.success{color:var(--green);border-color:rgba(25,135,84,.35)}.action-btn.success:hover{color:#fff;background:var(--green)}
@media(max-width:700px){.branding-settings{grid-template-columns:1fr}.company-logo-preview{width:100%}}
.profile-avatar{overflow:hidden}.profile-avatar img{width:100%;height:100%;object-fit:cover}
.invoice-logo{width:78px;height:54px;object-fit:contain;margin-bottom:8px}

/* Theme engine and super-admin appearance manager */
:root{
  --sidebar-text:var(--text);--topbar-bg:var(--surface);--topbar-text:var(--text);--input-bg:#fff;--input-text:var(--text);
  --login-page-bg:#eef2f6;--login-panel-bg:#f4f6f9;--login-card-bg:#fff;--login-text:#212529;
  --login-hero-start:#0d6efd;--login-hero-end:#084298;--button-text:#fff;
  --stat-total:#0d6efd;--stat-running:#20c997;--stat-online:#0dcaf0;--stat-inactive:#dc3545;--stat-billing:#6f42c1;--stat-collected:#198754;--stat-due:#fd7e14;--stat-profit:#2563eb;--stat-card-text:#fff;--stat-card-muted:#eaf2ff;
}
.theme-mode-toggle{position:fixed;z-index:2500;top:12px;right:14px;min-width:88px;height:38px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 13px;color:var(--topbar-text);background:color-mix(in srgb,var(--topbar-bg) 92%,transparent);border:1px solid var(--line);border-radius:999px;box-shadow:0 5px 18px rgba(0,0,0,.14);backdrop-filter:blur(14px);font-size:13px;font-weight:700}.theme-mode-toggle:hover{color:var(--button-text);background:var(--primary);border-color:var(--primary)}.theme-mode-toggle i{font-size:14px}
.login-shell{background:var(--login-page-bg)}.login-panel{background:var(--login-panel-bg)}.login-card{color:var(--login-text);background:var(--login-card-bg)}.login-card h2{color:var(--login-text)}
.login-art{background:linear-gradient(145deg,var(--login-hero-start),var(--login-hero-end));background-repeat:no-repeat;background-size:cover}.login-art::before{content:"";position:absolute;inset:0;pointer-events:none}.login-art>*{position:relative;z-index:2}
.topbar{color:var(--topbar-text);background:var(--topbar-bg)}.sidebar{color:var(--sidebar-text);background:var(--sidebar)}
input,select,textarea{color:var(--input-text);background:var(--input-bg);border-color:var(--line)}input::placeholder,textarea::placeholder{color:var(--muted)}
.btn.primary{color:var(--button-text)}
body[data-theme-mode="dark"]{color-scheme:dark}.workspace,.content{background:var(--bg)}body[data-theme-mode="dark"] .panel,body[data-theme-mode="dark"] .login-card,body[data-theme-mode="dark"] .modal,body[data-theme-mode="dark"] .table-card,body[data-theme-mode="dark"] .dashboard-card{background:var(--surface);color:var(--text)}body[data-theme-mode="dark"] table,body[data-theme-mode="dark"] .data-table{color:var(--text)}body[data-theme-mode="dark"] th{color:var(--text-strong);background:var(--surface-soft)}body[data-theme-mode="dark"] td{border-color:var(--line)}body[data-theme-mode="dark"] .nav-parent,body[data-theme-mode="dark"] .nav-link,body[data-theme-mode="dark"] .nav-child{color:var(--sidebar-text)}body[data-theme-mode="dark"] .nav-icon{color:var(--muted)}body[data-theme-mode="dark"] .nav-parent:hover,body[data-theme-mode="dark"] .nav-link:hover,body[data-theme-mode="dark"] .nav-link.active,body[data-theme-mode="dark"] .nav-group.open>.nav-parent{background:var(--surface-soft);color:var(--primary)}body[data-theme-mode="dark"] .global-search,body[data-theme-mode="dark"] .global-results,body[data-theme-mode="dark"] .user-dropdown,body[data-theme-mode="dark"] .sidebar-search input{background:var(--input-bg);color:var(--input-text)}body[data-theme-mode="dark"] .app-footer,body[data-theme-mode="dark"] .panel-head,body[data-theme-mode="dark"] .modal-head,body[data-theme-mode="dark"] .modal-foot{background:var(--surface);border-color:var(--line)}body[data-theme-mode="dark"] .demo-note,body[data-theme-mode="dark"] .table-toolbar,body[data-theme-mode="dark"] .form-panel,body[data-theme-mode="dark"] .empty-state{background:var(--surface-soft);color:var(--text)}

.theme-manager{overflow:hidden}.theme-manager-body{padding:0 20px 24px}.theme-portal-tabs{display:flex;gap:8px;padding:15px 20px;border-bottom:1px solid var(--line);background:var(--surface-soft)}.theme-portal-tabs button{min-height:42px;padding:8px 18px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:7px;font-weight:700}.theme-portal-tabs button.active{color:var(--button-text);background:var(--primary);border-color:var(--primary)}.theme-editor-form{padding-top:20px}.theme-editor-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px;padding:20px;color:var(--text);background:var(--surface-soft);border:1px solid var(--line);border-radius:10px}.theme-editor-intro h2{margin:6px 0 5px;color:var(--text-strong);font-size:26px}.theme-editor-intro p{margin:0;color:var(--muted)}.theme-preview-mini{width:230px;min-height:78px;display:flex;align-items:center;gap:12px;padding:13px;color:var(--preview-text);background:var(--preview-bg);border:1px solid var(--line);border-radius:10px}.theme-preview-mini>span{width:48px;height:48px;flex:0 0 48px;background:var(--preview-primary);border-radius:10px}.theme-preview-mini b,.theme-preview-mini small{display:block}.theme-preview-mini small{margin-top:4px;color:var(--muted)}.theme-palettes{display:grid;grid-template-columns:1fr 1fr;gap:18px}.theme-palette{overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:10px}.theme-palette>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:var(--surface-soft);border-bottom:1px solid var(--line)}.theme-palette h3,.theme-palette p{margin:0}.theme-palette h3{color:var(--text-strong);font-size:18px}.theme-palette h3 i{margin-right:7px;color:var(--warning)}.theme-palette p{margin-top:4px;color:var(--muted);font-size:12px}.theme-mode-chip{padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.theme-mode-chip.light{color:#735400;background:#fff1b8}.theme-mode-chip.dark{color:#dcecff;background:#203b59}.theme-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}.theme-color-field{display:grid;gap:6px;color:var(--text);font-size:12px;font-weight:700}.theme-color-field>div,.theme-inline-color{display:grid;grid-template-columns:44px 1fr;gap:7px}.theme-color-field input[type="color"],.theme-inline-color input[type="color"]{width:44px;min-height:38px;padding:3px;border-radius:6px}.theme-color-field input[type="text"],.theme-inline-color input[type="text"]{min-height:38px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:lowercase}.theme-login-editor,.theme-advanced{margin-top:18px}.theme-cover-layout{display:grid;grid-template-columns:330px 1fr;gap:20px;padding:20px}.theme-cover-preview{width:100%;height:220px;display:grid;place-items:center;object-fit:cover;background:var(--surface-soft);border:1px solid var(--line);border-radius:9px}.theme-cover-preview.empty{color:var(--muted);align-content:center;gap:8px}.theme-cover-preview.empty i{font-size:32px}.theme-cover-layout output{float:right;color:var(--primary);font-weight:800}.theme-cover-layout input[type="range"]{padding:0}.theme-actions{position:sticky;z-index:5;bottom:0;margin-top:20px;padding:14px 0;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px)}
@media(max-width:1100px){.theme-palettes{grid-template-columns:1fr}.theme-cover-layout{grid-template-columns:1fr}.theme-cover-preview{height:260px}.theme-preview-mini{display:none}}
@media(max-width:700px){.theme-mode-toggle{top:8px;right:8px;min-width:42px;width:42px;padding:0}.theme-mode-toggle span{display:none}.topbar-right{padding-right:45px}.theme-manager-body{padding:0 10px 18px}.theme-portal-tabs{padding:12px}.theme-portal-tabs button{flex:1;padding:8px}.theme-editor-intro{padding:15px}.theme-color-grid{grid-template-columns:1fr;padding:13px}.theme-cover-layout{padding:13px}.theme-actions{display:grid;grid-template-columns:1fr}.theme-actions .btn{width:100%}}
/* Palette variables apply in both light and dark modes */
.panel,.modal,.modal-head,.modal-foot{color:var(--text);background:var(--surface)}.panel-head h3,.data-table th,.data-table td,.modal-head h3{color:var(--text)}.panel-head,.data-table th,.table-toolbar,.form-panel,.demo-note,.modal-close{background:var(--surface-soft)}.data-table th{color:var(--text-strong)}.data-table td{color:var(--text)}.data-table tbody tr:hover{background:var(--surface-soft)}.modal-close{color:var(--text)}.app-footer{color:var(--muted);background:var(--surface);border-color:var(--line)}.sidebar-brand strong{color:var(--text-strong)}.nav-parent,.nav-link{color:var(--sidebar-text)}.sidebar-search input,.global-search input{background:var(--input-bg);color:var(--input-text)}

/* v1.8 header placement and refined dark palette rendering */
.login-theme-toggle{
  position:fixed;
  z-index:2500;
  top:18px;
  right:20px;
}
.topbar-theme-toggle{
  position:static;
  z-index:auto;
  min-width:82px;
  height:38px;
  flex:0 0 auto;
  box-shadow:none;
  backdrop-filter:none;
  background:var(--surface-soft);
}
.topbar-theme-toggle:hover{box-shadow:0 4px 12px rgba(13,110,253,.16)}
body[data-theme-mode="dark"] .icon-btn,
body[data-theme-mode="dark"] .router-pulse,
body[data-theme-mode="dark"] .preserve-option,
body[data-theme-mode="dark"] .branding-settings,
body[data-theme-mode="dark"] .company-logo-preview{
  color:var(--text);
  background:var(--surface);
  border-color:var(--line);
}
body[data-theme-mode="dark"] .quick-link{color:var(--text)}
body[data-theme-mode="dark"] .quick-link:hover,
body[data-theme-mode="dark"] .icon-btn:hover{background:var(--surface-soft)}
body[data-theme-mode="dark"] .user-button{color:var(--text)}
body[data-theme-mode="dark"] .login-card label,
body[data-theme-mode="dark"] .form-grid label,
body[data-theme-mode="dark"] .field{color:var(--text)}
body[data-theme-mode="dark"] .danger-zone .panel-head,
body[data-theme-mode="dark"] .reset-warning,
body[data-theme-mode="dark"] .reset-list{background:var(--surface-soft);border-color:var(--line);color:var(--text)}
body[data-theme-mode="dark"] .stat-card,
body[data-theme-mode="dark"] .panel,
body[data-theme-mode="dark"] .modal{box-shadow:0 10px 26px rgba(0,0,0,.22)}
@media(max-width:1180px){
  .topbar-theme-toggle{min-width:42px;width:42px;padding:0}
  .topbar-theme-toggle span{display:none}
  .quick-link b{display:none}
}
@media(max-width:760px){
  .login-theme-toggle{top:12px;right:12px;min-width:42px;width:42px;padding:0}
  .login-theme-toggle span{display:none}
  .topbar-theme-toggle{display:inline-grid;place-items:center}
}


/* v1.9 admin login repair and fully configurable dashboard stat cards */
body.admin-login-active{
  overflow-x:hidden;
  background:var(--login-page-bg);
}
body.admin-login-active .login-shell{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  isolation:isolate;
  overflow:hidden;
}
body.admin-login-active .login-art,
body.admin-login-active .login-panel{min-width:0;min-height:100vh;min-height:100dvh}
body.admin-login-active .login-panel{
  position:relative;
  z-index:2;
  padding:clamp(28px,5vw,64px);
}
body.admin-login-active .login-card{
  position:relative;
  z-index:3;
  width:min(460px,100%);
  max-height:calc(100dvh - 72px);
  overflow:auto;
  border-color:var(--line);
}
body.admin-login-active .login-card input{
  color:var(--input-text);
  background:var(--input-bg);
}
body.admin-login-active .login-card .demo-note{
  color:var(--text);
  background:var(--surface-soft);
  border-color:var(--line);
}
body.admin-login-active .login-theme-toggle{
  position:absolute;
  top:20px;
  right:22px;
  z-index:20;
  color:var(--login-text);
  background:color-mix(in srgb,var(--login-card-bg) 90%,transparent);
}
body.admin-login-active .login-theme-toggle:hover{color:var(--button-text);background:var(--primary)}
body[data-theme-mode="dark"].admin-login-active .login-panel{background:var(--login-panel-bg)}
body[data-theme-mode="dark"].admin-login-active .login-card{background:var(--login-card-bg);box-shadow:0 24px 60px rgba(0,0,0,.42)}
body[data-theme-mode="dark"].admin-login-active .login-card>p{color:var(--muted)}
body[data-theme-mode="dark"].admin-login-active .password-wrap button{color:var(--muted)}

/* The card's own --accent always wins in light and dark mode. */
.stat-card,
body[data-theme-mode="dark"] .stat-card{
  color:var(--stat-card-text,#fff) !important;
  background-color:var(--accent) !important;
  background-image:linear-gradient(135deg,color-mix(in srgb,var(--accent) 96%,white),var(--accent)) !important;
  border:1px solid color-mix(in srgb,var(--accent) 82%,black);
}
.stat-card strong,.stat-card .label,.stat-card .stat-icon,.stat-card .stat-trend{color:var(--stat-card-text,#fff)}
.stat-card small{color:var(--stat-card-muted,#eaf2ff)}
body[data-theme-mode="dark"] .stat-card{box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 22%,transparent)}

@media(max-width:1024px){
  body.admin-login-active .login-shell{display:grid;grid-template-columns:1fr}
  body.admin-login-active .login-art{display:none}
  body.admin-login-active .login-panel{
    min-height:100dvh;
    padding:72px 22px 30px;
    background:
      radial-gradient(circle at 12% 15%,color-mix(in srgb,var(--primary) 14%,transparent),transparent 34%),
      radial-gradient(circle at 88% 88%,color-mix(in srgb,var(--purple) 12%,transparent),transparent 32%),
      var(--login-panel-bg);
  }
  body.admin-login-active .mobile-brand{display:flex}
  body.admin-login-active .login-theme-toggle{position:absolute;top:16px;right:16px}
}
@media(max-width:520px){
  body.admin-login-active .login-panel{padding:66px 14px 20px;align-items:start}
  body.admin-login-active .login-card{padding:28px 22px;max-height:none;border-radius:14px}
  body.admin-login-active .login-card h2{font-size:26px}
  body.admin-login-active .login-theme-toggle{top:12px;right:12px}
}

.theme-field-section{border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface-soft) 48%,var(--surface))}
.theme-field-section-head{padding:16px 16px 0}
.theme-field-section-head h4{margin:0;color:var(--text-strong);font-size:15px}
.theme-field-section-head p{margin:4px 0 0;color:var(--muted);font-size:12px}
.theme-field-section .theme-color-grid{padding-top:13px}

/* v2.0 resilient admin login layout
   Keeps the page usable on landscape, portrait, ultrawide and high-DPI displays. */
body.admin-login-active {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
body.admin-login-active #login-view.login-shell {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(520px, 1.05fr) minmax(480px, .95fr);
  overflow: hidden;
}
body.admin-login-active .login-art {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: clamp(42px, 4.5vw, 76px);
  overflow: hidden;
}
body.admin-login-active .login-art .brand-lockup {
  flex: 0 0 auto;
}
body.admin-login-active .login-copy {
  width: min(680px, 100%);
  margin: auto 0 clamp(8px, 3vh, 36px);
}
body.admin-login-active .login-copy h1 {
  font-size: clamp(38px, 4.2vw, 64px);
}
body.admin-login-active .login-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(34px, 5vw, 78px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.admin-login-active .login-card {
  width: min(500px, 100%);
  max-height: none;
  flex: 0 0 auto;
  padding: clamp(30px, 3.4vw, 48px);
  overflow: visible;
}
body.admin-login-active .login-theme-toggle {
  position: fixed;
  top: 18px;
  right: 20px;
}

/* A portrait browser should never retain the wide two-column hero layout. */
@media (max-width: 1180px), (max-aspect-ratio: 7/8) {
  body.admin-login-active {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: auto;
  }
  body.admin-login-active #login-view.login-shell {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    display: block;
    overflow: visible;
  }
  body.admin-login-active .login-art {
    display: none;
  }
  body.admin-login-active .login-panel {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    padding: 82px 24px 34px;
    background:
      radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 31%),
      radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--purple) 12%, transparent), transparent 30%),
      var(--login-panel-bg);
  }
  body.admin-login-active .login-card {
    width: min(520px, 100%);
  }
  body.admin-login-active .mobile-brand {
    display: flex;
  }
}

@media (max-width: 560px) {
  body.admin-login-active .login-panel {
    align-items: flex-start;
    padding: 72px 14px 22px;
  }
  body.admin-login-active .login-card {
    padding: 28px 22px;
    border-radius: 14px;
  }
  body.admin-login-active .login-card h2 {
    font-size: 26px;
  }
  body.admin-login-active .login-theme-toggle {
    top: 12px;
    right: 12px;
  }
}

@media (max-height: 720px) and (min-width: 1181px) and (min-aspect-ratio: 7/8) {
  body.admin-login-active #login-view.login-shell {
    min-height: 560px;
  }
  body.admin-login-active .login-art {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  body.admin-login-active .login-copy {
    margin-bottom: 0;
  }
  body.admin-login-active .login-copy h1 {
    margin: 10px 0 14px;
    font-size: clamp(34px, 4vw, 52px);
  }
  body.admin-login-active .login-copy p {
    font-size: 15px;
    line-height: 1.55;
  }
  body.admin-login-active .login-features {
    margin-top: 18px;
  }
  body.admin-login-active .login-card {
    padding: 28px 34px;
  }
  body.admin-login-active .login-card > p {
    margin-bottom: 18px;
  }
}

/* v2.1 fully configurable login-page builder */
:root{
  --login-hero-text:#fff;
  --login-hero-muted:#dbeafe;
  --login-hero-panel:#0a3b78;
  --login-card-border:#d9e2ec;
  --login-help-bg:#f4f7fb;
  --login-help-text:#526171;
  --login-icon:#0d6efd;
  --login-hero-width:54%;
  --login-card-width:500px;
  --login-card-radius:18px;
  --login-logo-size:52px;
  --login-cover-fit:cover;
}
body.admin-login-active #login-view.login-shell{
  grid-template-columns:var(--login-hero-width) minmax(0,1fr);
  background:var(--login-page-bg);
}
body.admin-login-active #login-view[data-hero-side="right"]{
  grid-template-columns:minmax(0,1fr) var(--login-hero-width);
}
body.admin-login-active #login-view[data-hero-side="right"] .login-art{order:2}
body.admin-login-active #login-view[data-hero-side="right"] .login-panel{order:1}
body.admin-login-active #login-view[data-login-layout="centered"]{
  display:grid;
  grid-template-columns:1fr;
}
body.admin-login-active #login-view[data-login-layout="centered"] .login-art{display:none!important}
body.admin-login-active #login-view[data-login-layout="overlay"]{
  display:grid;
  grid-template-columns:1fr;
}
body.admin-login-active #login-view[data-login-layout="overlay"] .login-art{
  position:absolute;
  inset:0;
  display:flex!important;
}
body.admin-login-active #login-view[data-login-layout="overlay"] .login-panel{
  position:relative;
  z-index:8;
  background:transparent;
}
body.admin-login-active #login-view[data-login-layout="overlay"] .login-card{
  margin-left:auto;
  background:color-mix(in srgb,var(--login-card-bg) 94%,transparent);
  backdrop-filter:blur(18px);
}
body.admin-login-active #login-view[data-hero-side="right"][data-login-layout="overlay"] .login-card{margin-left:0;margin-right:auto}
body.admin-login-active .login-art{
  color:var(--login-hero-text);
  background-size:var(--login-cover-fit);
  background-repeat:no-repeat;
}
body.admin-login-active .login-art::before{
  z-index:0;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.16));
}
body.admin-login-active .login-decorations{position:absolute;inset:0;z-index:1;pointer-events:none}
body.admin-login-active .brand-lockup,
body.admin-login-active .login-copy{z-index:3}
body.admin-login-active .brand-lockup{
  width:max-content;
  max-width:100%;
  padding:10px 13px 10px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(7,28,52,.22);
  backdrop-filter:blur(12px);
}
body.admin-login-active .brand-lockup .brand-mark,
body.admin-login-active .mobile-brand .brand-mark{
  width:var(--login-logo-size);
  height:var(--login-logo-size);
  flex:0 0 var(--login-logo-size);
}
body.admin-login-active .brand-lockup strong{color:var(--login-hero-text)}
body.admin-login-active .brand-lockup span{color:var(--login-hero-muted)}
body.admin-login-active .login-copy{
  width:min(760px,100%);
  max-width:none;
  margin:0;
  color:var(--login-hero-text);
}
body.admin-login-active #login-view[data-hero-align="top"] .login-copy{margin-top:34px;margin-bottom:auto}
body.admin-login-active #login-view[data-hero-align="center"] .login-copy{margin:auto 0}
body.admin-login-active #login-view[data-hero-align="bottom"] .login-copy{margin-top:auto;margin-bottom:0}
body.admin-login-active #login-view[data-hero-content-style="glass"] .login-copy,
body.admin-login-active #login-view[data-hero-content-style="solid"] .login-copy{
  padding:clamp(24px,3vw,38px);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
}
body.admin-login-active #login-view[data-hero-content-style="glass"] .login-copy{
  background:color-mix(in srgb,var(--login-hero-panel) 68%,transparent);
  box-shadow:0 24px 70px rgba(0,0,0,.20);
  backdrop-filter:blur(18px);
}
body.admin-login-active #login-view[data-hero-content-style="solid"] .login-copy{
  background:var(--login-hero-panel);
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}
body.admin-login-active .login-hero-symbol{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin-bottom:20px;
  color:var(--login-hero-text);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  font-size:26px;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}
body.admin-login-active .login-copy .eyebrow{color:var(--login-hero-muted)}
body.admin-login-active .login-copy h1{color:var(--login-hero-text);text-shadow:0 2px 18px rgba(0,0,0,.18)}
body.admin-login-active .login-copy p{color:var(--login-hero-muted)}
body.admin-login-active .login-features{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
body.admin-login-active .login-features span{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 13px;
  color:var(--login-hero-text);
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  font-weight:700;
}
body.admin-login-active .login-features i{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  margin:0;
  color:var(--login-hero-text);
  background:rgba(255,255,255,.14);
  border-radius:9px;
}
body.admin-login-active .login-panel{background:var(--login-panel-bg)}
body.admin-login-active .login-card{
  width:min(var(--login-card-width),100%);
  padding:clamp(30px,3.5vw,48px);
  color:var(--login-text);
  background:var(--login-card-bg);
  border:1px solid var(--login-card-border);
  border-radius:var(--login-card-radius);
  box-shadow:0 24px 70px rgba(22,34,50,.17);
}
body.admin-login-active #login-view[data-form-align="center"] .login-card{text-align:center}
body.admin-login-active #login-view[data-form-align="center"] .login-card label{text-align:left}
body.admin-login-active #login-view[data-form-align="center"] .mobile-brand{justify-content:center;text-align:left}
body.admin-login-active .login-form-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  color:var(--login-icon);
  background:color-mix(in srgb,var(--login-icon) 12%,var(--login-card-bg));
  border:1px solid color-mix(in srgb,var(--login-icon) 28%,var(--login-card-border));
  border-radius:17px;
  font-size:24px;
}
body.admin-login-active #login-view[data-form-align="center"] .login-form-icon{margin-left:auto;margin-right:auto}
body.admin-login-active .login-card .eyebrow{color:var(--login-icon)}
body.admin-login-active .login-card input{border-color:var(--login-card-border)}
body.admin-login-active .login-card input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
body.admin-login-active .demo-note{
  color:var(--login-help-text)!important;
  background:var(--login-help-bg)!important;
  border-color:var(--login-card-border)!important;
}
body.admin-login-active .mobile-brand span{display:block;margin-top:3px;color:var(--muted);font-size:12px}

/* Super-admin login builder */
.theme-login-builder{margin-top:18px}
.login-builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px}
.login-builder-section{padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.login-builder-section.span-2{grid-column:1/-1}
.login-builder-section>header{display:flex;align-items:flex-start;gap:12px;margin-bottom:17px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.login-builder-section>header>i{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;color:var(--primary);background:color-mix(in srgb,var(--primary) 11%,var(--surface));border-radius:11px}
.login-builder-section h4,.login-builder-section p{margin:0}
.login-builder-section h4{color:var(--text-strong);font-size:16px}
.login-builder-section p{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5}
.login-builder-toggles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.login-builder-toggle{min-height:48px;display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:10px!important;padding:10px 12px;color:var(--text)!important;background:var(--surface-soft);border:1px solid var(--line);border-radius:9px}
.login-builder-toggle input{width:18px;min-height:18px;margin:0}
.login-builder-toggle b{font-size:13px}
.login-builder-ranges{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.login-builder-range{padding:12px;background:var(--surface-soft);border:1px solid var(--line);border-radius:9px}
.login-builder-range>span{display:flex;justify-content:space-between;gap:10px;color:var(--text);font-size:12px;font-weight:700}
.login-builder-range output{color:var(--primary)}
.login-builder-range input{min-height:22px;padding:0}
.login-feature-builder{display:grid;gap:10px;margin-top:15px}
.login-feature-row{display:grid;grid-template-columns:minmax(190px,.65fr) 1.35fr;gap:12px;padding:12px;background:var(--surface-soft);border:1px solid var(--line);border-radius:9px}

@media(max-width:1180px){
  .login-builder-grid{grid-template-columns:1fr}
  .login-builder-section.span-2{grid-column:auto}
}
@media(max-width:760px){
  .login-builder-grid{padding:11px}
  .login-builder-toggles,.login-builder-ranges,.login-feature-row{grid-template-columns:1fr}
  .theme-login-builder .panel-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:1180px), (max-aspect-ratio:7/8){
  body.admin-login-active #login-view[data-login-layout="split"] .login-art{display:none!important}
  body.admin-login-active #login-view[data-login-layout="split"]{display:block;grid-template-columns:1fr}
  body.admin-login-active #login-view[data-login-layout="overlay"] .login-copy,
  body.admin-login-active #login-view[data-login-layout="overlay"] .brand-lockup{display:none}
  body.admin-login-active #login-view[data-login-layout="overlay"] .login-card{margin:auto}
}
@media(max-width:760px){
  body.admin-login-active .login-features{grid-template-columns:1fr}
  body.admin-login-active .login-card{width:min(var(--login-card-width),100%)}
}
body.admin-login-active #login-view[data-login-layout="centered"] .mobile-brand,
body.admin-login-active #login-view[data-login-layout="overlay"] .mobile-brand{display:flex}

/* v2.3: full builder with a strict viewport-safe admin login canvas */
body.admin-login-active{height:100vh;min-height:100dvh;overflow:hidden;background:var(--login-page-bg)}
body.admin-login-active #login-view.login-shell{width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden}
body.admin-login-active #login-view.login-shell .login-art,
body.admin-login-active #login-view.login-shell .login-panel{height:100%;min-height:0}
body.admin-login-active #login-view.login-shell .login-art{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(30px,4vw,58px);overflow:hidden}
body.admin-login-active #login-view.login-shell .login-copy{max-height:calc(100dvh - 175px);overflow-y:auto;scrollbar-width:thin}
body.admin-login-active #login-view.login-shell .login-copy h1{font-size:clamp(36px,4.2vw,62px)}
body.admin-login-active #login-view.login-shell .login-panel{align-items:center;overflow-y:auto;overscroll-behavior:contain}
body.admin-login-active #login-view.login-shell .login-card{max-height:calc(100dvh - 64px);overflow-y:auto;scrollbar-width:thin}
body.admin-login-active .brand-mark img,body.admin-login-active .admin-brand-mark img{width:100%;height:100%;padding:4px;object-fit:contain}
body.admin-login-active #login-view[data-hero-content-style="plain"] .login-copy{padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
body.admin-login-active #login-view[data-login-layout="centered"] .login-panel,
body.admin-login-active #login-view[data-login-layout="overlay"] .login-panel{min-height:100%}
@media(max-width:1050px),(max-aspect-ratio:7/8){
  body.admin-login-active{height:auto;min-height:100vh;min-height:100dvh;overflow-y:auto}
  body.admin-login-active #login-view.login-shell,body.admin-login-active #login-view[data-login-layout="split"]{display:block;height:auto;min-height:100vh;min-height:100dvh;overflow:visible}
  body.admin-login-active #login-view[data-login-layout="split"] .login-art{display:none!important}
  body.admin-login-active #login-view.login-shell .login-panel{height:auto;min-height:100vh;min-height:100dvh;padding:74px 20px 34px}
  body.admin-login-active #login-view.login-shell .login-card{max-height:none;overflow:visible}
  body.admin-login-active #login-view[data-login-layout="overlay"] .login-art{position:fixed;height:100vh;height:100dvh}
}
@media(max-height:700px) and (min-width:1051px){
  body.admin-login-active #login-view.login-shell .login-art{padding:24px 34px}
  body.admin-login-active #login-view.login-shell .login-copy h1{margin-top:10px;margin-bottom:12px;font-size:clamp(30px,3.5vw,46px)}
  body.admin-login-active #login-view.login-shell .login-copy p{font-size:14px;line-height:1.5}
  body.admin-login-active #login-view.login-shell .login-features{margin-top:16px}
  body.admin-login-active #login-view.login-shell .login-card{padding:26px 30px}
}


/* v2.4 login customizer enhancements */
.login-inline-meta,.client-login-inline-meta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin:-2px 0 4px}
.login-inline-meta a,.client-login-inline-meta a,.login-link,.client-login-link{color:var(--primary);font-weight:700;text-decoration:none}
.login-meta-row,.client-login-meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 2px;font-size:13px;color:var(--muted)}
.login-check,.client-login-check{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--muted)}
.login-check input,.client-login-check input{width:14px;height:14px}
.login-button-row,.client-login-button-row{display:grid;grid-template-columns:1fr;gap:12px}
.login-button-row .btn.secondary,.client-login-button-row .client-btn.secondary{min-height:48px}
.login-divider,.client-login-divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:2px 0}
.login-divider::before,.login-divider::after,.client-login-divider::before,.client-login-divider::after{content:'';height:1px;flex:1;background:var(--line-soft,rgba(148,163,184,.35))}
.login-social,.client-login-social{display:grid;gap:10px}
.login-social-btn,.client-login-social-btn{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--login-card-border);background:var(--login-card-bg);color:var(--text-strong);border-radius:999px;padding:12px 16px;font-weight:700;cursor:pointer}
.login-social-btn i.fa-google,.client-login-social-btn i.fa-google{color:#ea4335}.login-social-btn i.fa-facebook-f,.client-login-social-btn i.fa-facebook-f{color:#1877f2}
.login-legal,.client-login-legal{font-size:12px;line-height:1.55;color:var(--muted);margin-top:4px}
.login-promo-card,.client-login-promo-card{margin-top:28px;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:24px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);box-shadow:0 18px 48px rgba(0,0,0,.18);color:#fff;max-width:420px}
.login-promo-body,.client-login-promo-body{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end}
.login-promo-copy,.client-login-promo-copy{display:grid;gap:8px}.login-promo-copy strong,.client-login-promo-copy strong{font-size:28px;line-height:1.05}.login-promo-copy p,.client-login-promo-copy p{margin:0;color:rgba(255,255,255,.88);font-size:14px;line-height:1.5}
.login-mini-btn,.client-login-mini-btn{border:0;background:#fff;color:#113b2d;border-radius:999px;padding:10px 16px;font-weight:800;justify-self:start;cursor:pointer}
.login-promo-metric,.client-login-promo-metric{min-width:118px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.92);color:#183527;display:grid;gap:4px;box-shadow:0 14px 30px rgba(0,0,0,.14)}
.login-promo-metric small,.client-login-promo-metric small{font-size:11px;color:#527165;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.login-promo-metric strong,.client-login-promo-metric strong{font-size:24px;line-height:1.1}
.login-slider-dots,.client-login-slider-dots{display:flex;justify-content:center;gap:8px}.login-slider-dots i,.client-login-slider-dots i{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.55);display:block}.login-slider-dots i:nth-child(2),.client-login-slider-dots i:nth-child(2){width:22px;background:#fff}
.login-support-chip,.client-login-support-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);font-size:12px;font-weight:700}
body.admin-login-active #login-view[data-visual-preset="card"] .login-copy,body.admin-login-active #login-view[data-visual-preset="showcase"] .login-copy,.client-login-shell[data-visual-preset="card"] .client-login-copy,.client-login-shell[data-visual-preset="showcase"] .client-login-copy{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);padding:28px;border-radius:28px;box-shadow:0 20px 40px rgba(0,0,0,.16)}
body.admin-login-active #login-view[data-visual-preset="card"] .login-card,body.admin-login-active #login-view[data-visual-preset="showcase"] .login-card,.client-login-shell[data-visual-preset="card"] .client-login-card,.client-login-shell[data-visual-preset="showcase"] .client-login-card{box-shadow:0 26px 65px rgba(17,24,39,.16);border-radius:max(24px,var(--login-card-radius,18px))}
body.admin-login-active #login-view[data-visual-preset="showcase"] .login-art,.client-login-shell[data-visual-preset="showcase"] .client-login-hero{justify-content:center}
body.admin-login-active #login-view[data-visual-preset="showcase"] .login-copy h1,.client-login-shell[data-visual-preset="showcase"] .client-login-copy h1{font-size:clamp(32px,3.2vw,48px)}
@media (max-width: 900px){.login-promo-card,.client-login-promo-card{max-width:none}.login-promo-body,.client-login-promo-body{grid-template-columns:1fr}.login-social,.client-login-social{grid-template-columns:1fr}.login-button-row,.client-login-button-row{grid-template-columns:1fr}.login-inline-meta,.client-login-inline-meta{flex-wrap:wrap}}

/* v2.6 mobile-first admin workspace */
.sidebar-backdrop{
  position:fixed;z-index:940;inset:0;display:block;visibility:hidden;opacity:0;
  background:rgba(15,23,42,.54);border:0;pointer-events:none;transition:opacity .2s ease,visibility .2s ease;
  backdrop-filter:blur(2px);
}
.sidebar-backdrop.visible{visibility:visible;opacity:1;pointer-events:auto;}
body.admin-sidebar-open{overflow:hidden;}
.app-shell,.workspace,.content,.panel,.table-wrap{min-width:0;}

@media (max-width:1024px){
  .sidebar{
    z-index:950;width:min(326px,88vw);max-width:100%;
    padding-bottom:env(safe-area-inset-bottom);box-shadow:14px 0 42px rgba(15,23,42,.26);
  }
  .sidebar-brand{padding-top:calc(11px + env(safe-area-inset-top));}
  .sidebar-brand .mobile-only{margin-left:auto;display:inline-grid;}
  .workspace{width:100%;max-width:100%;margin-left:0;overflow-x:hidden;}
  .topbar{z-index:90;padding-left:14px;padding-right:14px;}
  .topbar-left{min-width:0;}
  .topbar-right{min-width:0;}
  .quick-link b{display:none;}
  .content{width:100%;max-width:100%;overflow-x:hidden;}
  .table-wrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;}
  .data-table{min-width:720px;}
  .data-table th,.data-table td{white-space:nowrap;}
  .modal-backdrop{z-index:1100;}
}

@media (max-width:760px){
  html{font-size:15px;}
  body{font-size:14px;overflow-x:hidden;}
  .topbar{
    min-height:auto;display:grid;grid-template-columns:1fr;align-items:stretch;gap:8px;
    padding:calc(8px + env(safe-area-inset-top)) 10px 9px;
  }
  .topbar-right{order:1;width:100%;justify-content:flex-end;gap:7px;}
  .topbar-left{order:2;width:100%;display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;}
  .global-search{width:100%;max-width:none;min-width:0;}
  .global-search input{width:100%;min-width:0;font-size:14px;}
  .global-results{position:fixed;z-index:1200;top:calc(100px + env(safe-area-inset-top));right:10px;left:10px;max-height:min(55vh,430px);}
  .quick-link{display:none;}
  .topbar-theme-toggle,.notification,.user-button,.icon-btn{min-width:42px;width:42px;height:42px;}
  .topbar-right{padding-right:0;}
  .user-button{padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface);}
  .user-button>span{width:36px;height:36px;}
  .user-button div,.user-button>i{display:none;}
  .user-dropdown{position:fixed;z-index:1201;top:calc(58px + env(safe-area-inset-top));right:10px;left:auto;width:min(260px,calc(100vw - 20px));}
  .content{padding:12px 10px calc(18px + env(safe-area-inset-bottom));}
  .page-head{gap:12px;margin-bottom:14px;}
  .page-head h1{font-size:24px;line-height:1.2;overflow-wrap:anywhere;}
  .page-head p{font-size:13px;}
  .head-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .head-actions .btn{width:100%;min-height:44px;justify-content:center;white-space:normal;text-align:center;}
  .stats-grid,.metric-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .stat-card{min-width:0;min-height:116px;padding:15px;}
  .stat-card strong{font-size:22px;overflow-wrap:anywhere;}
  .stat-card .stat-icon{right:12px;font-size:44px;}
  .dashboard-grid,.split-panels,.profile-grid{grid-template-columns:1fr;gap:12px;}
  .panel{width:100%;border-radius:8px;overflow:hidden;}
  .panel-head{align-items:flex-start;flex-direction:column;padding:14px;}
  .panel-head>div,.panel-head h3{min-width:0;max-width:100%;}
  .panel-body,.form-panel{padding:14px;}
  .toolbar{display:flex;align-items:stretch;flex-direction:column;gap:10px;padding:12px;}
  .toolbar-left,.toolbar-right{width:100%;display:flex;align-items:stretch;flex-wrap:wrap;gap:8px;}
  .toolbar-left>* ,.toolbar-right>*{min-width:0;}
  .toolbar label{flex:1 1 145px;}
  .toolbar select,.toolbar input{width:100%;}
  .search-box{width:100%;flex:1 1 100%;}
  .search-box input{width:100%;}
  .table-wrap{margin:0;}
  .data-table{min-width:680px;font-size:13px;}
  .data-table th,.data-table td{padding:11px 10px;}
  .row-actions{min-width:max-content;flex-wrap:nowrap;}
  .pagination{align-items:stretch;flex-direction:column;gap:9px;padding:12px;}
  .pagination>div{display:flex;flex-wrap:wrap;gap:6px;}
  .form-grid{grid-template-columns:1fr;gap:13px;}
  .form-grid .span-2,.form-grid .span-3{grid-column:auto;}
  .form-actions{display:grid;grid-template-columns:1fr;gap:8px;}
  .form-actions .btn{width:100%;min-height:44px;justify-content:center;}
  .tabs{overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin;}
  .tab{flex:0 0 auto;}
  .detail-grid{grid-template-columns:1fr;}
  .modal-backdrop{align-items:flex-end;padding:0;}
  .modal,.modal.large{width:100%;max-width:none;max-height:94dvh;border-radius:18px 18px 0 0;}
  .modal-head{padding:13px 14px;}
  .modal-head h3{font-size:16px;overflow-wrap:anywhere;}
  .modal-body{padding:14px;}
  .modal-foot{display:grid;grid-template-columns:1fr;padding:12px 14px calc(12px + env(safe-area-inset-bottom));}
  .modal-foot .btn{width:100%;min-height:44px;justify-content:center;}
  .profile-card{padding:20px 15px;}
  .invoice-paper{padding:18px 14px;}
  .invoice-header,.invoice-client{flex-direction:column;}
  .invoice-meta{text-align:left;}
  .invoice-totals{width:100%;}
  .theme-manager-body{padding-left:0;padding-right:0;}
  .theme-portal-tabs{overflow-x:auto;flex-wrap:nowrap;}
  .theme-portal-tabs button{flex:0 0 auto;}
  .preserve-grid{grid-template-columns:1fr;}
  .toast-root{top:calc(10px + env(safe-area-inset-top));right:10px;left:10px;}
  .toast{width:100%;min-width:0;max-width:none;}
}

@media (max-width:480px){
  .stats-grid,.metric-strip{grid-template-columns:1fr;}
  .head-actions{grid-template-columns:1fr;}
  .content{padding-left:8px;padding-right:8px;}
  .page-head h1{font-size:22px;}
  .panel-head,.panel-body,.form-panel{padding-left:12px;padding-right:12px;}
  .data-table{min-width:640px;}
  .sidebar{width:min(310px,92vw);}
}

/* ===== Frontx v3 operational modules ===== */
.bulk-command-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-soft)}
.bulk-command-bar strong{display:flex;align-items:center;gap:8px;color:var(--text-strong)}
.bulk-command-bar select{min-width:190px;height:38px;border:1px solid var(--line);border-radius:7px;background:var(--input-bg);color:var(--input-text);padding:0 10px}
.permission-master{grid-column:1/-1;display:flex!important;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft)}
.permission-master input{width:18px;height:18px}
.permission-matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.permission-group{border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden}
.permission-group header{padding:11px 13px;background:var(--surface-soft);border-bottom:1px solid var(--line);font-weight:700}
.permission-group header label,.permission-group>label{display:flex;align-items:flex-start;gap:9px;margin:0}
.permission-group>label{padding:10px 13px;border-bottom:1px solid color-mix(in srgb,var(--line) 68%,transparent)}
.permission-group>label:last-child{border-bottom:0}
.permission-group input{width:17px;height:17px;margin-top:2px;flex:0 0 auto}
.permission-group span{display:flex;flex-direction:column;gap:2px}
.permission-group b{font-size:13px;color:var(--text-strong)}
.permission-group small{font-size:10px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.settings-tabs{display:flex;gap:8px;margin-bottom:14px;overflow:auto}
.settings-section.hidden{display:none!important}
.sms-compose-grid{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:18px;padding:18px}
.sms-compose-grid .form-panel{padding:0}
.sms-compose-grid form{display:flex;flex-direction:column;gap:14px}
.sms-compose-grid form label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.sms-compose-grid textarea{min-height:170px}
.sms-counter{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}
.sms-client-picker{max-height:550px}
.client-profile-shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px}
.client-profile-main{min-width:0}
.profile-action-stack{display:grid;gap:8px;margin-top:18px}
.profile-action-stack .btn{width:100%;justify-content:flex-start}
.profile-metrics{display:grid;grid-template-columns:1fr;gap:8px;margin-top:15px}
.profile-metrics span{padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);display:flex;align-items:center;justify-content:space-between;gap:8px}
.profile-metrics small{color:var(--muted)}
.client-detail-tabs{overflow:auto;white-space:nowrap;margin-bottom:15px}
.client-notes{margin-top:15px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft)}
.client-notes p{margin:6px 0 0;color:var(--muted);white-space:pre-wrap}
.traffic-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:15px}
.traffic-stats>div{padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);display:flex;flex-direction:column;gap:5px}
.traffic-stats small{color:var(--muted)}
.traffic-stats b{font-size:21px;color:var(--text-strong)}
.traffic-chart{height:300px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(to bottom,var(--surface-soft),var(--surface));padding:12px}
.traffic-chart svg{width:100%;height:100%;overflow:visible}
.traffic-chart polyline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.traffic-rx{stroke:var(--success)}.traffic-tx{stroke:var(--danger)}
.traffic-legend{display:flex;gap:18px;align-items:center;margin-top:10px;color:var(--muted)}
.traffic-legend span:before{content:"";display:inline-block;width:16px;height:3px;margin-right:6px;vertical-align:middle}
.traffic-legend .rx:before{background:var(--success)}.traffic-legend .tx:before{background:var(--danger)}
.danger-text{color:var(--danger)}
.row-actions{min-width:max-content}
.data-table th,.data-table td{vertical-align:middle}

@media(max-width:1100px){.permission-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}.client-profile-shell{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:760px){
 .permission-matrix{grid-template-columns:1fr}.sms-compose-grid{grid-template-columns:1fr;padding:12px}.client-profile-shell{grid-template-columns:1fr}.profile-card{position:static}.traffic-stats{grid-template-columns:1fr}.traffic-chart{height:220px}.bulk-command-bar{align-items:stretch}.bulk-command-bar select,.bulk-command-bar .btn{width:100%}.client-detail-tabs{padding-bottom:4px}
}

/* v3 operational reports and printable documents */
.report-filter-bar{align-items:flex-end;gap:12px}.report-filter-bar label{display:grid;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}
.report-filter-bar input,.report-filter-bar select{min-width:155px}
.invoice-copy-stack{display:grid;gap:24px}.invoice-copy{position:relative;break-inside:avoid;page-break-inside:avoid}.invoice-copy+.invoice-copy{page-break-before:always}
.invoice-copy-label{position:absolute;top:16px;left:50%;transform:translateX(-50%);padding:7px 18px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:800;letter-spacing:.04em;background:var(--surface-soft)}
.amount-cell{text-align:right}.invoice-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(245px,32%);gap:28px;margin-top:20px}.invoice-terms{font-size:12px;line-height:1.6}.invoice-terms p{white-space:pre-line}
.invoice-signatures{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:55px}.invoice-signatures>div{min-width:190px;text-align:center;border-top:1px solid var(--text);padding-top:7px;font-size:11px}.invoice-signatures img{display:block;max-width:145px;max-height:70px;object-fit:contain;margin:-62px auto 5px}
.receipt-paper{max-width:850px;margin-inline:auto}.receipt-amount{text-align:center;padding:30px;border-block:1px dashed var(--border);margin:25px 0}.receipt-amount small{font-weight:800;color:var(--muted);letter-spacing:.1em}.receipt-amount h1{margin:8px 0 0;font-size:34px}.receipt-details{margin-top:20px}.receipt-words{text-align:center;padding:20px;background:var(--surface-soft);border-radius:8px;margin-top:24px}
@media(max-width:760px){.report-filter-bar,.report-filter-bar .toolbar-left{display:grid;width:100%;grid-template-columns:1fr}.report-filter-bar input,.report-filter-bar select{width:100%;min-width:0}.invoice-bottom{grid-template-columns:1fr}.invoice-copy-label{position:static;display:table;transform:none;margin:0 auto 15px}.invoice-signatures{gap:20px}.invoice-signatures>div{min-width:125px}.invoice-header,.invoice-client{grid-template-columns:1fr!important}.invoice-meta{text-align:left!important}}
@media print{.invoice-copy-stack{display:block}.invoice-copy{box-shadow:none!important;border:0!important;margin:0!important;padding:18mm!important}.invoice-copy+.invoice-copy{page-break-before:always}.modal-header,.modal-footer,.modal-close{display:none!important}.modal-body{padding:0!important}.invoice-copy-label{background:white!important;color:#111!important}.invoice-paper{color:#111!important;background:#fff!important}.invoice-table th,.invoice-table td{color:#111!important;border-color:#999!important}}

/* v3.4 simplified client account form */
.required-mark{color:#dc2626;font-weight:900;margin-left:3px}.optional-label{font-size:10px;color:var(--muted);font-weight:700;margin-left:5px}.client-account-form{display:grid;gap:16px}.client-form-section{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}.client-form-section.secondary{background:var(--surface-soft)}.client-form-section-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--primary) 5%,var(--surface))}.client-form-section-head>span{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);display:grid;place-items:center;flex:0 0 auto}.client-form-section-head h3{margin:0;color:var(--text-strong);font-size:16px}.client-form-section-head p{margin:3px 0 0;color:var(--muted);font-size:12px;font-weight:500}.client-form-section>.form-grid{padding:16px}.client-form-section label small{display:block;color:var(--muted);font-size:11px;font-weight:500;line-height:1.45}.client-auto-field{min-height:72px;border:1px dashed var(--line);border-radius:9px;padding:10px 12px;background:var(--surface-soft);display:flex;flex-direction:column;justify-content:center;gap:5px}.client-auto-field span{font-size:11px;color:var(--muted);font-weight:700}.client-auto-field strong{color:var(--text-strong);font-size:13px}
@media(max-width:760px){.client-form-section>.form-grid{padding:12px}.client-form-section-head{padding:12px}.client-form-section-head p{font-size:11px}}

/* v3.5 invoice proration settings */
.invoice-rule-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}.invoice-rule-summary>div{padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft);display:flex;flex-direction:column;gap:4px}.invoice-rule-summary span{font-size:12px;color:var(--muted)}.invoice-rule-summary strong{font-size:15px;color:var(--text-strong)}.invoice-rule-toggle{margin:0 0 18px}.invoice-rule-table input{min-width:90px}.invoice-rule-table td:nth-child(4) input{min-width:220px}.percent-input{display:flex;align-items:center;gap:8px}.percent-input span{font-weight:700;color:var(--muted)}@media(max-width:720px){.invoice-rule-summary{grid-template-columns:1fr}.invoice-rule-table{min-width:720px}}

/* Frontx v3.6 — reseller wholesale billing and compact client actions */
.client-action-layout{display:flex;align-items:center;gap:7px;justify-content:flex-end;white-space:nowrap}.client-payment-btn{min-height:34px;padding:7px 13px;border:0;border-radius:8px;background:var(--success);color:#fff;font-weight:700;box-shadow:0 4px 10px color-mix(in srgb,var(--success) 28%,transparent)}.client-payment-btn:hover{filter:brightness(.94)}.row-more{position:relative}.row-more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:none;width:220px;padding:7px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 16px 36px rgba(15,23,42,.2)}.row-more.open .row-more-menu{display:grid}.row-more-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:var(--text);text-align:left;font-size:13px}.row-more-menu button:hover{background:var(--surface-soft)}.row-more-menu button.danger{color:var(--danger)}.reseller-filter-grid{display:grid;grid-template-columns:minmax(190px,1fr) repeat(2,minmax(150px,.7fr)) minmax(220px,1.2fr);gap:12px;align-items:end}.statement-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.statement-summary-card{padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.statement-summary-card span{display:block;color:var(--muted);font-size:12px}.statement-summary-card strong{display:block;margin-top:8px;font-size:24px;color:var(--text-strong)}.statement-lines .excluded{opacity:.62;background:color-mix(in srgb,var(--danger) 5%,var(--surface))}.share-rule-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:10px}.share-rule-row{display:grid;grid-template-columns:1fr 120px;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft)}.share-rule-row small{display:block;color:var(--muted);margin-top:3px}.share-rule-row input{width:100%}.billing-status-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);color:var(--muted)}.billing-status-note i{color:var(--primary);margin-top:2px}.statement-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}.statement-toolbar .filters{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.statement-toolbar label{min-width:150px}.reseller-billing-settings{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:12px;align-items:end}.statement-payment-list{display:grid;gap:8px}.statement-payment-item{display:flex;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft)}
@media(max-width:1100px){.statement-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reseller-billing-settings{grid-template-columns:repeat(2,minmax(150px,1fr))}.share-rule-grid{grid-template-columns:1fr}.reseller-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.statement-summary-grid,.reseller-billing-settings,.reseller-filter-grid{grid-template-columns:1fr}.client-action-layout{justify-content:flex-start}.client-payment-btn{padding:7px 10px}.row-more-menu{right:auto;left:0}.statement-summary-card strong{font-size:20px}}

/* v3.8 permission-aware client list controls */
:root{
  --success:var(--green);
  --danger:var(--red);
  --warning:var(--orange);
  --info:var(--cyan);
  --border:var(--line);
}
.client-payment-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  padding:7px 14px;
  border:1px solid color-mix(in srgb,var(--green) 72%,#0000);
  border-radius:8px;
  background:#198754;
  background:var(--green);
  color:#fff!important;
  font-weight:800;
  line-height:1;
  box-shadow:0 5px 13px color-mix(in srgb,var(--green) 30%,transparent);
}
.client-payment-btn i,.client-payment-btn span{color:inherit!important}
.client-payment-btn:hover{background:color-mix(in srgb,var(--green) 88%,#000);filter:none;transform:translateY(-1px)}
.client-payment-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--green) 30%,transparent);outline-offset:2px}
.client-bulk-bar{
  min-height:50px;
  flex-wrap:nowrap;
  gap:9px;
  padding:8px 12px;
}
.client-bulk-bar>strong{white-space:nowrap;font-size:13px}
.client-bulk-controls{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.client-bulk-bar #client-bulk-action{width:158px;min-width:158px;height:36px;padding:0 9px}
.client-bulk-bar .btn{min-height:36px;padding:7px 12px;white-space:nowrap}
.bulk-selection-count{margin-left:auto;color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}
.floating-row-more-menu{
  position:fixed!important;
  inset:auto!important;
  z-index:10050!important;
  display:grid!important;
  width:224px;
  max-height:calc(100vh - 18px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:7px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 18px 46px rgba(15,23,42,.28);
}
.floating-row-more-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:var(--text);text-align:left;font-size:13px}
.floating-row-more-menu button:hover{background:var(--surface-soft)}
.floating-row-more-menu button.danger{color:var(--red)}
@media(max-width:700px){
  .client-bulk-bar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px 9px}
  .client-bulk-controls{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto}
  .client-bulk-bar #client-bulk-action{width:100%;min-width:0}
  .bulk-selection-count{grid-column:1/-1;margin-left:0;text-align:right}
  .floating-row-more-menu{width:min(224px,calc(100vw - 16px))}
}

/* Frontx v3.8.1 — reliable client action popover (top-layer, viewport aware). */
.client-action-popover{
  position:fixed!important;
  inset:auto!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  z-index:2147483000!important;
  width:224px;
  max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:7px;
  background:var(--surface,#fff)!important;
  color:var(--text,#111827)!important;
  border:1px solid var(--line,var(--border,#dbe3ee))!important;
  border-radius:10px;
  box-shadow:0 18px 46px rgba(15,23,42,.30)!important;
}
.client-action-popover:not(:popover-open):not(.fallback-popover-open){display:none!important}
.client-action-popover:popover-open,
.client-action-popover.fallback-popover-open{display:grid!important}
.client-action-popover::backdrop{background:transparent}
.client-action-popover button{
  display:flex!important;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:38px;
  padding:9px 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text,#111827)!important;
  text-align:left;
  font-size:13px;
  cursor:pointer;
}
.client-action-popover button:hover,
.client-action-popover button:focus-visible{background:var(--surface-soft,#f1f5f9)!important;outline:none}
.client-action-popover button.danger{color:var(--red,var(--danger,#dc2626))!important}
.client-action-popover button i{width:17px;text-align:center;flex:0 0 17px}
@media(max-width:700px){.client-action-popover{width:min(224px,calc(100vw - 16px))}}


/* Frontx v3.9 — client lifecycle and bulk expiry refinements */
.bulk-expiry-toolbar{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(260px,1.5fr) minmax(170px,.8fr) minmax(150px,.7fr);gap:12px;align-items:end}
.bulk-expiry-summary{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);color:var(--muted)}
.bulk-expiry-summary strong{color:var(--text-strong);font-size:16px}.bulk-expiry-summary span{margin-left:auto;font-weight:700;color:var(--primary)}
.bulk-danger-note{margin-left:auto;color:var(--danger);font-weight:700;white-space:nowrap}.bulk-danger-note i{margin-right:5px}
@media(max-width:900px){.bulk-expiry-toolbar{grid-template-columns:1fr 1fr}.bulk-danger-note{width:100%;margin-left:0}}
@media(max-width:560px){.bulk-expiry-toolbar{grid-template-columns:1fr}.bulk-expiry-summary{flex-wrap:wrap}.bulk-expiry-summary span{width:100%;margin-left:0}}


/* Frontx v4.0 — client lifecycle pages */
.lifecycle-toolbar{align-items:center;gap:12px}.lifecycle-toolbar .toolbar-left{flex:1;min-width:240px}.lifecycle-toolbar .toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.lifecycle-toolbar .toolbar-right select{width:210px;max-width:100%}.lifecycle-note{display:flex;align-items:center;gap:9px;padding:10px 14px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface-soft);color:var(--muted);font-size:13px}.lifecycle-note i{color:var(--primary)}.cell-subtext{display:block;color:var(--muted);margin-top:3px}.action-btn.warning{background:color-mix(in srgb,var(--warning) 16%,var(--surface));color:var(--warning);border-color:color-mix(in srgb,var(--warning) 35%,var(--border))}
@media(max-width:760px){.lifecycle-toolbar{align-items:stretch}.lifecycle-toolbar,.lifecycle-toolbar .toolbar-right{flex-direction:column}.lifecycle-toolbar .toolbar-left,.lifecycle-toolbar .toolbar-right,.lifecycle-toolbar .search-box,.lifecycle-toolbar .toolbar-right select,.lifecycle-toolbar .toolbar-right .btn{width:100%}}

/* Frontx v4.1 — visual client lifecycle map */
.client-lifecycle-flow{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:12px 14px;margin:0 0 14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);scrollbar-width:thin}.lifecycle-step{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;min-height:38px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.lifecycle-step:hover,.lifecycle-step.current{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)}.lifecycle-step.permanent{cursor:default;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--border));background:color-mix(in srgb,var(--danger) 8%,var(--surface))}.lifecycle-arrow,.lifecycle-swap{flex:0 0 auto;font-weight:900;color:var(--muted);font-size:18px}.lifecycle-swap{color:var(--primary)}.lifecycle-panel .table-empty strong{color:var(--text)}
@media(max-width:760px){.client-lifecycle-flow{padding:10px}.lifecycle-step{min-height:36px;padding:7px 10px;font-size:12px}.lifecycle-arrow,.lifecycle-swap{font-size:16px}}

/* v4.3 — app-client PPPoE status and chart values */
.bar-value {
  min-height: 18px;
  display: grid;
  place-items: center;
  padding: 1px 6px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.bar-wrap:hover .bar-value { color: #fff; background: var(--primary); border-color: var(--primary); }
.pppoe-status-metrics { grid-template-columns: repeat(5,minmax(160px,1fr)); }
.pppoe-client-table { min-width: 1320px; }
.table-subtext { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
@media (max-width: 1050px) { .pppoe-status-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .pppoe-status-metrics { grid-template-columns: 1fr; } .pppoe-client-toolbar .toolbar-left { width:100%; } .pppoe-client-toolbar .search-box,.pppoe-client-toolbar .search-box input,.pppoe-client-toolbar label,.pppoe-client-toolbar select { width:100%; } }

/* Frontx v4.4 — deterministic dashboard chart geometry */
.chart { min-height: 270px; align-items: stretch; }
.bar-wrap { height: 245px; justify-content: flex-end; }
.bar-track {
  width: 100%;
  min-height: 190px;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(to top, color-mix(in srgb,var(--primary) 4%,transparent), transparent 55%);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
.bar-track .bar {
  display: block;
  transition: height .28s ease, filter .18s ease;
}
.bar-wrap:hover .bar-track .bar { filter: brightness(1.08); }
@media(max-width:560px){
  .chart{min-height:235px;gap:6px;padding-left:0;padding-right:0}
  .bar-wrap{height:210px;gap:5px}
  .bar-track{min-height:160px}
  .bar-value{font-size:10px;padding:1px 4px}
}

/* v4.6 multi-provider SMS gateways */
.sms-provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}
.sms-provider-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:17px;box-shadow:0 6px 20px rgba(15,23,42,.045)}
.sms-provider-card.default{border-color:color-mix(in srgb,var(--primary) 55%,var(--line));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent),0 8px 26px rgba(15,23,42,.06)}
.sms-provider-card-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.sms-provider-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);font-size:18px}
.sms-provider-card h3,.sms-provider-card p{margin:0}.sms-provider-card h3{font-size:15px;color:var(--text-strong)}.sms-provider-card p{margin-top:3px;color:var(--muted);font-size:11px}
.sms-provider-badges{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:5px}
.sms-provider-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:15px 0}
.sms-provider-facts span{min-width:0;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sms-provider-facts b{display:block;margin-bottom:4px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em}
.sms-provider-actions{display:flex;flex-wrap:wrap;gap:7px;padding-top:13px;border-top:1px solid var(--line)}
.sms-provider-actions .btn{min-height:36px}
.sms-form-divider{display:flex;flex-direction:column;gap:3px;margin:6px 0 0;padding:12px 0 5px;border-top:1px solid var(--line);color:var(--text-strong)}
.sms-form-divider b{font-size:13px}.sms-form-divider small{color:var(--muted);font-size:10px}
.sms-provider-form textarea{min-height:92px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}
.sms-help-panel{margin-top:18px}.sms-help-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sms-help-grid>div{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}
.sms-help-grid i{display:block;margin-bottom:10px;color:var(--primary);font-size:18px}.sms-help-grid b,.sms-help-grid span{display:block}.sms-help-grid b{font-size:12px;color:var(--text-strong)}.sms-help-grid span{margin-top:5px;color:var(--muted);font-size:10px;line-height:1.5}
.sms-test-status{display:flex;gap:13px;align-items:flex-start;padding:14px;border-radius:11px;background:var(--surface-soft);border:1px solid var(--line)}
.sms-test-status>i{font-size:26px}.sms-test-result.success .sms-test-status>i{color:var(--green)}.sms-test-result.failed .sms-test-status>i{color:var(--red)}
.sms-test-status h3,.sms-test-status p{margin:0}.sms-test-status p{margin-top:4px;color:var(--muted);font-size:11px}
.sms-test-result h4{margin:17px 0 7px;font-size:12px}.sms-test-result pre,.sms-raw-response,.sms-attempt pre{max-height:230px;overflow:auto;margin:0;padding:12px;background:#0f172a;color:#e2e8f0;border-radius:9px;white-space:pre-wrap;word-break:break-word;font-size:10px}
.sms-attempt{display:grid;gap:5px;padding:10px 0;border-bottom:1px solid var(--line)}.sms-attempt:last-child{border-bottom:0}.sms-attempt span{color:var(--muted);font-size:10px}.sms-attempt code{color:var(--red);font-size:10px;white-space:normal}
@media(max-width:1050px){.sms-provider-grid{grid-template-columns:1fr}.sms-help-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.sms-provider-card-head{grid-template-columns:auto minmax(0,1fr)}.sms-provider-badges{grid-column:1/-1;justify-content:flex-start}.sms-provider-facts,.sms-help-grid{grid-template-columns:1fr}.sms-provider-actions .btn{flex:1 1 auto}}