/* ============================================================
   DeliveryHub Admin — site.css
   Place in: wwwroot/css/site.css
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=Cairo:wght@400;600;700&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
:root {
    --brand: #3454d1;
    --brand-dark: #26399c;
    --brand-light: #eef2ff;
    --accent: #ffb703;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
}

html[dir="rtl"] body {
    font-family: 'Cairo', sans-serif;
}

/* ── Brand Color ──────────────────────────────────────────── */
.brand-color {
    color: var(--brand) !important;
}

.bg-brand {
    background-color: var(--brand) !important;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.main-sidebar {
    background: #fff;
}

.nav-sidebar > .nav-item > .nav-link.active {
    background: var(--brand);
    color: #fff !important;
    border-radius: 6px;
}

.nav-sidebar > .nav-item > .nav-link:hover {
    background: var(--brand-light);
    color: var(--brand) !important;
    border-radius: 6px;
}

.nav-sidebar > .nav-item > .nav-link.active i,
.nav-sidebar > .nav-item > .nav-link.active p {
    color: #fff !important;
}

.brand-link {
    border-bottom: 1px solid #eee;
    font-weight: 700;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.card-outline.card-primary {
    border-top-color: var(--brand);
}

/* ── Small Box KPIs ───────────────────────────────────────── */
.small-box {
    border-radius: 10px;
}

    .small-box .icon {
        opacity: .35;
    }

/* ── Status Pills ─────────────────────────────────────────── */
.status-pill {
    padding: .25rem .65rem;
    border-radius: 50px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-pending {
    background: #fff3cd;
    color: #8a6d00;
}

.status-accepted {
    background: #cfe2ff;
    color: #1a4ea8;
}

.status-pickedup {
    background: #e0cffc;
    color: #5a1fb8;
}

.status-onway {
    background: #d0f0fb;
    color: #0a6987;
}

.status-delivered {
    background: #d4f4dd;
    color: #1c7d3e;
}

.status-cancelled {
    background: #fbd5d5;
    color: #a32626;
}

.status-rejected {
    background: #e2e3e5;
    color: #41464b;
}

/* ── Driver Dot ───────────────────────────────────────────── */
.driver-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.dot-online {
    background: #28a745;
}

.dot-busy {
    background: #ffc107;
}

.dot-offline {
    background: #adb5bd;
}

/* ── Live Map Placeholder ─────────────────────────────────── */
#liveMap {
    height: 340px;
    border-radius: 10px;
    background: #eef2ff;
    border: 1px solid #e3e6f0;
    position: relative;
    overflow: hidden;
}

/* ── DataTables ───────────────────────────────────────────── */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: .25rem .75rem;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: .2rem .5rem;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-brand {
    background: var(--brand);
    color: #fff;
    border: none;
}

    .btn-brand:hover {
        background: var(--brand-dark);
        color: #fff;
    }

/* ── Form Controls ────────────────────────────────────────── */
.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(52,84,209,.15);
}

/* ── Page Header ──────────────────────────────────────────── */
.content-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #343a40;
}

/* ── Live badge pulse ─────────────────────────────────────── */
@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

.badge-live {
    background: #28a745;
    color: #fff;
    animation: pulse 1.5s infinite;
}

/* ── Lookup color swatch ──────────────────────────────────── */
.color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #dee2e6;
    vertical-align: middle;
}

/* ============================================================
   RTL OVERRIDES  (active when <html dir="rtl">)
   ============================================================ */
html[dir="rtl"] .main-sidebar {
    right: 0;
    left: auto;
}

html[dir="rtl"] .content-wrapper,
html[dir="rtl"] .main-footer,
html[dir="rtl"] .main-header {
    margin-right: 250px;
    margin-left: 0;
}

html[dir="rtl"] .sidebar-collapse .content-wrapper,
html[dir="rtl"] .sidebar-collapse .main-footer,
html[dir="rtl"] .sidebar-collapse .main-header {
    margin-right: 0;
}

html[dir="rtl"] .nav-sidebar .nav-link .right {
    left: 1rem;
    right: auto;
}

html[dir="rtl"] .float-right {
    float: left !important;
}

html[dir="rtl"] .float-left {
    float: right !important;
}

html[dir="rtl"] .text-right {
    text-align: left !important;
}

html[dir="rtl"] .text-left {
    text-align: right !important;
}

html[dir="rtl"] .ml-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .mr-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .mr-1, html[dir="rtl"] .mr-2 {
    margin-left: .25rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .ml-1, html[dir="rtl"] .ml-2 {
    margin-right: .25rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

html[dir="rtl"] .dropdown-menu-right {
    right: auto;
    left: 0;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
}

html[dir="rtl"] .info-box-icon {
    border-radius: 0 .25rem .25rem 0;
}

html[dir="rtl"] table th,
html[dir="rtl"] table td {
    text-align: right;
}

html[dir="rtl"] .dataTables_filter {
    text-align: left;
}

html[dir="rtl"] .dataTables_length {
    text-align: right;
}

html[dir="rtl"] .input-group > .input-group-prepend {
    order: 2;
}

html[dir="rtl"] .input-group > .form-control {
    border-radius: .25rem 0 0 .25rem !important;
}

html[dir="rtl"] .input-group > .input-group-prepend > .input-group-text {
    border-radius: 0 .25rem .25rem 0 !important;
}

html[dir="rtl"] .modal-header .close {
    margin: -1rem auto -1rem -1rem;
}

html[dir="rtl"] .card-tools {
    float: left;
}

html[dir="rtl"] .toastr {
    left: 12px !important;
    right: auto !important;
}