/* ── Base ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
.tt-wrap{font-family:'Segoe UI',Arial,sans-serif;direction:rtl;color:#e2e8f0;background:transparent;width:100vw;position:relative;right:50%;left:50%;margin-right:-50vw;margin-left:-50vw;padding:0 28px}

/* ── Header ──────────────────────────────────────────────── */
.tt-header{display:flex;align-items:center;justify-content:space-between;padding:22px 0 16px;border-bottom:2px solid #1e293b;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.tt-header-title{display:flex;align-items:center;gap:12px}
.tt-header-title span{font-size:2rem}
.tt-header-title h1{margin:0;font-size:1.5rem;font-weight:800;color:#f1f5f9}
.tt-header-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── Alerts ──────────────────────────────────────────────── */
.tt-alert-banner{display:flex;align-items:center;gap:14px;padding:14px 20px;background:linear-gradient(90deg,#450a0a,#7f1d1d);color:#fca5a5;border-bottom:1px solid #991b1b;animation:tt-blink 2s ease-in-out infinite;font-weight:600}
.tt-alert-overdue{background:#dc2626;color:#fff;padding:2px 10px;border-radius:99px;font-size:0.8rem;margin-right:8px}
@keyframes tt-blink{0%,100%{opacity:1}50%{opacity:0.75}}

/* ── KPI ─────────────────────────────────────────────────── */
.tt-kpi{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.tt-kpi-card{background:#1e293b;border:1px solid #334155;border-radius:14px;padding:18px 24px;flex:1;min-width:130px;text-align:center;transition:transform .18s,box-shadow .18s}
.tt-kpi-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.tt-kpi-blue{background:#1e1b4b;border-color:#3730a3}
.tt-kpi-green{background:#064e3b;border-color:#065f46}
.tt-kpi-orange{background:#431407;border-color:#7c2d12}
.tt-kpi-val{font-size:1.7rem;font-weight:900;color:#f1f5f9;line-height:1.1}
.tt-kpi-lbl{font-size:.75rem;color:#64748b;margin-top:5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tt-kpi-blue .tt-kpi-val{color:#818cf8}
.tt-kpi-green .tt-kpi-val{color:#34d399}
.tt-kpi-orange .tt-kpi-val{color:#fb923c}

/* ── Tabs ────────────────────────────────────────────────── */
.tt-tabs{display:flex;gap:4px;border-bottom:2px solid #1e293b;margin-bottom:16px}
.tt-tab{padding:10px 22px;border:none;background:none;cursor:pointer;font-size:.9rem;font-weight:500;color:#64748b;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:inherit;transition:all .2s;white-space:nowrap}
.tt-tab:hover{color:#818cf8}
.tt-tab.active{color:#818cf8;border-bottom-color:#818cf8;font-weight:700}

/* ── Controls ────────────────────────────────────────────── */
.tt-controls{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.tt-ctrl{max-width:220px}

/* ── Date picker ─────────────────────────────────────────── */
.tt-date-picker{display:flex;align-items:center;gap:4px}
.tt-date-part{width:auto!important;flex:1}
.tt-date-sep{color:#475569;font-weight:700;padding:0 2px}
.tt-date-field .tt-date-picker{margin-top:2px}

/* ── Inputs & Buttons ────────────────────────────────────── */
.tt-input{padding:9px 12px;border:1px solid #334155;border-radius:8px;background:#1e293b;color:#e2e8f0;font-size:.88rem;font-family:inherit;width:100%;transition:border-color .2s,box-shadow .2s}
.tt-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.tt-input option{background:#1e293b;color:#e2e8f0}
.tt-auto-badge{background:#064e3b;color:#34d399;border:1px solid #065f46;padding:1px 7px;border-radius:99px;font-size:.7rem;font-weight:700;margin-right:4px;vertical-align:middle}
.tt-btn{padding:9px 18px;border-radius:8px;border:none;cursor:pointer;font-size:.88rem;font-weight:600;font-family:inherit;transition:all .18s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tt-btn-primary{background:#4f46e5;color:#fff}
.tt-btn-primary:hover{background:#6366f1;transform:translateY(-1px)}
.tt-btn-secondary{background:#1e293b;color:#94a3b8;border:1px solid #334155}
.tt-btn-secondary:hover{background:#334155;color:#e2e8f0}
.tt-btn-sm{padding:6px 12px;font-size:.8rem}
.tt-btn-xs{padding:5px 9px;font-size:.78rem;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px}
.tt-btn-xs:hover{background:#334155}
.tt-btn-del{color:#f87171;border-color:#dc262644}
.tt-btn-del:hover{background:#dc2626;color:#fff;border-color:#dc2626}
.tt-btn-danger-sm{padding:3px 8px;font-size:.76rem;background:#dc262622;color:#f87171;border:1px solid #dc262644;border-radius:6px;cursor:pointer;font-family:inherit}
.tt-btn-danger-sm:hover{background:#dc2626;color:#fff}

/* ── Table ───────────────────────────────────────────────── */
.tt-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid #1e293b;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.tt-table{width:100%;border-collapse:collapse;font-size:.84rem}
.tt-table thead th{background:#1e1b4b;padding:13px 14px;text-align:right;font-weight:800;color:#c7d2fe;white-space:nowrap;letter-spacing:.03em}
.tt-table tbody tr{border-bottom:1px solid #0f172a;transition:background .15s}
.tt-table tbody tr:hover{background:#1a2234}
.tt-table td{padding:11px 14px;color:#4ade80;font-weight:700;vertical-align:middle}
.tt-truck-badge{background:#1e1b4b;color:#818cf8;border:1px solid #3730a3;padding:3px 12px;border-radius:99px;font-size:.8rem;font-weight:700}
.tt-num{text-align:left;direction:ltr}
.tt-km-total{color:#34d399;font-weight:900;font-size:.9rem}
.tt-overtime{color:#fb923c;font-weight:800}
.tt-locs{font-size:.8rem;max-width:180px;color:#94a3b8;font-weight:500}
.tt-notes{font-size:.78rem;color:#475569;max-width:140px;font-weight:400}
.tt-changed{font-size:.78rem;color:#64748b}
.tt-changed span{color:#818cf8;font-weight:700}
.tt-changed small{color:#475569}

/* ── Charts ──────────────────────────────────────────────── */
.tt-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:4px}
.tt-chart-card{background:#1e293b;border:1px solid #334155;border-radius:14px;padding:22px}
.tt-chart-card h3{margin:0 0 16px;font-size:.9rem;font-weight:700;color:#64748b;letter-spacing:.05em;text-transform:uppercase}

/* ── Log section ─────────────────────────────────────────── */
.tt-log-section{margin-top:24px}
.tt-log-card{background:#1e293b;border:1px solid #334155;border-radius:14px;padding:20px}
.tt-log-card h3{margin:0 0 16px;font-size:.95rem;font-weight:700;color:#818cf8}

/* ── Locations ───────────────────────────────────────────── */
.tt-locations-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tt-loc-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;background:#1e293b;border:1px solid #334155;border-radius:99px;cursor:pointer;font-size:.82rem;color:#64748b;font-family:inherit;font-weight:500;transition:all .18s;user-select:none}
.tt-loc-chip input{display:none}
.tt-loc-chip:hover{border-color:#6366f1;color:#a5b4fc}
.tt-loc-chip.active{background:#1e1b4b;border-color:#6366f1;color:#818cf8;font-weight:700}

/* ── Modal ───────────────────────────────────────────────── */
.tt-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.tt-modal{background:#0f172a;border:1px solid #1e293b;border-radius:16px;width:100%;max-width:700px;max-height:92vh;overflow-y:auto;box-shadow:0 25px 60px rgba(0,0,0,.7);direction:rtl}
.tt-modal-lg{max-width:900px}
.tt-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid #1e293b}
.tt-modal-header h2{margin:0;font-size:1.1rem;font-weight:800;color:#818cf8}
.tt-modal-x{background:none;border:none;color:#475569;font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:6px}
.tt-modal-x:hover{background:#1e293b;color:#e2e8f0}
.tt-modal-body{padding:22px 24px}
.tt-modal-footer{display:flex;gap:10px;padding:16px 24px 20px;border-top:1px solid #1e293b}
.tt-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.tt-field{display:flex;flex-direction:column;gap:5px}
.tt-field label{font-size:.8rem;font-weight:700;color:#64748b;letter-spacing:.03em}

/* ── Settings ────────────────────────────────────────────── */
.tt-settings-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.tt-settings-section h3{font-size:.9rem;font-weight:800;color:#818cf8;margin:0 0 14px}
.tt-inline-add{display:flex;gap:8px;margin-bottom:12px}
.tt-settings-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.tt-settings-item{display:flex;align-items:center;justify-content:space-between;background:#1e293b;border:1px solid #334155;border-radius:8px;padding:9px 13px;font-size:.85rem;color:#4ade80;font-weight:700}

/* ── Misc ────────────────────────────────────────────────── */
.tt-empty{text-align:center;padding:56px;color:#334155;font-size:.95rem}
.tt-alert{background:#1e293b;border:1px solid #334155;padding:14px 20px;border-radius:10px;margin:16px 0;color:#94a3b8}
.tt-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#1e293b;color:#f1f5f9;padding:13px 28px;border-radius:10px;font-size:.9rem;z-index:99999;box-shadow:0 4px 24px rgba(0,0,0,.5);border:1px solid #334155;direction:rtl;white-space:nowrap;animation:tt-fadein .2s ease}
.tt-toast-success{background:#064e3b;border-color:#059669;color:#34d399}
.tt-toast-error{background:#450a0a;border-color:#dc2626;color:#fca5a5}
@keyframes tt-fadein{from{opacity:0;transform:translateX(-50%) translateY(10px)}}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1024px){.tt-charts-grid{grid-template-columns:1fr}}
@media(max-width:800px){
    .tt-form-grid{grid-template-columns:1fr 1fr}
    .tt-settings-grid{grid-template-columns:1fr}
    .tt-wrap{padding:0 14px}
    .tt-table{font-size:.78rem}
    .tt-table td,.tt-table th{padding:8px 8px}
}
@media(max-width:500px){
    .tt-form-grid{grid-template-columns:1fr}
    .tt-header{flex-direction:column;align-items:flex-start}
    .tt-header-actions{width:100%}
    .tt-kpi-card{min-width:40%}
    .tt-date-picker{flex-wrap:nowrap}
    .tt-table-wrap{font-size:.75rem}
}

/* ── Driver PIN App ──────────────────────────────────────── */
.tt-driver-wrap {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 16px;
    font-family: 'Segoe UI', Arial, sans-serif;
    direction: rtl;
    min-height: 100vh;
    background: #0f172a;
    color: #e2e8f0;
    box-sizing: border-box;
}
.tt-driver-form-wrap { min-height: auto; padding-bottom: 40px; }

.tt-driver-header { text-align:center; padding:28px 0 24px; }
.tt-driver-header span { font-size:3rem; display:block; margin-bottom:8px; }
.tt-driver-header h1 { margin:0; font-size:1.6rem; font-weight:800; color:#f1f5f9; }
.tt-driver-header p  { margin:6px 0 0; color:#64748b; font-size:.9rem; }
.tt-driver-header-sm { padding:16px 0 18px; }
.tt-driver-header-sm span { font-size:2rem; }
.tt-driver-header-sm h1   { font-size:1.3rem; }

/* Driver buttons */
.tt-driver-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; width:100%; }
@media(max-width:360px) { .tt-driver-grid { grid-template-columns:1fr; } }
.tt-driver-btn {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:24px 16px; background:#1e293b; border:2px solid #334155;
    border-radius:16px; cursor:pointer; color:#e2e8f0; font-size:1rem;
    font-weight:700; font-family:inherit; transition:all .2s;
}
.tt-driver-btn:hover, .tt-driver-btn:active { background:#1e1b4b; border-color:#6366f1; color:#818cf8; transform:scale(1.03); }
.tt-driver-icon { font-size:2rem; }

/* PIN dots */
.tt-pin-display { display:flex; justify-content:center; gap:20px; padding:24px 0 12px; }
.tt-pin-dot { width:20px; height:20px; border-radius:50%; border:2px solid #475569; background:transparent; transition:all .2s; }
.tt-pin-dot.filled { background:#6366f1; border-color:#6366f1; box-shadow:0 0 12px rgba(99,102,241,.5); }
.tt-pin-error { text-align:center; color:#f87171; font-size:.88rem; min-height:24px; margin-bottom:8px; }

/* Numpad */
.tt-numpad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:280px; margin:0 auto 24px; }
.tt-numpad-btn {
    height:72px; border-radius:14px; border:1px solid #334155; background:#1e293b;
    color:#e2e8f0; font-size:1.5rem; font-weight:700; cursor:pointer; font-family:inherit;
    transition:all .15s; display:flex; align-items:center; justify-content:center;
}
.tt-numpad-btn:hover:not(.tt-numpad-empty) { background:#1e1b4b; border-color:#6366f1; color:#818cf8; }
.tt-numpad-btn:active:not(.tt-numpad-empty) { transform:scale(.94); }
.tt-numpad-empty { background:transparent; border:none; cursor:default; }

/* Back button */
.tt-back-btn { width:100%; margin-top:12px; justify-content:center; }

/* Driver form */
.tt-driver-form { display:flex; flex-direction:column; gap:14px; }
.tt-driver-submit { width:100%; justify-content:center; padding:14px; font-size:1rem; margin-top:8px; }

.tt-loading-msg { text-align:center; padding:48px; color:#475569; }

/* ── Driver app overrides ────────────────────────────────── */
#tt-driver-app {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
    padding: 0 !important;
}
#tt-driver-app .tt-driver-wrap {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
}
.tt-numpad {
    width: 100%;
    max-width: 280px;
    margin: 0 auto 24px;
}
.tt-driver-btn {
    width: 100%;
    box-sizing: border-box;
}