/* Shared visual theme. Keep page geometry and Bootstrap status colors intact. */
:root {
    --workspace-ink: #233550;
    --workspace-accent: #245fc5;
    --workspace-border: #dce5f0;
    --workspace-muted: #62738b;
}
body {
    background: radial-gradient(ellipse at 95% 0%, #e5edfc 0, transparent 48%), #f3f6fb !important;
    color: var(--workspace-ink);
}
.header {
    border-bottom-color: var(--workspace-border) !important;
    box-shadow: 0 2px 16px rgba(29, 53, 91, .045) !important;
}
.logo span { letter-spacing: -.6px; }
.logo .text-brand-bot { color: #2587b1; }
.logo .text-brand-store { color: #658f24; }
.sidebar {
    background: linear-gradient(180deg, #fff 65%, #f7faff) !important;
    border-right-color: var(--workspace-border) !important;
}
.sidebar-nav .nav-link { border-radius: 10px; }
.sidebar-nav .nav-link:not(.collapsed) {
    background: #e9f0fd !important;
    color: #1e50a0 !important;
    box-shadow: inset 3px 0 0 #386dd0;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-content a:hover { background: #f0f5ff !important; }
.sidebar-nav .nav-content a.active {
    background: #e9f0fd !important;
    color: #1e50a0 !important;
    font-weight: 600;
}
#main .card, .main-panel, .swal2-popup {
    border-color: var(--workspace-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(29, 53, 91, .045) !important;
}
#main .card-header {
    background: linear-gradient(100deg, #f7faff, #fff);
    border-bottom: 1px solid #e4ebf5;
    padding: 15px 20px;
    border-radius: 13px 13px 0 0;
}
#main .card-footer {
    background: #f9fbfe;
    border-top-color: #e4ebf5;
    border-radius: 0 0 13px 13px;
}
#main .card-title { color: #25436c; font-weight: 600; }
#main .card-header .card-title { font-size: 17px; }
#main .form-label { color: #354b69; font-weight: 600; }
#main .form-control, #main .form-select,
#main .select2-container--default .select2-selection,
#main .bootstrap-select > .dropdown-toggle {
    border-color: #ccd9eb;
    border-radius: 8px;
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#main .form-control:hover, #main .form-select:hover { border-color: #9eb7db; }
#main .form-control:focus, #main .form-select:focus,
#main .select2-container--focus .select2-selection {
    border-color: #5985d1;
    box-shadow: 0 0 0 3px rgba(36, 95, 197, .12);
}
#main .form-control:disabled, #main .form-select:disabled { background-color: #edf1f6; }
#main .btn {
    border-radius: 8px;
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#main .btn-primary {
    background: #3854db;
    border-color: #3854db;
    color: #fff;
    box-shadow: 0 3px 7px rgba(56, 84, 219, .16);
}
#main .btn-primary:hover, #main .btn-primary:active {
    background: #2e45bd;
    border-color: #2e45bd;
    box-shadow: 0 4px 10px rgba(36, 95, 197, .22);
}
#main .btn-primary:disabled, #main .btn-primary.disabled { opacity: .6; box-shadow: none; }
#main .btn-outline-primary { color: #245fc5; border-color: #a9bfe4; }
#main .btn-outline-primary:hover,
#main .btn-check:checked + .btn-outline-primary { background: #245fc5; border-color: #245fc5; color: #fff; }
#main .btn:focus-visible, #main .nav-link:focus-visible {
    outline: 3px solid #83a8e8;
    outline-offset: 3px;
}
#main .nav-tabs { gap: 4px; border-bottom-color: #dce5f0; }
#main .nav-tabs .nav-link {
    color: #586b85;
    padding: 8px 14px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
}
#main .nav-tabs .nav-link.active {
    background: #edf3ff;
    color: #1f54ad;
    border-color: #dce5f0 #dce5f0 #edf3ff;
    font-weight: 600;
}
#main .nav-pills .nav-link.active { background: #245fc5; color: #fff; border-radius: 8px; }
#main .table { --bs-table-border-color: #e1e8f2; --bs-table-hover-bg: #f3f7fd; }
#main .table thead th {
    background-color: #f0f4fa;
    color: #435b7b;
    font-weight: 600;
    border-bottom-color: #d5e0ee;
}
#main .alert { border-radius: 10px; box-shadow: 0 2px 6px rgba(29, 53, 91, .025); }
#main .pagination .page-link { color: #245fc5; border-color: #dce5f0; }
#main .pagination .active .page-link { color: #fff; background: #245fc5; border-color: #245fc5; }
#main .pagination .disabled .page-link { color: #6c757d; background: #eef2f7; }
@media (prefers-reduced-motion: reduce) {
    #main .btn, #main .form-control, #main .form-select { transition: none; }
}
@media print {
    body { background: #fff !important; }
    #main .card, .main-panel { box-shadow: none !important; }
    #main .card-header { background: #fff; }
}
/* Preserve validation states. */
#main .form-control.is-invalid, #main .form-select.is-invalid,
#main .was-validated .form-control:invalid, #main .was-validated .form-select:invalid { border-color: #dc3545; }
#main .form-control.is-valid, #main .form-select.is-valid,
#main .was-validated .form-control:valid, #main .was-validated .form-select:valid { border-color: #198754; }

/* Center the brand and menu glyph on the same line. */
#header .logo { height: 40px; align-items: center; }
#header .brand-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}
#header .brand-menu-toggle .bi { display: inline-flex; align-items: center; }
#header .brand-menu-toggle .bi::before { vertical-align: 0; }

/* Match the desktop brand area to the 300px sidebar. */
@media (min-width: 1200px) {
    #header .header-brand-area {
        position: relative;
        flex: 0 0 320px;
        width: 320px;
        height: 60px;
        margin-left: -20px;
    }
    #header .header-brand-area .logo span { font-size: 30px; }
    #header .header-brand-area .logo {
        width: 300px;
        justify-content: center;
    }
    #header .header-brand-area .brand-menu-toggle {
        position: absolute;
        left: 264px;
        width: 40px;
        padding: 0;
    }
}

/* Dashboard cards enter once; hover effects stay subtle and local. */
#main .dashboard-overview .info-card {
    animation: dashboard-card-enter .55s ease-out both;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#main .dashboard-overview .customers-card { animation-delay: .08s; }
#main .dashboard-overview .revenue-card { animation-delay: .16s; }
#main .dashboard-overview .card-icon {
    transition: transform .25s ease;
}
#main .dashboard-overview .info-card h6 { font-variant-numeric: tabular-nums; }
@keyframes dashboard-card-enter {
    from { opacity: 0; translate: 0 12px; }
    to { opacity: 1; translate: 0 0; }
}
@media (hover: hover) and (pointer: fine) {
    #main .dashboard-overview .info-card:hover {
        transform: translateY(-4px);
        border-color: #bdcfe9 !important;
        box-shadow: 0 10px 26px rgba(29, 53, 91, .1) !important;
    }
    #main .dashboard-overview .info-card:hover .card-icon {
        transform: scale(1.08) rotate(-4deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    #main .dashboard-overview .info-card,
    #main .dashboard-overview .card-icon {
        animation: none;
        transition: none;
        transform: none !important;
    }
}
@media print {
    #main .dashboard-overview .info-card {
        animation: none;
        transform: none;
    }
}