/* ===== App Overrides ===================================================
   Minimal CSS — only badge colors, status badge variants, and app-specific
   overrides needed on top of design-tokens.css
   ===================================================================== */

/* ---- Status Badge variants ---- */
.badge-waybill, .badge-waybill_followup, .badge-waybill_issued, .badge-accepted,
.badge-issued { background:#E8F5ED; color:#166534; }
.badge-rejected, .badge-blacklisted, .badge-lost { background:#FBEAE8; color:#A1382E; }
.badge-callback, .badge-in_progress, .badge-pending, .badge-awaiting_supervisor,
.badge-awaiting { background:#FCF3E1; color:#A46D23; }
.badge-no_answer, .badge-excluded_today { background:#F2F4F3; color:#4D5C56; }
.badge-invalid_number { background:#FBEAE8; color:#A1382E; }
.badge-unassigned { background:#E3F0FC; color:#1E5F80; }
.badge-active { background:#E8F5ED; color:#166534; }
.badge-draft { background:#F2F4F3; color:#4D5C56; }
.badge-paused { background:#FCF3E1; color:#A46D23; }
.badge-filled { background:#E3F0FC; color:#1E5F80; }
.badge-expired, .badge-cancelled { background:#FBEAE8; color:#A1382E; }
.badge-general { background:#E3F0FC; color:#1E5F80; }
.badge-project { background:#E8F5ED; color:#166534; }
.badge-urgent { background:#FBEAE8; color:#A1382E; }
.badge-contract { background:#FCF3E1; color:#A46D23; }
.badge-seasonal { background:#E8F5ED; color:#166534; }

/* ---- Copy button inline in tables/labels ---- */
.copy-button {
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:0; cursor:pointer;
    color:var(--ink-secondary); padding:2px; margin:0 4px;
    vertical-align:middle;
}
.copy-button:hover { color:var(--accent); }
.copy-button .mi { width:14px; height:14px; }

/* ---- Blacklist compact form ---- */
.blacklist-compact { display:grid; gap:var(--space-3); max-width:400px; }
.blacklist-compact p { display:grid; gap:var(--space-1); margin:0; }
.blacklist-compact label { font-size:13px; color:var(--ink-secondary); }

.driver-section { margin-top:var(--space-4); }
.driver-note-form { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); }
.driver-note-form .field-textarea { width:100%; min-height:96px; }
.driver-history { display:grid; gap:var(--space-4); }
.driver-history-group { display:grid; gap:var(--space-2); }
.driver-history-group + .driver-history-group { padding-top:var(--space-4); border-top:1px solid var(--border); }
.driver-history-head { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2) var(--space-3); }
.driver-history-head a { font-weight:600; color:var(--ink-primary); }
.driver-history-head a:hover { color:var(--accent); }

.driver-info > span > strong { text-align:right; }
.driver-info .phone-value { display:flex; align-items:center; justify-content:flex-start; gap:var(--space-1); }
.driver-info .phone-value a { direction:ltr; }
.referral-fields {
    padding:var(--space-4);
    background:var(--bg-page);
    border:1px solid var(--border);
    border-radius:var(--radius-input);
}
.referral-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.referral-heading strong { font-size:13px; }
.referral-heading span { color:var(--ink-secondary); font-size:11px; }

/* ---- Inline action form (delete btn in table) ---- */
.inline-action { display:inline; }

.inquiry-text { white-space:normal; min-width:220px; max-width:360px; line-height:1.8; }

/* ---- Report followup section ---- */
.followup-section { margin-top:var(--space-5); }

/* ---- Load financial/contact details ---- */
.financial-section {
    margin:var(--space-6) 0;
    padding:var(--space-5) var(--space-6);
    background:#fff;
    border:1px solid #E6EBE8;
    border-radius:12px;
    box-shadow:0 1px 2px rgba(16,36,28,.06);
}
.financial-section h2 { margin:0 0 var(--space-4); font-size:15px; }

/* ---- Funnel chart ---- */
.funnel-chart {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:var(--space-4) 0 var(--space-2);
}
.funnel-line {
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%; direction:ltr;
}
.funnel-stage {
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    padding:7px 14px; min-height:38px;
    color:#fff; font-size:12px; border-radius:6px;
    background:linear-gradient(135deg, #1F8A5B, #28A870);
}
.funnel-line:nth-child(2) .funnel-stage { background:linear-gradient(135deg, #28A870, #45c08a); }
.funnel-line:nth-child(3) .funnel-stage { background:linear-gradient(135deg, #45c08a, #6dd4a5); }
.funnel-line:nth-child(4) .funnel-stage { background:linear-gradient(135deg, #23885d, #3aa875); }
.funnel-line:nth-child(5) .funnel-stage { background:linear-gradient(135deg, #1f8a5b, #3aa875); min-height:48px; }
.funnel-stage span { font-weight:500; white-space:nowrap; }
.funnel-stage strong { font-size:14px; font-weight:700; white-space:nowrap; }
.funnel-drop { color:#fff; font-size:10px; font-weight:600; opacity:.85; }

.kpi-live-status.is-loading i { background:var(--warning); animation:pulse .9s ease-in-out infinite alternate; }
.kpi-live-status.is-error { color:#8F2F26; }
.kpi-live-status.is-error i { background:var(--danger); }
@keyframes pulse { from { opacity:.45; } to { opacity:1; } }

/* ---- Pagination ---- */
.pagination {
    display:flex; align-items:center; justify-content:center; gap:var(--space-2);
    margin-top:var(--space-4); direction:rtl;
}
.pagination-pages { display:flex; align-items:center; gap:var(--space-1); }
.pagination-link {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:34px; min-height:34px; padding:0 var(--space-2);
    border:1px solid var(--border); border-radius:var(--radius-input);
    background:var(--bg-card); color:var(--ink-primary);
    font-size:12px; text-decoration:none;
}
.pagination-link:hover { border-color:var(--accent); color:var(--accent); }
.pagination-link.is-current {
    border-color:var(--accent); background:var(--accent);
    color:#fff; font-weight:700;
}
.pagination-prev, .pagination-next { padding-inline:var(--space-3); }
.pagination-ellipsis {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:24px; color:var(--ink-secondary); font-size:13px;
}

/* ---- Reason bar chart ---- */
.bar-chart { display:grid; gap:6px; }
.chart-row { display:flex; align-items:center; gap:8px; }
.reason-label { display:flex; align-items:center; gap:6px; flex-shrink:0; width:100px; justify-content:space-between; }
.reason-label span { font-size:12px; color:var(--ink-primary); }
.reason-label strong { font-size:12px; color:var(--ink-secondary); font-weight:700; }
.reason-bar { flex:1; height:20px; background:#EDF0EF; border-radius:4px; overflow:hidden; }
.reason-bar i { display:block; height:100%; background:var(--accent); border-radius:4px; }

/* ---- Notification page ---- */
.notif-list { display:grid; gap:var(--space-2); }
.notif-item {
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-card);
}
.notif-info small { display:block; font-size:12px; color:var(--ink-secondary); }

/* ---- Login page ---- */
.login-page { min-height:100vh; background:#06271C; color:#12201B; }
.login-shell {
    min-height:100vh; display:grid; place-items:center; padding:24px;
}
.login-card {
    width:min(100%,440px); background:#FAFCFB; border:1px solid #E2EAE5;
    border-radius:24px; padding:clamp(32px,5vw,52px);
    box-shadow:0 20px 50px rgba(3,20,13,.22);
}
.login-brand { display:flex; align-items:center; gap:var(--space-3); padding-bottom:26px; border-bottom:1px solid #E2EAE5; }
.login-brand strong { display:block; font-size:17px; font-weight:700; }
.login-brand small { display:block; font-size:11px; color:var(--ink-secondary); margin-top:3px; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; overflow:hidden; border-radius:13px; background:#0B3B2A; }
.brand-mark img { width:100%; height:100%; object-fit:cover; filter:hue-rotate(-90deg) saturate(1.12); }
.login-heading { padding:44px 0 30px; }
.login-heading h1 { font-size:30px; line-height:1.35; letter-spacing:-.04em; margin:10px 0 12px; }
.login-heading p { color:var(--ink-secondary); font-size:13px; margin:0; line-height:1.9; }
.login-form { display:grid; gap:9px; }
.login-form label { display:flex; justify-content:space-between; font-size:12px; color:var(--ink-primary); margin-top:8px; }
.login-form label span { color:#87978F; font-size:10px; font-weight:400; }
.login-form input { width:100%; min-height:48px; border:1px solid #DCE6E0; border-radius:11px; padding:8px 13px; font:inherit; font-size:14px; background:#fff; transition:border-color .15s,box-shadow .15s; }
.login-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(31,138,91,.13); }
.login-submit { width:100%; justify-content:space-between; min-height:50px; margin-top:22px; padding-inline:18px; background:#0B3B2A !important; border-color:#0B3B2A !important; }
.login-submit:hover { background:#1F8A5B !important; }
.login-error { color:#A1382E; background:#FFF4F2; border:1px solid #F0D1CC; border-radius:10px; padding:11px 12px; font-size:12px; margin-bottom:var(--space-3); }
.login-note { display:flex; align-items:center; gap:7px; margin:28px 0 0; color:#74847B; font-size:11px; }
.secure-icon { display:grid; place-items:center; width:17px; height:17px; border-radius:50%; color:#1F8A5B; background:#E5F3EA; font-size:10px; font-weight:700; }

/* ---- Operational feedback ---- */
.copy-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.copy-feedback { display:inline-block; margin-inline-start:4px; color:#166534; font-size:11px; white-space:nowrap; }
.copy-feedback.is-error { color:#A1382E; }
.copy-feedback:empty { display:none; }
.possible-duplicate-badge { display:inline-flex; margin-inline-start:6px; padding:2px 7px; border-radius:999px; color:#80531B; background:#FCF3E1; font-size:11px; white-space:nowrap; }
.duplicate-alert { margin:0 0 var(--space-3); padding:10px 12px; border:1px solid #E8D7B4; border-radius:10px; color:#674718; background:#FCF7EB; }
.notification-date-range { min-width:min(100%, 320px); }
.reminder-row td { background:#FFFBF2; }
.reminder-state { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; color:var(--ink-secondary); background:var(--surface-muted,#F2F4F3); font-size:11px; white-space:nowrap; }
.reminder-state.is-scheduled { color:#80531B; background:#FCF3E1; }
.reminder-state.is-due { color:#A1382E; background:#FBEAE8; }
.reminder-state.is-done { color:#166534; background:#E8F5ED; }
.due-notification-toast { position:fixed; z-index:1100; inset-inline-end:24px; inset-block-end:24px; display:flex; align-items:center; gap:12px; max-width:min(560px,calc(100vw - 32px)); padding:12px 14px; border:1px solid var(--border); border-radius:12px; color:var(--ink-primary); background:var(--surface); box-shadow:0 8px 24px rgba(20,40,30,.16); }
.due-notification-toast[hidden] { display:none; }
.due-notification-toast a { color:var(--accent); font-weight:600; white-space:nowrap; }
.due-notification-toast button { border:0; padding:4px 7px; color:var(--ink-secondary); background:transparent; font:inherit; cursor:pointer; }
.due-notification-toast button:focus-visible, .due-notification-toast a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:700px) {
    .notifications-filters { align-items:stretch; }
    .notifications-filters .select-control, .notification-date-range { width:100%; }
    .due-notification-toast { inset-inline:12px; inset-block-end:12px; flex-wrap:wrap; }
}

/* ---- Responsive overrides ---- */
@media (max-width:600px) {
    .login-card { padding:28px 22px; }
    .login-heading { padding:34px 0 24px; }
    .login-heading h1 { font-size:26px; }
}