/*
 * DuvaPaint — modern dashboard layer
 * ----------------------------------------------------------------------------
 * Loaded LAST, after the stock admin template, so it restyles the existing
 * markup without any Blade file being restructured. Nothing here changes
 * behaviour: no layout engine swap, no JS, no class renaming. Remove this one
 * <link> and the dashboard returns exactly to how it looked before.
 *
 * The goal is clarity for a field-sales manager: readable numbers, scannable
 * tables, obvious status. No gradients, no decorative effects.
 */

:root {
    --duva-ink:        #1e2436;
    --duva-ink-soft:   #4b5364;
    --duva-muted:      #6b7280;
    --duva-line:       #e6e8f0;
    --duva-line-soft:  #f1f2f7;
    --duva-bg:         #f6f7fb;
    --duva-surface:    #ffffff;

    --duva-primary:    #2563eb;
    --duva-primary-d:  #1d4ed8;
    --duva-success:    #16a34a;
    --duva-warning:    #f59e0b;
    --duva-danger:     #dc2626;
    --duva-info:       #0891b2;

    --duva-radius:     10px;
    --duva-radius-sm:  8px;
    --duva-shadow:     0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --duva-shadow-md:  0 4px 16px rgba(20, 15, 50, .08);
}

/* ---------------------------------------------------------------- typography */

body,
.vertical-layout {
    background: var(--duva-bg) !important;
    color: var(--duva-ink);
    font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.content-header-title {
    color: var(--duva-ink);
    font-weight: 650;
    letter-spacing: -0.01em;
}

.content-header-title {
    font-size: 20px !important;
    margin-bottom: 2px !important;
}

a { color: var(--duva-primary); }
a:hover { color: var(--duva-primary-d); }

.text-muted { color: var(--duva-muted) !important; }

/* --------------------------------------------------------------------- cards */

.card {
    background: var(--duva-surface);
    border: 1px solid var(--duva-line) !important;
    border-radius: var(--duva-radius) !important;
    box-shadow: var(--duva-shadow) !important;
    margin-bottom: 18px;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--duva-line-soft);
    padding: 14px 18px !important;
    min-height: 0 !important;
}

.card-header .card-title,
.card-title {
    font-size: 15px !important;
    font-weight: 650 !important;
    color: var(--duva-ink) !important;
    margin-bottom: 0 !important;
}

.card-body { padding: 16px 18px !important; }

/* Stat tiles built from the template's existing card markup. */
.card .media .media-body h3,
.card .media .media-body h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--duva-ink);
}

/* --------------------------------------------------------------------- tables */

.table {
    color: var(--duva-ink);
    font-size: 13.5px;
    margin-bottom: 0;
}

.table thead th,
table.dataTable thead th {
    background: #fbfbfe !important;
    border-bottom: 1px solid var(--duva-line) !important;
    border-top: none !important;
    color: var(--duva-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 11px 14px !important;
    white-space: nowrap;
}

.table tbody td,
table.dataTable tbody td {
    border-top: 1px solid var(--duva-line-soft) !important;
    padding: 11px 14px !important;
    vertical-align: middle;
}

.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background: #f9fafd;
}

.table-striped tbody tr:nth-of-type(odd) { background: transparent; }

