/* CreatesOnline production admin dashboard mockup shell */
:root {
  --admin-bg: #f8fafc;
  --admin-card: #ffffff;
  --admin-card-soft: #f8fafc;
  --admin-text: #0f172a;
  --admin-muted: #64748b;
  --admin-border: #e5e7eb;
  --admin-shadow: 0 18px 42px rgba(15, 23, 42, .08);
  --admin-shadow-soft: 0 10px 24px rgba(15, 23, 42, .06);
  --admin-blue: #2563ff;
  --admin-blue-soft: rgba(37, 99, 255, .12);
  --admin-green: #22c55e;
  --admin-radius: 20px;
}

[data-theme="dark"] {
  --admin-bg: #0b1117;
  --admin-card: #111827;
  --admin-card-soft: #0f1720;
  --admin-text: #f8fafc;
  --admin-muted: #94a3b8;
  --admin-border: rgba(255,255,255,.08);
  --admin-shadow: 0 18px 46px rgba(0, 0, 0, .45);
  --admin-shadow-soft: 0 12px 28px rgba(0, 0, 0, .38);
  --admin-blue-soft: rgba(37, 99, 255, .20);
}

* { box-sizing: border-box; }
body.admin-body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(37, 99, 255, .06), transparent 30%),
    var(--admin-bg);
  color: var(--admin-text);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.admin-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 68px 220px minmax(0, 1fr);
}

.icon-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 16px 12px;
  background: var(--admin-card);
  border-inline-end: 1px solid var(--admin-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 30;
}

.brand-mark,
.rail-link,
.avatar-button,
.icon-button {
  border: 0;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: transparent;
  margin-bottom: 18px;
}
.brand-mark img { width: 34px; height: 34px; object-fit: contain; }

.rail-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.rail-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.rail-link {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--admin-muted);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.rail-link svg { width: 21px; height: 21px; }
.rail-link:hover { background: var(--admin-card-soft); color: var(--admin-text); transform: translateY(-1px); }
.rail-link.active {
  background: var(--admin-blue-soft);
  color: var(--admin-blue);
}
.rail-link:focus-visible,
.icon-button:focus-visible,
.menu-row:focus-visible,
.avatar-button:focus-visible,
.theme-chip:focus-visible,
.admin-select:focus-visible,
.mobile-toggle:focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: 2px;
}

