/* ============================================================
   Bitrix24-flavoured theme overrides
   ------------------------------------------------------------
   Loaded AFTER app.css. Overrides tokens + selected components.
   Phase 1 scope: design tokens + record/deal page.
   Other pages inherit the new tokens automatically.
   ============================================================ */

/* ─── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand / actions */
  --primary:      #2767f5;
  --primary-dk:   #1a52d4;
  --primary-lt:   #eaf1ff;

  /* Status colours (kept reasonably close to existing) */
  --success:      #1e9c5b;
  --success-lt:   #e3f6ec;
  --warning:      #c97a14;
  --warning-lt:   #fff2dd;
  --danger:       #d44141;
  --danger-lt:    #fdecec;

  /* Surfaces */
  --bg:           #eef2f6;
  --white:        #ffffff;
  --border:       #e3e8ee;

  /* Sidebar — deep navy à la Bitrix24 */
  --sidebar:      #1f2d4c;
  --sidebar-hov:  #2a3a5e;
  --sidebar-act:  #2767f5;
  --sidebar-txt:  #c9d3e6;
  --sidebar-mut:  #8a96b1;

  /* Text */
  --text:         #1c2233;
  --fg:           #1c2233;
  --muted:        #6b7385;

  /* Layout */
  --sb-w:         220px;
  --topbar-h:     56px;

  /* Radii / shadows */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(20,30,60,.06);
  --shadow-md: 0 2px 8px rgba(20,30,60,.08);
  --shadow-lg: 0 8px 28px rgba(20,30,60,.12);
}

/* ─── GLOBAL TYPE & BODY ────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ─── TOPBAR & SIDEBAR ──────────────────────────────────────── */
#topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(20,30,60,.04);
}

