/* =========================================================
   SIALKON — Modern Premium Design System (Bootstrap 5 overlay)
   ========================================================= */

:root {
    /* Brand palette */
    --brand-50:  #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --accent-500: #0ea5e9;
    --accent-pink: #ec4899;

    --success-500: #10b981;
    --success-600: #059669;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --danger-500:  #f43f5e;
    --danger-600:  #e11d48;
    --info-500:    #0ea5e9;
    --info-600:    #0284c7;

    --ink-900: #0f172a;
    --ink-800: #1e293b;
    --ink-700: #334155;
    --ink-500: #64748b;
    --ink-400: #94a3b8;
    --ink-300: #cbd5e1;
    --ink-200: #e2e8f0;
    --ink-100: #f1f5f9;
    --ink-50:  #f8fafc;

    --grad-brand:   linear-gradient(135deg, #3b82f6 0%, #0ea5e9 55%, #0284c7 100%);
    --grad-success: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    --grad-warning: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --grad-danger:  linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
    --grad-info:    linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    --grad-dark:    linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);

    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 20px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow:    0 4px 6px -1px rgba(15, 23, 42, .06), 0 2px 4px -2px rgba(15, 23, 42, .05);
    --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, .12), 0 4px 10px -4px rgba(15, 23, 42, .06);
    --shadow-brand: 0 10px 25px -8px rgba(59, 130, 246, .55);

    --sidebar-w: 272px;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* Bootstrap variable overrides */
    --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--ink-700);
    --bs-body-bg: #f4f6fb;
    --bs-primary: #3b82f6;
    --bs-primary-rgb: 59, 130, 246;
    --bs-success: #10b981;
    --bs-success-rgb: 16, 185, 129;
    --bs-warning: #f59e0b;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: #f43f5e;
    --bs-danger-rgb: 244, 63, 94;
    --bs-info: #0ea5e9;
    --bs-info-rgb: 14, 165, 233;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-border-color: var(--ink-200);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-link-color: var(--brand-600);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--brand-700);
}

/* ---------- Base & Universal Typography ---------- */
html { scroll-behavior: smooth; }

*, *::before, *::after,
html, body,
input, button, select, optgroup, textarea,
.form-control, .form-select, .form-label,
.btn, .badge, .alert, .card, .table,
.dropdown-menu, .modal, .nav, .nav-link,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(14, 165, 233, .08), transparent 60%),
        radial-gradient(900px 500px at -10% 0%, rgba(59, 130, 246, .07), transparent 60%),
        #f4f6fb;
    background-attachment: fixed;
    color: var(--ink-700);
    font-size: .925rem;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ink-900);
    font-weight: 700;
    letter-spacing: -.01em;
}

::selection { background: var(--brand-200); color: var(--ink-900); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: padding-box; border: 2px solid transparent; }

.text-primary { color: var(--brand-600) !important; }
.text-success { color: var(--success-600) !important; }
.text-danger  { color: var(--danger-600) !important; }
.text-warning { color: var(--warning-600) !important; }
.text-info    { color: var(--info-600) !important; }
.text-muted   { color: var(--ink-500) !important; }

