/* AC7 CRM 2026 — single, shared visual layer. Loaded AFTER all legacy styles.
   Functional calendar event colors and custom screen layouts remain untouched. */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --ac7-primary: #4a91ff;
  --ac7-primary-hover: #6fa8ff;
  --ac7-primary-soft: rgba(74, 145, 255, .15);
  --ac7-bg: #0a1221;
  --ac7-panel: #121f32;
  --ac7-elevated: #182a40;
  --ac7-menu: #0d192b;
  --ac7-field: #101c2e;
  --ac7-border: #29415e;
  --ac7-ink: #ecf4ff;
  --ac7-muted: #a9bcd5;
  --ac7-shadow: 0 15px 40px rgba(0, 0, 0, .15);
  --bg: var(--ac7-bg);
  --surface: var(--ac7-panel);
  --surface2: var(--ac7-elevated);
  --surface3: var(--ac7-elevated);
  --outline: var(--ac7-border);
  --text: var(--ac7-ink);
  --muted: var(--ac7-muted);
  --blue: var(--ac7-primary);
  --pu-bg: var(--ac7-bg);
  --pu-surface: var(--ac7-panel);
  --pu-raised: var(--ac7-elevated);
  --pu-sidebar: var(--ac7-menu);
  --pu-border: var(--ac7-border);
  --pu-text: var(--ac7-ink);
  --pu-muted: var(--ac7-muted);
  --pu-primary: var(--ac7-primary);
  --pu-primary-soft: var(--ac7-primary-soft);
  --pu-table-head: #1a304a;
  --pu-row-hover: #1b3450;
  --pu-row-alt: #14253a;
  --pu-input: var(--ac7-field);
  --pu-button: var(--ac7-elevated);
  --pu-shadow: var(--ac7-shadow);
}
html[data-theme="light"] {
  color-scheme: light;
  --ac7-primary: #1766c7;
  --ac7-primary-hover: #0f54af;
  --ac7-primary-soft: #e6f1ff;
  --ac7-bg: #f3f7fc;
  --ac7-panel: #fff;
  --ac7-elevated: #eef4fc;
  --ac7-menu: #fff;
  --ac7-field: #fff;
  --ac7-border: #d5e2f2;
  --ac7-ink: #142b46;
  --ac7-muted: #536e8d;
  --ac7-shadow: 0 12px 35px rgba(24, 75, 132, .07);
  --bg: var(--ac7-bg);
  --surface: var(--ac7-panel);
  --surface2: var(--ac7-elevated);
  --surface3: var(--ac7-elevated);
  --outline: var(--ac7-border);
  --text: var(--ac7-ink);
  --muted: var(--ac7-muted);
  --blue: var(--ac7-primary);
  --pu-bg: var(--ac7-bg);
  --pu-surface: var(--ac7-panel);
  --pu-raised: var(--ac7-elevated);
  --pu-sidebar: var(--ac7-menu);
  --pu-border: var(--ac7-border);
  --pu-text: var(--ac7-ink);
  --pu-muted: var(--ac7-muted);
  --pu-primary: var(--ac7-primary);
  --pu-primary-soft: var(--ac7-primary-soft);
  --pu-table-head: #e8f1fb;
  --pu-row-hover: #edf5ff;
  --pu-row-alt: #f7faff;
  --pu-input: var(--ac7-field);
  --pu-button: var(--ac7-elevated);
  --pu-shadow: var(--ac7-shadow);
}
html,body { min-width: 0; }
body { background: var(--ac7-bg); color: var(--ac7-ink); font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
.app-shell, .app-shell .main { background: var(--ac7-bg); color: var(--ac7-ink); }
.app-shell .sidebar { background: var(--ac7-menu); border-color: var(--ac7-border); }
.app-shell .topbar { background: var(--ac7-panel); border-color: var(--ac7-border); }
.app-shell .brand small, .app-shell .nav-title, .app-shell .crumb, .muted,
.app-shell .section-header p { color: var(--ac7-muted); }
.app-shell .navigation .nav-button { color: var(--ac7-muted); }
.app-shell .navigation .nav-button:hover, .app-shell .navigation .nav-button.active {
  background: var(--ac7-primary-soft); color: var(--ac7-ink); border-color: var(--ac7-border);
}
.app-shell .navigation .nav-button.active { box-shadow: inset -3px 0 0 var(--ac7-primary); }
.app-shell .panel, .app-shell .kpi, .app-shell .settings-row,
#modal-host .modal, .app-shell .data-table-wrap {
  background: var(--ac7-panel); color: var(--ac7-ink);
  border-color: var(--ac7-border); box-shadow: var(--ac7-shadow); border-radius: 14px;
}
.app-shell .kpi { background: var(--ac7-panel); }
.app-shell .kpi strong, .app-shell h1, .app-shell h2,
.app-shell h3, .app-shell .name-cell { color: var(--ac7-ink); }
.app-shell .kpi .glyph, .app-shell .acticon {
  background: var(--ac7-primary-soft); color: var(--ac7-primary);
}
.app-shell .btn, #modal-host .btn, .startup .btn {
  border: 1px solid var(--ac7-border); background: var(--ac7-elevated);
  color: var(--ac7-ink); border-radius: 10px;
}
.app-shell .btn:hover, #modal-host .btn:hover, .startup .btn:hover {
  background: var(--ac7-primary-soft); border-color: var(--ac7-primary);
}
.app-shell .btn.primary, #modal-host .btn.primary, .startup .btn.primary {
  background: linear-gradient(125deg, #2583ef, #165ec7);
  color: #fff; border-color: #3489e7;
}
.app-shell .btn.primary:hover, #modal-host .btn.primary:hover, .startup .btn.primary:hover {
  background: linear-gradient(125deg, #3e9bff, #2474d7); color:#fff;
}
.app-shell .field input, .app-shell .field select, .app-shell .field textarea,
#modal-host .field input, #modal-host .field select, #modal-host .field textarea,
.startup .field input, .app-shell .search, .app-shell .filterselect {
  background: var(--ac7-field); color: var(--ac7-ink);
  border: 1px solid var(--ac7-border); border-radius: 10px;
}
.app-shell .field label, #modal-host .field label, .startup .field label {
  color: var(--ac7-ink);
}
.app-shell :is(input, select, textarea)::placeholder, #modal-host :is(input, select, textarea)::placeholder {
  color: var(--ac7-muted); opacity: .9;
}
.app-shell :is(input, select, textarea):focus-visible,
#modal-host :is(input, select, textarea):focus-visible,
.startup :is(input, select, textarea):focus-visible,
.app-shell :is(button,a):focus-visible, #modal-host :is(button,a):focus-visible {
  outline: 2px solid var(--ac7-primary); outline-offset: 2px;
}
.app-shell .data-table-wrap { overflow-x: auto; }
.app-shell .data-table-wrap thead th { background: var(--pu-table-head); color:var(--ac7-ink); }
.app-shell .data-table-wrap tbody td { border-color: var(--ac7-border); }
.app-shell .data-table-wrap tbody tr:nth-child(even) { background: var(--pu-row-alt); }
.app-shell .data-table-wrap tbody tr:hover { background: var(--pu-row-hover); }
#modal-host .modal, .modal { background: var(--ac7-panel); color: var(--ac7-ink); }
#modal-host .modal-header, #modal-host .modal-footer, .modal-footer { border-color: var(--ac7-border); }
#modal-host .modal-footer, .modal-footer { background: var(--ac7-panel); }
.app-shell .detail { background: var(--ac7-elevated); color: var(--ac7-ink); }
/* Login is intentionally styled separately: the app shell isn't present yet. */
#app > .startup { background:var(--ac7-panel); border:1px solid var(--ac7-border);
  box-shadow:var(--ac7-shadow); border-radius:22px; padding:28px 32px 35px;
  max-width:min(440px,calc(100% - 30px)) !important; }
