/*
 * Admin dashboard (resources/views/admin/dashboard/index.blade.php).
 * Rang theme.css ke --adm-* variables se: blue accent, light + dark.
 * Light/dark mode: Metronic ke --bs-* variables — dono me khud theek.
 */
.db {
    --db-gold: var(--adm-blue, #2563eb);
    --db-gold-deep: var(--adm-blue-hover, #1d4ed8);
    --db-gold-soft: rgba(var(--adm-blue-rgb, 37, 99, 235), .1);
    --db-ink: var(--bs-gray-900);
    --db-muted: var(--bs-gray-500);
    --db-line: var(--bs-border-color);
    --db-card: var(--bs-body-bg);
    --db-soft: var(--bs-gray-100);
    --db-green: #1f9d63;
    --db-red: #d6453d;
    --db-amber: #d98a0b;
    --db-blue: #3e6ae1;
    --db-violet: #7a4fd6;
    --db-radius: 12px;
    padding-bottom: 10px;
}
.db a { text-decoration: none; }

/* ---------- Account summary (plan, expiry, remaining orders) — a quiet card, not a banner ---------- */
.db-plan { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; margin-bottom: 20px; background: var(--db-card); border: 1px solid var(--db-line); border-radius: var(--db-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.db-plan-cell { padding: 16px 20px; border-left: 1px solid var(--db-line); display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.db-plan-cell:first-child { border-left: 0; }
.db-plan-label { font-size: 12px; font-weight: 500; color: var(--db-muted); }
.db-plan-value { font-size: 17px; font-weight: 600; color: var(--db-ink); line-height: 1.3; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.db-plan-value small { font-size: 13px; font-weight: 500; color: var(--db-muted); }
.db-plan-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--db-muted); }
.db-state-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.db-meta-ok { color: var(--db-green); }
.db-meta-warning { color: #b45309; }
.db-meta-danger { color: var(--db-red); }
[data-bs-theme="dark"] .db-meta-warning { color: #f0b429; }
.db-plan-track { height: 4px; border-radius: 99px; background: var(--db-soft); overflow: hidden; margin: 4px 0 2px; }
.db-plan-track span { display: block; height: 100%; min-width: 3px; border-radius: 99px; background: var(--db-gold); }
.db-plan-track-warning span { background: var(--db-amber); }
.db-plan-track-danger span { background: var(--db-red); }
.db-plan-action { align-items: flex-end; text-align: right; gap: 6px; }
.db-plan-btn { white-space: nowrap; border-radius: 8px !important; font-weight: 600; }
@media (max-width: 1199.98px) {
    .db-plan { grid-template-columns: 1fr 1fr; }
    .db-plan-cell:nth-child(3) { border-left: 0; }
    .db-plan-cell:nth-child(n+3) { border-top: 1px solid var(--db-line); }
}
@media (max-width: 575.98px) {
    /* Plan + expiry side by side, orders and the button full width */
    .db-plan-cell { padding: 14px 16px; }
    .db-plan-orders, .db-plan-action { grid-column: 1 / -1; border-left: 0; }
    .db-plan-action { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
}

/* ---------- Attention needed (dashboard): one list, colour = severity ---------- */
.db-attn { margin-bottom: 20px; }
.db-attn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 20px 10px; }
.db-attn-title { font-size: 14px; font-weight: 600; color: var(--db-ink); margin: 0; }
.db-attn-count { font-size: 12px; color: var(--db-muted); }
.db-attn-list { list-style: none; margin: 0; padding: 0 0 4px; }
.db-attn-row { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--db-line); font-size: 13.5px; color: var(--bs-gray-800); }
a.db-attn-row:hover { background: var(--db-soft); color: var(--db-ink); }
a.db-attn-row:focus-visible { outline: 2px solid var(--db-gold); outline-offset: -2px; }
.db-attn-row > i:first-child { width: 16px; text-align: center; font-size: 14px; flex-shrink: 0; }
.db-attn-text { flex: 1; min-width: 0; line-height: 1.45; }
.db-attn-text b { font-weight: 600; color: var(--db-ink); margin-right: 2px; }
.db-attn-go { font-size: 10px; color: var(--db-muted) !important; }
.db-attn-critical > i:first-child { color: var(--db-red) !important; }
.db-attn-critical .db-attn-text { color: var(--db-ink); font-weight: 500; }
.db-attn-warning > i:first-child { color: var(--db-amber) !important; }
.db-attn-info > i:first-child { color: var(--db-gold) !important; }
.db-allclear { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13.5px; color: var(--db-muted); }
.db-allclear i { color: var(--db-green) !important; }
/* ---------- Alerts ---------- */
.db-alerts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.db-alert { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; border: 1px solid transparent; transition: transform .15s; }
a.db-alert:hover { transform: translateY(-1px); }
.db-alert-go { font-size: 10px; opacity: .6; }
/* style.bundle grey-s every i[class*=" fa-"]; alert icons take the alert's colour */
.db-alert i { color: inherit; }
.db-alert-danger { background: rgba(214, 69, 61, .1); color: var(--db-red); border-color: rgba(214, 69, 61, .25); }
.db-alert-warning { background: rgba(217, 138, 11, .1); color: var(--db-amber); border-color: rgba(217, 138, 11, .25); }
.db-alert-muted { background: var(--db-soft); color: var(--bs-gray-700); border-color: var(--db-line); }
.db-alert-ok { background: rgba(31, 157, 99, .08); color: var(--db-green); border-color: rgba(31, 157, 99, .22); }

/* ---------- Cards ---------- */
.db-card { border: 1px solid var(--db-line) !important; border-radius: var(--db-radius) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; }
.db-card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 0 !important; padding: 20px 22px 12px !important; border-bottom: 0 !important; }
.db-card-title { font-size: 16px; font-weight: 700; color: var(--db-ink); margin: 0; }
.db-card-sub { font-size: 12.5px; color: var(--db-muted); margin-top: 2px; }
.db-card .card-body { padding-left: 22px; padding-right: 22px; }
.db-link { font-size: 13px; font-weight: 600; color: var(--db-gold-deep); white-space: nowrap; }
.db-link:hover { color: var(--db-gold); }
.db-link i { font-size: 11px; margin-left: 3px; color: inherit; }
.db-empty { color: var(--db-muted); font-size: 13.5px; padding: 18px 0; text-align: center; }

/* ---------- KPIs ---------- */
.db-kpi { transition: transform .15s, border-color .15s; }
.db-kpi:hover { transform: translateY(-2px); border-color: var(--db-gold) !important; }
.db-kpi .card-body { padding: 20px 22px; }
.db-kpi-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.db-kpi-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.db-tone-gold { background: var(--db-gold-soft); color: var(--db-gold-deep); }
.db-tone-blue { background: rgba(62, 106, 225, .1); color: var(--db-blue); }
.db-tone-green { background: rgba(31, 157, 99, .1); color: var(--db-green); }
.db-tone-violet { background: rgba(122, 79, 214, .1); color: var(--db-violet); }
.db-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--db-soft); color: var(--bs-gray-600); }
.db-chip i { font-size: 9px; }
.db-chip-up { background: rgba(31, 157, 99, .12); color: var(--db-green); }
.db-chip-down { background: rgba(214, 69, 61, .12); color: var(--db-red); }
.db-kpi-value { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; color: var(--db-ink); line-height: 1.1; letter-spacing: -.02em; }
.db-kpi-label { font-size: 13.5px; font-weight: 600; color: var(--bs-gray-700); margin-top: 6px; }
.db-kpi-sub { font-size: 12.5px; color: var(--db-muted); margin-top: 2px; }

/* ---------- Chart ---------- */
.db-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--db-muted); font-weight: 600; }
.db-legend span { display: inline-flex; align-items: center; gap: 6px; }
.db-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.db-dot-gold { background: var(--db-gold); }
.db-dot-slate { background: #A7B0C5; }
.db-chart { min-height: 300px; margin: 0 -8px; }
.db-chart-sum { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--db-line); margin-top: 6px; padding-top: 14px; }
.db-chart-sum div { padding: 0 12px; border-left: 1px solid var(--db-line); }
.db-chart-sum div:first-child { border-left: 0; padding-left: 0; }
.db-chart-sum span { display: block; font-size: 12px; color: var(--db-muted); }
.db-chart-sum strong { font-family: inherit; font-size: 16px; color: var(--db-ink); font-weight: 600; }
@media (max-width: 575.98px) {
    .db-chart-sum { grid-template-columns: 1fr 1fr; gap: 12px 0; }
    .db-chart-sum div:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* ---------- Status breakdown ---------- */
.db-status { display: grid; grid-template-columns: 118px 1fr 44px; align-items: center; gap: 12px; padding: 7px 0; color: var(--db-ink); }
.db-status:hover .db-status-name { color: var(--db-gold-deep); }
.db-status-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--bs-gray-700); white-space: nowrap; overflow: hidden; }
.db-status-bar { height: 6px; border-radius: 99px; background: var(--db-soft); overflow: hidden; }
.db-status-bar span { display: block; height: 100%; border-radius: 99px; }
.db-status-num { text-align: right; font-family: inherit; font-size: 13px; font-weight: 600; }
.db-dot-success, .db-bg-success { background: var(--db-green); }
.db-dot-primary, .db-bg-primary { background: var(--db-blue); }
.db-dot-info, .db-bg-info { background: #1aa6c9; }
.db-dot-warning, .db-bg-warning { background: var(--db-amber); }
.db-dot-dark, .db-bg-dark { background: #5B6472; }
.db-dot-danger, .db-bg-danger { background: var(--db-red); }
.db-dot-muted, .db-bg-muted { background: var(--bs-gray-400); }


/* ---------- Table ---------- */
.db-table thead th { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--db-muted); border-bottom: 1px solid var(--db-line) !important; padding: 10px 8px !important; white-space: nowrap; }
.db-table tbody td { padding: 12px 8px !important; border-bottom: 1px solid var(--bs-gray-100) !important; font-size: 13.5px; color: var(--bs-gray-800); vertical-align: middle; }
.db-table tbody tr:last-child td { border-bottom: 0 !important; }
.db-table thead th:first-child, .db-table tbody td:first-child { padding-left: 0 !important; }
.db-table thead th:last-child, .db-table tbody td:last-child { padding-right: 0 !important; }
.db-order-id { font-family: inherit; font-weight: 600; color: var(--db-gold-deep); }
.db-order-id:hover { color: var(--db-gold); }
.db-strong { font-weight: 600; color: var(--db-ink); }
.db-muted { font-size: 12px; color: var(--db-muted); }
.db-service { max-width: 280px; color: var(--bs-gray-700) !important; }
.db-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.db-badge-success { background: rgba(31, 157, 99, .12); color: var(--db-green); }
.db-badge-primary { background: rgba(62, 106, 225, .12); color: var(--db-blue); }
.db-badge-info { background: rgba(26, 166, 201, .12); color: #1592b2; }
.db-badge-warning { background: rgba(217, 138, 11, .14); color: #b8740a; }
.db-badge-dark { background: var(--db-soft); color: var(--bs-gray-700); }
.db-badge-danger { background: rgba(214, 69, 61, .12); color: var(--db-red); }
.db-badge-muted { background: var(--db-soft); color: var(--bs-gray-600); }

/* ---------- People / payments ---------- */
.db-person { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bs-gray-100); color: inherit; }
a.db-person:focus-visible { outline: 2px solid var(--db-gold); outline-offset: 2px; border-radius: 6px; }
.db-person:last-child { border-bottom: 0; }
a.db-person:hover .db-strong { color: var(--db-gold-deep); }
.db-avatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--db-gold-soft); color: var(--db-gold); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.db-avatar-soft { background: rgba(31, 157, 99, .12); color: var(--db-green); font-size: 13px; }

/* Dark mode: kuch halke rang thore tez */
[data-bs-theme="dark"] .db-avatar { background: #2a2c38; }
[data-bs-theme="dark"] .db-badge-warning { color: #f0b429; }
[data-bs-theme="dark"] .db-order-id, [data-bs-theme="dark"] .db-link { color: var(--db-gold); }

/* ---------- Dashboard KPIs: label → value → context → comparison ---------- */
.db-metric { display: flex; flex-direction: column; padding: 20px; color: inherit; transition: border-color .15s; }
.db-metric:hover { border-color: rgba(var(--adm-blue-rgb), .45) !important; }
.db-metric:focus-visible { outline: 2px solid var(--db-gold); outline-offset: 2px; }
.db-metric-label { font-size: 13px; font-weight: 500; color: var(--db-muted); }
.db-metric-value { margin-top: 8px; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--db-ink); font-variant-numeric: tabular-nums; }
.db-metric-sub { margin-top: 4px; font-size: 13px; color: var(--bs-gray-700); }
.db-metric-cmp { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--db-line); font-size: 12px; color: var(--db-muted); }
.db-metric-sub + .db-metric-cmp { margin-top: 16px; }
.db-metric-cmp b { font-weight: 600; margin-right: 2px; font-variant-numeric: tabular-nums; }
.db-metric-cmp b i { font-size: 10px; margin-right: 3px; color: inherit !important; }
.db-cmp-up b { color: var(--db-green); }
.db-cmp-down b { color: var(--db-red); }

/* ---------- Dashboard chart ---------- */
.db-key { display: inline-block; flex-shrink: 0; }
.db-key-bar { width: 10px; height: 10px; border-radius: 2px; background: var(--db-gold); }
.db-key-line { width: 14px; height: 2px; border-radius: 2px; background: #64748b; }
[data-bs-theme="dark"] .db-key-line { background: #94a3b8; }
.db-home .db-legend { font-weight: 500; }
.db-chart-home { min-height: 280px; margin: 0 -6px; }
.db-chart-note { font-size: 12px; color: var(--db-muted); margin-bottom: 4px; }
.db-chart-state { display: grid; place-items: center; min-height: 260px; font-size: 13px; color: var(--db-muted); text-align: center; }
.db-chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 240px; text-align: center; border: 1px dashed var(--db-line); border-radius: 10px; margin-bottom: 16px; }
.db-chart-empty strong { font-size: 14px; font-weight: 600; color: var(--db-ink); }
.db-chart-empty span { font-size: 13px; color: var(--db-muted); }
.db-home .apexcharts-tooltip { border-radius: 8px !important; border: 1px solid var(--db-line) !important; box-shadow: 0 8px 24px -12px rgba(16, 24, 40, .25) !important; font-size: 12.5px; }
.db-home .apexcharts-tooltip-title { font-weight: 600 !important; font-size: 12px !important; padding: 6px 10px !important; margin-bottom: 2px !important; }
.db-home .apexcharts-tooltip-series-group { padding: 0 10px !important; }
.db-home .apexcharts-tooltip-text-y-value { font-weight: 600; margin-left: 8px; font-variant-numeric: tabular-nums; }

/* ---------- Dashboard order status: name · count · share, bar underneath ---------- */
.db-home .db-status { grid-template-columns: 1fr auto 44px; grid-template-areas: "name num pct" "bar bar bar"; row-gap: 6px; column-gap: 12px; padding: 8px 0; }
.db-home .db-status-name { grid-area: name; font-weight: 500; color: var(--db-ink); }
.db-home .db-status-num { grid-area: num; font-variant-numeric: tabular-nums; }
.db-home .db-status-pct { grid-area: pct; text-align: right; font-size: 12.5px; color: var(--db-muted); font-variant-numeric: tabular-nums; }
.db-home .db-status-bar { grid-area: bar; height: 4px; }
.db-home .db-status-bar span { min-width: 2px; }
.db-status-foot { display: flex; justify-content: space-between; align-items: center; margin: auto 20px 0; padding: 14px 0 16px; border-top: 1px solid var(--db-line); font-size: 13px; color: var(--db-muted); }
.db-status-foot strong { color: var(--db-ink); font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ---------- Dashboard card rhythm (20px padding everywhere) ---------- */
.db-home .db-card-header { padding: 18px 20px 10px !important; }
.db-home .db-card .card-body { padding-left: 20px; padding-right: 20px; }
.db-home .db-card-title { font-size: 15px; font-weight: 600; }
.db-home .db-status-foot { margin-left: 20px; margin-right: 20px; }
.db-home .db-link { font-weight: 500; }
.db-link:focus-visible, .db-status:focus-visible, .db-order-id:focus-visible, .db-person-link:focus-visible { outline: 2px solid var(--db-gold); outline-offset: 2px; border-radius: 4px; }

/* ---------- Reporting period line above the KPIs ---------- */
.db-period { margin: -6px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--db-muted); }
.db-period b { font-weight: 600; color: var(--bs-gray-700); }

/* ---------- Attention needed: severity tag + named action ---------- */
.db-attn-tag { flex-shrink: 0; min-width: 62px; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; text-align: center; letter-spacing: .01em; }
.db-attn-critical .db-attn-tag { background: rgba(214, 69, 61, .1); color: var(--db-red); }
.db-attn-warning .db-attn-tag { background: rgba(217, 138, 11, .12); color: #a86a06; }
.db-attn-info .db-attn-tag { background: var(--db-gold-soft); color: var(--db-gold-deep); }
[data-bs-theme="dark"] .db-attn-warning .db-attn-tag { color: #f0b429; }
.db-attn-action { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--db-gold-deep); white-space: nowrap; }
.db-attn-action i { font-size: 10px; color: inherit !important; }
a.db-attn-row:hover .db-attn-action { color: var(--db-gold); }
@media (max-width: 575.98px) {
    .db-attn-row { flex-wrap: wrap; row-gap: 6px; padding: 12px 16px; }
    .db-attn-text { flex-basis: calc(100% - 28px); order: 3; }
    .db-attn-action { margin-left: auto; }
}

/* ---------- Recent orders: one-line cells with the full text kept in the page ---------- */
.db-truncate { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-home .db-service { max-width: 260px; }
.db-home .db-table td:first-child time { white-space: nowrap; }
.db-home .db-table td:nth-child(2) { max-width: 200px; }
.db-person-link { display: block; color: var(--db-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-person-link:hover { color: var(--db-gold-deep); }
/* Phones: the table turns into cards (theme.css) — no desktop cell widths there */
@media (max-width: 767.98px) {
    .db-home .db-table td:nth-child(2), .db-home .db-service { max-width: none; }
    .db-home .db-table .db-person-link, .db-home .db-table .db-truncate { display: inline-block; max-width: 100%; vertical-align: bottom; }
}
/* Phones: two KPI cards per row so the four numbers fit on about one screen */
@media (max-width: 575.98px) {
    .db-home .db-kpi-col { width: 50%; }
    .db-home .db-metric { padding: 14px; }
    .db-home .db-metric-label { font-size: 12px; }
    .db-home .db-metric-value { font-size: 20px; margin-top: 6px; }
    .db-home .db-metric-sub { font-size: 12px; }
    .db-home .db-metric-cmp { font-size: 11.5px; padding-top: 10px; }
}