/* ===== Base / Reset ===== */
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:#eef5f9;color:#18344d;font-family:Tajawal,Arial,sans-serif}

/* ===== Top bar ===== */
.topbar{
  min-height:70px;background:#fff;border-bottom:1px solid #d9e6ee;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;position:sticky;top:0;z-index:10;flex-wrap:wrap;gap:10px
}
.brand{display:flex;align-items:center;gap:10px;color:#0e426d}
.brand .logo,.login-card .logo{width:40px;height:40px;border-radius:12px;background:#0f4d7d;color:#fff;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.brand b{display:block;font-size:15px}
.brand small{display:block;color:#7890a4;font-size:10px}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.btn{border:0;border-radius:11px;height:40px;padding:0 15px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;white-space:nowrap;font-size:13px}
.btn.dark{background:#114a77;color:#fff}
.btn.primary{background:#145681;color:#fff;box-shadow:0 5px 15px #14568122}
.btn.light{background:#eef4f7;color:#124b75}

/* ===== Layout ===== */
.container{max-width:1500px;margin:auto;padding:28px 32px 50px;width:100%}
.head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.head h1{margin:0;color:#104771;font-size:24px}
.head p{margin:5px 0 0;color:#7890a4;font-size:12px;max-width:520px}
.user-box{background:#fff;border:1px solid #dce8ef;padding:10px 15px;border-radius:11px;font-size:12px;white-space:nowrap}

/* ===== Stats ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{background:#fff;border:1px solid #dce8ef;border-radius:14px;padding:16px 18px;min-width:0}
.stat span{font-size:12px;color:#7890a4}
.stat b{display:block;color:#114b76;font-size:25px;margin-top:2px}
.stat.green b{color:#2c965c}
.stat.orange b{color:#dc8615}
.stat.red b{color:#d13c3c}

/* ===== Panel / Toolbar ===== */
.panel{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #dce8ef;box-shadow:0 15px 40px #164d6d12}
.toolbar{display:flex;gap:10px;padding:13px;background:#fbfdfe;border-bottom:1px solid #dce8ef;flex-wrap:wrap}
.toolbar input,.toolbar select{height:42px;border:1px solid #d7e4eb;border-radius:10px;padding:0 12px;font-family:inherit;outline:0;color:#18344d;background:#fff}
.toolbar input{flex:1;min-width:160px}
.toolbar select{flex:0 0 auto}

/* ===== Table (scrolls horizontally on small screens instead of breaking layout) ===== */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table{width:100%;min-width:900px;border-collapse:collapse}
th{background:#104a75;color:#fff;padding:13px 10px;font-size:11px;white-space:nowrap;position:sticky;top:0}
td{padding:12px 10px;border-bottom:1px solid #e2ebf0;font-size:12px;white-space:nowrap}
tbody tr:nth-child(even){background:#f7fafc}
tbody tr:hover{background:#edf6fb}
.name{font-weight:800;color:#123e60}
.ltr{direction:ltr;display:inline-block}
.date{font-weight:800;color:#176298}
.days{font-weight:800;color:#c16018}
.badge{display:inline-flex;padding:7px 12px;border-radius:999px;font-size:11px;font-weight:800}
.badge.confirmed{background:#dff3e8;color:#237b49}
.badge.pending{background:#fff0d9;color:#b86605}
.badge.cancelled{background:#ffe3e3;color:#b42d2d}
.badge.near{outline:2px solid #f04a4a;outline-offset:1px}
.actions-cell{display:flex;gap:5px}
.mini{border:0;width:32px;height:32px;border-radius:9px;background:#eef4f7;color:#0c466f;cursor:pointer;flex-shrink:0}
.mini.del{background:#fff0f0;color:#d22d2d}

.footer{display:flex;justify-content:space-between;padding:12px 15px;color:#7890a4;font-size:11px;flex-wrap:wrap;gap:6px}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;background:#071f31a8;display:grid;place-items:center;padding:14px;z-index:30}
.modal[hidden]{display:none}
.dialog{background:#fff;width:min(720px,100%);max-height:92vh;overflow-y:auto;border-radius:18px;overflow-x:hidden;box-shadow:0 30px 80px #0005}
.dialog.small{width:min(600px,100%)}
.dialog-head{display:flex;justify-content:space-between;gap:10px;padding:18px 20px;border-bottom:1px solid #e0e9ee;position:sticky;top:0;background:#fff;z-index:1}
.dialog-head h2{margin:0;color:#114a75;font-size:18px}
.dialog-head p{margin:3px 0 0;color:#7890a4;font-size:11px}
.x{border:0;background:#eef4f7;width:35px;height:35px;border-radius:9px;font-size:22px;color:#164b70;cursor:pointer;flex-shrink:0}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:20px}
label{font-size:11px;font-weight:800;color:#5a7182}
label input,label select{display:block;width:100%;height:43px;margin-top:6px;border:1px solid #d6e3ea;border-radius:9px;padding:0 11px;font-family:inherit;outline:0}
.wide{grid-column:1/-1}
.actions{display:flex;gap:8px;padding:16px 20px;border-top:1px solid #e1e9ee;flex-wrap:wrap}
.actions .primary{margin-right:auto}
.add-row{margin:0 20px 10px}
.fleet-row{display:grid;grid-template-columns:1fr 90px 40px;gap:8px;padding:8px 20px}
.fleet-row input{height:40px;border:1px solid #d6e3ea;border-radius:9px;padding:0 10px;font-family:inherit;min-width:0}
.remove-row{border:0;border-radius:9px;background:#fff0f0;color:#d22d2d}

.toast{position:fixed;bottom:18px;left:18px;right:18px;max-width:340px;background:#173b55;color:#fff;padding:13px 18px;border-radius:11px;opacity:0;transform:translateY(10px);transition:.25s;z-index:50}
.toast.show{opacity:1;transform:translateY(0)}
.alert{padding:10px;border-radius:9px;margin:10px 0;font-size:12px}
.danger{background:#ffe7e7;color:#a82222}

/* ===== Login page ===== */
.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eaf3f7,#dceaf1);padding:16px}
.login-card{width:min(400px,100%);background:#fff;border-radius:20px;padding:28px 22px;box-shadow:0 25px 70px #134a6820;text-align:center}
.login-card .logo{margin:auto}
.login-card h1{margin:12px 0 0;font-size:20px}
.login-card p{color:#7890a4;margin:3px 0 20px;font-size:13px}
.login-card label{text-align:right;display:block;margin:12px 0}
.login-card input{width:100%;height:44px;margin-top:6px;border:1px solid #d6e3ea;border-radius:9px;padding:0 11px}
.full{width:100%;margin-top:10px}
.login-card small{display:block;color:#7890a4;margin-top:15px;font-size:10px}

/* ===================================================== */
/* ===== Tablet (≤850px) ===== */
/* ===================================================== */
@media(max-width:850px){
  .topbar{padding:10px 14px}
  .container{padding:16px 12px 40px}
  .head{align-items:flex-start}
  .user-box{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}
  .wide{grid-column:auto}
}

/* ===================================================== */
/* ===== Mobile (≤560px) ===== */
/* ===================================================== */
@media(max-width:560px){
  .brand b{font-size:13px}
  .brand small{font-size:9px}

  /* Top action buttons: wrap into a neat block instead of overflowing */
  .top-actions{width:100%;justify-content:flex-start}
  .top-actions .btn{flex:1 1 auto;padding:0 10px;font-size:12px;height:38px}

  .head h1{font-size:19px}
  .head p{display:none}

  .stats{grid-template-columns:1fr 1fr;gap:8px}
  .stat{padding:12px 14px}
  .stat b{font-size:20px}

  .toolbar{flex-direction:column}
  .toolbar input,.toolbar select,.toolbar .btn{width:100%}

  table{min-width:760px}

  .dialog{max-height:100vh;height:100%;border-radius:0}
  .modal{padding:0}
  .fleet-row{grid-template-columns:1fr 70px 36px}

  .footer{flex-direction:column;align-items:flex-start}
}