/* ---------- Layout ---------- */
.app-wrapper { display: flex; min-height: 100vh; }

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--grad-dark);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .35s var(--ease);
    overflow: hidden;
}
.app-sidebar::before {
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    top: -140px; right: -160px;
    background: radial-gradient(circle, rgba(14, 165, 233, .35), transparent 65%);
    pointer-events: none;
}
.app-sidebar::after {
    content: "";
    position: absolute;
    width: 300px; height: 300px;
    bottom: -120px; left: -140px;
    background: radial-gradient(circle, rgba(59, 130, 246, .25), transparent 65%);
    pointer-events: none;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 22px 18px;
    position: relative;
    z-index: 1;
    text-decoration: none;
}
.sidebar-brand .brand-logo {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--grad-brand);
    display: grid; place-items: center;
    color: #fff;
    font-size: 1.25rem;
    box-shadow: var(--shadow-brand);
    flex-shrink: 0;
}
.sidebar-brand .brand-text { line-height: 1.15; }
.sidebar-brand .brand-title { color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.sidebar-brand .brand-sub { color: #94a3b8; font-size: .72rem; font-weight: 500; }

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 6px 14px 20px;
    position: relative;
    z-index: 1;
}
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

.nav-section {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: #64748b;
    padding: 18px 12px 8px;
    margin: 0;
}

.side-nav { list-style: none; padding: 0; margin: 0; }
.side-nav li { margin-bottom: 2px; }

.side-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 11px;
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
    position: relative;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.side-link .side-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: grid; place-items: center;
    font-size: 1.05rem;
    background: rgba(255,255,255,.04);
    color: #93c5fd;
    transition: all .2s var(--ease);
    flex-shrink: 0;
}
.side-link .side-label { flex: 1; }
.side-link:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
    transform: translateX(3px);
}
.side-link:hover .side-icon { background: rgba(96, 165, 250, .18); color: #fff; }

.side-link.active {
    background: linear-gradient(90deg, rgba(59, 130, 246, .28), rgba(14, 165, 233, .10));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .15);
}
.side-link.active::before {
    content: "";
    position: absolute;
    left: -14px; top: 10px; bottom: 10px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--grad-brand);
    box-shadow: 0 0 12px rgba(14, 165, 233, .8);
}
.side-link.active .side-icon { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }

.side-link .chev { font-size: .75rem; transition: transform .25s var(--ease); opacity: .7; }
.side-link[aria-expanded="true"] .chev { transform: rotate(90deg); }

.side-sub {
    list-style: none;
    padding: 4px 0 6px 28px;
    margin: 0;
    position: relative;
}
.side-sub::before {
    content: "";
    position: absolute;
    left: 28px; top: 4px; bottom: 10px;
    width: 1px;
    background: rgba(148, 163, 184, .18);
}
.side-sub a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 20px;
    color: #94a3b8;
    text-decoration: none;
    font-size: .855rem;
    border-radius: 9px;
    position: relative;
    transition: all .2s var(--ease);
}
.side-sub a::before {
    content: "";
    position: absolute;
    left: -3px; top: 50%;
    width: 7px; height: 7px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #334155;
    border: 2px solid #1e1b4b;
    transition: all .2s var(--ease);
}
.side-sub a:hover { color: #fff; background: rgba(255,255,255,.04); }
.side-sub a.active { color: #fff; font-weight: 600; }
.side-sub a.active::before { background: #38bdf8; box-shadow: 0 0 8px #38bdf8; }

.side-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--grad-danger);
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(244, 63, 94, .5);
    animation: pulse-badge 2s infinite;
}
.side-badge.warn { background: var(--grad-warning); box-shadow: 0 4px 10px -2px rgba(245, 158, 11, .5); }

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.sidebar-footer {
    padding: 14px;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(148, 163, 184, .1);
}
.sidebar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.06);
}
.sidebar-user .u-name { color: #fff; font-weight: 600; font-size: .85rem; line-height: 1.1; }
.sidebar-user .u-role { color: #94a3b8; font-size: .72rem; text-transform: capitalize; }
.sidebar-user .btn-logout {
    margin-left: auto;
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 0;
    display: grid; place-items: center;
    background: rgba(244, 63, 94, .12);
    color: #fb7185;
    transition: all .2s var(--ease);
}
.sidebar-user .btn-logout:hover { background: var(--danger-500); color: #fff; transform: rotate(-8deg); }

.avatar {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: var(--grad-brand);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* Main */
.app-main {
    flex: 1;
    margin-left: var(--sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin .35s var(--ease);
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 28px;
    background: rgba(244, 246, 251, .72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(226, 232, 240, .7);
}
.app-topbar .page-heading { min-width: 0; }
.app-topbar .page-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    color: var(--ink-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-topbar .crumbs { font-size: .78rem; color: var(--ink-500); display: flex; align-items: center; gap: 6px; }
.app-topbar .crumbs i { font-size: .65rem; }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ink-200);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-700);
    box-shadow: var(--shadow-xs);
}
.topbar-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-500); box-shadow: 0 0 0 4px rgba(16,185,129,.18); animation: blink 2s infinite; }
@keyframes blink { 50% { box-shadow: 0 0 0 7px rgba(16,185,129,.05); } }

.icon-btn {
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 1px solid var(--ink-200);
    background: #fff;
    display: grid; place-items: center;
    color: var(--ink-700);
    box-shadow: var(--shadow-xs);
    transition: all .2s var(--ease);
    position: relative;
}
.icon-btn:hover { color: var(--brand-600); border-color: var(--brand-200); transform: translateY(-1px); box-shadow: var(--shadow); }
.icon-btn .ping {
    position: absolute; top: 8px; right: 9px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger-500);
    border: 2px solid #fff;
}

.topbar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 12px 5px 5px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ink-200);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: all .2s var(--ease);
}
.topbar-user:hover { box-shadow: var(--shadow); }
.topbar-user .avatar { width: 34px; height: 34px; border-radius: 10px; font-size: .8rem; }
.topbar-user .t-name { font-size: .82rem; font-weight: 700; color: var(--ink-900); line-height: 1.1; }
.topbar-user .t-role { font-size: .7rem; color: var(--ink-500); text-transform: capitalize; }

