/* 
   Детейлинг CRM — Dual Theme (Light default / Dark optional)
    */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap');

/*  Variables: Light mode (default)  */
:root {
  --bg-body:        #f4f6f9;
  --bg-card:        #ffffff;
  --bg-sidebar:     #ffffff;
  --bg-sidebar-top: #f8f9fb;
  --bg-input:       #ffffff;
  --bg-hover:       #f0f2f5;
  --border-color:   #e2e8f0;
  --border-light:   #cbd5e1;
  --text-muted:     #6b7280;
  --text-default:   #374151;
  --text-white:     #111827;
  --accent:         #2f49d0;
  --accent-hover:   #4964ed;
  --accent-yellow:  #d97706;
  --accent-green:   #15803d;
  --accent-red:     #dc2626;
  --accent-orange:  #ea580c;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow:         0 4px 12px rgba(0,0,0,.1);
  --sidebar-w:      240px;
  --sidebar-w-sm:   64px;
  --topbar-pad:     16px;
}

/*  Variables: Dark mode  */
[data-theme="dark"] {
  --bg-body:        #1e1e1e;
  --bg-card:        #171717;
  --bg-sidebar:     #171717;
  --bg-sidebar-top: #242424;
  --bg-input:       #242424;
  --bg-hover:       #252525;
  --border-color:   #2e2e2e;
  --border-light:   #333333;
  --text-muted:     #676767;
  --text-default:   #9a9a9a;
  --text-white:     #ffffff;
  --accent-yellow:  #f7b91c;
  --accent-green:   #22c55e;
  --accent-red:     #ef4444;
  --accent-orange:  #f97316;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.4);
  --shadow:         0 4px 12px rgba(0,0,0,.5);
}

/*  Base  */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--bg-body);
  color: var(--text-default);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  transition: background-color .2s, color .2s;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/*  Scrollbar  */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-card); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* 
   Layout
    */

/*  Sidebar  */
.crm-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background-color: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  border-right: 1px solid var(--border-color);
  transition: width .2s ease, transform .2s ease, background-color .2s;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Logo / brand */
.crm-sidebar-logo {
  flex-shrink: 0;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
}
.crm-sidebar-logo-icon {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.crm-sidebar-logo-icon svg { color: #fff; }
.crm-sidebar-logo-text {
  font-weight: 800;
  font-size: 15px;
  color: var(--text-white);
  white-space: nowrap;
  overflow: hidden;
}
.crm-sidebar-logo-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Nav */
.crm-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
}

.crm-nav-section {
  padding: 10px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}

.crm-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  border-right: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  position: relative;
}
.crm-nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}
.crm-nav-item:hover {
  color: var(--text-default);
  background: var(--bg-hover);
}
.crm-nav-item.active {
  color: var(--accent);
  border-right-color: var(--accent);
  background: rgba(47,73,208,.08);
}
.crm-nav-badge {
  margin-left: auto;
  background: #db2777;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Sidebar footer */
.crm-sidebar-footer {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
}
.crm-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
}
.crm-user-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.crm-user-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-user-role {
  font-size: 11px;
  color: var(--text-muted);
}
.crm-logout-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color .15s;
  flex-shrink: 0;
}
.crm-logout-btn:hover { color: var(--accent-red); }
.crm-logout-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* Theme toggle button */
.crm-theme-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color .15s;
  flex-shrink: 0;
}
.crm-theme-toggle:hover { color: var(--accent); }
.crm-theme-toggle svg { width: 16px; height: 16px; fill: currentColor; }

/* Mobile toggle */
.crm-sidebar-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1100;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-default);
  box-shadow: var(--shadow-sm);
}
.crm-sidebar-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.crm-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 999;
}

/*  Main area  */
.crm-main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .2s ease;
}

/*  Topbar (filter bar)  */
.crm-topbar {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 16px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}
.crm-filter-select {
  flex: 1;
  min-width: 120px;
  max-width: 280px;
}

/*  Cash session bar  */
.crm-cash-bar {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  padding: 6px 16px;
  flex-shrink: 0;
  min-height: 0;
}
.crm-cash-bar:empty { display: none; }
.crm-topbar-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/*  Content area  */
.crm-content {
  flex: 1;
  padding: 14px 16px;
  overflow-x: hidden;
}

/* 
   Bootstrap universal overrides (both themes)
    */

.form-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Buttons */
.btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
.btn-success {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}
.btn-outline-danger {
  color: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
}
.btn-outline-danger:hover {
  background-color: rgba(220,38,38,.12) !important;
  color: var(--accent-red) !important;
}
.btn-outline-info {
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}
.btn-outline-info:hover {
  background-color: rgba(2,132,199,.12) !important;
}

