/* =================================================================
   style.css — Patient Block Portal — Professional UI/UX
   =================================================================
   Organized by section:
     1. CSS Variables & Root
     2. Global Styles
     3. Navbar
     4. Avatar Component (Animated Initials)
     5. Cards (Login, Form, Table, Welcome, Empty State)
     6. Form Inputs
     7. Buttons
     8. Password Strength Meter
     9. Dashboard Table
    10. Modals
    11. Flash Alerts
    12. Footer
    13. Animations & Transitions
    14. Utility Classes
    15. Block Request Workflow Components
    16. Responsive Overrides
   ================================================================= */


/* =================================================================
   1. CSS VARIABLES & ROOT
   ================================================================= */

:root {
    /* Primary palette — Deep indigo to violet */
    --primary:              #6366f1;
    --primary-hover:        #4f46e5;
    --primary-dark:         #3730a3;
    --primary-light:        #e0e7ff;
    --primary-glow:         rgba(99, 102, 241, 0.25);

    /* Accent — Teal for highlights */
    --accent:               #14b8a6;
    --accent-light:         #ccfbf1;

    /* Neutral palette */
    --bg-body:              #f4f6fb;
    --bg-card:              #ffffff;
    --bg-navbar:            #0f172a;
    --bg-navbar-mid:        #1e293b;
    --bg-navbar-hover:      #334155;

    /* Text */
    --text-primary:         #0f172a;
    --text-secondary:       #475569;
    --text-muted:           #94a3b8;
    --text-white:           #f8fafc;

    /* Status colors */
    --success:              #22c55e;
    --success-light:        #dcfce7;
    --warning:              #f59e0b;
    --warning-light:        #fef3c7;
    --danger:               #ef4444;
    --danger-light:         #fee2e2;
    --info:                 #3b82f6;
    --info-light:           #dbeafe;

    /* Borders & Shadows */
    --border-color:         #e2e8f0;
    --border-light:         #f1f5f9;
    --shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:            0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-xl:            0 20px 40px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -6px rgba(0, 0, 0, 0.06);
    --shadow-primary:       0 4px 14px rgba(99, 102, 241, 0.3);
    --shadow-primary-lg:    0 8px 24px rgba(99, 102, 241, 0.35);

    /* Border radius */
    --radius-xs:            0.25rem;
    --radius-sm:            0.5rem;
    --radius-md:            0.75rem;
    --radius-lg:            1rem;
    --radius-xl:            1.25rem;
    --radius-full:          9999px;

    /* Transitions */
    --transition-fast:      all 0.15s ease;
    --transition-base:      all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth:    all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:      all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Gradient backgrounds */
    --gradient-primary:     linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
    --gradient-navbar:      linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --gradient-card:        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    --gradient-welcome:     linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}


/* =================================================================
   2. GLOBAL STYLES
   ================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

/* Push footer to bottom */
.main-content {
    flex: 1;
}

/* Override Bootstrap primary */
.btn-primary {
    background: var(--gradient-primary);
    border: none;
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--gradient-primary);
    filter: brightness(1.05);
    box-shadow: var(--shadow-primary-lg);
    transform: translateY(-1px);
}

.text-primary {
    color: var(--primary) !important;
}

/* Selection highlight */
::selection {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}


/* =================================================================
   3. NAVBAR
   ================================================================= */

.bg-navbar {
    background: var(--gradient-navbar);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.6rem 0;
}

.navbar-brand {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    transition: var(--transition-base);
    color: var(--text-white) !important;
}

.navbar-brand i {
    color: var(--primary);
    filter: drop-shadow(0 0 4px var(--primary-glow));
}

.navbar-brand:hover {
    opacity: 0.9;
    transform: translateX(2px);
}

/* Admin/user badge in navbar */
.admin-badge {
    background-color: var(--bg-navbar-hover);
    color: var(--text-white);
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Navbar controls container */
.nav-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Logout button */
.btn-logout {
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    padding: 0.4rem 1rem;
    transition: var(--transition-base);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-logout:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}


/* =================================================================
   4. AVATAR COMPONENT (Animated Initials)
   ================================================================= */

/* Base avatar circle */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    position: relative;
    flex-shrink: 0;
}

/* Small avatar — Navbar */
.avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

/* Medium avatar — Cards */
.avatar-md {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Large avatar — Welcome page */
.avatar-lg {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}

/* Animated pulse ring around avatar */
.avatar-animated {
    animation: avatarPulse 3s ease-in-out infinite;
}

.avatar-animated::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    opacity: 0;
    z-index: -1;
    animation: avatarRing 3s ease-in-out infinite;
}

@keyframes avatarPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes avatarRing {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.15); }
}


