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

:root {
    --vs-primary: #2563eb;
    --vs-primary-hover: #1d4ed8;
    --vs-primary-light: rgba(37,99,235,0.08);
    --vs-bg: #f8fafc;
    --vs-white: #ffffff;
    --vs-border: #e2e8f0;
    --vs-text: #1e293b;
    --vs-text-muted: #64748b;
    --vs-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --vs-shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
    --vs-radius: 10px;
}

* { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }

body { background: var(--vs-bg) !important; color: var(--vs-text) !important; -webkit-font-smoothing: antialiased; }

/* NAVBAR */
.navbar { background: var(--vs-white) !important; border-bottom: 1px solid var(--vs-border); padding: 0.8rem 0 !important; box-shadow: var(--vs-shadow); }
.navbar-brand span, .navbar-brand { font-weight: 700 !important; font-size: 1.3rem !important; color: var(--vs-primary) !important; -webkit-text-fill-color: var(--vs-primary) !important; }
.nav-link { color: var(--vs-text-muted) !important; font-weight: 500 !important; font-size: 0.9rem !important; }
.nav-link:hover { color: var(--vs-primary) !important; }
.navbar-toggler-icon { filter: none; }

/* CARDS */
.card { background: var(--vs-white) !important; border: 1px solid var(--vs-border) !important; border-radius: var(--vs-radius) !important; box-shadow: var(--vs-shadow) !important; }
.card:hover { box-shadow: var(--vs-shadow-lg) !important; }
.card-header { background: var(--vs-white) !important; border-bottom: 1px solid var(--vs-border) !important; color: var(--vs-text) !important; font-weight: 600 !important; }
.card-body { color: var(--vs-text) !important; }

/* BUTTONS */
.btn-primary { background: var(--vs-primary) !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; padding: 0.55rem 1.3rem !important; box-shadow: 0 2px 8px rgba(37,99,235,0.3) !important; }
.btn-primary:hover { background: var(--vs-primary-hover) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(37,99,235,0.4) !important; }
.btn-outline-primary { border-color: var(--vs-primary) !important; color: var(--vs-primary) !important; border-radius: 8px !important; font-weight: 500 !important; }
.btn-outline-primary:hover { background: var(--vs-primary) !important; color: #fff !important; }
.btn-dark { background: #f1f5f9 !important; border: 1px solid var(--vs-border) !important; color: var(--vs-text) !important; border-radius: 8px !important; }
.btn-dark:hover { background: #e2e8f0 !important; }

/* FORMS */
.form-control, .form-select { background: var(--vs-white) !important; border: 1px solid var(--vs-border) !important; color: var(--vs-text) !important; border-radius: 8px !important; padding: 0.6rem 0.9rem !important; }
.form-control:focus, .form-select:focus { border-color: var(--vs-primary) !important; box-shadow: 0 0 0 3px var(--vs-primary-light) !important; }
.form-label { color: var(--vs-text-muted) !important; font-weight: 500 !important; font-size: 0.85rem !important; }

/* LIST GROUP */
.list-group-item { background: var(--vs-white) !important; border-color: var(--vs-border) !important; color: var(--vs-text) !important; }
.list-group-item:hover { background: var(--vs-primary-light) !important; }
.list-group-item.active { background: var(--vs-primary) !important; border-color: var(--vs-primary) !important; color: #fff !important; }

/* SIDEBAR */
.offcanvas-body { background: var(--vs-white) !important; }
.offcanvas-body .nav-link { border-radius: 8px !important; margin-bottom: 2px !important; padding: 0.55rem 0.9rem !important; color: var(--vs-text) !important; }
.offcanvas-body .nav-link:hover { background: var(--vs-primary-light) !important; color: var(--vs-primary) !important; }
.svg-icon { fill: var(--vs-text-muted) !important; }

/* BREADCRUMB */
.breadcrumb { background: transparent !important; padding: 0 !important; }
.breadcrumb-item a { color: var(--vs-primary) !important; }
.breadcrumb-item.active { color: var(--vs-text-muted) !important; }

/* DROPDOWN - z-index fix */
.dropdown-menu { background: var(--vs-white) !important; border: 1px solid var(--vs-border) !important; border-radius: var(--vs-radius) !important; box-shadow: var(--vs-shadow-lg) !important; z-index: 9999 !important; position: absolute !important; }
.dropdown-item { color: var(--vs-text) !important; }
.dropdown-item:hover { background: var(--vs-primary-light) !important; color: var(--vs-primary) !important; }

/* SHOWCASE fix z-index */
.content-block, #wrapper, section[role="main"] { position: relative; z-index: 1; }
.navbar { position: relative; z-index: 1050; }
.dropdown { position: relative; z-index: 1060; }

/* FOOTER */
#footer { color: var(--vs-text-muted) !important; border-top: 1px solid var(--vs-border); padding-top: 1rem; }
#footer a { color: var(--vs-primary) !important; }

/* ALERTS */
.alert-danger { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; border-radius: 8px !important; }
.alert-success { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #166534 !important; border-radius: 8px !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; border-radius: 8px !important; }

/* TABLE */
.table { color: var(--vs-text) !important; }
.table th { color: var(--vs-text-muted) !important; border-color: var(--vs-border) !important; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.3px; }
.table td { border-color: var(--vs-border) !important; }

/* LOGIN */
.page-login { background: var(--vs-bg) !important; }
.page-login .card { box-shadow: var(--vs-shadow-lg) !important; }
.page-login h1, .page-login h2 { color: var(--vs-text) !important; }

/* INPUT GROUP */
.input-group .btn-outline-secondary { background: #f8fafc !important; border: 1px solid var(--vs-border) !important; color: var(--vs-text-muted) !important; }

/* PAGINATION */
.page-link { background: var(--vs-white) !important; border-color: var(--vs-border) !important; color: var(--vs-text) !important; }
.page-item.active .page-link { background: var(--vs-primary) !important; border-color: var(--vs-primary) !important; color: #fff !important; }

/* GENERAL */
a { color: var(--vs-primary) !important; text-decoration: none !important; }
a:hover { color: var(--vs-primary-hover) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--vs-text) !important; }
.text-muted { color: var(--vs-text-muted) !important; }
.container { max-width: 1140px; }
.card, .btn, .nav-link, .form-control { transition: all 0.15s ease !important; }
.list-group { border-radius: var(--vs-radius) !important; overflow: hidden; }
.badge { border-radius: 6px !important; font-weight: 500 !important; }

@media(max-width:768px) { .navbar-brand span { font-size: 1.1rem !important; } }