/* Easy Wack - shared banana/SpeedAF theme (NO Arabic) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

:root{
  --ink:#16181D; --ink-2:#23262E; --bg:#F4F5F2; --card:#FFFFFF; --line:#E9EAE4;
  --muted:#8A8F98; --text:#1B1D22;
  --banana:#D4A017; --banana-deep:#B8860B; --banana-soft:#FBF3D5;
  --green:#1FA463; --red:#E0495B; --orange:#F0883E; --blue:#3B82F6; --purple:#8B5CF6; --gray:#94A3B8;
  --shadow:0 1px 2px rgba(16,18,22,.04),0 8px 24px rgba(16,18,22,.06);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.55}
a{color:inherit;text-decoration:none}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff;display:flex;align-items:center;
  gap:14px;padding:0 16px;height:60px;border-bottom:3px solid var(--banana)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;white-space:nowrap}
.brand .wordmark{font-weight:900;font-size:22px;letter-spacing:.5px;background:linear-gradient(135deg,#E8C14A,var(--banana-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-family:'Cairo',sans-serif}
.brand .logo{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--banana);font-weight:900;color:#fff;
  font-size:18px;box-shadow:0 4px 14px rgba(212,160,23,.4)}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:8px 14px;border-radius:999px;color:#cfd2d8;font-weight:700;font-size:14px;white-space:nowrap;cursor:pointer;transition:.15s}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.active{background:var(--banana);color:var(--ink);font-weight:800}
.topbar .who{font-size:13px;color:#cfd2d8;white-space:nowrap}

/* buttons */
.btn{border:none;border-radius:12px;padding:11px 16px;font-family:'Cairo';font-weight:800;font-size:14px;cursor:pointer;
  transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn:active{transform:translateY(2px)}
.btn.primary{background:var(--banana);color:var(--ink)}
.btn.primary:hover{background:var(--banana-deep)}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:#fff;color:var(--text);border:1.5px solid var(--line)}
.btn.green{background:var(--green);color:#fff} .btn.red{background:var(--red);color:#fff}
.btn.blue{background:var(--blue);color:#fff} .btn.sm{padding:7px 11px;font-size:13px;border-radius:10px}

/* layout */
.wrap{max-width:1150px;margin:0 auto;padding:18px 16px}
.page{display:none} .page.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.card h3{margin:0 0 14px;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spacer{flex:1}

/* inputs */
.inp,select.inp{padding:10px 12px;border:1.5px solid var(--line);border-radius:11px;font-family:'Cairo';font-weight:700;font-size:14px;background:#fff;width:100%}
.inp:focus{outline:none;border-color:var(--banana-deep)}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:.8rem;color:var(--muted);font-weight:700}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.tile .n{font-size:1.7rem;font-weight:800}
.tile .t{font-size:.78rem;color:var(--muted)}
.tile.b{border-top:3px solid var(--banana)} .tile.g{border-top:3px solid var(--green)}
.tile.o{border-top:3px solid var(--orange)} .tile.r{border-top:3px solid var(--red)} .tile.bl{border-top:3px solid var(--blue)}

/* table */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 8px;font-size:.85rem;text-align:center;border-bottom:1px solid var(--line)}
th{background:#faf9f5;color:#555;font-weight:800;white-space:nowrap}
td.r,th.r{text-align:right}
tr.dup td{background:#FFF6D6}
.pill{padding:3px 10px;border-radius:999px;color:#fff;font-size:.74rem;font-weight:800;display:inline-block}
.p-pending{background:var(--orange)} .p-confirmed{background:var(--green)} .p-cancelled{background:var(--red)}
.p-shipped{background:#16a085} .p-no_answer{background:var(--gray)} .p-postponed{background:var(--purple)}
.p-cancelled_final{background:#7A1F2B} .p-no_answer_2{background:#6B7280} .p-no_answer_3{background:#4B5563}
.p-site{background:var(--blue)} .p-refqa{background:var(--purple)}
.muted{color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:24px}

@media(max-width:720px){ .tiles{grid-template-columns:repeat(3,1fr)} }
@media(max-width:480px){ .tiles{grid-template-columns:repeat(2,1fr)} .brand span{display:none} }
table.prev{width:100%;border-collapse:collapse;font-size:.82rem}
table.prev th,table.prev td{border:1px solid var(--line);padding:6px 8px;text-align:center}
table.prev th{background:#fbfaf7}
.repbox{margin-top:4px}
.pager{display:flex;align-items:center;justify-content:center;padding:10px 0 2px}