/* =========================================================
   RapidLab — Material Design overlay for user-facing template
   Loaded AFTER main.css / custom.css so it can override safely.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --md-primary:        #4f46e5;
    --md-primary-dark:   #4338ca;
    --md-primary-light:  #818cf8;
    --md-accent:         #06b6d4;
    --md-success:        #10b981;
    --md-danger:         #ef4444;
    --md-warning:        #f59e0b;
    --md-info:           #0ea5e9;
    --md-surface:        #ffffff;
    --md-surface-alt:    #f8fafc;
    --md-bg:             #f1f5f9;
    --md-text:           #1f2937;
    --md-text-muted:     #6b7280;
    --md-divider:        #e5e7eb;
    --md-elev-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06);
    --md-elev-2: 0 2px 4px rgba(0,0,0,.06), 0 4px 8px rgba(0,0,0,.06);
    --md-elev-3: 0 4px 12px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08);
    --md-elev-4: 0 12px 32px rgba(0,0,0,.10), 0 24px 48px rgba(0,0,0,.08);
    --md-radius: 14px;
    --md-radius-sm: 8px;
    --md-radius-lg: 18px;
    --md-trans: cubic-bezier(.4,0,.2,1);
}

/* ---------- Global ---------- */
body, html {
    font-family: 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
    background: var(--md-bg) !important;
    color: var(--md-text);
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.title,.section-title,.dashboard-title,.page-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--md-text);
}

/* ---------- Dashboard layout ---------- */
.dashboard-wrapper { background: var(--md-bg) !important; }
.dashboard-container, .dashboard-content { padding: 1.5rem 1.75rem !important; }

/* ---------- Cards ---------- */
.card, .dashboard-widget, .single-widget, .info-card, .profile-card, .box, .widget {
    background: var(--md-surface) !important;
    border: 0 !important;
    border-radius: var(--md-radius) !important;
    box-shadow: var(--md-elev-1) !important;
    transition: box-shadow .25s var(--md-trans), transform .2s var(--md-trans);
}
.card:hover, .dashboard-widget:hover, .single-widget:hover { box-shadow: var(--md-elev-3) !important; }
.card .card-header, .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--md-divider) !important;
    padding: 1rem 1.4rem !important;
    font-weight: 600;
}
.card .card-body { padding: 1.4rem 1.5rem !important; }

/* ---------- Stat / info widgets ---------- */
.dashboard-widget, .info-card, .single-widget {
    padding: 1.4rem !important;
    position: relative;
    overflow: hidden;
}
.dashboard-widget::after, .info-card::after, .single-widget::after {
    content:''; position:absolute; top:0; left:0; width:4px; height:100%;
    background: linear-gradient(180deg, var(--md-primary), var(--md-primary-light));
}
.dashboard-widget .amount, .info-card .amount, .single-widget .amount,
.dashboard-widget h3, .info-card h3, .single-widget h3 {
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    color: var(--md-text) !important;
}
.dashboard-widget p, .info-card p, .single-widget p {
    text-transform: uppercase;
    font-size: .72rem !important;
    letter-spacing: .06em;
    color: var(--md-text-muted) !important;
    margin: 0 0 .35rem !important;
}

/* ---------- Buttons ---------- */
.btn, .cmn-btn, .btn--base {
    border-radius: 999px !important;
    padding: .55rem 1.35rem !important;
    font-weight: 500 !important;
    border: 0 !important;
    box-shadow: var(--md-elev-1);
    transition: all .2s var(--md-trans) !important;
    text-transform: none !important;
    letter-spacing: .015em;
    position: relative;
    overflow: hidden;
}
.btn:hover, .cmn-btn:hover, .btn--base:hover { box-shadow: var(--md-elev-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--md-elev-1); }