/* Nav pills */
.nav-pills .nav-link {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  font-family: 'Nunito', sans-serif;
}
.nav-pills .nav-link:hover {
  color: var(--text-default);
  background: var(--bg-hover);
}
.nav-pills .nav-link.active {
  background-color: var(--accent) !important;
  color: #fff !important;
}

/* Spinner */
.spinner-border { color: var(--accent); }

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 16px 0;
}

/* Progress bar */
.progress {
  background-color: var(--border-color) !important;
  height: 6px;
  border-radius: 3px;
}
.progress-bar {
  background: linear-gradient(90deg, #6B8DE3, #7D1C8D);
  border-radius: 3px;
}

/* 
   Bootstrap dark-mode overrides
    */

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--bg-input) !important;
  border-color: var(--border-light) !important;
  color: var(--text-white) !important;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--bg-input) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(47,73,208,.18) !important;
  color: var(--text-white) !important;
}
[data-theme="dark"] .form-control::placeholder { color: var(--text-muted) !important; }

[data-theme="dark"] select option {
  background-color: #242424;
  color: var(--text-white);
}

[data-theme="dark"] .btn-outline-secondary {
  color: var(--text-muted) !important;
  border-color: var(--border-light) !important;
  font-family: 'Nunito', sans-serif;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-white) !important;
}

[data-theme="dark"] .card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .card-body { color: var(--text-default); }

[data-theme="dark"] .table {
  color: var(--text-default) !important;
  border-color: var(--border-color) !important;
  font-size: 13px;
}
[data-theme="dark"] .table thead th {
  background-color: var(--bg-sidebar-top) !important;
  color: var(--text-muted) !important;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-color: var(--border-color) !important;
  padding: 10px 12px;
}
[data-theme="dark"] .table tbody td {
  border-color: var(--border-color) !important;
  vertical-align: middle;
  padding: 10px 12px;
}
[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-white) !important;
}
[data-theme="dark"] .table-bordered { border-color: var(--border-color) !important; }
[data-theme="dark"] .table-light { background-color: var(--bg-sidebar-top) !important; }

[data-theme="dark"] .modal-content {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-default);
}
[data-theme="dark"] .modal-header { border-color: var(--border-color) !important; }
[data-theme="dark"] .modal-footer { border-color: var(--border-color) !important; }
[data-theme="dark"] .modal-title { color: var(--text-white); font-weight: 700; }
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1);
  opacity: .5;
}
[data-theme="dark"] .btn-close:hover { opacity: 1; }

[data-theme="dark"] .badge.bg-secondary { background-color: #353535 !important; color: #aaa; }

[data-theme="dark"] .alert-danger {
  background-color: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: #fca5a5 !important;
}
[data-theme="dark"] .alert-success {
  background-color: rgba(34,197,94,.12) !important;
  border-color: rgba(34,197,94,.3) !important;
  color: #86efac !important;
}
[data-theme="dark"] .alert-info {
  background-color: rgba(56,189,248,.12) !important;
  border-color: rgba(56,189,248,.3) !important;
  color: #7dd3fc !important;
}
[data-theme="dark"] .alert-warning {
  background-color: rgba(247,185,28,.12) !important;
  border-color: rgba(247,185,28,.3) !important;
  color: #fcd34d !important;
}

[data-theme="dark"] .input-group-text {
  background-color: var(--bg-sidebar-top) !important;
  border-color: var(--border-light) !important;
  color: var(--text-muted) !important;
}

[data-theme="dark"] .list-group-item {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-default) !important;
}
[data-theme="dark"] .list-group-item:hover { background-color: var(--bg-hover) !important; }
[data-theme="dark"] .list-group-item.active {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: #242424 !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] .dropdown-item { color: var(--text-default) !important; }
[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-white) !important;
}
[data-theme="dark"] .dropdown-divider { border-color: var(--border-color) !important; }

[data-theme="dark"] .tooltip-inner {
  background-color: #242424;
  border: 1px solid var(--border-color);
}

/*  Light mode card / table / form overrides  */
:root:not([data-theme="dark"]) .form-control,
:root:not([data-theme="dark"]) .form-select {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  border-color: var(--border-light);
}
:root:not([data-theme="dark"]) .form-control:focus,
:root:not([data-theme="dark"]) .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(47,73,208,.15) !important;
}
:root:not([data-theme="dark"]) .table {
  font-size: 13px;
}
:root:not([data-theme="dark"]) .table thead th {
  background-color: var(--bg-sidebar-top);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 10px 12px;
  color: var(--text-muted);
}
:root:not([data-theme="dark"]) .table tbody td {
  vertical-align: middle;
  padding: 10px 12px;
}