.tb-left {
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar);
}
.tb-collapse { color: var(--sidebar-txt); }
.tb-collapse:hover { background: var(--sidebar-hov); color: #fff; }

#topbar-page-header .ph h2 { color: var(--text); }

#sidebar {
  background: var(--sidebar);
}
#sidebar nav { padding: 8px 0; }
.nav-item {
  color: var(--sidebar-txt);
  border-left: 3px solid transparent;
  padding: 10px 16px;
  font-weight: 500;
  letter-spacing: .005em;
}
.nav-item:hover { background: var(--sidebar-hov); color: #fff; }
.nav-item.active {
  background: rgba(39,103,245,.18);
  color: #fff;
  border-left-color: var(--sidebar-act);
}
.nav-item .ni { color: inherit; }

.sidebar-user { border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-user .su-name { color: #fff; }
.sidebar-user .su-email { color: var(--sidebar-mut); }
.sidebar-user .su-logout { color: var(--sidebar-mut); }
.sidebar-user .su-logout:hover { color: #fff; background: var(--sidebar-hov); }

/* ─── PRIMITIVES ────────────────────────────────────────────── */
.btn {
  border-radius: var(--r-md);
  font-weight: 500;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-dk); border-color: var(--primary-dk); }
.btn-sec {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
.btn-sec:hover { background: #f4f7fb; border-color: #d0d8e2; }
.btn-orange { /* "Add Deal" — keep distinct */
  background: #ff8c2b;
  border-color: #ff8c2b;
  color: #fff;
}
.btn-orange:hover { background: #f07d1c; border-color: #f07d1c; }

.btn-ico {
  border-radius: var(--r-sm);
  color: var(--muted);
}
.btn-ico:hover { background: var(--bg); color: var(--text); }

input, select, textarea {
  border-radius: var(--r-sm);
  border-color: var(--border);
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(39,103,245,.14);
}

/* ─── CARDS ─────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.card-hd {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
}
.card-hd h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
}

/* ─── PAGE HEADER ───────────────────────────────────────────── */
.ph {
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.ph h2 { color: var(--text); }

/* ─── TABLES ────────────────────────────────────────────────── */
th { background: #f7f9fc; color: var(--muted); }
tr:not(.row-ok):not(.row-est):not(.sum-row):hover { background: #f7f9fc; }

/* ─── BADGES ────────────────────────────────────────────────── */
.badge { letter-spacing: .01em; }
.badge-info { background: var(--primary-lt); color: var(--primary); }

/* ============================================================
   RECORD / DEAL PAGE  (#modal-quote-builder + .qb-*)
   ============================================================ */

#modal-quote-builder.open { background: rgba(20,30,60,.5); }
.qb-inner {
  width: 88%;
  max-width: 1500px;
  background: var(--bg);
  box-shadow: -10px 0 40px rgba(20,30,60,.18);
}

/* Uniform action buttons in the Quote Lines card header (Add Line / Add
   Break / Add Deal / Save) — same colour and size, in line with the
   tier select next to them. */
.qb-action {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  min-width: 88px;
  justify-content: center;
}

/* Match the tier select height so the row looks tidy. */
.card.quote-view .card-hd #q-tier-select {
  height: 32px;
}

/* Header bar — title + actions */
.qb-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  gap: 18px;
  min-height: 64px;
}
.qb-title-wrap h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.qb-title-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* "View Company" button — match Bitrix neutral pill */
#q-view-company-btn {
  border-radius: var(--r-md) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
}
#q-view-company-btn:not(:disabled):hover {
  background: var(--primary-lt) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Document print buttons — cleaner pill row */
.doc-btns { gap: 4px; }
.doc-btn {
  border-radius: var(--r-sm);
  border-color: var(--border);
  background: #fff;
  width: 26px;
  height: 22px;
  padding: 0;
  color: var(--muted);
}
.doc-btn:hover { background: #f4f7fb; }

/* Vertical divider (inline-styled in HTML) — soften */
.qb-header > .flex-row > div[style*="height:32px"] {
  background: var(--border) !important;
  margin: 0 4px;
}

/* KPI / sub-tab bar */
.qb-kpis {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
  gap: 10px;
}
.qb-tabs-inline { gap: 4px; }
.qb-tabs-inline button {
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  border-radius: var(--r-sm) !important;
  border-bottom: 2px solid transparent !important;
}
.qb-tabs-inline button:hover {
  color: var(--text) !important;
  background: #f4f7fb !important;
}
.qb-tabs-inline button.active {
  color: var(--primary) !important;
  background: var(--primary-lt) !important;
  border-bottom-color: var(--primary-lt) !important;
}

.qb-kpi {
  background: #f4f7fb;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 10px;
  gap: 6px;
}
.qb-kpi-ico { color: var(--muted); opacity: 1; }
.qb-kpi-val { color: var(--text); font-weight: 600; font-size: 12px; }

/* Body — soft grey backdrop, generous gutters, full-width content */
.qb-body {
  background: var(--bg);
  padding: 22px 24px;
}

/* Customer info bar — flatter with airy fields */
.q-info-bar {
  background: #fff;
  border-color: var(--border);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  gap: 12px;
}
.q-field label {
  font-size: 10px;
  letter-spacing: .06em;
}
.q-field input,
.q-field .ord-date-input {
  border-bottom-color: var(--border);
  font-size: 14px;
}
.q-field input:focus,
.q-field .ord-date-input:focus { border-bottom-color: var(--primary); }

/* Quote Lines card — full width emphasis */
.card.quote-view {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card.quote-view .card-hd {
  padding: 14px 18px;
  background: #fff;
}
.card.quote-view .card-hd h3 { font-size: 15px; }

/* Line-items table — Bitrix-style dense rows */
.q-table th {
  background: #f7f9fc;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 10px 10px;
}
.q-table td { padding: 10px 10px; }
.q-table td input,
.q-table td select {
  background: #f7f9fc;
  border-color: var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
}
.q-table td input:hover,
.q-table td select:hover { background: #fff; border-color: #c8d2dd; }
.q-table td input:focus,
.q-table td select:focus { background: #fff; border-color: var(--primary); }

/* Two-column grid for sections beneath the products table.
   Notes spans both columns by default. */
.qb-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.qb-grid-2col > .card { margin-bottom: 0; }
.qb-grid-2col > .qb-grid-span { grid-column: 1 / -1; }
@media (max-width: 1024px) {
  .qb-grid-2col { grid-template-columns: 1fr; }
}

/* Totals bar */
.q-total-bar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px 22px;
}
.q-total-item .t-val { color: var(--text); }
.price-tile {
  background: #f4f7fb;
  border-color: var(--border);
  border-radius: var(--r-md);
}
.price-tile:hover { background: var(--primary-lt); border-color: var(--primary); }

/* Status pill in header — keep it functional but Bitrix-shaped */
.status-pill-btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 5px 22px 5px 12px;
}

/* Bitrix24 link / sync chips */
#q-bx-link-wrap a,
#q-bx-link-wrap button {
  border-radius: var(--r-md);
  font-weight: 500;
}

/* ─── ACTIVITY FEED (Bitrix-style timeline) ─────────────────── */

#qb-activity-body, #qb-history-body, #qb-integrations-body {
  background: #fff;
}

/* If the activity body is rendered as plain rows, give it a timeline rail */
.qb-tab-panel#qb-tab-activity .card,
.qb-tab-panel#qb-tab-history .card,
.qb-tab-panel#qb-tab-integrations .card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* Generic "activity row" pattern reused across History/Activity/Integrations
   — applied to .activity-row if present in the rendered HTML */
.activity-row,
.qb-history-row {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.activity-row:last-child,
.qb-history-row:last-child { border-bottom: none; }
.activity-row .ar-ico,
.qb-history-row .hr-ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-lt);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.activity-row .ar-body,
.qb-history-row .hr-body { flex: 1; min-width: 0; }
.activity-row .ar-time,
.qb-history-row .hr-time {
  font-size: 11px;
  color: var(--muted);
}
.activity-row .ar-title,
.qb-history-row .hr-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

/* ─── MODALS — softer corners, deeper shadow ────────────────── */
.modal {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.modal-hd { border-bottom-color: var(--border); }
.modal-ft { border-top-color: var(--border); }

/* ─── LOGIN ─────────────────────────────────────────────────── */
#login-screen { background: var(--bg); }
.login-box {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* ─── BOOT LOADER ─────────────────────────────────────────────
   Inline style on #boot-loader uses var(--bg); ensure spinner matches new accent. */
#boot-loader > div:first-child { border-top-color: var(--primary) !important; }

/* ============================================================
   LIST PAGES (Deals / Customers / Products / Materials / Suppliers)
   Shared chrome: toolbar, view-tabs, table, pagination, status pills.
   ============================================================ */

/* Page header */
.ph {
  padding: 16px 24px;
}
.ph h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.ph p { font-size: 12px; }

/* Toolbar row (search, filters, action buttons) */
.orders-toolbar,
.products-toolbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  gap: 12px;
}

/* Search input — Bitrix-style rounded pill with subtle border */
.orders-search-wrap input,
.products-search-wrap input,
.po-search-wrap input {
  height: 34px;
  border-radius: var(--r-md);
  background: #f4f7fb;
  border-color: transparent;
  padding-left: 12px;
  font-size: 13px;
}
.orders-search-wrap input:focus,
.products-search-wrap input:focus,
.po-search-wrap input:focus {
  background: #fff;
  border-color: var(--primary);
}

/* Saved view tabs — Bitrix uses underline active + count chip */
.view-tabs-bar { gap: 2px; }
.view-tab {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 0;
}
.view-tab:hover { color: var(--text); }
.view-tab.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}
.vt-count {
  background: var(--bg);
  color: var(--muted);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  font-weight: 600;
}
.view-tab.active .vt-count {
  background: var(--primary-lt);
  color: var(--primary);
}

.view-tab-add {
  border-radius: var(--r-sm);
  border-color: var(--border);
  color: var(--muted);
}
.view-tab-add:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-lt);
}

/* Tables — softer headers, gentle row hover */
.orders-table,
.products-table,
.cd-orders-table {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.orders-table th,
.products-table thead th {
  background: #f7f9fc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 7px 6px;
  border-bottom: 1px solid var(--border);
}
.orders-table td,
.products-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.orders-table tr.order-row:hover,
.orders-table tr.cust-row:hover,
.orders-table tr.supp-row:hover,
.products-table tr.product-row:hover {
  background: #f4f7fb;
}
.orders-table tr.group-header td,
.products-table tr.prod-group-header td {
  background: #eef2f6;
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0;
}
.orders-table tr.group-header.grp-hdr:hover td,
.products-table tr.prod-group-header:hover td {
  background: #e6ecf3;
}

/* Sortable header active state */
.orders-table th.sortable.sort-active,
.products-table th.sortable.sort-active { color: var(--primary); }
.orders-table th.sortable:hover,
.products-table th.sortable:hover {
  background: #eef2f6;
  color: var(--text);
}

/* Pagination — Bitrix-style page chips */
.pagination-bar {
  background: #fff;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 12px 18px;
}
.pagination-bar .pg-btn {
  border-radius: var(--r-sm);
  border-color: var(--border);
  background: #fff;
  color: var(--text);
  height: 30px;
  padding: 0 10px;
}
.pagination-bar .pg-btn:hover:not(:disabled) {
  background: var(--primary-lt);
  border-color: var(--primary);
  color: var(--primary);
}
.pagination-bar .pg-page {
  border-radius: var(--r-sm);
  height: 30px;
  min-width: 30px;
  padding: 0 10px;
  font-weight: 500;
}
.pagination-bar .pg-page:hover { background: var(--primary-lt); color: var(--primary); }
.pagination-bar .pg-page.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.pagination-bar .pg-size select {
  border-radius: var(--r-sm);
  height: 28px;
  padding: 0 8px;
}

/* ─── STATUS PILLS — softer, more uniform ─── */
.status-pill-btn {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 22px 4px 12px;
  letter-spacing: .01em;
  line-height: 1.4;
}
.ord-status,
.cust-status-badge,
.role-badge,
.badge,
.sf-pill {
  border-radius: 999px;
  letter-spacing: .01em;
  font-weight: 600;
}

/* Customers / suppliers detail sliders inherit slider chrome.
   Wider panel + Bitrix-style header + softer body. */
#modal-customer-detail.open,
#modal-supplier-detail.open,
#modal-product-detail.open,
#modal-part.open,
#modal-po.open { background: rgba(20,30,60,.5); }
.cd-inner,
.pd-inner {
  width: 92%;
  max-width: 1280px;
  background: var(--bg);
  box-shadow: -10px 0 40px rgba(20,30,60,.18);
}
.cd-header,
.pd-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  min-height: 64px;
}
.cd-header h2,
.pd-header h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.cd-body,
.pd-body { background: var(--bg); padding: 22px 24px; }
.cd-card,
.pd-body .card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.cd-card-header { background: #fff; padding: 14px 18px; }
.cd-card-header h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.cd-card-header h4 svg { color: var(--primary); }

/* Customer detail KPI stat boxes */
.customer-detail-stats .stat-box {
  border-radius: var(--r-lg);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.customer-detail-stats .stat-box::before { background: var(--primary); }
.customer-detail-stats .stat-box .stat-icon { color: var(--primary); }

/* Comments / activity items already use cd-* classes — refresh */
.cd-comment-bubble { background: #f4f7fb; border-radius: var(--r-md); }
.cd-comment-bubble.mine { background: var(--primary-lt); }
.cd-comments-input input { border-radius: var(--r-md); }

/* ─── PURCHASE ORDERS sub-tab shell ─── */
.po-shell {
  border-radius: var(--r-lg);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  background: #fff;
}
.po-subhead, .po-toolbar {
  background: #fff;
  border-bottom-color: var(--border);
  padding: 14px 20px;
}

/* ─── SETTINGS sub-tabs / segmented controls ─── */
.subtabs {
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.subtabs button {
  padding: 11px 18px;
  border-radius: 0;
  font-weight: 500;
}
.subtabs button.active { color: var(--primary); border-bottom-color: var(--primary); }

.nc-tabs { background: #f4f7fb; padding: 3px; border-radius: var(--r-md); }
.nc-tabs button { border-radius: var(--r-sm); font-weight: 500; }
.nc-tabs button.active { box-shadow: var(--shadow-sm); }

/* ─── DASHBOARD (Sales Widget) ─── */
.sw-stat,
.sw-chart-wrap,
.sw-endole,
.sw-prospects {
  border-radius: var(--r-lg);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.sw-stat .sw-val { color: var(--text); letter-spacing: -.02em; }
.sw-endole .btn-endole,
.sw-prospects-btn {
  background: var(--primary);
  border-radius: var(--r-md);
  font-weight: 500;
}
.sw-endole .btn-endole:hover,
.sw-prospects-btn:hover { background: var(--primary-dk); }

/* Sales stat banners */
.sales-stats { padding: 16px 24px 8px; gap: 14px; }
.sales-stat {
  border-radius: var(--r-lg);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  padding: 14px 18px;
}
.sales-stat .ss-value { color: var(--primary); }

/* ─── LOG TABLE ─── */
.log-table th { background: #f7f9fc; color: var(--muted); }
.log-table tr:hover td { background: #f4f7fb; }

/* ─── AUTOMATION RULES TOGGLE ─── */
.rule-toggle input:checked + .rule-toggle-slider { background: var(--primary); }

/* ─── INFO BOX ─── */
.info-box {
  background: var(--primary-lt);
  border-color: var(--border);
  border-radius: var(--r-md);
  color: var(--primary);
}

/* ─── TOAST ─── */
.toast.t-success { background: var(--success); color: #fff; }
.toast.t-error   { background: var(--danger);  color: #fff; }
.toast.t-info    { background: var(--text);    color: #fff; }