/* Shina Shop Exchange - v1.0.0 */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --primary:#0c4aad;
  --primary2:#163d7a;
  --shadow: 0 10px 30px rgba(2, 8, 23, .08);
  --radius:16px;
}
/* Kurdish/Arabic font (used only when dir="rtl") */
@font-face{
  font-family:"K24KurdishBold";
  src:url("fonts/K24KurdishBold-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}


:root[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0f1b33;
  --text:#e6edf7;
  --muted:#9fb0c8;
  --border:#20304f;
  --primary:#3b82f6;
  --primary2:#60a5fa;
  --shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Noto Sans Arabic", "Noto Kufi Arabic", sans-serif;
}

.app{max-width:980px;margin:0 auto;padding:18px 18px 40px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.0));
  box-shadow:var(--shadow);
}
:root[data-theme="dark"] .topbar{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.0));
}

.brand{display:flex;align-items:center;gap:12px;min-width:260px}
.logo{width:44px;height:44px;border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.title{font-weight:800;letter-spacing:.2px;font-size:18px}
.subtitle{font-size:12px;color:var(--muted);margin-top:2px}

.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.seg{
  display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:var(--card);
}
.segbtn{
  border:0;background:transparent;color:var(--text);padding:8px 10px;cursor:pointer;
  font-weight:700;font-size:12px;min-width:44px;
}
.segbtn.active{background:rgba(12,74,173,.12);color:var(--primary)}
:root[data-theme="dark"] .segbtn.active{background:rgba(59,130,246,.18);}

.iconbtn{
  display:flex;gap:8px;align-items:center;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  padding:9px 12px;border-radius:999px;cursor:pointer;
}
.iconbtn .icon{font-size:14px}
.iconbtn .label{font-size:12px;font-weight:700;color:var(--muted)}
.iconbtn:hover{border-color:rgba(12,74,173,.4)}

.content{margin-top:14px;display:grid;gap:14px}
.card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.cardhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cardhead h2{margin:0;font-size:16px}
.hint{color:var(--muted);font-size:12px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:720px){.grid2{grid-template-columns:1fr}.brand{min-width:auto}}

.field{display:flex;flex-direction:column;gap:8px}
.fieldlabel{font-size:12px;color:var(--muted);font-weight:700}
.field input{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:transparent;
  color:var(--text);
  font-size:16px;
  outline:none;
}
.field input:focus{border-color:rgba(12,74,173,.6);box-shadow:0 0 0 4px rgba(12,74,173,.12)}
.readonly .pill{
  display:flex;align-items:center;gap:8px;
  padding:12px 12px;border:1px dashed var(--border);
  border-radius:14px;color:var(--muted);font-weight:700;
}
.dot{opacity:.5}

.actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.primary{
  border:0;background:linear-gradient(180deg, var(--primary), var(--primary2));
  color:white;padding:11px 14px;border-radius:14px;cursor:pointer;font-weight:800;
}
.ghost{
  border:1px solid var(--border);background:transparent;color:var(--text);
  padding:11px 14px;border-radius:14px;cursor:pointer;font-weight:800;
}

.resultline{
  margin-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 12px;border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(12,74,173,.06), rgba(12,74,173,.0));
}
:root[data-theme="dark"] .resultline{
  background:linear-gradient(180deg, rgba(59,130,246,.12), rgba(59,130,246,.0));
}
.resultlabel{font-size:12px;color:var(--muted);font-weight:800}
.resultvalue{font-weight:900;letter-spacing:.2px}

.smallnote{margin-top:10px;color:#b45309;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.35);
  padding:10px 12px;border-radius:14px;font-weight:800}

.offlineBanner{
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.12);
  color:var(--text);
  padding:10px 12px;border-radius:14px;font-weight:800;
}