.btn--base, .btn--primary, .btn-primary, .bg--base, .btn--success, .btn-success {
    background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark)) !important;
    color:#fff !important;
}
.btn--danger, .btn-danger  { background: var(--md-danger)  !important; color:#fff !important; }
.btn--warning,.btn-warning { background: var(--md-warning) !important; color:#fff !important; }
.btn--success,.btn-success { background: var(--md-success) !important; color:#fff !important; }
.btn--info,   .btn-info    { background: var(--md-info)    !important; color:#fff !important; }
.btn-outline-primary { background: transparent !important; color: var(--md-primary) !important; box-shadow: inset 0 0 0 1px var(--md-primary); }

/* Ripple */
.btn::after, .cmn-btn::after {
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at center, rgba(255,255,255,.4) 1%, transparent 1%) center/15000% 15000% no-repeat;
    opacity: 0; transition: background-size .4s, opacity .8s;
}
.btn:active::after, .cmn-btn:active::after {
    background-size: 100% 100%; opacity: 1; transition: 0s;
}

/* ---------- Form fields ---------- */
.form-control, .form-select, textarea, select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"] {
    background: var(--md-surface) !important;
    border: 1px solid var(--md-divider) !important;
    border-radius: var(--md-radius-sm) !important;
    padding: .7rem 1rem !important;
    color: var(--md-text) !important;
    font-size: .92rem !important;
    transition: border-color .2s var(--md-trans), box-shadow .2s var(--md-trans);
}
.form-control:focus, .form-select:focus, textarea:focus {
    border-color: var(--md-primary) !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important;
    outline: 0 !important;
}
label, .form-label {
    font-weight: 500;
    color: var(--md-text-muted);
    font-size: .85rem;
}

/* ---------- Tables ---------- */
.table, .custom-table, .table--responsive {
    background: var(--md-surface);
    border-radius: var(--md-radius);
    overflow: hidden;
    box-shadow: var(--md-elev-1);
}
.table thead th, .custom-table thead th {
    background: var(--md-surface-alt) !important;
    color: var(--md-text-muted) !important;
    font-weight: 600 !important;
    font-size: .78rem !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--md-divider) !important;
    padding: 1rem !important;
}
.table tbody td, .custom-table tbody td {
    padding: .9rem 1rem !important;
    border-top: 1px solid var(--md-divider) !important;
    vertical-align: middle;
}
.table tbody tr:hover { background: rgba(79,70,229,.04) !important; }

/* ---------- Badges ---------- */
.badge, .badge--success, .badge--warning, .badge--danger {
    border-radius: 999px !important;
    padding: .35em .9em !important;
    font-weight: 500 !important;
    font-size: .72rem !important;
}
.badge-success,.badge--success,.bg-success { background: rgba(16,185,129,.15) !important; color: var(--md-success) !important; }
.badge-danger, .badge--danger, .bg-danger  { background: rgba(239,68,68,.15)  !important; color: var(--md-danger)  !important; }
.badge-warning,.badge--warning,.bg-warning { background: rgba(245,158,11,.15) !important; color: var(--md-warning) !important; }
.badge-primary,.badge--primary,.bg-primary { background: rgba(79,70,229,.15)  !important; color: var(--md-primary) !important; }

/* ---------- Sidebar (user dashboard) ---------- */
.sidebar, .dashboard-sidebar, .sidenav, .left-sidebar {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    box-shadow: var(--md-elev-2) !important;
}
.sidebar a, .dashboard-sidebar a, .sidenav a {
    color: #cbd5e1 !important;
    border-radius: 999px;
    transition: all .2s var(--md-trans);
}
.sidebar a:hover, .dashboard-sidebar a:hover { color:#fff !important; background: rgba(255,255,255,.08) !important; }
.sidebar a.active, .dashboard-sidebar a.active, .menu-item.active>a {
    color:#fff !important;
    background: linear-gradient(90deg, var(--md-primary), var(--md-primary-dark)) !important;
    box-shadow: var(--md-elev-2);
}

/* ---------- Topbar ---------- */
.dashboard-topbar, .topbar, .navbar {
    background: var(--md-surface) !important;
    box-shadow: var(--md-elev-1) !important;
    border: 0 !important;
}

/* ---------- Login / Register pages ---------- */
.account-section, .account-wrapper, .auth-wrapper, .login-section, .signup-section {
    min-height: 100vh;
    background: linear-gradient(135deg, #4f46e5, #06b6d4) !important;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}
.account-section::before, .account-wrapper::before, .auth-wrapper::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255,255,255,.12), transparent 50%);
    pointer-events:none;
}
.account-card, .auth-card, .login-card, .signup-card, .account-form, .login-wrapper {
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(14px);
    border-radius: var(--md-radius-lg) !important;
    box-shadow: var(--md-elev-4) !important;
    padding: 2.25rem !important;
    border: 1px solid rgba(255,255,255,.5);
    max-width: 460px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.account-card h2, .auth-card h2 { font-weight: 700; }

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--md-radius) !important;
    border: 0 !important;
    padding: .95rem 1.25rem !important;
    box-shadow: var(--md-elev-1);
    font-weight: 500;
}
.alert-success { background:#ecfdf5 !important; color:#065f46 !important; border-left: 4px solid var(--md-success) !important; }
.alert-danger  { background:#fef2f2 !important; color:#7f1d1d !important; border-left: 4px solid var(--md-danger)  !important; }
.alert-warning { background:#fffbeb !important; color:#78350f !important; border-left: 4px solid var(--md-warning) !important; }
.alert-info    { background:#f0f9ff !important; color:#0c4a6e !important; border-left: 4px solid var(--md-info)    !important; }

/* ---------- Pagination ---------- */
.pagination .page-link {
    border: 0 !important;
    color: var(--md-text-muted) !important;
    margin: 0 .15rem !important;
    border-radius: 8px !important;
    padding: .5rem .85rem !important;
}
.pagination .page-item.active .page-link {
    background: var(--md-primary) !important;
    color:#fff !important;
    box-shadow: var(--md-elev-2);
}

/* ---------- Misc ---------- */
hr { border-color: var(--md-divider) !important; opacity:1; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; border: 2px solid transparent; }

@keyframes md-fade-up { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }
.card, .dashboard-widget, .single-widget, .info-card, .alert, .table { animation: md-fade-up .35s var(--md-trans) both; }

/* Modals */
.modal-content { border:0 !important; border-radius: var(--md-radius-lg) !important; box-shadow: var(--md-elev-4) !important; }
.modal-header, .modal-footer { border-color: var(--md-divider) !important; }

/* Tabs */
.nav-tabs { border-bottom: 1px solid var(--md-divider) !important; }
.nav-tabs .nav-link { border:0 !important; color: var(--md-text-muted) !important; padding:.7rem 1.2rem; font-weight:500; position:relative; }
.nav-tabs .nav-link.active { color: var(--md-primary) !important; background: transparent !important; }
.nav-tabs .nav-link.active::after {
    content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--md-primary); border-radius:2px;
}

/* Preloader subtle improvement */
.preloader { background: var(--md-bg) !important; }
.animated-preloader {
    border-radius: 50%;
    border-top-color: var(--md-primary) !important;
}