/* audit-order.css — halaman Audit Order + kad Dashboard (reka semula gaya FixOS: kepala ungu, tab kuning, kad bulat, bar berwarna).
   Warna teks sentiasa token tema (--teks / --tona-*-fg pada --tona-*-bg) supaya kontras >=4.5:1 dalam gelap/terang + asal/ceria/pastel.
   Warna FixOS (--fx-*) hanya utk aksen: kepala, tab aktif, bar carta, butang utama. Makna sentiasa ada ikon + teks.
   Mobile-first, 390px tanpa skrol mendatar. Motion: transform/opacity sahaja, dibungkus prefers-reduced-motion. */

/* ---------- Kepala berwarna ---------- */
.ao-pg{min-width:0;overflow-x:hidden}
.ao-kepala{position:relative;overflow:hidden;border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--fx-grad-kepala);color:var(--fx-on-ungu);min-width:0;font-family:var(--fx-font)}
.ao-kepala::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:var(--fx-pink);opacity:.22;right:-44px;top:-64px;pointer-events:none}
.ao-kepala-atas{display:flex;align-items:center;gap:12px;min-width:0;position:relative;z-index:1}
.ao-kepala-ikon{width:48px;height:48px;border-radius:16px;background:var(--fx-kuning);color:var(--fx-on-kuning);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ao-kepala-teks{min-width:0}
.ao-kepala h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--fx-on-ungu)}
.ao-kepala-sub{font-size:12.5px;line-height:1.45;margin-top:2px;color:var(--fx-on-ungu);overflow-wrap:anywhere}
.ao-bar{display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:wrap;position:relative;z-index:1}
.ao-bar input[type=date]{flex:1;min-width:0;min-height:44px;box-sizing:border-box;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--fx-on-ungu) 38%,transparent);background:color-mix(in srgb,var(--fx-ungu-tua) 55%,transparent);color:var(--fx-on-ungu);color-scheme:dark;font:inherit;font-weight:700;padding:0 12px}
.ao-bar input[type=date]:focus-visible,.ao-bt-nav:focus-visible,.ao-jana:focus-visible,.ao-tab:focus-visible{outline:3px solid var(--fx-kuning);outline-offset:2px}
.ao-bt-nav{min-width:44px;min-height:44px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--fx-on-ungu) 38%,transparent);background:color-mix(in srgb,var(--fx-ungu-tua) 55%,transparent);color:var(--fx-on-ungu);cursor:pointer;font-size:14px;transition:transform .15s ease-out}
.ao-bt-nav:active,.ao-jana:active,.ao-tab:active,.ao-pil:active,.ao-bil:active,.ao-hantar:active{transform:scale(.96)}
.ao-jana{flex:1 1 100%;min-height:44px;border-radius:14px;border:0;background:var(--fx-kuning);color:var(--fx-on-kuning);font:inherit;font-weight:800;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;transition:transform .15s ease-out}
.ao-jana:disabled{opacity:1;filter:saturate(.7);cursor:progress}
.ao-jana .btn-teks{display:inline-flex;align-items:center;gap:8px}
.ao-jana .btn-spinner{border-color:color-mix(in srgb,var(--fx-on-kuning) 30%,transparent);border-top-color:var(--fx-on-kuning)}
@media(min-width:700px){.ao-jana{flex:0 0 auto}.ao-bar input[type=date]{flex:0 1 220px}}

/* ---------- Tab ---------- */
.ao-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin:0 -2px;position:relative;z-index:1}
.ao-tabs::-webkit-scrollbar{display:none}
.ao-tab{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;gap:7px;padding:0 14px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--fx-on-ungu) 30%,transparent);background:color-mix(in srgb,var(--fx-ungu-tua) 55%,transparent);color:var(--fx-on-ungu);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .15s ease-out,background-color .2s ease-out}
.ao-tab[aria-selected="true"]{background:var(--fx-kuning);border-color:var(--fx-kuning);color:var(--fx-on-kuning);font-weight:800}
.ao-tab-n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--fx-pink);color:var(--fx-on-ungu);font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.ao-tab-n:empty{display:none}
.ao-tab[aria-selected="true"] .ao-tab-n{background:var(--fx-ungu-tua);color:var(--fx-on-ungu)}