.sidebar-toggle { display: none; }

.app-content {
    padding: 26px 28px 40px;
    flex: 1;
    animation: page-in .5s var(--ease) both;
}
@keyframes page-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.app-footer {
    padding: 16px 28px;
    font-size: .78rem;
    color: var(--ink-400);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

.sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(3px);
    z-index: 1035;
    opacity: 0; visibility: hidden;
    transition: all .3s var(--ease);
}

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-main { margin-left: 0; }
    .sidebar-toggle { display: grid; }
    body.sidebar-open .app-sidebar { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,.3); }
    body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }
    .app-topbar, .app-content { padding-left: 16px; padding-right: 16px; }
    .topbar-chip, .topbar-user .t-meta { display: none !important; }
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid rgba(226, 232, 240, .8) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    background: #fff;
    transition: box-shadow .25s var(--ease), transform .25s var(--ease);
    overflow: hidden;
}
.card:hover { box-shadow: var(--shadow) !important; }

.card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--ink-100) !important;
    padding: 16px 20px;
    font-weight: 700;
    color: var(--ink-900);
    font-size: .95rem;
}
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-info,
.card-header.bg-warning, .card-header.bg-danger, .card-header.bg-dark, .card-header.bg-secondary,
.card-header.text-white {
    color: #fff !important;
    border-bottom: 0 !important;
}

.card-header.bg-primary *, .card-header.bg-success *, .card-header.bg-info *,
.card-header.bg-warning *, .card-header.bg-danger *, .card-header.bg-dark *, .card-header.bg-secondary *,
.card-header.text-white *,
.card-header.bg-primary h1, .card-header.bg-primary h2, .card-header.bg-primary h3, .card-header.bg-primary h4, .card-header.bg-primary h5, .card-header.bg-primary h6,
.card-header.bg-success h1, .card-header.bg-success h2, .card-header.bg-success h3, .card-header.bg-success h4, .card-header.bg-success h5, .card-header.bg-success h6,
.card-header.bg-info h1, .card-header.bg-info h2, .card-header.bg-info h3, .card-header.bg-info h4, .card-header.bg-info h5, .card-header.bg-info h6,
.card-header.bg-dark h1, .card-header.bg-dark h2, .card-header.bg-dark h3, .card-header.bg-dark h4, .card-header.bg-dark h5, .card-header.bg-dark h6,
.card-header.bg-secondary h1, .card-header.bg-secondary h2, .card-header.bg-secondary h3, .card-header.bg-secondary h4, .card-header.bg-secondary h5, .card-header.bg-secondary h6 {
    color: #ffffff !important;
}