.expanded-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 16px;
  background: var(--admin-bg);
  border-inline-end: 1px solid var(--admin-border);
  z-index: 25;
}
.expanded-card {
  height: 100%;
  padding: 18px;
  border: 1px solid var(--admin-border);
  border-radius: 18px;
  background: var(--admin-card);
  box-shadow: var(--admin-shadow-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-module-title { flex-shrink: 0; }
/* A module's item list can run longer than the viewport (e.g. ERP's 12
   modules) -- scroll inside the card instead of overflowing its rounded
   border onto the bare page background. min-height:0 is required for a
   flex child to actually shrink and scroll rather than just grow. */
.menu-list { display: grid; align-content: start; gap: 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; padding-inline-end: 2px; }
/* Thin, unobtrusive scrollbar instead of the browser's default chunky one --
   shown only while actually scrolling this list, not sitting there always-on. */
.menu-list { scrollbar-width: thin; scrollbar-color: var(--admin-border-strong, var(--admin-border)) transparent; }
.menu-list::-webkit-scrollbar { width: 6px; }
.menu-list::-webkit-scrollbar-track { background: transparent; }
.menu-list::-webkit-scrollbar-thumb { background: var(--admin-border); border-radius: 999px; }
.menu-list::-webkit-scrollbar-thumb:hover { background: var(--admin-blue); }
.menu-divider { height: 1px; background: var(--admin-border); margin: 14px 0; }
.menu-row {
  position: relative;
  min-height: 44px;
  min-width: 0;
  border-radius: 14px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--admin-text);
  text-decoration: none;
  border: 0;
  background: transparent;
  width: 100%;
  font: inherit;
  font-weight: 650;
  text-align: start;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.menu-row svg { width: 20px; height: 20px; color: currentColor; flex: 0 0 auto; }
/* The label is the flexible part -- without min-width:0 a flex child won't
   shrink below its content's natural width, which is exactly what forced a
   horizontal scrollbar onto the whole sidebar for longer module names. */
.menu-row span:not(.badge):not(.erp-arrow) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto;
}
.menu-row .chev { margin-inline-start: auto; width: 16px; height: 16px; color: var(--admin-muted); transition: transform .16s ease; }
.menu-row:hover { background: var(--admin-card-soft); transform: translateX(2px); }
:root[dir="rtl"] .menu-row:hover { transform: translateX(-2px); }
.menu-row.active {
  color: var(--admin-blue);
  background: var(--admin-blue-soft);
}
.menu-row.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 11px;
  bottom: 11px;
  width: 3px;
  border-radius: 99px;
  background: var(--admin-blue);
}
.account-panel.open .chev { transform: rotate(180deg); }
.account-submenu {
  display: none;
  margin: 8px 0 0 24px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--admin-border);
  background: var(--admin-card-soft);
}
.account-panel.open .account-submenu { display: grid; gap: 10px; }
.submenu-label {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--admin-text);
  font-weight: 650;
  font-size: 14px;
}
.submenu-label svg { width: 18px; height: 18px; color: var(--admin-muted); }
.admin-select {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 10px 11px;
  color: var(--admin-text);
  background: var(--admin-card);
}
.theme-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.theme-chip {
  border: 1px solid var(--admin-border);
  background: var(--admin-card);
  color: var(--admin-text);
  border-radius: 12px;
  padding: 9px 10px;
  font-weight: 700;
  cursor: pointer;
}
.theme-chip.active {
  background: var(--admin-text);
  color: var(--admin-card);
}

.dashboard-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  height: 72px;
  padding: 0 28px;
  border-bottom: 1px solid var(--admin-border);
  background: color-mix(in srgb, var(--admin-card) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar-left h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { flex-shrink: 0; }
.topbar-locale-select {
  height: 38px;
  max-width: 150px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--admin-border);
  background: var(--admin-card-soft);
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.topbar-locale-select:focus-visible { outline: 2px solid var(--admin-blue); outline-offset: 2px; }
@media (max-width: 620px) {
  .topbar-locale-select { max-width: 96px; font-size: 12px; padding: 0 6px; }
}
.mobile-toggle,
.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--admin-text);
}
.mobile-toggle { display: none; }
.icon-button:hover,
.mobile-toggle:hover { border-color: var(--admin-border); background: var(--admin-card-soft); }
.topbar h1 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.avatar-button {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #111827, #64748b);
  font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}
.avatar-button.active {
  background: var(--admin-blue-soft);
  color: var(--admin-blue);
  box-shadow: inset 0 0 0 2px var(--admin-blue);
}
.sidebar-module-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  margin-bottom: 12px;
  color: var(--admin-text);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -.03em;
}
.module-title-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--admin-blue-soft);
  color: var(--admin-blue);
}
.module-title-icon svg { width: 17px; height: 17px; }