/* ---------- Panel ikut tab (tiada data-*; kelas aot-<kunci> pd #aoBekas) ---------- */
.ao-isi{display:flex;flex-direction:column;gap:12px;min-width:0}
.ao-pg:not(.aot-ringkasan) .ao-p-ringkasan,.ao-pg:not(.aot-order) .ao-p-order,.ao-pg:not(.aot-selisih) .ao-p-selisih,.ao-pg:not(.aot-pagi) .ao-p-pagi,.ao-pg:not(.aot-tetapan) .ao-p-tetapan{display:none}
.aot-pagi #aoIsi,.aot-tetapan #aoIsi{display:none}
.ao-p-ringkasan{display:flex;flex-direction:column;gap:12px;min-width:0}
.ao-p-order,.ao-p-selisih{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;align-items:start}
@media(min-width:1000px){.ao-p-order,.ao-p-selisih{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ao-p-ringkasan>.ao-jubin-grid,.ao-p-ringkasan>.ao-nota{grid-column:1/-1}

/* ---------- Jubin ringkasan ---------- */
.ao-jubin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:700px){.ao-jubin-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
.ao-jubin{background:var(--tb);color:var(--tf);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0;border:1px solid color-mix(in srgb,var(--ts) 35%,transparent)}
.ao-jubin-ikon{width:36px;height:36px;border-radius:12px;background:var(--ts);color:var(--on-ts);display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.ao-jubin-teks{min-width:0}
.ao-jubin-label{font-size:12.5px;font-weight:700}
.ao-jubin-n{font-family:var(--fx-font);font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
.ao-jubin-sub{font-size:11.5px;line-height:1.35;margin-top:2px;overflow-wrap:anywhere}

/* ---------- Kad panel ---------- */
.ao-kad-p{border-radius:20px}
.ao-kad-p .x-ph h2{font-family:var(--fx-font);letter-spacing:-.01em;overflow-wrap:anywhere}
.ao-bil-kad{background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:2px 10px;color:var(--teks);font-size:12px;font-weight:800}
.ao-nota{font-size:12.5px;color:var(--teks2);line-height:1.5;overflow-wrap:anywhere}
.ao-larian{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;color:var(--teks)}
.ao-larian i{color:var(--teks2);margin-right:4px}

/* ---------- Taburan status ---------- */
.ao-taburan{display:flex;gap:3px;height:16px;border-radius:999px;overflow:hidden;background:var(--panel2);transform-origin:left center}
.ao-taburan.ao-kecil{height:8px;margin-top:6px}
.ao-seg{display:block;min-width:6px;border-radius:999px}
.ao-s-hijau{background:var(--fx-hijau)}.ao-s-cyan{background:var(--fx-cyan)}.ao-s-oren{background:var(--fx-oren)}.ao-s-merah{background:var(--fx-merah)}.ao-s-ungu{background:var(--fx-ungu)}
.ao-legenda{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:8px 12px}
.ao-legenda li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--teks);min-width:0}
.ao-legenda span{flex:1;min-width:0;overflow-wrap:anywhere}
.ao-legenda b{font-weight:800}
.ao-kotak{width:12px;height:12px;border-radius:4px;flex-shrink:0}
.ao-avatar{width:30px;height:30px;border-radius:10px;background:var(--fx-ungu);color:var(--fx-on-ungu);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.ao-pem-nama{flex:1}
.ao-bil-pem{font-size:12px;font-weight:700;color:var(--teks2);white-space:nowrap}
.ao-pem-ringkas .ao-baris1{flex-wrap:nowrap}

/* ---------- Senarai & lencana ---------- */
.ao-senarai{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ao-senarai li{padding:10px 12px;border:1px solid var(--line);border-left:5px solid var(--line2);border-radius:14px;background:var(--panel2);min-width:0}
.ao-senarai li.ao-r-ok{border-left-color:var(--fx-hijau)}
.ao-senarai li.ao-r-amaran{border-left-color:var(--fx-oren)}
.ao-senarai li.ao-r-bahaya{border-left-color:var(--fx-merah)}
.ao-pem-ringkas li{border-left-color:var(--fx-ungu)}
.ao-baris1{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.ao-nama{font-size:13.5px;min-width:0;overflow-wrap:anywhere;color:var(--teks)}
.ao-baris2{font-size:12.5px;color:var(--teks2);margin-top:4px;line-height:1.45;overflow-wrap:anywhere}
.ao-angka{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:12.5px;color:var(--teks2)}
.ao-angka b{color:var(--teks);font-weight:800}
.ao-lencana{--tb:var(--panel);--tf:var(--teks);display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--tb);color:var(--tf);border:1px solid color-mix(in srgb,var(--tf) 40%,transparent);white-space:nowrap}
.ao-lencana.ao-ok{--tb:var(--tona-hijau-bg);--tf:var(--tona-hijau-fg)}
.ao-lencana.ao-amaran{--tb:var(--tona-oren-bg);--tf:var(--tona-oren-fg)}
.ao-lencana.ao-bahaya{--tb:var(--tona-merah-bg);--tf:var(--tona-merah-fg)}
.ao-lencana.ao-info{--tb:var(--panel2);--tf:var(--teks)}
.ao-pulang{display:flex;gap:12px;align-items:center}
.ao-pulang-teks{min-width:0;flex:1}
.ao-hari{width:52px;height:52px;border-radius:16px;background:var(--tona-oren-bg);color:var(--tona-oren-fg);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.ao-hari b{font-family:var(--fx-font);font-size:20px;font-weight:800}
.ao-hari small{font-size:10.5px;font-weight:700;margin-top:2px}
.ao-hari-lewat{background:var(--tona-merah-bg);color:var(--tona-merah-fg)}

/* ---------- Kad Dashboard ---------- */
.ao-kad-dash{position:relative;overflow:hidden;border-radius:20px}
.ao-kad-dash::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--fx-grad-aksen)}
.ao-kad-bos{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);color:var(--teks);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;overflow-wrap:anywhere;transition:transform .15s ease-out}
.ao-kad-bos:active{transform:scale(.98)}
.ao-kad-bos:focus-visible{outline:2px solid var(--fx-fokus);outline-offset:2px}
.ao-kb-teks{flex:1;min-width:0;display:block}
.ao-teks-amaran{color:var(--teks);text-decoration:underline wavy var(--fx-oren);text-underline-offset:3px}

/* ---------- Audit Pagi ---------- */
.ao-pagi-kepala{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.ao-pagi-atas{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ao-pagi-tajuk{font-family:var(--fx-font);color:var(--teks)}
.ao-pagi-pct{background:var(--tona-ungu-bg);color:var(--tona-ungu-fg);border-radius:999px;padding:3px 12px;font-size:12.5px;font-weight:800;white-space:nowrap}
.ao-bar-prog{height:12px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.ao-bar-prog span{display:block;height:100%;width:100%;background:var(--fx-grad-aksen);border-radius:999px;transform-origin:left center}
.ao-pagi-senarai{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:10px}
.ao-item{display:flex;flex-direction:column;gap:10px}
.ao-pagi .ao-senarai li.ao-item{border-left-width:5px;border-left-color:var(--fx-oren);padding:12px}
.ao-pagi .ao-senarai li.ao-siap{border-left-color:var(--fx-hijau);opacity:.85}
.ao-pilihan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ao-pil{min-height:48px;border-radius:14px;border:1.5px solid var(--line2);background:var(--panel);color:var(--teks);font:inherit;font-size:13px;font-weight:700;padding:6px 10px;cursor:pointer;transition:transform .15s ease-out,background-color .15s ease-out;overflow-wrap:anywhere}
.ao-pil[aria-pressed="true"]{background:var(--fx-ungu);border-color:var(--fx-ungu);color:var(--fx-on-ungu);font-weight:800}
.ao-pil:focus-visible,.ao-bil:focus-visible,.ao-hantar:focus-visible{outline:3px solid var(--fx-fokus);outline-offset:2px}
.ao-item input[type=text],.ao-item input[type=number],.ao-borang input,.ao-borang select,.ao-selesai input{min-height:44px;min-width:0;width:100%;box-sizing:border-box}
.ao-item .btn,.ao-borang .btn,.ao-selesai .btn{min-height:48px}
.ao-pagi .ao-hantar{min-height:48px;border-radius:14px;border:0;background:var(--fx-ungu);color:var(--fx-on-ungu);font:inherit;font-weight:800;font-size:14px;cursor:pointer;transition:transform .15s ease-out}
.ao-pagi .ao-hantar:disabled{opacity:1;background:var(--panel2);color:var(--teks2);border:1.5px dashed var(--line2);cursor:not-allowed}
.ao-kira{display:flex;gap:8px;align-items:center}
.ao-kira input{flex:1;text-align:center;font-size:20px;font-weight:800}
.ao-bil{width:48px;height:48px;min-height:44px;border-radius:14px;border:1.5px solid var(--line2);background:var(--panel);color:var(--teks);font-size:20px;font-weight:800;cursor:pointer;transition:transform .15s ease-out}

/* ---------- Pengurusan / modal Selesai (kekal) ---------- */
.ao-borang{display:flex;flex-direction:column;gap:8px;min-width:0;margin-top:6px}
.ao-selesai{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2);display:flex;flex-direction:column;gap:8px;min-width:0}
.ao-selesai-tajuk{font-weight:700;font-size:13px}
.ao-selesai .ao-pasang{min-height:48px;height:auto;white-space:normal;text-align:left;overflow-wrap:anywhere}
.ao-p-tetapan .ao-simpan-th,.ao-p-tetapan #aoSimpanMod{min-height:48px}

/* ---------- Motion (hanya bila pengguna tidak minta kurang gerakan) ---------- */
@keyframes aoNaik{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes aoTumbuh{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){
  .ao-masuk{animation:aoNaik .3s ease-out both}
  .ao-jubin-grid>:nth-child(2),.ao-p-ringkasan>.ao-kad-p:nth-of-type(1){animation-delay:50ms}
  .ao-jubin-grid>:nth-child(3),.ao-p-ringkasan>.ao-kad-p:nth-of-type(2){animation-delay:100ms}
  .ao-jubin-grid>:nth-child(4){animation-delay:150ms}
  .ao-p-order>:nth-child(2),.ao-p-selisih>:nth-child(2){animation-delay:50ms}
  .ao-p-order>:nth-child(3),.ao-p-selisih>:nth-child(3){animation-delay:100ms}
  .ao-p-order>:nth-child(n+4),.ao-p-selisih>:nth-child(n+4){animation-delay:150ms}
  .ao-taburan{animation:aoTumbuh .4s ease-out .1s both}
  .ao-bar-prog span{animation:aoTumbuh .4s ease-out both}
  .ao-pagi-senarai>.ao-item{animation:aoNaik .3s ease-out both}
}