/* Hamza UI refresh — development branch only.
   A progressive visual layer; does not change accounting data or business rules.
   All assets are local and the original v11 HTML remains intact.
*/
:root{
  --hz-ink:#142d55;
  --hz-subtle:#637892;
  --hz-brand:#0a3da4;
  --hz-brand-dark:#092968;
  --hz-turquoise:#0b9fc7;
  --hz-sun:#eebc21;
  --hz-rose:#c82883;
  --hz-card:#ffffff;
  --hz-canvas:#f2f6fc;
  --hz-border:#dbe5f3;
  --hz-ring:0 0 0 3px rgba(2,138,201,.25);
  --hz-card-shadow:0 5px 18px rgba(16,48,105,.055),0 18px 42px rgba(16,48,105,.035);
}
html{scroll-behavior:smooth}
body{
  color:var(--hz-ink);
  background:radial-gradient(ellipse 70% 25% at 92% 0%,#e9f4ff 0%,transparent 70%),var(--hz-canvas);
  -webkit-tap-highlight-color:transparent
}
.app{align-items:stretch;min-width:0}
.sidebar{
  flex:0 0 244px;width:244px;min-width:0;
  min-height:100dvh;height:100dvh;position:sticky;top:0;
  overflow-y:auto;overscroll-behavior:contain;
  padding:22px 14px;
  background:linear-gradient(170deg,#071d61 0%,#092d86 63%,#07305c 100%);
  border-inline-start:1px solid rgba(255,255,255,.13);
  box-shadow:0 10px 28px rgba(6,27,77,.12)
}
.sb-logo{max-height:85px;object-fit:contain}
.sb-name{font-size:12px;line-height:1.7}
.side-nav{gap:7px}
.navitem{
  min-height:46px;padding:12px 13px;
  border:1px solid transparent;
  border-radius:12px;line-height:1.5;
  transition:background-color .17s ease,border-color .17s ease,transform .17s ease
}
.navitem.active{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
  color:white;font-weight:800
}
.navitem:hover{background:rgba(255,255,255,.12)}
.navitem.active:before{background:var(--hz-sun);flex-shrink:0}
.footnav{line-height:2}
.main{max-width:1510px;flex:1 1 auto;width:auto;padding:24px clamp(18px,2.6vw,42px) 90px}
.header,.panel,.stat,.login-card{
  border:1px solid var(--hz-border);
  box-shadow:var(--hz-card-shadow)
}
.header{border-radius:21px;padding:18px 23px}
.header:after{height:5px}
.topline{margin:20px 0 17px;align-items:center}
.topline h1{font-size:clamp(21px,1.8vw,29px);font-weight:900;letter-spacing:-.035em;color:var(--hz-brand-dark);margin-bottom:5px}
#pageDesc{font-size:12px;line-height:1.8}
.userbadge{font-weight:750;border-color:#d6e2f2}
.demo{line-height:1.5}
.panel{border-radius:20px;padding:20px 21px;margin-bottom:17px;min-width:0}
.panel h3{font-size:16px;color:var(--hz-brand-dark);line-height:1.5}
.panel .mini,.panel p.mini{line-height:1.8}
.mark-strip{margin-bottom:18px}
.statgrid{gap:13px}
.stat{
  border-radius:17px;padding:17px;
  border-top-width:0;border-right:4px solid var(--hz-brand);
  min-width:0
}
.stat.sky{border-top:0;border-right-color:var(--hz-turquoise)}
.stat.pink{border-top:0;border-right-color:var(--hz-rose)}
.stat.gold{border-top:0;border-right-color:var(--hz-sun)}
.stat strong{margin-top:10px;font-size:clamp(21px,1.8vw,27px);overflow-wrap:anywhere;line-height:1.45}
.stat span{font-size:12px;font-weight:700;line-height:1.5}
.stat small{line-height:1.5}
.twocol{gap:17px;align-items:start}
.formgrid{gap:14px}
.field label,.formgrid label{font-size:12px;font-weight:750;color:#425b7e;line-height:1.65}
input:not([type="checkbox"]),select,textarea{
  border-color:#cad8eb;border-radius:12px;
  min-height:45px;background:#fff;color:var(--hz-ink);
  transition:border-color .15s,box-shadow .15s
}
textarea{line-height:1.8;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  border-color:var(--hz-turquoise);outline:0;box-shadow:var(--hz-ring)
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #1b9ed1;outline-offset:3px
}
.btn{
  min-height:43px;padding:10px 15px;font-size:12px;border-radius:12px;
  transition:filter .15s,transform .15s,box-shadow .15s
}
.btn:hover:not(:disabled){filter:brightness(.97);transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn.mainbtn{background:linear-gradient(115deg,#063a9f,#087fbf)}
.btn.rainbow{background:linear-gradient(110deg,#0738ad 0%,#0677c5 60%,#12a0c3 100%);border-bottom:3px solid var(--hz-sun)}
.quickaction{
  border:1px solid #dbe7f5;min-width:0;
  background:linear-gradient(155deg,#fff,#f4f8ff);border-radius:15px;
  transition:transform .15s,box-shadow .15s
}
.quickaction:hover{transform:translateY(-2px);box-shadow:0 7px 18px #092f7a12}
.notice{font-size:12px;line-height:1.95;border-radius:13px}
.fbox{border-radius:14px}
.rowline{min-width:0}
.rowline .rowitem{overflow-wrap:anywhere}
.pill{line-height:1.5}
.twrap{border:1px solid #e2eafa;border-radius:13px;overflow:auto}
.twrap th{background:#ecf4ff;color:#244c86}
.twrap tr:hover td{background:#f7faff}
th,td{line-height:1.7;vertical-align:middle}
.tabs{gap:8px}
.tabs button{min-height:39px;padding:9px 13px;border-radius:11px}
.tabs button.active{background:var(--hz-brand);border-color:var(--hz-brand);box-shadow:0 2px 10px #093caa28}
.order-row{
  padding:16px 13px;margin:0 -4px;border-bottom:1px solid #e6edf7;
  border-radius:12px;overflow-wrap:anywhere
}
.order-row:hover{background:#f7faff}
dialog{
  border:1px solid var(--hz-border)!important;border-radius:20px!important;
  box-shadow:0 26px 80px #061c4970!important;
  width:min(calc(100vw - 26px),590px)!important;max-height:calc(100dvh - 30px)!important;
  overflow-y:auto
}
dialog::backdrop{background:#07193795;backdrop-filter:blur(3px)}
.login-card{padding:30px;max-width:510px}
.login-card h2{font-size:21px}
.login-screen{background:radial-gradient(ellipse at 83% 7%,#dceaff,transparent 54%),linear-gradient(155deg,#eef4fd,#fff)}
#toast{line-height:1.8;box-shadow:0 12px 32px #0a254456}
@media(min-width:751px) and (max-width:1190px){
  .sidebar{width:210px;flex-basis:210px;padding-inline:10px}
  .main{padding-inline:18px}
}
@media(max-width:750px){
  .sidebar{display:none}
  .main{width:100%;padding:11px 11px calc(110px + env(safe-area-inset-bottom))}
  .header{padding:12px 11px;border-radius:17px;margin-bottom:14px}
  .topline{align-items:flex-start;gap:10px;margin:14px 2px}
  .topline h1{font-size:22px}
  .actions-inline{width:100%;gap:7px}
  .actions-inline .btn{padding:9px 11px;min-height:40px}
  .panel{padding:15px;border-radius:16px;margin-bottom:13px}
  .statgrid{gap:9px}
  .stat{padding:12px 10px;border-radius:13px}
  .stat strong{font-size:21px}
  .stat span{font-size:11px}
  .twocol{gap:12px}
  .bottomnav{
    padding:8px 4px max(8px,env(safe-area-inset-bottom));
    background:rgba(255,255,255,.98);border-top:1px solid #cddff3;
    box-shadow:0 -8px 30px #0c34721a
  }
  .bottomnav button{min-height:55px;border-radius:10px;line-height:1.2;min-width:0}
  .bottomnav button.active{background:#edf5ff}
  .quickaction{min-height:80px}
  .order-row{padding:14px 7px}
  .btn{min-height:42px}
  .twrap{margin-inline:-2px}
}
@media(max-width:550px){
  .formgrid{grid-template-columns:minmax(0,1fr);gap:11px}
  .formgrid .field,.formgrid .fwide{grid-column:1 / -1}
  .bigactions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .quickaction{font-size:10px;padding:7px 3px}
  .userbadge{max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:360px){
  .statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat strong{font-size:18px}
  .bottomnav button{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
@media print{
  body{background:white!important}
  .sidebar,.bottomnav{display:none!important}
  .main{padding:0!important;margin:0!important}
  .panel{box-shadow:none!important;border:0!important}
  .btn,.no-print{display:none!important}
}

/* One consistent house style for invoices, receipts, vouchers, reports and statements. */
.hz-document{direction:rtl;max-width:210mm;margin:auto;background:#fff;color:#1b3150;line-height:1.85;padding:10mm;font-family:Tahoma,Arial,sans-serif}
.hz-doc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:3px solid #0a3da4;padding-bottom:13px}
.hz-doc-head img{width:78px;height:66px;object-fit:contain}
.hz-doc-head h2{font-size:20px;color:#092968;margin:0}
.hz-doc-head p{font-size:11px;margin:3px 0;color:#52647d}
.hz-document-title{text-align:center;font-weight:900;font-size:19px;color:#092968;padding:14px;margin:14px 0;border:1px solid #d5e4f6;background:#f1f6fd;border-radius:9px}
.hz-document-body{font-size:13px}
.hz-document-body p{margin:7px 0}
.hz-document-body table{width:100%;border-collapse:collapse}
.hz-document-body td,.hz-document-body th{border:1px solid #cdd8e9;padding:7px;font-size:11px}
.hz-document-body th{background:#edf4fc}
.hz-doc-sign{display:flex;justify-content:space-between;gap:16px;margin-top:35px;font-size:12px}
.hz-doc-foot{margin-top:25px;display:flex;justify-content:space-between;gap:10px;border-top:2px solid #0a3da4;padding-top:10px;color:#5c718e;font-size:11px}
@media print{
 .receipt-paper{padding:0!important;margin:0!important}
 body > :not(#printArea){display:none!important}
 #printArea{display:block!important}
 dialog,dialog::backdrop{display:none!important}
 .receipt-paper .hz-document{max-width:none!important;padding:0!important;color:#111}
 .receipt-paper .hz-doc-head img{width:68px!important;height:63px!important}
 .receipt-paper .hz-document-title{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .hz-document-body tr{break-inside:avoid}
}

/* Professional masthead and action language — scoped to app, not print output */
.hz-workspace-header{background:linear-gradient(118deg,#fff 0%,#f8fbff 72%,#ecf5ff 100%);padding:18px 25px}
.hz-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hz-head-brand{min-width:0}.hz-head-eyebrow{display:block;font-size:10px;letter-spacing:.17em;color:#6881a3;font-weight:900;direction:ltr;text-align:right;margin-bottom:3px}
.hz-head-aside{display:flex;align-items:flex-end;flex-direction:column;gap:8px;text-align:left}
.hz-head-status{display:inline-flex;align-items:center;gap:8px;color:#124d83;background:#e8f4ff;border:1px solid #cfe2f5;border-radius:30px;padding:9px 12px;font-weight:800;font-size:12px}
.hz-status-dot{height:8px;width:8px;background:#1a9b86;border-radius:50%;box-shadow:0 0 0 4px #1a9b8620}
.hz-head-mini{font-size:10px;color:#7d91aa}.hz-side-identity{text-align:center;background:#ffffff0b;border:1px solid #ffffff1a;border-radius:16px;padding:14px 9px 4px}.hz-side-label{font-size:11px;font-weight:850;color:#aac9ef;margin:6px 11px -3px}
.hz-side-lock{font-size:17px;color:#f0c655;vertical-align:middle}
.btn,.hf-btn{font-weight:800;box-shadow:0 1px 3px #0b2f6208;letter-spacing:0}
.btn.mainbtn,.btn.rainbow{box-shadow:0 8px 19px #0b56a029}
.btn.green{background:#e8f9f1;border-color:#bce8d5;color:#087356}
.btn.warn{background:#fff0f2;border-color:#f5ccd5}
.btn:focus-visible,.navitem:focus-visible,.bottomnav button:focus-visible{outline:3px solid #04a3cf;outline-offset:2px}
.hz-client-list{display:grid;gap:9px;margin-top:14px}
.hz-client-item{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #dce6f3;background:#fff;border-radius:13px;padding:14px}
.hz-client-item strong{color:#113b79;font-size:13px}.hz-client-item small{display:block;margin-top:6px;line-height:1.6;overflow-wrap:anywhere}
.hz-client-search{display:flex;gap:10px;align-items:center}.hz-client-search input{flex:1}
.hz-modal-actions{display:flex;gap:9px;margin-top:10px}.hz-modal-actions button{flex:1}
@media(max-width:750px){.hz-workspace-header{padding:12px}.hz-header-inner{gap:8px}.hz-head-eyebrow{font-size:8px}.hz-head-aside{display:none}.hz-client-item{flex-wrap:wrap}.hz-client-item .btn{width:100%}.hz-client-search{flex-direction:column;align-items:stretch}}
@media print{.hz-workspace-header{display:none!important}}

/* Owner-approved official finance document typography — 21 Oct 2026.
   Keep the original bitmap letterhead unchanged. Noto Kufi Arabic is
   installed locally from Debian fonts-noto-core; never fetch remote fonts. */
.hz-document{
  direction:rtl;
  font-family:'Noto Kufi Arabic','DejaVu Sans','Noto Sans Arabic',sans-serif;
  font-weight:400;
  line-height:1.8;
}
.hz-document-title,.hz-document b,.hz-document strong,.hz-document th{
  font-weight:700;
}
.hz-document-body table{width:100%;border-collapse:collapse;margin:13px 0 16px}
.hz-document-body th{
  background:#115d93;color:#fff;border-color:#115d93;
  padding:10px 8px;text-align:right;font-weight:700
}
.hz-document-body td{padding:10px 8px;vertical-align:top;border-color:#d7e2eb}
.hz-document-body tbody tr:nth-child(even){background:#f3f7fa}
.hz-document-body p{margin:9px 0}
.hz-document-body .hz-money{white-space:nowrap;unicode-bidi:isolate}
.hz-document .hz-money-number{
  font-family:'DejaVu Sans',sans-serif!important;
  direction:ltr;unicode-bidi:isolate;display:inline-block;
  font-variant-numeric:tabular-nums
}
.hz-document-body .hz-total-line{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  border:1px solid #0e5b94;border-radius:8px;
  background:#115d93;color:#fff;padding:11px 15px;
  font-size:17px;font-weight:700;break-inside:avoid;
  -webkit-print-color-adjust:exact;print-color-adjust:exact
}
.hz-document-body .hz-total-line b{font-weight:700}
.hz-document-body .hz-total-line .hz-money-number{font-weight:700}
.hz-document-body thead{display:table-header-group}
.hz-document-body tr{break-inside:avoid}
@media print{
  .hz-document{font-family:'Noto Kufi Arabic','DejaVu Sans','Noto Sans Arabic',sans-serif!important}
  .hz-document b,.hz-document strong,.hz-document th,.hz-document-title{font-weight:700!important}
}