/* =============================================
   AsanKar Hospital – Modern SaaS Theme (v2)
   ============================================= */

:root {
    /* Brand */
    --color-primary-500: #2563EB;
    --color-primary-600: #1D4ED8;
    --color-primary-700: #1E40AF;
    --color-secondary-500: #0EA5E9;
    --color-success-500: #10B981;
    --color-warning-500: #F59E0B;
    --color-danger-500: #EF4444;

    /* Light neutrals */
    --color-base-0: #FFFFFF;          /* page background */
    --color-base-50: #F9FAFB;        /* cards */
    --color-base-100: #F3F4F6;
    --color-base-200: #E5E7EB;
    --color-base-300: #D1D5DB;

    --color-font-default-light: #111827;
    --color-font-subtle-light: #4B5563;
    --color-font-muted-light: #9CA3AF;
    --color-font-important-light: #1E3A8A;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -2px rgba(0,0,0,0.04);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
}

/* Dark mode – multiple selectors for maximum compatibility */
html[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"],
.dark,
.dark body {
    --color-primary-500: #3B82F6;
    --color-primary-600: #2563EB;
    --color-primary-700: #1D4ED8;
    --color-secondary-500: #38BDF8;
    --color-success-500: #34D399;
    --color-warning-500: #FBBF24;
    --color-danger-500: #F87171;

    --color-base-0: #0F172A;          /* page background dark */
    --color-base-50: #1E293B;        /* cards dark */
    --color-base-100: #334155;
    --color-base-200: #475569;
    --color-base-300: #64748B;

    --color-font-default-light: #F9FAFB;
    --color-font-subtle-light: #D1D5DB;
    --color-font-muted-light: #9CA3AF;
    --color-font-important-light: #BFDBFE;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3);
}

/* Base */
html, body {
    background: var(--color-base-0);
    color: var(--color-font-default-light);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Explicit dark mode overrides for body and text */
html[data-theme="dark"] body,
body[data-theme="dark"],
.dark body {
    background: #0F172A !important;
    color: #F9FAFB !important;
}

/* Header */
#header {
    background: var(--color-base-0);
    border-bottom: 1px solid var(--color-base-200);
    box-shadow: none;
    padding: 0.75rem 1.5rem;
}

/* Content */
#content {
    padding: 1.5rem;
    background: var(--color-base-0);
}

/* Cards */
.module,
.card,
.dashboard-module,
.form-row,
.inline-group {
    background: var(--color-base-50);
    border: 1px solid var(--color-base-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Dark mode cards – explicit */
html[data-theme="dark"] .module,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dashboard-module,
html[data-theme="dark"] .form-row,
html[data-theme="dark"] .inline-group,
body[data-theme="dark"] .module,
body[data-theme="dark"] .card,
body[data-theme="dark"] .dashboard-module,
body[data-theme="dark"] .form-row,
body[data-theme="dark"] .inline-group,
.dark .module,
.dark .card,
.dark .dashboard-module,
.dark .form-row,
.dark .inline-group {
    background: #1E293B !important;
    border-color: #475569 !important;
}

/* Buttons */
.button,
input[type="submit"],
input[type="button"],
button[type="submit"],
a.button {
    background: var(--color-primary-500);
    color: #ffffff !important;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
a.button:hover {
    background: var(--color-primary-600);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.button.danger,
input[type="submit"].danger,
button[type="submit"].danger {
    background: var(--color-danger-500);
}

.button.success,
input[type="submit"].success,
button[type="submit"].success {
    background: var(--color-success-500);
}

/* Inputs */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
    background: var(--color-base-0);
    border: 1px solid var(--color-base-200);
    color: var(--color-font-default-light);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

/* Tables */
thead th {
    color: var(--color-font-muted-light);
    border-bottom: 1px solid var(--color-base-200);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem;
}

tbody tr {
    border-bottom: 1px solid var(--color-base-100);
    transition: background-color 0.15s ease;
}

tbody tr:hover {
    background: var(--color-base-50);
}

/* Badges */
.badge.success, .badge--paid, .badge--completed {
    background: rgba(16,185,129,0.1);
    color: var(--color-success-500);
    border-radius: var(--radius-full);
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.warning, .badge--pending, .badge--unpaid {
    background: rgba(245,158,11,0.1);
    color: var(--color-warning-500);
    border-radius: var(--radius-full);
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.danger, .badge--failed, .badge--cancelled {
    background: rgba(239,68,68,0.1);
    color: var(--color-danger-500);
    border-radius: var(--radius-full);
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Messages */
.messagelist li.success { background: rgba(16,185,129,0.1); color: var(--color-success-500); }
.messagelist li.error { background: rgba(239,68,68,0.1); color: var(--color-danger-500); }
.messagelist li.warning { background: rgba(245,158,11,0.1); color: var(--color-warning-500); }

/* =============================================
   Dashboard-specific card background override
   (more visible gray in light mode)
   ============================================= */
html[data-theme="light"] .stats-grid > div,
html[data-theme="light"] .dept-grid > div {
    background-color: #F1F5F9 !important;   /* soft gray */
}

html[data-theme="dark"] .stats-grid > div,
html[data-theme="dark"] .dept-grid > div {
    background-color: #1E293B !important;   /* dark card */
}