:root{
  --bg: #f4f7fb;
  --card: #ffffff;
  --card-soft: #f8fbff;
  --text: #16324f;
  --muted: #66758a;
  --line: #dbe5f0;
  --blue: #0b3b70;
  --blue2: #0a66c2;
  --blue3: #eef5ff;
  --body-glow-a: rgba(29, 155, 240, 0.08);
  --body-glow-b: rgba(34, 160, 107, 0.07);
  --body-grad-top: #f8fbff;
  --body-grad-bottom: #f4f7fb;
  --success-bg: #ecfdf5;
  --success-text: #166534;
  --warning-bg: #fff7ed;
  --warning-text: #9a3412;
  --danger-bg: #fef2f2;
  --danger-text: #b91c1c;
  --shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.06);
  --radius: 18px;
  --radius-sm: 12px;
  --accent-sky: #1d9bf0;
  --accent-teal: #0f9d8a;
  --accent-green: #22a06b;
  --accent-amber: #f59e0b;
  --accent-orange: #f97316;
  --accent-violet: #8b5cf6;
  --accent-pink: #ec4899;
}

:root[data-theme-accent="teal"]{
  --blue: #0f766e;
  --blue2: #14b8a6;
  --blue3: #ecfeff;
}

:root[data-theme-accent="green"]{
  --blue: #166534;
  --blue2: #22a06b;
  --blue3: #ecfdf5;
}

:root[data-theme-accent="amber"]{
  --blue: #b45309;
  --blue2: #f59e0b;
  --blue3: #fff7ed;
}

:root[data-theme-accent="orange"]{
  --blue: #c2410c;
  --blue2: #f97316;
  --blue3: #fff7ed;
}

:root[data-theme-accent="violet"]{
  --blue: #6d28d9;
  --blue2: #8b5cf6;
  --blue3: #f5f3ff;
}

:root[data-theme-accent="pink"]{
  --blue: #be185d;
  --blue2: #ec4899;
  --blue3: #fdf2f8;
}

:root[data-theme-mode="dark"]{
  --bg: #0b1320;
  --card: #122033;
  --card-soft: #16263c;
  --text: #edf4ff;
  --muted: #9cb0c9;
  --line: #27405f;
  --blue3: rgba(255,255,255,0.06);
  --body-glow-a: rgba(10, 102, 194, 0.14);
  --body-glow-b: rgba(15, 157, 138, 0.12);
  --body-grad-top: #0e1726;
  --body-grad-bottom: #08111d;
  --shadow: 0 16px 34px rgba(2, 8, 23, 0.36);
  --shadow-sm: 0 10px 24px rgba(2, 8, 23, 0.28);
  --success-bg: rgba(22, 101, 52, 0.24);
  --warning-bg: rgba(154, 52, 18, 0.22);
  --danger-bg: rgba(185, 28, 28, 0.24);
}

*{
  box-sizing: border-box;
}

html,
body{
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background:
    radial-gradient(circle at top left, var(--body-glow-a), transparent 22%),
    radial-gradient(circle at top right, var(--body-glow-b), transparent 20%),
    linear-gradient(180deg, var(--body-grad-top) 0%, var(--bg) 24%, var(--body-grad-bottom) 100%);
  color: var(--text);
}

:root[data-theme-mode="dark"] body,
:root[data-theme-mode="dark"] header,
:root[data-theme-mode="dark"] .portal-panel,
:root[data-theme-mode="dark"] .module-card,
:root[data-theme-mode="dark"] .form-card,
:root[data-theme-mode="dark"] .dashboard-quick-nav,
:root[data-theme-mode="dark"] .table-wrapper,
:root[data-theme-mode="dark"] .sticky-table,
:root[data-theme-mode="dark"] .gallery-album-item,
:root[data-theme-mode="dark"] .sales-order-customer-block,
:root[data-theme-mode="dark"] .settings-field-card,
:root[data-theme-mode="dark"] .settings-directory-card,
:root[data-theme-mode="dark"] .kpi-card,
:root[data-theme-mode="dark"] .filter-count,
:root[data-theme-mode="dark"] .doc-picker-shell,
:root[data-theme-mode="dark"] .activity-kpi-card,
:root[data-theme-mode="dark"] .activity-report-card,
:root[data-theme-mode="dark"] .activity-attachment-item,
:root[data-theme-mode="dark"] .activity-doc-card,
:root[data-theme-mode="dark"] .activity-notification-item,
:root[data-theme-mode="dark"] .notification-item-card{
  background-color: var(--card);
  color: var(--text);
}

:root[data-theme-mode="dark"] .module-card,
:root[data-theme-mode="dark"] .form-card,
:root[data-theme-mode="dark"] .settings-field-card,
:root[data-theme-mode="dark"] .settings-directory-card,
:root[data-theme-mode="dark"] .sales-order-customer-block,
:root[data-theme-mode="dark"] .gallery-album-item,
:root[data-theme-mode="dark"] .activity-kpi-card,
:root[data-theme-mode="dark"] .activity-report-card,
:root[data-theme-mode="dark"] .activity-attachment-item,
:root[data-theme-mode="dark"] .activity-doc-card,
:root[data-theme-mode="dark"] .activity-notification-item{
  border-color: var(--line);
}

:root[data-theme-mode="dark"] th{
  background: #17304d;
  color: #eef5ff;
}

:root[data-theme-mode="dark"] td,
:root[data-theme-mode="dark"] tr:hover td,
:root[data-theme-mode="dark"] .section-subtitle,
:root[data-theme-mode="dark"] .kpi-sub,
:root[data-theme-mode="dark"] .customer-status-text,
:root[data-theme-mode="dark"] .activity-kpi-note,
:root[data-theme-mode="dark"] .activity-doc-note{
  color: var(--muted);
}

:root[data-theme-mode="dark"] .form-field input,
:root[data-theme-mode="dark"] .form-field select,
:root[data-theme-mode="dark"] .form-field textarea,
:root[data-theme-mode="dark"] .filter-input,
:root[data-theme-mode="dark"] .settings-list-textarea,
:root[data-theme-mode="dark"] .main-command-search{
  background: var(--card-soft);
  color: var(--text);
  border-color: var(--line);
}

:root[data-theme-mode="dark"] .filter-btn,
:root[data-theme-mode="dark"] .header-btn,
:root[data-theme-mode="dark"] .module-inner-link,
:root[data-theme-mode="dark"] .btn,
:root[data-theme-mode="dark"] .customer-stack-field button,
:root[data-theme-mode="dark"] .sales-order-search-controls button{
  background: var(--card-soft);
  color: var(--text);
  border-color: var(--line);
}

/* =========================
   HEADER
========================= */
header{
  display:none;
}

.dashboard-header-strip{
  background:linear-gradient(135deg, #0f4179 0%, #155ba8 55%, #0f4c81 100%);
  color:#fff;
  display:grid;
  grid-template-columns:minmax(260px, .9fr) minmax(320px, 1.3fr) minmax(360px, 1fr);
  align-items:center;
  gap:18px;
  padding:12px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 26px rgba(11, 59, 112, 0.18);
}

.dashboard-header-brand{
  text-align:center;
  padding:0 24px;
}

.dashboard-header-strip h1{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.dashboard-header-strip h3{
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.95;
}

.dashboard-header-credentials{
  min-height:64px;
  display:grid;
  align-content:center;
  gap:2px;
  padding:8px 0;
  color:#fff;
}

.dashboard-header-credentials-title{
  font-size:13px;
  font-weight:800;
  line-height:1.15;
  opacity:.96;
}

.dashboard-header-credentials-subtitle{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.82);
}

.dashboard-header-credentials-subtitle strong{
  color:#fff;
}

.dashboard-header-user-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  min-height:64px;
  padding:0;
}

.dashboard-user-pill{
  min-width:240px;
  padding:8px 14px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(207, 224, 246, 0.95);
  box-shadow:0 10px 20px rgba(7, 42, 84, 0.10);
}

.dashboard-user-pill .settings-user-pill-text strong{
  color:#123e72;
}

.dashboard-user-pill .settings-user-pill-text span{
  color:#5a6e89;
}

.dashboard-user-pill .settings-user-avatar{
  box-shadow:none;
}

.dashboard-header-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* hide duplicate top blue header only on item master page */
body:has(.item-master-note) > header{
  display: none;
}

/* =========================
   PAGE LAYOUT
========================= */
.admin-shell{
  max-width: 1400px;
  margin: 12px auto 24px;
  padding: 0 20px;
}

.portal-panel{
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 20px;
}