/* Tables stay readable on narrow screens by scrolling rather than collapsing. */
.table-responsive {
    border-radius: var(--duva-radius-sm);
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------- forms */

.form-control,
.custom-select,
select.form-control {
    border: 1px solid var(--duva-line);
    border-radius: var(--duva-radius-sm);
    color: var(--duva-ink);
    font-size: 13.5px;
    padding: 8px 12px;
    height: auto;
    transition: border-color .15s, box-shadow .15s;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--duva-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

label {
    color: var(--duva-ink-soft);
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 5px;
}

/* ------------------------------------------------------------------- buttons */

.btn {
    border-radius: var(--duva-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 16px;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}

.btn-sm { font-size: 12.5px; padding: 5px 12px; }

.btn-primary {
    background: var(--duva-primary);
    border-color: var(--duva-primary);
    box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--duva-primary-d) !important;
    border-color: var(--duva-primary-d) !important;
}

.btn-outline-secondary {
    border-color: var(--duva-line);
    color: var(--duva-ink-soft);
}
.btn-outline-secondary:hover {
    background: #f4f5fa;
    border-color: #d5d8e6;
    color: var(--duva-ink);
}

/* -------------------------------------------------------------------- badges */

.badge {
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 4px 10px;
}

.badge-success, .badge.bg-success { background: #dcfce7 !important; color: #15803d !important; }
.badge-danger,  .badge.bg-danger  { background: #fee2e2 !important; color: #b91c1c !important; }
.badge-warning, .badge.bg-warning { background: #fef3c7 !important; color: #b45309 !important; }
.badge-info,    .badge.bg-info    { background: #cffafe !important; color: #0e7490 !important; }
.badge-primary, .badge.bg-primary { background: #dbeafe !important; color: #1d4ed8 !important; }
.badge-secondary                  { background: #f1f5f9 !important; color: #475569 !important; }

/* A small dot for live/offline status next to a name. */
.duva-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.duva-status.live    { background: var(--duva-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.duva-status.moving  { background: var(--duva-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.duva-status.stale   { background: #f97316; }
.duva-status.offline { background: #94a3b8; }

/* ------------------------------------------------------------------ sidebar */

.main-menu,
.main-menu.menu-light {
    background: var(--duva-surface) !important;
    border-right: 1px solid var(--duva-line);
    box-shadow: none !important;
}

.main-menu .navigation > li > a {
    border-radius: var(--duva-radius-sm);
    color: var(--duva-ink-soft) !important;
    font-size: 13.5px;
    font-weight: 550;
    margin: 1px 8px;
    padding: 9px 12px !important;
    transition: background-color .12s, color .12s;
}

.main-menu .navigation > li > a:hover {
    background: #f4f6fc !important;
    color: var(--duva-ink) !important;
}

.main-menu .navigation > li.active > a,
.main-menu .navigation li.active > a {
    background: #eef4ff !important;
    box-shadow: none !important;
    color: var(--duva-primary-d) !important;
    font-weight: 650;
}

.main-menu .navigation > li > a > i { margin-right: 10px; }

.main-menu .navigation > li ul li a {
    font-size: 13px;
    padding: 7px 12px 7px 40px !important;
}

.navbar-header,
.main-menu .navbar-header {
    background: var(--duva-surface) !important;
    border-bottom: 1px solid var(--duva-line-soft);
}

/* --------------------------------------------------------------- top navbar */

.header-navbar,
.header-navbar.navbar-fixed-top {
    background: var(--duva-surface) !important;
    border-bottom: 1px solid var(--duva-line) !important;
    box-shadow: none !important;
}

.header-navbar .navbar-nav > li > a { color: var(--duva-ink-soft) !important; }

.breadcrumb {
    background: transparent;
    font-size: 12.5px;
    padding: 0;
}

/* ------------------------------------------------------ empty / loading states */

.duva-empty {
    color: var(--duva-muted);
    font-size: 13.5px;
    padding: 44px 20px;
    text-align: center;
}
.duva-empty .duva-empty-title {
    color: var(--duva-ink);
    font-size: 15px;
    font-weight: 650;
    margin-bottom: 4px;
}

.duva-skeleton {
    animation: duva-pulse 1.4s ease-in-out infinite;
    background: linear-gradient(90deg, #eef0f6 25%, #f6f7fb 50%, #eef0f6 75%);
    background-size: 200% 100%;
    border-radius: 6px;
    height: 14px;
}
@keyframes duva-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .duva-skeleton { animation: none; }
}

.duva-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--duva-radius-sm);
    color: #991b1b;
    font-size: 13px;
    padding: 12px 14px;
}

/* ------------------------------------------------------------ KPI stat cards */

.duva-kpis {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 18px;
}

.duva-kpi {
    background: var(--duva-surface);
    border: 1px solid var(--duva-line);
    border-radius: var(--duva-radius);
    box-shadow: var(--duva-shadow);
    padding: 15px 17px;
}

.duva-kpi .k-label {
    color: var(--duva-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.duva-kpi .k-value {
    color: var(--duva-ink);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-top: 4px;
}
.duva-kpi .k-sub {
    color: var(--duva-muted);
    font-size: 11.5px;
    margin-top: 3px;
}
.duva-kpi .k-value.ok    { color: var(--duva-success); }
.duva-kpi .k-value.warn  { color: #d97706; }
.duva-kpi .k-value.muted { color: #94a3b8; }

.duva-kpi a { text-decoration: none; }
a.duva-kpi { display: block; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.duva-kpi:hover { border-color: #b9c0d8; box-shadow: var(--duva-shadow-md); }

/* ------------------------------------------------------------- responsiveness */

@media (max-width: 1199.98px) {
    .duva-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .card-body { padding: 14px !important; }
}

@media (max-width: 767.98px) {
    body { font-size: 13.5px; }
    .content-header-title { font-size: 17px !important; }
    .duva-kpi .k-value { font-size: 21px; }

    /* Filter rows stack instead of squeezing into unusable columns. */
    .duva-filters > [class*="col-"] { margin-bottom: 8px; }

    /* Wide tables scroll horizontally rather than breaking the page. */
    .table-responsive { display: block; overflow-x: auto; width: 100%; }

    .card { border-radius: var(--duva-radius-sm) !important; }
}

@media (max-width: 575.98px) {
    .duva-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .duva-kpi { padding: 12px 13px; }
    .btn { padding: 7px 13px; }
}

/* Desktop keeps its information density — no artificial max-width. */
@media (min-width: 1600px) {
    .duva-kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

/* --------------------------------------------------------------- DataTables */
/* Restyled, never restructured — the plugin keeps full control of behaviour. */

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--duva-line);
    border-radius: var(--duva-radius-sm);
    padding: 6px 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    font-size: 13px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--duva-primary) !important;
    border-color: var(--duva-primary) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--duva-muted);
    font-size: 12.5px;
}

/* ------------------------------------------------------------------ printing */

@media print {
    .main-menu, .header-navbar, .btn, .dataTables_filter, .dataTables_length { display: none !important; }
    .card { border: none !important; box-shadow: none !important; }
    body { background: #fff !important; }
}