/* Modern CRM Design System — Pure CSS */

:root {
  --primary: #4f46e5; --primary-hover: #4338ca; --primary-light: #eef2ff;
  --success: #10b981; --success-light: #ecfdf5;
  --danger: #f43f5e;  --danger-light: #fff1f2;
  --warning: #f59e0b; --warning-light: #fffbeb;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
  --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280;
  --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827;
  --bg: #f3f4f6; --surface: #fff; --text: #111827; --text-secondary: #6b7280;
  --sidebar-bg: #1e1b4b; --sidebar-text: #e0e7ff; --sidebar-active: #4f46e5;
  --navbar-bg: #fff; --navbar-h: 56px; --sidebar-w: 240px;
  --radius: 8px; --radius-sm: 6px; --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow: 0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --transition: 150ms ease; --font: -apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
}

@media (prefers-color-scheme:dark) {
  :root {
    --bg: #0f172a; --surface: #1e293b; --text: #f1f5f9; --text-secondary: #94a3b8;
    --gray-50: #1e293b; --gray-100: #334155; --gray-200: #475569; --gray-300: #64748b;
    --navbar-bg: #1e293b; --sidebar-bg: #0f172a; --sidebar-text: #c7d2fe;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 6px rgba(0,0,0,.4); --shadow-lg: 0 10px 15px rgba(0,0,0,.5);
    --primary-light: #312e81; --success-light: #064e3b; --danger-light: #4c0519; --warning-light: #78350f;
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}:is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:2px}

/* ── Layout ── */
.crm-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--sidebar-bg);color:var(--sidebar-text);z-index:40;overflow-y:auto;transition:transform var(--transition)}
.crm-sidebar .logo{padding:16px 20px;font-size:1.25rem;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.crm-sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 20px;color:var(--sidebar-text);transition:background var(--transition);border-radius:0 var(--radius) var(--radius) 0;margin:2px 12px 2px 0;font-size:.9rem}
.crm-sidebar nav a:hover,.crm-sidebar nav a.active{background:var(--sidebar-active);color:#fff}
.crm-navbar{position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--navbar-h);background:var(--navbar-bg);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;padding:0 20px;z-index:30;gap:12px;box-shadow:var(--shadow-sm)}
.crm-navbar .nav-toggle{display:none;background:0;border:0;font-size:1.4rem;cursor:pointer;color:var(--text);padding:4px 8px}
.crm-content{margin-left:var(--sidebar-w);margin-top:var(--navbar-h);padding:24px;min-height:calc(100vh - var(--navbar-h))}

/* ── Cards ── */
.crm-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px;border:1px solid var(--gray-100)}
.crm-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--gray-100)}
.crm-card-header h3{font-size:1.1rem;font-weight:600}
.crm-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.crm-stat-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px;border:1px solid var(--gray-100);display:flex;align-items:center;gap:16px}
.crm-stat-card .stat-icon{width:44px;height:44px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.crm-stat-card .stat-value{font-size:1.5rem;font-weight:700}
.crm-stat-card .stat-label{font-size:.8rem;color:var(--text-secondary)}

/* ── Tables ── */
.crm-table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--gray-200)}
.crm-table{width:100%;border-collapse:collapse;background:var(--surface)}
.crm-table th{background:var(--gray-50);padding:12px 16px;text-align:left;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);border-bottom:1px solid var(--gray-200);white-space:nowrap}
.crm-table td{padding:11px 16px;border-bottom:1px solid var(--gray-100);white-space:nowrap}
.crm-table tbody tr{transition:background var(--transition)}
.crm-table tbody tr:hover{background:var(--gray-50)}

