/* ─────────────────────────────────────────────
   style.css  —  Shared styles for all pages
   Theme: Green & White (fresh/natural)
───────────────────────────────────────────── */

/* CSS Variables */
:root {
    --green:        #2d8c5e;
    --green-dark:   #1e6b47;
    --green-light:  #3aaf76;
    --green-pale:   #e8f5ee;
    --white:        #ffffff;
    --off-white:    #f7faf8;
    --text:         #1a2e22;
    --text-muted:   #6b7a72;
    --border:       #d4e6db;
    --shadow:       0 2px 16px rgba(45,140,94,0.10);
    --shadow-lg:    0 8px 32px rgba(45,140,94,0.15);
    --radius:       12px;
    --radius-lg:    20px;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family:  'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:   var(--off-white);
    color:        var(--text);
    line-height:  1.6;
    padding-top:  60px;
}

a   { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ── TYPOGRAPHY ────────────────────────────── */
h1 { font-size: 2.2rem;  font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.7rem;  font-weight: 700; }
h3 { font-size: 1.2rem;  font-weight: 600; }
h4 { font-size: 1rem;    font-weight: 600; }
p  { color: var(--text-muted); }

/* ── BUTTONS ───────────────────────────────── */
.btn {
    display:       inline-block;
    padding:       10px 22px;
    border-radius: var(--radius);
    font-size:     0.9rem;
    font-weight:   600;
    cursor:        pointer;
    border:        none;
    font-family:   inherit;
    transition:    all 0.2s ease;
    text-align:    center;
}

.btn-primary  { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-outline  { background: transparent; color: var(--green); border: 2px solid var(--green); }
.btn-outline:hover { background: var(--green-pale); }

.btn-danger   { background: #dc3545; color: white; }
.btn-danger:hover { background: #b02a37; }

.btn-sm   { padding: 6px 14px;   font-size: 0.82rem; }
.btn-lg   { padding: 14px 32px;  font-size: 1rem; }
.btn-full { width: 100%; }

/* ── NAVBAR ────────────────────────────────── */
.navbar {
    position:        fixed !important;
    top:             0 !important;
    left:            0 !important;
    right:           0 !important;
    width:           100% !important;
    height:          64px !important;
    z-index:         9999 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    background:      white !important;
    border-bottom:   1px solid var(--border) !important;
    box-shadow:      0 2px 8px rgba(0,0,0,0.08) !important;
    box-sizing:      border-box !important;
    padding:         0 5% !important;
    overflow:        hidden !important;
}

/* Logo image */
.nav-logo img {
    height:     64px !important;
    width:      auto !important;
    display:    block !important;
    object-fit: contain !important;
}

/* Legacy text logo fallback */
.nav-logo {
    font-size:   1.5rem;
    font-weight: 800;
    color:       var(--green);
    display:     flex;
    align-items: center;
}
.nav-logo span { color: var(--green-light); }

.nav-links {
    display:     flex !important;
    gap:         28px !important;
    list-style:  none !important;
    align-items: center !important;
    margin:      0 !important;
    padding:     0 !important;
}

.nav-links a {
    color:       var(--text-muted);
    font-size:   0.9rem;
    font-weight: 500;
    transition:  color 0.2s;
}
.nav-links a:hover { color: var(--green); }

.nav-actions {
    display:     flex !important;
    gap:         10px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.user-menu {
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
    flex-shrink: 0 !important;
}

.user-avatar {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--green);
    color:           white;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       0.9rem;
    cursor:          pointer;
}

/* ── PAGE WRAPPER ──────────────────────────── */
.page-wrapper {
    padding-top: 64px !important;
    min-height:  calc(100vh - 64px) !important;
}

.hero-section,
.page-header,
.dashboard-header,
.admin-header {
    padding-top: 80px !important;
}

/* ── SECTION ───────────────────────────────── */
.section        { padding: 60px 5%; }
.section-header { text-align: center; margin-bottom: 40px; }
.section-header h2 { margin-bottom: 8px; }
.section-header p  { max-width: 500px; margin: 0 auto; }

/* ── CARDS ─────────────────────────────────── */
.card {
    background:    var(--white);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       24px;
    transition:    all 0.25s;
}
.card:hover { box-shadow: var(--shadow-lg); border-color: var(--green-light); transform: translateY(-2px); }

/* ── DOCTOR CARD ───────────────────────────── */
.doctor-card {
    background:    var(--white);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       20px;
    transition:    all 0.25s;
    cursor:        pointer;
}
.doctor-card:hover { box-shadow: var(--shadow-lg); border-color: var(--green); transform: translateY(-3px); }

.doctor-card-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }

.doctor-avatar {
    width:           56px;
    height:          56px;
    border-radius:   var(--radius);
    background:      var(--green-pale);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.5rem;
    flex-shrink:     0;
    border:          2px solid var(--border);
}

.doctor-name      { font-size: 1rem;   font-weight: 700; margin-bottom: 2px; }
.doctor-specialty { color: var(--green); font-size: 0.82rem; font-weight: 600; }
.doctor-clinic    { color: var(--text-muted); font-size: 0.8rem; }

.doctor-tags      { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.tag          { padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.tag-bulk     { background: #d4edda; color: #155724; }
.tag-telehealth { background: #d1ecf1; color: #0c5460; }
.tag-new      { background: #fff3cd; color: #856404; }

.doctor-card-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    border-top:      1px solid var(--border);
    padding-top:     14px;
    flex-wrap:       wrap;
    gap:             8px;
}

.rating     { display: flex; align-items: center; gap: 4px; }
.stars      { color: #f59e0b; font-size: 0.85rem; }
.rating-val { font-weight: 700; font-size: 0.9rem; }
.rating-cnt { color: var(--text-muted); font-size: 0.78rem; }
.fee        { font-weight: 700; color: var(--green); }
.fee-note   { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; }

/* ── GRID LAYOUTS ──────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.doctors-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap:                   20px;
}

/* ── FORM STYLES ───────────────────────────── */
.form-group           { margin-bottom: 16px; }
.form-group label     { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; color: var(--text); }

.form-group input,
.form-group select,
.form-group textarea {
    width:         100%;
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       10px 14px;
    font-family:   inherit;
    font-size:     0.9rem;
    color:         var(--text);
    outline:       none;
    transition:    border-color 0.2s;
    background:    var(--white);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--green); }

.form-group textarea { resize: vertical; min-height: 80px; }
.form-row            { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── MODAL ─────────────────────────────────── */
.modal-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.5);
    z-index:         2000;
    align-items:     center;
    justify-content: center;
    padding:         20px;
}
.modal-overlay.show { display: flex; }

.modal {
    background:    var(--white);
    border-radius: var(--radius-lg);
    padding:       32px;
    width:         100%;
    max-width:     500px;
    max-height:    90vh;
    overflow-y:    auto;
    animation:     modalIn 0.25s ease;
}

@keyframes modalIn {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.modal h2        { margin-bottom: 4px; }
.modal .subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; }
.modal-actions   { display: flex; gap: 10px; margin-top: 20px; }
.modal-close     {
    position: absolute; top: 16px; right: 20px;
    background: none; border: none; font-size: 1.4rem;
    cursor: pointer; color: var(--text-muted);
}

/* ── STATUS BADGES ─────────────────────────── */
.badge           { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.badge-pending   { background: #fff3cd; color: #856404; }
.badge-confirmed { background: #d4edda; color: #155724; }
.badge-completed { background: #d1ecf1; color: #0c5460; }
.badge-cancelled { background: #f8d7da; color: #721c24; }
.badge-no_show   { background: #e2e3e5; color: #383d41; }

/* ── AI CHAT WIDGET ────────────────────────── */
.chat-fab {
    position:        fixed;
    bottom:          28px;
    right:           28px;
    width:           56px;
    height:          56px;
    background:      var(--green);
    border-radius:   50%;
    border:          none;
    cursor:          pointer;
    z-index:         999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.4rem;
    box-shadow:      0 4px 20px rgba(45,140,94,0.4);
    transition:      all 0.3s;
}
.chat-fab:hover { transform: scale(1.1); background: var(--green-dark); }

.chat-panel {
    position:       fixed;
    bottom:         80px;
    right:          20px;
    width:          320px;
    height:         480px;
    background:     white;
    border-radius:  var(--radius-lg);
    box-shadow:     0 8px 32px rgba(0,0,0,0.15);
    display:        flex;
    flex-direction: column;
    z-index:        1000;
    border:         1px solid var(--border);
    overflow:       hidden;
    transform:      translateY(20px);
    opacity:        0;
    pointer-events: none;
    transition:     all 0.3s ease;
}
.chat-panel.open { transform: translateY(0); opacity: 1; pointer-events: all; }

.chat-header {
    background:  linear-gradient(135deg, var(--green-dark), var(--green));
    padding:     16px 18px;
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}
.chat-header-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.chat-header-info strong { display: block; color: white; font-size: 0.9rem; }
.chat-header-info span   { color: rgba(255,255,255,0.8); font-size: 0.75rem; }
.chat-online { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; margin-left: auto; }

.chat-messages {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.chat-messages::-webkit-scrollbar       { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.msg {
    max-width: 82%; padding: 9px 13px; border-radius: 14px;
    font-size: 0.855rem; line-height: 1.5;
    animation: msgIn 0.2s ease;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.msg.assistant { background: var(--green-pale); color: var(--text); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.user      { background: var(--green); color: white; border-bottom-right-radius: 4px; align-self: flex-end; }

.typing-dots      { display: flex; gap: 4px; padding: 2px 0; }
.typing-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); animation: bounce 0.6s infinite alternate;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { to { transform: translateY(-5px); opacity: 0.4; } }

.chat-quick-btns { display: flex; gap: 6px; padding: 8px 12px; flex-wrap: wrap; border-top: 1px solid var(--border); }

.quick-btn {
    background: var(--green-pale); border: 1px solid var(--green-light);
    border-radius: 20px; padding: 5px 12px; font-size: 0.75rem;
    font-weight: 600; color: var(--green); cursor: pointer;
    font-family: inherit; transition: all 0.2s; white-space: nowrap;
}
.quick-btn:hover { background: var(--green); color: white; }

.typing-indicator { display: flex; gap: 4px; align-items: center; padding: 12px 16px !important; }
.typing-indicator span {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green); animation: typing 1s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

.chat-input-area { padding: 10px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }

.chat-input {
    flex: 1; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 9px 13px; font-family: inherit; font-size: 0.855rem;
    outline: none; resize: none; max-height: 70px; min-height: 38px;
    transition: border-color 0.2s;
}
.chat-input:focus { border-color: var(--green); }

.chat-send {
    background: var(--green); color: white; border: none;
    width: 38px; height: 38px; border-radius: var(--radius);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 1rem; transition: all 0.2s;
}
.chat-send:hover { background: var(--green-dark); }

/* ── TOAST ─────────────────────────────────── */
.toast {
    position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
    background: var(--green-dark); color: white; padding: 11px 24px;
    border-radius: var(--radius); font-size: 0.875rem; font-weight: 600;
    box-shadow: var(--shadow-lg); z-index: 3000; opacity: 0;
    transition: opacity 0.3s; pointer-events: none;
}
.toast.show { opacity: 1; }

/* ── SPINNER ───────────────────────────────── */
.spinner {
    width: 32px; height: 32px; border: 3px solid var(--border);
    border-top: 3px solid var(--green); border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }

/* ── EMPTY STATE ───────────────────────────── */
.empty-state           { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 12px; }
.empty-state h3        { color: var(--text); margin-bottom: 8px; }

/* ── UTILITY ───────────────────────────────── */
.text-center  { text-align: center; }
.text-green   { color: var(--green); }
.text-muted   { color: var(--text-muted); }
.mt-8  { margin-top: 8px; }   .mt-16 { margin-top: 16px; }   .mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.flex  { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8  { gap: 8px; }
.gap-16 { gap: 16px; }

/* ── SPECIALTY CARDS ───────────────────────── */
.spec-card-new {
    border-radius: 16px; padding: 22px 14px; cursor: pointer;
    text-align: center; transition: all 0.25s;
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; border: 2px solid transparent;
}
.spec-card-new:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.1); }

.spec-icon-wrap {
    width: 58px; height: 58px; border-radius: 50%;
    background: rgba(255,255,255,0.7); display: flex;
    align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 4px;
}
.spec-emoji { font-size: 1.8rem; }
.spec-name  { font-size: 0.85rem; font-weight: 700; line-height: 1.2; }
.spec-arrow { font-size: 0.8rem; opacity: 0; transition: all 0.2s; }
.spec-card-new:hover .spec-arrow { opacity: 1; }

/* ── NOTIFICATIONS ──────────────────────────── */
.notif-bell { position: relative; cursor: pointer; font-size: 1.2rem; padding: 4px; user-select: none; }

.notif-badge {
    position: absolute; top: -4px; right: -4px;
    background: #dc3545; color: white; border-radius: 50%;
    width: 18px; height: 18px; font-size: 0.7rem; font-weight: 700;
    display: flex !important; align-items: center; justify-content: center;
}

.notif-dropdown {
    position: absolute; top: calc(100% + 8px); right: -10px;
    width: 300px; background: white; border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 2000; display: none; overflow: hidden;
}
.notif-dropdown.open { display: block; }

.notif-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--off-white); }
.notif-header strong { font-size: 0.9rem; }
.notif-header button { background: none; border: none; color: var(--green); font-size: 0.78rem; cursor: pointer; font-family: inherit; }

.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.2s; }
.notif-item:hover      { background: var(--green-pale); }
.notif-item.unread     { background: #f0fff4; }
.notif-item:last-child { border-bottom: none; }
.notif-item h4         { font-size: 0.85rem; margin-bottom: 2px; }
.notif-item p          { font-size: 0.78rem; color: var(--text-muted); margin: 0; }
.notif-item .notif-time { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.notif-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (max 991px)
══════════════════════════════════════════════ */
@media (max-width: 991px) {
    .navbar    { padding: 0 4% !important; }
    .nav-links { gap: 16px !important; }
    #userGreeting { font-size: 0.8rem !important; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (max 768px)
══════════════════════════════════════════════ */
@media (max-width: 768px) {

    body { padding-top: 56px; }

    /* Navbar */
    .navbar {
        height:  56px !important;
        padding: 0 4% !important;
        overflow:        hidden !important;
    }

    /* Logo shrink on mobile */
    .nav-logo img {
        height: 44px !important;
    }

    /* Hide desktop nav links */
    .nav-links { display: none !important; }

    /* Nav actions */
    .nav-actions,
    .user-menu {
        gap:      6px !important;
        flex-wrap: nowrap !important;
    }

    /* Greeting */
    #userGreeting {
        display:       inline !important;
        font-size:     0.78rem !important;
        font-weight:   600 !important;
        color:         var(--green) !important;
        white-space:   nowrap !important;
        max-width:     80px !important;
        overflow:      hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Shrink buttons */
    .nav-actions .btn,
    .user-menu .btn {
        padding:   5px 8px !important;
        font-size: 0.72rem !important;
    }

    /* Shrink avatar */
    .user-avatar {
        width:     28px !important;
        height:    28px !important;
        font-size: 0.75rem !important;
    }

    /* Bell */
    .notif-bell { font-size: 1rem !important; }

    /* Notification dropdown */
    .notif-dropdown {
        right:     0 !important;
        left:      auto !important;
        width:     280px !important;
        max-width: 90vw !important;
    }

    /* Page wrapper */
    .page-wrapper { padding-top: 56px !important; }

    .hero-section,
    .page-header,
    .dashboard-header,
    .admin-header { padding-top: 72px !important; }

    /* Hero */
    .hero-section h1 { font-size: 1.7rem !important; }
    .hero-section p  { font-size: 0.88rem !important; }

    /* Search bar */
    .search-bar { flex-direction: column !important; border-radius: var(--radius-lg) !important; }
    .search-bar input { border-right: none !important; border-bottom: 1px solid var(--border) !important; font-size: 16px !important; width: 100% !important; }
    .search-bar .btn  { width: 100% !important; border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; }

    /* Specialties */
    #specialtiesGrid   { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
    .spec-card-new     { padding: 12px 6px !important; }
    .spec-emoji        { font-size: 1.3rem !important; }
    .spec-name         { font-size: 0.72rem !important; }

    /* Grids */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .section { padding: 40px 4%; }

    /* Forms */
    .form-row { grid-template-columns: 1fr !important; }
    .form-group input,
    .form-group select,
    .form-group textarea { font-size: 16px !important; }

    /* Doctors */
    .doctors-results   { grid-template-columns: 1fr !important; padding: 12px 4% !important; }
    .results-header    { flex-direction: column !important; gap: 8px !important; padding: 12px 4% !important; align-items: flex-start !important; }

    /* Dashboard */
    .stats-row         { grid-template-columns: repeat(2, 1fr) !important; padding: 12px 4% !important; gap: 10px !important; }
    .dashboard-layout  { flex-direction: column !important; padding: 12px 4% !important; }
    .dashboard-aside   { width: 100% !important; }
    .tab-nav           { overflow-x: auto; }
    .tab-nav-btn       { font-size: 0.8rem; padding: 10px 14px; }
    .appt-card         { flex-wrap: wrap; gap: 10px; }
    .appt-actions      { width: 100%; }
    .appt-actions .btn { width: 100%; }

    /* Booking */
    .booking-layout    { flex-direction: column !important; padding: 12px 4% !important; gap: 16px !important; }
    .booking-aside     { width: 100% !important; position: static !important; order: -1 !important; }
    .consult-types     { flex-direction: column !important; gap: 8px !important; }
    .consult-type-btn  { width: 100%; padding: 12px !important; font-size: 0.88rem !important; }
    .booking-summary-card { padding: 16px !important; }
    .success-screen    { padding: 24px 16px !important; }
    .success-circle    { width: 60px !important; height: 60px !important; font-size: 1.8rem !important; }

    /* Profile */
    .profile-layout    { flex-direction: column !important; padding: 12px 4% !important; }
    .profile-aside     { width: 100% !important; }

    /* Doctor profile */
    .profile-layout-main  { flex-direction: column !important; padding: 12px 4% !important; }
    .booking-card-sticky  { width: 100% !important; position: static !important; }
    .date-picker          { gap: 6px !important; grid-template-columns: repeat(3, 1fr) !important; }
    .slots-grid           { grid-template-columns: repeat(3, 1fr) !important; }

    /* Admin */
    .admin-stats       { grid-template-columns: repeat(2, 1fr) !important; padding: 12px 4% !important; }
    .admin-layout      { flex-direction: column !important; padding: 12px 4% !important; }
    .admin-aside       { width: 100% !important; }
    .admin-table       { font-size: 0.75rem; }
    .admin-table th,
    .admin-table td    { padding: 8px 10px; }

    /* Modal */
    .modal-overlay     { padding: 10px !important; align-items: flex-end !important; }
    .modal             { width: 100% !important; max-width: 100% !important; border-radius: 16px 16px 0 0 !important; padding: 20px 16px !important; max-height: 90vh !important; overflow-y: auto !important; }
    .modal-actions     { flex-direction: column !important; }
    .modal-actions .btn { width: 100% !important; }

    /* Chat */
    .chat-panel        { width: 92vw !important; right: 4vw !important; left: 4vw !important; bottom: 70px !important; height: 65vh !important; max-height: 500px !important; }
    .chat-fab          { bottom: 12px !important; right: 16px !important; }

    /* Footer */
    footer, .footer    { padding: 24px 4% !important; font-size: 0.8rem !important; }
    .footer-grid       { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

    /* bottom padding for mobile nav */
    body { padding-bottom: 60px !important; }

    /* Mobile bottom nav */
    .mobile-bottom-nav {
        position: fixed; bottom: 0; left: 0; right: 0;
        background: white; border-top: 1px solid var(--border);
        display: flex; justify-content: space-around;
        padding: 8px 0; z-index: 998;
    }
    .mobile-nav-item {
        display: flex; flex-direction: column; align-items: center;
        gap: 2px; font-size: 0.65rem; color: var(--text-muted);
        text-decoration: none; font-weight: 600; padding: 4px 12px;
    }
    .mobile-nav-item.active { color: var(--green); }
    .mobile-nav-item span   { font-size: 1.2rem; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (max 480px)
══════════════════════════════════════════════ */
@media (max-width: 480px) {
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.3rem !important; }

    .notif-dropdown { width: 260px !important; right: -60px !important; }

    #specialtiesGrid { grid-template-columns: repeat(2, 1fr) !important; }
    .stats-row       { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — EXTRA SMALL (max 380px)
══════════════════════════════════════════════ */
@media (max-width: 380px) {
    #userGreeting { display: none !important; }
    .navbar       { padding: 0 3% !important; height: 52px !important; }
    .nav-logo img { height: 36px !important; }
    .nav-actions  { gap: 6px !important; }

    .page-wrapper,
    .hero-section,
    .dashboard-header,
    .page-header,
    .admin-header { padding-top: 52px !important; }

    .chat-panel { width: 96vw !important; right: 2vw !important; left: 2vw !important; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — LARGE DESKTOP (min 1200px)
══════════════════════════════════════════════ */
@media (min-width: 1200px) {
    .navbar { padding: 0 8% !important; }
}