/* Yahyah Logistics Tracking System — self-contained stylesheet (no external fonts/CDNs, loads fast) */
:root{
  --primary:#0b5394; --primary-dark:#073763; --accent:#1e88e5;
  --bg:#f4f6f9; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
  --border:#e2e5ea; --success:#1e7e34; --success-bg:#d4edda;
  --danger:#b02a37; --danger-bg:#f8d7da; --warning:#8a6d00; --warning-bg:#fff3cd;
  --radius:8px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

.topbar{background:var(--primary-dark);color:#fff;position:sticky;top:0;z-index:10;}
.topbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:10px 16px;flex-wrap:wrap;}
.brand{color:#fff;font-weight:700;font-size:1.1rem;}
.brand:hover{text-decoration:none;opacity:.9;}
.main-nav{display:flex;gap:16px;flex-wrap:wrap;flex:1;}
.main-nav a{color:#dce8f5;font-size:.92rem;}
.main-nav a:hover{color:#fff;}
.user-menu{display:flex;align-items:center;gap:12px;font-size:.88rem;color:#cfe0f0;}
.btn-logout{background:rgba(255,255,255,.15);padding:6px 12px;border-radius:6px;color:#fff!important;}
.btn-logout:hover{background:rgba(255,255,255,.28);text-decoration:none;}

.page-wrap{max-width:1200px;margin:0 auto;padding:24px 16px 60px;min-height:70vh;}

.alert{padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:.92rem;}
.alert-success{background:var(--success-bg);color:var(--success);}
.alert-danger{background:var(--danger-bg);color:var(--danger);}
.alert-warning{background:var(--warning-bg);color:var(--warning);}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.card h2, .card h3{margin-top:0;}

.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px;}
.stat-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center;}
.stat-box .num{font-size:1.9rem;font-weight:700;color:var(--primary);}
.stat-box .label{color:var(--muted);font-size:.85rem;margin-top:4px;}

table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;}
th,td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;}
th{background:#f0f3f7;font-weight:600;color:var(--primary-dark);white-space:nowrap;}
tr:hover td{background:#fafcff;}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:600;}
.badge-open{background:var(--warning-bg);color:var(--warning);}
.badge-completed{background:var(--success-bg);color:var(--success);}
.badge-admin{background:#e3d4f8;color:#5b21b6;}
.badge-operator{background:#d6e8fb;color:var(--primary);}
.badge-active{background:var(--success-bg);color:var(--success);}
.badge-inactive{background:#eee;color:var(--muted);}

form .form-row{margin-bottom:14px;}
label{display:block;font-weight:600;margin-bottom:5px;font-size:.9rem;color:var(--primary-dark);}
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=time], input[type=number], select, textarea{
  width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:6px;font-size:.95rem;background:#fff;color:var(--text);
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.help-text{color:var(--muted);font-size:.82rem;margin-top:4px;}

.btn{display:inline-block;padding:9px 18px;border-radius:6px;border:none;font-size:.92rem;font-weight:600;cursor:pointer;text-decoration:none;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);text-decoration:none;}
.btn-secondary{background:#eef1f5;color:var(--text);}
.btn-secondary:hover{background:#e1e5eb;text-decoration:none;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{background:#8f222c;text-decoration:none;}
.btn-sm{padding:5px 12px;font-size:.82rem;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}

.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px;}
.filters .form-row{margin-bottom:0;min-width:160px;}

.login-wrap{max-width:400px;margin:60px auto;}
.login-wrap .card{padding:32px;}
.login-wrap h1{font-size:1.3rem;text-align:center;color:var(--primary-dark);margin-bottom:6px;}
.login-wrap .subtitle{text-align:center;color:var(--muted);margin-bottom:24px;font-size:.9rem;}

.site-footer{text-align:center;color:var(--muted);font-size:.82rem;padding:20px;border-top:1px solid var(--border);background:#fff;}

.actions-cell{white-space:nowrap;}
.actions-cell a, .actions-cell button{margin-right:6px;}

@media (max-width:700px){
  .topbar-inner{flex-direction:column;align-items:flex-start;}
  .main-nav{gap:10px;}
  table, thead, tbody, th, td, tr{display:block;}
  thead{display:none;}
  tr{margin-bottom:12px;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
  td{border-bottom:1px solid #f0f0f0;position:relative;padding-left:44%;}
  td::before{content:attr(data-label);position:absolute;left:10px;top:10px;font-weight:600;color:var(--primary-dark);width:38%;white-space:normal;}
}