/* ── Buttons ── */
.crm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;font-size:.875rem;font-weight:500;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);line-height:1.5;font-family:inherit;white-space:nowrap}
.crm-btn:active{transform:scale(.97)}
.crm-btn-primary{background:var(--primary);color:#fff}.crm-btn-primary:hover{background:var(--primary-hover)}
.crm-btn-success{background:var(--success);color:#fff}.crm-btn-success:hover{background:#059669}
.crm-btn-danger{background:var(--danger);color:#fff}.crm-btn-danger:hover{background:#e11d48}
.crm-btn-warning{background:var(--warning);color:#fff}.crm-btn-warning:hover{background:#d97706}
.crm-btn-outline{background:0;border-color:var(--gray-300);color:var(--text)}.crm-btn-outline:hover{background:var(--gray-50);border-color:var(--gray-400)}
.crm-btn-ghost{background:0;color:var(--text)}.crm-btn-ghost:hover{background:var(--gray-50)}
.crm-btn-sm{padding:4px 10px;font-size:.8rem}.crm-btn-lg{padding:10px 24px;font-size:1rem}

/* ── Forms ── */
.crm-form-group{margin-bottom:16px}
.crm-label{display:block;margin-bottom:4px;font-weight:500;font-size:.875rem;color:var(--text)}
.crm-input,.crm-select,.crm-textarea{width:100%;padding:8px 12px;font-size:.875rem;font-family:inherit;color:var(--text);background:var(--surface);border:1px solid var(--gray-300);border-radius:var(--radius-sm);transition:border-color var(--transition),box-shadow var(--transition)}
.crm-input:focus,.crm-select:focus,.crm-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:0}
.crm-input::placeholder{color:var(--gray-400)}
.crm-input.error{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-light)}
.crm-form-inline{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.crm-checkbox,.crm-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.875rem}

/* ── Modals ── */
.crm-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:flex;align-items:center;justify-content:center;animation:crmFadeIn .15s ease}
.crm-modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:90%;max-width:500px;max-height:85vh;overflow-y:auto;animation:crmSlideUp .2s ease}
.crm-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--gray-200)}
.crm-modal-header h3{font-size:1.1rem;font-weight:600}
.crm-modal-close{background:0;border:0;font-size:1.2rem;cursor:pointer;color:var(--text-secondary);padding:4px 8px;border-radius:var(--radius-sm);transition:background var(--transition)}
.crm-modal-close:hover{background:var(--gray-100)}
.crm-modal-body{padding:20px}
.crm-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--gray-200)}

/* ── Badges ── */
.crm-badge{display:inline-block;padding:3px 10px;font-size:.75rem;font-weight:600;border-radius:999px;line-height:1.6}
.crm-badge-primary{background:var(--primary-light);color:var(--primary)}
.crm-badge-success{background:var(--success-light);color:var(--success)}
.crm-badge-danger{background:var(--danger-light);color:var(--danger)}
.crm-badge-warning{background:var(--warning-light);color:var(--warning)}
.crm-badge-gray{background:var(--gray-100);color:var(--gray-600)}

/* ── Toasts ── */
.crm-toast-container{position:fixed;top:72px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:380px}
.crm-toast{padding:12px 16px;border-radius:var(--radius);box-shadow:var(--shadow-md);background:var(--surface);border-left:4px solid var(--primary);display:flex;align-items:center;gap:10px;animation:crmSlideIn .25s ease;font-size:.875rem}
.crm-toast-success{border-left-color:var(--success)}.crm-toast-error{border-left-color:var(--danger)}.crm-toast-warning{border-left-color:var(--warning)}
.crm-toast .toast-close{margin-left:auto;background:0;border:0;cursor:pointer;color:var(--text-secondary);font-size:1rem;padding:2px 6px}

/* ── Pagination ── */
.crm-pagination{display:flex;align-items:center;gap:4px;justify-content:center;margin-top:20px}
.crm-pagination button,.crm-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;font-size:.875rem;font-family:inherit;border-radius:var(--radius-sm);border:1px solid var(--gray-200);background:var(--surface);color:var(--text);cursor:pointer;transition:all var(--transition)}
.crm-pagination button:hover:not(:disabled){background:var(--gray-50);border-color:var(--gray-300)}
.crm-pagination .active{background:var(--primary);color:#fff;border-color:var(--primary)}
.crm-pagination button:disabled{opacity:.4;cursor:default}

/* ── Skeleton Loaders ── */
.crm-skeleton{background:linear-gradient(90deg,var(--gray-200) 25%,var(--gray-100) 50%,var(--gray-200) 75%);background-size:200% 100%;animation:crmShimmer 1.5s infinite;border-radius:var(--radius-sm)}
.crm-skeleton-text{height:14px;margin-bottom:8px}.crm-skeleton-text:last-child{width:60%}
.crm-skeleton-title{height:20px;width:40%;margin-bottom:16px}
.crm-skeleton-avatar{width:40px;height:40px;border-radius:50%}
.crm-skeleton-card{height:120px;border-radius:var(--radius-lg)}

/* ── Utilities ── */
.crm-flex{display:flex}.crm-flex-between{display:flex;justify-content:space-between;align-items:center}
.crm-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.crm-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.crm-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.crm-text-center{text-align:center}.crm-text-right{text-align:right}.crm-text-muted{color:var(--text-secondary)}
.crm-mt-4{margin-top:16px}.crm-mb-4{margin-bottom:16px}.crm-p-4{padding:16px}
.crm-hidden{display:none!important}
.crm-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--gray-300)}
.crm-divider{height:1px;background:var(--gray-200);margin:16px 0;border:0}
.crm-empty{text-align:center;padding:40px 20px;color:var(--text-secondary)}
.crm-empty svg{width:48px;height:48px;margin-bottom:12px;opacity:.4}
.crm-empty p{font-size:.9rem}
.crm-scrollbar::-webkit-scrollbar{width:6px;height:6px}
.crm-scrollbar::-webkit-scrollbar-track{background:transparent}
.crm-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}
.crm-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}