#app > .startup h2 {color:var(--ac7-ink);font-size:22px;margin:8px 0;}
#app > .startup p {color:var(--ac7-muted);line-height:1.85;}
#app > .startup .field input {width:100%; min-height:44px; padding:10px 12px;}
#app > .startup .crm-login-logo {width:120px;height:100px;object-fit:contain;}
/* Layout safety across all pages and custom modules. */
.app-shell .content, .app-shell .main, #modal-host .modal-content { min-width:0; }
.app-shell .panel, .app-shell .form-grid > *, .app-shell .panel-grid > * { min-width:0; }
.app-shell .toolbar, .app-shell .section-header, .app-shell .topbar-right { flex-wrap:wrap; }
.app-shell .data-table-wrap { max-width:100%; }
@media(max-width:900px) {
  .app-shell .content {padding:20px 16px;}
  .app-shell .topbar {height:auto; min-height:70px; padding:14px 16px;}
  .app-shell .section-header {align-items:flex-start;}
  .app-shell .section-header .actions {flex-wrap:wrap;}
  .app-shell .panel-grid {grid-template-columns:minmax(0,1fr);}
}
@media(max-width:650px) {
  .app-shell .content {padding:16px 12px;}
  .app-shell .kpi-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .app-shell .kpi {padding:13px;min-height:110px;}
  .app-shell .kpi strong {font-size:26px;}
  .app-shell .section-header h2 {font-size:20px;}
  #modal-host .modal-content {padding:16px 12px;}
  #modal-host .form-grid {grid-template-columns:1fr;}
  #modal-host .field.full {grid-column:1/-1;}
  .app-shell .toolbar > *, .app-shell .toolbar .search {max-width:100%;}
  #app > .startup {margin:5vh auto !important;padding:24px 20px;}
}
@media(max-width:390px) {
  .app-shell .kpi-grid {grid-template-columns:1fr;}
}

/* Contract document permissions */
.app-shell .contract-access-panel { border:1px solid var(--ac7-border); background:var(--ac7-elevated);
  padding:15px; margin-top:18px; border-radius:12px; }
.app-shell .contract-access-panel h4 { color:var(--ac7-ink); font-size:14px; margin:0 0 6px; }
.app-shell .contract-access-panel p { margin:0 0 10px; }
.app-shell .contract-access-row { display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:9px 0; border-top:1px solid var(--ac7-border); flex-wrap:wrap; }