.card-header.bg-primary   { background: var(--grad-brand) !important; }
.card-header.bg-success   { background: var(--grad-success) !important; }
.card-header.bg-info      { background: var(--grad-info) !important; }
.card-header.bg-warning   { background: var(--grad-warning) !important; }
.card-header.bg-danger    { background: var(--grad-danger) !important; }
.card-header.bg-dark      { background: var(--grad-dark) !important; }
.card-header.bg-secondary { background: linear-gradient(135deg, #64748b, #475569) !important; }
.card-header.bg-light     { background: var(--ink-50) !important; }

.card-header i.bi:first-child {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--brand-50);
    margin-right: 6px;
    font-size: .95rem;
    vertical-align: middle;
}
.card-header.bg-primary i.bi:first-child, .card-header.bg-success i.bi:first-child,
.card-header.bg-info i.bi:first-child, .card-header.bg-warning i.bi:first-child,
.card-header.bg-danger i.bi:first-child, .card-header.bg-dark i.bi:first-child,
.card-header.bg-secondary i.bi:first-child {
    background: rgba(255,255,255,.2); color: #fff !important;
}

.card-body { padding: 20px; }
.card-footer { background: var(--ink-50) !important; border-top: 1px solid var(--ink-100) !important; padding: 14px 20px; }

/* Stat cards: solid colored cards become gradient tiles */
.card.bg-primary, .card.bg-success, .card.bg-warning, .card.bg-info, .card.bg-danger, .card.bg-secondary, .card.bg-dark {
    border: 0 !important;
    color: #fff !important;
    position: relative;
    isolation: isolate;
}
.card.bg-primary   { background: var(--grad-brand) !important;   box-shadow: 0 14px 30px -12px rgba(59, 130, 246, .6) !important; }
.card.bg-success   { background: var(--grad-success) !important; box-shadow: 0 14px 30px -12px rgba(16, 185, 129, .6) !important; }
.card.bg-warning   { background: var(--grad-warning) !important; box-shadow: 0 14px 30px -12px rgba(245, 158, 11, .6) !important; }
.card.bg-info      { background: var(--grad-info) !important;    box-shadow: 0 14px 30px -12px rgba(14, 165, 233, .6) !important; }
.card.bg-danger    { background: var(--grad-danger) !important;  box-shadow: 0 14px 30px -12px rgba(244, 63, 94, .6) !important; }
.card.bg-secondary { background: linear-gradient(135deg, #64748b, #334155) !important; }
.card.bg-dark      { background: var(--grad-dark) !important; }

.card.bg-primary *, .card.bg-success *, .card.bg-warning *, .card.bg-info *, .card.bg-danger *, .card.bg-secondary *, .card.bg-dark * { color: #fff !important; }

.card.bg-primary::before, .card.bg-success::before, .card.bg-warning::before, .card.bg-info::before,
.card.bg-danger::before, .card.bg-secondary::before, .card.bg-dark::before {
    content: "";
    position: absolute;
    width: 180px; height: 180px;
    right: -60px; top: -70px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    z-index: -1;
    transition: transform .5s var(--ease);
}
.card.bg-primary::after, .card.bg-success::after, .card.bg-warning::after, .card.bg-info::after,
.card.bg-danger::after, .card.bg-secondary::after, .card.bg-dark::after {
    content: "";
    position: absolute;
    width: 120px; height: 120px;
    right: 30px; bottom: -70px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    z-index: -1;
    transition: transform .5s var(--ease);
}
.card.bg-primary:hover, .card.bg-success:hover, .card.bg-warning:hover, .card.bg-info:hover,
.card.bg-danger:hover, .card.bg-secondary:hover, .card.bg-dark:hover { transform: translateY(-4px); }
.card.bg-primary:hover::before, .card.bg-success:hover::before, .card.bg-warning:hover::before,
.card.bg-info:hover::before, .card.bg-danger:hover::before { transform: scale(1.2); }

.card.bg-primary .display-5, .card.bg-success .display-5, .card.bg-warning .display-5,
.card.bg-info .display-5, .card.bg-danger .display-5 { font-size: 2.4rem; font-weight: 800 !important; letter-spacing: -.02em; }

.card.bg-primary a, .card.bg-success a, .card.bg-warning a, .card.bg-info a, .card.bg-danger a {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    margin-top: 10px !important;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    font-weight: 600;
    transition: background .2s var(--ease);
}
.card.bg-primary a:hover, .card.bg-success a:hover, .card.bg-warning a:hover, .card.bg-info a:hover, .card.bg-danger a:hover {
    background: rgba(255,255,255,.3);
}

/* Accent-left cards (border-start) */
.card.border-start { border-left-width: 4px !important; }
.card.border-start.border-danger    { border-left-color: var(--danger-500) !important; }
.card.border-start.border-primary   { border-left-color: var(--brand-500) !important; }
.card.border-start.border-success   { border-left-color: var(--success-500) !important; }
.card.border-start.border-warning   { border-left-color: var(--warning-500) !important; }
.card.border-start.border-info      { border-left-color: var(--info-500) !important; }
.card.border-start.border-secondary { border-left-color: var(--accent-500) !important; }

/* bg-light helper inside cards (filter bars) */
.card-body.bg-light { background: linear-gradient(135deg, #fff, var(--brand-50)) !important; }

/* ---------- Buttons ---------- */
.btn {
    font-weight: 600;
    border-radius: 10px;
    padding: .5rem 1rem;
    letter-spacing: .005em;
    transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s, border-color .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn.w-100 { display: flex; }
.btn-sm { padding: .35rem .75rem; font-size: .8rem; border-radius: 8px; }
.btn-lg { padding: .75rem 1.4rem; border-radius: 12px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { box-shadow: 0 0 0 4px rgba(59, 130, 246, .25) !important; }

.btn-primary {
    background: var(--grad-brand);
    border: 0;
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(59, 130, 246, .6);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px -8px rgba(59, 130, 246, .75);
}
.btn-success { background: var(--grad-success); border: 0; color: #fff; box-shadow: 0 6px 16px -6px rgba(16, 185, 129, .6); }
.btn-success:hover, .btn-success:focus, .btn-success:active { background: linear-gradient(135deg, #059669, #0d9488) !important; color: #fff !important; }
.btn-danger { background: var(--grad-danger); border: 0; color: #fff; box-shadow: 0 6px 16px -6px rgba(244, 63, 94, .6); }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: linear-gradient(135deg, #e11d48, #db2777) !important; color: #fff !important; }
.btn-warning { background: var(--grad-warning); border: 0; color: #fff; box-shadow: 0 6px 16px -6px rgba(245, 158, 11, .6); }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background: linear-gradient(135deg, #d97706, #ea580c) !important; color: #fff !important; }
.btn-info { background: var(--grad-info); border: 0; color: #fff; box-shadow: 0 6px 16px -6px rgba(14, 165, 233, .6); }
.btn-info:hover, .btn-info:focus, .btn-info:active { background: linear-gradient(135deg, #0284c7, #2563eb) !important; color: #fff !important; }
.btn-secondary { background: var(--ink-700); border: 0; color: #fff; }
.btn-secondary:hover { background: var(--ink-800) !important; color: #fff !important; }
.btn-dark { background: var(--ink-900); border: 0; }
.btn-light { background: #fff; border: 1px solid var(--ink-200); color: var(--ink-700); }
.btn-light:hover { background: var(--ink-50); border-color: var(--ink-300); }

.btn-outline-primary   { color: var(--brand-600); border: 1.5px solid var(--brand-200); background: var(--brand-50); }
.btn-outline-primary:hover { background: var(--grad-brand) !important; border-color: transparent !important; color: #fff !important; }
.btn-outline-secondary { color: var(--ink-700); border: 1.5px solid var(--ink-200); background: #fff; }
.btn-outline-secondary:hover { background: var(--ink-100) !important; color: var(--ink-900) !important; border-color: var(--ink-300) !important; }
.btn-outline-danger    { color: var(--danger-600); border: 1.5px solid #fecdd3; background: #fff1f2; }
.btn-outline-danger:hover { background: var(--grad-danger) !important; border-color: transparent !important; color: #fff !important; }
.btn-outline-success   { color: var(--success-600); border: 1.5px solid #a7f3d0; background: #ecfdf5; }
.btn-outline-success:hover { background: var(--grad-success) !important; border-color: transparent !important; color: #fff !important; }
.btn-outline-warning   { color: var(--warning-600); border: 1.5px solid #fde68a; background: #fffbeb; }
.btn-outline-warning:hover { background: var(--grad-warning) !important; border-color: transparent !important; color: #fff !important; }
.btn-outline-info      { color: var(--info-600); border: 1.5px solid #bae6fd; background: #f0f9ff; }
.btn-outline-info:hover { background: var(--grad-info) !important; border-color: transparent !important; color: #fff !important; }

.btn-group > .btn { transform: none !important; }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: .82rem; color: var(--ink-700); margin-bottom: .4rem; }
.form-control, .form-select {
    border: 1.5px solid var(--ink-200);
    border-radius: 10px;
    padding: .55rem .85rem;
    font-size: .9rem;
    color: var(--ink-900);
    background-color: #fff;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.form-control-sm, .form-select-sm { padding: .38rem .7rem; font-size: .82rem; border-radius: 8px; }
.form-control:hover, .form-select:hover { border-color: var(--ink-300); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .14);
    background-color: #fff;
}
.form-control::placeholder { color: var(--ink-400); }
.form-control:disabled, .form-control[readonly] { background: var(--ink-50); }
.input-group-text { background: var(--ink-50); border: 1.5px solid var(--ink-200); color: var(--ink-500); border-radius: 10px; }
.form-check-input:checked { background-color: var(--brand-500); border-color: var(--brand-500); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(59, 130, 246, .15); border-color: var(--brand-400); }
.form-text { color: var(--ink-500); }
.invalid-feedback { font-weight: 500; }

/* ---------- Tables ---------- */
.table-responsive { border-radius: 12px; }
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(59, 130, 246, .025);
    --bs-table-hover-bg: rgba(59, 130, 246, .05);
    margin-bottom: 0;
    color: var(--ink-700);
    font-size: .875rem;
    border-collapse: separate;
    border-spacing: 0;
}
.table > :not(caption) > * > * { padding: .85rem 1rem; border-bottom-color: var(--ink-100); vertical-align: middle; }
.table > thead > tr > th,
.table thead th {
    background: var(--ink-50) !important;
    color: var(--ink-500) !important;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    border-bottom: 1px solid var(--ink-200) !important;
    white-space: nowrap;
}
.table > thead.table-dark > tr > th, .table-dark > thead > tr > th, .table thead.table-dark th,
.table thead.table-primary th, .table thead.table-light th {
    background: var(--ink-50) !important;
    color: var(--ink-500) !important;
}
.table tbody tr { transition: background .15s var(--ease); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(59, 130, 246, .05); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table-bordered > :not(caption) > * > * { border-color: var(--ink-100); }
.table-bordered { border-color: var(--ink-100); }

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    padding: .42em .75em;
    border-radius: 999px;
    letter-spacing: .01em;
    font-size: .72rem;
}
.badge.bg-primary   { background: var(--brand-50) !important;  color: var(--brand-700) !important; box-shadow: inset 0 0 0 1px var(--brand-200); }
.badge.bg-success   { background: #ecfdf5 !important; color: #047857 !important; box-shadow: inset 0 0 0 1px #a7f3d0; }
.badge.bg-danger    { background: #fff1f2 !important; color: #be123c !important; box-shadow: inset 0 0 0 1px #fecdd3; }
.badge.bg-warning   { background: #fffbeb !important; color: #b45309 !important; box-shadow: inset 0 0 0 1px #fde68a; }
.badge.bg-info      { background: #f0f9ff !important; color: #0369a1 !important; box-shadow: inset 0 0 0 1px #bae6fd; }
.badge.bg-secondary { background: var(--ink-100) !important; color: var(--ink-700) !important; box-shadow: inset 0 0 0 1px var(--ink-200); }
.badge.bg-dark      { background: var(--ink-800) !important; color: #fff !important; }
.badge.bg-light     { background: #fff !important; color: var(--ink-700) !important; box-shadow: inset 0 0 0 1px var(--ink-200); }
.badge.text-dark    { color: inherit; }

/* ---------- Alerts ---------- */
.alert {
    border: 0;
    border-radius: 12px;
    padding: 14px 18px;
    font-weight: 500;
    border-left: 4px solid;
    box-shadow: var(--shadow-sm);
    animation: page-in .4s var(--ease) both;
}
.alert-success { background: #ecfdf5; color: #065f46; border-left-color: var(--success-500); }
.alert-danger  { background: #fff1f2; color: #9f1239; border-left-color: var(--danger-500); }
.alert-warning { background: #fffbeb; color: #92400e; border-left-color: var(--warning-500); }
.alert-info    { background: #f0f9ff; color: #075985; border-left-color: var(--info-500); }
.alert-primary { background: var(--brand-50); color: var(--brand-700); border-left-color: var(--brand-500); }
.alert-secondary { background: var(--ink-100); color: var(--ink-700); border-left-color: var(--ink-400); }

/* ---------- Pagination ---------- */
.pagination { gap: 4px; margin-bottom: 0; flex-wrap: wrap; }
.page-link {
    border: 1px solid var(--ink-200);
    border-radius: 9px !important;
    color: var(--ink-700);
    font-weight: 600;
    font-size: .82rem;
    min-width: 36px;
    text-align: center;
    padding: .4rem .7rem;
    transition: all .2s var(--ease);
}
.page-link:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.page-item.active .page-link { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: var(--shadow-brand); }
.page-item.disabled .page-link { background: var(--ink-50); color: var(--ink-400); }

/* ---------- Modals / Dropdowns ---------- */
.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -12px rgba(15, 23, 42, .35); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--ink-100); padding: 18px 22px; }
.modal-header .modal-title { font-weight: 800; }
.modal-footer { border-top: 1px solid var(--ink-100); background: var(--ink-50); }
.modal-backdrop.show { opacity: .45; backdrop-filter: blur(4px); }

.dropdown-menu {
    border: 1px solid var(--ink-100);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    animation: page-in .2s var(--ease) both;
}
.dropdown-item { border-radius: 9px; padding: 8px 12px; font-size: .875rem; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.dropdown-item:hover { background: var(--brand-50); color: var(--brand-700); }
.dropdown-item.text-danger:hover { background: #fff1f2; }

/* ---------- Nav tabs / pills ---------- */
.nav-tabs { border-bottom: 1px solid var(--ink-200); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--ink-500); font-weight: 600; border-radius: 0; }
.nav-tabs .nav-link:hover { color: var(--brand-600); }
.nav-tabs .nav-link.active { color: var(--brand-600); border-bottom-color: var(--brand-500); background: transparent; }
.nav-pills .nav-link { border-radius: 10px; font-weight: 600; color: var(--ink-500); }
.nav-pills .nav-link.active { background: var(--grad-brand); box-shadow: var(--shadow-brand); }

.list-group-item { border-color: var(--ink-100); }
.progress { border-radius: 999px; background: var(--ink-100); }
.progress-bar { background: var(--grad-brand); }

/* ---------- Utility extras ---------- */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.rounded   { border-radius: 10px !important; }
.bg-light  { background-color: var(--ink-50) !important; }
.border-bottom { border-color: var(--ink-100) !important; }

/* Staggered entrance for cards in rows */
.app-content .row > [class*="col"] { animation: page-in .55s var(--ease) both; }
.app-content .row > [class*="col"]:nth-child(1) { animation-delay: .03s; }
.app-content .row > [class*="col"]:nth-child(2) { animation-delay: .08s; }
.app-content .row > [class*="col"]:nth-child(3) { animation-delay: .13s; }
.app-content .row > [class*="col"]:nth-child(4) { animation-delay: .18s; }
.app-content .row > [class*="col"]:nth-child(5) { animation-delay: .23s; }
.app-content .row > [class*="col"]:nth-child(6) { animation-delay: .28s; }
/* Don't animate form grid columns */
.app-content form .row > [class*="col"], .app-content form.row > [class*="col"] { animation: none; }

/* Empty states */
.text-center.text-muted.py-5 i.bi { font-size: 2.6rem !important; color: var(--brand-200); }

/* Chart container polish */
.chart-card .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chart-card .chart-meta { font-size: .75rem; font-weight: 600; color: var(--ink-500); display: inline-flex; align-items: center; gap: 6px; }
.chart-card .chart-meta .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-500); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }

/* Datalist inputs */
input[list] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-width='2' d='m11 11 3 3M7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 14px; padding-right: 2.2rem !important; }