/* ALMUTARJEM customer and staff portal. Colours follow the website tokens: navy #083058, blue #237ec3, gold #e7bc70. */
:root{--navy:#083058;--navy-2:#0b3c65;--blue:#237ec3;--gold:#e7bc70;--ink:#122d43;--muted:#4b6172;--paper:#f4f8fb;--white:#fff;--rule:#c9d6e2;--ok:#087f50;--warn:#b45309;--bad:#b91c1c;--radius:12px;--font:"IBM Plex Sans Arabic","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;src:url("../fonts/ibm-plex-sans-arabic-400-normal-arabic.4fa3d81d41ab.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;src:url("../fonts/ibm-plex-sans-arabic-400-normal-latin.4767e1197706.woff2") format("woff2");unicode-range:U+0000-00FF}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;src:url("../fonts/ibm-plex-sans-arabic-500-normal-arabic.106892212ea7.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:500;src:url("../fonts/ibm-plex-sans-arabic-500-normal-latin.80ebc672c915.woff2") format("woff2");unicode-range:U+0000-00FF}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.55;font-size:16px}
a{color:var(--blue)}a:hover{color:var(--navy)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.top{background:var(--white);border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:10}
.top__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.brand img{display:block;height:40px;width:auto}
.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nav a{color:var(--navy);text-decoration:none;font-weight:500}.nav a:hover{text-decoration:underline}
.inline{display:inline}
.link{background:none;border:0;color:var(--blue);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
.pill{border:1px solid var(--rule);background:var(--white);color:var(--navy);border-radius:999px;padding:4px 12px;cursor:pointer;font:inherit}
.main{padding:28px 16px 48px}
h1{color:var(--navy);font-size:1.75rem;margin:0 0 .6em;font-weight:600}h2{color:var(--navy);font-size:1.15rem;margin:0 0 .6em;font-weight:600}h3{font-size:1rem;margin:1em 0 .4em;color:var(--navy)}
.lead{color:var(--muted);margin:0 0 .5em}.muted{color:var(--muted)}.ok{color:var(--ok)}
.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:0 1px 2px rgba(8,48,88,.04)}
.card--soft{background:#eaf3fc;border-color:#d4e5f5}
.narrow{max-width:520px;margin-inline:auto}
.grid2{display:grid;gap:18px;grid-template-columns:1fr}@media(min-width:860px){.grid2{grid-template-columns:1fr 1fr}}
.grid3{display:grid;gap:12px;grid-template-columns:1fr}@media(min-width:860px){.grid3{grid-template-columns:1fr 1fr 1fr}}
.f{display:block;margin-bottom:12px;font-weight:500;color:var(--navy)}
.f input,.f select,.f textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--rule);border-radius:8px;font:inherit;color:var(--ink);background:var(--white)}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.errorlist{color:var(--bad);list-style:none;padding:0;margin:4px 0 0;font-size:.9rem;font-weight:400}
.btn{display:inline-block;background:var(--navy);color:var(--white);border:1px solid var(--navy);border-radius:999px;padding:10px 20px;font:inherit;font-weight:500;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{background:var(--navy-2);color:var(--white)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--ghost{background:var(--white);color:var(--navy)}.btn--ghost:hover{background:#eaf3fc;color:var(--navy)}
.btn--small{padding:6px 14px;font-size:.9rem}
.messages{margin-bottom:16px}.msg{padding:10px 14px;border-radius:8px;background:#eaf3fc;border:1px solid #d4e5f5;margin:0 0 8px}
.msg--success{background:#e8f5ee;border-color:#bfe3cf;color:#0b5a3b}.msg--error{background:#fdecec;border-color:#f5bcbc;color:#8a1c1c}.msg--info{background:#fff7e6;border-color:#f3dfae;color:#6b4a00}
.notice{background:#fff7e6;border:1px solid #f3dfae;border-radius:var(--radius);padding:14px 16px;margin-bottom:16px}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.95rem}.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--rule);text-align:start;vertical-align:top}
.table th{color:var(--muted);font-weight:500;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
.table--compact th,.table--compact td{padding:6px 8px}.table tfoot td{border-bottom:0}.table tr.total td{font-weight:600;color:var(--navy);border-top:2px solid var(--navy)}
.tag{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.8rem;background:#eaf3fc;color:var(--navy);border:1px solid #d4e5f5;white-space:nowrap}
.tag--new{background:#fff7e6;border-color:#f3dfae;color:#6b4a00}.tag--accepted,.tag--in_progress,.tag--review{background:#e6f0fa;border-color:#c3dbf2}.tag--ready,.tag--delivered,.tag--closed{background:#e8f5ee;border-color:#bfe3cf;color:#0b5a3b}.tag--cancelled{background:#fdecec;border-color:#f5bcbc;color:#8a1c1c}
.tag--scan-infected{background:#fdecec;border-color:#f5bcbc;color:#8a1c1c}.tag--scan-clean,.tag--scan-cleared{background:#e8f5ee;border-color:#bfe3cf;color:#0b5a3b}.tag--ads{background:#fff2cc;border-color:var(--gold);color:#5a3e00}
.timeline{list-style:none;padding:0;margin:0}.timeline li{position:relative;padding-inline-start:22px;padding-bottom:10px;border-inline-start:2px solid var(--rule);margin-inline-start:6px}
.timeline li::before{content:"";position:absolute;inset-inline-start:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--white)}
.timeline li b{display:block;color:var(--navy)}.timeline li span{color:var(--muted);font-size:.9rem}
.quote{border:1px solid var(--rule);border-radius:10px;padding:12px 14px;margin-bottom:12px}.quote--old{opacity:.6}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:10px}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}.inline-form input,.inline-form select{padding:6px 10px;border:1px solid var(--rule);border-radius:8px;font:inherit;flex:1;min-width:160px}
.stack>*+*{margin-top:8px}
.docs{list-style:none;padding:0;margin:0 0 14px}.docs li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--rule)}
.doc-kind{font-size:.8rem;color:var(--muted);min-width:120px}.doc-name{font-weight:500;flex:1}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:8px 0}.kv dt{color:var(--muted)}.kv dd{margin:0}
.bank{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:10px 12px;white-space:pre-wrap;font-family:inherit}
.kpis{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:18px}@media(min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{display:block;background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink)}.kpi b{display:block;font-size:1.6rem;color:var(--navy)}.kpi span{color:var(--muted);font-size:.9rem}.kpi--warn b{color:var(--warn)}
.search{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.search input,.search select{padding:10px 12px;border:1px solid var(--rule);border-radius:8px;font:inherit;flex:1;min-width:200px}
.qr svg{width:220px;height:220px;display:block;margin:12px auto;background:#fff;padding:8px;border:1px solid var(--rule);border-radius:8px}
.wrap-any{overflow-wrap:anywhere;display:block;font-size:.8rem}
.foot{border-top:1px solid var(--rule);padding:18px 0 28px;color:var(--muted);font-size:.9rem}.foot a{color:var(--navy)}
details summary{cursor:pointer}
@media(max-width:600px){h1{font-size:1.4rem}.card{padding:16px}.main{padding-top:18px}}