/* RTL support */
:root[dir="rtl"] body{direction:rtl;font-family:"K24KurdishBold","Noto Kufi Arabic","Noto Sans Arabic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
:root[dir="rtl"] .brand{flex-direction:row-reverse}
:root[dir="rtl"] .controls{justify-content:flex-start}
:root[dir="rtl"] .resultline{flex-direction:row-reverse}
:root[dir="rtl"] .actions{flex-direction:row-reverse}
/* Print receipt RTL support */
:root[dir="rtl"] .pr-card{direction:rtl;font-family:"K24KurdishBold","Noto Kufi Arabic","Noto Sans Arabic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
:root[dir="rtl"] .pr-head{flex-direction:row-reverse}
:root[dir="rtl"] .pr-meta{margin-left:0;margin-right:auto;text-align:right}
:root[dir="rtl"] .pr-row{flex-direction:row-reverse}
:root[dir="rtl"] .pr-k{text-align:right}
:root[dir="rtl"] .pr-v{text-align:left}

/* Receipt direction support when the dir attribute is applied to the receipt container */
#printReceipt[dir="rtl"] .pr-card{direction:rtl;font-family:"K24KurdishBold","Noto Kufi Arabic","Noto Sans Arabic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
#printReceipt[dir="rtl"] .pr-head{flex-direction:row-reverse}
#printReceipt[dir="rtl"] .pr-meta{margin-left:0;margin-right:auto;text-align:right}
#printReceipt[dir="rtl"] .pr-row{flex-direction:row-reverse}
#printReceipt[dir="rtl"] .pr-k{text-align:right;unicode-bidi:plaintext}
#printReceipt[dir="rtl"] .pr-v{text-align:left;unicode-bidi:plaintext}
#printReceipt[dir="rtl"] .pr-note{flex-direction:row-reverse}
#printReceipt[dir="rtl"] .pr-note .pr-v{text-align:right}
#printReceipt[dir="rtl"] .pr-amounts{flex-direction:row-reverse}

/* Print */
.printonly{display:none}
@media print{
  /* A4 single-page receipt: smaller margins to prevent 2-page output */
  @page { size: A4; margin: 10mm; }
  html,body{height:auto !important}
  body{background:#fff;margin:0 !important}
  .topbar, .card:not(.printonly), .offlineBanner { display:none !important; }
  /* Never show undo toast in print preview */
  #undoToast, .undoToast { display:none !important; }
  .app{max-width:none;padding:0;margin:0}
  /* Remove normal card spacing so receipt never spills onto page 2 */
  .printonly, .card.printonly{display:block;box-shadow:none;border:none !important;margin:0 !important;padding:0 !important}
  /* Ensure receipt stays as a single page */
  .print-receipt, .pr-card{page-break-inside:avoid;break-inside:avoid}
  .pr-card{max-width:190mm;width:190mm;margin:0 auto;padding:8mm 8mm}
  .printgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .printsig{margin-top:18px}
  .sigline{height:1px;background:#222;margin-top:24px}
  .siglabel{margin-top:6px;color:#222;font-weight:700}
}

/* Quick Amount Buttons */
.quick-buttons{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.qbtn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.6);
  color:var(--text);
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .06s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  user-select:none;
}
:root[data-theme="dark"] .qbtn{
  background:rgba(255,255,255,.04);
}
.qbtn:hover{
  border-color:rgba(12,74,173,.45);
  box-shadow: 0 6px 18px rgba(2,8,23,.08);
}
.qbtn:active{
  transform: translateY(1px);
}
.qbtn:focus{
  outline:none;
  border-color:rgba(12,74,173,.60);
  box-shadow: 0 0 0 3px rgba(12,74,173,.18);
}

/* Transaction History */
.historyControls{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.historyControls select,.historyControls input[type="date"]{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:12px;padding:10px 12px;font-weight:700}
.tableWrap{width:100%;overflow:auto;border:1px solid var(--border);border-radius:16px;background:var(--card)}
.historyTable{width:100%;border-collapse:separate;border-spacing:0;min-width:820px}
.historyTable thead th{position:sticky;top:0;background:linear-gradient(to bottom, rgba(148,163,184,.10), rgba(148,163,184,.06));backdrop-filter: blur(6px);padding:12px 14px;text-align:start;font-size:13px;color:var(--muted);border-bottom:1px solid var(--border)}
.historyTable tbody td{padding:12px 14px;border-bottom:1px solid var(--border);font-weight:600}
.historyTable tbody tr:hover{background:rgba(148,163,184,.06)}
.hActions{display:flex;gap:14px;align-items:center;justify-content:flex-end}
.hBtn{border:1px solid var(--border);background:var(--card);padding:8px 10px;border-radius:12px;font-weight:800;cursor:pointer;min-width:72px;text-align:center}
.hBtn.primary{background:linear-gradient(135deg, var(--brand), var(--brand2));border-color:rgba(12,74,173,.35);color:white}
.hBtn.danger{border-color:rgba(220,38,38,.35);color:rgba(220,38,38,.95)}

/* Backward-compat: history buttons use lowercase class names in JS */
.hbtn{border:1px solid var(--border);background:var(--card);padding:8px 10px;border-radius:12px;font-weight:800;cursor:pointer;min-width:72px;text-align:center}
.hbtn.primary{background:linear-gradient(135deg, var(--brand), var(--brand2));border-color:rgba(12,74,173,.35);color:white}
.hbtn.danger{border-color:rgba(220,38,38,.35);color:rgba(220,38,38,.95)}
.hbtn.primary{background:linear-gradient(135deg, var(--brand), var(--brand2));border-color:rgba(12,74,173,.35);color:white}
.hbtn.danger{border-color:rgba(220,38,38,.35);color:rgba(220,38,38,.95)}
.historyTable td.h-act{white-space:nowrap}
.historyEmpty{margin-top:10px;color:var(--muted);font-weight:600}

/* Direction toggle layout */
.righttools{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
/* Readonly target field (visual hint, subtle) */
.field.readonly input{
  background: rgba(148,163,184,.10);
}
:root[data-theme="dark"] .field.readonly input{
  background: rgba(148,163,184,.06);
}

/* Rate Lock Indicator */
.lockpill{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(12,74,173,.06);
  color:var(--text);
  font-weight:700;
  font-size:12px;
  letter-spacing:.15px;
}
:root[data-theme="dark"] .lockpill{
  background:rgba(12,74,173,.10);
}
.lockpill .lockicon{ font-size:13px; }
.lockpill .sep{ opacity:.6; }


/* Receipt Layout */
.print-receipt{
  /* Keep content within one A4 page */
  padding:0;
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0f172a;
}
.pr-card{
  border:1px solid #cbd5e1;
  border-radius:14px;
  /* Reduce padding so everything fits on one A4 page */
  padding:10mm 10mm;
  max-width:190mm;
  margin:0 auto;
}
.pr-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:6mm;
  border-bottom:1px dashed #cbd5e1;
}
.pr-logo img{
  width:54px;
  height:54px;
  border-radius:12px;
}
.pr-name{
  font-size:20px;
  font-weight:900;
  letter-spacing:.3px;
}
.pr-sub{
  margin-top:2px;
  font-size:12px;
  color:#475569;
  font-weight:700;
}
.pr-meta{
  margin-top:6mm;
  display:grid;
  gap:8px;
}
.pr-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.pr-k{
  font-size:12px;
  color:#475569;
  font-weight:800;
}
.pr-v{
  font-size:12px;
  font-weight:800;
}
.pr-amounts{
  margin-top:8mm;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:6mm;
}
.pr-box{
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:6mm 6mm;
  min-height:22mm;
}
.pr-box .big{
  margin-top:6px;
  font-size:18px;
  font-weight:900;
  letter-spacing:.2px;
}
.pr-note{
  margin-top:8mm;
  border-top:1px dashed #cbd5e1;
  padding-top:6mm;
}
.pr-note .pr-v{
  font-weight:700;
  color:#334155;
}
.pr-stamp{
  margin-top:8mm;
  display:grid;
  gap:6px;
}
.stamp-title{
  font-size:12px;
  color:#475569;
  font-weight:900;
}
.stamp-box{
  height:30mm;
  border:2px dashed #94a3b8;
  border-radius:12px;
}

/* --- Print RTL/LTR fix (v1.4.4) --- */
#printReceipt[dir="rtl"],
#printReceipt[dir="rtl"] * { direction: rtl; }

#printReceipt[dir="ltr"],
#printReceipt[dir="ltr"] * { direction: ltr; }

/* Align meta rows properly by direction */
#printReceipt[dir="rtl"] .pr-meta { text-align: right; }
#printReceipt[dir="rtl"] .pr-row { flex-direction: row-reverse; }
#printReceipt[dir="rtl"] .pr-k { text-align: right; }
#printReceipt[dir="rtl"] .pr-v { text-align: left; }
#printReceipt[dir="rtl"] .pr-note { text-align: right; }
#printReceipt[dir="rtl"] .pr-note-text { direction: rtl; unicode-bidi: plaintext; text-align: right; }

#printReceipt[dir="ltr"] .pr-meta { text-align: left; }
#printReceipt[dir="ltr"] .pr-row { flex-direction: row; }
#printReceipt[dir="ltr"] .pr-k { text-align: left; }
#printReceipt[dir="ltr"] .pr-v { text-align: right; }

/* Keep numbers/currency readable in RTL */
#printReceipt .ltr { direction: ltr; unicode-bidi: isolate; }

/* --- Transaction history controls --- */
.historyControls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.historyCustom{display:none;align-items:center;gap:8px;flex-wrap:wrap}
.historyCustom.show{display:flex}
.historyCustom label{font-size:12px;color:#64748b;font-weight:800}
.historyCustom .select{min-width:150px}

.btnSmall{padding:8px 12px;border-radius:12px;font-size:12px;font-weight:900;line-height:1}
.btnGhost{background:transparent;border:1px solid rgba(9,43,100,.25);border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;} 
.btnGhost:hover{background:#f8fafc}

/* History button polish */
.btnGhost:hover{box-shadow:0 8px 18px rgba(16,24,40,.10);border-color:rgba(9,43,100,.35);}
.btnGhost:active{transform:translateY(1px);} 
.dark .btnGhost{border-color:rgba(255,255,255,.18);} 
.dark .btnGhost:hover{border-color:rgba(255,255,255,.28);} 

/* History action buttons (Print / Remove) */
.hbtn{
  border:1px solid rgba(9,43,100,.20);
  background: #ffffff;
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 72px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.hbtn:hover{box-shadow:0 8px 18px rgba(16,24,40,.10);border-color:rgba(9,43,100,.35);background:#f8fafc}
.hbtn:active{transform:translateY(1px)}
.hbtn.danger{border-color:rgba(220,38,38,.35);background:#fff5f5}
.hbtn.danger:hover{border-color:rgba(220,38,38,.55);background:#ffecec}
.dark .hbtn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.dark .hbtn:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28)}
.dark .hbtn.danger{background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.35)}
.dark .hbtn.danger:hover{background:rgba(220,38,38,.14);border-color:rgba(220,38,38,.50)}

/* Make custom date range inputs clearer */
.historyCustom input[type="date"]{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(9,43,100,.18);
  background:#fff;
  font-weight:800;
}
.dark .historyCustom input[type="date"]{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}

/* ----- Admin PIN Modal (Styled) ----- */
.pinModal{position:fixed;inset:0;z-index:9999}
.pinModalOverlay{position:absolute;inset:0;background:rgba(15,23,42,.35)}
.dark .pinModalOverlay{background:rgba(0,0,0,.55)}

.pinModalDialog{
  position:relative;
  width:min(420px, calc(100% - 28px));
  margin:12vh auto 0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.pinModalHead{padding:14px 16px;border-bottom:1px solid var(--border)}
.pinModalTitle{font-weight:900;font-size:14px;letter-spacing:.2px;display:flex;align-items:center;gap:8px}

.pinModalBody{padding:14px 16px}
.pinModalText{color:var(--muted);font-size:12px;margin-bottom:10px;line-height:1.4}

.pinModalInput{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:transparent;
  color:var(--text);
  font-size:18px;
  outline:none;
  text-align:center;
  letter-spacing:6px;
}
.pinModalInput:focus{border-color:rgba(12,74,173,.6);box-shadow:0 0 0 4px rgba(12,74,173,.12)}
.dark .pinModalInput:focus{border-color:rgba(59,130,246,.7);box-shadow:0 0 0 4px rgba(59,130,246,.18)}

.pinModalError{margin-top:10px;color:#b91c1c;font-weight:900;font-size:12px}
.dark .pinModalError{color:#fca5a5}

.pinModalActions{
  display:flex;gap:10px;justify-content:flex-end;
  padding:12px 16px;border-top:1px solid var(--border);
}
.pinModalActions .primary,.pinModalActions .ghost{min-width:108px}

@media (max-width:420px){
  .pinModalDialog{margin:10vh auto 0}
  .pinModalActions{justify-content:space-between}
  .pinModalActions .primary,.pinModalActions .ghost{flex:1}
}

/* ----- Message / Confirm Modal (Styled) ----- */
.msgModal{position:fixed;inset:0;z-index:9998}
.msgModalOverlay{position:absolute;inset:0;background:rgba(15,23,42,.35)}
:root[data-theme="dark"] .msgModalOverlay{background:rgba(0,0,0,.55)}

.msgModalDialog{
  position:relative;
  width:min(460px, calc(100% - 28px));
  margin:12vh auto 0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.msgModalHead{padding:14px 16px;border-bottom:1px solid var(--border)}
.msgModalTitle{font-weight:800;font-size:14px;letter-spacing:.2px;display:flex;align-items:center;gap:8px}

.msgModalBody{padding:14px 16px}
.msgModalText{color:var(--text);font-size:13px;line-height:1.5;white-space:pre-line}

.msgModalActions{
  display:flex;gap:10px;justify-content:flex-end;
  padding:12px 16px;border-top:1px solid var(--border);
}
.msgModalActions .primary,.msgModalActions .ghost{min-width:108px}

@media (max-width:420px){
  .msgModalDialog{margin:10vh auto 0}
  .msgModalActions{justify-content:space-between}
  .msgModalActions .primary,.msgModalActions .ghost{flex:1}
}

/* ----- Undo Toast (Soft Delete) ----- */
.undoToast{position:fixed;left:0;right:0;bottom:14px;z-index:9999;display:flex;justify-content:center;pointer-events:none}
.undoToastInner{
  pointer-events:auto;
  width:min(560px, calc(100% - 24px));
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.undoToastText{font-size:13px;color:var(--text);line-height:1.35}