/* DSR visual redesign layer.
   This file is loaded after page-level styles and only changes presentation. */

:root {
    --dsr-bg: #f4f6f8;
    --dsr-surface: #ffffff;
    --dsr-surface-soft: #f8fafc;
    --dsr-surface-muted: #eef2f6;
    --dsr-border: #d9e0e8;
    --dsr-border-strong: #c5ceda;
    --dsr-text: #172033;
    --dsr-text-soft: #516074;
    --dsr-text-muted: #7a8797;
    --dsr-primary: #1f4f82;
    --dsr-primary-strong: #173b62;
    --dsr-primary-soft: #e7f0fa;
    --dsr-accent: #0f766e;
    --dsr-accent-soft: #e4f4f1;
    --dsr-warning: #b76e00;
    --dsr-warning-soft: #fff5df;
    --dsr-danger: #b42318;
    --dsr-danger-soft: #fff0ee;
    --dsr-purple: #5b5fc7;
    --dsr-purple-soft: #f0f0ff;
    --dsr-radius-sm: 6px;
    --dsr-radius: 8px;
    --dsr-radius-lg: 10px;
    --dsr-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --dsr-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
    --dsr-shadow-lg: 0 18px 42px rgba(16, 24, 40, 0.14);
}

html {
    background: var(--dsr-bg);
}

body {
    background: var(--dsr-bg) !important;
    color: var(--dsr-text) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

body.bg-light {
    background-color: var(--dsr-bg) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(31, 79, 130, 0.08) 0, rgba(31, 79, 130, 0) 260px),
        radial-gradient(circle at 12% 0, rgba(15, 118, 110, 0.08), rgba(15, 118, 110, 0) 240px);
}

.container,
.container-fluid {
    max-width: 1320px;
}

/* Navigation and page headers */
.navbar,
.site-header {
    background: #14253b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14) !important;
}

.site-header {
    min-height: 74px;
    padding: 0.45rem 0 !important;
}

.site-header .container {
    max-width: 1420px;
}