/* ── Animations ── */
@keyframes crmFadeIn{from{opacity:0}to{opacity:1}}
@keyframes crmSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes crmSlideIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes crmShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes crmSpin{to{transform:rotate(360deg)}}
.crm-spinner{width:18px;height:18px;border:2px solid var(--gray-300);border-top-color:var(--primary);border-radius:50%;animation:crmSpin .6s linear infinite;display:inline-block}

/* ── Legacy compat: glass-* aliases → crm-* ── */
.glass-input,.crm-input{width:100%;padding:8px 12px;font-size:.875rem;font-family:var(--font);color:var(--text);background:var(--surface);border:1px solid var(--gray-300);border-radius:var(--radius-sm);transition:border-color var(--transition),box-shadow var(--transition)}
.glass-input:focus,.crm-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:0}
.glass-btn,.crm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;font-size:.875rem;font-weight:500;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);line-height:1.5;font-family:var(--font);white-space:nowrap}
.glass-btn-ghost{background:0;border-color:transparent;color:var(--text)}
.glass-btn-outline{background:0;border-color:var(--gray-300);color:var(--text)}
.glass-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px;border:1px solid var(--gray-100)}
/* Skeleton loading */
.skeleton-loading,.skeleton-bar{display:block}
.skeleton-bar{height:14px;border-radius:7px;background:var(--gray-200);animation:crmShimmer 1.5s infinite;background-size:200% 100%}
/* File upload */
.file-upload-wrapper{position:relative}
.file-upload-input{width:100%;padding:8px 12px;border:1.5px dashed var(--gray-300);border-radius:var(--radius-sm);background:var(--gray-50);font-size:.813rem;color:var(--text-secondary);cursor:pointer;font-family:var(--font)}
.file-preview{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.file-remove{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}
/* Table header */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--primary)}

/* ════════════════════════════════════════════════════════════
   COMPATIBILITY LAYER — Bootstrap + Old design system aliases
   ════════════════════════════════════════════════════════════ */

/* ── Missing CSS variables (old names) ── */
:root {
  --text-muted: var(--text-secondary);
  --text-primary: var(--text);
  --bg-secondary: var(--surface);
  --glass-bg: var(--surface);
  --glass-border: var(--gray-200);
  --accent-cyan: #06b6d4;
  --accent-emerald: var(--success);
  --accent-amber: var(--warning);
  --accent-rose: var(--danger);
  --primary-bg: var(--primary-light);
  --primary-dark: var(--primary-hover);
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);
  --navbar-bg: var(--surface); --navbar-h: 56px; --sidebar-w: 240px;
}

/* ── Bootstrap Flexbox utilities ── */
.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-none{display:none}.d-md-block{display:none}.d-md-none{display:block}
.flex-wrap{flex-wrap:wrap}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}
.flex-column{flex-direction:column}.flex-row{flex-direction:row}
.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}.justify-content-end{justify-content:flex-end}
.align-items-center{align-items:center}.align-items-end{align-items:flex-end}.align-items-start{align-items:flex-start}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
@media(min-width:768px){.d-md-block{display:block}.d-md-none{display:none}}

/* ── Bootstrap Grid ── */
.row{display:flex;flex-wrap:wrap;margin-left:-8px;margin-right:-8px}
[class*=col-]{padding-left:8px;padding-right:8px;box-sizing:border-box}
.col-lg-2{flex:0 0 auto;width:16.666%}.col-lg-3{flex:0 0 auto;width:25%}
.col-lg-4{flex:0 0 auto;width:33.333%}.col-lg-6{flex:0 0 auto;width:50%}
.col-lg-8{flex:0 0 auto;width:66.666%}
.col-md-4{flex:0 0 auto;width:33.333%}.col-md-6{flex:0 0 auto;width:50%}
.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.333%}
.col-xl-6{flex:0 0 auto;width:50%}.col-xl-8{flex:0 0 auto;width:66.666%}
@media(max-width:767px){[class*=col-]{width:100%}}