.module-page-shell{
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* =========================
   TOPBAR
========================= */
.dashboard-topbar,
.module-topbar{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 18px;
}

.dashboard-topbar > div:first-child,
.module-topbar > div:first-child{
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-topbar > div:last-child,
.module-topbar > div:last-child{
  flex: 0 0 auto;
}

.top-actions,
.module-topbar-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.section-title{
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}

.section-subtitle{
  margin: 0;
  color: #42556d;
  font-size: 15px;
  line-height: 1.5;
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

/* =========================
   STATUS
========================= */
.status{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid transparent;
  white-space: nowrap;
}

.status.pending{
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: #fed7aa;
}

.status.done{
  background: var(--success-bg);
  color: var(--success-text);
  border-color: #bbf7d0;
}

.status.failed{
  background: var(--danger-bg);
  color: var(--danger-text);
  border-color: #fecaca;
}

/* =========================
   BUTTONS
========================= */
.filter-btn,
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--blue);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.dashboard-topbar .btn{
  min-width: 155px;
  height: 42px;
  padding: 9px 16px;
  flex-shrink: 0;
}

.dashboard-overview-topbar{
  align-items: center;
  gap: 20px;
  padding: 4px 0 8px;
}

.dashboard-overview-copy{
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-overview-actions{
  flex: 0 0 auto;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.dashboard-overview-actions .filter-btn{
  min-width: 170px;
  height: 42px;
  white-space: nowrap;
}

.filter-btn:hover,
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-primary{
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  border-color: transparent;
  color: #fff;
}

.btn-primary:hover{
  color: #fff;
}

.btn-secondary{
  background: #fff;
  color: var(--blue);
}

.btn-secondary:hover,
.filter-btn:hover{
  background: var(--blue3);
  color: var(--blue);
}

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

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

/* =========================
   QUICK NAV
========================= */
.dashboard-quick-nav{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.dashboard-quick-nav .btn{
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #fff;
  border: none;
}

.dashboard-quick-nav .btn:hover{
  opacity: 0.95;
  color: #fff;
}

.main-command-bar{
  display:grid;
  grid-template-columns:auto minmax(320px, 1fr) auto;
  gap:8px;
  align-items:center;
  background:
    radial-gradient(circle at top right, rgba(68, 136, 255, 0.18), transparent 28%),
    linear-gradient(135deg, #243148 0%, #182338 100%);
  border:1px solid rgba(117, 150, 194, 0.20);
  border-radius:20px;
  padding:8px 10px;
  margin-bottom:10px;
  box-shadow:0 16px 34px rgba(16, 34, 63, 0.22);
}

.dashboard-utility-card{
  display:grid;
  gap:12px;
  padding:14px;
  margin-bottom:18px;
  border:1px solid rgba(18, 97, 187, 0.12);
  border-radius:28px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:0 14px 32px rgba(15,76,129,.06);
}

.dashboard-command-bar{
  margin-bottom:0;
  padding:6px 8px;
  border-radius:22px;
  box-shadow:0 12px 28px rgba(16, 34, 63, 0.18);
}

.main-command-group-label{
  flex-basis:100%;
  margin:0 0 1px;
  color:rgba(224, 235, 249, 0.76);
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.dashboard-notification-bar{
  margin:0;
}

.notification-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}

.notification-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:120px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  text-decoration:none;
  color:inherit;
  background:#fff;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.notification-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 24px rgba(29, 62, 110, 0.12);
}

.notification-card-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.notification-module,
.notification-expiry,
.official-meta-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:#eff5ff;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
}

.notification-summary{
  font-size:14px;
  font-weight:800;
  color:#0f4c81;
}

.notification-detail{
  color:#5e7088;
  font-size:13px;
  line-height:1.45;
}

.notification-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}

.notification-danger{
  border-color:#fecaca;
  background:linear-gradient(180deg, #fff7f7 0%, #fff 100%);
}

.notification-warning{
  border-color:#fed7aa;
  background:linear-gradient(180deg, #fff8f1 0%, #fff 100%);
}

.notification-notice{
  border-color:#fde68a;
  background:linear-gradient(180deg, #fffdf1 0%, #fff 100%);
}

.notification-ok{
  border-color:#bbf7d0;
  background:linear-gradient(180deg, #f1fff6 0%, #fff 100%);
}

.notification-info{
  border-color:#cfe0f7;
}

.main-command-left,
.main-command-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.main-command-search-wrap{
  width:100%;
}

.main-command-search{
  width:100%;
  height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.08);
  color:#fff;
  padding:0 14px;
  font-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.main-command-search::placeholder{
  color:rgba(255,255,255,0.72);
}

.main-command-search:focus{
  outline:none;
  border-color:rgba(111, 173, 255, 0.9);
  box-shadow:0 0 0 3px rgba(88, 156, 255, 0.18);
}

.main-command-icon,
.main-command-link,
.main-command-user{
  border-radius:14px;
  font-weight:800;
}

.main-command-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
  color:#fff;
}

.main-command-link{
  min-width:72px;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.07);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  transition:.18s ease;
}

.main-command-link:hover{
  background:rgba(255,255,255,0.14);
  transform:translateY(-1px);
}

.main-command-link.active{
  background:linear-gradient(135deg, #0f4c81 0%, #1f6ac2 100%);
  border-color:transparent;
  box-shadow:0 12px 24px rgba(31, 106, 194, 0.28);
}

.main-command-user{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:#f4f7fb;
  color:#1b3763;
  box-shadow:0 10px 24px rgba(255,255,255,0.15);
}

.main-control-center{
  background:
    radial-gradient(circle at top right, rgba(50, 132, 230, 0.10), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.main-settings-layout{
  display:grid;
  gap:18px;
}

.main-settings-band{
  border:1px solid rgba(19, 94, 182, 0.12);
  border-radius:24px;
  background:#fff;
  padding:16px;
  box-shadow:0 12px 30px rgba(15, 76, 129, 0.05);
}

.main-settings-band-title{
  color:#0d3f7a;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:14px;
}

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

.main-settings-grid-compact{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.main-settings-card{
  border:1px solid rgba(19, 94, 182, 0.12);
  border-radius:18px;
  padding:14px 14px 12px;
  background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  min-height:170px;
}

.main-settings-card-head{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 10px;
  border-radius:10px;
  background:#f3f8ff;
  color:#0f4c81;
  font-size:14px;
  font-weight:800;
  margin-bottom:10px;
}

.main-settings-card a{
  display:block;
  color:#26486f;
  text-decoration:none;
  font-size:14px;
  padding:6px 0;
}

.main-settings-card a:hover{
  color:#165bb0;
}

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

.settings-directory-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:240px;
}

.settings-directory-head{
  display:flex;
  align-items:center;
  gap:10px;
}

.settings-directory-head h4{
  margin:0;
  color:var(--blue);
  font-size:20px;
  font-weight:900;
}

.settings-directory-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  background:#edf4ff;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
}

.settings-detail-shell{
  display:grid;
  gap:18px;
}

.settings-chip-grid{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

.settings-chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 12px;
  border-radius:12px;
  background:#f6f9ff;
  border:1px solid rgba(19, 94, 182, 0.12);
  color:#23476d;
  font-size:13px;
  font-weight:700;
}

.settings-chip-strong{
  background:#eaf3ff;
  color:#0f4c81;
  font-weight:800;
}

.settings-chip-table{
  background:#fff8ec;
  border-color:#f6d79f;
  color:#8a5a05;
}

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

.settings-field-card{
  border:1px solid rgba(19, 94, 182, 0.12);
  border-radius:18px;
  padding:16px;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  display:grid;
  gap:12px;
}

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

.settings-field-card-head h5{
  margin:0;
  color:var(--blue);
  font-size:17px;
  font-weight:900;
}

.settings-note-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#fff4db;
  color:#925b00;
  font-size:12px;
  font-weight:800;
}

.settings-group-note{
  padding:12px 14px;
  border-radius:14px;
  background:#f8fbff;
  border:1px dashed rgba(19, 94, 182, 0.18);
  color:#39597d;
  font-size:13px;
  font-weight:700;
}

.settings-logic-list{
  display:grid;
  gap:10px;
}

.settings-logic-item{
  padding:12px 14px;
  border-radius:14px;
  background:#f8fbff;
  border:1px solid rgba(19, 94, 182, 0.12);
  color:#35557b;
  font-size:13px;
  line-height:1.45;
}

.settings-kpi-value{
  font-size:20px;
}

.settings-detail-toolbar{
  display:grid;
  grid-template-columns:1.5fr auto;
  gap:14px;
  margin-bottom:18px;
  align-items:center;
}

.settings-connection-card{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(19, 94, 182, 0.16);
  background:linear-gradient(180deg, #f9fcff 0%, #eef6ff 100%);
  color:#1f3b68;
}

.settings-form-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.settings-control{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.settings-control-full{
  grid-column:1 / -1;
}

.settings-control-label{
  font-size:12px;
  font-weight:800;
  color:#31527e;
}

.settings-control input,
.settings-control select,
.settings-control textarea,
.settings-list-textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid #cfe0f7;
  border-radius:14px;
  background:#ffffff;
  color:#163d74;
  font-size:14px;
}

.settings-control textarea,
.settings-list-textarea{
  min-height:110px;
  resize:vertical;
}

.settings-control input:focus,
.settings-control select:focus,
.settings-control textarea:focus,
.settings-list-textarea:focus{
  outline:none;
  border-color:#1f66b1;
  box-shadow:0 0 0 3px rgba(31, 102, 177, 0.12);
}

.settings-control-toggle{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border:1px solid #d9e8fb;
  border-radius:16px;
  background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.settings-switch{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.settings-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.settings-switch-ui{
  width:52px;
  height:28px;
  border-radius:999px;
  background:#c7d9ee;
  position:relative;
  transition:all 0.2s ease;
}

.settings-switch-ui::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#ffffff;
  box-shadow:0 2px 10px rgba(24, 44, 86, 0.16);
  transition:all 0.2s ease;
}

.settings-switch input:checked + .settings-switch-ui{
  background:linear-gradient(135deg, #1d72c3 0%, #1a4f95 100%);
}

.settings-switch input:checked + .settings-switch-ui::after{
  left:27px;
}

.settings-list-editor{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.settings-list-editor-head,
.settings-bottom-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.settings-toggle-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.settings-bottom-actions{
  margin-top:18px;
  justify-content:flex-end;
}

.main-mini-chart{
  min-height:220px;
}

.settings-app-shell{
  display:block;
  width:100%;
}

.settings-sidebar{
  background:linear-gradient(180deg, #232b47 0%, #1c2440 100%);
  border-radius:22px;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:100%;
  box-shadow:0 16px 32px rgba(18, 31, 55, 0.2);
}

.settings-side-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:72px;
  padding:10px 6px;
  border-radius:16px;
  text-decoration:none;
  color:#eef4ff;
  transition:.18s ease;
}

.settings-side-link:hover{
  background:rgba(255,255,255,0.08);
  color:#fff;
}

.settings-side-link.active{
  background:linear-gradient(180deg, #ff6666 0%, #ff4d5c 100%);
  color:#fff;
  box-shadow:0 14px 28px rgba(255, 92, 107, 0.28);
}

.settings-side-icon{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
}

.settings-side-link span:last-child{
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
}

.settings-main{
  width:100%;
  min-width:0;
  display:grid;
  gap:18px;
}

.settings-top-strip{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(280px, 0.9fr) auto;
  gap:16px;
  align-items:start;
}

.settings-user-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:16px 18px;
  border:1px solid rgba(18, 97, 187, 0.12);
  border-radius:24px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:0 12px 30px rgba(15,76,129,.05);
}

.dashboard-user-strip{
  margin-bottom:0;
  padding:12px 14px;
  border-radius:20px;
  box-shadow:none;
}

.settings-user-copy{
  display:grid;
  gap:4px;
}

.settings-user-title{
  color:#0d3f7a;
  font-size:16px;
  font-weight:900;
}

.settings-user-subtitle{
  color:#5b6e87;
  font-size:14px;
  font-weight:600;
}

.settings-user-subtitle strong{
  color:#27476e;
  font-weight:800;
}

.settings-user-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.settings-user-pill{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  min-height:62px;
  border-radius:999px;
  border:1px solid #cfe0f6;
  background:linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  box-shadow:0 10px 24px rgba(15,76,129,.06);
}

.settings-user-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #0f4c81 0%, #1f6ac2 100%);
  color:#fff;
  font-size:14px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(31, 106, 194, 0.24);
}

.settings-user-pill-text{
  display:grid;
  gap:2px;
}

.settings-user-pill-text strong{
  color:#163b67;
  font-size:14px;
  font-weight:900;
}

.settings-user-pill-text span{
  color:#546a86;
  font-size:13px;
  font-weight:700;
}

.settings-logout-btn{
  background:#ef4444;
  border-color:#ef4444;
  color:#fff;
}

.settings-logout-btn:hover{
  background:#dc2626;
  border-color:#dc2626;
  color:#fff;
}

.settings-top-title{
  min-width:0;
}

.settings-top-search{
  min-width:0;
}

/* =========================
   KPI GRID
========================= */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.kpi-card{
  display: flex;
  flex-direction: column;
  min-height: 204px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #d8e4f1;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: var(--shadow-sm);
  transition: all 0.18s ease;
}

.kpi-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.kpi-title{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kpi-value{
  margin-top: 8px;
  font-size: 22px;
  font-weight: 900;
  color: var(--blue);
  line-height: 1.1;
}

.kpi-sub{
  margin-top: 8px;
  color: #42556d;
  font-size: 14px;
  line-height: 1.45;
  flex: 1 1 auto;
}

.kpi-card .btn{
  width: 100%;
  margin-top: 14px;
}

/* =========================
   MODULE SUPPORT
========================= */
.module-inner-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
}

.module-inner-link{
  flex: 0 0 auto;
  min-width: 170px;
  height: 48px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--blue);
  text-decoration: none;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
  transition: all 0.18s ease;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.module-inner-link:hover,
.module-inner-link.active{
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #fff;
  border-color: transparent;
}

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

.module-card,
.module-placeholder{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.module-card h4,
.module-placeholder strong{
  display: block;
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
}

.module-card p,
.module-placeholder p{
  margin: 0;
  color: #4c6078;
  line-height: 1.5;
}

.official-meta-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

.official-record-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}

.official-record-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
  margin-top:14px;
}

.official-record-grid div{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f9fbff;
}

.official-record-grid strong{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#5d718a;
}

.official-link-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.module-placeholder{
  min-height: 180px;
}

/* =========================
   FORM SUPPORT
========================= */
.form-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.form-grid,
.module-form-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.form-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.required-mark{
  color:var(--danger-text);
  font-weight:900;
}

.form-field label{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.form-field input,
.form-field select,
.form-field textarea,
.filter-input,
.filter-select{
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: all 0.18s ease;
}

.form-field textarea{
  min-height: 96px;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.filter-input:focus,
.filter-select:focus{
  border-color: #9fc4ee;
  box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.10);
}

.form-span-2,
.module-span-2{
  grid-column: span 2;
}

.form-span-4{
  grid-column: span 4;
}

/* =========================
   FILTER BAR
========================= */
.filter-bar{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.filter-date{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-label{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.filter-count{
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

/* =========================
   TABLE SUPPORT
========================= */
.table-wrapper{
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.sticky-table{
  overflow: auto;
}

table{
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
}

th,
td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}

th{
  position: sticky;
  top: 0;
  background: #f7fbff;
  color: var(--blue);
  font-weight: 900;
  white-space: nowrap;
  z-index: 1;
}

tr:hover td{
  background: #fbfdff;
}

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

.right{
  text-align: right;
}

/* =========================
   ITEM MASTER EXTRA
========================= */
.item-master-code-box{
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px dashed #b7cde8;
  border-radius: 12px;
  background: #f8fbff;
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.item-master-note{
  padding: 12px 14px;
  border: 1px solid #d9e7f5;
  border-radius: 14px;
  background: #f8fbff;
  color: #4c6078;
  font-size: 13px;
  line-height: 1.5;
}

.item-master-note strong{
  color: var(--blue);
}

.item-master-actions{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.item-master-actions .btn{
  min-width: 110px;
  height: 42px;
  border-radius: 10px;
  font-weight: 700;
}

.item-master-table th,
.item-master-table td{
  white-space: nowrap;
}

.item-master-level-card{
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.item-master-level-card h4{
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
}

.item-master-level-card p{
  margin: 0 0 14px;
  color: #4c6078;
  line-height: 1.5;
}

/* =========================
   SALES EXTRA
========================= */
.sales-entry-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.sales-entry-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sales-entry-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.sales-entry-priority{
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px dashed #c8daee;
  border-radius: 16px;
  padding: 14px;
}

.sales-priority-head{
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.sales-priority-head strong{
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}

.sales-priority-head span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sales-priority-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sales-priority-status{
  min-height: 22px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}

.sales-customer-layout{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
}

.sales-customer-stack{
  display: grid;
  gap: 14px;
}

.sales-customer-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.sales-customer-card h4{
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
}

.sales-customer-meta{
  display: grid;
  gap: 10px;
}

.sales-customer-meta > div{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdff;
  padding: 12px;
}

.sales-customer-meta span{
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.sales-customer-meta strong{
  display: block;
  color: var(--blue);
  font-size: 15px;
  font-weight: 900;
}

.sales-totals-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.sales-total-box{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.sales-total-box span{
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sales-total-box strong{
  display: block;
  margin-top: 8px;
  color: var(--blue);
  font-size: 22px;
  font-weight: 900;
}

/* =========================
   FAVOURITES
========================= */
#favoriteList,
#availablePortalList{
  margin-top: 14px;
}

.favorite-card-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

#favoriteList .module-card,
#availablePortalList .module-card{
  min-height: 190px;
  display: flex;
  flex-direction: column;
}

#favoriteList .module-card .btn,
#availablePortalList .module-card .btn{
  margin-top: 14px;
}

/* =========================
   GALLERY MODAL SUPPORT
========================= */
.gallery-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
}

.gallery-modal-card{
  width: min(1100px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
}

.gallery-modal-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.gallery-modal-header h3{
  margin: 0 0 4px;
  color: var(--blue);
  font-weight: 900;
}

.gallery-modal-header p{
  margin: 0;
  color: #516275;
}

.gallery-upload-bar{
  margin-bottom: 16px;
}

.gallery-upload-bar input[type="file"]{
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.gallery-album-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.gallery-album-item{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  box-shadow: var(--shadow-sm);
}

.gallery-album-item img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 10px;
}

.gallery-album-caption{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  word-break: break-word;
}

/* =========================
   HELPERS
========================= */
.text-center{
  text-align: center;
}

.mt-2{
  margin-top: 8px;
}

.mt-3{
  margin-top: 16px;
}

.mb-0{
  margin-bottom: 0;
}

.mb-1{
  margin-bottom: 4px;
}

.py-4{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.center{
  text-align: center;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1200px){
  .kpi-grid,
  .module-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-quick-nav{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sales-totals-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

  .dashboard-quick-nav{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-grid,
  .module-form-grid,
  .filter-bar{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-span-4{
    grid-column: span 2;
  }

  .sales-customer-layout{
    grid-template-columns: 1fr;
  }

  .sales-totals-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  header h1{
    font-size: 18px;
  }

  header h3{
    font-size: 12px;
  }

  .admin-shell{
    padding: 0 10px;
    margin-top: 12px;
  }

  .portal-panel{
    padding: 14px;
    border-radius: 16px;
  }

  .dashboard-topbar,
  .module-topbar,
  .sales-entry-head{
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .dashboard-topbar > div:last-child,
  .module-topbar > div:last-child{
    width: 100%;
  }

  .dashboard-topbar .btn,
  .module-topbar .btn{
    width: 100%;
  }

  .top-actions,
  .module-topbar-actions,
  .sales-entry-actions,
  .sales-priority-actions,
  .item-master-actions{
    justify-content: flex-start;
  }

  .dashboard-quick-nav,
  .kpi-grid,
  .module-grid,
  .form-grid,
  .module-form-grid,
  .filter-bar,
  .sales-totals-grid{
    grid-template-columns: 1fr;
  }

  .module-inner-nav{
    justify-content: stretch;
  }

  .module-inner-link{
    width: 100%;
    min-width: 100%;
  }

  .form-span-2,
  .form-span-4,
  .module-span-2{
    grid-column: auto;
  }

  .dashboard-quick-nav .btn,
  .kpi-card .btn,
  .favorite-card-actions .btn{
    width: 100%;
  }

  table{
    min-width: 760px;
  }

  .gallery-modal-card{
    padding: 14px;
  }
}

/* =========================
   FINAL RIGHT SIDE FIT FIX
========================= */

html,
body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.admin-shell{
  width: 100%;
  max-width: 100%;
  margin: 0 auto 28px;
  padding: 12px 20px;
}

.portal-panel{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.module-page-shell{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.dashboard-topbar{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.dashboard-topbar > div:first-child{
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-topbar > div:last-child{
  flex: 0 0 auto;
  max-width: 170px;
}

.dashboard-topbar .btn{
  width: 100%;
  max-width: 170px;
  min-width: 0;
  height: 42px;
  padding: 9px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-overview-topbar > .dashboard-overview-actions{
  max-width: none;
}

.dashboard-overview-topbar .dashboard-overview-actions .filter-btn{
  width: auto;
  max-width: none;
}

.section-subtitle{
  max-width: 100%;
  overflow-wrap: break-word;
}

.module-inner-nav{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.module-inner-link{
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.form-grid{
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-field{
  min-width: 0;
}

.table-wrapper{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 1100px){
  .module-inner-nav{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .admin-shell{
    padding: 10px;
  }

  .dashboard-topbar{
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-topbar > div:last-child{
    max-width: 100%;
    width: 100%;
  }

  .dashboard-topbar .btn{
    max-width: 100%;
    width: 100%;
  }

  .dashboard-overview-actions{
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .dashboard-overview-actions .filter-btn{
    min-width: 0;
    flex: 1 1 220px;
    width: auto;
  }

  .module-inner-nav{
    grid-template-columns: 1fr;
  }

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

/* =========================
   LISTED ITEMS + FINAL FIT FIX
========================= */

html,
body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.admin-shell{
  width: 100%;
  max-width: 100%;
  margin: 0 auto 28px;
  padding: 12px 20px;
}

.portal-panel,
.module-page-shell{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.dashboard-topbar{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.dashboard-topbar > div:first-child{
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-topbar > div:last-child{
  flex: 0 0 auto;
  max-width: 170px;
}

.dashboard-topbar .btn{
  width: 100%;
  max-width: 170px;
  min-width: 0;
  height: 42px;
  padding: 9px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-subtitle{
  max-width: 100%;
  overflow-wrap: break-word;
}

.module-inner-nav{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.module-inner-link{
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.form-grid{
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-field{
  min-width: 0;
}

.table-wrapper{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.listed-items-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.listed-items-filter{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 1200px){
  .module-inner-nav{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .module-inner-nav{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listed-items-filter{
    grid-template-columns: 1fr;
  }

  .main-settings-grid,
  .main-settings-grid-compact{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-directory-grid,
  .settings-detail-groups{
    grid-template-columns:1fr;
  }

  .settings-detail-toolbar,
  .settings-form-grid,
  .settings-toggle-grid{
    grid-template-columns:1fr;
  }

  .settings-app-shell{
    grid-template-columns:80px minmax(0, 1fr);
  }

  .settings-top-strip{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){
  .admin-shell{
    padding: 10px;
  }

  .dashboard-topbar{
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-topbar > div:last-child{
    max-width: 100%;
    width: 100%;
  }

  .dashboard-topbar .btn{
    max-width: 100%;
    width: 100%;
  }

  .module-inner-nav{
    grid-template-columns: 1fr;
  }

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

  .listed-items-head .btn{
    width: 100%;
  }

  .main-command-bar{
    grid-template-columns:1fr;
  }

  .main-command-left,
  .main-command-right{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .main-command-link{
    flex:1 1 140px;
  }

  .main-settings-grid,
  .main-settings-grid-compact{
    grid-template-columns:1fr;
  }

  .settings-directory-grid,
  .settings-detail-groups{
    grid-template-columns:1fr;
  }

  .settings-detail-toolbar,
  .settings-form-grid,
  .settings-toggle-grid{
    grid-template-columns:1fr;
  }

  .settings-app-shell{
    grid-template-columns:1fr;
  }

  .dashboard-header-strip{
    grid-template-columns:1fr;
    padding:10px;
  }

  .dashboard-header-brand,
  .dashboard-header-user-actions{
    justify-content:center;
    text-align:center;
  }

  .travelhaste-header-actions{
    justify-content:center;
  }

  .settings-sidebar{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .settings-user-actions{
    justify-content:flex-start;
  }

  .settings-user-pill{
    width:100%;
    border-radius:20px;
  }

  .settings-side-link{
    min-height:64px;
  }
}

/* =========================
   SALES ORDER HEADER ACTIONS
========================= */

.sales-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sales-order-header h4 {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
}

.sales-order-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.sales-order-actions .filter-btn {
  min-width: 140px;
  height: 42px;
  border-radius: 12px;
  white-space: nowrap;
}

.sales-order-actions .btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #ffffff;
  border-color: transparent;
}

.sales-order-actions .btn-primary:hover {
  color: #ffffff;
  opacity: 0.95;
}

/* MOBILE FIX */
@media (max-width: 768px) {
  .sales-order-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sales-order-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .sales-order-actions .filter-btn {
    flex: 1;
    min-width: 130px;
  }
}
.sales-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #f5f9ff);
  box-shadow: var(--shadow-sm);
}

.main-dashboard-hero{
  padding:12px 16px;
  background:
    radial-gradient(circle at top right, rgba(29, 155, 240, 0.10), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 55%, #f1f7ff 100%);
  border-color:#d7e5f6;
  box-shadow:0 16px 34px rgba(15, 54, 104, 0.08);
}

.sales-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.main-hero-logo-wrap{
  width:72px;
  height:72px;
  min-width:72px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(19, 94, 182, 0.12);
  box-shadow:0 10px 22px rgba(15, 76, 129, 0.08);
  overflow:hidden;
}

.main-hero-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.sales-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
}

.sales-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.main-hero-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:4px 8px;
  border-radius:999px;
  background:#e9f3ff;
  color:#1a5c9b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.sales-header .section-title {
  margin: 0;
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
}

.sales-header .section-subtitle {
  margin: 0;
  color: #42556d;
  font-size: 11px;
}

.sales-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.main-header-button-group{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.header-notification-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.header-notification-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.header-notification-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(440px, calc(100vw - 48px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 20px 36px rgba(24, 57, 102, 0.18);
  z-index: 50;
}

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

.header-notification-panel-head strong {
  display: block;
  color: var(--blue);
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 4px;
}

.header-notification-list {
  max-height: 420px;
  overflow: auto;
}

.header-btn {
  height: 34px;
  min-width: 86px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.header-btn:hover {
  background: var(--blue3);
  color: var(--blue);
}

.header-btn.primary {
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #ffffff;
  border-color: transparent;
}

.main-user-pod{
  min-width:220px;
  padding:6px 12px;
  border-radius:16px;
}

.main-user-pod-label{
  display:block;
  margin-bottom:2px;
  color:#6d8098;
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

@media (max-width: 768px) {
  .sales-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sales-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .main-header-button-group{
    width:100%;
  }

  .header-notification-wrap {
    width: 100%;
  }

  .header-notification-panel {
    left: 0;
    right: auto;
    width: min(100%, 520px);
  }

  .header-btn {
    flex: 1;
    min-width: 130px;
  }
} 
/* =========================
   COMMON SALES SECTION HEADER
========================= */

.sales-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.sales-section-title h4 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 900;
  color: var(--blue);
}

.sales-section-title p {
  margin: 0;
  font-size: 13px;
  color: #42556d;
}

.sales-section-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sales-section-actions .filter-btn {
  min-width: 140px;
  height: 42px;
}

.sales-section-actions .btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #fff;
  border-color: transparent;
}

/* =========================
   FINAL CUSTOMER SEARCH - COMPACT DESIGN
========================= */

.customer-stack-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0;
}

.customer-stack-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.customer-stack-field label {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  color: var(--blue);
}

.customer-stack-field input,
.customer-stack-field select {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  width: 100%;
}

.customer-stack-field button {
  min-width: 150px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--blue);
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}

.customer-stack-field button:hover {
  border-color: #cfe0f5;
  box-shadow: var(--shadow);
}

.sales-order-form-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(240px,.8fr) minmax(240px,.8fr);
  gap:14px;
  align-items:start;
}

.sales-order-customer-block{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fbfdff;
  padding:14px;
}

.sales-order-customer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.sales-order-search-row{
  display:grid;
  gap:8px;
}

.sales-order-search-row label{
  margin:0;
  font-size:13px;
  font-weight:900;
  color:var(--blue);
}

.sales-order-search-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}

.sales-order-search-controls input{
  min-height:42px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  width:100%;
}

.sales-order-search-controls button{
  min-width:160px;
  min-height:42px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--blue);
  font-weight:900;
  box-shadow:var(--shadow-sm);
}

.sales-order-search-controls button:hover{
  border-color:#cfe0f5;
  box-shadow:var(--shadow);
}

.sales-compact-kpi-grid{
  gap:10px;
}

.sales-compact-kpi-grid .kpi-card{
  min-height:110px;
  padding:12px 14px;
  border-radius:16px;
}

.sales-compact-kpi-grid .kpi-title{
  font-size:11px;
}

.sales-compact-kpi-grid .kpi-value{
  margin-top:6px;
  font-size:18px;
}

.sales-compact-kpi-grid .kpi-sub{
  margin-top:4px;
  font-size:12px;
  line-height:1.25;
}

.customer-simple-box {
  display: flex !important;
  gap: 18px !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.customer-simple-field {
  width: 180px !important;
  display: block !important;
}

.customer-simple-field label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--blue) !important;
}

.customer-simple-field input {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 6px 8px !important;
  border: 1px solid #111827 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.customer-simple-field .filter-btn {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: none !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, var(--blue), var(--blue2)) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.customer-simple-field .filter-btn:hover {
  opacity: 0.95 !important;
  transform: none !important;
}

.customer-status-text {
  margin-top: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.sales-customer-master{
  display:grid;
  gap:16px;
}

.sales-customer-search-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)) auto;
  gap:12px;
  align-items:end;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fbfdff;
}

.sales-customer-search-action{
  display:flex;
  align-items:flex-end;
}

.sales-customer-search-action .filter-btn{
  min-width:150px;
}

.sales-sub-nav{
  grid-template-columns:repeat(7, minmax(0, 1fr));
}

.sales-customer-tab-section{
  display:grid;
  gap:16px;
}

.sales-customer-overview-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(320px, 0.9fr);
  gap:16px;
  align-items:start;
}

.sales-customer-column{
  display:grid;
  gap:16px;
}

.receipt-common-tools{
  display:grid;
  gap:10px;
}

.doc-picker-shell{
  margin-top:12px;
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid #d8e5f7;
  border-radius:16px;
  background:linear-gradient(180deg,#fbfdff 0%,#f4f8ff 100%);
}

.doc-picker-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.doc-picker-header strong{
  color:var(--blue);
  font-size:15px;
}

.doc-picker-subtitle{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}

.doc-picker-modal{
  position:fixed;
  inset:0;
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15, 23, 42, 0.45);
}

.doc-picker-modal-card{
  width:min(1080px, 100%);
  max-height:88vh;
  overflow:auto;
  padding:16px;
  border:1px solid #d8e5f7;
  border-radius:18px;
  background:linear-gradient(180deg,#fbfdff 0%,#f4f8ff 100%);
  box-shadow:0 24px 54px rgba(15, 23, 42, 0.24);
}

:root[data-theme-mode="dark"] .doc-picker-modal-card{
  border-color:var(--line);
  background:var(--card);
}

.receipt-attach-btn{
  cursor:pointer;
}

.receipt-preview-text{
  margin:0;
  white-space:pre-wrap;
  font-family:Consolas, "Courier New", monospace;
  font-size:13px;
  color:var(--text);
}

.sales-customer-three-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .sales-order-form-grid{
    grid-template-columns:1fr;
  }

  .sales-order-customer-grid{
    grid-template-columns:1fr;
  }

  .sales-order-search-controls{
    grid-template-columns:1fr;
  }

  .sales-order-search-controls button{
    width:100%;
  }

  .customer-stack-box {
    grid-template-columns: 1fr;
  }

  .customer-stack-field {
    grid-template-columns: 1fr;
  }

  .customer-stack-field button {
    width: 100%;
  }

  .sales-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sales-section-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .sales-section-actions .filter-btn {
    flex: 1;
  }

  .customer-simple-field {
    width: 100% !important;
  }

  .sales-sub-nav{
    grid-template-columns:1fr;
  }

  .sales-customer-search-strip,
  .sales-customer-overview-grid,
  .sales-customer-three-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   CUSTOMER SEARCH HARD FINAL FIX
========================= */

#sales-order .customer-ref-box {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 860px !important;
}

#sales-order .customer-ref-field {
  width: 100% !important;
  min-width: 0 !important;
}

#sales-order .customer-ref-field label {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #0b3b70 !important;
}

#sales-order .customer-ref-field input {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 6px 8px !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

#sales-order .customer-ref-field input:focus {
  outline: none !important;
  border-color: #111 !important;
  box-shadow: none !important;
}

#sales-order .customer-ref-field button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: none !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #0b3b70, #0a66c2) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
  cursor: pointer !important;
}

#sales-order .customer-ref-field button:hover {
  opacity: 0.95 !important;
}

@media (max-width: 768px) {
  #sales-order .customer-ref-box {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}

.main-mini-chart{
  display:grid;
  gap:14px;
}

.main-strength-row{
  display:grid;
  grid-template-columns:120px 1fr 90px;
  gap:12px;
  align-items:center;
}

.main-strength-label{
  font-size:13px;
  font-weight:800;
  color:#20466f;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.main-strength-bar-track{
  position:relative;
  height:14px;
  border-radius:999px;
  background:#e5eef8;
  overflow:hidden;
}

.main-strength-bar{
  height:100%;
  border-radius:999px;
}

.strength-sales{
  background:linear-gradient(90deg, #1d63ad 0%, #3f8ad7 100%);
}

.strength-purchase{
  background:linear-gradient(90deg, #0f4c81 0%, #2563a6 100%);
}

.strength-activity{
  background:linear-gradient(90deg, #c97712 0%, #f0a335 100%);
}

.strength-items{
  background:linear-gradient(90deg, #15803d 0%, #35b267 100%);
}

.main-strength-value{
  text-align:right;
  font-weight:800;
  color:#123e72;
}

.main-donut-chart{
  display:grid;
  gap:16px;
  justify-items:center;
}

.main-donut-visual{
  width:220px;
  height:220px;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px rgba(15,76,129,.08);
}

.main-donut-core{
  width:130px;
  height:130px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  box-shadow:0 12px 30px rgba(15,76,129,.08);
}

.main-donut-core strong{
  font-size:22px;
  color:#0f4c81;
}

.main-donut-core span{
  font-size:12px;
  color:#66758a;
  font-weight:700;
}

.main-donut-legend{
  width:100%;
  display:grid;
  gap:10px;
}

.main-donut-legend-row{
  display:grid;
  grid-template-columns:14px 1fr auto;
  gap:10px;
  align-items:center;
  font-size:14px;
  color:#27476e;
}

.main-donut-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
}

.main-module-actions{
  display:grid;
  gap:12px;
}

.main-module-actions .filter-btn{
  text-align:center;
  text-decoration:none;
}

.accounts-hero-card{
  margin-bottom: 1.5rem;
}

.accounts-flow-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.accounts-flow-card{
  border:1px solid rgba(18, 97, 187, 0.16);
  border-radius:22px;
  padding:18px;
  background:linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  min-height:164px;
}

.accounts-flow-label{
  color:#6f7f99;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.accounts-flow-title{
  color:#0d3f7a;
  font-size:18px;
  font-weight:800;
  margin-bottom:8px;
}

.accounts-flow-text{
  color:#456082;
  font-size:14px;
  line-height:1.55;
}

.accounts-flow-quickbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

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

.accounts-report-grid .module-card{
  margin:0;
}

.accounts-report-grid h5{
  color:#0d3f7a;
  font-size:18px;
  font-weight:800;
  margin-bottom:12px;
}

.accounts-report-breadcrumb{
  color:#6a7e9c;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:4px;
}

.accounts-report-filter-bar{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr)) auto;
  gap:14px;
  align-items:end;
  margin-top:14px;
}

.accounts-report-view-tabs{
  display:flex;
  gap:10px;
  margin-top:18px;
  margin-bottom:16px;
}

.accounts-report-view-btn{
  border:1px solid #cfe0f6;
  background:#fff;
  color:#4f6482;
  border-radius:999px;
  padding:10px 20px;
  font-weight:800;
  transition:.2s ease;
}

.accounts-report-view-btn.active{
  background:#1f62ad;
  color:#fff;
  border-color:#1f62ad;
  box-shadow:0 12px 26px rgba(20,87,158,.16);
}

.accounts-report-view-panel{
  min-width:0;
}

.accounts-report-sheet{
  border:1px solid rgba(18, 97, 187, 0.14);
  border-radius:24px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding:24px;
  box-shadow:0 12px 30px rgba(15,76,129,.06);
}

.accounts-report-company{
  text-align:center;
  color:#6c809c;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
}

.accounts-report-sheet-title{
  text-align:center;
  color:#0d3f7a;
  font-size:32px;
  font-weight:900;
  margin-top:6px;
}

.accounts-report-sheet-meta{
  text-align:center;
  color:#5a6e89;
  font-size:15px;
  font-weight:700;
  margin-top:4px;
}

.accounts-report-sheet .table-wrapper{
  overflow:auto;
}

.accounts-report-sheet table th,
.accounts-report-sheet table td{
  white-space:nowrap;
}

.accounts-report-sheet table td:nth-child(3),
.accounts-report-sheet table td:nth-child(6){
  white-space:normal;
  min-width:220px;
}

.accounts-report-sheet table td:last-child{
  font-weight:800;
  color:#1b63b5;
}

.accounts-report-chart-placeholder{
  border:1px dashed rgba(18, 97, 187, 0.22);
  border-radius:24px;
  background:linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  padding:48px 28px;
  text-align:center;
}

.accounts-report-chart-title{
  color:#0d3f7a;
  font-size:28px;
  font-weight:900;
  margin-bottom:10px;
}

.accounts-report-chart-text{
  color:#5d708a;
  max-width:700px;
  margin:0 auto;
  line-height:1.65;
}

.accounts-create-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) 320px;
  gap:20px;
  align-items:start;
}

.accounts-type-card,
.accounts-upload-card,
.accounts-summary-box,
.accounts-bank-balance-card,
.accounts-bank-summary-card{
  border:1px solid rgba(18, 97, 187, 0.14);
  border-radius:22px;
  background:#fff;
  padding:18px;
  box-shadow:0 12px 30px rgba(15,76,129,.06);
}

.accounts-type-card{
  background:linear-gradient(180deg, #203556 0%, #1d2d4c 100%);
  color:#fff;
}

.accounts-type-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  font-size:12px;
  font-weight:800;
  margin-bottom:12px;
}

.accounts-type-title{
  font-size:24px;
  font-weight:800;
  margin-bottom:10px;
}

.accounts-type-text{
  color:rgba(255,255,255,.88);
  line-height:1.6;
}

.accounts-form-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) 360px;
  gap:20px;
  align-items:start;
}

.accounts-form-main{
  min-width:0;
  display:grid;
  gap:16px;
}

.accounts-form-side{
  display:grid;
  gap:14px;
  align-content:start;
}

.accounts-subcard{
  border:1px solid rgba(18, 97, 187, 0.12);
  border-radius:22px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding:16px;
  box-shadow:0 10px 26px rgba(15,76,129,.05);
}

.accounts-subcard-head{
  color:#0d3f7a;
  font-size:16px;
  font-weight:800;
  margin-bottom:12px;
}

.accounts-section .sales-order-form-grid{
  gap:14px 16px;
}

.accounts-section textarea{
  width:100%;
  border:1px solid #cfe0f6;
  border-radius:16px;
  padding:12px 14px;
  min-height:86px;
  resize:vertical;
  color:#123d73;
  background:#fff;
}

.accounts-section textarea:focus{
  outline:none;
  border-color:#2b71c8;
  box-shadow:0 0 0 3px rgba(43,113,200,.12);
}

.accounts-journal-layout{
  grid-template-columns:minmax(0, 1.7fr) 300px;
  gap:16px;
}

.accounts-expense-layout{
  grid-template-columns:minmax(0, 1.6fr) 260px;
  gap:16px;
}

.accounts-tools-card{
  padding:14px;
  border-radius:22px;
}

.accounts-tools-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  justify-content:stretch;
}

.accounts-tools-grid .filter-btn{
  width:100%;
  min-width:0;
}

.accounts-tools-span{
  grid-column:1 / -1;
  text-align:center;
}

.accounts-summary-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid rgba(18, 97, 187, 0.1);
  align-items:center;
}

.accounts-summary-row:last-child{
  border-bottom:none;
}

.accounts-summary-row span{
  color:#506683;
  font-weight:700;
}

.accounts-summary-row strong{
  color:#0d3f7a;
  font-size:18px;
}

.accounts-summary-diff strong{
  color:#e34a4a;
}

.accounts-upload-card{
  min-height:220px;
  border-style:dashed;
  display:grid;
  place-items:center;
  text-align:center;
  padding:20px 18px;
  border-color:rgba(18, 97, 187, 0.22);
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.accounts-upload-icon{
  font-size:22px;
  font-weight:800;
  color:#2b71c8;
  letter-spacing:.08em;
  margin-bottom:10px;
}

.accounts-upload-title{
  color:#0d3f7a;
  font-size:16px;
  font-weight:800;
}

.accounts-upload-text{
  color:#6f7f99;
  font-size:13px;
  margin-top:6px;
}

.accounts-document-footer{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) 340px;
  gap:20px;
  margin-top:18px;
}

.accounts-footer-notes{
  display:grid;
  gap:16px;
}

.accounts-footer-side{
  display:grid;
  gap:16px;
}

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

.accounts-bank-summary-card .kpi-title,
.accounts-bank-balance-card .kpi-title{
  color:#60738d;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.accounts-bank-summary-card .kpi-value,
.accounts-bank-balance-card .kpi-value{
  color:#0d3f7a;
  font-size:28px;
  font-weight:800;
  margin-top:8px;
}

.accounts-bank-detail-top{
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  gap:20px;
  align-items:start;
}

.accounts-bank-filter-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.accounts-section .table-wrapper td{
  vertical-align:middle;
}

.accounts-section .table-wrapper{
  margin-top:14px;
  border-radius:18px;
}

.accounts-section .table-wrapper th{
  white-space:nowrap;
}

.accounts-tight-table{
  margin-top:0 !important;
}

.activity-shell-grid{
  gap:16px;
}

.activity-inner-card{
  padding:16px;
}

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

.activity-kpi-card{
  background:#f8fbff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.activity-kpi-label{
  font-size:11px;
  font-weight:900;
  color:#5b6d86;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.activity-kpi-card strong{
  font-size:28px;
  line-height:1;
  color:var(--blue);
}

.activity-kpi-note{
  font-size:12px;
  color:#58708f;
}

.activity-filter-grid{
  grid-template-columns:repeat(6, minmax(0, 1fr));
}

.activity-report-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px;
}

.activity-report-card{
  border:1px dashed #c8d9f3;
  background:#f9fbff;
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.activity-report-card strong{
  color:var(--blue);
  font-size:14px;
}

.activity-report-card span{
  color:#5f7692;
  font-size:12px;
}

.activity-detail-shell{
  gap:16px;
}

.activity-two-column{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(320px, .95fr);
  gap:16px;
}

.activity-main-column,
.activity-side-column{
  display:grid;
  gap:16px;
  align-content:start;
}

.activity-form-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.activity-inline-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.activity-chip-list{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.activity-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#eef5ff;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
}

.activity-chip button{
  border:none;
  background:transparent;
  color:#d33a3a;
  font-size:15px;
  line-height:1;
  padding:0;
}

.activity-attachment-list{
  display:grid;
  gap:10px;
}

.activity-attachment-list.compact{
  margin-top:10px;
}

.activity-attachment-item{
  padding:10px 12px;
  border:1px solid var(--line);
  background:#f9fbff;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.activity-attachment-item strong{
  color:var(--blue);
  font-size:13px;
}

.activity-attachment-item span{
  color:#607792;
  font-size:12px;
}

.activity-related-docs-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:16px;
  align-items:start;
}

.activity-doc-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border:1px solid var(--line);
  background:#f9fbff;
  border-radius:14px;
}

.activity-doc-label{
  font-size:11px;
  font-weight:900;
  color:#5b6d86;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.activity-doc-summary strong{
  color:var(--blue);
  font-size:18px;
}

.activity-doc-note{
  color:#607792;
  font-size:12px;
}

.activity-tool-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.activity-comment-composer{
  display:grid;
  gap:10px;
}

.activity-comment-composer textarea,
.activity-form-grid textarea{
  min-height:120px;
}

.activity-thread-list,
.activity-timeline-list,
.activity-notification-list{
  display:grid;
  gap:12px;
}

.activity-thread-item,
.activity-timeline-item,
.activity-notification-item{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfdff;
}

.activity-thread-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:8px;
}

.activity-thread-item p,
.activity-timeline-item p,
.activity-notification-item p{
  margin:6px 0 0;
  color:#455a73;
  font-size:13px;
}

.activity-thread-item span,
.activity-timeline-item span,
.activity-notification-item span{
  color:#617893;
  font-size:12px;
}

.activity-timeline-item strong,
.activity-notification-item strong{
  color:var(--blue);
  display:block;
}

.activity-notification-item.unread{
  border-color:#b9d4fb;
  background:#f2f8ff;
}

.activity-notification-item.read{
  opacity:.86;
}

.activity-compact-select{
  min-width:140px;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}

.activity-action-wrap{
  row-gap:10px;
}

.activity-priority-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid transparent;
}

.activity-priority-badge.priority-low,
#activityPriority.priority-low{
  background:#eef8f0;
  color:#217246;
  border-color:#bfe6cd;
}

.activity-priority-badge.priority-medium,
#activityPriority.priority-medium{
  background:#fff7e8;
  color:#9b6206;
  border-color:#f2d59b;
}

.activity-priority-badge.priority-high,
#activityPriority.priority-high{
  background:#fff1ea;
  color:#c85b1d;
  border-color:#f0c3aa;
}

.activity-priority-badge.priority-urgent,
#activityPriority.priority-urgent{
  background:#fff0f1;
  color:#c23748;
  border-color:#efb4bc;
}

@media (max-width: 1400px){
  .activity-kpi-grid,
  .activity-report-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .activity-filter-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px){
  .activity-two-column{
    grid-template-columns:1fr;
  }

  .activity-form-grid,
  .activity-filter-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .activity-related-docs-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .activity-kpi-grid,
  .activity-report-grid,
  .activity-form-grid,
  .activity-filter-grid,
  .activity-tool-grid{
    grid-template-columns:1fr;
  }

  .activity-inline-row{
    flex-direction:column;
    align-items:stretch;
  }

  .activity-thread-head{
    flex-direction:column;
  }
}

.accounts-table-input{
  width:100%;
  min-width:0;
  border:1px solid #cfe0f6;
  border-radius:14px;
  padding:10px 12px;
  min-height:44px;
  font-size:14px;
  color:#123d73;
  background:#fff;
  outline:none;
  box-shadow:inset 0 1px 2px rgba(15,76,129,.03);
}

.accounts-table-input:focus{
  border-color:#2b71c8;
  box-shadow:0 0 0 3px rgba(43,113,200,.12);
}

@media (max-width: 920px){
  .main-strength-row{
    grid-template-columns:1fr;
  }

  .main-strength-value{
    text-align:left;
  }

  .accounts-flow-grid,
  .accounts-report-grid{
    grid-template-columns:1fr;
  }

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

  .accounts-create-grid,
  .accounts-form-layout,
  .accounts-document-footer,
  .accounts-bank-detail-top{
    grid-template-columns:1fr;
  }

  .accounts-bank-summary,
  .accounts-bank-filter-strip,
  .accounts-tools-grid{
    grid-template-columns:1fr;
  }
}

.erp-workspace-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.8fr) minmax(320px, .9fr);
  gap:18px;
  align-items:start;
}

.erp-main-column,
.erp-side-column{
  display:grid;
  gap:18px;
}

.simple-badge-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.simple-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eef5ff;
  border:1px solid #cfe0f6;
  color:#184b86;
  font-size:12px;
  font-weight:800;
}

.simple-badge.muted{
  background:#f7fafc;
  color:#6b7d93;
}

.gallery-meta-stack{
  display:grid;
  gap:4px;
  margin:8px 0 10px;
  color:#5d748f;
  font-size:12px;
}

.gallery-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.gallery-file-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:180px;
  border-radius:12px;
  background:linear-gradient(135deg,#edf5ff,#dbe9ff);
  color:#184b86;
  font-size:34px;
  font-weight:900;
  margin-bottom:10px;
}

.erp-mini-list{
  display:grid;
  gap:10px;
}

.erp-mini-list-item{
  display:grid;
  gap:4px;
  padding:12px;
  border:1px solid #dbe5f0;
  border-radius:14px;
  background:#fbfdff;
}

.erp-mini-list-item strong{
  color:#123d73;
}

.erp-mini-list-item span,
.erp-mini-list-item small{
  color:#5d748f;
  font-size:12px;
}

.comment-thread-list{
  display:grid;
  gap:12px;
}

.comment-thread-item{
  padding:14px;
  border:1px solid #dbe5f0;
  border-radius:14px;
  background:#fbfdff;
}

.comment-thread-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.comment-thread-head span{
  color:#5d748f;
  font-size:12px;
}

.comment-thread-text{
  color:#21486f;
  font-size:14px;
  line-height:1.55;
  white-space:pre-wrap;
}

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

.erp-record-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:16px;
  padding:16px;
  border:1px solid #dbe5f0;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15, 23, 42, .04);
}

.erp-record-main{
  display:grid;
  gap:8px;
}

.erp-record-main p{
  margin:0;
  color:#4b627c;
}

.erp-record-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  justify-content:center;
  min-width:160px;
}

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

@media (max-width: 720px){
  .erp-record-row{
    grid-template-columns:1fr;
  }

  .erp-record-actions{
    min-width:0;
  }

  .comment-thread-head{
    flex-direction:column;
  }
}

.smart-table-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.client-auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:18px 16px;
}

.client-auth-card{
  width:min(1060px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:20px;
}

.client-auth-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}

.client-auth-brand-logo-wrap{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(19, 94, 182, 0.12);
  box-shadow:0 10px 24px rgba(15, 76, 129, 0.08);
  overflow:hidden;
  flex:0 0 auto;
}

.client-auth-brand-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.client-auth-kicker{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 10px;
  border-radius:999px;
  background:#eef5ff;
  color:var(--blue2);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}

.client-auth-brand h1{
  margin:0;
  font-size:28px;
  color:var(--blue);
  line-height:1.1;
}

.client-auth-brand p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:14px;
}

.client-auth-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:14px;
}

.client-auth-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.client-auth-mini-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
}

.client-auth-mini-chip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  background:#f7fbff;
  border:1px solid rgba(19, 94, 182, 0.14);
  color:#28517f;
  font-size:12px;
  font-weight:700;
}

.client-auth-login-panel,
.client-auth-info-panel{
  padding:18px !important;
}

.client-auth-step-label{
  margin:12px 0 8px;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.client-auth-help-box{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(19, 94, 182, 0.12);
  border-radius:14px;
  background:#f8fbff;
  display:grid;
  gap:6px;
}

.client-auth-help-box strong{
  color:var(--blue);
  font-size:13px;
}

.client-auth-help-box span{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.client-auth-login-panel .header-btn,
.client-auth-info-panel .header-btn{
  min-height:40px;
  padding:8px 14px;
}

.client-auth-login-panel .form-field input,
.client-auth-login-panel .form-field select{
  min-height:44px;
}

.client-portal-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:290px minmax(0, 1fr);
}

.client-sidebar{
  padding:22px 16px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(240,247,255,.94) 100%);
  position:sticky;
  top:0;
  align-self:start;
  min-height:100vh;
}

.client-sidebar-brand{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:24px;
}

.client-sidebar-brand-logo-wrap{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(19, 94, 182, 0.12);
  box-shadow:0 8px 18px rgba(15, 76, 129, 0.08);
  overflow:hidden;
  flex:0 0 auto;
}

.client-sidebar-brand-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.client-sidebar-brand h1{
  margin:0;
  font-size:24px;
  color:var(--blue);
}

.client-sidebar-brand p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:13px;
}

.client-sidebar-group{
  margin-bottom:20px;
}

.client-sidebar-label{
  margin-bottom:10px;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}

.client-nav-link{
  width:100%;
  text-align:left;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  padding:11px 14px;
  border-radius:14px;
  font-weight:700;
  transition:.18s ease;
  margin-bottom:6px;
}

.client-nav-link:hover{
  background:var(--blue3);
}

.client-nav-link.active{
  background:var(--blue);
  color:#fff;
  box-shadow:var(--shadow-sm);
}

.client-module-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.client-main{
  padding:18px;
}

.client-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.client-topbar-title{
  font-size:30px;
  font-weight:900;
  color:var(--blue);
}

.client-topbar-subtitle{
  margin-top:4px;
  color:var(--muted);
}

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

.client-stat-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:14px;
}

.client-status-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:var(--blue3);
  color:var(--blue);
  font-size:12px;
  font-weight:800;
}

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

.client-status-badge.success{
  background:rgba(16, 185, 129, 0.12);
  color:#047857;
}

.client-status-badge.warning{
  background:rgba(245, 158, 11, 0.16);
  color:#b45309;
}

.client-dynamic-documents,
.client-ocr-grid,
.client-permission-grid,
.client-chat-thread,
.client-timeline-list{
  display:grid;
  gap:14px;
}

.client-request-kpi{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:14px;
  display:grid;
  gap:8px;
}

.client-request-kpi span{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5d748f;
}

.client-request-kpi strong{
  color:var(--blue);
  font-size:18px;
  line-height:1.2;
}

.client-request-kpi em{
  color:#5d748f;
  font-style:normal;
}

.client-request-preview-workspace{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(340px, 0.9fr);
  gap:16px;
  align-items:start;
}

.client-request-attachment-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.9fr) minmax(360px, 0.9fr);
  gap:18px;
  align-items:start;
  max-height:calc(100vh - 250px);
  overflow:hidden;
}

.client-request-section-shell{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:16px;
}

.client-request-wide-card{
  min-width:0;
}

.client-request-ocr-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(300px, 0.75fr);
  gap:18px;
  align-items:start;
}

.client-request-ocr-panel,
.client-request-history-panel{
  min-width:0;
}

.client-request-preview-panel,
.client-request-doc-panel{
  min-width:0;
  max-height:calc(100vh - 250px);
  overflow:auto;
}

.client-request-preview-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid #e6eef7;
}

.client-request-preview-toolbar .sales-section-title{
  min-width:0;
}

.client-request-preview-toolbar .sales-section-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}

.client-request-preview-stage{
  min-height:520px;
  max-height:calc(100vh - 430px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px;
  background:#f8fbff;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.client-request-preview-image{
  display:block;
  width:auto;
  max-width:100%;
  max-height:calc(100vh - 470px);
  height:auto;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(15, 44, 74, 0.12);
}

.client-request-preview-frame{
  width:100%;
  min-height:540px;
  max-height:calc(100vh - 430px);
  border:0;
  border-radius:12px;
  background:#fff;
}

.client-request-preview-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 14px;
  color:#21486f;
  font-size:13px;
  margin-top:14px;
}

.client-request-preview-meta div{
  min-width:0;
  padding:12px;
  border:1px solid #dbe5f0;
  border-radius:14px;
  background:#fbfdff;
  overflow-wrap:anywhere;
}

.client-request-preview-meta strong{
  display:block;
  margin-bottom:6px;
  color:var(--blue);
}

.client-request-preview-meta span{
  display:block;
  line-height:1.5;
  color:#385779;
  overflow-wrap:anywhere;
}

.client-request-preview-empty{
  width:100%;
  min-height:220px;
  border:1px dashed #c6d6e8;
  border-radius:14px;
  background:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  gap:6px;
  color:#5d748f;
  padding:20px;
}

.client-request-doc-list{
  display:grid;
  gap:12px;
  max-height:calc(100vh - 360px);
  overflow:auto;
  padding-right:4px;
}

.client-request-doc-item{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfdff;
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:12px;
}

.client-request-doc-item > div:first-child{
  min-width:0;
  overflow-wrap:break-word;
}

.client-request-doc-item strong{
  display:block;
  margin-bottom:6px;
  color:var(--blue);
  word-break:normal;
}

.client-request-doc-item > div:first-child div{
  overflow-wrap:anywhere;
}

.client-request-doc-item.active{
  border-color:var(--blue2);
  box-shadow:0 0 0 1px rgba(29, 92, 163, 0.15) inset;
  background:#f5f9ff;
}

.client-request-ocr-row{
  display:grid;
  gap:6px;
  padding:10px 0;
  border-bottom:1px solid #e6eef7;
}

.client-request-ocr-row:last-child{
  border-bottom:0;
}

.client-request-detail-overlay{
  align-items:flex-start;
  overflow:auto;
  padding:4px;
}

.client-request-detail-sheet{
  width:min(99.8vw, 2200px);
  min-width:min(99.8vw, 1640px);
  min-height:calc(100vh - 8px);
  max-height:none;
  margin:0 auto;
  border-radius:24px;
}

.client-request-detail-modal-body{
  display:grid;
  gap:16px;
  max-height:none;
  overflow:visible;
  overflow-x:visible;
  padding-right:0;
  min-height:calc(100vh - 160px);
}

@media (max-width: 1180px){
  .client-request-detail-sheet{
    width:min(99vw, 1280px);
    min-width:0;
    min-height:calc(100vh - 12px);
  }

  .client-request-attachment-layout,
  .client-request-ocr-layout,
  .client-request-preview-workspace{
    grid-template-columns:1fr;
  }

  .client-request-preview-stage{
    min-height:520px;
    max-height:none;
  }

  .client-request-preview-frame{
    min-height:560px;
    max-height:none;
  }

  .client-request-preview-toolbar{
    flex-direction:column;
    align-items:stretch;
  }

  .client-request-preview-meta{
    grid-template-columns:1fr;
  }
}

.client-request-topnav{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 0 14px;
  margin-bottom:4px;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
  border-bottom:1px solid #e6eef7;
  align-items:center;
}

.client-request-topnav .header-btn{
  flex:0 1 auto;
  min-width:0;
  width:auto;
  max-width:100%;
  padding:10px 18px;
  white-space:nowrap;
}

.client-request-topnav .header-btn.primary{
  box-shadow:0 8px 18px rgba(29, 92, 163, 0.18);
}

.client-dynamic-documents{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

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

@media (max-width: 900px){
  .client-request-topnav{
    gap:8px;
  }

  .client-request-topnav .header-btn{
    flex:1 1 calc(50% - 8px);
    justify-content:center;
  }
}

.client-doc-template-title{
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:2px solid #1f2937;
  font-size:14px;
}

.client-ocr-grid{
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

#clientOcrExtractedData.client-ocr-grid{
  grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
  align-items:start;
}

.client-permission-grid{
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

.client-permission-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card-soft);
  font-size:13px;
  font-weight:700;
}

.client-upload-card,
.client-update-card,
.client-timeline-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card-soft);
  padding:12px;
}

.client-work-status-table th,
.client-work-status-table td{
  white-space:nowrap;
  vertical-align:top;
}

.client-work-status-table th:last-child,
.client-work-status-table td:last-child{
  min-width:240px;
  white-space:normal;
}

.client-payment-view{
  display:block;
}

.client-payment-action-cell{
  position:relative;
  min-width:120px;
}

.client-payment-action-menu{
  position:absolute;
  top:44px;
  right:0;
  min-width:180px;
  display:none;
  flex-direction:column;
  gap:4px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 36px rgba(14, 58, 104, 0.16);
  z-index:20;
}

.client-payment-action-menu.active{
  display:flex;
}

.client-payment-action-menu button{
  border:none;
  background:#f7fbff;
  color:var(--blue);
  text-align:left;
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
}

.client-payment-action-menu button.danger{
  background:#fff4f4;
  color:#b42318;
}

.client-payment-modal-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(8, 20, 39, 0.58);
  z-index:1200;
}

.client-payment-modal-card{
  width:min(920px, 96vw);
  max-height:90vh;
  overflow:auto;
  padding:22px;
  border-radius:24px;
  border:1px solid #d7e5f6;
  background:#fff;
  box-shadow:0 28px 56px rgba(8, 20, 39, 0.24);
}

.client-payment-receipt-card{
  width:min(1040px, 98vw);
}

.client-payment-receipt-body{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fdfefe;
  padding:18px;
}

.client-payment-receipt-sheet h2{
  margin:0 0 16px;
  color:var(--blue);
}

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

.client-payment-receipt-support,
.client-payment-receipt-notes{
  margin:14px 0;
  color:var(--text2);
}

.client-payment-receipt-table th:last-child,
.client-payment-receipt-table td:last-child{
  text-align:right;
}

.client-payment-record-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}

.link-button{
  border:none;
  background:transparent;
  color:var(--blue);
  font-size:12px;
  font-weight:700;
  padding:4px 0 0;
  cursor:pointer;
}

.client-payment-record-table td:last-child{
  min-width:220px;
}

.client-payment-record-footer{
  display:grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  gap:18px;
  align-items:start;
}

.client-payment-record-summary{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card-soft);
  padding:16px;
  display:grid;
  gap:10px;
}