/* =================================================================
   5. CARDS
   ================================================================= */

/* --- Login Card --- */
.login-wrapper {
    min-height: calc(100vh - 200px);
}

.login-card {
    background: var(--gradient-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    transition: var(--transition-smooth);
    overflow: hidden;
    position: relative;
}

/* Subtle top accent border */
.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
}

.login-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-3px);
}

/* Login icon circle */
.login-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
    transition: var(--transition-base);
}

.login-card:hover .login-icon-wrapper {
    transform: scale(1.05);
}

/* --- Form Card (Add User, Block Request) --- */
.form-card {
    background: var(--gradient-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
}

.form-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
}

/* --- Table Card (Dashboard) --- */
.table-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: var(--transition-base);
}

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

/* --- Welcome Card (User Dashboard) --- */
.welcome-card {
    background: var(--gradient-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.welcome-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.welcome-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-3px);
}

/* Welcome icon circle */
.welcome-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    color: #ffffff;
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.35);
}

/* User actions area */
#user-actions {
    min-height: 60px;
}

/* --- Empty State Card --- */
.empty-state-card {
    background: var(--gradient-card);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.empty-state-card i {
    opacity: 0.35;
}

.empty-state-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}


/* =================================================================
   6. FORM INPUTS
   ================================================================= */

.input-styled {
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    font-size: 0.93rem;
    transition: var(--transition-base);
    background-color: #f8fafc;
    color: var(--text-primary);
}

.input-styled:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3.5px var(--primary-glow);
    background-color: #ffffff;
    outline: none;
}

.input-styled:hover:not(:focus) {
    border-color: #cbd5e1;
    background-color: #ffffff;
}

/* Form labels */
.form-label {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

/* Input group buttons */
.input-group .btn {
    border-color: var(--border-color);
    transition: var(--transition-base);
    font-size: 0.9rem;
}

.input-group .btn:hover {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}


/* =================================================================
   7. BUTTONS
   ================================================================= */

/* Login / Submit buttons */
.btn-login,
.btn-submit {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.015em;
    padding: 0.75rem;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-login::after,
.btn-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}

.btn-login:hover::after,
.btn-submit:hover::after {
    left: 100%;
}

/* Add User button (dashboard header) */
.btn-add-user {
    border-radius: var(--radius-full);
    font-weight: 600;
    padding: 0.5rem 1.4rem;
    font-size: 0.88rem;
    transition: var(--transition-base);
    letter-spacing: 0.01em;
}

.btn-add-user:hover {
    transform: translateY(-2px);
}

/* Small action buttons (table) */
.btn-action {
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    transition: var(--transition-base);
    letter-spacing: 0.01em;
}

.btn-action:hover {
    transform: translateY(-1px);
}

/* Toggle password visibility */
.toggle-password-btn {
    cursor: pointer;
    transition: var(--transition-fast);
}

/* Generate reset password */
.generate-reset-btn {
    cursor: pointer;
    transition: var(--transition-fast);
}

/* Override Bootstrap success for active status */
.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

.btn-success:hover {
    background-color: #16a34a;
    border-color: #16a34a;
}

/* Override Bootstrap warning */
.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #ffffff;
}

.btn-warning:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: #ffffff;
}

/* Override Bootstrap danger outline */
.btn-outline-danger:hover {
    background-color: var(--danger);
    border-color: var(--danger);
}


/* =================================================================
   8. PASSWORD STRENGTH METER
   ================================================================= */

.strength-meter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Background track */
.strength-bar-track {
    flex: 1;
    height: 5px;
    background-color: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
}

/* Animated fill bar */
.strength-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.4s ease;
}

/* Strength label */
.strength-label {
    font-size: 0.72rem;
    font-weight: 600;
    min-width: 60px;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--transition-fast);
}


/* =================================================================
   9. DASHBOARD TABLE
   ================================================================= */

.dashboard-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid var(--border-color);
}

.dashboard-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.9rem 1rem;
    white-space: nowrap;
}

