/* Soda ZW Billing — Editorial Command Centre V8
   Matches the approved light, blue-rail accounting concept. */

:root {
  --ed-blue: #3799f2;
  --ed-blue-dark: #1683e7;
  --ed-blue-soft: #e5f3ff;
  --ed-black: #17191c;
  --ed-copy: #85888c;
  --ed-surface: #f4f4f4;
  --ed-surface-2: #fafafa;
  --ed-line: #dedede;
  --ed-orange: #ff6a23;
  --ed-rail: 74px;
  --ed-radius: 16px;
}

body.editorial-v8 {
  background: #fff;
  color: var(--ed-black);
  font-family: "Segoe UI Variable", "Aptos", "Inter", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: -.008em;
}
body.editorial-v8 h1, body.editorial-v8 h2, body.editorial-v8 h3,
body.editorial-v8 b, body.editorial-v8 strong { color: var(--ed-black); letter-spacing: -.025em; }
body.editorial-v8 p { color: var(--ed-copy); }
body.editorial-v8 a { color: var(--ed-black); }

/* Approved slim blue icon rail */
body.editorial-v8 .sidebar {
  width: var(--ed-rail);
  padding: 17px 10px;
  overflow: visible;
  background: linear-gradient(180deg, #3c9df4 0%, #3195ef 100%);
  border-radius: 0;
  box-shadow: none;
}
body.editorial-v8 .brand-row { min-height: 48px; padding: 0; margin: 0 0 14px; border: 0; justify-content: center; }
body.editorial-v8 .brand { width: 42px; justify-content: center; margin: 0; }
body.editorial-v8 .brand-row .brand { position: absolute; left: 16px; top: 17px; }
body.editorial-v8 .brand img { display: none; }
body.editorial-v8 .brand span { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; }
body.editorial-v8 .brand strong { color: transparent; font-size: 0; }
body.editorial-v8 .brand strong::after { content: "S"; color: #fff; font-size: 13px; font-weight: 850; }
body.editorial-v8 .brand small, body.editorial-v8 .sidebar-collapse,
body.editorial-v8 .nav-section, body.editorial-v8 .nav-label,
body.editorial-v8 .sidebar-user .user-copy { display: none; }
body.editorial-v8 .sidebar nav { gap: 8px; padding: 0; overflow: visible; }
body.editorial-v8 .sidebar nav a {
  position: relative; justify-content: center; min-height: 43px; width: 43px;
  margin: 0 auto; padding: 0; border: 0; border-radius: 11px;
  background: transparent; color: #fff; box-shadow: none;
}
body.editorial-v8 .sidebar nav a b {
  width: 43px; height: 43px; flex-basis: 43px; border-radius: 11px;
  color: #fff; background: transparent;
}
body.editorial-v8 .sidebar nav a b svg { width: 17px; height: 17px; }
body.editorial-v8 .sidebar nav a:hover,
body.editorial-v8 .sidebar nav a.active { color: #fff; background: rgba(255,255,255,.17); transform: none; box-shadow: none; }
body.editorial-v8 .sidebar nav a.active b { color: #fff; background: transparent; }
body.editorial-v8 .sidebar nav a::after {
  content: attr(aria-label); position: absolute; left: 53px; top: 50%; transform: translateY(-50%) translateX(-4px);
  width: max-content; max-width: 190px; padding: 7px 10px; border-radius: 8px;
  color: #fff; background: var(--ed-black); font-size: 11px; font-weight: 700;
  opacity: 0; visibility: hidden; pointer-events: none; transition: .14s ease; z-index: 80;
}
body.editorial-v8 .sidebar nav a:hover::after { opacity: 1; visibility: visible; transform: translateY(-50%); }
body.editorial-v8 .nav-count {
  position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px;
  border: 2px solid var(--ed-blue); background: var(--ed-orange); font-size: 8px;
}
body.editorial-v8 .sidebar-user { justify-content: center; padding: 13px 0 0; border-top: 1px solid rgba(255,255,255,.24); }
body.editorial-v8 .sidebar-user .user-avatar { background: #fff; color: var(--ed-blue-dark); border: 0; }
body.editorial-v8 .sidebar-user > a { position: absolute; left: 52px; color: transparent; font-size: 0; }

body.editorial-v8 .main,
body.editorial-v8.sidebar-collapsed .main { margin-left: var(--ed-rail); padding: 0 24px 30px; }
body.editorial-v8 .topbar {
  height: 89px; min-height: 89px; margin: 0 -24px 0; padding: 0 24px;
  color: var(--ed-black); background: rgba(255,255,255,.96); border-bottom: 1px solid #e6e6e6;
  box-shadow: none; backdrop-filter: blur(12px);
}
body.editorial-v8 .topbar .page-identity > span {
  color: var(--ed-blue); font-size: 10px; font-weight: 750; letter-spacing: .13em;
}
body.editorial-v8 .topbar h1 { margin-top: 5px; color: var(--ed-black); font-size: 21px; font-weight: 650; }
body.editorial-v8 .topbar-tools { gap: 8px; }
body.editorial-v8 .topbar-icon, body.editorial-v8 .topbar-profile {
  background: #f4f4f4; border: 0; border-radius: 10px; box-shadow: none;
}
body.editorial-v8 .topbar-profile span { background: var(--ed-blue); }
body.editorial-v8 .create-menu > summary {
  min-height: 34px; padding: 7px 12px; border: 0; border-radius: 9px;
  color: #fff; background: var(--ed-black); box-shadow: none; font-size: 12px;
}
body.editorial-v8 .create-menu > div { border: 1px solid #e2e2e2; border-radius: 13px; box-shadow: 0 18px 45px rgba(0,0,0,.14); }
body.editorial-v8 .create-menu > div a:hover { background: var(--ed-blue-soft); color: var(--ed-blue-dark); }
body.editorial-v8 .app-footer { color: #999; border-top: 1px solid #ececec; }

/* Quiet accounting components */
body.editorial-v8 .panel,
body.editorial-v8 .card,
body.editorial-v8 .metric,
body.editorial-v8 .data-card {
  background: var(--ed-surface); border: 0; border-radius: var(--ed-radius); box-shadow: none;
}
body.editorial-v8 .panel { padding: 18px; }
body.editorial-v8 .panel-head h2 { color: var(--ed-black); font-size: 18px; font-weight: 620; }
body.editorial-v8 .panel-head p { color: var(--ed-copy); font-size: 12px; }
body.editorial-v8 .panel-head > a { color: var(--ed-black); background: #fff; border: 1px solid #ddd; border-radius: 9px; }
body.editorial-v8 .section-kicker, body.editorial-v8 .command-kicker,
body.editorial-v8 .topbar .eyebrow { color: var(--ed-blue); }
body.editorial-v8 .button {
  min-height: 36px; padding: 8px 13px; border-radius: 9px; font-size: 12px; font-weight: 700;
  box-shadow: none;
}
body.editorial-v8 .button.primary,
body.editorial-v8 .button.command-payment { color: #fff; border-color: var(--ed-black); background: var(--ed-black); box-shadow: none; }
body.editorial-v8 .button.primary:hover,
body.editorial-v8 .button.command-payment:hover { color: #fff; background: #303236; border-color: #303236; }
body.editorial-v8 .button.secondary { color: var(--ed-black); border-color: #ddd; background: #fff; box-shadow: none; }
body.editorial-v8 input, body.editorial-v8 select, body.editorial-v8 textarea {
  border-color: #d8d8d8; border-radius: 9px; background: #fff; color: var(--ed-black); box-shadow: none;
}
body.editorial-v8 input:focus, body.editorial-v8 select:focus, body.editorial-v8 textarea:focus {
  border-color: var(--ed-blue); box-shadow: 0 0 0 3px rgba(55,153,242,.13);
}
body.editorial-v8 .table-wrap { border-color: #e0e0e0; border-radius: 12px; }
body.editorial-v8 th { color: #888; background: transparent; border-bottom-color: #ddd; }
body.editorial-v8 td { color: #555; border-bottom-color: #e3e3e3; }

/* Dashboard matching the approved concept */
body.editorial-v8.page-dashboard .main { max-width: 1500px; }
body.editorial-v8.page-dashboard .topbar { position: sticky; }
body.editorial-v8.page-dashboard .topbar-icon,
body.editorial-v8.page-dashboard .topbar-profile { display: none; }
body.editorial-v8 .accounting-command-hero {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center;
  min-height: 173px; max-width: 100%; margin: 0; padding: 31px 0 27px;
  overflow: visible; border: 0; border-radius: 0; border-bottom: 1px solid #e4e4e4;
  color: var(--ed-black); background: transparent; box-shadow: none;
}
body.editorial-v8 .accounting-command-hero::after { display: none; }
body.editorial-v8 .accounting-command-copy { position: static; max-width: 710px; }
body.editorial-v8 .accounting-command-hero h2 {
  max-width: 690px; margin: 8px 0 5px; color: var(--ed-black);
  font-size: clamp(25px,3.1vw,40px); font-weight: 650; line-height: 1.12; letter-spacing: -.035em;
}
body.editorial-v8 .accounting-command-hero p { max-width: 680px; margin: 0; color: #929292; font-size: 14px; line-height: 1.55; }
body.editorial-v8 .command-kicker { font-size: 11px; letter-spacing: .1em; }
body.editorial-v8 .command-actions { position: absolute; right: 0; margin: 0; }
body.editorial-v8 .command-actions .button { display: none; }
body.editorial-v8 .command-actions .button:first-child { display: inline-flex; }

body.editorial-v8 .accounting-kpis {
  grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-width: none; margin: 18px 0;
}
body.editorial-v8 .accounting-kpis > a {
  display: grid; min-height: 91px; padding: 14px 15px; border: 0; border-radius: 14px;
  color: var(--ed-black); background: var(--ed-surface); box-shadow: none;
}
body.editorial-v8 .accounting-kpis > a:hover { background: #ececec; transform: none; box-shadow: none; }
body.editorial-v8 .accounting-kpis > a:nth-child(4) { grid-column: 1; }
body.editorial-v8 .accounting-kpis a > span { color: #888; font-size: 12px; font-weight: 450; text-transform: none; letter-spacing: 0; }
body.editorial-v8 .accounting-kpis a > strong { align-self: center; color: var(--ed-black); font-size: 22px; font-weight: 650; }
body.editorial-v8 .accounting-kpis a > small { align-self: end; color: var(--ed-black); font-size: 10px; }
body.editorial-v8 .accounting-kpis .trend.up { color: var(--ed-orange); }
body.editorial-v8 .accounting-kpis .kpi-icon { display: none; }

body.editorial-v8 .accounting-primary-grid {
  display: flex; flex-direction: column; gap: 18px; margin: 0; max-width: none;
}
body.editorial-v8 .accounting-primary-grid .command-cashflow { order: 1; }
body.editorial-v8 .accounting-primary-grid .priority-workbench { order: 2; }
body.editorial-v8 .command-cashflow { padding: 22px 18px 17px; }
body.editorial-v8 .command-cashflow .panel-head { margin-bottom: 7px; }
body.editorial-v8 .command-cashflow .section-kicker { display: none; }
body.editorial-v8 .period-control { width: auto; padding: 0; border: 0; background: transparent; }
body.editorial-v8 .period-control select { min-height: 34px; width: 132px; padding: 6px 28px 6px 10px; border-color: #ddd; font-size: 11px; }
body.editorial-v8 .command-line-chart {
  position: relative; display: block; height: 245px; min-height: 245px; padding: 8px 8px 42px;
  border: 0; border-radius: 0; background: transparent;
}
body.editorial-v8 .command-line-chart svg { display: block; width: 100%; height: 180px; overflow: visible; }
body.editorial-v8 .command-line-chart svg line { stroke: #ddd; stroke-width: .35; vector-effect: non-scaling-stroke; }
body.editorial-v8 .command-line-chart .flow-area { fill: rgba(55,153,242,.13); }
body.editorial-v8 .command-line-chart .flow-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
body.editorial-v8 .command-line-chart .flow-line.cash { stroke: var(--ed-blue); }
body.editorial-v8 .command-line-chart .flow-line.out { stroke: var(--ed-orange); stroke-width: 1.5; }
body.editorial-v8 .line-chart-labels { display: grid; grid-template-columns: repeat(6,1fr); margin: -1px 5.7% 0; color: #888; font-size: 9px; text-align: center; }
body.editorial-v8 .line-chart-legend { display: flex; justify-content: flex-end; gap: 13px; margin-top: 12px; color: #333; font-size: 11px; }
body.editorial-v8 .line-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
body.editorial-v8 .line-chart-legend i, body.editorial-v8 .line-chart-legend b { width: 7px; height: 7px; border-radius: 50%; background: var(--ed-blue); }
body.editorial-v8 .line-chart-legend b { background: var(--ed-orange); }
body.editorial-v8 .cash-summary { display: none; }

body.editorial-v8 .priority-workbench { padding: 22px 18px; }
body.editorial-v8 .priority-workbench .section-kicker { display: none; }
body.editorial-v8 .attention-bubble {
  min-width: 58px; width: auto; height: auto; padding: 5px 9px; border-radius: 99px; white-space: nowrap;
  color: var(--ed-blue); background: var(--ed-blue-soft); box-shadow: none; font-size: 10px;
}
body.editorial-v8 .attention-bubble::after { content: " items"; }
body.editorial-v8 .priority-list { border: 0; border-radius: 0; }
body.editorial-v8 .priority-list a { min-height: 62px; padding: 10px 4px; border-bottom-color: #ddd; background: transparent; }
body.editorial-v8 .priority-list > a { grid-template-columns: 34px minmax(0,1fr) auto 16px; }
body.editorial-v8 .priority-list a:hover { padding-left: 4px; background: transparent; }
body.editorial-v8 .priority-mark {
  display: grid; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--ed-blue-soft);
}
body.editorial-v8 .priority-mark::after { content: "›"; place-self: center; color: var(--ed-blue); font-size: 18px; font-style: normal; }
body.editorial-v8 .priority-list b { color: var(--ed-black); font-size: 12px; font-weight: 650; }
body.editorial-v8 .priority-list small { color: #929292; font-size: 10px; }
body.editorial-v8 .priority-list > a > strong { color: var(--ed-blue); background: var(--ed-blue-soft); border-radius: 99px; padding: 4px 7px; font-size: 10px; }
body.editorial-v8 .priority-list em { color: var(--ed-black); }

body.editorial-v8 .accounting-secondary-grid,
body.editorial-v8 .accounting-activity-grid { gap: 18px; margin-top: 18px; }
body.editorial-v8 .accounting-activity-grid { grid-template-columns: 1fr; }
body.editorial-v8 .accounting-secondary-grid .panel,
body.editorial-v8 .accounting-activity-grid .panel { background: var(--ed-surface); }
body.editorial-v8 .financial-list, body.editorial-v8 .receipt-list,
body.editorial-v8 .priority-list { background: transparent; }
body.editorial-v8 .financial-list a, body.editorial-v8 .receipt-list a { background: transparent; }
body.editorial-v8 .receive-payment-card { color: var(--ed-blue-dark); background: var(--ed-blue-soft); border: 0; }

/* Document studio and registers in the same editorial language */
body.editorial-v8 .document-studio-heading h1 { color: var(--ed-black); font-weight: 650; }
body.editorial-v8 .document-type-switch { background: #efefef; border: 0; }
body.editorial-v8 .document-type-switch a.active { color: var(--ed-black); box-shadow: none; }
body.editorial-v8 .studio-section, body.editorial-v8 .studio-summary { background: var(--ed-surface-2); border: 1px solid #e5e5e5; box-shadow: none; }
body.editorial-v8 .studio-step { color: #fff; background: var(--ed-blue); box-shadow: none; }
body.editorial-v8 .studio-section-head h2 { color: var(--ed-black); font-weight: 650; }
body.editorial-v8 .customer-mode { background: #ededed; border: 0; }
body.editorial-v8 .customer-mode label:has(input:checked) { color: var(--ed-blue-dark); box-shadow: none; }
body.editorial-v8 .catalog-product:hover { border-color: var(--ed-blue); background: var(--ed-blue-soft); box-shadow: none; }
body.editorial-v8 .catalog-product em { color: var(--ed-blue-dark); }
body.editorial-v8 .studio-summary-top { background: var(--ed-blue); }
body.editorial-v8 .studio-total { background: var(--ed-blue-soft); }
body.editorial-v8 .studio-total dt, body.editorial-v8 .studio-total dd { color: var(--ed-blue-dark); }
body.editorial-v8 .studio-issue { background: var(--ed-black); border-color: var(--ed-black); }
body.editorial-v8 .payment-command-hero { background: var(--ed-blue); box-shadow: none; }
body.editorial-v8 .payment-step-heading i { background: var(--ed-blue); box-shadow: none; }
body.editorial-v8 .open-invoice-list > a.selected { background: var(--ed-blue-soft); box-shadow: inset 4px 0 var(--ed-blue); }
body.editorial-v8 .invoice-tabs, body.editorial-v8 .filter-pills { background: #eee; border: 0; }
body.editorial-v8 .invoice-tabs a.active, body.editorial-v8 .filter-pills a.active { color: var(--ed-blue-dark); box-shadow: none; }

body.auth-page.editorial-v8 { background: linear-gradient(135deg,#389bf3,#248add); }
body.auth-page.editorial-v8 .auth-card { border: 0; border-radius: 20px; box-shadow: 0 25px 65px rgba(10,74,128,.25); }
body.auth-page.editorial-v8 .auth-card .button.primary { background: var(--ed-black); border-color: var(--ed-black); }

@media (min-width: 1280px) {
  body.editorial-v8 .main { padding-left: 36px; padding-right: 36px; }
  body.editorial-v8 .topbar { margin-left: -36px; margin-right: -36px; padding-left: 36px; padding-right: 36px; }
  body.editorial-v8 .command-actions { right: 36px; }
}

@media (max-width: 900px) {
  body.editorial-v8 .accounting-secondary-grid,
  body.editorial-v8 .accounting-activity-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body.editorial-v8 .sidebar { width: 236px; padding: 15px 12px; transform: translateX(-105%); }
  body.editorial-v8.nav-open .sidebar, body.editorial-v8 .sidebar.open { transform: translateX(0); }
  body.editorial-v8 .brand-row { justify-content: flex-start; padding: 0 8px 13px; border-bottom: 1px solid rgba(255,255,255,.2); }
  body.editorial-v8 .brand { width: auto; }
  body.editorial-v8 .brand-row .brand { position: static; }
  body.editorial-v8 .brand span { display: flex; width: auto; }
  body.editorial-v8 .brand strong { color: #fff; font-size: 15px; }
  body.editorial-v8 .brand strong::after { display: none; }
  body.editorial-v8 .brand small { display: block; color: rgba(255,255,255,.72); }
  body.editorial-v8 .nav-section { display: block; color: rgba(255,255,255,.58); }
  body.editorial-v8 .sidebar nav a { width: 100%; justify-content: flex-start; padding: 0 8px; }
  body.editorial-v8 .sidebar nav a b { flex-basis: 38px; width: 38px; }
  body.editorial-v8 .nav-label { display: inline; color: #fff; }
  body.editorial-v8 .sidebar nav a::after { display: none; }
  body.editorial-v8 .main, body.editorial-v8.sidebar-collapsed .main { margin-left: 0; padding: 0 14px 25px; }
  body.editorial-v8 .topbar { height: 76px; min-height: 76px; margin: 0 -14px; padding: 0 14px; }
  body.editorial-v8 .topbar h1 { font-size: 19px; }
  body.editorial-v8 .accounting-command-hero { padding: 25px 0 24px; }
  body.editorial-v8 .accounting-command-hero h2 { font-size: 27px; }
  body.editorial-v8 .command-actions { position: static; margin-top: 16px; }
  body.editorial-v8 .accounting-kpis { grid-template-columns: 1fr 1fr; }
  body.editorial-v8 .accounting-kpis > a:nth-child(4) { grid-column: auto; }
  body.editorial-v8 .command-line-chart { height: 215px; min-height: 215px; padding-left: 0; padding-right: 0; }
  body.editorial-v8 .command-line-chart svg { height: 155px; }
}

@media (max-width: 480px) {
  body.editorial-v8 .accounting-kpis { grid-template-columns: 1fr; }
  body.editorial-v8 .command-cashflow, body.editorial-v8 .priority-workbench { padding: 18px 14px; }
  body.editorial-v8 .command-cashflow .panel-head { align-items: flex-start; }
  body.editorial-v8 .period-control select { width: 114px; }
  body.editorial-v8 .line-chart-labels { font-size: 8px; }
}
