:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --text: #1a2130;
  --text-muted: #5b6577;
  --border: #e2e6ee;
  --primary: #3651e0;
  --primary-hover: #2b41c2;
  --primary-text: #ffffff;
  --danger: #d33e3e;
  --success: #1f9d55;
  --warning-bg: #fff4cc;
  --warning-text: #0d0d0d;
  --shadow: 0 4px 20px rgba(20, 25, 40, .08);
}

html[data-theme="dark"] {
  --bg: #10141d;
  --surface: #1a2030;
  --surface-2: #222939;
  --text: #e7eaf2;
  --text-muted: #9aa3b7;
  --border: #2b3346;
  --primary: #5b74f5;
  --primary-hover: #7186f7;
  --primary-text: #0d0f16;
  --danger: #ef6060;
  --success: #35c876;
  --warning-bg: #4a3d10;
  --warning-text: #ffe98a;
  --shadow: 0 4px 24px rgba(0, 0, 0, .45);
}

body {
  background: var(--bg);
  color: var(--text);
}

.crm-surface { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.crm-surface-2 { background: var(--surface-2); }
.crm-border { border-color: var(--border); }
.crm-text-muted { color: var(--text-muted); }
.crm-btn-primary { background: var(--primary); color: var(--primary-text); }
.crm-btn-primary:hover { background: var(--primary-hover); }
.crm-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

input.crm-input, select.crm-input, textarea.crm-input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
input.crm-input:focus, select.crm-input:focus, textarea.crm-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(54,81,224,.15);
}

.crm-modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,12,20,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
}
.crm-modal-box {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  box-shadow: var(--shadow); border-radius: .75rem; max-width: 26rem; width: 100%;
  padding: 1.5rem; animation: crmPop .15s ease-out;
}
@keyframes crmPop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.crm-toast {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  box-shadow: var(--shadow); border-radius: .5rem; padding: .75rem 1rem;
  font-size: .875rem; min-width: 16rem;
}

.crm-sidebar-link { color: var(--text-muted); }
.crm-sidebar-link:hover, .crm-sidebar-link.active { background: var(--surface-2); color: var(--text); }

@media (max-width: 767px) {
  #crmSidebar { transform: translateX(-100%); transition: transform .2s ease; }
  #crmSidebar.open { transform: translateX(0); }
}

.crm-detail-backdrop {
  position: fixed; inset: 0; background: rgba(10,12,20,.45); z-index: 900;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.crm-detail-backdrop.open { opacity: 1; pointer-events: auto; }
.crm-detail-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 32rem;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  z-index: 901; transform: translateX(100%); transition: transform .22s ease;
  overflow-y: auto;
}
.crm-detail-panel.open { transform: translateX(0); }

.crm-board-col { min-width: 15rem; }
.crm-board-card { cursor: pointer; }
.crm-board-card:hover { box-shadow: var(--shadow); }