/* ── Bootstrap Spacing ── */
.g-3{gap:12px}.g-0{gap:0}
.m-0{margin:0}.mt-0{margin-top:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.me-1{margin-right:4px}.me-2{margin-right:8px}.me-3{margin-right:12px}.ms-2{margin-left:8px}.ms-auto{margin-left:auto}
.p-0{padding:0}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}
.px-3{padding-left:12px;padding-right:12px}.py-2{padding-top:8px;padding-bottom:8px}
.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}.py-5{padding-top:24px;padding-bottom:24px}
.pt-3{padding-top:12px}.pt-4{padding-top:16px}.pe-3{padding-right:12px}
@media(max-width:767px){.mt-md-0{margin-top:0}.mb-md-3{margin-bottom:12px}}

/* ── Bootstrap Text ── */
.text-center{text-align:center}.text-start{text-align:left}.text-end{text-align:right}
.text-muted{color:var(--text-secondary)}.text-white{color:#fff}
.fw-bold{font-weight:700}.fw-normal{font-weight:400}.fs-6{font-size:.875rem}
.text-nowrap{white-space:nowrap}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3}
h5{font-size:1.1rem}h6{font-size:1rem}

/* ── Bootstrap Components ── */
.badge{display:inline-block;padding:3px 10px;font-size:.75rem;font-weight:600;border-radius:999px;line-height:1.6}
.bg-primary{background:var(--primary-light);color:var(--primary)}
.bg-success,.bg-emerald{background:var(--success-light);color:var(--success)}
.bg-danger,.bg-rose{background:var(--danger-light);color:var(--danger)}
.bg-warning,.bg-amber{background:var(--warning-light);color:var(--warning)}
.bg-info,.bg-cyan{background:#ecfeff;color:#0891b2}
.bg-secondary{background:var(--gray-100);color:var(--gray-600)}
.position-relative{position:relative}
.dropdown{position:relative}.dropdown-menu{position:absolute;z-index:1000;min-width:160px;background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:4px 0;display:none}
.dropdown-menu.show,.dropdown-menu-end{display:block;right:0}
.dropdown-item{display:block;width:100%;padding:6px 16px;font-size:.875rem;color:var(--text);background:0;border:0;text-align:left;cursor:pointer;font-family:inherit}
.dropdown-item:hover{background:var(--gray-50)}.dropdown-divider{height:1px;background:var(--gray-200);margin:4px 0}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.breadcrumb{display:flex;flex-wrap:wrap;padding:0;margin-bottom:16px;list-style:none;font-size:.875rem;color:var(--text-secondary);gap:4px}
.breadcrumb-item+.breadcrumb-item::before{content:'/';margin:0 4px;color:var(--gray-400)}

/* ── Old badge-gradient-* classes ── */
.badge-gradient,.badge-gradient-primary{background:var(--primary-light);color:var(--primary)}
.badge-gradient-success,.badge-gradient-emerald{background:var(--success-light);color:var(--success)}
.badge-gradient-danger,.badge-gradient-rose{background:var(--danger-light);color:var(--danger)}
.badge-gradient-warning,.badge-gradient-amber{background:var(--warning-light);color:var(--warning)}
.badge-gradient-info,.badge-gradient-cyan{background:#ecfeff;color:#0891b2}

/* ── Old glass-* extended ── */
.glass-btn-sm{padding:4px 10px;font-size:.8rem}
.glass-table{width:100%;border-collapse:collapse;background:var(--surface)}
.glass-table th{background:var(--gray-50);padding:12px 16px;text-align:left;font-weight:600;font-size:.8rem;color:var(--text-secondary);border-bottom:1px solid var(--gray-200);white-space:nowrap}
.glass-table td{padding:11px 16px;border-bottom:1px solid var(--gray-100)}
.glass-table tbody tr:hover{background:var(--gray-50)}

/* ── Stat cards (old .stat-card) ── */
.stat-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px;border:1px solid var(--gray-100);display:flex;align-items:center;gap:16px}
.stat-icon{width:44px;height:44px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.stat-value{font-size:1.5rem;font-weight:700}
.stat-label{font-size:.8rem;color:var(--text-secondary)}

/* ── Timeline ── */
.timeline{position:relative;padding-left:24px}
.timeline-item{position:relative;padding-bottom:20px;padding-left:16px;border-left:2px solid var(--gray-200)}
.timeline-item:last-child{border-left-color:transparent}
.timeline-dot{position:absolute;left:-9px;top:0;width:16px;height:16px;border-radius:50%;background:var(--primary);border:3px solid var(--surface)}

/* ── Animation compat ── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.animate-fade-in{animation:fadeIn .3s ease}
.fade{transition:opacity .15s}.fade.show{opacity:1}

/* ── Form compat ── */
.form-label{display:block;margin-bottom:4px;font-weight:500;font-size:.875rem;color:var(--text)}
.form-control,.form-select{width:100%;padding:8px 12px;font-size:.875rem;font-family:inherit;color:var(--text);background:var(--surface);border:1px solid var(--gray-300);border-radius:var(--radius-sm)}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' fill='%236b7280' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.btn-close{background:0;border:0;font-size:1.2rem;cursor:pointer;opacity:.6}.btn-close:hover{opacity:1}
.alert{border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;border:1px solid transparent}
.alert-success{background:var(--success-light);color:var(--success);border-color:var(--success)}
.alert-danger{background:var(--danger-light);color:var(--danger);border-color:var(--danger)}
.alert-dismissible{padding-right:40px;position:relative}
.alert-dismissible .btn-close{position:absolute;top:12px;right:12px}

/* ── Misc compat ── */
.list-unstyled{list-style:none;padding:0;margin:0}.w-100{width:100%}
.position-absolute{position:absolute}
.rounded-circle{border-radius:50%}
.overflow-hidden{overflow:hidden}
.cursor-pointer{cursor:pointer}
.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}
.small,small{font-size:.8rem}
.pagination{margin-top:16px}
.z-1{z-index:1}.z-2{z-index:2}
.shadow-sm{box-shadow:var(--shadow-sm)}

/* ── Avatar circles ── */
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#8b5cf6);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0;font-size:.85rem;text-transform:uppercase}

/* ── Button defaults (bare → styled) ── */
.glass-btn,.crm-btn{background:var(--gray-100);color:var(--text)}
.glass-btn:hover,.crm-btn:hover{background:var(--gray-200)}
.crm-btn-primary,.glass-btn-primary{background:var(--primary);color:#fff}.crm-btn-primary:hover{background:var(--primary-hover)}
.crm-btn-outline.active,.glass-btn-outline.active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}

/* ── Page header ── */
.page-header{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--gray-200)}