.client-payment-record-summary div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:14px;
}

.client-payment-record-summary strong{
  color:var(--blue);
}

.client-payment-record-note textarea{
  resize:vertical;
}

@media (max-width: 980px){
  .client-payment-record-footer{
    grid-template-columns: 1fr;
  }
}

.client-update-card.pinned{
  border-color:#f59e0b;
  box-shadow:0 0 0 1px rgba(245, 158, 11, 0.2) inset;
}

.client-upload-title{
  font-size:14px;
  font-weight:800;
  color:var(--blue);
}

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

.client-upload-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.inline-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--blue);
  font-size:13px;
  font-weight:800;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.inline-action-btn.primary{
  background:linear-gradient(135deg, var(--blue2), var(--blue));
  border-color:var(--blue2);
  color:#fff;
  box-shadow:0 12px 24px rgba(13, 76, 145, 0.18);
}

.inline-action-btn:hover{
  transform:translateY(-1px);
  border-color:#b9cde7;
  box-shadow:0 10px 22px rgba(13, 76, 145, 0.12);
}

.inline-action-btn.primary:hover{
  border-color:var(--blue);
  box-shadow:0 14px 28px rgba(13, 76, 145, 0.24);
}

.inline-action-btn:active{
  transform:translateY(0);
}

.client-request-workspace{
  grid-template-columns:minmax(340px, 0.85fr) minmax(760px, 1.55fr);
  align-items:start;
}

.client-request-docs,
.client-request-ocr{
  min-height:100%;
}

.client-request-preview-host{
  overflow:hidden;
}

.client-request-preview-host .client-preview-placeholder{
  background:#fff;
}

.client-hidden-host{
  display:none !important;
}

.client-request-builder-top{
  grid-template-columns:minmax(220px, 0.7fr) minmax(220px, 0.7fr) minmax(0, 1.6fr);
  align-items:start;
}

.client-request-builder-kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.client-request-builder-host,
.client-request-member-stack,
.client-request-service-stack{
  display:grid;
  gap:16px;
}

.client-request-builder-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid #dbe6f2;
}

.client-request-builder-tabs .header-btn{
  min-width:180px;
}

.client-family-member-card,
.client-service-line-card{
  border:1px solid #dbe6f2;
}

.client-family-header-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.client-family-member-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.client-family-member-grid .form-field,
.client-family-header-grid .form-field{
  min-width:0;
}

.client-request-pricing-host .sticky-table tfoot th{
  background:#f5f9ff;
  color:var(--blue);
}

@media (max-width: 1180px){
  .client-request-builder-top{
    grid-template-columns:1fr;
  }

  .client-request-builder-kpis{
    grid-template-columns:1fr;
  }

  .client-family-header-grid,
  .client-family-member-grid{
    grid-template-columns:1fr;
  }
}

.client-upload-note{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}

.client-doc-existing-note{
  color:#0d4c91;
}

.client-doc-missing-note{
  color:#9a6b00;
}

.client-doc-expired-note{
  color:#c0392b;
  font-weight:700;
}

.client-vault-summary-card{
  margin-bottom:16px;
  padding:14px 16px;
  background:#f8fbff;
}

.client-vault-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
  margin-top:10px;
}

.client-vault-item{
  border:1px solid #dbe6f2;
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  display:grid;
  gap:4px;
}

.client-vault-item strong{
  color:var(--blue);
  font-size:13px;
}

.client-vault-item span,
.client-vault-item em{
  color:var(--muted);
  font-size:12px;
}

.client-vault-item-active{
  border-color:#b9d6f4;
}

.client-vault-item-expired{
  border-color:#efc1bb;
  background:#fff7f6;
}

.client-person-attachment-card{
  display:grid;
  gap:16px;
}

.client-request-flow-guide{
  margin:0 0 12px;
  padding:12px 14px;
  border:1px solid #dbe6f2;
  border-radius:16px;
  background:#f8fbff;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.client-request-flow-guide strong{
  color:var(--blue);
}

.client-quick-doc-card{
  margin-top:16px;
  padding:14px 16px;
  background:#f8fbff;
}

.client-quick-doc-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.client-quick-doc-item{
  border:1px solid #dbe6f2;
  border-radius:16px;
  padding:12px;
  background:#fff;
  display:grid;
  gap:8px;
}

.client-quick-doc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.client-quick-doc-head strong{
  color:var(--blue);
  font-size:13px;
}

.client-quick-doc-actions{
  display:flex;
  justify-content:flex-end;
}

.client-requirement-stack{
  display:grid;
  gap:12px;
  margin-top:12px;
}

.client-requirement-card{
  border:1px solid #dbe6f2;
  border-radius:16px;
  background:#fff;
  padding:12px 14px;
  display:grid;
  gap:10px;
}

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

.client-requirement-head strong{
  display:block;
  color:var(--blue);
  font-size:14px;
}

.client-requirement-head span,
.client-requirement-head em{
  color:var(--muted);
  font-size:12px;
  font-style:normal;
}

.client-requirement-doc-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}

.client-requirement-doc{
  border:1px solid #dbe6f2;
  border-radius:14px;
  padding:10px 12px;
  display:grid;
  gap:4px;
  background:#fbfdff;
}

.client-requirement-doc b{
  color:var(--blue);
  font-size:13px;
}

.client-requirement-doc span{
  color:var(--muted);
  font-size:12px;
}

.client-requirement-doc.available{
  border-color:#b9d6f4;
  background:#f5fbff;
}

.client-requirement-doc.missing{
  border-color:#f3d8a0;
  background:#fffaf0;
}

.client-requirement-doc.expired{
  border-color:#efc1bb;
  background:#fff6f5;
}

.client-service-doc-check{
  border:1px solid #dbe6f2;
  border-radius:16px;
  padding:14px;
  background:#fbfdff;
  display:grid;
  gap:12px;
}

.client-service-doc-check-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.client-service-doc-check-head strong{
  display:block;
  color:var(--blue);
  font-size:14px;
}

.client-service-doc-check-head span{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  margin-top:4px;
}

.client-service-doc-check-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.client-service-doc-check-actions{
  display:flex;
  justify-content:flex-end;
}

.client-requirement-doc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.client-copy-field{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  align-items:end;
  padding:10px 0;
  border-bottom:1px solid #e8eef7;
}

.client-ocr-review-card{
  padding:18px;
  border-radius:18px;
}

.client-unified-doc-card{
  padding:12px 12px 14px;
  background:#fff;
  min-width:0;
}

.client-doc-card-active{
  box-shadow:0 0 0 2px rgba(13, 76, 145, 0.18), 0 18px 36px rgba(13, 76, 145, 0.10);
}

.client-doc-template-preview{
  min-height:180px;
  border:2px solid #1f2937;
  background:#fff;
  display:grid;
  align-items:center;
  justify-items:center;
  overflow:hidden;
}

.client-doc-template-preview .client-preview-placeholder{
  width:100%;
  min-height:120px;
  border:none;
  background:#fff;
}

.client-doc-template-footer{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:8px;
  border-top:2px solid #1f2937;
}

.client-doc-template-ocr{
  display:grid;
  gap:8px;
  align-content:start;
  padding:10px 0 8px;
}

.client-doc-template-actions{
  border-left:none;
  border-top:2px solid #1f2937;
  padding:10px 0 0;
  display:grid;
  align-content:start;
  gap:8px;
}

.client-scan-feature-box{
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid rgba(13, 76, 145, 0.18);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(236, 244, 255, 0.95), rgba(247, 250, 255, 0.96));
  box-shadow:0 12px 28px rgba(13, 76, 145, 0.08);
}

.client-scan-feature-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.client-scan-feature-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#e8f2ff;
  color:var(--blue);
  border:1px solid #bdd7fb;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}

.client-doc-template-button-stack{
  display:grid;
  gap:8px;
}

.client-doc-template-field-list{
  display:grid;
  gap:8px;
}

.client-doc-template-field{
  padding:0;
}

.client-doc-template-input-row{
  display:grid;
  grid-template-columns:132px minmax(0, 1fr) auto;
  gap:10px;
  align-items:start;
}

.client-ocr-inline-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:var(--blue);
  min-width:0;
  font-size:13px;
}

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

.client-ocr-field-card{
  display:grid;
  gap:6px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
}

.client-ocr-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.client-copy-btn{
  min-width:62px;
  align-self:end;
}

.client-preview-image{
  width:100%;
  height:220px;
  max-height:220px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}

.client-preview-placeholder{
  border:1px dashed var(--line);
  border-radius:16px;
  padding:24px;
  background:var(--card-soft);
  display:grid;
  gap:8px;
}

.client-preview-file{
  font-size:18px;
  font-weight:800;
  color:var(--blue);
}

.client-preview-note{
  color:var(--muted);
  font-size:13px;
}

.client-service-line-card{
  padding:16px;
}

.client-service-line-card .sales-section-header{
  align-items:flex-start;
  gap:12px;
}

.client-service-line-card .sales-section-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}

.client-debug-note{
  word-break:break-word;
  overflow-wrap:anywhere;
  font-size:11px;
  line-height:1.45;
}

.client-doc-template-title,
.client-preview-file,
.client-upload-title{
  word-break:break-word;
  overflow-wrap:anywhere;
}

.client-service-line-card .client-preview-note{
  margin:0;
}

.client-doc-template-ocr .client-upload-note,
.client-doc-template-ocr .client-preview-note{
  line-height:1.45;
}

.client-doc-template-actions .form-control{
  min-height:40px;
}

.client-floating-panel{
  position:fixed;
  right:24px;
  bottom:24px;
  width:min(440px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  z-index:999;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:18px;
}

.client-floating-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.client-floating-header h4{
  margin:0;
  color:var(--blue);
}

.client-chat-thread{
  max-height:320px;
  overflow:auto;
}

.client-chat-bubble{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:var(--card-soft);
}

.client-chat-bubble.client{
  border-color:#cfe0f6;
}

.client-chat-bubble.support{
  background:var(--blue3);
}

.client-notification-unread{
  border-left:4px solid var(--blue2);
  padding-left:12px;
}

.client-mini-kpis{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.client-timeline-steps{
  display:grid;
  gap:10px;
}

.client-timeline-step{
  display:grid;
  grid-template-columns:18px minmax(0, 1fr);
  gap:10px;
  align-items:flex-start;
}

.client-timeline-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--blue2);
  margin-top:4px;
}

.client-timeline-content{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
  color:var(--muted);
  display:grid;
  gap:8px;
}

.client-timeline-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.client-timeline-title{
  color:var(--blue);
  font-size:17px;
  line-height:1.2;
}

