:root{
  --ink:#34348C; --ink-deep:#22225E; --paper:#F6F2E9; --paper-2:#EFE8D8;
  --amber:#F5A623; --amber-dark:#C97A0E; --teal:#1B7A72; --line:#D8CFB8;
  --red:#B3261E; --white:#FFFDF9;
  --mono:'IBM Plex Mono','Courier New',monospace; --sans:'Inter',-apple-system,sans-serif; --display:'Oswald','Arial Narrow',sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;}
header.app{background:linear-gradient(135deg,var(--ink),var(--ink-deep));color:#fff;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:4px solid var(--amber);flex-wrap:wrap;gap:10px;}
header.app .brand{display:flex;align-items:center;gap:12px;}
header.app .logo-chip{background:#fff;border-radius:8px;padding:6px 10px;}
header.app .logo-chip img{height:28px;display:block;}
header.app h1{font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:1px;margin:0;}
header.app .sub{font-size:11px;color:#C7C6E8;letter-spacing:1px;text-transform:uppercase;}
header.app .who{font-size:12px;color:#E7E6FA;}
header.app a.logout{background:transparent;border:1px solid #5C5CB0;color:#E7E6FA;font-size:11px;padding:6px 10px;border-radius:4px;text-decoration:none;}
header.app a.logout:hover{background:#40408F;}

nav.tabs{display:flex;gap:2px;background:var(--paper-2);padding:0 24px;border-bottom:2px solid var(--line);overflow-x:auto;}
nav.tabs a{padding:12px 16px;font-family:var(--display);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#6b6250;border-bottom:3px solid transparent;white-space:nowrap;text-decoration:none;}
nav.tabs a.active{color:var(--ink);border-bottom-color:var(--amber);}

main{padding:20px 24px 60px;max-width:1200px;margin:0 auto;}
.panel{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:16px;}
.panel h2{margin:0 0 12px;font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:1px;}
.muted{color:#8a8168;font-size:12px;}
.req-star{color:var(--red);}
.notice{background:#FDE9D2;border:1px solid var(--amber);color:#7a4a0c;padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px;}
.notice.error{background:#F6DEDC;border-color:var(--red);color:var(--red);}
.notice.success{background:#DCEFE9;border-color:var(--teal);color:var(--teal);}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#8a8168;margin-bottom:4px;}
input,select,textarea{width:100%;padding:9px;border:1px solid var(--line);border-radius:4px;font-family:var(--sans);font-size:14px;background:var(--white);color:var(--ink);}
input:focus,select:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber);}
.btn{border:none;border-radius:4px;padding:10px 16px;cursor:pointer;font-weight:600;font-size:13px;display:inline-block;text-decoration:none;}
.btn-amber{background:var(--amber);color:#fff;} .btn-amber:hover{background:var(--amber-dark);}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);} .btn-ghost:hover{background:var(--paper-2);}
.btn-red{background:var(--red);color:#fff;}
.btn-sm{padding:6px 10px;font-size:12px;}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;}
fieldset{border:1px solid var(--line);border-radius:6px;margin:0 0 14px;padding:12px;}
legend{font-family:var(--display);font-size:12px;text-transform:uppercase;letter-spacing:1px;padding:0 6px;color:var(--amber-dark);}

table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;padding:8px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:500;letter-spacing:.5px;text-transform:uppercase;font-size:11px;}
td{padding:8px;border-bottom:1px solid var(--line);}
tr:hover td{background:#FBF8F1;}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.badge.requested{background:#EDE3D0;color:#8a6b1f;} .badge.confirmed{background:#E4E1F5;color:#5346A8;}
.badge.pickedup{background:#DCE8F5;color:#2a5c8a;} .badge.intransit{background:#DCE8F5;color:#2a5c8a;}
.badge.outfordelivery{background:#FDE9D2;color:#B5590F;} .badge.delivered{background:#DCEFE9;color:var(--teal);}
.badge.delayed{background:#F6DEDC;color:var(--red);} .badge.returned{background:#F6DEDC;color:var(--red);}
.badge.cancelled{background:#E6E2DB;color:#6b6250;}
.badge.paid{background:#DCEFE9;color:var(--teal);} .badge.unpaid{background:#F6DEDC;color:var(--red);}
.empty{text-align:center;padding:40px;color:#a39a80;}

#loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,#40408F 0%,var(--ink-deep) 60%);padding:20px;}
.login-card{background:#fff;border-radius:12px;padding:32px 30px;width:100%;max-width:360px;box-shadow:0 20px 50px rgba(0,0,0,.35);text-align:center;border-top:5px solid var(--amber);margin:0 auto;}
.login-card img{height:48px;margin-bottom:14px;}
.login-card h2{font-family:var(--display);text-transform:uppercase;letter-spacing:1px;margin:0 0 4px;font-size:16px;}
.login-card p.sub{font-size:12px;color:#8a8168;margin:0 0 18px;}
.login-card .field{text-align:left;margin-bottom:12px;}
.login-card button{width:100%;margin-top:6px;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
/* ===== SIDEBAR APP SHELL (new navigation pattern) ===== */
.app-shell{display:flex; min-height:100vh;}
.sidebar{width:230px; flex-shrink:0; background:var(--ink-deep); color:#fff; display:flex; flex-direction:column;}
.sidebar .side-brand{display:flex; align-items:center; gap:10px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.1);}
.sidebar .side-brand .mark{width:32px; height:32px; border-radius:8px; background:var(--amber); color:var(--ink-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--display); font-size:13px; transform:rotate(-4deg); flex-shrink:0;}
.sidebar .side-brand b{font-family:var(--display); font-size:14px; text-transform:uppercase; letter-spacing:.5px; display:block;}
[dir="rtl"] .sidebar .side-brand b{font-family:'Cairo',sans-serif; text-transform:none;}
.sidebar .side-brand small{display:block; font-size:9px; color:#9998C8; text-transform:uppercase; letter-spacing:1px;}
[dir="rtl"] .sidebar .side-brand small{text-transform:none;}
.sidebar nav{flex:1; padding:14px 10px; overflow-y:auto;}
.sidebar .navlink{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:8px; color:#C9C8E8; text-decoration:none; font-size:13.5px; font-weight:600; margin-bottom:2px;}
.sidebar .navlink .ic{width:18px; text-align:center; flex-shrink:0;}
.sidebar .navlink:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar .navlink.active{background:var(--amber); color:var(--ink-deep);}
.sidebar .navgroup-label{font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:#7E7DB0; padding:16px 14px 6px;}
[dir="rtl"] .sidebar .navgroup-label{text-transform:none;}
.sidebar .side-foot{padding:16px 18px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; color:#9998C8;}
.sidebar .side-foot b{display:block; color:#fff; font-size:13px;}
.sidebar .side-foot a.logout{display:inline-block; margin-top:8px; font-size:11px; color:#C9C8E8; border:1px solid rgba(255,255,255,.25); padding:5px 10px; border-radius:5px; text-decoration:none;}

.main-area{flex:1; min-width:0; background:var(--paper);}
.topbar{background:#fff; border-bottom:1px solid var(--line); padding:16px 28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.topbar h1{font-size:19px; margin:0; font-family:var(--display); text-transform:uppercase;}
[dir="rtl"] .topbar h1{font-family:'Cairo',sans-serif; text-transform:none;}
.topbar .crumb{font-size:11px; color:#8a8168; text-transform:uppercase; letter-spacing:1px; margin-bottom:2px;}
[dir="rtl"] .topbar .crumb{text-transform:none;}
.topbar-right{display:flex; align-items:center; gap:10px;}
.signout-btn{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--red); border:1px solid #E8B8B4; background:#FBF0EF; padding:8px 13px; border-radius:6px; text-decoration:none; white-space:nowrap;}
.signout-btn:hover{background:#F6DEDC;}
.content-area{padding:26px 28px; padding-bottom:26px;}

/* ===== MOBILE: bottom tab bar instead of sidebar ===== */
.bottom-nav{display:none;}
.more-sheet{display:none;}
@media (max-width:900px){
  .app-shell{flex-direction:column;}
  .sidebar{display:none;}
  .content-area{padding-bottom:90px;}
  .topbar h1{font-size:16px;}
  .topbar-right .signout-btn span.label{display:none;}

  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:100;
    background:var(--ink-deep); border-top:1px solid rgba(255,255,255,.1);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 14px rgba(0,0,0,.15);
  }
  .bottom-nav a, .bottom-nav button{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    color:#9998C8; text-decoration:none; font-size:10px; font-weight:600; padding:6px 2px;
    border:none; background:none; font-family:inherit; cursor:pointer;
  }
  [dir="rtl"] .bottom-nav a, [dir="rtl"] .bottom-nav button{text-transform:none;}
  .bottom-nav a.active{color:var(--amber);}
  .bottom-nav .bn-ic{font-size:19px; line-height:1;}

  .more-sheet{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200;}
  .more-sheet.open{display:block;}
  .more-sheet .panel{position:absolute; bottom:0; left:0; right:0; background:#fff; border-radius:16px 16px 0 0; padding:10px 10px calc(20px + env(safe-area-inset-bottom));}
  .more-sheet .panel .handle{width:36px; height:4px; background:#ddd; border-radius:3px; margin:8px auto 12px;}
  .more-sheet .panel a{display:flex; align-items:center; gap:12px; padding:14px 16px; color:var(--ink-deep); text-decoration:none; font-weight:600; font-size:14.5px; border-radius:8px;}
  .more-sheet .panel a:hover{background:var(--paper);}
  .more-sheet .panel a.signout{color:var(--red);}
}


.stat{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:4px;padding:12px 14px;}
.stat .num{font-family:var(--mono);font-size:20px;font-weight:600;}
.stat .lab{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#8a8168;}

@media (max-width:760px){
  header.app{flex-direction:column;align-items:flex-start;padding:12px 16px;}
  main{padding:12px;}
  .grid2,.grid3,.grid4{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  input,select,textarea{font-size:16px;}
  table thead{display:none;}
  table,tbody,tr,td{display:block;width:100%;}
  tbody tr{margin-bottom:12px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;}
  tbody td{border:none;padding:5px 0;display:flex;justify-content:space-between;font-size:13px;text-align:right;}
  tbody td[data-label]:not([data-label=""])::before{content:attr(data-label);font-weight:600;color:#8a8168;text-transform:uppercase;font-size:10px;letter-spacing:.5px;text-align:left;}
}

@media print{
  header.app, nav.tabs, .no-print{ display:none !important; }
  body{ background:#fff; }
}

/* ===== LANGUAGE SWITCHER ===== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');
.lang-switch{ position:fixed; top:12px; right:12px; z-index:200; background:#fff; border:1px solid var(--line); border-radius:20px; padding:5px 10px; font-size:12px; font-weight:600; display:flex; gap:6px; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.lang-switch a{ color:#8a8168; text-decoration:none; padding:2px 4px; }
.lang-switch a.active{ color:var(--ink); font-weight:700; }
.lang-switch span{ color:#ccc; }
[dir="rtl"] .lang-switch{ right:auto; left:12px; }

/* ===== RTL SUPPORT ===== */
[dir="rtl"] body{ font-family:'Cairo','Inter',sans-serif; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .brand,[dir="rtl"] legend,[dir="rtl"] .sub-brand{ font-family:'Cairo','Oswald',sans-serif; }
[dir="rtl"] body{ text-align:right; }
[dir="rtl"] .field label{ text-align:right; }
[dir="rtl"] .row-actions{ flex-direction:row-reverse; }
[dir="rtl"] th, [dir="rtl"] td{ text-align:right; }
[dir="rtl"] .sidebar{ order:2; }
[dir="rtl"] .sidebar .navlink{ flex-direction:row-reverse; }
[dir="rtl"] .stat{ border-left:none; border-right:4px solid var(--amber); }
[dir="rtl"] .stat.teal{ border-right-color:var(--teal); border-left:none; }
[dir="rtl"] .stat.red{ border-right-color:var(--red); border-left:none; }
[dir="rtl"] .notice, [dir="rtl"] .negative-note, [dir="rtl"] .empty-note{ text-align:right; }
[dir="rtl"] .wb-track, [dir="rtl"] .signup-left, [dir="rtl"] .col{ text-align:right; }
[dir="rtl"] .more-sheet .panel a{ text-align:right; }
[dir="rtl"] .signout-btn{ flex-direction:row-reverse; }