:root {
  --primary-color: #2563eb;
  --dark-bg: #0f172a;
  --light-bg: #f8fafc;
  --text: #0f172a;
  --card: #ffffff;
  --muted: #64748b;
  --shadow: 0 10px 30px rgba(2,6,23,0.1);
  --radius: 14px;
}
*{box-sizing:border-box}
html{direction:rtl}
body{margin:0;font-family:'Cairo',system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--light-bg);color:var(--text)}
.hidden{display:none!important}
.container{width:95%;max-width:1200px;margin:0 auto}
/* Header */
.header{background:var(--dark-bg);color:#fff;padding:14px 0;box-shadow:var(--shadow)}
.header .wrap{display:flex;justify-content:space-between;align-items:center}
/* Cards */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
/* Buttons */
.btn{border:none;border-radius:10px;padding:10px 16px;cursor:pointer;transition:.2s;font-weight:700}
.btn-primary{background:var(--primary-color);color:#fff}
.btn-secondary{background:transparent;color:var(--primary-color);border:2px solid var(--primary-color)}
.btn-sm{padding:6px 10px}
/* Login */
.login{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1e293b,#0f172a)}
.login .card{width:100%;max-width:420px}
.login h1{margin:.25rem 0 .5rem}
.login label{display:block;margin:.5rem 0 .25rem}
.login input{width:100%;padding:12px;border:1px solid #e2e8f0;border-radius:10px}

/* Captcha display */
#captchaCode {
  display: inline-block;
  min-width: 80px;
  padding: 6px 10px;
  background-color: #f8fafc;
  color: #000;
  font-weight: bold;
  text-align: center;
  border: 1px solid #cbd5e1;
}

/* Dashboard grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.tile{text-align:center;padding:16px}
.tile i{font-size:28px;color:var(--primary-color)}
/* Tabs */
.tabs{display:flex;gap:8px;overflow:auto;padding:10px 0;margin-top:10px}
.tab-btn{background:transparent;border:none;border-bottom:3px solid transparent;padding:12px 16px;font-weight:700;cursor:pointer}
.tab-btn.active{border-bottom-color:var(--primary-color);color:var(--primary-color)}
/* Metrics */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:12px 0 16px}
.metric{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:12px}
.metric .label{color:var(--muted);font-size:14px}
.metric .value{font-size:22px;font-weight:800}
/* Tables */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px;border-bottom:1px solid #e2e8f0}
th{background:#eef2ff;text-align:right}
tr:nth-child(even){background:#f8fafc}
/* Select */
select{padding:8px;border:1px solid #cbd5e1;border-radius:10px;background:#fff}
/* Footer */
.footer{padding:20px 0;color:var(--muted);text-align:center}

/* v4.2 dashboard cards */
.metric-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px}
.metric-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.badge-day{background:#1d4ed8;color:#fff;padding:4px 10px;border-radius:999px;font-size:12px}
.metric-title{font-weight:700}
.metric-rows{display:flex;justify-content:space-between;align-items:end;margin-top:6px}
.metric-col .label{color:#64748b;font-size:13px}
.metric-col .val-ok{color:#16a34a;font-weight:800;font-size:22px}
.metric-col .val-bad{color:#dc2626;font-weight:800;font-size:22px}
.metrics{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}

/* Dark mode */
body.dark{background:#0b1220;color:#e2e8f0}
body.dark .card{background:#0f172a;color:#e2e8f0}
body.dark .header{background:#0b1220;color:#e2e8f0}
body.dark th{background:#1e293b;color:#e2e8f0}
body.dark select{background:#0f172a;color:#e2e8f0;border-color:#334155}

/* Crews grid: 2 columns on desktop, 1 on mobile */
#crewsWrap.grid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;            /* موبايل: عمود واحد */
}

@media (min-width: 780px){
  #crewsWrap.grid{
    grid-template-columns: repeat(2, minmax(320px, 1fr)); /* ديسكتوب: عمودان */
  }
}

@media print{
  html, body{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .header, .footer, .tabs, .btn, .tab-btn, #backBtn, #themeToggle, #themeToggle2{ display:none !important; }
  .card{ box-shadow:none !important; border:1px solid #e2e8f0; break-inside: avoid; page-break-inside: avoid; }
  #crewsWrap.grid{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(320px, 1fr)) !important; }
}

/* Helpers */
.hidden { display: none !important; }