.client-timeline-grid{
  display:grid;
  grid-template-columns:minmax(170px, 0.9fr) minmax(170px, 0.9fr) minmax(130px, 0.6fr) minmax(0, 1.6fr);
  gap:8px;
  align-items:stretch;
}

.client-timeline-cell{
  min-width:0;
  padding:8px 10px;
  border:1px solid #e6eef7;
  border-radius:12px;
  background:#fbfdff;
}

.client-timeline-cell span{
  display:block;
  margin-bottom:4px;
  color:#5d748f;
  font-size:11px;
  font-weight:700;
}

.client-timeline-cell strong{
  display:block;
  color:var(--blue);
  font-size:13px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.client-timeline-cell-wide{
  grid-column:auto;
}

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

  .client-timeline-cell-wide{
    grid-column:1 / -1;
  }
}

@media (max-width: 760px){
  .client-timeline-grid{
    grid-template-columns:1fr;
  }
}

.client-preview-frame{
  width:100%;
  min-height:170px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}

body.client-hold-zoom-open{
  user-select:none;
}

.client-hold-zoom-overlay{
  position:fixed;
  inset:0;
  background:rgba(7, 20, 39, 0.72);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:24px;
  backdrop-filter:blur(3px);
}

.client-hold-zoom-overlay.active{
  display:flex;
}

.client-hold-zoom-sheet{
  width:min(78vw, 920px);
  min-width:640px;
  max-height:86vh;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px;
  box-shadow:0 24px 80px rgba(7, 20, 39, 0.28);
  display:grid;
  gap:10px;
}

.client-hold-zoom-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.client-hold-zoom-title{
  font-size:14px;
  font-weight:800;
  color:var(--blue);
  padding-top:8px;
}

.client-doc-editor-tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin-bottom:10px;
  padding:4px 0 2px;
}

.client-document-editor-stage{
  position:relative;
  user-select:none;
  touch-action:none;
  padding:8px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg, #fdfefe, #f5f8fd);
}

.client-document-editor-image{
  cursor:crosshair;
}

.client-document-crop-box{
  position:absolute;
  display:none;
  border:2px dashed var(--blue2);
  background:rgba(13, 76, 145, 0.12);
  box-shadow:0 0 0 9999px rgba(13, 19, 33, 0.08);
  pointer-events:none;
}

.client-hold-zoom-image{
  width:100%;
  min-height:520px;
  max-height:calc(88vh - 64px);
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(13, 76, 145, 0.05);
}

.client-preview-frame-modal{
  width:100%;
  min-height:520px;
  max-height:calc(86vh - 76px);
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

@media (max-width: 900px){
  .client-hold-zoom-sheet{
    width:min(92vw, 760px);
    min-width:0;
  }

  .client-doc-editor-tools{
    justify-content:flex-start;
  }

  .client-hold-zoom-image{
    min-height:260px;
  }
}

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

  .client-unified-doc-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .client-ocr-field-grid{
    grid-template-columns:1fr;
  }

  .client-unified-doc-grid{
    grid-template-columns:1fr;
  }

  .client-quick-doc-grid{
    grid-template-columns:1fr;
  }
}

.client-report-card{
  cursor:pointer;
}

.client-report-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

@media (max-width: 1100px){
  .client-auth-grid{
    grid-template-columns:1fr;
  }

  .client-portal-shell{
    grid-template-columns:1fr;
  }

  .client-sidebar{
    position:relative;
    min-height:auto;
    border-right:none;
    border-bottom:1px solid var(--line);
  }

  .client-stat-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .client-mini-kpis{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .client-upload-head,
  .client-ocr-card-head{
    flex-direction:column;
    align-items:flex-start;
  }

  #clientOcrExtractedData.client-ocr-grid{
    grid-template-columns:1fr;
  }

  .client-unified-field-row{
    grid-template-columns:1fr;
  }

  .client-doc-template-input-row{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .client-topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .client-main{
    padding:16px;
  }

  .client-unified-doc-grid{
    grid-template-columns:1fr;
  }

  .client-auth-card{
    padding:18px;
  }

  .client-stat-grid{
    grid-template-columns:1fr;
  }

  .client-mini-kpis{
    grid-template-columns:1fr;
  }

  .client-floating-panel{
    right:12px;
    left:12px;
    width:auto;
    bottom:12px;
  }

  .client-copy-field{
    grid-template-columns:1fr;
  }
}

/* =========================
   SALES PORTAL MODERN LAYOUT
========================= */
body.sales-portal-body{
  background:#f8fafc;
  color:#0d1b35;
}

.sales-portal-body .admin-shell{
  max-width:none;
  min-height:100vh;
  margin:0;
  padding:0;
}

.sales-portal-body .portal-panel.module-page-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  grid-template-rows:74px minmax(0, 1fr);
  grid-template-areas:
    "nav header"
    "nav content";
  gap:0;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#f8fafc;
  overflow:visible;
}

.sales-portal-body .sales-header{
  grid-area:header;
  position:sticky;
  top:0;
  z-index:20;
  min-width:0;
  min-height:74px;
  margin:0;
  padding:14px 28px;
  border:0;
  border-bottom:1px solid #e4ebf5;
  border-radius:0;
  background:rgba(255,255,255,.96);
  box-shadow:none;
  backdrop-filter:blur(10px);
}

.sales-portal-body .sales-header-left{
  min-width:0;
}

.sales-portal-body .sales-icon{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:10px;
  background:linear-gradient(135deg, #0b65f0, #0538d8);
  font-size:22px;
}

.sales-portal-body .sales-header .section-title{
  color:#0d1b35;
  font-size:20px;
  line-height:1.15;
}

.sales-portal-body .sales-header .section-subtitle{
  color:#52627a;
  font-size:12px;
  line-height:1.25;
}

.sales-portal-body .sales-header-actions{
  gap:10px;
}

.sales-portal-body .header-btn,
.sales-portal-body .filter-btn{
  min-height:38px;
  height:auto;
  border-radius:8px;
  border-color:#dbe4ef;
  background:#fff;
  color:#0d2a55;
  box-shadow:0 6px 16px rgba(15, 23, 42, .06);
  font-size:13px;
}

.sales-portal-body .header-btn.primary,
.sales-portal-body .filter-btn.btn-primary{
  background:#0958e8;
  color:#fff;
  border-color:#0958e8;
  box-shadow:0 10px 18px rgba(9, 88, 232, .18);
}

.sales-portal-body #salesInvoiceSaveBtn,
.sales-portal-body #salesOrderConfirmBtn{
  background:#22b84a;
  border-color:#22b84a;
  color:#fff;
  box-shadow:0 10px 18px rgba(34, 184, 74, .18);
}

.sales-portal-body .sales-side-nav{
  grid-area:nav;
  position:sticky;
  top:0;
  z-index:30;
  width:260px;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:18px;
  padding:22px 14px;
  border-right:1px solid #e4ebf5;
  background:#fff;
  box-shadow:none;
  overflow:auto;
}

.sales-sidebar-brand{
  display:grid;
  grid-template-columns:52px minmax(0, 1fr);
  gap:12px;
  align-items:center;
  padding:0 8px 18px;
  border-bottom:1px solid #eef2f7;
}

.sales-sidebar-logo{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, #1d75ff, #0638d7);
  color:#fff;
  font-size:27px;
  font-weight:900;
}

.sales-sidebar-brand strong{
  display:block;
  color:#0d1b35;
  font-size:17px;
  font-weight:900;
}

.sales-sidebar-brand span{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:3px;
  color:#52627a;
  font-size:12px;
  font-weight:700;
}

.sales-sidebar-brand i{
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:999px;
  background:#24c55e;
}

.sales-sidebar-menu{
  display:grid;
  gap:6px;
}

.sales-portal-body .sales-side-nav .module-inner-link{
  min-width:0;
  width:100%;
  height:46px;
  justify-content:flex-start;
  padding:0 16px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#142746;
  box-shadow:none;
  font-weight:800;
  text-align:left;
}

.sales-portal-body .sales-side-nav .module-inner-link:hover{
  background:#f2f6ff;
  color:#0958e8;
}

.sales-portal-body .sales-side-nav .module-inner-link.active{
  background:#eef4ff;
  color:#0958e8;
  box-shadow:inset 3px 0 0 #0958e8;
}

.sales-sidebar-help{
  display:grid;
  gap:8px;
  margin-top:auto;
  padding:16px;
  border:1px solid #dbe4ef;
  border-radius:8px;
  background:#fbfdff;
}

.sales-sidebar-help strong{
  color:#0d1b35;
  font-size:14px;
}

.sales-sidebar-help span{
  color:#64748b;
  font-size:12px;
  line-height:1.45;
}

.sales-sidebar-help .header-btn{
  width:100%;
  min-width:0;
}

.sales-portal-body .sales-section{
  grid-area:content;
  min-width:0;
  padding:22px 28px 28px;
}

.sales-portal-body .module-card,
.sales-portal-body .table-wrapper,
.sales-portal-body .form-card{
  border-radius:8px;
  border-color:#dfe7f1;
  box-shadow:0 8px 22px rgba(15, 23, 42, .045);
}

.sales-portal-body .sales-section > .module-card{
  padding:18px;
}

.sales-portal-body .kpi-grid{
  gap:16px;
}

.sales-portal-body #sales-dashboard .kpi-card,
.sales-list-kpi-card{
  min-height:112px;
  border-radius:8px;
  background:#fff;
}

.sales-portal-body #sales-dashboard .kpi-card{
  position:relative;
  padding:18px 18px 16px 76px;
}

.sales-portal-body #sales-dashboard .kpi-card::before{
  content:"";
  position:absolute;
  left:18px;
  top:22px;
  width:42px;
  height:42px;
  border-radius:10px;
  background:#edf4ff;
}

.sales-portal-body #sales-dashboard .kpi-card:nth-child(2)::before{ background:#eafbf1; }
.sales-portal-body #sales-dashboard .kpi-card:nth-child(3)::before{ background:#fff5df; }
.sales-portal-body #sales-dashboard .kpi-card:nth-child(4)::before{ background:#ffecee; }

.sales-portal-body .kpi-title{
  color:#334155;
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
}

.sales-portal-body .kpi-value{
  color:#0d1b35;
}

.sales-list-shell{
  display:grid;
  gap:16px;
}

.sales-list-header{
  margin:0;
  padding:0;
  border:0;
}

.sales-list-kpi-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.sales-list-kpi-card{
  position:relative;
  display:grid;
  gap:4px;
  padding:18px 18px 16px 76px;
  border:1px solid #dfe7f1;
  box-shadow:0 8px 22px rgba(15, 23, 42, .045);
}

.sales-list-kpi-card::before{
  content:"";
  position:absolute;
  left:18px;
  top:22px;
  width:42px;
  height:42px;
  border-radius:10px;
}