.navbar-brand,
.site-header .navbar-brand {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.site-header .navbar-brand {
    color: #ffffff !important;
    font-size: clamp(1.2rem, 1.7vw, 1.65rem) !important;
    white-space: nowrap;
}

.site-header .navbar-brand .bi {
    font-size: 1.65rem;
    vertical-align: -0.18em;
}

.site-header-nav {
    gap: 0.45rem;
    align-items: stretch;
}

.navbar .nav-link,
.site-header .nav-link {
    border-radius: var(--dsr-radius-sm) !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

.site-header .nav-link {
    min-width: 116px;
    min-height: 58px;
    display: flex !important;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0.8rem !important;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 700 !important;
}

.site-header .nav-link .bi {
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.navbar .nav-link:hover,
.navbar .nav-link.active,
.site-header .nav-link:hover,
.site-header .nav-link.active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.site-header .nav-link.active {
    background: rgba(255, 255, 255, 0.16) !important;
}

.hero-section {
    background: #14253b !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 1.5rem !important;
    padding: 1.35rem 0 !important;
}

.hero-section::before {
    display: none !important;
}

.hero-section .container,
.hero-section .container-fluid {
    display: block;
}

.hero-section .container > .d-flex,
.hero-section .container-fluid > .d-flex {
    width: 100%;
    gap: 1rem;
    justify-content: space-between !important;
}

.hero-section .container > .d-flex > .d-flex:last-child,
.hero-section .container-fluid > .d-flex > .d-flex:last-child {
    margin-left: auto;
    justify-content: flex-end;
}

.hero-section h1,
.hero-section h2 {
    margin: 0 !important;
    font-size: clamp(1.35rem, 2vw, 2rem) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.hero-section p,
.hero-section .lead {
    margin: 0.25rem 0 0 !important;
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 0.95rem !important;
}

.back-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    color: #ffffff !important;
    border-radius: var(--dsr-radius) !important;
    box-shadow: none !important;
}

.back-btn:hover {
    background: #ffffff !important;
    color: var(--dsr-primary-strong) !important;
}

/* Cards and panels */
.card,
.feature-card,
.query-card,
.vehicle-card,
.balance-card,
.material-card,
.financial-card,
.reminder-card,
.dealer-card {
    background: var(--dsr-surface) !important;
    border: 1px solid var(--dsr-border) !important;
    border-radius: var(--dsr-radius) !important;
    box-shadow: var(--dsr-shadow-sm) !important;
    backdrop-filter: none !important;
    overflow: hidden;
}

.card:hover,
.feature-card:hover,
.query-card:hover,
.vehicle-card:hover,
.dealer-card:hover {
    transform: none !important;
    box-shadow: var(--dsr-shadow) !important;
}

.card-header,
.modal-header {
    background: var(--dsr-surface-soft) !important;
    color: var(--dsr-text) !important;
    border-bottom: 1px solid var(--dsr-border) !important;
    border-radius: var(--dsr-radius) var(--dsr-radius) 0 0 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

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

.summary-card,
.metric-card,
.stat-card {
    background: var(--dsr-surface) !important;
    color: var(--dsr-text) !important;
    border: 1px solid var(--dsr-border) !important;
    border-left: 4px solid var(--dsr-primary) !important;
    border-radius: var(--dsr-radius) !important;
    box-shadow: var(--dsr-shadow-sm) !important;
    padding: 1rem !important;
}

.summary-card.success,
.summary-card.ppc,
.metric-card.success {
    border-left-color: var(--dsr-accent) !important;
}

.summary-card.warning,
.summary-card.premium,
.metric-card.warning {
    border-left-color: var(--dsr-warning) !important;
}

.summary-card.danger,
.summary-card.opc,
.metric-card.danger {
    border-left-color: var(--dsr-danger) !important;
}

.summary-card h3,
.summary-card .card-value,
.metric-card .value,
.stat-card .value {
    color: var(--dsr-text) !important;
    font-size: clamp(1.25rem, 1.6vw, 1.75rem) !important;
}

.summary-card small,
.summary-card .card-title,
.metric-card .label,
.stat-card .label {
    color: var(--dsr-text-soft) !important;
    letter-spacing: 0 !important;
}

/* Forms */
.form-label {
    color: var(--dsr-text-soft) !important;
    font-size: 0.83rem !important;
    font-weight: 700 !important;
}

.form-control,
.form-select,
.input-group-text {
    background-color: #ffffff !important;
    border: 1px solid var(--dsr-border-strong) !important;
    border-radius: var(--dsr-radius) !important;
    color: var(--dsr-text) !important;
    min-height: 40px;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dsr-primary) !important;
    box-shadow: 0 0 0 3px rgba(31, 79, 130, 0.14) !important;
}

.input-group-text {
    background: var(--dsr-surface-soft) !important;
    color: var(--dsr-text-soft) !important;
}

/* Buttons */
.btn {
    border-radius: var(--dsr-radius) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease !important;
}

.btn:hover,
.btn:active {
    transform: none !important;
}

.btn-primary {
    background: var(--dsr-primary) !important;
    border-color: var(--dsr-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background: var(--dsr-primary-strong) !important;
    border-color: var(--dsr-primary-strong) !important;
}

.btn-success {
    background: var(--dsr-accent) !important;
    border-color: var(--dsr-accent) !important;
    color: #ffffff !important;
}

.btn-warning {
    background: var(--dsr-warning) !important;
    border-color: var(--dsr-warning) !important;
    color: #ffffff !important;
}

.btn-danger {
    background: var(--dsr-danger) !important;
    border-color: var(--dsr-danger) !important;
    color: #ffffff !important;
}

.btn-info {
    background: #276c98 !important;
    border-color: #276c98 !important;
    color: #ffffff !important;
}

.btn-secondary,
.btn-outline-secondary {
    background: #ffffff !important;
    border: 1px solid var(--dsr-border-strong) !important;
    color: var(--dsr-text-soft) !important;
}

.btn-outline-primary {
    background: #ffffff !important;
    border: 1px solid var(--dsr-primary) !important;
    color: var(--dsr-primary) !important;
}

.btn-outline-primary:hover {
    background: var(--dsr-primary-soft) !important;
    color: var(--dsr-primary-strong) !important;
}

.action-btn,
.expand-btn {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Tables */
.table-container,
.table-responsive,
.vehicle-table {
    background: var(--dsr-surface) !important;
    border: 1px solid var(--dsr-border) !important;
    border-radius: var(--dsr-radius) !important;
    box-shadow: var(--dsr-shadow-sm) !important;
    overflow-x: auto !important;
}

.table,
.report-table,
.vehicle-table table,
.mini-table {
    color: var(--dsr-text) !important;
    font-size: 0.86rem !important;
    margin-bottom: 0 !important;
}

.table thead th,
.report-table thead th,
.vehicle-table thead th,
.mini-table th {
    background: #e8eef5 !important;
    color: #26364d !important;
    border-color: var(--dsr-border) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    padding: 0.65rem 0.75rem !important;
    text-transform: uppercase;
}

.table tbody td,
.report-table tbody td,
.vehicle-table tbody td,
.mini-table td {
    border-color: var(--dsr-border) !important;
    padding: 0.58rem 0.75rem !important;
    vertical-align: middle !important;
}

.table tbody tr:hover,
.report-table tbody tr:hover,
.vehicle-table tbody tr:hover {
    background: var(--dsr-primary-soft) !important;
}

.table-dark,
.table-dark th {
    --bs-table-bg: #23354d;
    --bs-table-color: #ffffff;
    background: #23354d !important;
    color: #ffffff !important;
}

/* Status colors */
.badge {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    padding: 0.35rem 0.58rem !important;
}

.badge.bg-primary,
.badge.bg-info {
    background: var(--dsr-primary-soft) !important;
    color: var(--dsr-primary-strong) !important;
}

.badge.bg-success {
    background: var(--dsr-accent-soft) !important;
    color: #075e56 !important;
}

.badge.bg-warning {
    background: var(--dsr-warning-soft) !important;
    color: #8a5200 !important;
}

.badge.bg-danger {
    background: var(--dsr-danger-soft) !important;
    color: var(--dsr-danger) !important;
}

.badge.bg-secondary {
    background: var(--dsr-surface-muted) !important;
    color: var(--dsr-text-soft) !important;
}

.alert {
    border-radius: var(--dsr-radius) !important;
    border: 1px solid transparent !important;
    border-left-width: 4px !important;
    box-shadow: none !important;
}

.alert-success {
    background: var(--dsr-accent-soft) !important;
    border-color: var(--dsr-accent) !important;
    color: #075e56 !important;
}

.alert-warning {
    background: var(--dsr-warning-soft) !important;
    border-color: var(--dsr-warning) !important;
    color: #8a5200 !important;
}

.alert-danger {
    background: var(--dsr-danger-soft) !important;
    border-color: var(--dsr-danger) !important;
    color: var(--dsr-danger) !important;
}

.alert-info {
    background: var(--dsr-primary-soft) !important;
    border-color: var(--dsr-primary) !important;
    color: var(--dsr-primary-strong) !important;
}

/* Vehicle and balance states */
.vehicle-card.fully-unloaded,
.vehicle-table tbody tr.row-complete {
    background: #f2fbf7 !important;
    border-left-color: var(--dsr-accent) !important;
}

.vehicle-card.partial-unloaded,
.vehicle-table tbody tr.row-partial {
    background: #fffaf0 !important;
    border-left-color: var(--dsr-warning) !important;
}

.vehicle-card.opening-vehicle,
.vehicle-table tbody tr.row-opening {
    background: var(--dsr-purple-soft) !important;
    border-left-color: var(--dsr-purple) !important;
}

.vehicle-card.rebilled-vehicle,
.vehicle-card.same-day-rebill,
.vehicle-table tbody tr.row-rebilled {
    background: #fff5f1 !important;
    border-left-color: #d05f1f !important;
}

.query-card.active,
.dealer-card.selected {
    border-color: var(--dsr-primary) !important;
    box-shadow: 0 0 0 3px rgba(31, 79, 130, 0.12) !important;
}

.query-card.active h5 {
    color: var(--dsr-primary-strong) !important;
}

/* Modals and overlays */
.modal-content {
    border: 1px solid var(--dsr-border) !important;
    border-radius: var(--dsr-radius-lg) !important;
    box-shadow: var(--dsr-shadow-lg) !important;
}

.modal-header.bg-primary,
.modal-header.bg-warning {
    background: #14253b !important;
    color: #ffffff !important;
}

.modal-header .btn-close,
.modal-header .btn-close-white {
    filter: none !important;
}

.modal-header.bg-primary .btn-close,
.modal-header.bg-warning .btn-close {
    filter: brightness(0) invert(1) !important;
}

.modal-footer {
    background: var(--dsr-surface-soft) !important;
    border-top: 1px solid var(--dsr-border) !important;
}

.toast {
    border-radius: var(--dsr-radius) !important;
    box-shadow: var(--dsr-shadow-lg) !important;
}

/* Page-specific presentation cleanup */
.feature-icon,
.icon-circle {
    color: var(--dsr-primary) !important;
    background: var(--dsr-primary-soft) !important;
}

.message-content,
.message-box {
    border-left-color: var(--dsr-accent) !important;
}

.closing-row,
.dealer-summary-table .closing-row {
    background: var(--dsr-warning-soft) !important;
}

.opening-row,
.dealer-summary-table .opening-row {
    background: var(--dsr-primary-soft) !important;
}

.bags-unit,
.pagination-info,
.text-muted {
    color: var(--dsr-text-muted) !important;
}

/* Mobile and small screens */
@media (max-width: 768px) {
    .container,
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .hero-section {
        padding: 1rem 0 !important;
    }

    .hero-section .container,
    .hero-section .container-fluid {
        display: block;
    }

    .hero-section .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .hero-section h1,
    .hero-section h2 {
        font-size: 1.25rem !important;
    }

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

    .btn,
    .back-btn {
        white-space: normal !important;
    }

    .site-header {
        min-height: 60px;
    }

    .site-header .navbar-brand {
        font-size: 1.18rem !important;
    }

    .site-header-nav {
        gap: 0.25rem;
        padding-top: 0.75rem;
    }

    .site-header .nav-link {
        min-width: 0;
        min-height: 42px;
        justify-content: flex-start;
        padding: 0.55rem 0.75rem !important;
    }

    .site-header .nav-link span br {
        display: none;
    }

    .vehicle-table,
    .table-responsive,
    .table-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .vehicle-table table,
    .report-table,
    .table {
        min-width: 720px;
    }

    .mini-table {
        min-width: 0;
    }

    .table thead th,
    .table tbody td,
    .vehicle-table thead th,
    .vehicle-table tbody td,
    .report-table thead th,
    .report-table tbody td {
        padding: 0.5rem !important;
        font-size: 0.78rem !important;
    }

    .modal-dialog {
        margin: 0.75rem !important;
    }
}

@media print {
    body {
        background: #ffffff !important;
    }

    body::before,
    .navbar,
    .hero-section,
    .btn,
    .no-print {
        display: none !important;
    }

    .card,
    .table-container,
    .table-responsive,
    .vehicle-table {
        box-shadow: none !important;
    }
}