.dashboard-table tbody td {
    padding: 0.9rem 1rem;
    font-size: 0.88rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

/* Row hover */
.dashboard-table tbody tr {
    transition: var(--transition-fast);
}

.dashboard-table tbody tr:hover {
    background-color: #f8fafc;
}

/* Disabled user row */
.table-row-disabled {
    opacity: 0.5;
    background-color: #fafafa;
}

.table-row-disabled:hover {
    opacity: 0.65;
}

/* Username badge in table */
.dashboard-table .badge {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 0.65rem;
}


/* =================================================================
   10. MODALS
   ================================================================= */

.modal-styled {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.modal-styled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    z-index: 1;
}

.modal-styled .modal-header {
    padding: 1.25rem 1.5rem 0.5rem;
}

.modal-styled .modal-body {
    padding: 0.75rem 1.5rem;
}

.modal-styled .modal-footer {
    padding: 0.75rem 1.5rem 1.25rem;
}

/* Modal animation */
.modal.fade .modal-dialog {
    transform: scale(0.92) translateY(-15px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

/* Modal backdrop */
.modal-backdrop.show {
    opacity: 0.4;
}


/* =================================================================
   11. FLASH ALERTS
   ================================================================= */

.flash-alert {
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid;
}

.alert-success { border-left-color: var(--success); }
.alert-danger  { border-left-color: var(--danger); }
.alert-warning { border-left-color: var(--warning); }
.alert-info    { border-left-color: var(--info); }

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =================================================================
   12. FOOTER
   ================================================================= */

.footer {
    background-color: var(--bg-body);
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    padding: 1rem 0;
}

.footer-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-base);
    position: relative;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.footer-link:hover {
    color: var(--primary-dark);
}

.footer-link:hover::after {
    width: 100%;
}


/* =================================================================
   13. ANIMATIONS & TRANSITIONS
   ================================================================= */

/* Fade-in on page load */
.fade-in {
    animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered fade-in */
.fade-in:nth-child(1) { animation-delay: 0s; }
.fade-in:nth-child(2) { animation-delay: 0.08s; }
.fade-in:nth-child(3) { animation-delay: 0.16s; }

/* Smooth focus for interactive elements */
a, button, input, select, textarea {
    transition: var(--transition-fast);
}

/* Subtle lift on card hover */
.login-card:hover,
.form-card:hover,
.welcome-card:hover {
    transform: translateY(-3px);
}

/* Shimmer effect for loading states */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}


/* =================================================================
   14. UTILITY CLASSES
   ================================================================= */

/* Gradient text */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Divider with subtle gradient */
hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    opacity: 1;
}

/* Badge refinements */
.badge.bg-primary {
    background: var(--gradient-primary) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* =================================================================
   15. BLOCK REQUEST WORKFLOW COMPONENTS
   ================================================================= */

/* --- Step Badge (numbered circle) --- */
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--gradient-primary);
    color: #ffffff;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 2px 8px var(--primary-glow);
}

/* Step badge — success variant (green) */
.step-badge-success {
    background: var(--success);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Step badge — warning variant (amber) */
.step-badge-warning {
    background: var(--warning);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* --- Customer Details Card (found state) --- */
.customer-details-card {
    background-color: var(--primary-light);
    border: 1px solid rgba(99, 102, 241, 0.15);
    transition: var(--transition-base);
}

.customer-details-card:hover {
    border-color: rgba(99, 102, 241, 0.25);
    box-shadow: var(--shadow-sm);
}

/* --- Result Icons (success / error states) --- */
.result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    margin: 0 auto;
}

/* Success result — green circle */
.result-icon-success {
    background-color: var(--success-light);
    color: var(--success);
    animation: resultPop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Error result — red circle */
.result-icon-error {
    background-color: var(--danger-light);
    color: var(--danger);
    animation: resultPop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pop-in animation for result icons */
@keyframes resultPop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Spinner Override for Block Workflow --- */
.spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 0.2rem;
}

/* --- Stat Badges (Admin Dashboard + Block Logs) --- */
.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    transition: var(--transition-base);
}

.stat-badge-label {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Total — neutral indigo */
.stat-badge-total {
    background-color: var(--primary-light);
    color: var(--primary);
}

/* Success — green */
.stat-badge-success {
    background-color: var(--success-light);
    color: var(--success);
}

/* Failed — red */
.stat-badge-failed {
    background-color: var(--danger-light);
    color: var(--danger);
}

/* Hover lift on stat badges */
.stat-badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* =================================================================
   16. RESPONSIVE OVERRIDES
   ================================================================= */

/* Tablet and below */
@media (max-width: 768px) {
    .dashboard-table thead th,
    .dashboard-table tbody td {
        font-size: 0.76rem;
        padding: 0.7rem 0.5rem;
    }

    .btn-action {
        font-size: 0.7rem;
        padding: 0.25rem 0.55rem;
    }

    .admin-badge {
        display: none;
    }

    .avatar-sm {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .btn-add-user {
        font-size: 0.82rem;
        padding: 0.4rem 1rem;
    }

    .navbar-brand {
        font-size: 0.95rem;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .login-card .card-body {
        padding: 1.5rem !important;
    }

    .form-card .card-body {
        padding: 1.25rem !important;
    }

    .welcome-card .card-body {
        padding: 2rem 1.25rem !important;
    }

    .navbar-brand {
        font-size: 0.9rem;
    }

    .avatar-lg {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
    }
}