/* Global utility: hidden element */
.hidden { display: none !important; }

/* ADONIS CRM — CSS Variables
   Designer: change colors/fonts/spacing here.
   All components use these variables automatically.
*/

:root {
    --bg-primary: #09090b;
    --bg-secondary: #0f0f12;
    --bg-tertiary: #18181b;
    --border: #27272a;
    --border-hover: #3f3f46;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #52525b;
    --accent: #dc2626;
    --accent-hover: #ef4444;
    --accent-light: rgba(220, 38, 38, 0.12);
    --success: #22c55e;
    --success-light: rgba(34, 197, 94, 0.12);
    --danger: #dc2626;
    --danger-light: rgba(220, 38, 38, 0.12);
    --warning: #eab308;
    --warning-light: rgba(234, 179, 8, 0.12);
    --info: #71717a;
    --info-light: rgba(113, 113, 122, 0.12);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
}

[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --border: #e2e8f0;
    --border-hover: #cbd5e1;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent: #dc2626;
    --accent-hover: #ef4444;
    --accent-light: rgba(220, 38, 38, 0.08);
    --success: #16a34a;
    --success-light: rgba(22, 163, 74, 0.08);
    --danger: #dc2626;
    --danger-light: rgba(220, 38, 38, 0.08);
    --warning: #ca8a04;
    --warning-light: rgba(202, 138, 4, 0.08);
    --info: #64748b;
    --info-light: rgba(100, 116, 139, 0.08);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ═══ Utility classes for JS-generated content ═══ */
/* Colors — used instead of inline style="color:#hex" */
.clr-green { color: #22c55e; }
.clr-red { color: #ef4444; }
.clr-yellow { color: #f59e0b; }
.clr-blue { color: #3b82f6; }
.clr-purple { color: #8b5cf6; }
.clr-muted { color: var(--text-muted); }

/* Font styles */
.fw-800 { font-weight: 800; }
.fw-700 { font-weight: 700; }
.fw-600 { font-weight: 600; }
.fw-500 { font-weight: 500; }
.fs-sm { font-size: 0.85rem; }
.fs-xs { font-size: 0.75rem; }
.fs-xxs { font-size: 0.65rem; }
.fs-lg { font-size: 1.3rem; }
.fs-xl { font-size: 1.75rem; }

/* Layout */
.d-flex { display: flex; }
.d-grid { display: grid; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.ai-center { align-items: center; }
.jc-between { justify-content: space-between; }
.jc-center { justify-content: center; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }

/* Spacing */
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.p-sm { padding: 0.5rem; }
.p-md { padding: 0.75rem; }

/* Table */
.w-full { width: 100%; }
.border-collapse { border-collapse: collapse; }