.dashboard-content {
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.workspace { min-width: 0; }
.welcome h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.04em;
}
.welcome p { margin: 8px 0 24px; color: var(--admin-muted); }
.page-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.page-heading-row h2 {
  margin: 0;
  font-size: clamp(25px, 3vw, 32px);
  letter-spacing: -.04em;
}
.page-heading-row p {
  margin: 8px 0 0;
  color: var(--admin-muted);
  line-height: 1.55;
}
.primary-action,
.secondary-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 0;
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.primary-action {
  padding: 0 16px;
  background: var(--admin-blue);
  color: #fff;
}
.secondary-action {
  width: fit-content;
  padding: 0 13px;
  border: 1px solid var(--admin-border);
  background: var(--admin-card-soft);
  color: var(--admin-text);
}
.primary-action:hover,
.secondary-action:hover { filter: brightness(.96); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
}
.stat-card {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--admin-shadow-soft);
}
.stat-top { display: flex; gap: 12px; align-items: center; }
.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
}
.stat-icon svg { width: 20px; height: 20px; }
.stat-blue { background: linear-gradient(135deg, #2563ff, #60a5fa); }
.stat-green { background: linear-gradient(135deg, #22c55e, #34d399); }
.stat-purple { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.stat-orange { background: linear-gradient(135deg, #f97316, #fb7185); }
.stat-label { color: var(--admin-muted); font-size: 13px; font-weight: 700; }
.stat-value { margin-top: 4px; font-size: 22px; font-weight: 850; letter-spacing: -.04em; }
.stat-growth { margin-top: 12px; color: var(--admin-green); font-size: 13px; font-weight: 800; }
.stat-foot { color: var(--admin-muted); font-size: 13px; margin-top: 4px; }

.overview-card {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--admin-border);
  border-radius: 20px;
  background: var(--admin-card);
  box-shadow: var(--admin-shadow-soft);
}
.overview-card--modules {
  margin-top: 0;
}
.overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.overview-head p {
  margin: 7px 0 0;
  color: var(--admin-muted);
  line-height: 1.6;
}
.module-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.module-overview-card {
  padding: 20px;
  border-radius: 18px;
  background: var(--admin-card-soft);
  border: 1px solid var(--admin-border);
  display: grid;
  gap: 10px;
  scroll-margin-top: 96px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.module-overview-card:target,
.module-overview-card.overview-focus {
  border-color: rgba(37, 99, 255, .5);
  box-shadow: 0 18px 42px rgba(37, 99, 255, .18);
  transform: translateY(-2px);
}
.module-overview-card:focus-visible {
  outline: 2px solid var(--admin-blue);
  outline-offset: 3px;
}
.module-overview-card h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.03em;
}
.module-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.module-card-head strong {
  color: var(--admin-text);
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.05em;
}
.module-overview-card p {
  margin: 0;
  color: var(--admin-muted);
  line-height: 1.55;
}
.module-overview-card small {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--admin-border);
  background: var(--admin-card);
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
}
.module-overview-card a {
  width: fit-content;
  margin-top: 4px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 12px;
  background: var(--admin-blue);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}
.module-overview-card a:hover {
  filter: brightness(.95);
}
.overview-head h3 { margin: 0; font-size: 20px; }
.chart-filter {
  border: 1px solid var(--admin-border);
  background: var(--admin-card-soft);
  color: var(--admin-text);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
}
.activity-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.chart-grid path {
  fill: none;
  stroke: var(--admin-border);
  stroke-width: 1;
}
.chart-area { fill: url(#usersArea); }
.chart-line {
  fill: none;
  stroke: var(--admin-blue);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-points circle {
  fill: #bfdbfe;
  stroke: var(--admin-blue);
  stroke-width: 3;
}
.axis-labels text {
  fill: var(--admin-muted);
  font-size: 12px;
  font-weight: 700;
}
.text-link {
  color: var(--admin-blue);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}
.data-table th,
.data-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--admin-border);
  text-align: start;
  white-space: nowrap;
}
.data-table th {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 850;
}
.data-table td {
  color: var(--admin-text);
  font-size: 14px;
  font-weight: 650;
}
.person-avatar {
  width: 28px;
  height: 28px;
  margin-inline-end: 10px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #f59e0b, #fca5a5);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid currentColor;
  font-size: 12px;
  font-weight: 850;
}
.badge-blue { color: #60a5fa; background: rgba(37, 99, 255, .16); }
.badge-green { color: #34d399; background: rgba(34, 197, 94, .14); }
.badge-cyan { color: #67e8f9; background: rgba(6, 182, 212, .14); }
.badge-orange { color: #fb923c; background: rgba(249, 115, 22, .14); }
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.settings-card {
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--admin-border);
  border-radius: 18px;
  background: var(--admin-card);
  box-shadow: var(--admin-shadow-soft);
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: start;
}
.settings-card--wide { grid-column: 1 / -1; }
.settings-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  letter-spacing: -.03em;
}
.settings-card p {
  margin: 0 0 16px;
  color: var(--admin-muted);
  line-height: 1.55;
}
.theme-segmented {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  background: var(--admin-card-soft);
}
.theme-segmented button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--admin-text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.theme-segmented button.active {
  background: var(--admin-blue);
  color: #fff;
}
.legend { display: flex; gap: 18px; color: var(--admin-muted); font-size: 13px; margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.dot.sales { background: var(--admin-blue); }
.dot.orders { background: var(--admin-green); }
.chart { width: 100%; height: auto; display: block; color: var(--admin-muted); }
.grid-line { stroke: var(--admin-border); stroke-dasharray: 4 4; }
.axis-text { fill: var(--admin-muted); font-size: 12px; }

.explain-panel {
  display: grid;
  align-content: start;
  gap: 20px;
}
.doc-section {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--admin-border);
}
.doc-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--admin-text);
  color: var(--admin-card);
  font-weight: 850;
  font-size: 13px;
}
.doc-section h3 { margin: 2px 0 8px; font-size: 16px; }
.doc-section p, .doc-section li { color: var(--admin-muted); line-height: 1.55; font-size: 14px; }
.doc-section ul { margin: 0; padding-inline-start: 18px; }
.doc-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 22;
}

@media (max-width: 1180px) {
  .dashboard-content { grid-template-columns: 1fr; }
  .explain-panel { display: none; }
}

@media (max-width: 920px) {
  .admin-layout { grid-template-columns: 68px 1fr; }
  .expanded-sidebar {
    position: fixed;
    inset-inline-start: 68px;
    width: 280px;
    transform: translateX(-120%);
    transition: transform .22s ease;
    box-shadow: var(--admin-shadow);
  }
  /* The rail visually mirrors to the end side in RTL (grid direction
     follows dir automatically), but this panel leaves the grid via
     position:fixed, so its own off-screen slide direction needs an
     explicit flip -- inset-inline-start alone doesn't affect transform. */
  :root[dir="rtl"] .expanded-sidebar { transform: translateX(120%); }
  .admin-layout.menu-open .expanded-sidebar { transform: translateX(0); }
  .admin-layout.menu-open .mobile-backdrop { display: block; }
  .mobile-toggle { display: grid; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: 1fr; }
  .dash-charts-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 620px) {
  .admin-layout { grid-template-columns: 60px 1fr; }
  .icon-sidebar { padding-inline: 8px; }
  .rail-link, .brand-mark { width: 40px; height: 40px; }
  .expanded-sidebar { inset-inline-start: 60px; width: calc(100vw - 70px); }
  .topbar { padding: 0 16px; }
  .dashboard-content { padding: 20px 16px; }
  .stats-grid { grid-template-columns: 1fr; }
  .page-heading-row { display: grid; }
  .primary-action { width: fit-content; }
  .settings-card { grid-template-columns: 1fr; }
}

/* ---- Platform settings section forms (Site / Localization / Security / Integrations) ---- */
.settings-form { margin-top: 4px; }
.settings-form--secondary { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--admin-border, #e5e7eb); }
.settings-subhead { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--admin-text, #111827); }
.settings-panel {
  margin: 0 0 18px;
  padding: 20px;
  border: 1px solid var(--admin-border, rgba(148, 163, 184, .22));
  border-radius: 18px;
  background: var(--admin-card, #fff);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}
.settings-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.settings-panel__head h3 {
  margin: 0;
  color: var(--admin-text, #111827);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.settings-panel__head p {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--admin-muted, #64748b);
  font-size: 13px;
  line-height: 1.55;
}
.settings-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(37, 99, 235, .28);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(37, 99, 235, .12);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.settings-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--admin-muted, #6b7280); }
.settings-field > span { font-weight: 600; }
.settings-field--wide { grid-column: 1 / -1; }
.settings-check { flex-direction: row; align-items: center; gap: 10px; }
.settings-check input { width: 16px; height: 16px; }
.admin-input, .admin-select,
.settings-field input, .settings-field select, .settings-field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--admin-border, #d1d5db);
  border-radius: 8px;
  background: var(--admin-bg, #fff);
  color: var(--admin-text, #111827);
  font: inherit;
  font-size: 14px;
}
.settings-field textarea { min-height: 86px; resize: vertical; }
.settings-check input {
  display: inline-block;
  width: 16px !important;
  height: 16px !important;
  min-height: 16px;
  padding: 0 !important;
}
.admin-input:focus, .admin-select:focus,
.settings-field input:focus, .settings-field select:focus, .settings-field textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.settings-help {
  color: var(--admin-muted, #64748b);
  font-size: 12px;
  line-height: 1.45;
}
.settings-callout {
  border: 1px dashed rgba(37, 99, 235, .35);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(37, 99, 235, .08);
  color: var(--admin-muted, #64748b);
  font-size: 13px;
  line-height: 1.55;
}
.settings-callout strong {
  display: block;
  margin-bottom: 4px;
  color: var(--admin-text, #111827);
}
.settings-callout p { margin: 0; }
.settings-actions { margin-top: 18px; }
.settings-actions .primary-action {
  border: none; border-radius: 8px; padding: 9px 18px;
  background: #2563eb; color: #fff; font-weight: 600; cursor: pointer;
}
.settings-actions .primary-action:hover { background: #1d4ed8; }
.settings-flash { margin: 8px 0 16px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.settings-flash--ok { background: #dcfce7; color: #166534; }
.settings-flash--err { background: #fee2e2; color: #991b1b; }
@media (max-width: 720px) {
  .settings-fields { grid-template-columns: 1fr; }
  .settings-panel { padding: 16px; }
  .settings-panel__head { display: grid; }
}

/* 2026 dashboard redesign — shared by production and demo deployments. */
@media (min-width: 921px) {
  .admin-layout { grid-template-columns:72px 276px minmax(0,1fr);transition:grid-template-columns .28s cubic-bezier(.2,.8,.2,1); }
  .admin-layout.sidebar-collapsed { grid-template-columns:72px 86px minmax(0,1fr); }
  .admin-layout.sidebar-collapsed .expanded-sidebar { padding-inline:10px; }
  .admin-layout.sidebar-collapsed .expanded-card { padding-inline:10px; }
  .admin-layout.sidebar-collapsed .sidebar-module-copy,.admin-layout.sidebar-collapsed .menu-row span { opacity:0;width:0;pointer-events:none; }
  .admin-layout.sidebar-collapsed .sidebar-module-title { justify-content:center;gap:0; }
  .admin-layout.sidebar-collapsed .sidebar-collapse { position:absolute;inset-inline-end:-17px;top:8px;transform:rotate(180deg);background:var(--admin-card); }
  .admin-layout.sidebar-collapsed .menu-row { justify-content:center;padding:0;overflow:visible; }
  .admin-layout.sidebar-collapsed .menu-row::after { content:attr(title);position:absolute;inset-inline-start:calc(100% + 12px);padding:7px 10px;border-radius:8px;background:var(--admin-text);color:var(--admin-card);font-size:12px;opacity:0;transform:translateX(-4px);pointer-events:none;transition:.18s;white-space:nowrap;z-index:50; }
  :root[dir="rtl"] .admin-layout.sidebar-collapsed .menu-row::after { transform:translateX(4px); }
  .admin-layout.sidebar-collapsed .menu-row:hover::after { opacity:1;transform:none; }
}
.expanded-sidebar { padding:14px; }
.expanded-card { padding:14px 12px;min-width:0; }
.sidebar-module-title { min-height:52px;padding:4px 5px 16px;margin-bottom:8px;border-bottom:1px solid var(--admin-border);position:relative; }
.module-title-icon { width:38px;height:38px;flex:0 0 38px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#2563ff,#7c3aed);box-shadow:0 9px 20px rgba(37,99,255,.22); }
.sidebar-module-copy { display:grid;min-width:0;line-height:1.15;transition:opacity .18s ease,width .18s ease; }
.sidebar-module-copy strong { font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sidebar-module-copy small { margin-top:4px;color:var(--admin-muted);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }
.sidebar-collapse { margin-inline-start:auto;width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border:1px solid var(--admin-border);border-radius:9px;background:var(--admin-card-soft);color:var(--admin-muted);cursor:pointer;transition:transform .25s ease,color .2s,border-color .2s;z-index:2; }
.sidebar-collapse:hover { color:var(--admin-blue);border-color:rgba(37,99,255,.35); }
.sidebar-collapse svg { width:16px;height:16px; }
.menu-list { gap:5px;padding-block:2px 8px;padding-inline:2px 3px; }
.menu-row { white-space:nowrap;overflow:hidden;transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease; }
.menu-row span { overflow:hidden;text-overflow:ellipsis; }
.menu-row:hover { transform:translateX(3px); }
:root[dir="rtl"] .menu-row:hover { transform:translateX(-3px); }
.menu-row.active { box-shadow:inset 0 0 0 1px rgba(37,99,255,.08); }
.stat-card { position:relative;overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.stat-card::after { content:"";position:absolute;inset-inline-end:-25px;bottom:-34px;width:90px;height:90px;border-radius:50%;background:var(--admin-blue-soft);opacity:.45;pointer-events:none; }
.stat-card:hover { transform:translateY(-4px);border-color:rgba(37,99,255,.25);box-shadow:var(--admin-shadow); }
.analytics-card { min-width:0; }
.live-indicator { display:inline-flex;align-items:center;gap:7px;color:var(--admin-green);font-size:12px;font-weight:800;white-space:nowrap; }
.live-indicator i { width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px rgba(34,197,94,.12);animation:livePulse 2s infinite; }
.bar-chart { display:grid;gap:16px; }
.bar-chart-row { display:grid;gap:7px; }
.bar-chart-meta { display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--admin-muted); }
.bar-chart-meta span { font-weight:700; }.bar-chart-meta strong { color:var(--admin-text); }
.progress-track { height:9px;border-radius:99px;background:var(--admin-card-soft);box-shadow:inset 0 0 0 1px var(--admin-border);overflow:hidden; }
.progress-fill { display:block;height:100%;width:var(--progress);min-width:4px;border-radius:inherit;transform-origin:left;animation:growBar .8s cubic-bezier(.2,.8,.2,1) both; }
.tone-blue { background:linear-gradient(90deg,#2563ff,#60a5fa); }.tone-green { background:linear-gradient(90deg,#16a34a,#4ade80); }.tone-purple { background:linear-gradient(90deg,#7c3aed,#c084fc); }.tone-orange { background:linear-gradient(90deg,#ea580c,#fb923c); }
.bar-chart--columns { min-height:210px;display:flex;align-items:end;gap:clamp(12px,3vw,34px);padding:12px 8px 0;border-bottom:1px solid var(--admin-border); }
.column-chart-item { flex:1;min-width:52px;height:190px;display:grid;grid-template-rows:24px 1fr 34px;gap:6px;text-align:center; }
.column-chart-value { font-size:13px;font-weight:850; }.column-chart-track { display:flex;align-items:end;width:min(56px,75%);height:100%;margin:auto;border-radius:12px 12px 3px 3px;background:var(--admin-card-soft);overflow:hidden; }
.column-chart-track span { width:100%;height:max(8%,var(--progress));border-radius:12px 12px 3px 3px;animation:growColumn .8s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom; }.column-chart-item small { color:var(--admin-muted);font-size:11px;font-weight:700;line-height:1.2; }
@keyframes growBar { from { transform:scaleX(0); } } @keyframes growColumn { from { transform:scaleY(0); } } @keyframes livePulse { 50% { box-shadow:0 0 0 9px rgba(34,197,94,0); } }
@media (max-width:920px) { .sidebar-collapse{display:none} }
@media (max-width:620px) { .bar-chart--columns{gap:8px;overflow-x:auto} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }