@import url('./crm-design-tokens.css?v=20261105-v1');

/* ds-allow-hardcode:start -- legacy CSS adapter: exact geometry mirrors existing inline layouts; semantic theme values remain tokenized above. */

#crm-data-state:not([hidden]) { position:fixed;inset:0;z-index:10001;display:grid;place-items:center;padding:24px;background:var(--bg-app);color:var(--text-primary);overflow:auto; }
.crm-data-state-card { width:min(440px,100%);padding:var(--modal-padding);border:1px solid var(--border);border-radius:var(--modal-radius);background:var(--bg-surface); }
.crm-data-state-card h2 { font-size:19px;line-height:25px;margin:0 0 12px; }
.crm-data-state-card p { font-size:13px;line-height:20px;margin:0 0 20px;overflow-wrap:anywhere; }
.crm-data-state-card button { min-height:44px; }
html { background:var(--bg-app); }
body {
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-feature-settings:"cv01" 1,"ss03" 1,"tnum" 1;
  letter-spacing:-.006em;
  background:var(--bg-app);
}
button,input,select,textarea { font:inherit; }
button { letter-spacing:inherit; }
::selection { background:var(--accent-light);color:var(--text-primary); }
input, select, textarea, progress { accent-color:var(--action-primary); }
input:-webkit-autofill { -webkit-text-fill-color:var(--text-primary);box-shadow:0 0 0 1000px var(--bg-surface) inset; }

.skip-link {
  position:fixed;left:16px;top:12px;z-index:10000;
  padding:10px 14px;border-radius:8px;background:var(--text-primary);color:var(--bg-surface);
  font-size:13px;font-weight:650;text-decoration:none;transform:translateY(-160%);
}
.skip-link:focus { transform:translateY(0); }
.sr-only {
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--accent)!important;
  outline-offset:2px!important;
  box-shadow:var(--crm-focus)!important;
}
:where(button,a,input,select,textarea,[tabindex]):focus:not(:focus-visible) { outline:none; }

/* App shell */
@media (min-width:1201px) {
  #sidebar { width:236px; }
  #main { margin-left:236px; }
}

#sidebar {
  background:
    radial-gradient(circle at 10% 0%,rgba(121,207,160,.10),transparent 19rem),
    linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg-dark));
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:14px 0 45px rgba(23, 23, 23,.08);
}

.logo {
  padding:16px 14px 15px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:transparent;
}
.product-mark { display:flex;align-items:center;gap:10px;margin:0 2px 17px; }
.product-mark-icon {
  display:block;width:31px;height:31px;flex:0 0 31px;
}
.product-mark-copy { display:flex;flex-direction:column;color:#f8f8f8;font-size:12px;font-weight:650;letter-spacing:-.01em; }
.product-mark-copy small { margin-top:2px;color:rgba(229, 229, 229,.42);font-size:9px;font-weight:550;letter-spacing:.105em;text-transform:uppercase; }
.logo-user-block {
  gap:10px;margin:0;padding:10px;border:1px solid rgba(255,255,255,.075);border-radius:10px;
  background:rgba(255,255,255,.035);
}
.logo-user-badge { width:31px;height:31px;border-radius:9px;background:rgba(121,207,160,.16);color:#d8f1e2;font-size:10px; }
.logo-user-name { color:rgba(249, 249, 249,.92);font-size:12px;font-weight:600; }
.logo-user-role { margin-top:2px;color:rgba(229, 229, 229,.42);font-size:9.5px; }

.nav-section { padding:10px 9px; }
#nav-items-container { gap:3px; }
.nav-item {
  width:100%;min-height:38px;margin:0;padding:0 10px;border:0;border-radius:8px;
  color:rgba(229, 229, 229,.57);background:transparent;text-align:left;font-size:12.5px;font-weight:500;
  cursor:pointer;appearance:none;position:relative;
}
.nav-item:hover { background:rgba(255,255,255,.055);color:rgba(249, 249, 249,.92); }
.nav-item.active {
  color:#f9f9f9;font-weight:620;border:0;
  background:linear-gradient(90deg,rgba(22,131,75,.26),rgba(121,207,160,.08));
  box-shadow:inset 0 0 0 1px rgba(164,225,191,.13);
}
.nav-item.active::after {
  content:"";position:absolute;right:10px;width:5px;height:5px;border-radius:50%;
  background:#79cfa0;box-shadow:0 0 0 3px rgba(121,207,160,.13);
}
.nav-icon { width:16px;height:16px;opacity:.62; }
.nav-item.active .nav-icon { opacity:1;color:#acd9bd; }
.nav-item.active .nav-drag-handle { display:none; }

.sidebar-bottom { padding:13px 14px 15px;border-top-color:rgba(255,255,255,.075); }
.theme-toggle { min-height:28px; }
.toggle-switch { width:34px;height:20px; }
.toggle-slider { background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.toggle-slider::before { width:14px;height:14px;background:#f6f6f6;box-shadow:0 1px 3px rgba(0,0,0,.35); }
.toggle-switch input:checked + .toggle-slider { background:var(--action-primary)!important; }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(14px); }

/* Workspace chrome */
.topbar {
  height:60px;min-height:60px!important;padding:0 28px;
  background:color-mix(in srgb,var(--bg-surface) 88%,transparent)!important;
  border-bottom:1px solid var(--border-light);backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:none;
}
.page-title { font-size:17px;font-weight:680;letter-spacing:-.025em; }
.topbar-right { gap:8px; }
.content { padding:26px 28px 32px; }
#page-clients .content { height:calc(100vh - 60px)!important; }

.btn,.btn-logout,.icon-btn,.burger-btn,.cal-nav-btn,
.form-input,.search-input,input:not([type="checkbox"]):not([type="radio"]),select,textarea {
  border-color:var(--border-control);border-radius:var(--crm-head-control-radius);
}
.btn,.btn-logout,.icon-btn,.burger-btn,.cal-nav-btn {
  color:var(--text-secondary);background:var(--bg-surface);box-shadow:0 1px 2px rgba(23, 23, 23,.025);
  font-weight:600;transition:var(--transition);
}
.btn:hover,.btn-logout:hover,.icon-btn:hover,.burger-btn:hover,.cal-nav-btn:hover {
  color:var(--text-primary);background:var(--bg-surface-2);border-color:color-mix(in srgb,var(--accent) 34%,var(--border));
  transform:translateY(-1px);
}
.btn:active,.btn-logout:active,.icon-btn:active,.burger-btn:active,.cal-nav-btn:active { transform:scale(.97); }
.btn-primary,
body:not(.dark) .btn-primary,
body.dark .btn-primary {
  color:var(--action-primary-contrast)!important;background:var(--action-primary)!important;border-color:var(--action-primary)!important;
  box-shadow:0 1px 2px rgba(23,23,23,.10),0 7px 18px rgba(23,23,23,.13)!important;
}
.btn-primary:hover,
body:not(.dark) .btn-primary:hover,
body.dark .btn-primary:hover { background:var(--action-primary-hover)!important;border-color:var(--action-primary-hover)!important; }
.btn-danger { color:#b42335;background:transparent;border-color:#e8b8c0; }
.btn-danger:hover { color:#951c2d;background:#fff1f3;border-color:#df9aa6; }
body.dark .btn-danger { color:#f4a6b2;border-color:#69323d;background:transparent; }
body.dark .btn-danger:hover { color:#ffc1ca;background:#321b21;border-color:#8b4653; }

.form-input,.search-input,
.modal input:not([type="checkbox"]):not([type="radio"]),.modal select,.modal textarea {
  background:var(--bg-surface)!important;color:var(--text-primary)!important;
  border:1px solid var(--border-control)!important;box-shadow:0 1px 2px rgba(23, 23, 23,.025)!important;
  transition:var(--transition)!important;
}
.form-input:hover,.search-input:hover,
.modal input:not([type="checkbox"]):not([type="radio"]):hover,.modal select:hover,.modal textarea:hover { border-color:color-mix(in srgb,var(--accent) 28%,var(--border))!important; }
.form-input:focus,.search-input:focus,
.modal input:not([type="checkbox"]):not([type="radio"]):focus,.modal select:focus,.modal textarea:focus {
  border-color:var(--accent)!important;box-shadow:var(--crm-focus)!important;outline:none!important;
}
input::placeholder,textarea::placeholder { color:var(--text-muted);opacity:.78; }

/* Segmented controls and selected state */
.crm-field-error { margin-top:6px;color:var(--status-danger);font-size:12px;line-height:16px; }
[aria-invalid="true"] { outline:2px solid var(--status-danger);outline-offset:1px; }
.crm-segment { min-height:var(--control-height);padding:6px 12px;border:1px solid transparent;border-radius:var(--control-radius);background:transparent;color:var(--text-secondary);font-family:inherit;font-size:var(--control-font);font-weight:600;line-height:16px;cursor:pointer;white-space:nowrap; }
.crm-segment[aria-pressed="true"] { background:var(--text-primary);color:var(--bg-surface);border-color:var(--text-primary); }
.crm-segment:focus-visible { outline:3px solid var(--accent);outline-offset:2px; }
.crm-segment:disabled { opacity:.5;cursor:not-allowed; }
.cal-view-switch,.dash-period-toggle,.segmented-mini,
#orders-filter-bar div[style*="background:var(--bg-surface-2)"],
#page-finance .debt-calendar-filters,#page-finance .payment-group-filters {
  background:var(--bg-surface-2)!important;border-color:var(--border-light)!important;
  box-shadow:inset 0 1px 2px rgba(23, 23, 23,.025);
}
body:not(.dark) :is(.btn.active,.cal-view-btn.active,.dash-period-btn.active,.dash-nav-btn2.active,.order-view-btn.active,.filter-btn.active,.client-filter-btn.active,.of-quick-btn.active,.tab-btn.active),
body.dark :is(.btn.active,.cal-view-btn.active,.dash-period-btn.active,.dash-nav-btn2.active,.order-view-btn.active,.filter-btn.active,.client-filter-btn.active,.of-quick-btn.active,.tab-btn.active) {
  color:var(--bg-surface)!important;background:var(--text-primary)!important;border-color:var(--text-primary)!important;
  box-shadow:0 1px 2px rgba(23, 23, 23,.12)!important;
}

/* Tables and data surfaces */
.table-wrap,.card,.stat-card,.dash-metric-card,
.settings-block,.svc-card,.kanban-column,.payment-panel,.debt-card {
  background:var(--bg-surface);border-color:var(--border-light);box-shadow:var(--shadow-sm);
}
.table-wrap { border:1px solid var(--border-light);border-radius:var(--card-radius);overflow:auto; }
table { border-collapse:separate;border-spacing:0; }
th {
  padding:11px 14px;background:var(--bg-surface-2);color:var(--text-muted);
  font-size:10px;font-weight:650;letter-spacing:.065em;text-transform:uppercase;border-bottom:1px solid var(--border);
}
td { padding:12px 14px;border-bottom-color:var(--border-light); }
tbody tr { transition:background-color 120ms ease; }
tbody tr:hover { background:color-mix(in srgb,var(--accent-light) 40%,var(--bg-surface)); }
.cl-row.cl-selected { background:var(--accent-light)!important;border-left:0;box-shadow:inset 3px 0 var(--accent); }

.stat-card,.dash-metric-card { border-radius:var(--card-radius);padding:17px; }
.stat-label,.dash-metric-lbl { color:var(--text-muted);font-size:10px;font-weight:650;letter-spacing:.075em; }
.stat-value,.dash-metric-val { font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums; }

/* Dashboard: restore hierarchy despite legacy inline styles */
#orders-analytics-view > div > div[style*="background:var(--bg-surface)"],
#orders-analytics-view .dashboard-kpi-grid > div {
  background:var(--bg-surface)!important;border-color:var(--border-light)!important;
  border-radius:var(--card-radius)!important;box-shadow:var(--shadow-sm);
}
#orders-analytics-view .dashboard-kpi-grid { gap:12px!important; }
#orders-analytics-view .dashboard-kpi-grid > div { padding:17px!important; }
#orders-analytics-view .dashboard-kpi-grid > div:hover { border-color:color-mix(in srgb,var(--accent) 24%,var(--border))!important; }
#orders-analytics-view canvas { opacity:.93; }

/* Calendar, Kanban, settings */
#page-calendar > div[style*="height:44px"] {
  min-height:52px!important;height:52px!important;padding:8px 20px!important;
  background:var(--bg-surface)!important;border-bottom-color:var(--border-light)!important;
}
.cal-title-text { font-weight:640;letter-spacing:-.01em; }
.cal-grid,.cal-month-grid,.cal-week-grid { border-color:var(--border-light); }
.kanban-column { border-radius:var(--card-radius); }
.kanban-card { border-color:var(--border-light);box-shadow:0 1px 2px rgba(23, 23, 23,.04); }
.settings-nav-btn,.svc-nav-btn { border-radius:var(--control-radius); }

.crm-profile > summary { cursor:pointer;list-style:none; }
.crm-profile > summary::-webkit-details-marker { display:none; }
.crm-profile > summary::after { content:'⌄';margin-left:auto;color:rgba(249, 249, 249,.92); }
.crm-profile[open] > summary::after { content:'⌃'; }
.crm-profile > summary:focus-visible { outline:3px solid var(--accent);outline-offset:2px; }
.crm-profile-actions { padding-top:8px; }
.crm-profile-actions .btn { width:100%;min-height:44px; }

/* Dialogs */
.modal-bg { background:rgba(14, 14, 14,.55)!important;backdrop-filter:blur(8px) saturate(.9)!important; }
.modal,.generic-modal-card,.ui-modal-card,.debt-card-modal,.debt-calendar-modal {
  border:1px solid var(--border)!important;border-radius:var(--modal-radius)!important;
  background:var(--bg-surface)!important;box-shadow:var(--shadow-lg)!important;
}
.modal-header,.ui-modal-head,.debt-card-header,.debt-calendar-modal-head,
#modal-edit-order > .modal > div:first-child {
  padding:20px 24px 16px!important;background:var(--bg-surface)!important;border-bottom-color:var(--border-light)!important;
}
.modal-header h3,.ui-modal-title,.debt-card-title,.debt-calendar-modal-title { font-size:19px!important;font-weight:660!important;letter-spacing:-.03em!important; }
.modal-body,.ui-modal-body,.debt-card-form,.debt-card-summary,
#modal-edit-order > .modal > div:nth-child(2) { background:var(--bg-surface-2)!important; }
.modal-footer,.ui-modal-actions,.debt-card-footer,.debt-calendar-modal-actions,
#modal-edit-order > .modal > div:last-child { background:var(--bg-surface)!important;border-top-color:var(--border-light)!important; }

/* Login: asymmetric editorial split */
#login-screen {
  justify-content:center;gap:clamp(70px,9vw,150px);padding:clamp(30px,6vw,84px);
  background-color:#0d0d0d;
}
#login-screen::before {
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;mask-image:linear-gradient(90deg,#000,transparent 78%);
}
.login-bg-overlay { background:linear-gradient(90deg,rgba(7, 7, 7,.18),rgba(7, 7, 7,.52))!important; }
.login-context { position:relative;z-index:2;width:min(470px,38vw);color:#f6f6f6; }
.login-context-kicker { margin-bottom:20px;color:#a4e1bf;font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase; }
.login-context h1 { margin:0 0 22px;font-size:clamp(42px,4.5vw,66px);line-height:1.02;font-weight:610;letter-spacing:-.055em; }
.login-context p { max-width:36ch;color:#b5b5b5;font-size:16px;line-height:1.55;letter-spacing:-.015em; }
.login-context-meta { display:flex;gap:8px;margin-top:32px; }
.login-context-meta span { padding:6px 9px;border:1px solid rgba(255,255,255,.10);border-radius:6px;background:rgba(255,255,255,.035);color:#979797;font-size:10px;font-weight:600; }
.login-box {
  position:relative;z-index:2;width:min(390px,calc(100vw - 36px));padding:34px!important;
  border:1px solid rgba(255,255,255,.13)!important;border-radius:18px!important;
  background:rgba(23, 23, 23,.82)!important;backdrop-filter:blur(20px) saturate(1.1)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.login-logo-icon { width:42px!important;height:42px!important; }
.login-title { font-size:16px!important;font-weight:690!important;letter-spacing:.025em!important; }
.login-title-sub { color:#a4a4a4!important; }
.login-divider { border-color:rgba(255,255,255,.09)!important; }
.login-welcome { font-size:20px!important;font-weight:640!important;letter-spacing:-.025em; }
.login-hint { color:#979797!important;line-height:1.5; }
.login-pw-inner { min-height:47px;border-color:var(--border-control)!important;border-radius:9px!important;background:rgba(255,255,255,.045)!important; }
.login-pw-inner:focus-within { border-color:var(--border-control)!important;box-shadow:var(--crm-focus)!important; }
.login-pw-input { color:#f4f4f4!important;font-size:13px!important; }
.login-pw-input::placeholder { color:#a4a4a4!important; }
.login-btn {
  min-height:47px;border:1px solid var(--action-primary)!important;border-radius:9px!important;
  background:var(--action-primary)!important;color:var(--action-primary-contrast)!important;font-weight:650!important;
  box-shadow:0 10px 28px rgba(23,23,23,.24)!important;transition:var(--transition)!important;
}
.login-btn:hover { background:var(--action-primary-hover)!important;transform:translateY(-1px); }
.login-btn:active { transform:scale(.98); }
.login-footer { color:#8f8f8f!important; }

/* Responsive continuity */
@media (max-width:1200px) {
  .content { padding:22px 20px 28px; }
  .topbar { padding-inline:18px; }
  .dashboard-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
}
@media (max-width:760px) {
  .topbar { height:56px;min-height:56px!important;padding-inline:12px; }
  .page-title { font-size:16px; }
  .content { padding:16px 12px 24px; }
  #page-clients .content { height:calc(100vh - 56px)!important; }
  .dashboard-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important; }
  #orders-analytics-view .dashboard-kpi-grid > div { padding:14px!important; }
  #login-screen { justify-content:center;padding:18px; }
  .login-context { display:none; }
  .login-box { padding:27px 24px!important; }
  .modal-bg { padding:10px!important; }
}
@media (max-width:420px) {
  .dashboard-kpi-grid { grid-template-columns:1fr!important; }
}

@media (hover:none) {
  .btn:hover,.btn-logout:hover,.icon-btn:hover,.burger-btn:hover,.cal-nav-btn:hover { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
  .btn:hover,.btn-logout:hover,.icon-btn:hover,.burger-btn:hover,.cal-nav-btn:hover,.login-btn:hover { transform:none!important; }
}
/* ds-allow-hardcode:end */