/* ABDM Health Hub - Minno-inspired theme with Google Sans */

/* ============================================================
   DESIGN TOKENS (aligned with people.minno.co.in)
   ============================================================ */
:root {
    color-scheme: light;

    /* Brand violet */
    --violet-50:  #F6F4FF;
    --violet-100: #EDE8FF;
    --violet-200: #DACFFF;
    --violet-300: #BBA6FF;
    --violet-400: #9A7CFF;
    --violet-500: #7A54F5;
    --violet-600: #6637E0;
    --violet-700: #5424BC;
    --violet-800: #42198F;
    --violet-900: #2B0F66;
    --violet-950: #1A0847;

    /* Warm ink neutrals */
    --ink-50:  #FAF9FB;
    --ink-100: #F3F1F6;
    --ink-200: #E6E2EE;
    --ink-300: #CDC6DC;
    --ink-400: #9E93B5;
    --ink-500: #6B6084;
    --ink-600: #4A4161;
    --ink-700: #2F2845;
    --ink-800: #1C1730;
    --ink-900: #0E0A1E;

    /* Semantic */
    --success-50:  #ECFDF3;  --success-500: #10B981;  --success-700: #047857;
    --warning-50:  #FFF8EB;  --warning-500: #F59E0B;  --warning-700: #B45309;
    --danger-50:   #FEF2F2;  --danger-500:  #EF4444;  --danger-700:  #B91C1C;
    --info-50:     #EEF4FF;  --info-500:    #4F7BFF;

    /* Surfaces */
    --bg-app:      #FAF8FD;
    --bg-surface:  #FFFFFF;
    --bg-subtle:   var(--ink-50);

    /* Borders */
    --border-subtle:  rgba(27,18,61,0.06);
    --border-default: rgba(27,18,61,0.10);
    --border-strong:  rgba(27,18,61,0.16);

    /* Text */
    --text-primary:   var(--ink-900);
    --text-secondary: var(--ink-600);
    --text-tertiary:  var(--ink-400);

    /* Font — Outfit loaded via CDN; 'Google Sans' kept for devices that have it natively */
    --font-sans: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Radii */
    --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-full: 9999px;

    /* Shadows */
    --shadow-sm:    0 2px 4px rgba(27,18,61,0.04), 0 1px 2px rgba(27,18,61,0.03);
    --shadow-md:    0 4px 12px rgba(27,18,61,0.06), 0 2px 4px rgba(27,18,61,0.04);
    --shadow-brand: 0 8px 24px rgba(122,84,245,0.28), 0 2px 6px rgba(122,84,245,0.16);
}

/* ============================================================
   BASE
   ============================================================ */
html, body { height: 100%; }

body {
    background-color: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

* {
    font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--text-primary);
}

main { flex: 1 0 auto; }

/* ============================================================
   NAVBAR
   ============================================================ */
.abdm-navbar {
    background: linear-gradient(135deg, var(--violet-900) 0%, var(--violet-700) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.navbar-brand {
    font-weight: 700;
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
    color: #fff !important;
}

.abdm-navbar .nav-link {
    font-weight: 500;
    color: rgba(255,255,255,0.80) !important;
    border-radius: var(--r-sm);
    padding: 6px 12px;
    transition: background 150ms, color 150ms;
}

.abdm-navbar .nav-link:hover,
.abdm-navbar .nav-link.active {
    background: rgba(255,255,255,0.12);
    color: #fff !important;
}

.abdm-navbar .dropdown-menu {
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
}

.abdm-navbar .dropdown-item {
    border-radius: var(--r-sm);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    padding: 8px 12px;
    transition: background 120ms;
}

.abdm-navbar .dropdown-item:hover {
    background: var(--violet-50);
    color: var(--violet-700);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 220ms;
}

.card:hover { box-shadow: var(--shadow-md); }

/* Clickable dashboard stat cards */
.dashboard-stat-card {
    cursor: pointer;
    transition: box-shadow 220ms, transform 220ms;
}
.dashboard-stat-card:hover {
    box-shadow: var(--shadow-brand) !important;
    transform: translateY(-3px);
}
a:has(.dashboard-stat-card) { color: inherit; }

.card-header {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-secondary);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    font-family: var(--font-sans);
    font-weight: 500;
    border-radius: var(--r-sm);
    transition: all 150ms;
}

.btn-primary {
    background: linear-gradient(180deg, var(--violet-500), var(--violet-600));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-brand);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(180deg, var(--violet-400), var(--violet-500));
    border-color: transparent;
    color: #fff;
}

.btn-outline-primary {
    border-color: var(--violet-500);
    color: var(--violet-600);
}

.btn-outline-primary:hover {
    background: var(--violet-50);
    border-color: var(--violet-600);
    color: var(--violet-700);
}

.btn-lg { padding: 0.625rem 1.5rem; font-size: 14.5px; }

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select {
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-surface);
    transition: border-color 150ms, box-shadow 150ms;
}

.form-control:hover, .form-select:hover {
    border-color: var(--border-strong);
}

.form-control:focus, .form-select:focus {
    border-color: var(--violet-500);
    box-shadow: 0 0 0 3px rgba(122,84,245,0.15);
    outline: none;
}

.form-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ============================================================
   TABLES
   ============================================================ */
.table { font-size: 13.5px; color: var(--text-primary); }

.table thead th {
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-subtle);
}

.table tbody tr:hover td { background: var(--violet-50); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    font-family: var(--font-sans);
    font-weight: 500;
    padding: 0.35em 0.7em;
    border-radius: var(--r-full);
    font-size: 11.5px;
}

.bg-primary           { background: var(--violet-600) !important; }
.bg-primary-subtle    { background: var(--violet-50) !important; color: var(--violet-700) !important; }
.bg-success-subtle    { background: var(--success-50) !important; color: var(--success-700) !important; }
.bg-warning-subtle    { background: var(--warning-50) !important; color: var(--warning-700) !important; }
.bg-info-subtle       { background-color: #EEF4FF !important; color: #3358CC !important; }
.bg-danger-subtle     { background: var(--danger-50) !important; color: var(--danger-700) !important; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert { border-radius: var(--r-md); border: none; font-size: 13.5px; }
.alert-danger  { background: var(--danger-50);  color: var(--danger-700); }
.alert-success { background: var(--success-50); color: var(--success-700); }
.alert-info    { background: #EEF4FF; color: #3358CC; }
.alert-warning { background: var(--warning-50); color: var(--warning-700); }

/* ============================================================
   HERO / FEATURE AREAS
   ============================================================ */
.hero-section {
    background: linear-gradient(135deg, var(--violet-50) 0%, var(--bg-app) 100%);
}

.hero-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    background: var(--violet-50);
    color: var(--violet-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* ============================================================
   LINKS
   ============================================================ */
a { color: var(--violet-600); }
a:hover { color: var(--violet-700); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    flex-shrink: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: 1.25rem 0;
    color: var(--text-tertiary);
    font-size: 12.5px;
    font-family: var(--font-sans);
}

/* ============================================================
   UTILITIES
   ============================================================ */
.font-monospace { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }
.text-brand     { color: var(--violet-600) !important; }
.text-primary   { color: var(--violet-600) !important; }
.border-primary { border-color: var(--violet-500) !important; }