:root {
    --ds-red: #b00020;
    --ds-red-dark: #7a0016;
    --ds-red-light: #f8d7da;
    --ds-black: #111111;
    --ds-charcoal: #1f1f1f;
    --ds-gray: #f5f5f5;
    --ds-border: #dddddd;
    --ds-white: #ffffff;
}

/* Base */
body {
    background: var(--ds-gray);
    color: var(--ds-black);
}

/* Main layout/sidebar/nav */
.sidebar,
nav.sidebar,
.bg-dark {
    background: var(--ds-black) !important;
}

.sidebar a,
nav.sidebar a,
.bg-dark a {
    color: var(--ds-white) !important;
}

.sidebar a:hover,
nav.sidebar a:hover,
.bg-dark a:hover {
    background: var(--ds-red) !important;
    color: var(--ds-white) !important;
}

/* Headings */
h1, h2, h3, h4, h5 {
    color: var(--ds-black);
}

/* Cards */
.card {
    border: 1px solid var(--ds-border);
    border-top: 4px solid var(--ds-red);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Buttons */
.btn-primary {
    background: var(--ds-red) !important;
    border-color: var(--ds-red) !important;
    color: var(--ds-white) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--ds-red-dark) !important;
    border-color: var(--ds-red-dark) !important;
}

.btn-success {
    background: var(--ds-black) !important;
    border-color: var(--ds-black) !important;
    color: var(--ds-white) !important;
}

.btn-success:hover,
.btn-success:focus {
    background: var(--ds-charcoal) !important;
    border-color: var(--ds-charcoal) !important;
}

.btn-outline-danger {
    color: var(--ds-red) !important;
    border-color: var(--ds-red) !important;
}

.btn-outline-danger:hover {
    background: var(--ds-red) !important;
    color: var(--ds-white) !important;
}

/* Tables */
.table thead th {
    background: var(--ds-black);
    color: var(--ds-white);
    border-color: var(--ds-black);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(176,0,32,0.035);
}

/* Links */
a {
    color: var(--ds-red);
}

a:hover {
    color: var(--ds-red-dark);
}

/* Badges */
.badge.bg-primary,
.badge.bg-info {
    background: var(--ds-red) !important;
    color: var(--ds-white) !important;
}

.badge.bg-success {
    background: var(--ds-black) !important;
    color: var(--ds-white) !important;
}

.badge.bg-warning {
    background: #ffc107 !important;
    color: var(--ds-black) !important;
}

.badge.bg-danger {
    background: var(--ds-red) !important;
    color: var(--ds-white) !important;
}

.badge.bg-secondary {
    background: #555 !important;
}

/* Forms */
.form-control:focus,
.form-select:focus {
    border-color: var(--ds-red);
    box-shadow: 0 0 0 0.2rem rgba(176,0,32,0.18);
}

/* Alerts */
.alert-info {
    background: var(--ds-red-light);
    border-color: var(--ds-red);
    color: var(--ds-black);
}

.alert-light {
    background: var(--ds-white);
    border-color: var(--ds-border);
}

/* Top accent */
.border-success {
    border-color: var(--ds-red) !important;
    border-top: 4px solid var(--ds-red) !important;
}

/* Utility accent */
.text-success {
    color: var(--ds-red) !important;
}

.bg-success {
    background: var(--ds-black) !important;
}

/* Camera scanner boxes */
#orderCameraReader,
#productCameraReader,
#truckCameraReader {
    width: 100%;
    max-width: 420px;
    min-height: 280px;
    background: #111;
    border: 2px solid #b00020;
    border-radius: 8px;
    overflow: hidden;
}

#orderCameraReader video,
#productCameraReader video,
#truckCameraReader video {
    width: 100% !important;
    min-height: 280px !important;
    object-fit: cover;
}

/* Mobile demo polish */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .container,
    .container-fluid,
    main,
    .content,
    .app-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    h1.h3,
    .h3 {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    .card {
        border-radius: 14px;
        margin-bottom: 14px;
    }

    .card.p-3 {
        padding: 14px !important;
    }

    .btn {
        white-space: normal;
    }

    .btn-sm {
        padding: 0.45rem 0.65rem;
    }

    .btn-lg {
        font-size: 1.05rem;
        padding: 0.75rem 1rem;
    }

    .form-control,
    .form-select {
        min-height: 44px;
    }

    .form-control-sm,
    .form-select-sm {
        min-height: 38px;
    }

    .scanner-input,
    input[name="barcode"],
    input[name="quantity"] {
        font-size: 1.15rem;
        min-height: 52px;
    }

    .table-responsive {
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,.08);
    }

    table.table {
        min-width: 720px;
        margin-bottom: 0;
    }

    table.table th,
    table.table td {
        vertical-align: middle;
    }

    .row.g-2 > [class*="col-"],
    .row.g-3 > [class*="col-"] {
        margin-bottom: 4px;
    }

    .d-flex.justify-content-between {
        gap: 10px;
    }

    .d-flex.justify-content-between > div:last-child {
        width: 100%;
    }

    .d-flex.justify-content-between > div:last-child .btn {
        width: 100%;
        margin-bottom: 6px;
    }

    .alert {
        border-radius: 12px;
    }

    .badge {
        font-size: 0.8rem;
        padding: 0.4em 0.55em;
    }
}

@media (max-width: 480px) {
    table.table {
        min-width: 640px;
    }

    .btn-group,
    .btn-toolbar {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .btn-group .btn,
    .btn-toolbar .btn {
        border-radius: 8px !important;
        width: 100%;
    }

    input[type="date"] {
        min-width: 100%;
    }
}