/* 
   Scheduler
    */

/* Post column container */
.sched-post-col {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}
.sched-post-hdr {
  background-color: var(--bg-sidebar-top);
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-white);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Status card background — light mode */
.scard-bg-reserved        { background-color: #eef2ff; }
.scard-bg-pending_payment { background-color: #fef9c3; }
.scard-bg-confirmed       { background-color: #f0fdf4; }
.scard-bg-in_work         { background-color: #fff7ed; }
.scard-bg-ready           { background-color: #eff6ff; }
.scard-bg-done            { background-color: #f9fafb; }
.scard-bg-no_show         { background-color: #fff1f2; }

/* Status card background — dark mode */
[data-theme="dark"] .scard-bg-reserved        { background-color: #1a2040; }
[data-theme="dark"] .scard-bg-pending_payment { background-color: #1f1a08; }
[data-theme="dark"] .scard-bg-confirmed       { background-color: #0a1f15; }
[data-theme="dark"] .scard-bg-in_work         { background-color: #1f1208; }
[data-theme="dark"] .scard-bg-ready           { background-color: #071c20; }
[data-theme="dark"] .scard-bg-done            { background-color: #1c1c1c; }
[data-theme="dark"] .scard-bg-no_show         { background-color: #1f0a0a; }

/* 
   Kanban
    */
.kanban-col {
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  flex-shrink: 0;
}
.kanban-col-header {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kanban-card {
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.kanban-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Kanban column header backgrounds — light mode */
.kboard-hdr-reserved        { background-color: #eef2ff; border-radius: 12px 12px 0 0; }
.kboard-hdr-pending_payment { background-color: #fef9c3; border-radius: 12px 12px 0 0; }
.kboard-hdr-confirmed       { background-color: #f0fdf4; border-radius: 12px 12px 0 0; }
.kboard-hdr-in_work         { background-color: #fff7ed; border-radius: 12px 12px 0 0; }
.kboard-hdr-ready           { background-color: #eff6ff; border-radius: 12px 12px 0 0; }
.kboard-hdr-done            { background-color: #f9fafb; border-radius: 12px 12px 0 0; }
.kboard-hdr-no_show         { background-color: #fff1f2; border-radius: 12px 12px 0 0; }

/* Kanban drop zone backgrounds — light mode */
.kboard-zone-reserved        { background-color: rgba(238,242,255,.5); }
.kboard-zone-pending_payment { background-color: rgba(254,249,195,.5); }
.kboard-zone-confirmed       { background-color: rgba(240,253,244,.5); }
.kboard-zone-in_work         { background-color: rgba(255,247,237,.5); }
.kboard-zone-ready           { background-color: rgba(239,246,255,.5); }
.kboard-zone-done            { background-color: rgba(249,250,251,.5); }
.kboard-zone-no_show         { background-color: rgba(255,241,242,.5); }

/* Kanban column header backgrounds — dark mode */
[data-theme="dark"] .kboard-hdr-reserved        { background-color: #1a2040; }
[data-theme="dark"] .kboard-hdr-pending_payment { background-color: #1f1a08; }
[data-theme="dark"] .kboard-hdr-confirmed       { background-color: #0a1f15; }
[data-theme="dark"] .kboard-hdr-in_work         { background-color: #1f1208; }
[data-theme="dark"] .kboard-hdr-ready           { background-color: #071c20; }
[data-theme="dark"] .kboard-hdr-done            { background-color: #1c1c1c; }
[data-theme="dark"] .kboard-hdr-no_show         { background-color: #1f0a0a; }

/* Kanban drop zone — dark mode */
[data-theme="dark"] .kboard-zone-reserved        { background-color: rgba(26,32,64,.4); }
[data-theme="dark"] .kboard-zone-pending_payment { background-color: rgba(31,26,8,.4); }
[data-theme="dark"] .kboard-zone-confirmed       { background-color: rgba(10,31,21,.4); }
[data-theme="dark"] .kboard-zone-in_work         { background-color: rgba(31,18,8,.4); }
[data-theme="dark"] .kboard-zone-ready           { background-color: rgba(7,28,32,.4); }
[data-theme="dark"] .kboard-zone-done            { background-color: rgba(28,28,28,.4); }
[data-theme="dark"] .kboard-zone-no_show         { background-color: rgba(31,10,10,.4); }

/* 
   Status badges
    */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.status-reserved        { background: rgba(99,102,241,.12);  color: #4338ca; }
.status-pending_payment { background: rgba(217,119,6,.12);   color: #b45309; }
.status-confirmed       { background: rgba(22,163,74,.12);   color: #15803d; }
.status-in_work         { background: rgba(234,88,12,.12);   color: #c2410c; }
.status-ready           { background: rgba(2,132,199,.12);   color: #0369a1; }
.status-done            { background: rgba(107,114,128,.12); color: #4b5563; }
.status-no_show         { background: rgba(220,38,38,.12);   color: #b91c1c; }

[data-theme="dark"] .status-reserved        { background: rgba(168,85,247,.15); color: #c084fc; }
[data-theme="dark"] .status-pending_payment { background: rgba(249,115,22,.15); color: #fb923c; }
[data-theme="dark"] .status-confirmed       { background: rgba(47,73,208,.2);   color: #818cf8; }
[data-theme="dark"] .status-in_work         { background: rgba(247,185,28,.15); color: #fcd34d; }
[data-theme="dark"] .status-ready           { background: rgba(34,211,238,.15); color: #22d3ee; }
[data-theme="dark"] .status-done            { background: rgba(34,197,94,.15);  color: #4ade80; }
[data-theme="dark"] .status-no_show         { background: rgba(239,68,68,.15);  color: #f87171; }

/* Payment badges */
.pay-meta-paid    { background-color: #f0fdf4; color: #166534; }
.pay-meta-partial { background-color: #fef9c3; color: #92400e; }
.pay-meta-unpaid  { background-color: #fff1f2; color: #991b1b; }

[data-theme="dark"] .pay-meta-paid    { background-color: rgba(34,197,94,.15);  color: #4ade80; }
[data-theme="dark"] .pay-meta-partial { background-color: rgba(247,185,28,.15); color: #fcd34d; }
[data-theme="dark"] .pay-meta-unpaid  { background-color: rgba(239,68,68,.15);  color: #f87171; }

/* 
   Analytics
    */
.analytics-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
}
.analytics-kpi-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-white);
  line-height: 1;
}
.analytics-kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.analytics-chart-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

/* 
   Workspace / inquiries / clients
    */
.workspace-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.workspace-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}
.workspace-kpi-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-white);
}
.workspace-kpi-label {
  font-size: 12px;
  color: var(--text-muted);
}

/* Inquiry card */
.inquiry-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.inquiry-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* Client card */
.client-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.client-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* 
   Settings
    */
.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

/* 
   Cash session bar
    */
.cash-session-bar {
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.2);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: #15803d;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
[data-theme="dark"] .cash-session-bar { color: #4ade80; }

.cash-session-closed {
  color: var(--text-muted);
  background: rgba(220,38,38,.06);
  border-color: rgba(220,38,38,.2);
}

/* 
   Misc utilities
    */
.text-accent   { color: var(--accent); }
.text-yellow   { color: var(--accent-yellow); }
.text-green    { color: var(--accent-green); }
.text-red      { color: var(--accent-red); }
.text-white    { color: var(--text-white) !important; }
.text-muted-crm { color: var(--text-muted) !important; }
.rounded-crm   { border-radius: 10px; }
.bg-card-crm   { background-color: var(--bg-card); }

/* Attachment grid */
.attachment-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: border-color .15s;
}
.attachment-thumb:hover { border-color: var(--accent); }

/* Audit log */
.audit-entry {
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-muted);
}
.audit-entry:last-child { border-bottom: none; }

/* Payment block inside order modal */
.payment-block {
  background: rgba(22,163,74,.05);
  border: 1px solid rgba(22,163,74,.15);
  border-radius: 10px;
  padding: 14px 16px;
}
.payment-block-title {
  font-weight: 700;
  color: var(--accent-green);
  margin-bottom: 10px;
  font-size: 13px;
}

/* Autocomplete dropdown */
.crm-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  z-index: 9999;
  box-shadow: var(--shadow);
  display: none;
  max-height: 220px;
  overflow-y: auto;
}
.crm-autocomplete-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-default);
  transition: background .1s;
}
.crm-autocomplete-item:last-child { border-bottom: none; }
.crm-autocomplete-item:hover { background: var(--bg-hover); }
.crm-autocomplete-item .fw-semibold { color: var(--text-white); }

/* 
   Responsive
    */
@media (max-width: 1023px) {
  .crm-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w);
  }
  .crm-sidebar.open {
    transform: translateX(0);
  }
  .crm-sidebar-overlay.show {
    display: block;
  }
  .crm-main {
    margin-left: 0;
  }
  .crm-sidebar-toggle {
    display: flex;
  }
  .crm-topbar { padding: 8px 8px 8px 58px; }
  .crm-cash-bar { padding: 6px 8px 6px 58px; }
}

@media (max-width: 575px) {
  .crm-content { padding: 10px; }
  .crm-topbar { padding: 8px 8px 8px 54px; }
  .crm-cash-bar { padding: 6px 8px 6px 54px; }
}