.sales-list-kpi-card.is-blue::before{ background:#e8f0ff; }
.sales-list-kpi-card.is-green::before{ background:#e7f8ef; }
.sales-list-kpi-card.is-amber::before{ background:#fff4df; }
.sales-list-kpi-card.is-red::before{ background:#ffecef; }

.sales-list-kpi-card span{
  color:#334155;
  font-size:13px;
  font-weight:700;
}

.sales-list-kpi-card strong{
  color:#0d1b35;
  font-size:23px;
  line-height:1.15;
}

.sales-list-kpi-card small{
  color:#0958e8;
  font-size:13px;
  font-weight:800;
}

.sales-list-kpi-card.is-green small{ color:#16a34a; }
.sales-list-kpi-card.is-amber small{ color:#e46f00; }
.sales-list-kpi-card.is-red small{ color:#d7192a; }

.sales-list-filter-panel{
  grid-template-columns:minmax(260px, 1.55fr) repeat(4, minmax(145px, 1fr)) auto;
  align-items:end;
  padding:16px;
  border-radius:8px;
  background:#fff;
}

.sales-list-filter-panel .form-field label{
  color:#334155;
}

.sales-list-filter-panel input{
  min-height:40px;
  border-radius:8px;
}

.sales-list-table-wrap{
  border-radius:8px;
  background:#fff;
}

.sales-list-table{
  min-width:1060px;
}

.sales-list-table th{
  height:48px;
  background:#f8fafc;
  color:#1e2f4d;
  font-size:13px;
  text-transform:none;
  letter-spacing:0;
}

.sales-list-table td{
  height:58px;
  color:#17233c;
  font-size:13px;
}

.sales-row-check{
  width:20px;
  height:20px;
  accent-color:#0958e8;
}

.sales-doc-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  color:#0958e8;
  font-weight:900;
  cursor:pointer;
}

.sales-doc-mini{
  width:20px;
  height:20px;
  display:inline-grid;
  place-items:center;
  border-radius:5px;
  background:#eef4ff;
  color:#0958e8;
  font-size:11px;
  font-weight:900;
}

.sales-customer-cell{
  display:grid;
  gap:2px;
}

.sales-customer-cell strong{
  color:#17233c;
  font-size:13px;
}

.sales-customer-cell span{
  color:#64748b;
  font-size:12px;
}

.sales-mode-pill,
.sales-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:5px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.sales-mode-pill.mode-cash{ background:#ecfdf5; color:#15803d; }
.sales-mode-pill.mode-card{ background:#ecfeff; color:#0f766e; }
.sales-mode-pill.mode-bank{ background:#eef4ff; color:#0958e8; }
.sales-mode-pill.mode-neutral{ background:#f1f5f9; color:#475569; }

.sales-status-badge.is-success{ background:#dcfce7; color:#15803d; }
.sales-status-badge.is-warning{ background:#ffedd5; color:#c2410c; }
.sales-status-badge.is-danger{ background:#ffe4e6; color:#dc2626; }
.sales-status-badge.is-muted{ background:#e5e7eb; color:#4b5563; }
.sales-status-badge.is-neutral{ background:#eef2ff; color:#334155; }

.sales-table-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.sales-row-action{
  min-height:30px;
  padding:6px 10px;
  border:0;
  border-radius:999px;
  background:#eef4ff;
  color:#0958e8;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.sales-row-action.is-primary{
  background:#0958e8;
  color:#fff;
}

.sales-row-action.is-print{
  background:#eef4ff;
  color:#0958e8;
}

.sales-row-action.is-pdf{
  background:#ffecef;
  color:#dc2626;
}

.sales-document-card{
  display:grid;
  gap:14px;
  background:#fff;
}

.sales-document-card > .sales-section-header{
  margin:0;
  padding:0 0 14px;
  border-bottom:1px solid #e7edf5;
}

.sales-document-card .sales-section-title h4{
  color:#0d1b35;
  font-size:22px;
}

.sales-document-card .receipt-common-tools{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.sales-document-card .receipt-common-tools .sales-section-actions{
  gap:10px;
}

.sales-document-form-grid{
  gap:14px;
}

.sales-document-form-grid > .sales-source-panel{
  order:1;
  grid-column:span 2;
}

.sales-document-form-grid > .sales-customer-detail-panel{
  order:2;
  grid-column:span 2;
}

.sales-document-form-grid > .form-field{
  order:3;
}

.sales-source-card{
  border-radius:8px;
  background:#f8fbff;
}

.sales-portal-body .sales-order-customer-block{
  padding:16px;
  border-radius:8px;
  background:#fbfdff;
}

.sales-portal-body .sales-order-customer-grid{
  gap:12px;
}

.sales-portal-body .sales-order-search-controls{
  gap:10px;
}

.sales-portal-body .sales-order-search-controls input,
.sales-portal-body .sales-order-search-controls button,
.sales-portal-body .form-field input,
.sales-portal-body .form-field select,
.sales-portal-body .form-field textarea,
.sales-portal-body .filter-input{
  min-height:40px;
  border-radius:8px;
  border-color:#d8e2ee;
  box-shadow:none;
  font-size:13px;
}

.sales-portal-body .form-field label,
.sales-portal-body .sales-order-search-row label{
  color:#334155;
  font-size:12px;
  font-weight:800;
}

.sales-portal-body .sales-order-search-controls button{
  min-width:124px;
  background:#0b4c91;
  color:#fff;
  border-color:#0b4c91;
}

.sales-collection-card{
  background:#fff;
}

.sales-collection-card .module-form-grid{
  grid-template-columns:repeat(6, minmax(0, 1fr));
}

.sales-summary-ribbon{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  align-items:center;
  padding:12px 0 0;
  border-top:1px solid #edf2f7;
}

.sales-summary-ribbon .kpi-card{
  min-height:68px;
  padding:10px 16px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  border-right:1px solid #dfe7f1;
}

.sales-summary-ribbon .kpi-card:last-child{
  border-right:0;
}

.sales-balance-ribbon{
  grid-template-columns:minmax(180px, 1fr);
  justify-content:end;
}

.sales-balance-ribbon .kpi-card{
  justify-self:end;
  min-width:180px;
  border:0;
  border-radius:8px;
  background:#ecfdf5;
}

.sales-line-table-wrap table{
  min-width:1260px;
}

.sales-line-table-wrap th{
  background:#f8fafc;
  color:#0d1b35;
  font-size:12px;
}

.sales-line-table-wrap td{
  padding:8px 10px;
}

.sales-line-table-wrap .filter-input{
  min-height:36px;
  padding:7px 10px;
}

.sales-line-table-wrap .filter-btn{
  min-width:0;
  min-height:34px;
  padding:7px 10px;
  border-color:#fecaca;
  background:#fff5f5;
  color:#dc2626;
}

.sales-more-details-panel{
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 22px rgba(15, 23, 42, .045);
  overflow:hidden;
}

.sales-more-details-panel summary{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  color:#0958e8;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  list-style:none;
}

.sales-more-details-panel summary::-webkit-details-marker{
  display:none;
}

.sales-more-details-panel summary::after{
  content:"+";
  width:24px;
  height:24px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:#eef4ff;
  color:#0958e8;
}

.sales-more-details-panel[open] summary::after{
  content:"-";
}

.sales-more-details-panel summary span{
  margin-right:auto;
  color:#52627a;
  font-size:13px;
  font-weight:700;
}

.sales-more-details-grid{
  padding:0 16px 16px;
  border-top:1px solid #edf2f7;
}

.sales-document-focus{
  background:#f7f9fc;
}

.sales-document-focus .portal-panel.module-page-shell{
  display:block;
  min-height:100vh;
  padding:0;
  background:#f7f9fc;
}

.sales-document-focus .sales-header,
.sales-document-focus .sales-side-nav{
  display:none;
}

.sales-document-focus .sales-section{
  padding:18px;
}

.sales-document-focus .sales-section > .sales-document-card{
  max-width:1660px;
  margin:0 auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  gap:14px;
}

.sales-document-focus .sales-document-card > .sales-section-header{
  min-height:76px;
  margin:0;
  padding:4px 0 14px;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
}

.sales-document-focus .sales-document-card > .sales-section-header .sales-section-title{
  position:relative;
  min-height:64px;
  padding-left:84px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.sales-document-focus .sales-document-card > .sales-section-header .sales-section-title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:58px;
  height:58px;
  border-radius:12px;
  background:linear-gradient(135deg, #0b78f0, #0852d8);
  transform:translateY(-50%);
  box-shadow:0 10px 20px rgba(9, 88, 232, .18);
}

.sales-document-focus .sales-document-card > .sales-section-header .sales-section-title::after{
  content:"";
  position:absolute;
  left:19px;
  top:50%;
  width:20px;
  height:26px;
  border:3px solid #fff;
  border-radius:3px;
  transform:translateY(-50%);
}

.sales-document-focus .sales-document-card > .sales-section-header h4{
  color:#0b1b33;
  font-size:28px;
  line-height:1.05;
  margin:0 0 8px;
}

.sales-document-focus .sales-document-card > .sales-section-header p{
  color:#0d2a55;
  font-size:15px;
  font-weight:800;
}

.sales-document-focus .sales-section-actions{
  gap:12px;
}

.sales-document-focus .sales-section-actions .filter-btn{
  min-width:110px;
  min-height:48px;
  padding:10px 18px;
  border-radius:8px;
  background:#fff;
  color:#0d2a55;
  box-shadow:0 8px 18px rgba(15, 23, 42, .08);
}

.sales-document-focus .sales-section-actions .btn-primary,
.sales-document-focus #salesInvoiceSaveBtn,
.sales-document-focus #salesOrderConfirmBtn{
  background:#23b447;
  border-color:#23b447;
  color:#fff;
  box-shadow:0 12px 22px rgba(35, 180, 71, .22);
}

.sales-document-focus .receipt-common-tools{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.sales-doc-empty-tools{
  display:none !important;
}

.sales-document-focus .receipt-common-tools .sales-section-actions{
  justify-content:flex-end !important;
}

.sales-document-focus .receipt-common-tools .customer-status-text{
  display:none;
}

.sales-document-focus .sales-doc-source-panel{
  display:none !important;
}

.sales-doc-top-grid{
  display:grid;
  grid-template-columns:minmax(360px, .9fr) minmax(460px, 1.1fr);
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15, 23, 42, .05);
  overflow:hidden;
}

.sales-doc-panel{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 18px;
  align-content:start;
  padding:20px 22px;
}

.sales-doc-customer-panel{
  grid-template-columns:1fr;
  border-right:1px solid #e8eef6;
}

.sales-doc-panel-heading{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:10px;
  color:#0b4c91;
  font-size:18px;
  font-weight:900;
}

.sales-doc-panel-heading::before{
  content:"";
  width:20px;
  height:20px;
  border-radius:999px;
  background:#0b65d8;
}

.sales-doc-panel .sales-order-customer-block{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.sales-doc-panel .customer-search-title{
  display:none;
}

.sales-doc-panel .sales-order-customer-grid{
  grid-template-columns:1fr;
}

.sales-doc-panel .sales-order-search-controls{
  grid-template-columns:minmax(0, 1fr) auto;
}

.sales-document-focus .sales-order-search-controls button{
  min-width:110px;
  min-height:42px;
  border-radius:8px;
  background:#0b4c91;
  color:#fff;
}

.sales-document-focus .sales-doc-panel .form-field input,
.sales-document-focus .sales-doc-panel .form-field select,
.sales-document-focus .sales-doc-panel .form-field textarea,
.sales-document-focus .sales-order-search-controls input{
  min-height:42px;
  border-radius:8px;
  background:#fff;
}

.sales-document-focus .sales-doc-panel textarea{
  min-height:76px;
}

.sales-document-focus .sales-items-card{
  position:relative;
  padding:58px 18px 18px;
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15, 23, 42, .05);
}

.sales-document-focus .sales-items-card::before{
  content:attr(data-title);
  position:absolute;
  left:22px;
  top:18px;
  color:#0b4c91;
  font-size:18px;
  font-weight:900;
}

.sales-document-focus .sales-items-card th{
  background:#f8fafc;
  color:#0b1b33;
}

.sales-document-focus .sales-summary-ribbon{
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15, 23, 42, .05);
  padding:16px 22px;
}

.sales-document-focus .sales-summary-ribbon .kpi-card{
  min-height:62px;
}

.sales-document-focus .sales-summary-ribbon .kpi-value{
  color:#071932;
  font-size:22px;
}

.sales-document-focus .sales-balance-ribbon .kpi-card{
  background:#ecfdf5;
  padding:16px 24px;
}

.sales-document-focus .sales-collection-card{
  padding:18px 20px;
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15, 23, 42, .05);
}

.sales-document-focus .sales-collection-card .module-form-grid{
  grid-template-columns:repeat(5, minmax(0, 1fr));
}

:root[data-theme-mode="dark"] body.sales-portal-body,
:root[data-theme-mode="dark"] .sales-portal-body .portal-panel.module-page-shell{
  background:#0b1320;
}

:root[data-theme-mode="dark"] .sales-portal-body .sales-header,
:root[data-theme-mode="dark"] .sales-portal-body .sales-side-nav,
:root[data-theme-mode="dark"] .sales-list-kpi-card,
:root[data-theme-mode="dark"] .sales-list-filter-panel,
:root[data-theme-mode="dark"] .sales-document-card,
:root[data-theme-mode="dark"] .sales-more-details-panel{
  background:var(--card);
  border-color:var(--line);
}

:root[data-theme-mode="dark"] .sales-sidebar-brand strong,
:root[data-theme-mode="dark"] .sales-portal-body .sales-header .section-title,
:root[data-theme-mode="dark"] .sales-document-card .sales-section-title h4,
:root[data-theme-mode="dark"] .sales-customer-cell strong,
:root[data-theme-mode="dark"] .sales-list-kpi-card strong{
  color:var(--text);
}

@media (max-width: 1180px){
  .sales-portal-body .portal-panel.module-page-shell{
    grid-template-columns:1fr;
    grid-template-rows:auto auto minmax(0, 1fr);
    grid-template-areas:
      "header"
      "nav"
      "content";
  }

  .sales-portal-body .sales-side-nav{
    position:relative;
    width:100%;
    height:auto;
    padding:14px;
    border-right:0;
    border-bottom:1px solid #e4ebf5;
  }

  .sales-sidebar-brand{
    padding-bottom:12px;
  }

  .sales-sidebar-menu{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .sales-sidebar-help{
    display:none;
  }

  .sales-list-kpi-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .sales-list-filter-panel{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .sales-customer-search-action{
    align-items:stretch;
  }

  .sales-customer-search-action .filter-btn{
    width:100%;
  }
}

@media (max-width: 820px){
  .sales-portal-body .sales-header{
    position:relative;
    flex-direction:column;
    align-items:flex-start;
    padding:16px;
  }

  .sales-portal-body .sales-header-actions{
    width:100%;
    justify-content:flex-start;
  }

  .sales-portal-body .sales-header-actions .header-btn{
    flex:1 1 150px;
    min-width:0;
  }

  .sales-portal-body .sales-section{
    padding:16px;
  }

  .sales-sidebar-menu,
  .sales-list-kpi-row,
  .sales-list-filter-panel,
  .sales-document-form-grid,
  .sales-collection-card .module-form-grid,
  .sales-summary-ribbon{
    grid-template-columns:1fr;
  }

  .sales-document-form-grid > .sales-source-panel,
  .sales-document-form-grid > .sales-customer-detail-panel{
    grid-column:auto;
  }

  .sales-summary-ribbon .kpi-card{
    border-right:0;
    border-bottom:1px solid #dfe7f1;
  }

  .sales-summary-ribbon .kpi-card:last-child{
    border-bottom:0;
  }
}

/* =========================
   ERP COLOR ICON SYSTEM
========================= */
:root{
  --erp-blue:#0b65f0;
  --erp-indigo:#4f46e5;
  --erp-cyan:#0891b2;
  --erp-green:#16a34a;
  --erp-teal:#0f766e;
  --erp-orange:#f97316;
  --erp-amber:#f59e0b;
  --erp-violet:#8b5cf6;
  --erp-rose:#ef4444;
  --erp-slate:#475569;
}

.main-dashboard-body .main-command-link,
.sales-portal-body .sales-side-nav .module-inner-link,
.purchase-portal-body .sales-side-nav .module-inner-link{
  position:relative;
}

.sales-portal-body .sales-side-nav .module-inner-link{
  gap:12px;
  padding-left:12px;
}

.sales-portal-body .sales-side-nav .module-inner-link::before{
  content:attr(data-nav-icon);
  width:28px;
  height:28px;
  min-width:28px;
  display:inline-grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:var(--erp-blue);
  font-size:10px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 16px rgba(15, 23, 42, .10);
}

.sales-portal-body .sales-side-nav .module-inner-link[data-accent="blue"]::before{ background:linear-gradient(135deg, #1684ff, #0757df); }
.sales-portal-body .sales-side-nav .module-inner-link[data-accent="indigo"]::before{ background:linear-gradient(135deg, #6366f1, #3730a3); }
.sales-portal-body .sales-side-nav .module-inner-link[data-accent="cyan"]::before{ background:linear-gradient(135deg, #06b6d4, #0e7490); }
.sales-portal-body .sales-side-nav .module-inner-link[data-accent="green"]::before{ background:linear-gradient(135deg, #22c55e, #15803d); }
.sales-portal-body .sales-side-nav .module-inner-link[data-accent="teal"]::before{ background:linear-gradient(135deg, #14b8a6, #0f766e); }
.sales-portal-body .sales-side-nav .module-inner-link[data-accent="orange"]::before{ background:linear-gradient(135deg, #fb923c, #ea580c); }
.sales-portal-body .sales-side-nav .module-inner-link[data-accent="amber"]::before{ background:linear-gradient(135deg, #fbbf24, #d97706); }
.sales-portal-body .sales-side-nav .module-inner-link[data-accent="violet"]::before{ background:linear-gradient(135deg, #a855f7, #7c3aed); }
.sales-portal-body .sales-side-nav .module-inner-link[data-accent="rose"]::before{ background:linear-gradient(135deg, #fb7185, #e11d48); }
.sales-portal-body .sales-side-nav .module-inner-link[data-accent="slate"]::before{ background:linear-gradient(135deg, #64748b, #334155); }

.sales-portal-body .sales-side-nav .module-inner-link.active{
  box-shadow:inset 4px 0 0 currentColor, 0 8px 18px rgba(9, 88, 232, .08);
}

.purchase-portal-body .sales-icon,
.purchase-portal-body .purchase-sidebar-logo{
  background:linear-gradient(135deg, #fb923c, #ea580c);
}

.purchase-portal-body .purchase-section{
  grid-area:content;
  min-width:0;
  padding:22px 28px 28px;
}

.purchase-portal-body .purchase-section > .module-card{
  padding:18px;
}

.purchase-portal-body .sales-header .section-title{
  color:#11325c;
}

.purchase-portal-body .header-btn.primary,
.purchase-portal-body .filter-btn.btn-primary{
  background:#f97316;
  border-color:#f97316;
  color:#fff;
  box-shadow:0 10px 18px rgba(249, 115, 22, .18);
}

.main-dashboard-body .main-command-link{
  min-height:38px;
  gap:8px;
  padding:0 12px 0 8px;
  justify-content:flex-start;
}

.main-dashboard-body .main-command-link::before{
  content:"";
  width:24px;
  height:24px;
  min-width:24px;
  display:inline-grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg, #1684ff, #0757df);
  font-size:9px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 16px rgba(0, 0, 0, .14);
}

.main-dashboard-body .main-command-link[data-menu-code="DASHBOARD"]::before{ content:"HM"; background:linear-gradient(135deg, #1684ff, #0757df); }
.main-dashboard-body .main-command-link[data-menu-code="ITEMS"]::before{ content:"IT"; background:linear-gradient(135deg, #14b8a6, #0f766e); }
.main-dashboard-body .main-command-link[data-menu-code="DAILY_ACTIVITY"]::before{ content:"DA"; background:linear-gradient(135deg, #f59e0b, #d97706); }
.main-dashboard-body .main-command-link[data-menu-code="SALES"]::before{ content:"SL"; background:linear-gradient(135deg, #06b6d4, #0e7490); }
.main-dashboard-body .main-command-link[data-menu-code="PURCHASE"]::before{ content:"PR"; background:linear-gradient(135deg, #fb923c, #ea580c); }
.main-dashboard-body .main-command-link[data-menu-code="SMART_SERVICES"]::before,
.main-dashboard-body .main-command-link[data-menu-code="SMART_SERVICE"]::before{ content:"SS"; background:linear-gradient(135deg, #a855f7, #7c3aed); }
.main-dashboard-body .main-command-link[data-menu-code="OFFICIALS"]::before{ content:"OF"; background:linear-gradient(135deg, #64748b, #334155); }
.main-dashboard-body .main-command-link[data-menu-code="GALLERY"]::before{ content:"GL"; background:linear-gradient(135deg, #ec4899, #be185d); }
.main-dashboard-body .main-command-link[data-menu-code="COMPANY_MANAGEMENT"]::before{ content:"CM"; background:linear-gradient(135deg, #6366f1, #3730a3); }
.main-dashboard-body .main-command-link[data-menu-code="HRMS"]::before{ content:"HR"; background:linear-gradient(135deg, #22c55e, #15803d); }
.main-dashboard-body .main-command-link[data-menu-code="ACCOUNTS"]::before{ content:"AC"; background:linear-gradient(135deg, #0ea5e9, #0369a1); }
.main-dashboard-body .main-command-link[data-menu-code="REPORTS"]::before{ content:"RP"; background:linear-gradient(135deg, #f43f5e, #be123c); }
.main-dashboard-body .main-command-link[data-menu-code="SETTINGS"]::before{ content:"ST"; background:linear-gradient(135deg, #475569, #1e293b); }

.main-dashboard-body .main-command-link:not([data-menu-code])::before{
  content:"FV";
  background:linear-gradient(135deg, #eab308, #a16207);
}

.main-dashboard-body .main-command-link.active{
  background:linear-gradient(135deg, #0f5dcc 0%, #0637ba 100%);
}

.main-dashboard-body .main-module-actions .filter-btn{
  position:relative;
  min-height:42px;
  padding-left:44px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.main-dashboard-body .main-module-actions .filter-btn::before{
  content:"";
  position:absolute;
  left:10px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:#0b65f0;
  font-size:9px;
  font-weight:900;
}

.main-dashboard-body .main-module-actions .filter-btn[data-menu-code="SALES"]::before{ content:"SL"; background:#0891b2; }
.main-dashboard-body .main-module-actions .filter-btn[data-menu-code="PURCHASE"]::before{ content:"PR"; background:#f97316; }
.main-dashboard-body .main-module-actions .filter-btn[data-menu-code="SMART_SERVICES"]::before{ content:"SS"; background:#8b5cf6; }
.main-dashboard-body .main-module-actions .filter-btn[data-menu-code="ITEMS"]::before{ content:"IT"; background:#0f766e; }
.main-dashboard-body .main-module-actions .filter-btn[data-menu-code="DAILY_ACTIVITY"]::before{ content:"DA"; background:#f59e0b; }
.main-dashboard-body .main-module-actions .filter-btn[data-menu-code="HRMS"]::before{ content:"HR"; background:#16a34a; }
.main-dashboard-body .main-module-actions .filter-btn[data-menu-code="ACCOUNTS"]::before{ content:"AC"; background:#0ea5e9; }

.sales-portal-body .kpi-grid > .kpi-card,
.purchase-portal-body .kpi-grid > .kpi-card,
.main-dashboard-body .kpi-grid > .kpi-card{
  position:relative;
  overflow:hidden;
}

.sales-portal-body .kpi-grid > .kpi-card::after,
.purchase-portal-body .kpi-grid > .kpi-card::after,
.main-dashboard-body .kpi-grid > .kpi-card::after{
  content:"";
  position:absolute;
  right:14px;
  top:14px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#0b65f0;
  box-shadow:0 0 0 6px rgba(11, 101, 240, .09);
}

.sales-portal-body .kpi-grid > .kpi-card:nth-child(2n)::after,
.purchase-portal-body .kpi-grid > .kpi-card:nth-child(2n)::after,
.main-dashboard-body .kpi-grid > .kpi-card:nth-child(2n)::after{ background:#16a34a; box-shadow:0 0 0 6px rgba(22, 163, 74, .10); }

.sales-portal-body .kpi-grid > .kpi-card:nth-child(3n)::after,
.purchase-portal-body .kpi-grid > .kpi-card:nth-child(3n)::after,
.main-dashboard-body .kpi-grid > .kpi-card:nth-child(3n)::after{ background:#f97316; box-shadow:0 0 0 6px rgba(249, 115, 22, .10); }

.sales-portal-body .kpi-grid > .kpi-card:nth-child(4n)::after,
.purchase-portal-body .kpi-grid > .kpi-card:nth-child(4n)::after,
.main-dashboard-body .kpi-grid > .kpi-card:nth-child(4n)::after{ background:#8b5cf6; box-shadow:0 0 0 6px rgba(139, 92, 246, .10); }

.sales-document-focus .sales-summary-ribbon .kpi-card,
.purchase-document-focus .sales-summary-ribbon .kpi-card{
  position:relative;
  padding-left:44px;
}

.sales-document-focus .sales-summary-ribbon .kpi-card::before,
.purchase-document-focus .sales-summary-ribbon .kpi-card::before{
  content:"T";
  position:absolute;
  left:12px;
  top:50%;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  transform:translateY(-50%);
  background:#0b65f0;
  color:#fff;
  font-size:10px;
  font-weight:900;
}

.sales-document-focus .sales-summary-ribbon .kpi-card:nth-child(1)::before,
.purchase-document-focus .sales-summary-ribbon .kpi-card:nth-child(1)::before{ content:"S"; background:#0b65f0; }
.sales-document-focus .sales-summary-ribbon .kpi-card:nth-child(2)::before,
.purchase-document-focus .sales-summary-ribbon .kpi-card:nth-child(2)::before{ content:"V"; background:#8b5cf6; }
.sales-document-focus .sales-summary-ribbon .kpi-card:nth-child(3)::before,
.purchase-document-focus .sales-summary-ribbon .kpi-card:nth-child(3)::before{ content:"N"; background:#0891b2; }
.sales-document-focus .sales-summary-ribbon .kpi-card:nth-child(4)::before,
.purchase-document-focus .sales-summary-ribbon .kpi-card:nth-child(4)::before{ content:"P"; background:#f97316; }
.sales-document-focus .sales-summary-ribbon .kpi-card:nth-child(5)::before,
.purchase-document-focus .sales-summary-ribbon .kpi-card:nth-child(5)::before{ content:"B"; background:#16a34a; }

.sales-table-actions .sales-row-action,
.sales-row-action{
  position:relative;
}

.sales-row-action::before{
  content:"";
  width:10px;
  height:10px;
  margin-right:6px;
  border-radius:999px;
  background:currentColor;
  display:inline-block;
}

@media (max-width: 1180px){
  .purchase-portal-body .purchase-section{
    padding:16px;
  }
}

@media (max-width: 820px){
  .main-dashboard-body .main-command-link{
    flex:1 1 130px;
  }

  .purchase-portal-body .purchase-section{
    padding:12px;
  }
}

/* =========================
   COMPACT SALES / PURCHASE DOCUMENT ENTRY
========================= */
.sales-document-focus,
.purchase-document-focus{
  background:#f6f8fb;
}

.purchase-document-focus > header.text-center,
.sales-document-focus > header.text-center,
.purchase-document-focus .portal-panel.module-page-shell > .sales-header,
.purchase-document-focus .portal-panel.module-page-shell > .module-inner-nav,
.sales-document-focus .sales-header,
.sales-document-focus .sales-side-nav{
  display:none !important;
}

.purchase-document-focus .admin-shell,
.sales-document-focus .admin-shell{
  max-width:none;
  min-height:100vh;
  margin:0;
  padding:0;
}

.purchase-document-focus .portal-panel.module-page-shell,
.sales-document-focus .portal-panel.module-page-shell{
  display:block;
  min-height:100vh;
  padding:0;
  border:0;
  border-radius:0;
  background:#f6f8fb;
  box-shadow:none;
}

.purchase-document-focus .purchase-section,
.sales-document-focus .sales-section{
  padding:10px 14px 14px;
}

.purchase-document-focus .purchase-section > .purchase-document-outer-card,
.sales-document-focus .sales-section > .sales-document-card{
  max-width:1680px;
  margin:0 auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.purchase-document-focus .purchase-document-card,
.sales-document-focus .sales-document-card{
  display:grid !important;
  gap:8px;
  background:transparent;
}

.purchase-document-focus .purchase-document-card > .sales-section-header,
.sales-document-focus .sales-document-card > .sales-section-header{
  min-height:58px;
  margin:0;
  padding:2px 2px 8px;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  gap:14px;
}

.purchase-document-focus .purchase-document-card > .sales-section-header .sales-section-title,
.sales-document-focus .sales-document-card > .sales-section-header .sales-section-title{
  position:relative;
  min-height:50px;
  padding-left:64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.purchase-document-focus .purchase-document-card > .sales-section-header .sales-section-title::before,
.sales-document-focus .sales-document-card > .sales-section-header .sales-section-title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:46px;
  height:46px;
  border-radius:10px;
  background:linear-gradient(135deg, #0b74ec, #063fd5);
  transform:translateY(-50%);
  box-shadow:0 8px 16px rgba(9, 88, 232, .18);
}

.purchase-document-focus .purchase-document-card > .sales-section-header .sales-section-title::after,
.sales-document-focus .sales-document-card > .sales-section-header .sales-section-title::after{
  content:"";
  position:absolute;
  left:15px;
  top:50%;
  width:16px;
  height:21px;
  border:2px solid #fff;
  border-radius:3px;
  transform:translateY(-50%);
}

.purchase-document-focus .purchase-document-card > .sales-section-header h4,
.sales-document-focus .sales-document-card > .sales-section-header h4{
  margin:0;
  color:#071a35;
  font-size:24px;
  line-height:1.05;
  font-weight:900;
}

.purchase-document-focus .purchase-document-card > .sales-section-header p,
.sales-document-focus .sales-document-card > .sales-section-header p{
  display:none;
}

.sales-doc-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:7px;
}

.sales-doc-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:22px;
  padding:3px 8px;
  border:1px solid #dfe7f1;
  border-radius:999px;
  background:#fff;
  color:#0d2a55;
  font-size:12px;
  font-weight:800;
}

.sales-doc-meta b{
  color:#64748b;
  font-size:11px;
  font-weight:800;
}

.purchase-document-focus .sales-section-actions,
.sales-document-focus .sales-section-actions{
  gap:8px;
  justify-content:flex-end;
}

.purchase-document-focus .sales-section-actions .filter-btn,
.sales-document-focus .sales-section-actions .filter-btn,
.purchase-document-focus .sales-section-actions .receipt-attach-btn,
.sales-document-focus .sales-section-actions .receipt-attach-btn{
  min-width:0;
  min-height:36px;
  padding:8px 12px;
  border:1px solid #d9e3ef;
  border-radius:8px;
  background:#fff;
  color:#0d2a55;
  box-shadow:0 6px 14px rgba(15, 23, 42, .06);
  font-size:12px;
  font-weight:900;
  line-height:1;
}

.purchase-document-focus .sales-section-actions .btn-primary,
.sales-document-focus .sales-section-actions .btn-primary,
.purchase-document-focus [data-purchase-doc-action="save"],
.sales-document-focus [data-sales-doc-action="save"]{
  background:#21b54b !important;
  border-color:#21b54b !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(33, 181, 75, .22) !important;
}

.sales-action-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:7px;
  border-radius:7px;
  background:#eef4ff;
  color:#0958e8;
  vertical-align:-5px;
}

.sales-action-icon svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

[data-sales-doc-action="preview"] .sales-action-icon,
[data-purchase-doc-action="preview"] .sales-action-icon{
  background:#eaf2ff;
  color:#0958e8;
}

[data-sales-doc-action="print"] .sales-action-icon,
[data-purchase-doc-action="print"] .sales-action-icon{
  background:#e8f3ff;
  color:#0b4c91;
}

[data-sales-doc-action="pdf"] .sales-action-icon,
[data-purchase-doc-action="pdf"] .sales-action-icon{
  background:#fff1f2;
  color:#dc2626;
}

[data-sales-doc-action="excel"] .sales-action-icon,
[data-purchase-doc-action="excel"] .sales-action-icon{
  background:#ecfdf5;
  color:#16803a;
}

[data-sales-doc-action="attach"] .sales-action-icon,
[data-purchase-doc-action="attach"] .sales-action-icon{
  background:#eef2ff;
  color:#3151c8;
}

[data-sales-doc-action="back"] .sales-action-icon,
[data-purchase-doc-action="back"] .sales-action-icon{
  background:#f1f5f9;
  color:#334155;
}

[data-sales-doc-action="convert"] .sales-action-icon,
[data-purchase-doc-action="convert"] .sales-action-icon{
  background:#f3e8ff;
  color:#7c3aed;
}

[data-sales-doc-action="add"] .sales-action-icon,
[data-purchase-doc-action="add"] .sales-action-icon{
  background:#e0f2fe;
  color:#0369a1;
}

[data-sales-doc-action="save"] .sales-action-icon,
[data-purchase-doc-action="save"] .sales-action-icon{
  background:rgba(255, 255, 255, .18);
  color:#fff;
}

.purchase-document-focus .receipt-common-tools,
.sales-document-focus .receipt-common-tools,
.purchase-document-focus .sales-doc-empty-tools,
.sales-document-focus .sales-doc-empty-tools{
  display:none !important;
}

.purchase-document-focus .sales-doc-top-grid,
.sales-document-focus .sales-doc-top-grid{
  display:grid;
  grid-template-columns:minmax(340px, .92fr) minmax(520px, 1.08fr);
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15, 23, 42, .045);
  overflow:hidden;
}

.purchase-document-focus .sales-doc-panel,
.sales-document-focus .sales-doc-panel{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 10px;
  align-content:start;
  padding:10px 12px;
}

.purchase-document-focus .sales-doc-customer-panel,
.sales-document-focus .sales-doc-customer-panel{
  grid-template-columns:1fr;
  border-right:1px solid #e7edf5;
}

.purchase-document-focus .sales-doc-panel-heading,
.sales-document-focus .sales-doc-panel-heading{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:1px;
  color:#0b4c91;
  font-size:15px;
  font-weight:900;
}

.purchase-document-focus .sales-doc-panel-heading::before,
.sales-document-focus .sales-doc-panel-heading::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:#0b65d8;
}

.purchase-document-focus .sales-doc-panel .sales-order-customer-block,
.sales-document-focus .sales-doc-panel .sales-order-customer-block{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.purchase-document-focus .customer-search-title,
.sales-document-focus .customer-search-title{
  display:none;
}

.purchase-document-focus .sales-order-customer-grid,
.sales-document-focus .sales-order-customer-grid{
  grid-template-columns:1fr;
  gap:6px;
}

.purchase-document-focus .sales-order-search-controls,
.sales-document-focus .sales-order-search-controls{
  grid-template-columns:minmax(0, 1fr) auto;
  gap:6px;
}

.purchase-document-focus .sales-doc-panel .form-field,
.purchase-document-focus .sales-order-search-row,
.sales-document-focus .sales-doc-panel .form-field,
.sales-document-focus .sales-order-search-row{
  gap:3px;
}

.purchase-document-focus .sales-doc-panel .form-field input,
.purchase-document-focus .sales-doc-panel .form-field select,
.purchase-document-focus .sales-doc-panel .form-field textarea,
.purchase-document-focus .sales-order-search-controls input,
.purchase-document-focus .filter-input,
.sales-document-focus .sales-doc-panel .form-field input,
.sales-document-focus .sales-doc-panel .form-field select,
.sales-document-focus .sales-doc-panel .form-field textarea,
.sales-document-focus .sales-order-search-controls input,
.sales-document-focus .filter-input{
  min-height:31px;
  padding:5px 9px;
  border-radius:7px;
  border-color:#d9e3ef;
  background:#fff;
  box-shadow:none;
  font-size:12px;
}

.purchase-document-focus .sales-doc-panel textarea,
.sales-document-focus .sales-doc-panel textarea{
  min-height:46px;
}

.purchase-document-focus .form-field label,
.purchase-document-focus .sales-order-search-row label,
.sales-document-focus .form-field label,
.sales-document-focus .sales-order-search-row label{
  margin-bottom:4px;
  color:#334155;
  font-size:11px;
  font-weight:900;
}

.purchase-document-focus .sales-order-search-controls button,
.sales-document-focus .sales-order-search-controls button{
  min-width:90px;
  min-height:31px;
  padding:5px 9px;
  border-radius:7px;
  background:#0b4c91;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.purchase-document-focus .sales-items-card,
.sales-document-focus .sales-items-card{
  position:relative;
  padding:0;
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15, 23, 42, .045);
  overflow:auto;
}

.purchase-document-focus .sales-items-card::before,
.sales-document-focus .sales-items-card::before{
  content:none !important;
}

.sales-items-card-head{
  position:sticky;
  left:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  padding:8px 12px;
  border-bottom:1px solid #e7edf5;
  background:#fff;
}

.sales-items-card-title{
  color:#0b4c91;
  font-size:15px;
  font-weight:900;
}

.sales-items-card-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.sales-items-card-actions .filter-btn{
  min-height:32px !important;
  padding:7px 11px !important;
  background:#0b4c91 !important;
  border-color:#0b4c91 !important;
  color:#fff !important;
  box-shadow:0 7px 14px rgba(11, 76, 145, .18) !important;
}

.purchase-document-focus .sales-line-table-wrap table,
.sales-document-focus .sales-line-table-wrap table{
  min-width:1120px;
  margin:0;
}

.purchase-document-focus .sales-line-table-wrap th,
.sales-document-focus .sales-line-table-wrap th{
  height:34px;
  padding:7px 9px;
  background:#f8fafc;
  color:#0d1b35;
  font-size:11px;
  text-transform:none;
  letter-spacing:0;
}

.purchase-document-focus .sales-line-table-wrap td,
.sales-document-focus .sales-line-table-wrap td{
  padding:6px 8px;
  font-size:12px;
  vertical-align:middle;
}

.purchase-document-focus .sales-line-table-wrap .filter-input,
.sales-document-focus .sales-line-table-wrap .filter-input{
  min-height:30px;
  padding:5px 8px;
}

.purchase-document-focus .sales-line-table-wrap td .filter-btn,
.sales-document-focus .sales-line-table-wrap td .filter-btn{
  min-height:30px;
  padding:5px 9px;
  border-color:#fecaca;
  background:#fff5f5;
  color:#dc2626;
  box-shadow:none;
}

.purchase-document-focus .sales-summary-ribbon,
.sales-document-focus .sales-summary-ribbon{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:0;
  padding:8px 10px;
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15, 23, 42, .045);
}

.purchase-document-focus .sales-summary-ribbon .kpi-card,
.sales-document-focus .sales-summary-ribbon .kpi-card{
  min-height:48px;
  padding:7px 12px;
  border:0;
  border-right:1px solid #e4ebf5;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.purchase-document-focus .sales-summary-ribbon .kpi-card:last-child,
.sales-document-focus .sales-summary-ribbon .kpi-card:last-child{
  border-right:0;
}

.purchase-document-focus .sales-summary-ribbon .kpi-title,
.sales-document-focus .sales-summary-ribbon .kpi-title{
  font-size:11px;
  line-height:1.1;
}

.purchase-document-focus .sales-summary-ribbon .kpi-value,
.sales-document-focus .sales-summary-ribbon .kpi-value{
  color:#071932;
  font-size:18px;
  line-height:1.2;
}

.sales-document-focus .sales-balance-ribbon{
  grid-template-columns:minmax(160px, 220px);
  justify-content:end;
}

.sales-document-focus .sales-balance-ribbon .kpi-card{
  border:0;
  border-radius:8px;
  background:#ecfdf5;
}

.sales-document-focus .sales-collection-card{
  display:grid;
  grid-template-columns:minmax(520px, 1.08fr) minmax(420px, .92fr);
  gap:8px 12px;
  padding:10px 12px;
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15, 23, 42, .045);
}

.sales-document-focus .sales-collection-card .sales-section-header{
  grid-column:1 / -1;
  margin-bottom:8px !important;
  padding-bottom:8px !important;
}

.sales-document-focus .sales-collection-card .sales-section-title h4{
  font-size:16px;
}

.sales-document-focus .sales-collection-card .module-form-grid{
  grid-column:1;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}

.sales-document-focus .sales-collection-card .kpi-grid{
  grid-column:2;
  margin-top:0;
}

.sales-document-focus .sales-collection-card > .customer-status-text{
  grid-column:1 / -1;
}

.purchase-document-focus .sales-more-details-panel,
.sales-document-focus .sales-more-details-panel{
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15, 23, 42, .045);
  overflow:hidden;
}

.purchase-document-focus .sales-more-details-panel summary,
.sales-document-focus .sales-more-details-panel summary{
  min-height:38px;
  padding:8px 12px;
  font-size:14px;
}

.purchase-document-focus .sales-more-details-grid,
.sales-document-focus .sales-more-details-grid{
  gap:10px;
  padding:10px 12px 12px;
}

.purchase-document-focus .sales-doc-source-panel,
.sales-document-focus .sales-doc-source-panel{
  display:block !important;
  grid-column:1 / -1;
}

.purchase-document-focus .sales-doc-source-panel > label,
.sales-document-focus .sales-doc-source-panel > label{
  display:none;
}

.purchase-document-focus .sales-doc-source-panel .module-card,
.sales-document-focus .sales-doc-source-panel .module-card,
.purchase-document-focus .purchase-doc-source-panel{
  padding:10px !important;
  border:1px solid #e5edf7;
  border-radius:8px;
  background:#f8fbff;
  box-shadow:none;
}

.purchase-document-focus .sales-doc-source-panel p,
.sales-document-focus .sales-doc-source-panel p{
  margin-bottom:8px !important;
  color:#52627a;
  font-size:12px;
}

.purchase-document-focus .module-topbar-actions,
.sales-document-focus .module-topbar-actions{
  gap:8px;
}

.purchase-document-focus .module-topbar-actions .filter-btn,
.sales-document-focus .module-topbar-actions .filter-btn{
  min-height:32px;
  padding:7px 10px;
  border-radius:7px;
  font-size:12px;
}

.purchase-document-focus .customer-status-text,
.sales-document-focus .customer-status-text{
  margin-top:5px;
  font-size:11px;
}

.purchase-document-focus .purchase-payment-document .module-card.mt-2{
  padding:0;
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15, 23, 42, .045);
}

.purchase-document-focus .purchase-payment-document .module-card.mt-2 > .sales-section-header{
  min-height:42px;
  margin:0 !important;
  padding:8px 12px !important;
  border-bottom:1px solid #e7edf5;
}

.purchase-document-focus .purchase-payment-document .module-card.mt-2 > .sales-section-header h4{
  font-size:15px;
}

.purchase-document-focus .purchase-payment-document .module-card.mt-2 > .table-wrapper{
  border:0;
  border-radius:0;
  box-shadow:none;
}

@media (max-width: 1180px){
  .purchase-document-focus .sales-doc-top-grid,
  .sales-document-focus .sales-doc-top-grid{
    grid-template-columns:1fr;
  }

  .purchase-document-focus .sales-doc-customer-panel,
  .sales-document-focus .sales-doc-customer-panel{
    border-right:0;
    border-bottom:1px solid #e7edf5;
  }

  .purchase-document-focus .purchase-document-card > .sales-section-header,
  .sales-document-focus .sales-document-card > .sales-section-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .purchase-document-focus .sales-section-actions,
  .sales-document-focus .sales-section-actions{
    justify-content:flex-start;
  }

  .sales-document-focus .sales-collection-card{
    grid-template-columns:1fr;
  }

  .sales-document-focus .sales-collection-card .module-form-grid,
  .sales-document-focus .sales-collection-card .kpi-grid{
    grid-column:1;
  }
}

@media (max-width: 820px){
  .purchase-document-focus .purchase-section,
  .sales-document-focus .sales-section{
    padding:8px;
  }

  .purchase-document-focus .sales-doc-panel,
  .sales-document-focus .sales-doc-panel,
  .sales-document-focus .sales-collection-card .module-form-grid{
    grid-template-columns:1fr;
  }

  .purchase-document-focus .purchase-document-card > .sales-section-header .sales-section-title,
  .sales-document-focus .sales-document-card > .sales-section-header .sales-section-title{
    min-height:44px;
    padding-left:56px;
  }

  .purchase-document-focus .purchase-document-card > .sales-section-header h4,
  .sales-document-focus .sales-document-card > .sales-section-header h4{
    font-size:21px;
  }

  .sales-doc-meta span{
    font-size:11px;
  }

  .sales-items-card-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .purchase-document-focus .sales-summary-ribbon,
  .sales-document-focus .sales-summary-ribbon{
    grid-template-columns:1fr;
  }

  .purchase-document-focus .sales-summary-ribbon .kpi-card,
  .sales-document-focus .sales-summary-ribbon .kpi-card{
    border-right:0;
    border-bottom:1px solid #e4ebf5;
  }

  .purchase-document-focus .sales-summary-ribbon .kpi-card:last-child,
  .sales-document-focus .sales-summary-ribbon .kpi-card:last-child{
    border-bottom:0;
  }
}

/* =========================
   ERP VISUAL ICON POLISH
========================= */
.sales-portal-body .sales-sub-nav .module-inner-link,
.purchase-portal-body .purchase-vendor-sub-nav .module-inner-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:6px 12px 6px 8px;
  border-radius:8px;
  font-weight:850;
}

.sales-portal-body .sales-sub-nav .module-inner-link::before,
.purchase-portal-body .purchase-vendor-sub-nav .module-inner-link::before{
  content:attr(data-tab-icon);
  width:24px;
  height:24px;
  min-width:24px;
  display:inline-grid;
  place-items:center;
  border-radius:7px;
  color:#fff;
  background:#0b65f0;
  font-size:9px;
  font-weight:900;
  line-height:1;
}

.sales-sub-nav .module-inner-link[data-accent="blue"]::before{ background:linear-gradient(135deg, #1684ff, #0757df); }
.sales-sub-nav .module-inner-link[data-accent="cyan"]::before{ background:linear-gradient(135deg, #06b6d4, #0e7490); }
.sales-sub-nav .module-inner-link[data-accent="green"]::before{ background:linear-gradient(135deg, #22c55e, #15803d); }
.sales-sub-nav .module-inner-link[data-accent="orange"]::before{ background:linear-gradient(135deg, #fb923c, #ea580c); }
.sales-sub-nav .module-inner-link[data-accent="violet"]::before{ background:linear-gradient(135deg, #a855f7, #7c3aed); }
.sales-sub-nav .module-inner-link[data-accent="slate"]::before{ background:linear-gradient(135deg, #64748b, #334155); }

.sales-mode-pill,
.sales-status-badge{
  gap:6px;
  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.sales-mode-pill::before,
.sales-status-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 4px rgba(255, 255, 255, .70);
}

.sales-row-action,
.purchase-row-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.sales-row-action::before,
.purchase-row-action::before{
  content:"";
  width:20px;
  height:20px;
  margin-right:6px;
  flex:0 0 20px;
  border-radius:7px;
  background-color:#dbeafe;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230958e8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  box-shadow:0 8px 18px rgba(9, 88, 232, .12);
}

.sales-row-action.is-primary::before,
.sales-row-action.is-convert::before,
.purchase-row-action.is-convert::before{
  background-color:rgba(255, 255, 255, .22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 1l4 4-4 4'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpath d='M7 23l-4-4 4-4'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
  box-shadow:none;
}

.sales-row-action.is-print::before,
.purchase-row-action.is-print::before{
  background-color:#dbeafe;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230b4c91' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E");
  box-shadow:0 8px 18px rgba(11, 76, 145, .12);
}

.sales-row-action.is-pdf::before,
.purchase-row-action.is-pdf::before{
  background-color:#fee2e2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");
  box-shadow:0 8px 18px rgba(220, 38, 38, .12);
}

.sales-row-action.is-invoice::before,
.purchase-row-action.is-invoice::before{
  background-color:#eef2ff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233151c8' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E");
  box-shadow:0 8px 18px rgba(49, 81, 200, .12);
}

.purchase-portal-body .table-wrapper td .filter-btn{
  min-height:30px;
  padding:6px 10px;
  border:0;
  border-radius:999px;
  background:#fff7ed;
  color:#c2410c;
  font-size:12px;
  font-weight:900;
}

.purchase-portal-body .table-wrapper td .filter-btn.purchase-row-action.is-view{
  background:#eef4ff;
  color:#0958e8;
}

.purchase-portal-body .table-wrapper td .filter-btn.purchase-row-action.is-invoice{
  background:#eef2ff;
  color:#3151c8;
}

/* =========================
   SHARED MODULE COLOR SYSTEM
========================= */
.module-color-body .sales-icon{
  background:linear-gradient(135deg, #1684ff, #0757df);
  box-shadow:0 12px 24px rgba(15, 23, 42, .12);
}

.module-items-body .sales-icon{ background:linear-gradient(135deg, #14b8a6, #0f766e); }
.module-daily-body .sales-icon{ background:linear-gradient(135deg, #f59e0b, #d97706); }
.module-smart-body .sales-icon{ background:linear-gradient(135deg, #a855f7, #7c3aed); }
.module-officials-body .sales-icon{ background:linear-gradient(135deg, #64748b, #334155); }
.module-gallery-body .sales-icon{ background:linear-gradient(135deg, #ec4899, #be185d); }
.module-favorites-body .sales-icon{ background:linear-gradient(135deg, #eab308, #a16207); }
.module-hrms-body .sales-icon{ background:linear-gradient(135deg, #22c55e, #15803d); }
.module-accounts-body .sales-icon{ background:linear-gradient(135deg, #0ea5e9, #0369a1); }
.module-reports-body .sales-icon{ background:linear-gradient(135deg, #f43f5e, #be123c); }
.module-settings-body .sales-icon{ background:linear-gradient(135deg, #475569, #1e293b); }
.module-subscribers-body .sales-icon{ background:linear-gradient(135deg, #6366f1, #3730a3); }

.module-color-body .module-inner-nav:not(.sales-side-nav):not(.sales-sub-nav):not(.purchase-vendor-sub-nav){
  gap:8px;
  padding:8px;
  border:1px solid #dfe7f1;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 22px rgba(15, 23, 42, .045);
}

.module-color-body .module-inner-nav:not(.sales-side-nav):not(.sales-sub-nav):not(.purchase-vendor-sub-nav) .module-inner-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:7px 13px 7px 8px;
  border:1px solid transparent;
  border-radius:8px;
  color:#142746;
  font-weight:850;
}

.module-color-body .module-inner-nav:not(.sales-side-nav):not(.sales-sub-nav):not(.purchase-vendor-sub-nav) .module-inner-link::before{
  content:attr(data-nav-icon);
  width:24px;
  height:24px;
  min-width:24px;
  display:inline-grid;
  place-items:center;
  border-radius:7px;
  color:#fff;
  background:linear-gradient(135deg, #1684ff, #0757df);
  font-size:9px;
  font-weight:900;
  line-height:1;
}

.module-color-body .module-inner-link[data-accent="blue"]::before{ background:linear-gradient(135deg, #1684ff, #0757df) !important; }
.module-color-body .module-inner-link[data-accent="indigo"]::before{ background:linear-gradient(135deg, #6366f1, #3730a3) !important; }
.module-color-body .module-inner-link[data-accent="cyan"]::before{ background:linear-gradient(135deg, #06b6d4, #0e7490) !important; }
.module-color-body .module-inner-link[data-accent="green"]::before{ background:linear-gradient(135deg, #22c55e, #15803d) !important; }
.module-color-body .module-inner-link[data-accent="teal"]::before{ background:linear-gradient(135deg, #14b8a6, #0f766e) !important; }
.module-color-body .module-inner-link[data-accent="orange"]::before{ background:linear-gradient(135deg, #fb923c, #ea580c) !important; }
.module-color-body .module-inner-link[data-accent="amber"]::before{ background:linear-gradient(135deg, #fbbf24, #d97706) !important; }
.module-color-body .module-inner-link[data-accent="violet"]::before{ background:linear-gradient(135deg, #a855f7, #7c3aed) !important; }
.module-color-body .module-inner-link[data-accent="rose"]::before{ background:linear-gradient(135deg, #fb7185, #e11d48) !important; }
.module-color-body .module-inner-link[data-accent="slate"]::before{ background:linear-gradient(135deg, #64748b, #334155) !important; }

.module-color-body .module-inner-nav:not(.sales-side-nav):not(.sales-sub-nav):not(.purchase-vendor-sub-nav) .module-inner-link.active{
  background:#eef4ff;
  color:#0958e8;
  box-shadow:inset 3px 0 0 currentColor;
}

.module-color-body .kpi-grid > .kpi-card,
.module-color-body .activity-kpi-card,
.module-color-body .metric-card{
  position:relative;
  overflow:hidden;
}

.module-color-body .kpi-grid > .kpi-card::after,
.module-color-body .activity-kpi-card::after,
.module-color-body .metric-card::after{
  content:"";
  position:absolute;
  right:14px;
  top:14px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#0b65f0;
  box-shadow:0 0 0 6px rgba(11, 101, 240, .09);
}

.module-color-body .kpi-grid > .kpi-card:nth-child(2n)::after,
.module-color-body .activity-kpi-card:nth-child(2n)::after,
.module-color-body .metric-card:nth-child(2n)::after{ background:#16a34a; box-shadow:0 0 0 6px rgba(22, 163, 74, .10); }

.module-color-body .kpi-grid > .kpi-card:nth-child(3n)::after,
.module-color-body .activity-kpi-card:nth-child(3n)::after,
.module-color-body .metric-card:nth-child(3n)::after{ background:#f97316; box-shadow:0 0 0 6px rgba(249, 115, 22, .10); }

.module-color-body .kpi-grid > .kpi-card:nth-child(4n)::after,
.module-color-body .activity-kpi-card:nth-child(4n)::after,
.module-color-body .metric-card:nth-child(4n)::after{ background:#8b5cf6; box-shadow:0 0 0 6px rgba(139, 92, 246, .10); }

.module-favorites-body .add-favorite-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.module-favorites-body .add-favorite-btn::before{
  content:"AD";
  width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  border-radius:7px;
  background:rgba(255, 255, 255, .20);
  color:#fff;
  font-size:9px;
  font-weight:900;
}

/* =========================
   ERP GLOBAL MENU + CLEAN SUMMARY ICONS
========================= */
.main-dashboard-body .dashboard-utility-card{
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15, 23, 42, .055);
}

.main-dashboard-body .main-command-bar{
  border:1px solid #dfe7f1;
  border-radius:12px;
  background:#fff;
  box-shadow:none;
}

.main-dashboard-body .main-command-group-label{
  color:#64748b;
}

.main-dashboard-body .main-command-search{
  border-color:#dbe4ef;
  background:#f8fbff;
  color:#0d1b35;
}

.main-dashboard-body .main-command-search::placeholder{
  color:#64748b;
}

.main-dashboard-body .main-command-link{
  border-color:#dbe4ef;
  background:#fff;
  color:#0d2a55;
  box-shadow:0 6px 14px rgba(15, 23, 42, .045);
}

.main-dashboard-body .main-command-link:hover,
.main-dashboard-body .main-command-link.active{
  background:#eef4ff;
  color:#0958e8;
  border-color:#bfd7ff;
  box-shadow:inset 3px 0 0 currentColor, 0 8px 18px rgba(9, 88, 232, .08);
}

.erp-global-menu{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:10px;
  align-items:center;
  margin:0 0 16px;
  padding:10px;
  border:1px solid #dfe7f1;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15, 23, 42, .055);
}

.erp-global-menu-label{
  padding:0 6px;
  color:#64748b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.erp-global-menu-group{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}

.erp-global-menu-admin{
  justify-content:flex-end;
}

.erp-global-menu-link{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px 6px 8px;
  border:1px solid #dbe4ef;
  border-radius:8px;
  background:#fff;
  color:#0d2a55;
  box-shadow:0 6px 14px rgba(15, 23, 42, .045);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
}

.erp-global-menu-link::before{
  content:attr(data-menu-code);
  width:24px;
  height:24px;
  min-width:24px;
  display:inline-grid;
  place-items:center;
  border-radius:7px;
  color:#fff;
  background:linear-gradient(135deg, #1684ff, #0757df);
  font-size:8px;
  font-weight:900;
  line-height:1;
}

.erp-global-menu-link[data-menu-code="DASHBOARD"]::before{ content:"HM"; }
.erp-global-menu-link[data-menu-code="ITEMS"]::before{ content:"IT"; }
.erp-global-menu-link[data-menu-code="DAILY_ACTIVITY"]::before{ content:"DA"; }
.erp-global-menu-link[data-menu-code="SALES"]::before{ content:"SL"; }
.erp-global-menu-link[data-menu-code="PURCHASE"]::before{ content:"PR"; }
.erp-global-menu-link[data-menu-code="SMART_SERVICES"]::before{ content:"SS"; }
.erp-global-menu-link[data-menu-code="OFFICIALS"]::before{ content:"OF"; }
.erp-global-menu-link[data-menu-code="GALLERY"]::before{ content:"GL"; }
.erp-global-menu-link[data-menu-code="FAVORITES"]::before{ content:"FV"; }
.erp-global-menu-link[data-menu-code="COMPANY_MANAGEMENT"]::before{ content:"CM"; }
.erp-global-menu-link[data-menu-code="HRMS"]::before{ content:"HR"; }
.erp-global-menu-link[data-menu-code="ACCOUNTS"]::before{ content:"AC"; }
.erp-global-menu-link[data-menu-code="REPORTS"]::before{ content:"RP"; }
.erp-global-menu-link[data-menu-code="SETTINGS"]::before{ content:"ST"; }

.erp-global-menu-link[data-accent="blue"]::before{ background:linear-gradient(135deg, #1684ff, #0757df); }
.erp-global-menu-link[data-accent="indigo"]::before{ background:linear-gradient(135deg, #6366f1, #3730a3); }
.erp-global-menu-link[data-accent="cyan"]::before{ background:linear-gradient(135deg, #06b6d4, #0e7490); }
.erp-global-menu-link[data-accent="green"]::before{ background:linear-gradient(135deg, #22c55e, #15803d); }
.erp-global-menu-link[data-accent="teal"]::before{ background:linear-gradient(135deg, #14b8a6, #0f766e); }
.erp-global-menu-link[data-accent="orange"]::before{ background:linear-gradient(135deg, #fb923c, #ea580c); }
.erp-global-menu-link[data-accent="amber"]::before{ background:linear-gradient(135deg, #fbbf24, #d97706); }
.erp-global-menu-link[data-accent="violet"]::before{ background:linear-gradient(135deg, #a855f7, #7c3aed); }
.erp-global-menu-link[data-accent="rose"]::before{ background:linear-gradient(135deg, #fb7185, #e11d48); }
.erp-global-menu-link[data-accent="slate"]::before{ background:linear-gradient(135deg, #64748b, #334155); }

.erp-global-menu-link:hover,
.erp-global-menu-link.active{
  background:#eef4ff;
  color:#0958e8;
  border-color:#bfd7ff;
  box-shadow:inset 3px 0 0 currentColor, 0 8px 18px rgba(9, 88, 232, .08);
}

.sales-document-focus .sales-summary-ribbon .kpi-card,
.purchase-document-focus .sales-summary-ribbon .kpi-card{
  display:grid !important;
  grid-template-columns:32px minmax(0, 1fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:10px;
  min-height:56px;
  padding:8px 12px !important;
}

.sales-document-focus .sales-summary-ribbon .kpi-card::before,
.purchase-document-focus .sales-summary-ribbon .kpi-card::before{
  position:static !important;
  grid-row:1 / 3;
  grid-column:1;
  width:26px;
  height:26px;
  transform:none !important;
}

.sales-document-focus .sales-summary-ribbon .kpi-card::after,
.purchase-document-focus .sales-summary-ribbon .kpi-card::after{
  display:none !important;
}

.sales-document-focus .sales-summary-ribbon .kpi-title,
.sales-document-focus .sales-summary-ribbon .kpi-value,
.purchase-document-focus .sales-summary-ribbon .kpi-title,
.purchase-document-focus .sales-summary-ribbon .kpi-value{
  grid-column:2;
}

@media (max-width: 820px){
  .erp-global-menu{
    grid-template-columns:1fr;
  }

  .erp-global-menu-label{
    padding:0;
  }

  .erp-global-menu-group,
  .erp-global-menu-admin{
    overflow:auto;
    flex-wrap:nowrap;
    justify-content:flex-start;
  }

  .erp-global-menu-link{
    flex:0 0 auto;
  }

  .module-color-body .module-inner-nav:not(.sales-side-nav):not(.sales-sub-nav):not(.purchase-vendor-sub-nav){
    overflow:auto;
  }

  .module-color-body .module-inner-nav:not(.sales-side-nav):not(.sales-sub-nav):not(.purchase-vendor-sub-nav) .module-inner-link{
    flex:0 0 auto;
  }
}

/* =========================
   ERP GLOBAL LEFT SIDEBAR
========================= */
body.erp-global-sidebar-body{
  background:#f8fafc;
  color:#0d1b35;
}

body.erp-global-sidebar-body > header.text-center{
  display:none;
}

body.erp-global-sidebar-body .admin-shell{
  max-width:none;
  min-height:100vh;
  margin:0;
  padding:0 0 0 260px;
}

body.erp-global-sidebar-body .portal-panel{
  min-height:100vh;
  display:block;
  padding:0 0 24px;
  border:0;
  border-radius:0;
  background:#f8fafc;
  box-shadow:none;
  overflow:visible;
}

body.erp-global-sidebar-body .module-page-shell{
  gap:0;
}

body.erp-global-sidebar-body .portal-panel > .sales-header{
  position:sticky;
  top:0;
  z-index:20;
  min-width:0;
  min-height:74px;
  margin:0 0 18px;
  padding:14px 28px;
  border:0;
  border-bottom:1px solid #e4ebf5;
  border-radius:0;
  background:rgba(255, 255, 255, .96);
  box-shadow:none;
  backdrop-filter:blur(10px);
}

body.erp-global-sidebar-body .portal-panel > :not(.erp-global-menu):not(.sales-header){
  min-width:0;
  margin-left:28px;
  margin-right:28px;
}

.main-dashboard-body.erp-global-sidebar-body .dashboard-utility-card{
  display:none;
}

.erp-global-side-menu{
  position:fixed;
  inset:0 auto 0 0;
  z-index:40;
  width:260px;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  margin:0;
  padding:22px 14px;
  border:0;
  border-right:1px solid #e4ebf5;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  overflow:auto;
}

.erp-global-menu-brand{
  display:grid;
  grid-template-columns:52px minmax(0, 1fr);
  gap:12px;
  align-items:center;
  padding:0 8px 18px;
  border-bottom:1px solid #eef2f7;
}

.erp-global-menu-logo{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, #1d75ff, #0638d7);
  color:#fff;
  font-size:24px;
  font-weight:900;
  text-transform:uppercase;
}

.erp-global-menu-logo[data-accent="teal"]{ background:linear-gradient(135deg, #14b8a6, #0f766e); }
.erp-global-menu-logo[data-accent="amber"]{ background:linear-gradient(135deg, #f59e0b, #d97706); }
.erp-global-menu-logo[data-accent="cyan"]{ background:linear-gradient(135deg, #06b6d4, #0e7490); }
.erp-global-menu-logo[data-accent="orange"]{ background:linear-gradient(135deg, #fb923c, #ea580c); }
.erp-global-menu-logo[data-accent="violet"]{ background:linear-gradient(135deg, #a855f7, #7c3aed); }
.erp-global-menu-logo[data-accent="slate"]{ background:linear-gradient(135deg, #64748b, #334155); }
.erp-global-menu-logo[data-accent="rose"]{ background:linear-gradient(135deg, #ec4899, #be185d); }
.erp-global-menu-logo[data-accent="indigo"]{ background:linear-gradient(135deg, #6366f1, #3730a3); }
.erp-global-menu-logo[data-accent="green"]{ background:linear-gradient(135deg, #22c55e, #15803d); }

.erp-global-menu-brand strong{
  display:block;
  color:#0d1b35;
  font-size:17px;
  font-weight:900;
}

.erp-global-menu-brand span{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:3px;
  color:#52627a;
  font-size:12px;
  font-weight:700;
}

.erp-global-menu-brand i{
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:999px;
  background:#24c55e;
}

.erp-global-menu-search{
  display:grid;
  gap:6px;
  padding:0 8px;
}

.erp-global-menu-search label,
.erp-global-side-menu .erp-global-menu-label{
  padding:0;
  color:#64748b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.erp-global-menu-search input{
  width:100%;
  min-height:38px;
  border:1px solid #dbe4ef;
  border-radius:8px;
  background:#f8fbff;
  color:#0d1b35;
  padding:8px 10px;
  font-size:12px;
  font-weight:700;
  outline:none;
}

.erp-global-menu-search input:focus{
  border-color:#8bbcff;
  box-shadow:0 0 0 3px rgba(9, 88, 232, .10);
}

.erp-global-side-menu .erp-global-menu-group{
  display:grid;
  gap:6px;
  align-items:stretch;
}

.erp-global-side-menu .erp-global-menu-admin{
  justify-content:stretch;
}

.erp-global-side-menu .erp-global-menu-link{
  min-width:0;
  width:100%;
  min-height:46px;
  display:inline-flex;
  justify-content:flex-start;
  gap:10px;
  padding:0 14px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#142746;
  box-shadow:none;
  font-size:13px;
  font-weight:850;
  text-align:left;
}

.erp-global-side-menu .erp-global-menu-link:hover{
  background:#f2f6ff;
  color:#0958e8;
  box-shadow:none;
}

.erp-global-side-menu .erp-global-menu-link.active{
  background:#eef4ff;
  color:#0958e8;
  box-shadow:inset 3px 0 0 #0958e8;
}

.erp-global-side-menu .erp-global-menu-link::before{
  width:26px;
  height:26px;
  min-width:26px;
  border-radius:8px;
  font-size:8px;
  box-shadow:0 8px 18px rgba(15, 23, 42, .10);
}

.erp-global-menu-help{
  display:grid;
  gap:8px;
  margin-top:auto;
  padding:16px;
  border:1px solid #dbe4ef;
  border-radius:8px;
  background:#fbfdff;
}

.erp-global-menu-help strong{
  color:#0d1b35;
  font-size:14px;
}

.erp-global-menu-help span{
  color:#52627a;
  font-size:12px;
  line-height:1.35;
}

.erp-global-menu-help a{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dbe4ef;
  border-radius:8px;
  background:#fff;
  color:#0d2a55;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
}

@media (max-width: 1180px){
  body.erp-global-sidebar-body .admin-shell{
    padding-left:230px;
  }

  .erp-global-side-menu{
    width:230px;
    padding:18px 12px;
  }

  .erp-global-side-menu .erp-global-menu-link{
    min-height:42px;
    padding:0 11px;
    font-size:12px;
  }
}

@media (max-width: 900px){
  body.erp-global-sidebar-body .admin-shell{
    padding-left:0;
  }

  body.erp-global-sidebar-body .portal-panel{
    padding-bottom:18px;
  }

  body.erp-global-sidebar-body .portal-panel > .sales-header{
    position:relative;
    margin-bottom:14px;
    padding:16px;
  }

  body.erp-global-sidebar-body .portal-panel > :not(.erp-global-menu):not(.sales-header){
    margin-left:16px;
    margin-right:16px;
  }

  .erp-global-side-menu{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    max-height:none;
    padding:14px;
    border-right:0;
    border-bottom:1px solid #e4ebf5;
  }

  .erp-global-menu-brand{
    padding-bottom:12px;
  }

  .erp-global-side-menu .erp-global-menu-group{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .erp-global-side-menu .erp-global-menu-link{
    justify-content:flex-start;
  }

  .erp-global-menu-help{
    display:none;
  }
}

@media (max-width: 620px){
  .erp-global-side-menu .erp-global-menu-group{
    grid-template-columns:1fr;
  }

  .erp-global-menu-search{
    padding:0;
  }
}

/* =========================
   MODULE INNER LEFT MENUS
========================= */
body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell:has(> .erp-module-side-nav){
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  column-gap:18px;
  align-items:start;
}

body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell:has(> .erp-module-side-nav) > .erp-global-menu{
  grid-column:1 / -1;
}

body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell:has(> .erp-module-side-nav) > .sales-header{
  grid-column:1 / -1;
}

body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell > .erp-module-side-nav{
  grid-column:1;
  position:sticky;
  top:92px;
  z-index:10;
  align-self:start;
  max-height:calc(100vh - 112px);
  overflow:auto;
  display:grid;
  grid-template-columns:1fr !important;
  gap:7px;
  width:232px;
  margin:0 0 0 28px !important;
  padding:14px 10px;
  border:1px solid #dfe7f1;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15, 23, 42, .055);
}

body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell:not(:has(> .sales-header)) > .erp-module-side-nav{
  top:18px;
}

body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell > .erp-module-content{
  grid-column:2;
  min-width:0;
  width:auto;
  display:grid;
  gap:16px;
  align-content:start;
  margin-left:0 !important;
  margin-right:28px !important;
}

body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell > .erp-module-content > *{
  min-width:0;
}

.erp-module-side-nav .erp-module-nav-label{
  padding:2px 6px 8px;
  border-bottom:1px solid #eef2f7;
  color:#64748b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.module-color-body .erp-module-side-nav .module-inner-link{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:44px;
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#142746;
  box-shadow:none;
  text-align:left;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  white-space:normal;
  cursor:pointer;
}

.module-color-body .erp-module-side-nav .module-inner-link::before{
  width:26px;
  height:26px;
  min-width:26px;
  border-radius:8px;
  font-size:8px;
  box-shadow:0 8px 18px rgba(15, 23, 42, .10);
}

.module-color-body .erp-module-side-nav .module-inner-link:hover{
  background:#f2f6ff;
  color:#0958e8;
  box-shadow:none;
}

.module-color-body .erp-module-side-nav .module-inner-link.active{
  background:#eef4ff;
  color:#0958e8;
  box-shadow:inset 3px 0 0 #0958e8;
}

.erp-generated-module-nav .module-inner-link{
  appearance:none;
}

@media (max-width: 1180px){
  body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell:has(> .erp-module-side-nav){
    grid-template-columns:228px minmax(0, 1fr);
    column-gap:14px;
  }

  body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell > .erp-module-side-nav{
    width:210px;
    margin-left:18px !important;
    padding:12px 8px;
  }

  body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell > .erp-module-content{
    margin-right:18px !important;
  }
}

@media (max-width: 900px){
  body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell:has(> .erp-module-side-nav){
    display:block;
  }

  body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell > .erp-module-side-nav{
    position:relative;
    top:auto;
    width:auto;
    max-height:none;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    margin:0 16px 14px !important;
    padding:10px;
  }

  body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell:not(:has(> .sales-header)) > .erp-module-side-nav{
    top:auto;
    margin-top:18px !important;
  }

  body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell > .erp-module-content{
    margin-top:14px !important;
    margin-left:16px !important;
    margin-right:16px !important;
  }

  .erp-module-side-nav .erp-module-nav-label{
    grid-column:1 / -1;
  }
}

@media (max-width: 620px){
  body.erp-global-sidebar-body.erp-module-menu-body .portal-panel.module-page-shell > .erp-module-side-nav{
    grid-template-columns:1fr !important;
  }
}

/* =========================
   SALES-STYLE MODULE PORTALS
========================= */
body.module-portal-body{
  background:#f8fafc;
}

body.module-portal-body > header.text-center{
  display:none;
}

body.module-portal-body .admin-shell{
  max-width:none;
  width:100%;
  margin:0;
  padding:0;
}

body.module-portal-body .portal-panel.module-page-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  grid-template-rows:74px minmax(0, 1fr);
  grid-template-areas:
    "nav header"
    "nav content";
  gap:0;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#f8fafc;
  overflow:visible;
}

body.module-portal-body .portal-panel.module-page-shell > .sales-header{
  grid-area:header;
  position:sticky;
  top:0;
  z-index:20;
  min-width:0;
  min-height:74px;
  margin:0;
  padding:14px 28px;
  border:0;
  border-bottom:1px solid #e4ebf5;
  border-radius:0;
  background:rgba(255,255,255,.96);
  box-shadow:none;
  backdrop-filter:blur(10px);
}

body.module-portal-body .sales-header-left{
  min-width:0;
}

body.module-portal-body .sales-icon{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:10px;
  font-size:22px;
}

body.module-portal-body .sales-header .section-title{
  color:#0d1b35;
  font-size:20px;
  line-height:1.15;
}

body.module-portal-body .sales-header .section-subtitle{
  color:#52627a;
  font-size:12px;
  line-height:1.25;
}

body.module-portal-body .sales-header-actions{
  gap:10px;
}

body.module-portal-body .header-btn,
body.module-portal-body .filter-btn{
  min-height:38px;
  height:auto;
  border-radius:8px;
  border-color:#dbe4ef;
  background:#fff;
  color:#0d2a55;
  box-shadow:0 6px 16px rgba(15, 23, 42, .06);
  font-size:13px;
}

body.module-portal-body .header-btn.primary,
body.module-portal-body .filter-btn.btn-primary,
body.module-portal-body .btn.btn-primary{
  background:#0958e8;
  color:#fff;
  border-color:#0958e8;
  box-shadow:0 10px 18px rgba(9, 88, 232, .18);
}

body.module-portal-body .portal-panel.module-page-shell > .module-portal-side-nav{
  grid-area:nav;
  position:sticky;
  top:0;
  z-index:30;
  width:260px;
  height:100vh;
  display:flex !important;
  flex-direction:column;
  align-items:stretch;
  gap:18px;
  max-height:none;
  margin:0 !important;
  padding:22px 14px;
  border:0;
  border-right:1px solid #e4ebf5;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  overflow:auto;
}

body.module-portal-body .module-portal-brand{
  display:grid;
  grid-template-columns:52px minmax(0, 1fr);
  gap:12px;
  align-items:center;
  padding:0 8px 18px;
  border-bottom:1px solid #eef2f7;
}

body.module-portal-body .module-portal-logo[data-accent="blue"]{ background:linear-gradient(135deg, #1684ff, #0757df); }
body.module-portal-body .module-portal-logo[data-accent="indigo"]{ background:linear-gradient(135deg, #6366f1, #3730a3); }
body.module-portal-body .module-portal-logo[data-accent="cyan"]{ background:linear-gradient(135deg, #06b6d4, #0e7490); }
body.module-portal-body .module-portal-logo[data-accent="green"]{ background:linear-gradient(135deg, #22c55e, #15803d); }
body.module-portal-body .module-portal-logo[data-accent="teal"]{ background:linear-gradient(135deg, #14b8a6, #0f766e); }
body.module-portal-body .module-portal-logo[data-accent="orange"]{ background:linear-gradient(135deg, #fb923c, #ea580c); }
body.module-portal-body .module-portal-logo[data-accent="amber"]{ background:linear-gradient(135deg, #fbbf24, #d97706); }
body.module-portal-body .module-portal-logo[data-accent="violet"]{ background:linear-gradient(135deg, #a855f7, #7c3aed); }
body.module-portal-body .module-portal-logo[data-accent="rose"]{ background:linear-gradient(135deg, #fb7185, #e11d48); }
body.module-portal-body .module-portal-logo[data-accent="slate"]{ background:linear-gradient(135deg, #64748b, #334155); }

body.module-portal-body .module-portal-menu{
  display:grid;
  gap:6px;
}

body.module-portal-body .module-portal-side-nav .module-inner-link{
  min-width:0 !important;
  width:100% !important;
  height:46px;
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:0 16px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#142746;
  box-shadow:none;
  text-align:left;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  white-space:normal;
  cursor:pointer;
}

body.module-portal-body .module-portal-side-nav .module-inner-link::before{
  content:attr(data-nav-icon);
  width:26px;
  height:26px;
  min-width:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  font-size:8px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 18px rgba(15, 23, 42, .10);
}

body.module-portal-body .module-portal-side-nav .module-inner-link:hover{
  background:#f2f6ff;
  color:#0958e8;
}

body.module-portal-body .module-portal-side-nav .module-inner-link.active{
  background:#eef4ff;
  color:#0958e8;
  box-shadow:inset 3px 0 0 #0958e8;
}

body.module-portal-body .module-portal-side-nav .module-inner-link[data-accent="blue"]::before{ background:linear-gradient(135deg, #1684ff, #0757df) !important; }
body.module-portal-body .module-portal-side-nav .module-inner-link[data-accent="indigo"]::before{ background:linear-gradient(135deg, #6366f1, #3730a3) !important; }
body.module-portal-body .module-portal-side-nav .module-inner-link[data-accent="cyan"]::before{ background:linear-gradient(135deg, #06b6d4, #0e7490) !important; }
body.module-portal-body .module-portal-side-nav .module-inner-link[data-accent="green"]::before{ background:linear-gradient(135deg, #22c55e, #15803d) !important; }
body.module-portal-body .module-portal-side-nav .module-inner-link[data-accent="teal"]::before{ background:linear-gradient(135deg, #14b8a6, #0f766e) !important; }
body.module-portal-body .module-portal-side-nav .module-inner-link[data-accent="orange"]::before{ background:linear-gradient(135deg, #fb923c, #ea580c) !important; }
body.module-portal-body .module-portal-side-nav .module-inner-link[data-accent="amber"]::before{ background:linear-gradient(135deg, #fbbf24, #d97706) !important; }
body.module-portal-body .module-portal-side-nav .module-inner-link[data-accent="violet"]::before{ background:linear-gradient(135deg, #a855f7, #7c3aed) !important; }
body.module-portal-body .module-portal-side-nav .module-inner-link[data-accent="rose"]::before{ background:linear-gradient(135deg, #fb7185, #e11d48) !important; }
body.module-portal-body .module-portal-side-nav .module-inner-link[data-accent="slate"]::before{ background:linear-gradient(135deg, #64748b, #334155) !important; }

body.module-portal-body .module-portal-help{
  display:grid;
  gap:8px;
  margin-top:auto;
  padding:16px;
  border:1px solid #dbe4ef;
  border-radius:8px;
  background:#fbfdff;
}

body.module-portal-body .module-portal-help .header-btn{
  width:100%;
  min-width:0;
}

body.module-portal-body .portal-panel.module-page-shell > .erp-module-content{
  grid-area:content;
  min-width:0;
  width:auto;
  display:grid;
  gap:16px;
  align-content:start;
  margin:0 !important;
  padding:22px 28px 28px;
}

body.module-portal-body .erp-module-content > *{
  min-width:0;
}

body.module-portal-body .module-card,
body.module-portal-body .item-master-note,
body.module-portal-body .item-master-level-card,
body.module-portal-body .table-wrapper,
body.module-portal-body .form-card{
  border-radius:8px;
  border-color:#dfe7f1;
  box-shadow:0 8px 22px rgba(15, 23, 42, .045);
}

:root[data-theme-mode="dark"] body.module-portal-body .portal-panel.module-page-shell{
  background:#0b1320;
}

:root[data-theme-mode="dark"] body.module-portal-body .sales-header,
:root[data-theme-mode="dark"] body.module-portal-body .module-portal-side-nav,
:root[data-theme-mode="dark"] body.module-portal-body .module-portal-help{
  background:var(--card);
  border-color:var(--line);
}

@media (max-width: 1180px){
  body.module-portal-body .portal-panel.module-page-shell{
    grid-template-columns:1fr;
    grid-template-rows:auto auto minmax(0, 1fr);
    grid-template-areas:
      "header"
      "nav"
      "content";
  }

  body.module-portal-body .portal-panel.module-page-shell > .module-portal-side-nav{
    position:relative;
    width:100%;
    height:auto;
    padding:14px;
    border-right:0;
    border-bottom:1px solid #e4ebf5;
  }

  body.module-portal-body .module-portal-brand{
    padding-bottom:12px;
  }

  body.module-portal-body .module-portal-menu{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  body.module-portal-body .module-portal-help{
    display:none;
  }
}

@media (max-width: 820px){
  body.module-portal-body .portal-panel.module-page-shell > .sales-header{
    position:relative;
    flex-direction:column;
    align-items:flex-start;
    padding:16px;
  }

  body.module-portal-body .sales-header-actions{
    width:100%;
    justify-content:flex-start;
  }

  body.module-portal-body .sales-header-actions .header-btn{
    flex:1 1 150px;
    min-width:0;
  }

  body.module-portal-body .portal-panel.module-page-shell > .erp-module-content{
    padding:16px;
  }

  body.module-portal-body .module-portal-menu{
    grid-template-columns:1fr;
  }
}

/* =========================
   OFFICIALS MODERN DASHBOARD
========================= */
.module-officials-body .official-dashboard-shell{
  display:grid !important;
  gap:14px;
  padding:16px;
  border-radius:8px;
  background:#fff;
}

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

.module-officials-body .official-kpi-card{
  position:relative;
  min-height:104px;
  padding:16px 18px 14px 76px !important;
  border-radius:8px !important;
  overflow:hidden;
}

.module-officials-body .official-kpi-card::before{
  content:attr(data-icon);
  position:absolute;
  left:18px;
  top:22px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(15, 23, 42, .12);
}

.module-officials-body .official-kpi-card::after{
  content:"";
  position:absolute;
  right:14px;
  top:14px;
  width:9px;
  height:9px;
  border-radius:999px;
}

.module-officials-body .official-kpi-card[data-accent="blue"]::before{ background:linear-gradient(135deg, #1684ff, #0757df); }
.module-officials-body .official-kpi-card[data-accent="green"]::before{ background:linear-gradient(135deg, #22c55e, #15803d); }
.module-officials-body .official-kpi-card[data-accent="orange"]::before{ background:linear-gradient(135deg, #fb923c, #ea580c); }
.module-officials-body .official-kpi-card[data-accent="violet"]::before{ background:linear-gradient(135deg, #a855f7, #7c3aed); }

.module-officials-body .official-kpi-card[data-accent="blue"]::after{ background:#0b65f0; box-shadow:0 0 0 6px rgba(11, 101, 240, .09); }
.module-officials-body .official-kpi-card[data-accent="green"]::after{ background:#16a34a; box-shadow:0 0 0 6px rgba(22, 163, 74, .10); }
.module-officials-body .official-kpi-card[data-accent="orange"]::after{ background:#f97316; box-shadow:0 0 0 6px rgba(249, 115, 22, .10); }
.module-officials-body .official-kpi-card[data-accent="violet"]::after{ background:#8b5cf6; box-shadow:0 0 0 6px rgba(139, 92, 246, .10); }

.module-officials-body .official-kpi-card .kpi-title{
  font-size:11px;
  letter-spacing:.04em;
}

.module-officials-body .official-kpi-card .kpi-value{
  margin-top:6px;
  font-size:22px;
  color:#062c61;
}

.module-officials-body .official-kpi-card .kpi-sub{
  margin-top:4px;
  font-size:12px;
  color:#52657d;
}

.module-officials-body .official-filter-card{
  padding:14px;
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 22px rgba(15, 23, 42, .04);
}

.module-officials-body .official-filter-grid{
  display:grid;
  grid-template-columns:minmax(230px, 1.35fr) repeat(3, minmax(145px, 1fr)) auto;
  gap:10px;
  align-items:end;
}

.module-officials-body .official-filter-grid label{
  margin-bottom:5px;
  color:#52657d;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.module-officials-body .official-filter-grid input,
.module-officials-body .official-filter-grid select{
  min-height:38px;
  border-radius:8px;
  border:1px solid #d6e1ef;
  background:#fff;
  font-size:13px;
}

.module-officials-body .official-filter-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.module-officials-body .official-filter-actions .header-btn{
  min-height:38px;
  padding:8px 14px;
}

.module-officials-body .official-category-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.module-officials-body .official-category-card{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr);
  grid-template-rows:auto auto;
  gap:12px;
  min-height:122px;
  padding:16px;
  border-radius:8px;
  cursor:pointer;
}

.module-officials-body .official-category-card:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(15, 23, 42, .08);
}

.module-officials-body .official-category-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(15, 23, 42, .12);
}

.module-officials-body .official-category-card[data-accent="blue"] .official-category-icon{ background:linear-gradient(135deg, #1684ff, #0757df); }
.module-officials-body .official-category-card[data-accent="green"] .official-category-icon{ background:linear-gradient(135deg, #22c55e, #15803d); }
.module-officials-body .official-category-card[data-accent="orange"] .official-category-icon{ background:linear-gradient(135deg, #fb923c, #ea580c); }
.module-officials-body .official-category-card[data-accent="violet"] .official-category-icon{ background:linear-gradient(135deg, #a855f7, #7c3aed); }

.module-officials-body .official-category-copy h4{
  margin:0 0 6px;
  color:#062c61;
  font-size:16px;
  line-height:1.2;
}

.module-officials-body .official-category-copy p{
  color:#52657d;
  font-size:12px;
  line-height:1.35;
}

.module-officials-body .official-category-footer{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:4px;
}

.module-officials-body .official-card-arrow{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#eef4ff;
  color:#0958e8;
  font-size:13px;
  font-weight:900;
}

.module-officials-body .official-directory-header{
  margin-top:2px;
  border-bottom:1px solid #e4ebf5;
}

.module-officials-body .erp-record-list{
  display:grid;
  gap:12px;
}

.module-officials-body .official-record-card{
  position:relative;
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 22px rgba(15, 23, 42, .045);
}

.module-officials-body .official-record-card::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  background:#0b65f0;
}

.module-officials-body .official-record-card[data-accent="green"]::before{ background:#16a34a; }
.module-officials-body .official-record-card[data-accent="orange"]::before{ background:#f97316; }
.module-officials-body .official-record-card[data-accent="red"]::before{ background:#ef4444; }
.module-officials-body .official-record-card[data-accent="violet"]::before{ background:#8b5cf6; }

.module-officials-body .official-record-summary{
  display:grid;
  grid-template-columns:42px minmax(0, 1fr) auto auto auto;
  gap:10px;
  align-items:center;
}

.module-officials-body .official-record-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:linear-gradient(135deg, #1684ff, #0757df);
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 20px rgba(15, 23, 42, .12);
}

.module-officials-body .official-record-card[data-accent="green"] .official-record-icon{ background:linear-gradient(135deg, #22c55e, #15803d); }
.module-officials-body .official-record-card[data-accent="orange"] .official-record-icon{ background:linear-gradient(135deg, #fb923c, #ea580c); }
.module-officials-body .official-record-card[data-accent="red"] .official-record-icon{ background:linear-gradient(135deg, #fb7185, #dc2626); }
.module-officials-body .official-record-card[data-accent="violet"] .official-record-icon{ background:linear-gradient(135deg, #a855f7, #7c3aed); }

.module-officials-body .official-record-title-block h4{
  margin:0 0 3px;
  color:#062c61;
  font-size:16px;
  font-weight:900;
}

.module-officials-body .official-record-title-block p{
  margin:0;
  color:#52657d;
  font-size:12px;
  line-height:1.35;
}

.module-officials-body .official-status-pill{
  white-space:nowrap;
  border:0;
  border-radius:999px;
  padding:6px 11px;
  font-size:11px;
  font-weight:900;
}

.module-officials-body .official-status-pill.done{
  background:#dcfce7;
  color:#15803d;
}

.module-officials-body .official-status-pill.pending{
  background:#fff1d9;
  color:#c25a00;
}

.module-officials-body .official-status-pill.failed{
  background:#ffe4e8;
  color:#dc2626;
}

.module-officials-body .official-more-btn{
  min-width:38px;
  padding:8px 10px;
}

.module-officials-body .official-record-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:0;
  margin-top:0;
  border:1px solid #e4ebf5;
  border-radius:8px;
  overflow:hidden;
}

.module-officials-body .official-record-grid div{
  min-width:0;
  padding:10px 12px;
  border:0;
  border-right:1px solid #e4ebf5;
  border-radius:0;
  background:#fbfdff;
}

.module-officials-body .official-record-grid div:last-child{
  border-right:0;
}

.module-officials-body .official-record-grid strong,
.module-officials-body .official-record-timeline strong{
  color:#63748b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.module-officials-body .official-record-grid span,
.module-officials-body .official-record-timeline span{
  color:#092a55;
  font-size:12px;
  font-weight:800;
  line-height:1.35;
}

.module-officials-body .official-record-timeline{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0;
  border:1px solid #e7edf5;
  border-radius:8px;
  background:#fff;
}

.module-officials-body .official-record-timeline div{
  display:grid;
  gap:4px;
  min-width:0;
  padding:10px 12px;
  border-right:1px solid #e7edf5;
}

.module-officials-body .official-record-timeline div:last-child{
  border-right:0;
}

.module-officials-body .official-record-action-menu{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  padding-top:2px;
}

.module-officials-body .official-record-action-menu .header-btn{
  min-height:32px;
  padding:7px 10px;
  font-size:12px;
}

.module-officials-body .sales-header-actions .header-btn,
.module-officials-body .official-filter-actions .header-btn,
.module-officials-body .official-record-summary .header-btn,
.module-officials-body .official-record-action-menu .header-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.module-officials-body .sales-header-actions .header-btn::before,
.module-officials-body .official-filter-actions .header-btn::before,
.module-officials-body .official-record-summary .official-open-btn::before,
.module-officials-body .official-record-action-menu .header-btn::before{
  width:22px;
  height:22px;
  min-width:22px;
  display:inline-grid;
  place-items:center;
  border-radius:7px;
  color:#fff;
  font-size:9px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 16px rgba(15, 23, 42, .12);
}

.module-officials-body .sales-header-actions a.header-btn[href="../index.html"]::before{
  content:"MP";
  background:linear-gradient(135deg, #64748b, #334155);
}

.module-officials-body #officialNewRecordBtn::before{
  content:"+";
  background:linear-gradient(135deg, #1684ff, #0757df);
}

.module-officials-body #officialRefreshBtn::before{
  content:"RF";
  background:linear-gradient(135deg, #06b6d4, #0e7490);
}

.module-officials-body #officialApplyFilterBtn::before{
  content:"FL";
  background:linear-gradient(135deg, #6366f1, #3730a3);
}

.module-officials-body #officialResetFilterBtn::before{
  content:"RS";
  background:linear-gradient(135deg, #64748b, #334155);
}

.module-officials-body .official-record-summary .official-open-btn::before{
  content:"VI";
  background:linear-gradient(135deg, #1684ff, #0757df);
}

.module-officials-body .official-record-action-menu .header-btn:nth-child(1)::before{
  content:"ED";
  background:linear-gradient(135deg, #fb923c, #ea580c);
}

.module-officials-body .official-record-action-menu .header-btn:nth-child(2)::before{
  content:"FU";
  background:linear-gradient(135deg, #22c55e, #15803d);
}

.module-officials-body .official-record-action-menu .header-btn:nth-child(3)::before{
  content:"DL";
  background:linear-gradient(135deg, #ef4444, #b91c1c);
}

.module-officials-body .official-record-action-menu .header-btn:nth-child(4)::before{
  content:"HS";
  background:linear-gradient(135deg, #a855f7, #7c3aed);
}

@media (max-width: 1180px){
  .module-officials-body .official-kpi-grid,
  .module-officials-body .official-category-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .module-officials-body .official-filter-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .module-officials-body .official-filter-actions{
    justify-content:flex-start;
  }

  .module-officials-body .official-record-grid,
  .module-officials-body .official-record-timeline{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .module-officials-body .official-record-grid div:nth-child(3n),
  .module-officials-body .official-record-timeline div:nth-child(3n){
    border-right:0;
  }
}

@media (max-width: 760px){
  .module-officials-body .official-kpi-grid,
  .module-officials-body .official-category-grid,
  .module-officials-body .official-filter-grid,
  .module-officials-body .official-record-grid,
  .module-officials-body .official-record-timeline{
    grid-template-columns:1fr;
  }

  .module-officials-body .official-record-summary{
    grid-template-columns:42px minmax(0, 1fr);
  }

  .module-officials-body .official-status-pill,
  .module-officials-body .official-record-summary .header-btn{
    grid-column:1 / -1;
    justify-self:flex-start;
  }

  .module-officials-body .official-record-grid div,
  .module-officials-body .official-record-timeline div{
    border-right:0;
    border-bottom:1px solid #e4ebf5;
  }

  .module-officials-body .official-record-grid div:last-child,
  .module-officials-body .official-record-timeline div:last-child{
    border-bottom:0;
  }
}

/* =========================
   GALLERY MODERN DASHBOARD
========================= */
.module-gallery-body .gallery-dashboard-shell{
  display:grid !important;
  gap:14px;
  padding:16px;
  border-radius:8px;
  background:#fff;
}

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

.module-gallery-body .gallery-kpi-card{
  position:relative;
  min-height:104px;
  padding:16px 18px 14px 76px !important;
  border-radius:8px !important;
  overflow:hidden;
}

.module-gallery-body .gallery-kpi-card::before{
  content:attr(data-icon);
  position:absolute;
  left:18px;
  top:22px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(15, 23, 42, .12);
}

.module-gallery-body .gallery-kpi-card::after{
  content:"";
  position:absolute;
  right:14px;
  top:14px;
  width:9px;
  height:9px;
  border-radius:999px;
}

.module-gallery-body .gallery-kpi-card[data-accent="blue"]::before{ background:linear-gradient(135deg, #1684ff, #0757df); }
.module-gallery-body .gallery-kpi-card[data-accent="green"]::before{ background:linear-gradient(135deg, #22c55e, #15803d); }
.module-gallery-body .gallery-kpi-card[data-accent="orange"]::before{ background:linear-gradient(135deg, #fb923c, #ea580c); }
.module-gallery-body .gallery-kpi-card[data-accent="violet"]::before{ background:linear-gradient(135deg, #a855f7, #7c3aed); }
.module-gallery-body .gallery-kpi-card[data-accent="blue"]::after{ background:#0b65f0; box-shadow:0 0 0 6px rgba(11, 101, 240, .09); }
.module-gallery-body .gallery-kpi-card[data-accent="green"]::after{ background:#16a34a; box-shadow:0 0 0 6px rgba(22, 163, 74, .10); }
.module-gallery-body .gallery-kpi-card[data-accent="orange"]::after{ background:#f97316; box-shadow:0 0 0 6px rgba(249, 115, 22, .10); }
.module-gallery-body .gallery-kpi-card[data-accent="violet"]::after{ background:#8b5cf6; box-shadow:0 0 0 6px rgba(139, 92, 246, .10); }

.module-gallery-body .gallery-filter-card{
  padding:14px;
  border:1px solid #dfe7f1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 22px rgba(15, 23, 42, .04);
}

.module-gallery-body .gallery-filter-grid{
  display:grid;
  grid-template-columns:minmax(240px, 1.35fr) repeat(3, minmax(150px, 1fr)) auto;
  gap:10px;
  align-items:end;
}

.module-gallery-body .gallery-filter-grid label{
  margin-bottom:5px;
  color:#52657d;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.module-gallery-body .gallery-filter-grid input,
.module-gallery-body .gallery-filter-grid select{
  min-height:38px;
  border-radius:8px;
  border:1px solid #d6e1ef;
  background:#fff;
  font-size:13px;
}

.module-gallery-body .gallery-filter-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.module-gallery-body .gallery-directory-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(280px, 1fr));
  gap:14px;
}

.module-gallery-body .gallery-album-card{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:8px;
  background:#fff;
}

.module-gallery-body .gallery-album-card-head{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) auto auto;
  gap:10px;
  align-items:center;
}

.module-gallery-body .gallery-album-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:linear-gradient(135deg, #ec4899, #be185d);
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 20px rgba(15, 23, 42, .12);
}

.module-gallery-body .gallery-album-title h4{
  margin:0 0 3px;
  color:#062c61;
  font-size:16px;
  font-weight:900;
}

.module-gallery-body .gallery-album-title p{
  margin:0;
  color:#52657d;
  font-size:12px;
  line-height:1.35;
}

.module-gallery-body .gallery-card-more{
  min-width:38px;
  padding:8px 10px;
}

.module-gallery-body .gallery-album-meta-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.module-gallery-body .gallery-album-metrics .official-meta-pill:nth-child(1){ background:#eff6ff; color:#0757df; }
.module-gallery-body .gallery-album-metrics .official-meta-pill:nth-child(2){ background:#fff7ed; color:#ea580c; }
.module-gallery-body .gallery-album-metrics .official-meta-pill:nth-child(3){ background:#f5f3ff; color:#7c3aed; }
.module-gallery-body .gallery-album-metrics .official-meta-pill:nth-child(4){ background:#dcfce7; color:#15803d; }

.module-gallery-body .gallery-album-actions{
  display:flex;
  justify-content:flex-start;
  padding-top:2px;
}

.module-gallery-body .gallery-media-card{
  border-radius:8px;
  border-color:#dfe7f1;
  box-shadow:0 8px 22px rgba(15, 23, 42, .045);
}

.module-gallery-body .sales-header-actions .header-btn,
.module-gallery-body .gallery-filter-actions .header-btn,
.module-gallery-body .gallery-album-actions .header-btn,
.module-gallery-body .gallery-card-actions .header-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.module-gallery-body .sales-header-actions .header-btn::before,
.module-gallery-body .gallery-filter-actions .header-btn::before,
.module-gallery-body .gallery-album-actions .header-btn::before,
.module-gallery-body .gallery-card-actions .header-btn::before{
  width:22px;
  height:22px;
  min-width:22px;
  display:inline-grid;
  place-items:center;
  border-radius:7px;
  color:#fff;
  font-size:9px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 16px rgba(15, 23, 42, .12);
}

.module-gallery-body .sales-header-actions a.header-btn[href="../index.html"]::before{ content:"MP"; background:linear-gradient(135deg, #64748b, #334155); }
.module-gallery-body #galleryNewAlbumBtn::before{ content:"+"; background:linear-gradient(135deg, #1684ff, #0757df); }
.module-gallery-body #galleryUploadMediaBtn::before{ content:"UP"; background:linear-gradient(135deg, #22c55e, #15803d); }
.module-gallery-body #galleryApplyFilterBtn::before{ content:"FL"; background:linear-gradient(135deg, #6366f1, #3730a3); }
.module-gallery-body #galleryResetFilterBtn::before{ content:"RS"; background:linear-gradient(135deg, #64748b, #334155); }
.module-gallery-body .gallery-open-btn::before{ content:"OP"; background:linear-gradient(135deg, #1684ff, #0757df); }
.module-gallery-body .gallery-card-actions .header-btn:nth-child(1)::before{ content:"ED"; background:linear-gradient(135deg, #fb923c, #ea580c); }
.module-gallery-body .gallery-card-actions .header-btn:nth-child(2)::before{ content:"VR"; background:linear-gradient(135deg, #a855f7, #7c3aed); }
.module-gallery-body .gallery-card-actions .header-btn:nth-child(3)::before{ content:"PV"; background:linear-gradient(135deg, #22c55e, #15803d); }

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

  .module-gallery-body .gallery-filter-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .module-gallery-body .gallery-kpi-grid,
  .module-gallery-body .gallery-directory-grid,
  .module-gallery-body .gallery-filter-grid,
  .module-gallery-body .gallery-album-meta-grid{
    grid-template-columns:1fr;
  }

  .module-gallery-body .gallery-album-card-head{
    grid-template-columns:44px minmax(0, 1fr);
  }

  .module-gallery-body .gallery-album-card-head .official-meta-pill,
  .module-gallery-body .gallery-card-more{
    grid-column:1 / -1;
    justify-self:flex-start;
  }
}

/* =========================
   MAIN DASHBOARD MODERN VIEW
========================= */
.main-modern-dashboard-body > header.text-center{
  display:none;
}

/* Do not expose the owner identity or unrestricted navigation while the
   subscriber session and permissions are still being restored. */
.main-dashboard-body.auth-context-pending{
  overflow:hidden;
}

.main-dashboard-body.auth-context-pending .admin-shell{
  visibility:hidden;
}

.main-dashboard-body.auth-context-pending::before{
  content:"Loading your ERP workspace…";
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  background:#f8fafc;
  color:#0b3f91;
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
}

.main-modern-dashboard-body .admin-shell{
  max-width:none;
  width:100%;
  padding:0;
}

.main-modern-dashboard-body .portal-panel.module-page-shell{
  min-height:100vh;
  width:100%;
  max-width:none;
  margin:0;
  padding:0 0 28px;
  border:0;
  border-radius:0;
  background:#f8fafc;
  box-shadow:none;
}

.main-modern-dashboard-body .portal-panel.module-page-shell > .sales-header{
  position:sticky;
  top:0;
  z-index:20;
  min-height:78px;
  margin:0;
  padding:14px 28px;
  border:0;
  border-bottom:1px solid #e4ebf5;
  border-radius:0;
  background:rgba(255,255,255,.96);
  box-shadow:none;
  backdrop-filter:blur(10px);
}

.main-modern-dashboard-body .main-hero-logo-wrap{
  width:58px;
  height:58px;
  min-width:58px;
  border-radius:8px;
}

.main-modern-dashboard-body .main-header-search-shell{
  flex:1 1 420px;
  max-width:560px;
  min-width:260px;
  height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border:1px solid #d6e1ef;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15, 23, 42, .035);
}

.main-modern-dashboard-body .main-header-search-icon{
  width:24px;
  height:24px;
  min-width:24px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:linear-gradient(135deg, #1684ff, #0757df);
  color:#fff;
  font-size:8px;
  font-weight:900;
}

.main-modern-dashboard-body .main-header-search{
  width:100%;
  border:0;
  outline:0;
  color:#0d1b35;
  font-size:13px;
  font-weight:700;
}

.main-modern-dashboard-body .dashboard-utility-card{
  display:none;
}

.main-modern-dashboard-body .dashboard-overview-topbar,
.main-modern-dashboard-body #mainExecutiveDashboard,
.main-modern-dashboard-body .main-workspace-summary-grid{
  margin-left:28px;
  margin-right:28px;
}

.main-modern-dashboard-body .dashboard-overview-topbar{
  margin-top:22px;
  margin-bottom:12px;
}

.main-modern-dashboard-body #mainExecutiveDashboard{
  border-radius:8px;
  padding:16px;
  box-shadow:0 8px 22px rgba(15, 23, 42, .045);
}

.main-modern-dashboard-body .main-executive-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.main-modern-dashboard-body .main-executive-kpi-card,
.main-modern-dashboard-body .main-workspace-card{
  position:relative;
  min-height:112px;
  padding:18px 18px 14px 84px !important;
  border-radius:8px !important;
  overflow:hidden;
}

.main-modern-dashboard-body .main-executive-kpi-card::before,
.main-modern-dashboard-body .main-workspace-card::before{
  content:attr(data-icon);
  position:absolute;
  left:18px;
  top:22px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(15, 23, 42, .12);
}

.main-modern-dashboard-body [data-accent="blue"]::before{ background:linear-gradient(135deg, #1684ff, #0757df); }
.main-modern-dashboard-body [data-accent="green"]::before{ background:linear-gradient(135deg, #22c55e, #15803d); }
.main-modern-dashboard-body [data-accent="orange"]::before{ background:linear-gradient(135deg, #fb923c, #ea580c); }
.main-modern-dashboard-body [data-accent="violet"]::before{ background:linear-gradient(135deg, #a855f7, #7c3aed); }
.main-modern-dashboard-body [data-accent="amber"]::before{ background:linear-gradient(135deg, #fbbf24, #d97706); }
.main-modern-dashboard-body [data-accent="cyan"]::before{ background:linear-gradient(135deg, #06b6d4, #0e7490); }
.main-modern-dashboard-body [data-accent="teal"]::before{ background:linear-gradient(135deg, #14b8a6, #0f766e); }
.main-modern-dashboard-body [data-accent="slate"]::before{ background:linear-gradient(135deg, #64748b, #334155); }
.main-modern-dashboard-body [data-accent="rose"]::before{ background:linear-gradient(135deg, #fb7185, #e11d48); }

.main-modern-dashboard-body .main-executive-kpi-card .kpi-value,
.main-modern-dashboard-body .main-workspace-card .kpi-value{
  color:#061f49;
  font-size:24px;
}

.main-modern-dashboard-body .module-grid .module-card{
  border-radius:8px;
}

.main-modern-dashboard-body .main-donut-visual{
  width:190px;
  height:190px;
}

.main-modern-dashboard-body .main-donut-core{
  width:112px;
  height:112px;
}

.main-modern-dashboard-body .main-workspace-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:16px;
}

.main-modern-dashboard-body .main-workspace-card .btn{
  min-height:34px;
  margin-top:10px;
  border-radius:8px;
  font-size:12px;
}

.main-modern-dashboard-body .main-header-button-group .header-btn,
.main-modern-dashboard-body .dashboard-overview-actions .filter-btn,
.main-modern-dashboard-body .main-module-actions .filter-btn{
  border-radius:8px;
}

@media (max-width: 1180px){
  .main-modern-dashboard-body .main-executive-kpi-grid,
  .main-modern-dashboard-body .main-workspace-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .main-modern-dashboard-body .portal-panel.module-page-shell > .sales-header{
    align-items:flex-start;
    flex-wrap:wrap;
  }
}

@media (max-width: 760px){
  .main-modern-dashboard-body .main-executive-kpi-grid,
  .main-modern-dashboard-body .main-workspace-summary-grid{
    grid-template-columns:1fr;
  }

  .main-modern-dashboard-body .dashboard-overview-topbar,
  .main-modern-dashboard-body #mainExecutiveDashboard,
  .main-modern-dashboard-body .main-workspace-summary-grid{
    margin-left:16px;
    margin-right:16px;
  }

  .main-modern-dashboard-body .main-header-search-shell{
    flex-basis:100%;
    max-width:none;
  }
}

/* =========================
   MAIN DASHBOARD TEMPLATE VIEW
========================= */
.main-modern-dashboard-body .dashboard-overview-topbar,
.main-modern-dashboard-body #mainExecutiveDashboard,
.main-modern-dashboard-body .main-workspace-summary-grid{
  display:none !important;
}

.main-modern-dashboard-body .dashboard-utility-card{
  display:none !important;
}

.main-modern-dashboard-body.erp-global-sidebar-body .portal-panel > .sales-header{
  min-height:98px;
  padding:18px 28px;
  background:#fff;
}

.main-modern-dashboard-body .sales-header-left{
  gap:14px;
}

.main-modern-dashboard-body .main-hero-logo-wrap{
  width:58px;
  height:58px;
  min-width:58px;
  border-radius:8px;
  background:#fff;
}

.main-modern-dashboard-body .main-hero-logo{
  width:46px;
  height:46px;
  object-fit:contain;
}

.main-modern-dashboard-body .main-hero-kicker{
  color:#0b5fe8;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.main-modern-dashboard-body .sales-header-info .section-title{
  margin:2px 0 4px;
  color:#0b1f45;
  font-size:15px;
  font-weight:900;
}

.main-modern-dashboard-body .sales-header-info .section-subtitle{
  color:#32476b;
  font-size:13px;
  font-weight:700;
}

.main-modern-dashboard-body .main-header-search-shell{
  height:44px;
  max-width:560px;
  border-radius:8px;
  background:#fff;
}

.main-modern-dashboard-body .main-header-search-icon{
  background:#f2f7ff;
  color:#0b5fe8;
  font-size:9px;
}

.main-modern-dashboard-body .main-notification-btn{
  width:46px;
  height:46px;
  border-radius:8px;
}

.main-modern-dashboard-body .main-profile-chip{
  min-height:60px;
  border-radius:8px;
  background:#f7fbff;
}

.main-modern-dashboard-body .main-header-button-group{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.main-modern-dashboard-body .main-header-button-group .header-btn{
  min-height:42px;
  padding:0 18px;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 20px rgba(15, 23, 42, .04);
}

.main-modern-dashboard-body .main-header-button-group .header-btn.primary{
  background:#0757df;
  color:#fff;
  border-color:#0757df;
}

.main-date-pill{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  border:1px solid #d8e4f2;
  border-radius:8px;
  color:#0d2a55;
  background:#fff;
  font-size:13px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(15, 23, 42, .04);
}

.main-template-dashboard{
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* Compact main dashboard header: identity, search, and actions in one row. */
@media (min-width: 1181px){
  .main-modern-dashboard-body.erp-global-sidebar-body .portal-panel > .sales-header.main-dashboard-hero{
    min-height:72px;
    display:grid;
    grid-template-columns:minmax(300px, 1.05fr) minmax(260px, .8fr) auto;
    align-items:center;
    gap:18px;
    padding:10px 20px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .sales-header-left{
    min-width:0;
    gap:10px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .main-hero-logo-wrap{
    width:44px;
    height:44px;
    min-width:44px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .main-hero-logo{
    width:36px;
    height:36px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .main-hero-kicker,
  .main-modern-dashboard-body .main-dashboard-hero .section-subtitle,
  .main-modern-dashboard-body .main-dashboard-hero #mainApiStatus,
  .main-modern-dashboard-body .main-dashboard-hero .main-date-pill{
    display:none !important;
  }

  .main-modern-dashboard-body .main-dashboard-hero .sales-header-info .section-title{
    margin:0;
    overflow:hidden;
    color:#0b1f45;
    font-size:16px;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .main-modern-dashboard-body .main-dashboard-hero .main-header-search-shell{
    width:100%;
    min-width:0;
    max-width:none;
    height:40px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .sales-header-actions{
    display:flex;
    flex-wrap:nowrap;
    gap:7px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .main-user-pod{
    min-width:150px;
    min-height:40px;
    padding:4px 9px;
    border-radius:9px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .settings-user-avatar{
    width:32px;
    height:32px;
    min-width:32px;
    font-size:12px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .main-user-pod-label{
    display:none;
  }

  .main-modern-dashboard-body .main-dashboard-hero .settings-user-pill-text strong,
  .main-modern-dashboard-body .main-dashboard-hero .settings-user-pill-text span{
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .main-modern-dashboard-body .main-dashboard-hero .main-header-button-group{
    flex-wrap:nowrap;
    gap:7px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .main-header-button-group .header-btn,
  .main-modern-dashboard-body .main-dashboard-hero .header-notification-wrap .header-btn{
    min-width:0;
    min-height:38px;
    height:38px;
    padding:0 11px;
    white-space:nowrap;
  }
}

/* Mobile ERP: compact brand, horizontal module strip, and stacked header. */
@media (max-width: 760px){
  body.erp-global-sidebar-body{
    overflow-x:hidden;
  }

  body.erp-global-sidebar-body .admin-shell{
    width:100%;
    padding-left:0;
  }

  .erp-global-side-menu{
    position:sticky;
    top:0;
    z-index:45;
    width:100%;
    gap:8px;
    padding:8px 10px 10px;
    background:rgba(255,255,255,.98);
    box-shadow:0 4px 14px rgba(15,23,42,.07);
  }

  .erp-global-menu-brand{
    grid-template-columns:36px minmax(0,1fr);
    gap:8px;
    padding:0 2px 7px;
  }

  .erp-global-menu-logo{
    width:36px;
    height:36px;
    border-radius:9px;
    font-size:16px;
  }

  .erp-global-menu-brand strong{ font-size:14px; }
  .erp-global-menu-brand span{ margin-top:0; font-size:10px; }
  .erp-global-side-menu .erp-global-menu-label,
  .erp-global-menu-help{ display:none; }

  .erp-global-side-menu .erp-global-menu-group{
    display:flex;
    flex-wrap:nowrap;
    gap:7px;
    overflow-x:auto;
    padding:1px 0 5px;
    scrollbar-width:thin;
    scroll-snap-type:x proximity;
  }

  .erp-global-side-menu .erp-global-menu-link{
    flex:0 0 auto;
    width:auto;
    min-width:112px;
    min-height:40px;
    padding:0 10px;
    scroll-snap-align:start;
  }

  body.erp-global-sidebar-body .portal-panel > .sales-header.main-dashboard-hero{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .sales-header-left,
  .main-modern-dashboard-body .main-dashboard-hero .main-header-search-shell,
  .main-modern-dashboard-body .main-dashboard-hero .sales-header-actions{
    width:100%;
    max-width:none;
  }

  .main-modern-dashboard-body .main-dashboard-hero .section-subtitle,
  .main-modern-dashboard-body .main-dashboard-hero #mainApiStatus,
  .main-modern-dashboard-body .main-dashboard-hero .main-date-pill,
  .main-modern-dashboard-body .main-dashboard-hero .main-user-pod-label{
    display:none !important;
  }

  .main-modern-dashboard-body .main-dashboard-hero .sales-header-actions{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .main-modern-dashboard-body .main-dashboard-hero .main-user-pod{
    min-width:0;
    flex:1 1 150px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .main-header-button-group{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }

  .main-modern-dashboard-body .main-dashboard-hero .main-header-button-group .header-btn{
    min-width:0;
    padding:0 8px;
  }

  .main-template-dashboard{ padding:14px; }
}

.main-modern-dashboard-body.erp-global-sidebar-body .portal-panel > .main-template-dashboard{
  margin-left:0;
  margin-right:0;
}

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

.main-template-kpi-card{
  position:relative;
  min-height:118px;
  display:grid;
  grid-template-columns:64px minmax(0, 1fr) auto;
  align-items:center;
  gap:14px;
  padding:20px;
  border:1px solid #dbe7f4;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15, 23, 42, .045);
}

.main-template-kpi-card::before{
  content:attr(data-icon);
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  grid-row:1 / span 2;
  border-radius:8px;
  color:#fff;
  font-size:14px;
  font-weight:900;
  box-shadow:0 14px 26px rgba(15, 23, 42, .12);
}

.main-template-kpi-card[data-accent="blue"]::before{ background:linear-gradient(135deg, #1684ff, #0757df); }
.main-template-kpi-card[data-accent="green"]::before{ background:linear-gradient(135deg, #22c55e, #15803d); }
.main-template-kpi-card[data-accent="orange"]::before{ background:linear-gradient(135deg, #fb923c, #ea580c); }
.main-template-kpi-card[data-accent="violet"]::before{ background:linear-gradient(135deg, #a855f7, #7c3aed); }
.main-template-kpi-card[data-accent="rose"]::before{ background:linear-gradient(135deg, #fb7185, #e11d48); }

.main-template-kpi-card::after{
  content:"";
  position:absolute;
  right:16px;
  top:16px;
  width:16px;
  height:16px;
  border:5px solid #eaf2ff;
  border-radius:50%;
  background:#1d6df2;
}

.main-template-kpi-card[data-accent="green"]::after{ background:#16a34a; border-color:#dcfce7; }
.main-template-kpi-card[data-accent="orange"]::after{ background:#f97316; border-color:#ffedd5; }
.main-template-kpi-card[data-accent="violet"]::after{ background:#8b5cf6; border-color:#ede9fe; }
.main-template-kpi-card[data-accent="rose"]::after{ background:#ef4444; border-color:#ffe4e6; }

.main-template-kpi-card div{
  min-width:0;
}

.main-template-kpi-card span{
  display:block;
  color:#42597c;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

.main-template-kpi-card strong{
  display:block;
  margin-top:8px;
  color:#061f49;
  font-size:28px;
  line-height:1;
  font-weight:900;
}

.main-template-kpi-card em{
  align-self:start;
  color:#243c66;
  font-size:12px;
  font-style:normal;
  font-weight:900;
  text-transform:uppercase;
}

.main-template-kpi-card small{
  grid-column:2 / 4;
  display:flex;
  align-items:center;
  gap:10px;
  color:#42597c;
  font-size:12px;
  font-weight:700;
}

.main-template-kpi-card small b{
  color:#16a34a;
  font-weight:900;
}

.main-template-analytics-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(320px, 1fr) minmax(320px, .9fr);
  gap:16px;
}

.main-template-bottom-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:16px;
}

.main-template-panel{
  min-width:0;
  padding:18px;
  border:1px solid #dbe7f4;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15, 23, 42, .045);
}

.main-template-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid #e6eef8;
}

.main-template-panel h3{
  margin:0;
  color:#0b2f62;
  font-size:17px;
  font-weight:900;
  text-transform:uppercase;
}

.main-template-panel p{
  margin:4px 0 0;
  color:#32476b;
  font-size:13px;
  font-weight:700;
}

.main-template-select,
.main-template-link{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border:1px solid #d8e4f2;
  border-radius:8px;
  background:#fff;
  color:#0757df;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

.main-sales-overview-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  padding:18px 0 6px;
}

.main-sales-overview-stats div{
  min-height:62px;
  padding-right:14px;
  border-right:1px solid #dbe7f4;
}

.main-sales-overview-stats div:last-child{
  border-right:0;
}

.main-sales-overview-stats span,
.main-sales-overview-stats em{
  display:block;
  color:#0b5fe8;
  font-size:12px;
  font-style:normal;
  font-weight:900;
}

.main-sales-overview-stats strong{
  display:inline-block;
  margin-top:8px;
  color:#0b2f62;
  font-size:24px;
  font-weight:900;
}

.main-template-line-chart{
  height:250px;
  margin-top:8px;
}

.main-template-line-chart svg{
  width:100%;
  height:100%;
  display:block;
}

.main-template-chart-grid line{
  stroke:#e5edf7;
  stroke-width:1;
}

.main-template-line-chart text{
  fill:#42597c;
  font-size:12px;
  font-weight:800;
}

.main-template-donut{
  min-height:270px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:18px;
}

.main-template-donut-visual{
  width:220px;
  height:220px;
  justify-self:center;
  display:grid;
  place-items:center;
  border-radius:50%;
}

.main-template-donut-core{
  width:116px;
  height:116px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:50%;
  background:#fff;
  text-align:center;
}

.main-template-donut-core strong{
  color:#0b2f62;
  font-size:22px;
  font-weight:900;
}

.main-template-donut-core span,
.main-template-donut-core em{
  color:#32476b;
  font-size:11px;
  font-style:normal;
  font-weight:900;
}

.main-template-donut-legend,
.main-template-list,
.main-payment-summary-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.main-template-legend-row,
.main-template-customer-row,
.main-system-row,
.main-payment-row{
  display:grid;
  align-items:center;
  gap:10px;
  color:#0b2f62;
  font-size:13px;
  font-weight:800;
}

.main-template-legend-row{
  grid-template-columns:12px minmax(0, 1fr);
}

.main-template-legend-row strong{
  grid-column:2;
  color:#32476b;
  font-size:12px;
}

.main-template-dot{
  width:12px;
  height:12px;
  border-radius:50%;
}

.main-template-customer-row{
  grid-template-columns:42px minmax(0, 1fr) auto auto;
  min-height:50px;
}

.main-template-customer-row span,
.main-system-row span,
.main-payment-row span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#eaf2ff;
  color:#0757df;
  font-size:11px;
  font-weight:900;
}

.main-template-customer-row em,
.main-system-row em,
.main-payment-row em{
  color:#0b2f62;
  font-style:normal;
  font-weight:900;
}

.main-template-customer-row b{
  padding:4px 8px;
  border-radius:999px;
  background:#eaf2ff;
  color:#0757df;
  font-size:11px;
}

.main-template-table{
  padding-top:8px;
}

.main-template-table-head,
.main-template-table-row{
  display:grid;
  grid-template-columns:1fr 1.2fr .9fr .9fr .8fr;
  gap:12px;
  align-items:center;
}

.main-template-table-head{
  min-height:42px;
  color:#42597c;
  font-size:12px;
  font-weight:900;
  border-bottom:1px solid #e6eef8;
}

.main-template-table-row{
  min-height:54px;
  border-bottom:1px solid #edf3fb;
  color:#0b2f62;
  font-size:13px;
  font-weight:800;
}

.main-template-table-row a{
  color:#0757df;
  font-weight:900;
  text-decoration:none;
}

.main-template-status{
  justify-self:start;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2f7;
  color:#42597c;
  font-style:normal;
  font-size:12px;
  font-weight:900;
}

.main-template-status.paid{
  background:#dcfce7;
  color:#15803d;
}

.main-template-status.unpaid{
  background:#ffe4e6;
  color:#dc2626;
}

.main-template-status.partial{
  background:#ffedd5;
  color:#c2410c;
}

.main-template-status.cancelled{
  background:#e2e8f0;
  color:#475569;
}

.main-payment-row{
  grid-template-columns:42px minmax(0, 1fr) auto;
  min-height:58px;
  padding-bottom:12px;
  border-bottom:1px solid #edf3fb;
}

.main-payment-row[data-accent="green"] span{ background:#dcfce7; color:#15803d; }
.main-payment-row[data-accent="orange"] span{ background:#ffedd5; color:#ea580c; }
.main-payment-row[data-accent="blue"] span{ background:#eaf2ff; color:#0757df; }

.main-system-row{
  grid-template-columns:42px minmax(0, 1fr) auto;
  min-height:48px;
  padding-bottom:10px;
  border-bottom:1px solid #edf3fb;
}

.main-system-row[data-accent="green"] span{ background:#dcfce7; color:#15803d; }
.main-system-row[data-accent="blue"] span{ background:#eaf2ff; color:#0757df; }
.main-system-row[data-accent="violet"] span{ background:#ede9fe; color:#7c3aed; }
.main-system-row[data-accent="rose"] span{ background:#ffe4e6; color:#dc2626; }

.dashboard-template-menu{
  border-right:1px solid #dde8f5;
  background:#fff;
}

.dashboard-template-menu .erp-global-menu-brand{
  padding-bottom:16px;
  border-bottom:1px solid #e6eef8;
}

.dashboard-template-menu .erp-global-menu-logo{
  width:54px;
  height:54px;
  border-radius:8px;
}

.dashboard-template-menu .erp-global-menu-label{
  margin-top:16px;
  padding:0 10px;
  color:#526987;
  letter-spacing:.04em;
}

.dashboard-template-menu .erp-global-menu-group{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  margin-top:8px;
}

.dashboard-template-menu .erp-global-menu-link{
  min-height:42px;
  width:100%;
  justify-content:flex-start;
  border-color:transparent;
  background:#fff;
  box-shadow:none;
  color:#071f44;
  font-size:13px;
}

.dashboard-template-menu .erp-global-menu-link::before{
  content:attr(data-menu-icon) !important;
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:8px;
}

.dashboard-template-menu .erp-global-menu-link.active,
.dashboard-template-menu .erp-global-menu-link:hover{
  background:#edf4ff;
  color:#0757df;
  border-color:#dbeafe;
  box-shadow:inset 4px 0 0 #0757df;
}

.dashboard-template-menu .erp-global-menu-help{
  margin-top:auto;
  border-radius:8px;
}

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

  .main-template-analytics-grid,
  .main-template-bottom-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 920px){
  .main-modern-dashboard-body.erp-global-sidebar-body .portal-panel > .sales-header{
    position:relative;
    flex-wrap:wrap;
  }

  .main-template-dashboard{
    padding:18px;
  }

  .main-template-donut{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  .main-template-kpi-grid{
    grid-template-columns:1fr;
  }

  .main-template-kpi-card{
    grid-template-columns:56px minmax(0, 1fr);
  }

  .main-template-kpi-card em{
    display:none;
  }

  .main-template-kpi-card small{
    grid-column:2;
  }

  .main-sales-overview-stats,
  .main-template-table-head,
  .main-template-table-row,
  .main-template-customer-row,
  .main-payment-row,
  .main-system-row{
    grid-template-columns:1fr;
  }

  .main-template-table-head{
    display:none;
  }
}