/* ── Table base ── */
.table{width:100%;border-collapse:collapse;background:var(--surface)}

/* ── Stat card icon colors ── */
.stat-icon.primary,.stat-icon.bg-primary{background:var(--primary-light);color:var(--primary)}
.stat-icon.cyan,.stat-icon.bg-cyan{background:#ecfeff;color:#0891b2}
.stat-icon.emerald,.stat-icon.bg-emerald{background:var(--success-light);color:var(--success)}
.stat-icon.amber,.stat-icon.bg-amber{background:var(--warning-light);color:var(--warning)}
.stat-icon.rose,.stat-icon.bg-rose{background:var(--danger-light);color:var(--danger)}
/* Stat card layout fix: icon left, text stacked right */
.stat-card{flex-wrap:wrap}
.stat-card .stat-value{flex:1 1 auto;min-width:60px}

/* ── Stat trend ── */
.stat-trend{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--text-secondary)}
.stat-trend.up{color:var(--success)}.stat-trend.down{color:var(--danger)}

/* ── Sidebar polish ── */
.crm-sidebar .sidebar-section-label{padding:10px 20px 4px;font-size:11px;opacity:.4;text-transform:uppercase;letter-spacing:1px}

/* ── bg color utility classes ── */
.bg-primary{background:var(--primary);color:#fff}
.bg-success,.bg-emerald{background:var(--success);color:#fff}
.bg-danger,.bg-rose{background:var(--danger);color:#fff}
.bg-warning,.bg-amber{background:var(--warning);color:#fff}
.bg-info,.bg-cyan{background:#06b6d4;color:#fff}
.bg-light{background:var(--gray-50)}.bg-white{background:var(--surface)}


/* ── Responsive ── */
@media (max-width:767px) {
  .crm-sidebar{transform:translateX(-100%)}
  .crm-sidebar.open{transform:translateX(0)}
  .crm-navbar{left:0}.crm-navbar .nav-toggle{display:inline-flex}
  .crm-content{margin-left:0}
  .crm-grid-2,.crm-grid-3,.crm-grid-4{grid-template-columns:1fr}
  .crm-form-inline{flex-direction:column;align-items:stretch}
  .crm-stat-grid{grid-template-columns:1fr}
  .crm-modal{width:95%;margin:0 10px}
  .crm-toast-container{left:10px;right:10px;max-width:none}
}