/*
|--------------------------------------------------------------------------
| ROOT VARIABLES
|--------------------------------------------------------------------------
*/

:root{

    /* Brand Colors */

    --primary-color: #4f46e5;
    --primary-hover: #4338ca;

    --secondary-color: #0ea5e9;

    --success-color: #22c55e;

    --danger-color: #ef4444;

    --warning-color: #f59e0b;

    --dark-color: #0f172a;

    --light-color: #f8fafc;

    --border-color: #e2e8f0;

    /* Typography */

    --font-family: 'Roboto', sans-serif;

    --font-size: 14px;

    /* Layout */

    --sidebar-width: 260px;

    --navbar-height: 70px;

    /* Radius */

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 20px;

    /* Shadows */

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);

    --shadow-md: 0 5px 20px rgba(0,0,0,0.08);

}

/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

body{

    font-family: var(--font-family);

    background: var(--light-color);

    font-size: var(--font-size);

    overflow-x: hidden;
}

/*
|--------------------------------------------------------------------------
| GLOBAL BUTTONS
|--------------------------------------------------------------------------
*/

.btn-primary{

    background: var(--primary-color);

    border-color: var(--primary-color);
}

.btn-primary:hover{

    background: var(--primary-hover);

    border-color: var(--primary-hover);
}

/*
|--------------------------------------------------------------------------
| CARDS
|--------------------------------------------------------------------------
*/

.card{

    border: none;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}

/* Dark Mode Theme Overrides */
[data-theme="dark"] {
    --light-color: #0b0f19;
    --dark-color: #f8fafc;
    --border-color: #1e293b;
    background-color: #0b0f19;
    color: #f8fafc;
}

[data-theme="dark"] body {
    background-color: #0b0f19;
    color: #f8fafc;
}

[data-theme="dark"] .card,
[data-theme="dark"] .crm-top-card,
[data-theme="dark"] .crm-table-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .navbar {
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #1e293b !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .crm-table th {
    background-color: #1f2937 !important;
    color: #9ca3af !important;
}

[data-theme="dark"] .crm-table td {
    border-bottom-color: #1f2937 !important;
    color: #e5e7eb !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] select,
[data-theme="dark"] input, 
[data-theme="dark"] textarea {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: #6b7280 !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .crm-user-name,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #f9fafb !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .crm-subtitle,
[data-theme="dark"] .crm-company-name {
    color: #9ca3af !important;
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .btn-light {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .sidebar-menu li a {
    color: #9ca3af;
}

[data-theme="dark"] .sidebar-menu li a:hover,
[data-theme="dark"] .sidebar-menu li a.active {
    background: #1f2937;
    color: var(--primary-color);
}

[data-theme="dark"] .navbar-title {
    color: #f9fafb !important;
}