@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap');
:root{--bg:#071018;--surface:#0c141f;--panel:#101b29;--panel2:#132032;--line:#233144;--text:#f8fafc;--muted:#9aa8bb;--maroon:#7f0f2a;--maroon2:#a31538;--green:#63c64a;--cyan:#28c7c5;--blue:#3b82f6;--orange:#f59e0b;--red:#ef4444;--shadow:0 24px 70px rgba(0,0,0,.34);--paper:#f4f4f2;--ink:#777;--invoice-line:#4b5563;--invoice-line-soft:#d1d5db;--scroll-track:#071018;--scroll-thumb:#334155;--scroll-thumb-hover:#64748b}
body.light{--bg:#f5f7fb;--surface:#ffffff;--panel:#ffffff;--panel2:#f7f9fc;--line:#e3e8ef;--text:#111827;--muted:#64748b;--shadow:0 18px 45px rgba(15,23,42,.09);--scroll-track:#f1f5f9;--scroll-thumb:#cbd5e1;--scroll-thumb-hover:#94a3b8}

*::-webkit-scrollbar{width:7px;height:7px}
*::-webkit-scrollbar-track{background:var(--scroll-track);border-radius:999px}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px;border:2px solid var(--scroll-track)}
*::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 15% 0%,rgba(127,15,42,.18),transparent 32%),linear-gradient(135deg,var(--bg),#091018 65%,var(--bg));font-family:Tajawal,Inter,Arial;color:var(--text);direction:rtl;min-height:100vh}body.en{font-family:Inter,Tajawal,Arial;direction:ltr}body.light{background:linear-gradient(135deg,#f8fafc,#eef2f7)}
.app{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh}.sidebar{background:rgba(7,11,16,.9);backdrop-filter:blur(18px);border-left:1px solid var(--line);padding:26px 22px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;overflow:auto}body.light .sidebar{background:rgba(255,255,255,.88)}body.en .sidebar{border-left:0;border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}.logo{width:76px;height:66px;border-radius:20px;background:#7f0f2a;display:grid;place-items:center;box-shadow:0 18px 40px rgba(127,15,42,.34);overflow:hidden;flex:0 0 auto}.logo img{width:100%;height:100%;object-fit:contain;padding:7px}.brand h1{font-size:34px;margin:0;font-weight:900;letter-spacing:-.5px}.brand p{margin:2px 0 0;color:var(--muted);font-size:13px}.side-caption{padding:14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:var(--muted);font-size:13px;line-height:1.7}
.nav{display:grid;gap:9px}.nav button{height:56px;border:0;border-radius:17px;background:transparent;color:var(--text);display:flex;align-items:center;gap:13px;padding:0 14px;font-weight:900;cursor:pointer;text-align:right;transition:.22s}.nav button span:last-child{flex:1}body.en .nav button{text-align:left}.nav button:hover,.nav button.active{background:linear-gradient(135deg,rgba(127,15,42,.95),rgba(127,15,42,.25));color:white;box-shadow:0 16px 36px rgba(127,15,42,.19);transform:translateY(-1px)}.ico{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:16px;transition:.22s;flex:0 0 auto}.nav button:hover .ico,.nav button.active .ico{background:rgba(255,255,255,.18);transform:scale(1.06)}
.main{padding:22px 28px 36px;min-width:0}.top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.search{height:48px;max-width:460px;flex:1;border:1px solid var(--line);border-radius:16px;background:var(--panel);display:flex;align-items:center;gap:12px;padding:0 16px;color:var(--muted);box-shadow:var(--shadow)}.search input{border:0;background:transparent;color:var(--text);outline:0;width:100%;font:inherit}.actions{display:flex;align-items:center;gap:10px}.icon-btn,.lang,.btn{height:44px;border:0;border-radius:14px;background:var(--panel);border:1px solid var(--line);color:var(--text);font-weight:900;padding:0 14px;cursor:pointer;transition:.2s}.icon-btn{width:44px;display:grid;place-items:center;padding:0;position:relative}.icon-btn.active{background:rgba(34,197,94,.12);color:var(--green)}.bell-dot{position:absolute;top:8px;left:8px;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.16)}body.en .bell-dot{left:auto;right:8px}.btn{background:linear-gradient(135deg,var(--maroon),var(--maroon2));color:white;border:0}.btn.secondary{background:#1f2937;color:white}.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}.btn.danger{background:linear-gradient(135deg,#991b1b,#ef4444)}.btn.small{height:34px;border-radius:10px;font-size:12px;padding:0 10px}
.page{display:none}.page.active{display:block}.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;margin-bottom:16px}.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}body.light .card{background:var(--panel)}.header,.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.header h2,.section-title h2{font-size:28px;margin:0}.muted{color:var(--muted)}.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(34,197,94,.12);color:var(--green);font-weight:900;font-size:12px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.kpi{min-height:132px;display:flex;align-items:center;gap:14px}.kpi-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:21px}.kpi h3{font-size:26px;margin:7px 0 2px}.kpi small{color:var(--muted);font-weight:800}.trend{font-size:12px;color:var(--green);font-weight:900}.chart{height:220px;border-radius:18px;background:linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/20% 100%,linear-gradient(to top,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/100% 25%,var(--panel2);position:relative;overflow:hidden}.chart svg{position:absolute;inset:0;width:100%;height:100%}.mini-list{display:grid;gap:12px}.mini-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035)}
.invoice-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.invoice-layout{display:grid;grid-template-columns:minmax(330px,420px) minmax(0,1fr);gap:18px;align-items:start;direction:rtl}.invoice-layout>.card{margin:0;position:sticky;top:22px}.invoice-preview-wrap{background:linear-gradient(180deg,var(--panel2),rgba(15,23,42,.72));border:1px solid var(--line);border-radius:22px;padding:28px;overflow:auto;direction:ltr;min-height:760px}.invoice-paper{width:700px;max-width:100%;margin:auto;background:linear-gradient(135deg,#ffffff,#f3f4f6);color:#4b5563;border-radius:8px;padding:22px 24px 30px;box-shadow:0 24px 60px rgba(0,0,0,.28);position:relative;direction:rtl;font-family:Tajawal,Arial}.invoice-paper.standard{min-height:880px}.invoice-paper.simple{width:720px;min-width:720px;min-height:820px;text-align:center;padding:26px 30px 34px}.invoice-title{border:2px solid var(--invoice-line);padding:8px 18px;font-size:25px;font-weight:900;color:#4b5563;display:inline-block;margin:8px auto 12px;background:rgba(255,255,255,.4)}.serial{display:flex;gap:10px;justify-content:center;margin:0 auto 16px}.serial div,.green-box{border:2px solid var(--invoice-line);padding:8px;background:rgba(255,255,255,.35);font-weight:800}.cyan-box{border:2px solid var(--invoice-line);padding:8px;background:rgba(255,255,255,.35);font-weight:800}.info-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.info-block{border:2px solid var(--invoice-line);padding:12px;text-align:right}.info-block h4{margin:0 0 10px;color:#4b5563}.invoice-table{width:100%;border-collapse:collapse;margin:12px 0;table-layout:fixed}.invoice-table th,.invoice-table td{border:1px solid var(--invoice-line-soft);padding:8px;text-align:center;color:#4b5563;font-size:13px;line-height:1.45;word-break:normal}.invoice-table th{font-weight:900}.simple .invoice-table{margin:18px 0 16px;table-layout:auto}.simple .invoice-table th,.simple .invoice-table td{font-size:15px;padding:13px 10px;white-space:normal}.simple .invoice-table th:first-child,.simple .invoice-table td:first-child{width:28%;font-weight:800}.simple .invoice-table th:nth-child(2),.simple .invoice-table td:nth-child(2){width:13%}.simple .invoice-table th:nth-child(3),.simple .invoice-table td:nth-child(3){width:17%}.simple .invoice-table th:nth-child(4),.simple .invoice-table td:nth-child(4){width:17%}.simple .invoice-table th:nth-child(5),.simple .invoice-table td:nth-child(5){width:25%}.simple .totals{margin-top:18px}.simple .total-line{font-size:17px;padding:11px 16px}.simple .green-box{font-size:16px}.simple .store{font-size:30px}.totals{display:grid;gap:8px}.total-line{border:2px solid var(--invoice-line);padding:7px 12px;display:flex;justify-content:space-between;font-weight:900}.total-line.cyan{border-color:var(--invoice-line)}.qr{width:95px;height:95px;margin:0 auto;border:3px solid var(--invoice-line);background:white;display:grid;grid-template-columns:repeat(9,1fr);gap:2px;padding:5px}.qr i{background:#4b5563}.qr-real{display:block;object-fit:contain;padding:2px;gap:0}.simple .qr{margin-top:22px;border-color:var(--invoice-line)}.simple .store{font-size:25px;font-weight:900;border:2px solid var(--invoice-line);display:inline-block;padding:7px 16px;margin:4px}.simple .date{width:150px;margin:20px 0 8px auto}.invoice-paper{border:1px solid #e5e7eb}.invoice-title,.serial div,.green-box,.cyan-box,.info-block,.total-line,.simple .store{box-shadow:none}.invoice-table th{background:#f3f4f6;color:#374151}.invoice-table td{background:rgba(255,255,255,.55)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form label{display:grid;gap:6px;color:var(--muted);font-size:13px;font-weight:800}.form input,.form select{height:44px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:13px;padding:0 12px;outline:0}.admin-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}.admin-grid>.card{width:100%;overflow-x:auto}.admin-grid>.card:first-child{max-width:100%;}.admin-grid table.app-table{min-width:760px}.admin-grid table.app-table th,.admin-grid table.app-table td{white-space:nowrap;vertical-align:middle}.admin-grid .row-actions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}.admin-grid .form{grid-template-columns:repeat(4,minmax(160px,1fr));align-items:end}.admin-grid .form input[type="hidden"]{display:none}.admin-grid .card h3{margin-top:0}.admin-grid .card:first-child .btn{margin-top:8px}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:14px}.price-card{border:1px solid var(--line);border-radius:20px;padding:18px;background:var(--panel2);position:relative;overflow:hidden}.price-card.featured:before{content:'Popular';position:absolute;top:14px;left:14px;background:var(--maroon);color:white;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:900}body.en .price-card.featured:before{left:auto;right:14px}.price-card h3{margin:0;font-size:22px}.price{font-size:30px;font-weight:900;margin:14px 0}.features{color:var(--muted);line-height:1.8;min-height:52px}table.app-table{width:100%;border-collapse:collapse}table.app-table th,table.app-table td{border-bottom:1px solid var(--line);padding:13px 10px;text-align:right}body.en table.app-table th,body.en table.app-table td{text-align:left}table.app-table th{color:var(--muted);font-size:12px;text-transform:uppercase}.row-actions{display:flex;gap:7px;flex-wrap:wrap}.status{padding:5px 10px;border-radius:999px;background:rgba(34,197,94,.14);color:#22c55e;font-weight:900;font-size:12px}.status.off{background:rgba(239,68,68,.13);color:#f87171}.settings-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:12px;background:var(--panel2)}.switch{width:58px;height:32px;border-radius:999px;border:0;background:#334155;position:relative;cursor:pointer}.switch:after{content:'';position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:white;transition:.2s}.switch.on{background:var(--green)}.switch.on:after{right:30px}body.en .switch:after{right:auto;left:4px}body.en .switch.on:after{left:30px;right:auto}.toast{display:none;position:fixed;bottom:22px;left:22px;background:linear-gradient(135deg,var(--maroon),var(--maroon2));color:white;padding:13px 17px;border-radius:16px;font-weight:900;z-index:99;box-shadow:var(--shadow)}body.en .toast{left:auto;right:22px}#printArea{display:none}
@media print{body *{visibility:hidden}#printArea,#printArea *{visibility:visible}#printArea{display:block;position:absolute;inset:0;background:white;padding:10px}.invoice-paper{box-shadow:none;max-width:none}}

@media(max-width:900px){.admin-grid .form{grid-template-columns:1fr 1fr}.admin-grid table.app-table{min-width:680px}}
@media(max-width:560px){.admin-grid .form{grid-template-columns:1fr}}
@media(max-width:1100px){.app{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.hero,.kpis,.invoice-layout,.admin-grid{grid-template-columns:1fr}.invoice-layout>.card{position:relative;top:auto}.invoice-preview-wrap{min-height:auto}.top{flex-wrap:wrap}.search{max-width:none}.form{grid-template-columns:1fr}}

/* stronger responsive/mobile fixes */
html,body{max-width:100%;overflow-x:hidden}.app,.main,.card,.page{min-width:0}.mobile-menu,.mobile-backdrop{display:none}.invoice-preview-wrap,.card:has(table.app-table){-webkit-overflow-scrolling:touch}.invoice-paper{width:100%;max-width:700px}.invoice-paper.simple{width:100%;min-width:0;max-width:720px}.invoice-table{min-width:620px}.actions{flex-wrap:wrap}.top{position:relative}
body.en .form label,body.en .form input,body.en .form select{text-align:left;direction:ltr}body:not(.en) .form label,body:not(.en) .form input,body:not(.en) .form select{text-align:right;direction:rtl}body.en .invoice-paper{direction:ltr;font-family:Inter,Tajawal,Arial}body.en .info-block{text-align:left}body.en .total-line{direction:ltr}body.en .serial{direction:ltr}
@media(max-width:1200px){.app{grid-template-columns:250px minmax(0,1fr)}.kpis{grid-template-columns:repeat(2,1fr)}.hero,.invoice-layout{grid-template-columns:1fr}}
@media(max-width:900px){.app{grid-template-columns:1fr}.mobile-menu{display:grid}.sidebar{position:fixed;top:0;bottom:0;width:min(86vw,320px);height:100vh;z-index:100;transform:translateX(110%);transition:.25s ease}.mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90}body.en .sidebar{transform:translateX(-110%)}body.sidebar-open .sidebar{transform:translateX(0)}body.sidebar-open .mobile-backdrop{display:block}.main{padding:16px}.top{align-items:stretch;flex-direction:column}.search{max-width:none;width:100%;box-shadow:none}.actions{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));width:100%}.admin-grid .form,.form{grid-template-columns:1fr 1fr}.admin-grid table.app-table,table.app-table{min-width:680px}}
@media(max-width:600px){.main{padding:12px}.kpis,.hero,.invoice-layout,.admin-grid,.form,.admin-grid .form{grid-template-columns:1fr}.header,.section-title{align-items:flex-start;flex-direction:column}.invoice-actions{display:grid;grid-template-columns:1fr}.invoice-actions .btn,.btn{width:100%}.actions{grid-template-columns:repeat(3,1fr)}.chart{height:170px}.brand h1{font-size:28px}.card{padding:15px}.invoice-preview-wrap{padding:12px}.invoice-table{min-width:560px}.settings-row{align-items:flex-start;gap:12px;flex-direction:column}.pricing-grid{grid-template-columns:1fr}}
@media(max-width:420px){.actions{grid-template-columns:repeat(2,1fr)}.header h2,.section-title h2{font-size:23px}.kpi h3{font-size:22px}.invoice-table th,.invoice-table td{font-size:12px;padding:6px}.invoice-paper{padding:14px}}


/* Split pages navigation + responsive fixes */
.nav a{height:56px;border:0;border-radius:17px;background:transparent;color:var(--text);display:flex;align-items:center;gap:13px;padding:0 14px;font-weight:900;cursor:pointer;text-align:right;transition:.22s;text-decoration:none}
body.en .nav a{text-align:left}.nav a span:last-child{flex:1}.nav a:hover,.nav a.active{background:linear-gradient(135deg,rgba(127,15,42,.95),rgba(127,15,42,.25));color:white;box-shadow:0 16px 36px rgba(127,15,42,.19);transform:translateY(-1px)}.nav a:hover .ico,.nav a.active .ico{background:rgba(255,255,255,.18);transform:scale(1.06)}
.mobile-menu{display:none}.sidebar-backdrop{display:none}.page{display:block}.card.page{display:block}.main{width:100%;overflow:hidden} .top{position:relative}.table-wrap{width:100%;overflow-x:auto}
@media(max-width:1100px){.app{display:block}.sidebar{position:fixed;top:0;bottom:0;right:0;width:min(86vw,320px);height:100vh;z-index:100;transform:translateX(110%);transition:.28s ease}.sidebar.open{transform:translateX(0)}body.en .sidebar{right:auto;left:0;transform:translateX(-110%)}body.en .sidebar.open{transform:translateX(0)}.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90}.sidebar-backdrop.show{display:block}.mobile-menu{display:grid}.main{padding:16px}.top{align-items:stretch}.actions{flex-wrap:wrap}.invoice-paper.simple{min-width:0;width:100%;}.invoice-preview-wrap{padding:14px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.top{flex-direction:column}.search{width:100%;flex:none}.actions{width:100%}.actions .lang,.actions .btn{flex:1}.kpis{grid-template-columns:1fr}.hero{grid-template-columns:1fr}.header,.section-title{align-items:flex-start;flex-direction:column}.invoice-actions{flex-direction:column}.invoice-actions .btn{width:100%}.form{grid-template-columns:1fr!important}.admin-grid .form{grid-template-columns:1fr!important}.invoice-layout{grid-template-columns:1fr}.invoice-paper{padding:16px}.invoice-table th,.invoice-table td{font-size:12px;padding:6px}.price{font-size:24px}.brand h1{font-size:28px}}
@media(max-width:420px){.main{padding:12px}.card{padding:14px;border-radius:18px}.logo{width:60px;height:54px}.nav a{height:50px}.top .icon-btn,.top .lang{height:42px}.invoice-preview-wrap{padding:8px}.invoice-title{font-size:20px}.info-row{grid-template-columns:1fr}}

/* Invoice system theme */
:root,body.light{
  --bg:#f4f7fb;
  --surface:#eef4f8;
  --panel:#ffffff;
  --panel2:#f7fafc;
  --line:#d8e3ea;
  --text:#152331;
  --muted:#647487;
  --maroon:#0f766e;
  --maroon2:#0d9488;
  --green:#16a34a;
  --cyan:#0891b2;
  --blue:#2563eb;
  --orange:#d97706;
  --red:#dc2626;
  --shadow:0 14px 34px rgba(21,35,49,.08);
  --paper:#ffffff;
  --ink:#243244;
  --invoice-line:#71808f;
  --invoice-line-soft:#dbe3ea;
  --scroll-track:#edf3f7;
  --scroll-thumb:#b6c4ce;
  --scroll-thumb-hover:#8798a6;
}
body{background:linear-gradient(180deg,#f8fbfd 0%,#eef4f8 100%);color:var(--text)}
body.light{background:linear-gradient(180deg,#f8fbfd 0%,#eef4f8 100%)}
.sidebar{background:linear-gradient(180deg,#0f2f3f,#113a4d);border-left:0;box-shadow:8px 0 26px rgba(15,47,63,.10)}
body.light .sidebar{background:linear-gradient(180deg,#0f2f3f,#113a4d)!important;border-left:0!important;box-shadow:8px 0 26px rgba(15,47,63,.10)!important}
/* Legacy templates still contain an old user card. The shared company topbar
   intentionally has no such card, so never allow it to flash before hydration. */
body.en .sidebar{border-right:0}
.brand{border-bottom:1px solid rgba(255,255,255,.14)}
.brand h1{color:#fff}.brand p,.side-caption{color:#c8d6df}
.logo{background:#ffffff;box-shadow:none;border:1px solid rgba(255,255,255,.24)}
.side-caption{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.13)}
.nav a,.nav button{color:#d9e5ec;border-radius:10px}
.nav a:hover,.nav a.active,.nav button:hover,.nav button.active{background:#ffffff;color:#0f2f3f;box-shadow:0 10px 22px rgba(0,0,0,.14);transform:none}
.ico{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.12);color:#d9e5ec;border-radius:10px}
.nav a:hover .ico,.nav a.active .ico,.nav button:hover .ico,.nav button.active .ico{background:#e6f6f4;color:#0f766e;transform:none}
.main{background:transparent}
.search,.icon-btn,.lang,.card,.price-card,.settings-row,.form input,.form select{background:var(--panel);border-color:var(--line);box-shadow:none}
.card{border-radius:12px;background:#fff}
.card.page{background:#fff}
.hero{grid-template-columns:1fr;gap:14px}
.hero>.card:first-child{border-top:4px solid #0d9488}
.header h2,.section-title h2{font-size:24px;color:#152331}
.muted{color:var(--muted)}
.btn{background:#0f766e;border:1px solid #0f766e;color:#fff;border-radius:10px;box-shadow:none}
.btn:hover{background:#0d9488;border-color:#0d9488}
.btn.secondary{background:#334155;border-color:#334155}
.btn.success{background:linear-gradient(135deg,#15803d,#22c55e);color:#fff;border-color:#16a34a}
.btn.ghost{background:#fff;color:#0f766e;border:1px solid #b9d8d4}
.btn.danger{background:#dc2626;border-color:#dc2626}
.icon-btn.active{background:#e8f7ef;color:#16a34a;border-color:#bde8ca}
.bell-dot{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.14)}



.kpis{gap:12px}
.kpi{min-height:112px;border-radius:12px}
.kpi-ico{border-radius:10px}
.trend{color:#0f766e}
.chart{background:linear-gradient(to right,rgba(15,118,110,.08) 1px,transparent 1px) 0 0/20% 100%,linear-gradient(to top,rgba(15,118,110,.08) 1px,transparent 1px) 0 0/100% 25%,#f8fbfd;border:1px solid var(--line)}
.mini-item{background:#f9fbfc;border-color:var(--line);border-radius:10px}
.pill{background:#e8f7ef;color:#15803d;border:1px solid #c9ecd4}
.invoice-layout>.card{border-top:4px solid #0891b2}
.invoice-preview-wrap{background:#eef4f8;border-color:#d8e3ea;border-radius:12px}
.invoice-paper{box-shadow:0 18px 40px rgba(21,35,49,.12);border-radius:4px;color:#243244}
.invoice-title,.serial div,.green-box,.cyan-box,.info-block,.total-line,.simple .store{border-color:#8798a6;background:#fff}
.invoice-table th{background:#eaf2f6;color:#152331}
.invoice-table td{background:#fff;color:#243244}
.total-line{background:#f8fbfd}
.form input,.form select{border-radius:10px;color:var(--text)}
.admin-grid>.card{border-radius:12px}
table.app-table{background:#fff}
table.app-table th{background:#f4f7fb;color:#526274;border-bottom:1px solid #d8e3ea}
table.app-table td{border-bottom:1px solid #edf2f6}
.row-actions .btn.small{border-radius:8px}
.status{background:#e8f7ef;color:#15803d}
.status.off{background:#fff1f2;color:#be123c}
.price-card{border-radius:12px}
.price-card.featured:before{background:#0891b2}
.toast{background:#0f766e;border-radius:10px;box-shadow:var(--shadow)}
.switch{background:#b8c5cf}.switch.on{background:#0f766e}
@media(max-width:1100px){.sidebar{box-shadow:-8px 0 26px rgba(15,47,63,.18)}}

/* Keep invoice preview content inside the paper frame */
.invoice-paper{overflow:hidden}
.invoice-paper .invoice-table{min-width:0;width:100%;max-width:100%;table-layout:fixed}
.invoice-paper .invoice-table th,.invoice-paper .invoice-table td{overflow-wrap:anywhere;word-break:normal}
.invoice-paper.standard .invoice-table th,.invoice-paper.standard .invoice-table td{font-size:12px;padding:7px 5px}
.invoice-paper.simple .invoice-table{min-width:0;table-layout:fixed}
.invoice-paper.simple .invoice-table th,.invoice-paper.simple .invoice-table td{font-size:13px;padding:10px 7px}
@media(max-width:700px){.invoice-paper .invoice-table th,.invoice-paper .invoice-table td{font-size:11px;padding:6px 4px}.total-line{gap:10px;font-size:13px}}

/* Invoice preview hard bounds */
.invoice-form-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
.invoice-preview-wrap{direction:rtl!important;overflow-x:hidden!important}
.invoice-items-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 10px}
.invoice-items-head h4{margin:0;color:var(--text);font-size:18px}
.invoice-items{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(248,251,253,.55)}
body.dark .invoice-items{background:rgba(255,255,255,.035)}
.invoice-item-row{display:grid;grid-template-columns:minmax(170px,1.35fr) minmax(78px,.55fr) minmax(118px,.8fr) 44px;gap:8px;align-items:end;padding:0;border:0;border-radius:0;background:transparent}
.invoice-item-row label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:900;min-width:0}
.invoice-item-row input{width:100%;height:42px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:11px;padding:0 11px;outline:0;min-width:0}
.invoice-item-remove{width:42px!important;height:42px!important;border-radius:11px!important;padding:0!important;margin:0!important;display:grid!important;place-items:center!important}
#preview{width:100%;max-width:100%;overflow:hidden}
.invoice-paper{max-width:100%!important;overflow:hidden!important}
.invoice-paper.standard{width:min(100%,700px)!important;padding:18px 18px 26px!important}
.invoice-paper .invoice-table{min-width:0!important;width:100%!important;max-width:100%!important;table-layout:fixed!important}
.invoice-paper .invoice-table th,.invoice-paper .invoice-table td{white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;font-size:11px!important;line-height:1.35!important;padding:6px 4px!important}
.invoice-paper.standard .invoice-table th:nth-child(1),.invoice-paper.standard .invoice-table td:nth-child(1){width:22%}
.invoice-paper.standard .invoice-table th:nth-child(2),.invoice-paper.standard .invoice-table td:nth-child(2){width:12%}
.invoice-paper.standard .invoice-table th:nth-child(3),.invoice-paper.standard .invoice-table td:nth-child(3){width:11%}
.invoice-paper.standard .invoice-table th:nth-child(4),.invoice-paper.standard .invoice-table td:nth-child(4){width:15%}
.invoice-paper.standard .invoice-table th:nth-child(5),.invoice-paper.standard .invoice-table td:nth-child(5){width:13%}
.invoice-paper.standard .invoice-table th:nth-child(6),.invoice-paper.standard .invoice-table td:nth-child(6){width:12%}
.invoice-paper.standard .invoice-table th:nth-child(7),.invoice-paper.standard .invoice-table td:nth-child(7){width:15%}
@media(max-width:600px){.invoice-form-actions{display:grid;grid-template-columns:1fr}.invoice-form-actions .btn{width:100%}.invoice-paper.standard{padding:12px 10px 20px!important}.invoice-paper .invoice-table th,.invoice-paper .invoice-table td{font-size:10px!important;padding:5px 3px!important}}

/* Working dark/light toggle */
body.dark{
  --bg:#071018;
  --surface:#0c141f;
  --panel:#101b29;
  --panel2:#132032;
  --line:#233144;
  --text:#f8fafc;
  --muted:#9aa8bb;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --scroll-track:#071018;
  --scroll-thumb:#334155;
  --scroll-thumb-hover:#64748b;
}
body.dark{background:radial-gradient(circle at 15% 0%,rgba(13,148,136,.18),transparent 32%),linear-gradient(135deg,#071018,#0b1622 65%,#071018)!important;color:var(--text)}
body.dark .sidebar{background:linear-gradient(180deg,#071018,#102438)!important;box-shadow:8px 0 26px rgba(0,0,0,.28)}
body.dark .brand{border-bottom:1px solid rgba(255,255,255,.14)!important}
body.dark .brand h1{color:#fff!important}
body.dark .brand p,body.dark .side-caption{color:#c8d6df!important}
body.dark .side-caption{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.13)!important}
body.dark .nav a,body.dark .nav button{color:#d9e5ec!important}
body.dark .nav a:hover,body.dark .nav a.active,body.dark .nav button:hover,body.dark .nav button.active{background:#ffffff!important;color:#0f2f3f!important;box-shadow:0 10px 22px rgba(0,0,0,.14)!important}
body.dark .ico{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.12)!important;color:#d9e5ec!important}
body.dark .card,body.dark .card.page,body.dark .search,body.dark .icon-btn,body.dark .lang,body.dark .price-card,body.dark .settings-row,body.dark .form input,body.dark .form select{background:var(--panel)!important;border-color:var(--line)!important;color:var(--text)!important}
body.dark .card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important}
body.dark .header h2,body.dark .section-title h2{color:var(--text)!important}
body.dark .chart,body.dark .mini-item,body.dark .total-line{background:var(--panel2)!important}
body.dark table.app-table,body.dark table.app-table td{background:var(--panel)!important;color:var(--text)!important}
body.dark table.app-table th{background:var(--panel2)!important;color:var(--muted)!important}
body.dark .btn.ghost{background:transparent!important;color:#5eead4!important;border-color:#1f5f66!important}

body.light{background:linear-gradient(180deg,#f8fbfd 0%,#eef4f8 100%)!important;color:var(--text)!important}
body.light .sidebar{background:linear-gradient(180deg,#0f2f3f,#113a4d)!important;border-left:0!important;box-shadow:8px 0 26px rgba(15,47,63,.10)!important}
body.light.en .sidebar{border-left:0!important;border-right:0!important}
body.light .brand{border-bottom:1px solid rgba(255,255,255,.14)!important}
body.light .brand h1{color:#fff!important}
body.light .brand p,body.light .side-caption{color:#c8d6df!important}
body.light .side-caption{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.13)!important}
body.light .nav a,body.light .nav button{color:#d9e5ec!important}
body.light .nav a:hover,body.light .nav a.active,body.light .nav button:hover,body.light .nav button.active{background:#ffffff!important;color:#0f2f3f!important;box-shadow:0 10px 22px rgba(0,0,0,.14)!important}
body.light .ico{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.12)!important;color:#d9e5ec!important}
body.light .card,body.light .card.page,body.light .search,body.light .icon-btn,body.light .lang,body.light .price-card,body.light .settings-row,body.light .form input,body.light .form select{background:var(--panel)!important;border-color:var(--line)!important;color:var(--text)!important}
body.light .top{color:#172033!important}
body.light .header h2,body.light .section-title h2,body.light .card h3{color:#0f1f33!important}
body.light .muted,body.light .search,body.light .search input::placeholder{color:#65758b!important}
body.light .search i,body.light .icon-btn i{color:#12243a!important}
body.light .lang{color:#142236!important;font-weight:900!important}
body.light .icon-btn:hover,body.light .lang:hover{background:#eef7f7!important;border-color:#b9dede!important;color:#0f766e!important}
body.light .icon-btn.active{background:#e8f7ef!important;color:#0f8a4b!important;border-color:#bde8ca!important}
body.light 
body.light 
body.light 
body.light .pill{background:#e7f7ec!important;color:#087c45!important;border:1px solid #bde8ca!important}
body.light .chart{background:linear-gradient(to right,rgba(15,118,110,.08) 1px,transparent 1px) 0 0/20% 100%,linear-gradient(to top,rgba(15,118,110,.08) 1px,transparent 1px) 0 0/100% 25%,#f8fbfd!important;border-color:#d5e4ec!important}
body.light .chart svg path:first-child{stroke:#0f766e!important}
body.light .chart svg path:nth-child(2){fill:rgba(15,118,110,.14)!important}
body.dark .chart svg path:first-child{stroke:#28c7c5!important}
body.dark .chart svg path:nth-child(2){fill:rgba(40,199,197,.18)!important}

/* Full-screen mobile navigation */
@media(max-width:700px){
  body.sidebar-open{overflow:hidden}
  .sidebar{
    position:fixed!important;
    inset:0 0 0 auto!important;
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    padding:18px 18px 28px!important;
    gap:12px!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:translateX(105%)!important;
  }
  .sidebar.open{transform:translateX(0)!important}
  body.en .sidebar{
    inset:0 auto 0 0!important;
    transform:translateX(-105%)!important;
  }
  body.en .sidebar.open{transform:translateX(0)!important}
  .sidebar-backdrop.show{display:none!important}
  .brand{gap:10px!important;padding-bottom:12px!important}
  .logo{width:56px!important;height:50px!important;border-radius:14px!important}
  .brand h1{font-size:24px!important;letter-spacing:0!important}
  .brand p{font-size:12px!important}
  .side-caption{padding:11px 12px!important;border-radius:12px!important;font-size:12px!important;line-height:1.55!important}
  .nav{display:grid!important;gap:8px!important}
  .nav a{
    height:54px!important;
    border-radius:12px!important;
    padding:0 12px!important;
    font-size:17px!important;
    line-height:1!important;
  }
  .nav a .ico{
    width:38px!important;
    height:38px!important;
    border-radius:10px!important;
    flex:0 0 38px!important;
  }
}

/* Letter mark instead of image logo */
.logo img{display:none!important}
.logo:before{content:'';display:block;width:100%;height:100%}

/* Compact full mobile menu */
@media(max-width:700px){
  .sidebar{
    display:flex!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    padding:14px 16px 18px!important;
    gap:8px!important;
  }
  .brand{padding-bottom:8px!important}
  .side-caption{display:none!important}
  .nav{gap:5px!important}
  .nav a{
    height:46px!important;
    min-height:46px!important;
    font-size:16px!important;
    padding:0 10px!important;
  }
  .nav a .ico{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
  }
  .logo{width:48px!important;height:44px!important}
  .logo:before{content:''}
}

/* Mobile sidebar must cover the full viewport */
@media(max-width:700px){
  body.sidebar-open,
  body.sidebar-open .app{
    background:linear-gradient(180deg,#0f2f3f,#113a4d)!important;
  }
  .sidebar,
  body.light .sidebar,
  body.dark .sidebar{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    background:linear-gradient(180deg,#0f2f3f,#113a4d)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body.en .sidebar{
    left:0!important;
    right:auto!important;
  }
  .sidebar.open:after{
    content:'';
    display:block;
    min-height:18px;
    flex:1 0 auto;
  }
}

/* Keep the sidebar column filled on every screen size */
:root{--sidebar-width:300px}
@media(min-width:1101px) and (max-width:1200px){:root{--sidebar-width:250px}}
@media(min-width:1101px){
  .app{
    position:relative!important;
    background:linear-gradient(to left,#0f2f3f 0 var(--sidebar-width),transparent var(--sidebar-width) 100%)!important;
  }
  body.en .app{
    background:linear-gradient(to right,#0f2f3f 0 var(--sidebar-width),transparent var(--sidebar-width) 100%)!important;
  }
  .sidebar,
  body.light .sidebar,
  body.dark .sidebar{
    min-height:100vh!important;
    height:auto!important;
    align-self:stretch!important;
    background:linear-gradient(180deg,#0f2f3f,#113a4d)!important;
  }
}
@media(max-width:1100px){
  body.sidebar-open,
  body.sidebar-open .app{
    background:linear-gradient(180deg,#0f2f3f,#113a4d)!important;
  }
  .sidebar,
  body.light .sidebar,
  body.dark .sidebar{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:min(86vw,320px)!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    background:linear-gradient(180deg,#0f2f3f,#113a4d)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body.en .sidebar{
    left:0!important;
    right:auto!important;
  }
  .sidebar.open:after{
    content:'';
    display:block;
    min-height:18px;
    flex:1 0 auto;
  }
}
@media(max-width:700px){
  .sidebar,
  body.light .sidebar,
  body.dark .sidebar{
    width:100vw!important;
  }
}

/* Professional invoice management views */
.filters-bar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 14px;
}
.filters-bar .search{
  width:min(100%,380px);
  max-width:380px;
  margin:0;
  box-shadow:none;
}
.filters-bar select{
  height:48px;
  min-width:160px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:14px;
  padding:0 12px;
  font:inherit;
  font-weight:800;
}
.invoice-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) 330px;
  gap:16px;
  align-items:start;
}
.invoice-detail-grid>.card{
  min-width:0;
}
.invoice-detail-grid .invoice-paper{
  max-width:100%;
  margin:0 auto;
}
.status-stack{
  display:grid;
  gap:10px;
}
.status.draft{
  background:rgba(15,118,110,.12);
  color:#0f766e;
}
.status.warning{background:#fff7ed;color:#c2410c}
body.dark .status.warning{background:rgba(245,158,11,.14);color:#fbbf24}
body.dark .status.draft{
  background:rgba(40,199,197,.16);
  color:#99f6e4;
}
.settings-company{
  margin:0 0 16px;
}
.settings-company .form{
  margin:10px 0 14px;
}
.payment-gateway-settings{margin:0 0 16px}.gateway-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.gateway-heading h3{margin:0 0 6px}.gateway-notice{display:flex;gap:12px;align-items:flex-start;margin:16px 0;padding:14px;border:1px solid rgba(15,118,110,.24);border-radius:14px;background:rgba(15,118,110,.07);color:var(--text)}.gateway-notice>i{color:var(--green);font-size:20px;margin-top:2px}.gateway-notice div{display:grid;gap:4px}.gateway-notice small,.field-hint{color:var(--muted);font-weight:600}.gateway-form{margin:14px 0}.gateway-form .gateway-wide{grid-column:1/-1}.copy-field{display:flex;gap:8px}.copy-field input{flex:1}.copy-field .btn{white-space:nowrap}.gateway-enable-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0 14px;padding:14px;border:1px solid var(--line);border-radius:14px}.gateway-enable-row label{display:flex;align-items:center;gap:8px}.gateway-enable-row input{width:18px;height:18px;accent-color:var(--green)}.gateway-actions{display:flex;gap:10px;flex-wrap:wrap}.gateway-test-result{margin:10px 0;padding:11px 14px;border-radius:12px;font-weight:800}.gateway-test-result.success{background:rgba(34,197,94,.12);color:#15803d}.gateway-test-result.failed{background:rgba(239,68,68,.12);color:#dc2626}
.invoice-payment-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}.invoice-payment-overview>span{display:grid;gap:5px;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.invoice-payment-overview small{color:var(--muted);font-weight:700}.invoice-payment-overview b{font-size:16px}.invoice-payment-overview .has-credit{border-color:rgba(14,116,144,.35);background:rgba(14,165,233,.08)}.invoice-payment-overview .has-credit b{color:#0284c7}.payment-pending-note{padding:10px 12px;border-radius:11px;background:rgba(245,158,11,.12);color:#a16207;font-weight:800;font-size:13px}.refund-payment-action{background:#b45309!important}.payment-receipt-list{display:grid;gap:10px}.payment-receipt-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.payment-receipt-item.is-cancelled{opacity:.6}.payment-receipt-main{display:grid;gap:4px}.payment-receipt-main p{margin:2px 0;font-size:12px;color:var(--muted)}.receipt-kind{width:max-content;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:900;background:rgba(16,185,129,.12);color:#047857}.receipt-kind.refund{background:rgba(245,158,11,.14);color:#b45309}.payment-receipt-side{display:grid;justify-items:end;gap:7px}.payment-receipt-side strong{color:#047857}.payment-receipt-side .refund-amount{color:#b45309}.payment-receipt-side .row-actions{justify-content:flex-end}.payment-receipt-dialog{border:0;padding:0;background:transparent;width:min(760px,calc(100% - 24px));max-width:none}.payment-receipt-dialog::backdrop{background:rgba(15,23,42,.72);backdrop-filter:blur(3px)}.payment-receipt-panel{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.28)}.payment-receipt-panel>header{display:flex;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}.payment-receipt-panel header h3{margin:4px 0}.payment-receipt-panel header p{margin:0;color:var(--muted)}.payment-receipt-body{padding:20px 22px;max-height:70vh;overflow:auto}.payment-entry-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.payment-entry-summary span{display:grid;gap:5px;padding:11px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700}.payment-entry-summary b{color:var(--text);font-size:15px}.payment-entry-form textarea{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:13px;padding:10px;outline:0;resize:vertical}.payment-entry-form .payment-entry-wide{grid-column:1/-1}.payment-entry-policy{display:flex;gap:8px;padding:12px 14px;margin-top:14px;border-radius:12px;background:rgba(15,118,110,.08);color:var(--text);font-weight:700}.payment-receipt-panel>footer{display:flex;justify-content:flex-end;gap:10px;padding:15px 22px;border-top:1px solid var(--line)}.receipt-print-amount{display:flex;justify-content:space-between;align-items:center;margin:24px 0;padding:20px;border:2px solid #0f766e;border-radius:12px}.receipt-print-amount strong{font-size:28px;color:#0f766e}.receipt-print-meta{line-height:1.9}
.payment-link-share-card{display:grid;grid-template-columns:1fr 108px;gap:14px;align-items:center;margin:16px 0;padding:14px;border:1px solid rgba(15,118,110,.32);border-radius:16px;background:rgba(15,118,110,.07)}.payment-link-share-card img{width:108px;height:108px;padding:5px;background:#fff;border-radius:10px}.payment-link-share-main{display:grid;gap:8px;min-width:0}.payment-link-share-main>b{font-size:20px;color:#0f766e}.payment-link-share-main small{color:var(--muted);font-weight:700}.payment-link-url{direction:ltr;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px;border-radius:8px;background:var(--panel);font-size:11px}.invoice-payment-link-print{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:18px auto;padding:14px;max-width:760px;border:1.5px solid #0f766e;border-radius:12px;direction:rtl}.invoice-payment-link-print p{margin:7px 0}.invoice-payment-link-print small{direction:ltr;display:block;word-break:break-all;text-align:left}.invoice-payment-link-print img{width:105px;height:105px}.invoice-payment-link-print strong{color:#0f766e}
@media(max-width:900px){
  .invoice-detail-grid{
    grid-template-columns:1fr;
  }
  .filters-bar{
    display:grid;
  }
  .filters-bar .search,
  .filters-bar select{
    width:100%;
    max-width:none;
  }
}
@media(max-width:600px){.gateway-heading,.gateway-enable-row{align-items:flex-start;flex-direction:column}.gateway-form .gateway-wide{grid-column:auto}.copy-field{flex-direction:column}.gateway-actions .btn{width:100%}}
@media(max-width:600px){.invoice-payment-overview,.payment-entry-summary{grid-template-columns:1fr}.payment-receipt-item{flex-direction:column}.payment-receipt-side{justify-items:start;width:100%}.payment-receipt-side .row-actions{justify-content:flex-start}.payment-entry-form .payment-entry-wide{grid-column:auto}.payment-receipt-panel>footer{display:grid;grid-template-columns:1fr}.payment-receipt-panel>footer .btn{width:100%}}
@media print{
  .invoice-detail-grid>.card:nth-child(2){
    display:none!important;
  }
}

/* Polished mobile workspace */
@media(max-width:700px){
  .main{
    padding:10px 12px 24px!important;
    overflow:visible!important;
  }
  .top{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:center!important;
    margin-bottom:12px!important;
  }
  .mobile-menu{
    display:grid!important;
    width:44px!important;
    height:44px!important;
    grid-column:1!important;
    grid-row:1!important;
    border-radius:14px!important;
  }
  .top>.search{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    height:44px!important;
    min-width:0!important;
    padding:0 12px!important;
    border-radius:14px!important;
    box-shadow:none!important;
  }
  .top>.search small{
    display:none!important;
  }
  .top>.actions{
    grid-column:1 / -1!important;
    grid-row:2!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:44px 44px minmax(92px,1fr) minmax(0,1.35fr)!important;
    gap:8px!important;
    align-items:center!important;
  }
  .top .icon-btn,
  .top .lang{
    width:100%!important;
    height:42px!important;
    border-radius:13px!important;
    padding:0 10px!important;
  }
  .top .lang{
    font-size:13px!important;
  }
  
  
  
  
  
  
  
  .card{
    padding:14px!important;
    border-radius:14px!important;
  }
  .section-title,
  .header{
    gap:8px!important;
    margin-bottom:12px!important;
  }
  .section-title h2,
  .header h2{
    font-size:22px!important;
    line-height:1.25!important;
  }
  .section-title .muted,
  .header .muted{
    font-size:13px!important;
    line-height:1.55!important;
  }
  .admin-grid{
    gap:12px!important;
  }
  .form{
    gap:10px!important;
  }
  .form input,
  .form select{
    height:42px!important;
  }
  .table-wrap{
    margin-inline:-4px!important;
  }
}

@media(max-width:420px){
  .top>.actions{
    grid-template-columns:42px 42px 1fr!important;
  }
  
  .top .lang{
    font-size:12px!important;
  }
}

/* Responsive device polish */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  overscroll-behavior-x:none;
}

.top,
.actions,
.filters-bar,
.invoice-actions,
.row-actions{
  min-width:0;
}

.card,
.settings-row,
.price-card,
.mini-item,
.form input,
.form select,
.search,


.table-wrap,
.admin-grid>.card{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table-wrap table.app-table,
.admin-grid table.app-table{
  min-width:720px;
}

.sidebar{
  scrollbar-gutter:stable;
}

@media(min-width:1181px){
  .app{
    grid-template-columns:300px minmax(0,1fr)!important;
  }
  .main{
    padding:24px 32px 40px!important;
  }
  .top{
    flex-wrap:nowrap!important;
  }
  .mobile-menu{
    display:none!important;
  }
}

@media(min-width:768px) and (max-width:1180px){
  .app{
    display:block!important;
  }
  .main{
    width:100%!important;
    padding:18px 20px 34px!important;
    overflow:visible!important;
  }
  .top{
    display:grid!important;
    grid-template-columns:52px minmax(260px,1fr) auto!important;
    gap:12px!important;
    align-items:center!important;
  }
  .mobile-menu{
    display:grid!important;
    width:48px!important;
    height:48px!important;
  }
  .top>.search{
    width:100%!important;
    max-width:none!important;
  }
  .top>.actions{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
    width:auto!important;
  }
  
  .sidebar,
  body.light .sidebar,
  body.dark .sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    right:0!important;
    left:auto!important;
    width:min(360px,82vw)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding:24px 20px!important;
    transform:translateX(105%)!important;
    z-index:100!important;
    overflow-y:auto!important;
    background:linear-gradient(180deg,#0f2f3f,#113a4d)!important;
  }
  body.en .sidebar{
    right:auto!important;
    left:0!important;
    transform:translateX(-105%)!important;
  }
  .sidebar.open,
  body.en .sidebar.open{
    transform:translateX(0)!important;
  }
  .sidebar-backdrop.show{
    display:block!important;
  }
  .hero,
  .invoice-layout,
  .invoice-detail-grid{
    grid-template-columns:1fr!important;
  }
  .kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .form{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .admin-grid .form{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .invoice-layout>.card{
    position:relative!important;
    top:auto!important;
  }
  .invoice-preview-wrap{
    min-height:auto!important;
  }
}

@media(max-width:767px){
  body.sidebar-open{
    overflow:hidden!important;
  }
  .app{
    display:block!important;
    min-height:100dvh!important;
    background:var(--bg)!important;
  }
  body.light .app{
    background:#eef5f8!important;
  }
  .main{
    width:100%!important;
    padding:12px 12px 28px!important;
    overflow:visible!important;
  }
  .top{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:center!important;
    margin-bottom:14px!important;
  }
  .mobile-menu{
    display:grid!important;
    grid-column:1!important;
    grid-row:1!important;
    width:46px!important;
    height:46px!important;
    border-radius:14px!important;
  }
  .top>.search{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:46px!important;
    padding:0 12px!important;
    border-radius:14px!important;
    box-shadow:none!important;
  }
  .top>.search small{
    display:none!important;
  }
  .top>.actions{
    grid-column:1 / -1!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:46px 46px minmax(96px,1fr) minmax(0,1.45fr)!important;
    gap:8px!important;
    align-items:center!important;
    width:100%!important;
  }
  .top .icon-btn,
  .top .lang{
    width:100%!important;
    height:44px!important;
    border-radius:13px!important;
    padding:0 8px!important;
  }
  .top .lang{
    font-size:13px!important;
    white-space:nowrap!important;
  }
  
  
  
  
  
  .sidebar,
  body.light .sidebar,
  body.dark .sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    right:0!important;
    left:auto!important;
    width:min(88vw,340px)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding:18px 16px 24px!important;
    gap:10px!important;
    z-index:100!important;
    transform:translateX(105%)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:linear-gradient(180deg,#0f2f3f,#113a4d)!important;
    box-shadow:-18px 0 36px rgba(7,16,24,.24)!important;
  }
  body.en .sidebar{
    right:auto!important;
    left:0!important;
    transform:translateX(-105%)!important;
    box-shadow:18px 0 36px rgba(7,16,24,.24)!important;
  }
  .sidebar.open,
  body.en .sidebar.open{
    transform:translateX(0)!important;
  }
  .sidebar-backdrop.show{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    background:rgba(2,8,15,.48)!important;
    z-index:90!important;
  }
  .brand{
    padding-bottom:10px!important;
  }
  .brand h1{
    font-size:26px!important;
    line-height:1.05!important;
  }
  .brand p{
    font-size:13px!important;
    line-height:1.35!important;
  }
  .side-caption{
    display:block!important;
    padding:12px!important;
    font-size:13px!important;
    line-height:1.55!important;
    border-radius:14px!important;
  }
  .nav{
    display:grid!important;
    gap:7px!important;
  }
  .nav a{
    height:50px!important;
    min-height:50px!important;
    padding:0 11px!important;
    border-radius:13px!important;
    font-size:16px!important;
  }
  .nav a .ico{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
    border-radius:11px!important;
  }
  .card{
    padding:15px!important;
    border-radius:14px!important;
  }
  .header,
  .section-title{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:8px!important;
  }
  .header h2,
  .section-title h2{
    font-size:23px!important;
    line-height:1.25!important;
  }
  .muted,
  .header .muted,
  .section-title .muted{
    font-size:14px!important;
    line-height:1.55!important;
  }
  .hero,
  .kpis,
  .invoice-layout,
  .invoice-detail-grid,
  .admin-grid,
  .pricing-grid,
  .form,
  .admin-grid .form{
    grid-template-columns:1fr!important;
  }
  .kpi{
    min-height:112px!important;
  }
  .chart{
    height:180px!important;
  }
  .filters-bar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .filters-bar .search,
  .filters-bar select{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  .invoice-actions,
  .invoice-form-actions,
  .row-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .btn,
  .invoice-actions .btn,
  .invoice-form-actions .btn{
    width:100%!important;
    justify-content:center!important;
  }
  .settings-row{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
    padding:14px!important;
  }
  .invoice-layout>.card{
    position:relative!important;
    top:auto!important;
  }
  .invoice-preview-wrap{
    padding:10px!important;
    min-height:auto!important;
    overflow:auto!important;
  }
  .invoice-paper{
    width:100%!important;
    max-width:100%!important;
    padding:14px 10px 18px!important;
  }
  .invoice-paper.simple,
  .invoice-paper.standard{
    width:100%!important;
    min-width:0!important;
  }
  .invoice-paper .info-row{
    grid-template-columns:1fr!important;
  }
  .invoice-items-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .invoice-items-head .btn{
    width:100%!important;
  }
  .invoice-item-row{
    grid-template-columns:1fr!important;
  }
  .invoice-item-remove{
    width:100%!important;
  }
  .invoice-title{
    font-size:20px!important;
  }
  .serial{
    flex-wrap:wrap!important;
  }
  .table-wrap{
    margin-inline:-2px!important;
  }
  .table-wrap table.app-table,
  .admin-grid table.app-table{
    min-width:680px!important;
  }
  table.app-table th,
  table.app-table td{
    padding:11px 9px!important;
  }
}

/* Keep invoice item delete buttons inside the item box */
.invoice-item-row{
  position:relative!important;
  grid-template-columns:minmax(0,1.35fr) minmax(72px,.45fr) minmax(0,.8fr)!important;
  padding-left:52px!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.invoice-item-remove{
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:42px!important;
}
body.en .invoice-item-row{
  padding-left:0!important;
  padding-right:52px!important;
}
body.en .invoice-item-remove{
  left:auto!important;
  right:0!important;
}
@media(max-width:767px){
  .invoice-item-row{
    grid-template-columns:1fr!important;
    padding-left:0!important;
    padding-bottom:50px!important;
  }
  body.en .invoice-item-row{
    padding-right:0!important;
  }
  .invoice-item-remove,
  body.en .invoice-item-remove{
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:none!important;
  }
}

/* Simplified invoice must stay portrait */
.invoice-paper.simple{
  width:min(100%,460px)!important;
  max-width:460px!important;
  min-width:0!important;
  min-height:900px!important;
  padding:28px 22px 36px!important;
}
.invoice-paper.simple .store{
  max-width:100%!important;
  font-size:24px!important;
  line-height:1.25!important;
}
.invoice-paper.simple .green-box{
  max-width:100%!important;
  box-sizing:border-box!important;
}
.invoice-paper.simple .date{
  width:auto!important;
  margin:14px auto 8px!important;
}
.invoice-paper.simple .invoice-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}
.invoice-paper.simple .invoice-table th,
.invoice-paper.simple .invoice-table td{
  font-size:11px!important;
  padding:8px 4px!important;
  line-height:1.35!important;
  overflow-wrap:anywhere!important;
}
.invoice-paper.simple .total-line{
  font-size:14px!important;
  padding:9px 10px!important;
  gap:8px!important;
}
@media print{
  @page{size:A4 portrait;margin:10mm}
  .invoice-paper.simple{
    width:80mm!important;
    max-width:80mm!important;
    min-height:auto!important;
    margin:0 auto!important;
  }
}

/* Print the simplified invoice as a narrow portrait receipt */
@media print{
  html,
  body{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:#fff!important;
  }
  body>*:not(#printArea){
    display:none!important;
  }
  #printArea{
    display:block!important;
    position:static!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
  }
  #printArea .invoice-paper{
    box-shadow:none!important;
    page-break-inside:avoid!important;
    break-inside:avoid!important;
  }
  #printArea .invoice-paper.simple{
    width:80mm!important;
    max-width:80mm!important;
    min-width:0!important;
    min-height:auto!important;
    margin:0 auto!important;
    padding:8mm 6mm 10mm!important;
    border:1px solid #e5e7eb!important;
  }
  #printArea .invoice-paper.simple .invoice-title{
    font-size:16px!important;
    padding:5px 8px!important;
    margin:4px auto 8px!important;
  }
  #printArea .invoice-paper.simple .store{
    font-size:18px!important;
    padding:5px 8px!important;
  }
  #printArea .invoice-paper.simple .green-box{
    font-size:11px!important;
    padding:5px 6px!important;
  }
  #printArea .invoice-paper.simple .invoice-table th,
  #printArea .invoice-paper.simple .invoice-table td{
    font-size:8.5px!important;
    padding:4px 2px!important;
  }
  #printArea .invoice-paper.simple .total-line{
    font-size:10.5px!important;
    padding:5px 6px!important;
  }
  #printArea .invoice-paper.simple .qr{
    width:58px!important;
    height:58px!important;
    margin-top:10px!important;
  }
}

/* Global search results */
.top .search{
  position:relative;
  z-index:30;
}
.global-search-results{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  max-height:360px;
  overflow:auto;
  padding:8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-shadow:0 18px 46px rgba(15,35,49,.18);
}
.global-search-results.show{
  display:grid;
  gap:6px;
}
.global-search-item{
  display:grid;
  gap:3px;
  width:100%;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:var(--text);
  text-align:inherit;
  padding:10px 11px;
  cursor:pointer;
}
.global-search-item:hover{
  border-color:var(--line);
  background:var(--panel2);
}
.global-search-item b{
  font-size:14px;
}
.global-search-item span,
.global-search-empty{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.global-search-empty{
  padding:12px;
}

/* Notification dropdown */
.notification-panel{
  position:fixed;
  top:86px;
  inset-inline-end:34px;
  width:min(380px,calc(100vw - 28px));
  max-height:520px;
  overflow:hidden;
  display:none;
  z-index:1200;
  background:var(--panel,#fff)!important;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(9,31,44,.22);
}
body.dark .notification-panel{background:#132032!important;border-color:#334155;box-shadow:0 24px 70px rgba(0,0,0,.42)}
.notification-panel.show{
  display:block;
}
.notification-head,
.notification-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.notification-foot{
  border-top:1px solid var(--line);
  border-bottom:0;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.notification-list{
  max-height:390px;
  overflow:auto;
  padding:8px;
}
.notification-item{
  width:100%;
  display:grid;
  gap:5px;
  text-align:inherit;
  padding:12px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.notification-item:hover{
  border-color:var(--line);
  background:var(--panel2);
}
.notification-item.unread{
  background:rgba(20,132,116,.10);
  border-color:rgba(20,132,116,.24);
}
.notification-item span{
  font-weight:900;
}
.notification-item small,
.notification-item em,
.notification-empty{
  color:var(--muted);
  font-size:12px;
  font-style:normal;
  font-weight:800;
}
.notification-empty{
  padding:18px;
  text-align:center;
}
@media(max-width:767px){
  .global-search-results{
    position:fixed;
    top:68px;
    left:12px;
    right:12px;
    max-height:55vh;
  }
  .notification-panel{
    top:72px;
    left:12px;
    right:12px;
    inset-inline-end:auto;
    width:auto;
    max-height:68vh;
  }
}

@media(max-width:430px){
  .main{
    padding:10px 10px 24px!important;
  }
  .top{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:8px!important;
  }
  .top>.actions{
    grid-template-columns:44px 44px minmax(84px,1fr)!important;
  }
  
  .brand h1{
    font-size:24px!important;
  }
  .card{
    padding:13px!important;
  }
  .header h2,
  .section-title h2{
    font-size:21px!important;
  }
  .form input,
  .form select,
  .search{
    height:42px!important;
  }
  .table-wrap table.app-table,
  .admin-grid table.app-table{
    min-width:640px!important;
  }
}

/* Mobile header and drawer hotfix */
@media(max-width:767px){
  .top>.actions{
    grid-template-columns:46px 46px minmax(0,1fr)!important;
  }
  
  
  
  
  .sidebar,
  body.light .sidebar,
  body.dark .sidebar{
    display:flex!important;
    visibility:hidden!important;
    pointer-events:none!important;
    opacity:0!important;
    transform:translateX(105%)!important;
    z-index:1000!important;
  }
  body.en .sidebar{
    transform:translateX(-105%)!important;
  }
  .sidebar.open,
  body.light .sidebar.open,
  body.dark .sidebar.open,
  body.en .sidebar.open{
    visibility:visible!important;
    pointer-events:auto!important;
    opacity:1!important;
    transform:translateX(0)!important;
  }
  .sidebar-backdrop.show{
    display:block!important;
    z-index:990!important;
  }
  .mobile-menu{
    position:relative!important;
    z-index:20!important;
    pointer-events:auto!important;
  }
}



/* Invoices professional list */
.invoice-filters{
  display:grid;
  grid-template-columns:minmax(260px,1.4fr) repeat(4,minmax(140px,1fr));
  gap:12px;
  margin:18px 0;
}
.invoice-filters .invoice-search{
  min-width:0;
}
.invoice-filters input,
.invoice-filters select{
  width:100%;
  min-height:48px;
}
.invoice-empty{
  place-items:center;
  gap:12px;
  padding:54px 18px;
  border:1px dashed var(--line);
  border-radius:18px;
  background:var(--panel2);
  text-align:center;
}
.empty-icon{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:rgba(20,132,116,.12);
  color:var(--accent);
  font-size:30px;
}
.action-wrap{
  position:relative;
  display:inline-flex;
}
.action-menu{
  position:fixed;
  inset-inline-end:0;
  top:calc(100% + 8px);
  width:168px;
  display:none;
  padding:8px;
  z-index:1000;
  background:#1e293b!important;
  border:1px solid #475569!important;
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.03);
  opacity:1!important;
  isolation:isolate;
  overflow:hidden;
}
.action-menu.show{
  display:grid;
}
.action-menu button{
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  background:transparent;
  color:#f8fafc!important;
  padding:10px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  text-align:inherit;
  width:100%;
  min-height:40px;
  white-space:nowrap;
}
.action-menu button:hover{
  background:#334155!important;
}
.action-menu .danger-text{
  color:#dc2626;
}
.status.zatca-pending{background:#eef2f7;color:#475569;}
.status.zatca-accepted{background:#dcfce7;color:#047857;}
.status.zatca-warning{background:#fef3c7;color:#a16207;}
.status.zatca-rejected{background:#fee2e2;color:#b91c1c;}
.invoice-cards{
  display:none;
}
.invoice-card{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
}
.invoice-card div:first-child{
  display:grid;
  gap:4px;
}
.invoice-card small{
  color:var(--muted);
  font-weight:800;
}
.invoice-card strong{
  font-size:20px;
}
.invoice-card-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.invoices-table-wrap{
  height:auto;
  max-height:none;
  overflow:visible;
}
.invoices-table-wrap table.app-table{
  width:100%;
  min-width:0;
  table-layout:fixed;
}
.invoices-table-wrap table.app-table th,
.invoices-table-wrap table.app-table td{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
.invoices-table-wrap table.app-table th:nth-child(1){width:14%}
.invoices-table-wrap table.app-table th:nth-child(2){width:15%}
.invoices-table-wrap table.app-table th:nth-child(3){width:10%}
.invoices-table-wrap table.app-table th:nth-child(4){width:13%}
.invoices-table-wrap table.app-table th:nth-child(5){width:13%}
.invoices-table-wrap table.app-table th:nth-child(6){width:11%}
.invoices-table-wrap table.app-table th:nth-child(7){width:11%}
.invoices-table-wrap table.app-table th:nth-child(8){width:8%}
.invoices-table-wrap table.app-table th:nth-child(9){width:5%}
.invoices-table-wrap table.app-table th:last-child,
.invoices-table-wrap table.app-table td:last-child{
  overflow-wrap:normal;
  text-align:center;
}
@media(min-width:1101px){
  body[data-page="invoices"] .main{
    height:auto;
    min-height:100dvh;
    overflow:visible;
  }
}
@media(max-width:980px){
  .invoice-filters{
    grid-template-columns:1fr 1fr;
  }
  .invoice-filters .invoice-search{
    grid-column:1 / -1;
  }
}
@media(max-width:767px){
  .invoices-table-wrap{
    display:none;
  }
  .invoice-cards{
    display:grid;
    gap:12px;
  }
  .invoice-filters{
    grid-template-columns:1fr;
  }
}

/* Compact invoice filter panel */
.invoices-page .invoice-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto;
  gap:12px;
  align-items:center;
  margin:18px 0 12px;
}
.invoices-page .invoice-toolbar .invoice-search{
  min-width:0;
}
.invoices-page .filter-toggle{
  min-height:48px;
}
.invoices-page .invoice-filters-panel{
  display:none;
  margin:0 0 18px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel2);
}
.invoices-page .invoice-filters-panel.show{
  display:block;
}
.invoices-page .filter-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.invoices-page .invoice-filters-panel .invoice-filters{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:12px;
  margin:0;
}
.invoices-page .invoice-filters-panel label{
  display:grid;
  gap:7px;
  color:var(--muted);
  font-weight:900;
  font-size:13px;
}
.invoices-page .invoice-filters-panel input,
.invoices-page .invoice-filters-panel select{
  min-height:44px;
  background:var(--card);
}
.invoices-page .filter-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
}
@media(max-width:980px){
  .invoices-page .invoice-filters-panel .invoice-filters{grid-template-columns:1fr 1fr;}
}
@media(max-width:767px){
  .invoices-page .invoice-toolbar{grid-template-columns:1fr;}
  .invoices-page .invoice-filters-panel .invoice-filters{grid-template-columns:1fr;}
  .invoices-page .filter-actions{justify-content:stretch;}
  .invoices-page .filter-actions .btn{flex:1;}
}

/* Invoice filter controls */
.invoices-page .invoice-filters.compact{grid-template-columns:repeat(3,minmax(220px,1fr));align-items:end;}
.invoices-page .invoice-filters.compact .filter-wide{grid-column:span 1;}
.invoices-page .filter-field{display:grid;gap:8px;}
.invoices-page .filter-field>span{color:var(--muted);font-size:13px;font-weight:900;}
.invoices-page .filter-control{height:54px;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 10px 28px rgba(8,31,44,.04);}
.invoices-page .filter-control:focus-within{border-color:rgba(20,132,116,.45);box-shadow:0 0 0 4px rgba(20,132,116,.08);}
.invoices-page .filter-control i{color:var(--accent);font-size:15px;flex:0 0 auto;}
.invoices-page .filter-control input,.invoices-page .filter-control select{height:100%!important;min-height:0!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;outline:0!important;color:var(--text);font-weight:800;min-width:0;}
.invoices-page .range-control input{width:100%;text-align:center;}
.invoices-page .range-control em{width:1px;height:22px;background:var(--line);display:block;flex:0 0 1px;}
.invoices-page .invoice-filters-panel .invoice-filters.compact input,.invoices-page .invoice-filters-panel .invoice-filters.compact select{background:transparent!important;}
@media(max-width:1200px){.invoices-page .invoice-filters.compact{grid-template-columns:1fr 1fr;}.invoices-page .invoice-filters.compact .filter-wide{grid-column:span 1;}}
@media(max-width:767px){.invoices-page .invoice-filters.compact{grid-template-columns:1fr;}.invoices-page .filter-control{height:auto;min-height:52px;}.invoices-page .range-control{display:grid;grid-template-columns:auto 1fr 1px 1fr;}.invoices-page .range-control em{height:26px;}}

/* Invoice filters aligned with the application visual system */
.invoices-page .invoice-toolbar{
  padding:10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
}
.invoices-page .invoice-toolbar .search{
  height:48px;
  border-radius:12px;
  background:var(--panel);
  box-shadow:none;
}
.invoices-page .filter-toggle{
  height:48px;
  min-height:48px;
  padding-inline:18px;
  border-radius:12px;
}
.invoices-page .filter-toggle i{
  color:var(--accent);
}
.invoices-page .invoice-filters-panel{
  position:relative;
  padding:20px;
  border-color:rgba(20,132,116,.2);
  border-radius:16px;
  background:linear-gradient(145deg,var(--panel),var(--panel2));
  box-shadow:0 16px 40px rgba(8,31,44,.08);
}
.invoices-page .invoice-filters-panel.show{
  animation:invoiceFiltersIn .18s ease-out;
}
@keyframes invoiceFiltersIn{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}
.invoices-page .filter-panel-head{
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.invoices-page .filter-panel-head>b{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--text);
  font-size:15px;
}
.invoices-page .filter-panel-head>b::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:3px;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(20,132,116,.1);
}
.invoices-page .filter-panel-head .icon-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  background:var(--panel2);
}
.invoices-page .filter-field{
  gap:7px;
}
.invoices-page .filter-field>span{
  padding-inline-start:3px;
  color:var(--text);
  font-size:12px;
  font-weight:800;
}
.invoices-page .filter-control{
  position:relative;
  height:50px;
  padding-inline:13px;
  border-color:var(--line);
  border-radius:12px;
  background:var(--panel)!important;
  box-shadow:0 3px 10px rgba(8,31,44,.035);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.invoices-page .filter-control:hover{
  border-color:rgba(20,132,116,.35);
}
.invoices-page .filter-control:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(20,132,116,.1);
}
.invoices-page .filter-control>i{
  width:20px;
  text-align:center;
  color:var(--accent);
}
.invoices-page .filter-control input::placeholder{
  color:var(--muted);
  font-weight:600;
  opacity:.75;
}
.invoices-page .range-control input{
  font-variant-numeric:tabular-nums;
}
.invoices-page .filter-actions{
  padding-top:15px;
  border-top:1px solid var(--line);
}
.invoices-page .filter-actions .btn{
  min-height:42px;
  border-radius:11px;
}
body.dark .invoices-page .invoice-filters-panel{
  border-color:rgba(40,199,197,.18);
  box-shadow:0 18px 45px rgba(0,0,0,.2);
}
@media(max-width:767px){
  .invoices-page .invoice-toolbar{padding:8px}
  .invoices-page .invoice-filters-panel{padding:16px}
  .invoices-page .invoice-filters.compact{grid-template-columns:1fr!important}
  .invoices-page .filter-control{min-height:50px}
}
.invoices-page .invoice-filters.compact .filter-wide{grid-column:span 3!important;}
.invoices-page .range-control{display:grid!important;grid-template-columns:auto minmax(0,1fr) 1px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;}
.invoices-page .range-control input{min-width:0!important;width:100%!important;text-align:center!important;direction:ltr!important;}
.invoices-page .range-control i{justify-self:center!important;}
.invoices-page .range-control em{justify-self:center!important;}
@media(max-width:1200px){.invoices-page .invoice-filters.compact{grid-template-columns:1fr 1fr!important;}.invoices-page .invoice-filters.compact .filter-wide{grid-column:1 / -1!important;}}
@media(max-width:767px){.invoices-page .invoice-filters.compact{grid-template-columns:1fr!important;}.invoices-page .invoice-filters.compact .filter-wide{grid-column:auto!important;}.invoices-page .range-control{grid-template-columns:auto 1fr!important;}.invoices-page .range-control em{display:none!important;}}

/* Premium pricing cards — isolated from form and JavaScript hooks */
.pricing-grid{gap:22px!important;align-items:stretch}
.price-card{
  min-height:360px;display:flex;flex-direction:column;padding:26px!important;
  border:1px solid rgba(45,212,191,.2)!important;border-radius:24px!important;
  background:linear-gradient(145deg,rgba(19,32,50,.92),rgba(7,16,24,.78))!important;
  box-shadow:0 24px 65px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(18px);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.price-card:hover{transform:translateY(-5px);border-color:rgba(45,212,191,.48)!important;box-shadow:0 30px 75px rgba(0,0,0,.36),0 0 28px rgba(20,184,166,.1)}
.price-card.featured{border-color:rgba(45,212,191,.72)!important;background:linear-gradient(145deg,rgba(19,52,61,.96),rgba(30,18,58,.9))!important;box-shadow:0 30px 80px rgba(0,0,0,.38),0 0 32px rgba(45,212,191,.17)}
.price-card.featured:before{content:'الأكثر شيوعاً'!important;background:linear-gradient(135deg,#14b8a6,#7c3aed)!important;box-shadow:0 8px 22px rgba(20,184,166,.3)}
body.en .price-card.featured:before{content:'Most popular'!important}
.price-card h3{font-size:24px!important;font-weight:900;margin-bottom:10px!important}
.price-card .price{font-size:34px!important;line-height:1.2;margin:12px 0 22px!important;display:flex;align-items:baseline;gap:7px;direction:ltr;justify-content:flex-end}
body:not(.en) .price-card .price{direction:rtl;justify-content:flex-start}
body.en .price-card .price{direction:ltr;justify-content:flex-start}
.price-card .price small{font-size:12px;color:var(--muted);font-weight:800}
.price-card .features{display:grid;gap:11px;min-height:0!important;margin-bottom:18px}
.price-card .features span{display:flex;align-items:flex-start;gap:9px;line-height:1.6;color:var(--text);font-size:13px}
.price-card .features i{color:#2dd4bf;margin-top:4px;flex:0 0 auto}
.price-card>.muted{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.price-card .row-actions{margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:1fr 1fr;gap:9px}
.price-card .row-actions .btn{min-height:36px;padding:0 12px!important;font-size:12px}
.price-card .row-actions .btn{width:100%!important;justify-content:center}
#clients .admin-grid>.card:first-child{overflow:visible}
#clients .admin-grid>.card:first-child .form{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
#clients .admin-grid>.card:first-child .form label{gap:8px;font-size:14px}
#clients .admin-grid>.card:first-child .form input,
#clients .admin-grid>.card:first-child .form select{height:48px}
#clients .admin-grid>.card:first-child>.btn{min-width:130px;margin-inline-end:8px}
@media(max-width:600px){#clients .admin-grid>.card:first-child>.btn{width:100%;margin:6px 0}}
.kpi h3{display:flex;align-items:baseline;gap:7px;min-width:0;white-space:nowrap}
.kpi .stat-value{overflow:hidden;text-overflow:ellipsis}
.kpi .stat-unit{font-size:.42em;color:var(--muted);font-weight:900;flex:0 0 auto}
@media(max-width:700px){.price-card{min-height:320px}.price-card .price{font-size:29px!important}}

/* ZATCA connection status in the top navigation */
.invoice-client-picker.is-hidden,
.invoice-client-fields.is-hidden,
.invoice-buyer-certificate.is-hidden{display:none!important}
body[data-page="create-invoice"][data-invoice-type="simple"] .invoice-client-picker,
body[data-page="create-invoice"][data-invoice-type="simple"] .invoice-client-fields,
body[data-page="create-invoice"][data-invoice-type="simple"] #buyerCertificateField{display:none!important}
body[data-page="create-invoice"] [hidden]{display:none!important}
.invoice-buyer-hidden .info-block:last-child{display:none!important}
.invoice-buyer-hidden .info-block:first-child{width:100%}
.invoice-buyer-certificate{display:flex;flex-direction:column;gap:8px;margin:12px 0;padding:14px;border:1px dashed var(--border);border-radius:12px}
.invoice-card-head,.invoice-preview-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.invoice-card-head h3,.invoice-preview-head h3{margin:0}
.invoice-type-actions{margin:0}
.invoice-type-actions .btn{
  position:relative;
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line)!important;
  background:var(--panel)!important;
  color:var(--muted)!important;
  box-shadow:none!important;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.invoice-type-actions .btn:hover{
  color:#0f766e!important;
  border-color:rgba(15,118,110,.45)!important;
  background:rgba(15,118,110,.06)!important;
}
#create-invoice .invoice-type-actions .btn[data-invoice-type].is-selected,
#create-invoice .invoice-type-actions .btn[data-invoice-type][aria-pressed="true"]{
  background:#0f766e!important;
  color:#fff!important;
  border-color:#0f766e!important;
  box-shadow:0 8px 20px rgba(15,118,110,.24)!important;
  transform:translateY(-1px);
}
#create-invoice .invoice-type-actions .btn[data-invoice-type].is-selected i,
#create-invoice .invoice-type-actions .btn[data-invoice-type][aria-pressed="true"] i{
  color:#fff!important;
}
body.dark .invoice-type-actions .btn{
  background:#132032!important;
}
body.dark #create-invoice .invoice-type-actions .btn[data-invoice-type].is-selected,
body.dark #create-invoice .invoice-type-actions .btn[data-invoice-type][aria-pressed="true"]{
  background:#0f766e!important;
}
.invoice-preview-head{direction:rtl;padding-bottom:14px;border-bottom:1px solid var(--line)}
.invoice-preview-head>div{display:grid;gap:3px}
@media(max-width:700px){
  .invoice-card-head,.invoice-preview-head{align-items:stretch;flex-direction:column}
  .invoice-type-actions{grid-template-columns:1fr 1fr}
}
.zatca-status-btn{min-height:44px;border:1px solid transparent;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;color:#fff;font:inherit;font-weight:900;white-space:nowrap;cursor:pointer;transition:.2s;box-shadow:0 7px 18px rgba(15,23,42,.13)}
.zatca-status-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.zatca-status-btn.is-connected{background:linear-gradient(135deg,#15803d,#22c55e);border-color:#16a34a}
.zatca-status-btn.is-pending{background:linear-gradient(135deg,#b45309,#f59e0b);border-color:#d97706}
.zatca-status-btn.is-disconnected{background:linear-gradient(135deg,#b91c1c,#ef4444);border-color:#dc2626}
.zatca-status-btn i{font-size:14px}
@media(max-width:700px){.zatca-status-btn{flex:1}}

/* VAT certificate upload field */
#clients .vat-certificate-field{cursor:pointer}
#clients .vat-certificate-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
#clients .vat-upload-control{min-height:48px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);padding:8px 10px;transition:.18s ease;overflow:hidden}
#clients .vat-upload-control:hover{border-color:var(--maroon2);box-shadow:0 0 0 3px rgba(13,148,136,.10)}
#clients .vat-upload-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#e6f6f4;color:#0f766e}
#clients .vat-upload-copy{min-width:0;display:grid;gap:1px;line-height:1.2}
#clients .vat-upload-copy b{font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#clients .vat-upload-copy small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dark #clients .vat-upload-control{background:var(--panel)!important;border-color:var(--line)!important}
body.dark #clients .vat-upload-icon{background:rgba(94,234,212,.12);color:#5eead4}
body.en #clients .vat-upload-control{direction:ltr;text-align:left}

/* Modern toast notifications */
.toast{display:none!important}
.toast-container{
  position:fixed;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:99999;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  pointer-events:none;
  width:min(560px,calc(100vw - 32px));
}
.toast-message{
  position:relative;
  min-height:48px;
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px 12px 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(15,23,42,.90);
  color:#f8fafc;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.60);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-weight:900;
  line-height:1.65;
  text-align:start;
  pointer-events:auto;
  animation:toastSlideDown .35s cubic-bezier(.16,1,.3,1) forwards;
}
.toast-message.toast-leaving{animation:toastFadeUp .24s ease forwards}
.toast-accent{
  position:absolute;
  inset-block:10px;
  inset-inline-start:0;
  width:4px;
  border-radius:0 999px 999px 0;
  background:#38bdf8;
}
body.en .toast-accent{border-radius:999px 0 0 999px}
.toast-success .toast-accent{background:#22c55e}
.toast-warning .toast-accent{background:#f59e0b}
.toast-error .toast-accent{background:#ef4444}
.toast-info .toast-accent{background:#38bdf8}
.toast-icon{
  flex:0 0 auto;
  font-size:17px;
  color:#38bdf8;
}
.toast-success .toast-icon{color:#86efac}
.toast-warning .toast-icon{color:#fbbf24}
.toast-error .toast-icon{color:#fca5a5}
.toast-text{
  min-width:0;
  max-width:460px;
  white-space:normal;
  overflow-wrap:anywhere;
}
@keyframes toastSlideDown{
  from{opacity:0;transform:translateY(-20px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes toastFadeUp{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-12px) scale(.97)}
}
@media(max-width:600px){
  .toast-container{
    top:14px;
    width:calc(100vw - 24px);
  }
  .toast-message{
    width:100%;
    padding:11px 16px;
  }
  .toast-text{max-width:none}
}

#clients .vat-saved-link{margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:38px;border:1px solid rgba(94,234,212,.35);border-radius:10px;background:rgba(20,184,166,.10);color:#5eead4;font-size:12px;font-weight:900;text-decoration:none;transition:.18s ease}
#clients .vat-saved-link:hover{border-color:#5eead4;background:rgba(20,184,166,.16);transform:translateY(-1px)}
body:not(.dark) #clients .vat-saved-link{background:#ecfdf5;color:#0f766e;border-color:#99f6e4}

.company-logo-settings{display:flex;align-items:center;gap:14px;margin:14px 0;flex-wrap:wrap}.company-logo-preview{width:92px;height:92px;border:1px solid var(--border,#d9e1dc);border-radius:10px;background:var(--soft,#f8faf9);display:grid;place-items:center;overflow:hidden;color:var(--muted,#647067);font-weight:800}.company-logo-preview img{width:100%;height:100%;object-fit:contain}.company-logo-actions{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.file-pick{display:grid;gap:6px;font-weight:700;color:var(--muted,#647067)}.file-pick input{max-width:260px}.invoice-company-logo{display:block;width:92px;height:92px;object-fit:contain;margin:0 auto 10px;border:1px solid #e3e7e4;border-radius:8px;padding:6px;background:#fff}@media(max-width:700px){.company-logo-settings,.company-logo-actions{align-items:stretch;flex-direction:column}.company-logo-preview{width:100%;max-width:160px}}

.sidebar .brand .logo.company-logo-active{background:#fff;border:1px solid rgba(255,255,255,.28);overflow:hidden}.sidebar .brand .logo.company-logo-active img{width:100%;height:100%;object-fit:contain;padding:8px;border-radius:inherit}.invoice-paper .invoice-company-logo{display:block;width:96px;height:96px;object-fit:contain;margin:0 auto 10px;border:1px solid #e3e7e4;border-radius:10px;padding:7px;background:#fff}

/* Smooth cross-page navigation and API loading skeleton */
html{background:#eef4f8}
@view-transition{navigation:auto}
.sidebar{view-transition-name:takharuj-sidebar}
.top{view-transition-name:takharuj-topbar}
::view-transition-old(root){animation:takharujViewOut .16s ease both}
::view-transition-new(root){animation:takharujViewIn .24s cubic-bezier(.2,.8,.2,1) both}
::view-transition-group(takharuj-sidebar),::view-transition-group(takharuj-topbar){animation-duration:.18s}
@keyframes takharujViewOut{to{opacity:.76;transform:scale(.996)}}
@keyframes takharujViewIn{from{opacity:0;transform:translateY(5px)}}
body.page-leaving{cursor:progress}
body.page-leaving .main{opacity:.88;transform:translateY(-2px);transition:opacity .14s ease,transform .14s ease}
.app-navigation-skeleton{
  position:fixed;
  z-index:86;
  inset-block:0;
  inset-inline-start:282px;
  inset-inline-end:0;
  padding:22px 28px 36px;
  overflow:hidden;
  background:linear-gradient(180deg,#f8fbfd 0%,#eef4f8 100%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.app-navigation-skeleton.active{opacity:1;visibility:visible}
.skeleton-toolbar,.skeleton-topbar>span,.skeleton-top-actions>span,.skeleton-line,.skeleton-card,.skeleton-table{
  position:relative;
  overflow:hidden;
  border:1px solid #d8e3ea;
  background:#fff;
}
.skeleton-toolbar::after,.skeleton-topbar>span::after,.skeleton-top-actions>span::after,.skeleton-line::after,.skeleton-card::after,.skeleton-table::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(105%);
  background:linear-gradient(100deg,transparent 25%,rgba(13,148,136,.10) 48%,transparent 72%);
  animation:takharujSkeletonShimmer 1.05s ease-in-out infinite;
}
.skeleton-toolbar{height:48px;width:min(460px,56%);border-radius:12px;margin-bottom:24px}
.skeleton-topbar{display:flex;align-items:center;gap:12px;height:48px;margin-bottom:22px}
.skeleton-top-menu{display:none;width:44px;height:44px;border-radius:14px}
.skeleton-top-search{height:48px;flex:1;border-radius:16px}
.skeleton-top-actions{display:flex;align-items:center;gap:10px}
.skeleton-top-actions>span{width:44px;height:44px;border-radius:14px}
.skeleton-top-actions .skeleton-top-language{width:78px}
.skeleton-top-actions .skeleton-top-status{width:178px;border-radius:999px}
.skeleton-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.skeleton-heading-group{display:grid;gap:9px;width:min(440px,64%)}
.skeleton-line{height:15px;border-radius:999px}
.skeleton-line.title{height:28px;width:62%}
.skeleton-line.short{width:42%}
.skeleton-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.skeleton-card{height:112px;border-radius:12px}
.skeleton-table{height:min(46vh,410px);border-radius:12px}
@keyframes takharujSkeletonShimmer{to{transform:translateX(-105%)}}
@media(max-width:1200px){
  .app-navigation-skeleton{inset-inline-start:0}
  .skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1100px){
  .app-navigation-skeleton{inset-inline-start:0;padding:16px}
}
@media(max-width:600px){
  .app-navigation-skeleton{padding:10px 10px 24px}
  .skeleton-topbar{display:grid;grid-template-columns:44px minmax(0,1fr);height:auto;gap:10px;margin-bottom:18px}
  .skeleton-top-menu{display:block;grid-column:1;grid-row:1}
  .skeleton-top-search{grid-column:2;grid-row:1;height:44px}
  .skeleton-top-actions{grid-column:1/-1;display:grid;grid-template-columns:44px 44px 72px minmax(0,1fr);gap:8px}
  .skeleton-top-actions>span{height:44px;width:auto}
  .skeleton-top-actions .skeleton-top-status{grid-column:1/-1;grid-row:1;width:auto}
  .skeleton-top-actions>span:not(.skeleton-top-status){grid-row:2}
  .skeleton-toolbar{width:100%}
  .skeleton-grid{grid-template-columns:1fr}
  .skeleton-card:nth-child(n+3){display:none}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  .skeleton-toolbar::after,.skeleton-line::after,.skeleton-card::after,.skeleton-table::after{animation:none!important}
  .app-navigation-skeleton,body.page-leaving .main{transition:none!important}
}

/* Keep invoice action menus usable when their trigger is close to the viewport edge. */
.action-menu{max-height:calc(100vh - 16px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}

.invoice-number-copy{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:6px 11px;
  border:1px solid rgba(13,148,136,.42);
  border-radius:10px;
  background:rgba(13,148,136,.07);
  color:var(--text);
  /*font:inherit;*/
  font-weight:900;
  line-height:1;
  cursor:copy;
  white-space:nowrap;
  transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.invoice-number-copy i{font-size:12px;color:#0d9488}
.invoice-number-copy:hover,.invoice-number-copy:focus-visible{
  color:#0f766e;
  border-color:#0d9488;
  background:rgba(13,148,136,.13);
  box-shadow:0 0 0 3px rgba(13,148,136,.12);
  outline:none;
  transform:translateY(-1px);
}
.invoice-number-copy.copied{
  color:#fff;
  border-color:#0d9488;
  background:#0d9488;
}
.invoice-number-copy.copied i{color:#fff}
.invoice-number-copy::after{
  content:attr(data-copy-hint);
  position:absolute;
  z-index:40;
  inset-inline-start:50%;
  top:calc(100% + 8px);
  translate:-50% -3px;
  width:max-content;
  max-width:150px;
  padding:6px 9px;
  border-radius:8px;
  background:#12202f;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .16s ease,translate .16s ease,visibility .16s;
}
.invoice-number-copy:hover::after,.invoice-number-copy:focus-visible::after,.invoice-number-copy.copied::after{
  opacity:1;
  visibility:visible;
  translate:-50% 0;
}

/* Keep the seller and buyer summaries compact and side by side on invoices. */
.invoice-paper.standard .info-row{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch;
}
.invoice-paper.standard .info-block{
  min-width:0;
  padding:9px!important;
}
.invoice-paper.standard .info-block h4{
  margin-bottom:6px!important;
  font-size:14px;
}
.invoice-paper.standard .info-block p{
  margin:4px 0!important;
  font-size:12px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
@media(max-width:420px){
  .invoice-paper.standard .info-row{grid-template-columns:1fr!important}
}

/* Unified permission-aware navigation */
.sidebar{
  width:282px;
  padding:20px 16px 14px!important;
  gap:14px!important;
  background:linear-gradient(180deg,#0b2938 0%,#103b4c 58%,#0d3342 100%)!important;
  box-shadow:0 18px 45px rgba(10,38,52,.18)!important;
}
.sidebar .brand{padding:4px 6px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar .brand .logo{width:46px;height:46px;border-radius:14px;box-shadow:none;flex:0 0 46px}
.sidebar .brand h1{font-size:19px!important;line-height:1.3;margin:0;color:#fff}
.sidebar .brand p{margin:4px 0 0;color:#b9d0da!important;font-size:11px}
.sidebar .side-caption{display:none!important}
.sidebar .unified-nav{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 2px 10px 5px;
  gap:4px!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.24) transparent;
}
.unified-nav .nav-group-label{
  display:block;
  padding:15px 11px 6px;
  color:#89aebb;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}
.sidebar .unified-nav a{
  min-height:46px;
  height:auto!important;
  padding:7px 9px!important;
  border:1px solid transparent;
  border-radius:12px!important;
  color:#d9e8ee!important;
  font-size:13px;
  box-shadow:none!important;
}
.sidebar .unified-nav a .ico{
  width:34px;
  height:34px;
  border-radius:10px;
  color:#a9c8d2;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.08);
}
.sidebar .unified-nav a:hover{
  background:rgba(255,255,255,.09)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.08);
}
.sidebar .unified-nav a.active{
  background:#fff!important;
  color:#123849!important;
  border-color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.16)!important;
}
.sidebar .unified-nav a.active .ico{
  background:#e6f6f4!important;
  color:#0f766e!important;
}
.sidebar-account{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 34px;
  align-items:center;
  gap:9px;
  padding:10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.07);
  color:#fff;
}
.sidebar-account-avatar{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:#0f766e;color:#fff;font-weight:900;
}
.sidebar-account b,.sidebar-account small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-account b{font-size:12px}.sidebar-account small{color:#b9d0da;font-size:9px;margin-top:2px}
.sidebar-account button{
  width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.08);
  color:#d9e8ee;cursor:pointer;
}
.sidebar-account button:hover{background:#fff;color:#b91c1c}
@media(min-width:1101px){
  .app{display:block!important}
  .sidebar{position:fixed!important;inset:0 0 0 auto;height:100dvh!important;z-index:80}
  .main{margin-right:282px!important;width:auto!important}
  body.en .sidebar{right:auto!important;left:0!important}
  body.en .main{margin-right:0!important;margin-left:282px!important}
}
@media(max-width:1100px){
  .sidebar{width:min(88vw,300px)!important;height:100dvh!important;padding-bottom:max(14px,env(safe-area-inset-bottom))!important}
  .main{margin:0!important}
  .sidebar-backdrop.show{display:block!important;backdrop-filter:blur(3px)}
}

/* Independent, compact scroll areas for the persistent shell. */
.sidebar .unified-nav::-webkit-scrollbar{width:6px}
.sidebar .unified-nav::-webkit-scrollbar-track{background:transparent}
.sidebar .unified-nav::-webkit-scrollbar-thumb{background:rgba(190,220,229,.32);border:0;border-radius:999px}
.sidebar .unified-nav::-webkit-scrollbar-thumb:hover{background:rgba(220,242,247,.58)}
@media(max-width:600px){
  .company-topbar{display:grid!important;grid-template-columns:44px minmax(0,1fr);align-items:center!important;gap:10px!important}
  .company-topbar>.mobile-menu{grid-column:1;grid-row:1}
  .company-topbar>.search{grid-column:2;grid-row:1;width:100%!important;min-width:0}
  .company-topbar>.actions{grid-column:1/-1;display:flex!important;align-items:center;flex-wrap:wrap!important;width:100%!important;gap:8px!important}
  .company-topbar>.actions #zatcaStatusBtn{order:-2;flex:1 0 100%;width:100%}
  .company-topbar>.actions>.icon-btn{width:44px!important;flex:0 0 44px}
  .company-topbar>
  
  
  .company-topbar>.actions .lang{width:auto!important;flex:0 0 auto;padding-inline:11px}
}
@media(min-width:1101px){
  .main{height:100dvh;overflow-y:auto;overscroll-behavior:contain}
}
.invoice-form-feedback{flex-basis:100%;padding:12px 14px;border-radius:10px;border:1px solid #fecaca;background:#fff1f2;color:#991b1b;font-weight:700;line-height:1.7}
.invoice-form-feedback.success{border-color:#a7f3d0;background:#ecfdf5;color:#065f46}
.invoice-action-feedback{margin:0 0 14px;padding:12px 14px;border-radius:10px;border:1px solid #fecaca;background:#fff1f2;color:#991b1b;font-weight:700;line-height:1.7}
.invoice-action-feedback.success{border-color:#a7f3d0;background:#ecfdf5;color:#065f46}
.invoice-final-notice{padding:11px 12px;border-radius:9px;background:#f1f5f9;color:#475569;font-weight:700}
.invoice-final-notice i{margin-inline-end:7px}
.company-subscription-page,.company-zatca-page{display:block}
.subscription-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:160px;color:var(--muted)}
.subscription-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.subscription-summary-grid article{display:grid;gap:10px;min-height:120px;align-content:center}
.subscription-summary-grid small{color:var(--muted);font-weight:700}
.subscription-summary-grid strong{font-size:22px}
.subscription-invoices-card .section-title{margin-bottom:10px}
.subscription-alert{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;border-radius:12px;margin-bottom:16px}
.subscription-alert.danger{border-color:#fecaca;background:#fff1f2;color:#991b1b}
.subscription-alert>i{font-size:20px;margin-top:2px}.subscription-alert p{margin:4px 0 0;line-height:1.7}
.subscription-empty{display:grid;place-items:center;gap:7px;padding:30px;color:var(--muted)}.subscription-empty i{font-size:28px}
.zatca-company-layout{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:18px;align-items:start}
.zatca-company-guide{position:sticky;top:18px}.zatca-company-guide h2{margin:12px 0}.zatca-company-guide ol{padding-inline-start:22px;line-height:2}
.zatca-guide-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:rgba(14,116,144,.12);color:#0e7490;font-size:24px}
.zatca-company-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.zatca-company-form label{display:grid;gap:7px}.zatca-company-form label>span{font-weight:800}
.zatca-company-form input,.zatca-company-form select{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--panel);color:var(--text);font:inherit}
.zatca-company-form input:focus,.zatca-company-form select:focus{outline:2px solid rgba(127,15,42,.22);border-color:var(--maroon2)}
.zatca-company-form input:disabled,.zatca-company-form select:disabled{background:var(--panel2);color:var(--muted);cursor:not-allowed;opacity:.78}
.zatca-company-form label>small{color:var(--muted);font-size:11px;line-height:1.6}.zatca-company-form input[readonly]{background:var(--panel2);color:var(--muted);cursor:not-allowed}.zatca-form-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:5px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)}.zatca-form-section-title>div{display:grid;gap:3px}.zatca-form-section-title b{font-size:14px}.zatca-form-section-title small{color:var(--muted);font-size:11px}.zatca-source-badges{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.zatca-source-badges>span{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:#e8f7ef;color:#166534;font-size:10px;font-weight:800}
.zatca-company-form .wide{grid-column:1/-1}
.zatca-lifecycle{margin-bottom:16px;padding:16px;border:1px solid #f3cf8d;border-radius:12px;background:#fffbeb}.zatca-lifecycle-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.zatca-lifecycle-head>div:first-child{display:grid;gap:5px}.zatca-lifecycle-head b{color:#92400e}.zatca-lifecycle-head p{margin:0;color:#786042;font-size:12px;line-height:1.7}.zatca-progress-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.zatca-progress-actions>span{min-width:54px;padding:6px 10px;border-radius:999px;background:#fef3c7;color:#92400e;text-align:center;font-weight:900}.zatca-compliance-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.zatca-compliance-steps>div{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #f5ddad;border-radius:9px;background:rgba(255,255,255,.65);color:#7c6850;font-size:12px;font-weight:800}.zatca-compliance-steps>div>i{color:#d6b36a;font-size:11px}.zatca-compliance-steps>div>span{min-width:0;display:grid;gap:2px;flex:1}.zatca-compliance-steps>div>span small{color:var(--muted);font-size:10px;font-weight:700}.zatca-compliance-steps>div.is-complete{border-color:#bbdfc6;background:#f0fdf4;color:#166534}.zatca-compliance-steps>div.is-complete>i{color:#16a34a}.zatca-compliance-steps>div.is-rejected{border-color:#fecaca;background:#fff1f2;color:#b91c1c}.zatca-compliance-steps>div.is-rejected>i{color:#dc2626}.zatca-lifecycle>.invoice-action-feedback{margin:12px 0 0}.zatca-link-actions{align-items:center}.zatca-link-actions .btn:disabled{opacity:.55;cursor:not-allowed}.zatca-link-actions .btn.danger{color:#b91c1c;border-color:#fecaca;background:#fff7f7}
body.dark .zatca-lifecycle{background:rgba(146,64,14,.14);border-color:rgba(245,158,11,.32)}body.dark .zatca-lifecycle-head b{color:#fbbf24}body.dark .zatca-lifecycle-head p{color:#d6c3a6}body.dark .zatca-compliance-steps>div{background:rgba(15,23,42,.55);border-color:rgba(245,158,11,.25)}body.dark .zatca-compliance-steps>div.is-complete{background:rgba(22,163,74,.12);border-color:rgba(34,197,94,.3)}body.dark .zatca-compliance-steps>div.is-rejected{background:rgba(220,38,38,.12);border-color:rgba(248,113,113,.3)}
.zatca-progress-actions>span{direction:ltr}
@media(max-width:900px){.subscription-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.zatca-company-layout{grid-template-columns:1fr}.zatca-company-guide{position:static}}
@media(max-width:560px){.subscription-summary-grid,.zatca-company-form,.zatca-compliance-steps{grid-template-columns:1fr}.zatca-company-form .wide{grid-column:auto}.zatca-form-section-title{align-items:flex-start;flex-direction:column}.zatca-source-badges{justify-content:flex-start}.company-subscription-page>.section-title,.company-zatca-page>.section-title{align-items:flex-start}.subscription-summary-grid strong{font-size:18px}}

/* Company team workspace */
#team{padding:24px}
.team-title-actions{display:flex;align-items:center;gap:10px}
.team-add-button{min-height:42px;padding-inline:18px}
.team-list-card{padding:0;overflow:hidden;border-radius:18px}
.team-list-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px;border-bottom:1px solid var(--line)}
.team-list-heading h3{margin:0 0 5px;font-size:18px}
.team-list-heading p{margin:0;font-size:13px}
.team-table th:first-child,.team-table td:first-child{padding-inline-start:22px}
.team-table th:last-child,.team-table td:last-child{padding-inline-end:22px}
.team-table tbody tr{transition:background-color .18s ease}
.team-table tbody tr:hover{background:rgba(70,91,109,.045)}
.team-person{display:flex;align-items:center;gap:11px;min-width:210px}
.team-person-avatar{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--maroon),var(--maroon2));color:#fff;font-weight:900;box-shadow:0 7px 16px rgba(88,22,50,.18)}
.team-person>span:last-child{display:grid;gap:3px}
.team-person b{font-size:14px}
.team-person small{direction:ltr;text-align:right;color:var(--muted);font-size:12px}
body.en .team-person small{text-align:left}
.team-scope{display:inline-flex;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--text);font-size:12px;font-weight:800;background:var(--panel2)}
.team-row-actions{align-items:center;flex-wrap:nowrap}
.team-action-button{min-height:36px!important;padding:0 12px!important;gap:7px;border-radius:10px!important;font-weight:850;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease!important}
.team-action-button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,23,42,.1)}
.team-action-button:active{transform:translateY(0) scale(.98)}
.team-action-button:focus-visible{outline:3px solid rgba(20,184,166,.2);outline-offset:2px}
.team-action-edit{color:#0f766e!important;background:rgba(20,184,166,.08)!important;border-color:rgba(20,184,166,.2)!important}
.team-action-edit:hover{background:rgba(20,184,166,.15)!important}
.team-action-suspend{color:#b45309!important;background:rgba(245,158,11,.09)!important;border-color:rgba(245,158,11,.22)!important}
.team-action-suspend:hover{background:rgba(245,158,11,.17)!important}
.team-action-resume{color:#15803d!important;background:rgba(34,197,94,.09)!important;border-color:rgba(34,197,94,.22)!important}
.team-action-resume:hover{background:rgba(34,197,94,.16)!important}
.team-action-delete{color:#dc2626!important;background:rgba(220,38,38,.07)!important;border-color:rgba(220,38,38,.16)!important}
.team-action-delete:hover{background:rgba(220,38,38,.14)!important}
.protected-account{white-space:nowrap;background:rgba(59,130,246,.1);color:#2563eb}
.team-empty{min-height:230px;display:grid;place-items:center;align-content:center;gap:8px;color:var(--muted)}
.team-empty i{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:var(--panel2);font-size:22px}
.team-empty b{color:var(--text)}

.member-editor{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:var(--text);overflow:auto}
.member-editor[open]{display:grid;place-items:center}
.member-editor::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(3px);animation:member-backdrop-in .2s ease}
.member-editor-panel{width:min(680px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:0 28px 80px rgba(15,23,42,.28);animation:member-modal-in .24s cubic-bezier(.22,.8,.35,1)}
.member-editor-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 26px 20px;border-bottom:1px solid var(--line)}
.member-editor-kicker{display:block;margin-bottom:6px;color:var(--maroon2);font-size:12px;font-weight:900}
.member-editor-header h3{margin:0;font-size:24px}
.member-editor-header p{margin:7px 0 0;font-size:13px;line-height:1.6}
.member-editor-body{flex:1;overflow:auto;padding:24px 26px}
.member-editor-form{grid-template-columns:1fr 1fr;gap:17px 14px}
.member-editor-form .member-field-wide{grid-column:1/-1}
.member-editor-form label{gap:8px;font-size:13px}
.member-editor-form input,.member-editor-form select{height:48px;background:var(--panel2);border-radius:12px;transition:border-color .18s ease,box-shadow .18s ease}
.member-editor-form input:focus,.member-editor-form select:focus{border-color:var(--maroon2);box-shadow:0 0 0 3px rgba(125,36,75,.11)}
.member-editor-form label small{color:var(--muted);font-weight:500}
.member-permission-note{display:flex;gap:12px;margin-top:20px;padding:15px;border:1px solid rgba(59,130,246,.18);border-radius:14px;background:rgba(59,130,246,.06)}
.member-permission-note>i{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:10px;background:rgba(59,130,246,.13);color:#2563eb}
.member-permission-note p{display:grid;gap:4px;margin:0;font-size:12px;line-height:1.6}
.member-permission-note span{color:var(--muted)}
.member-editor-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 26px;border-top:1px solid var(--line);background:var(--panel)}
.member-editor-footer .btn{min-width:120px}
body.dark .team-table tbody tr:hover{background:rgba(255,255,255,.035)}
body.dark .protected-account{color:#93c5fd}
body.dark .member-editor-kicker{color:#e2a8c0}
body.dark .member-editor-panel{background:#101c2b}
body.dark .member-editor-footer{background:#101c2b}
@keyframes member-modal-in{from{transform:translateY(14px) scale(.975);opacity:.55}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes member-backdrop-in{from{opacity:0}to{opacity:1}}

@media(max-width:720px){
  #team{padding:16px}
  #team>.section-title{gap:16px}
  .team-title-actions{width:100%;justify-content:space-between}
  .team-title-actions .team-add-button{width:auto}
  .team-list-heading{padding:17px}
  .team-list-card .table-wrap{overflow:visible;padding:10px}
  .team-list-card .table-wrap table.team-table{width:100%!important;min-width:0!important}
  .team-table,.team-table tbody,.team-table tr,.team-table td{display:block;width:100%;min-width:0!important}
  .team-table thead{display:none}
  .team-table tbody{display:grid;gap:10px}
  .team-table tbody tr{padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}
  .team-table tbody td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0!important;border-bottom:1px dashed var(--line);text-align:left}
  .team-table tbody td:before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:800}
  .team-table tbody td:first-child{display:block;padding-top:0!important}
  .team-table tbody td:first-child:before{display:none}
  .team-table tbody td:last-child{border-bottom:0;padding-bottom:0!important}
  .team-row-actions{justify-content:flex-end;flex-wrap:wrap}
  .team-row-actions .btn{width:auto!important;flex:0 0 auto}
  .team-empty-row td:before{display:none}
  .member-editor{width:100vw;padding:10px}
  .member-editor-panel{max-height:calc(100dvh - 20px);border-radius:20px}
  .member-editor-header{padding:20px}
  .member-editor-body{padding:20px}
  .member-editor-form{grid-template-columns:1fr}
  .member-editor-form .member-field-wide{grid-column:auto}
  .member-editor-footer{padding:14px 20px}
  .member-editor-footer .btn{width:auto;flex:1}
}

/* Invoice returns and ZATCA credit notes */
.invoice-return-dialog [hidden],.invoice-return-dialog [aria-hidden="true"]{display:none!important}
.return-action-button{background:#0f766e!important;color:#fff!important;border-color:#0f766e!important}
.return-history-title{margin:16px 0 10px;font-size:16px}
.return-empty{display:flex;align-items:center;gap:9px;padding:12px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:13px}
.credit-note-list{display:grid;gap:9px}
.credit-note-item{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel2)}
.credit-note-item>div:first-child{min-width:0}.credit-note-item b,.credit-note-item small{display:block}.credit-note-item small{margin-top:4px;color:var(--muted);font-size:11px}.credit-note-item p{margin:7px 0 0;font-size:12px;line-height:1.5}.credit-note-amount{text-align:left;white-space:nowrap}.credit-note-amount strong{display:block;margin-bottom:7px;color:#0f766e;font-size:13px}
.credit-note-zatca{display:inline-flex;margin-top:8px;padding:4px 8px;border-radius:999px;background:rgba(245,158,11,.13);color:#a16207;font-size:11px;font-weight:900}.credit-note-zatca.ok{background:rgba(16,185,129,.12);color:#047857}.credit-note-zatca.failed{background:rgba(220,38,38,.1);color:#b91c1c}
.invoice-return-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:20px;border:0;background:transparent;color:var(--text)}
.invoice-return-dialog[open]{display:grid;place-items:center}.invoice-return-dialog::backdrop{background:rgba(15,23,42,.6);backdrop-filter:blur(4px)}
.return-dialog-panel{width:min(840px,100%);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:0 30px 90px rgba(15,23,42,.35)}
.return-dialog-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid var(--line)}
.return-dialog-panel header small{color:#0f766e;font-weight:900}.return-dialog-panel h3{margin:5px 0;font-size:22px}.return-dialog-panel header p{margin:0;color:var(--muted);font-size:13px}
.return-dialog-body{display:grid;gap:17px;overflow:auto;padding:22px 24px}.return-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.return-summary span{display:grid;gap:5px;padding:12px;border-radius:13px;background:var(--panel2);color:var(--muted);font-size:12px}.return-summary b{color:var(--text);font-size:14px}
.return-label{font-size:13px;font-weight:900}.return-type-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.return-type-switch button{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;text-align:right;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--panel2);color:var(--text);font:inherit;cursor:pointer}.return-type-switch button i{grid-row:1/3;align-self:center;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--panel);color:#0f766e}.return-type-switch button b{font-size:13px}.return-type-switch button small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.5}.return-type-switch button.active{border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.1)}.return-type-switch button:disabled{opacity:.45;cursor:not-allowed}
.credit-adjustment-explanation{display:flex;gap:10px;padding:12px 13px;border:1px solid rgba(14,116,144,.22);border-radius:12px;background:rgba(14,116,144,.06)}.credit-adjustment-explanation>i{margin-top:2px;color:#0e7490}.credit-adjustment-explanation p{display:grid;gap:3px;margin:0;font-size:12px;line-height:1.6}.credit-adjustment-explanation span{color:var(--muted)}
.discount-scope-panel{display:grid;gap:9px}.discount-scope-switch{display:grid;grid-template-columns:1fr 1fr;gap:9px}.discount-scope-switch button{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);text-align:right;font:inherit;cursor:pointer}.discount-scope-switch button>i{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:9px;background:var(--panel2);color:#0f766e}.discount-scope-switch button>span{display:grid;gap:3px}.discount-scope-switch button b{font-size:12px}.discount-scope-switch button small{color:var(--muted);font-size:10px;line-height:1.5}.discount-scope-switch button.active{border-color:#0f766e;background:rgba(15,118,110,.05);box-shadow:0 0 0 3px rgba(15,118,110,.08)}
.invoice-discount-panel{display:grid;gap:10px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--panel2)}.invoice-discount-panel>label{display:grid;gap:6px;font-size:12px;font-weight:900}.invoice-discount-panel>label>small{color:var(--muted);font-size:10px;font-weight:600}.invoice-discount-panel .return-money-input{max-width:260px}.invoice-discount-panel input{width:100%;height:44px;background:var(--panel)}
.return-lines{display:grid;gap:8px}.return-line{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(260px,320px);align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:13px}.return-line-details{min-width:0}.return-line-details b,.return-line-details small{display:block}.return-line-details small{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.6}.return-line input[type=checkbox]{width:18px;height:18px;accent-color:#0f766e}.return-line-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.return-line-controls>label{display:grid;gap:5px;align-content:end;color:var(--text);font-size:10px;font-weight:800}.return-line-controls input{width:100%;height:40px}.return-money-input{position:relative}.return-money-input input{padding-inline-end:38px}.return-money-input small{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:10px;pointer-events:none}
.credit-adjustment-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px;border:1px solid rgba(15,118,110,.22);border-radius:13px;background:rgba(15,118,110,.05)}.credit-adjustment-summary>span{display:grid;gap:5px;color:var(--muted);font-size:11px}.credit-adjustment-summary b{color:var(--text);font-size:13px}.credit-adjustment-summary>span:nth-child(3) b{color:#0f766e}
.return-reason{display:grid;gap:8px;font-size:13px;font-weight:900}.return-reason em{color:#dc2626;font-size:11px;font-style:normal}.return-reason textarea{resize:vertical;min-height:82px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--text);font:inherit;opacity:1}.return-reason textarea::placeholder{color:var(--muted);opacity:1}.return-reason textarea:focus{outline:0;border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.1)}
.return-compliance-note{display:flex;gap:11px;padding:13px;border:1px solid rgba(59,130,246,.2);border-radius:13px;background:rgba(59,130,246,.06)}.return-compliance-note>i{color:#2563eb}.return-compliance-note p{display:grid;gap:3px;margin:0;font-size:12px}.return-compliance-note span{color:var(--muted);line-height:1.5}.return-dialog-panel footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--line)}
body.dark .return-dialog-panel{background:#101c2b}
@media(max-width:700px){.invoice-return-dialog{padding:8px}.return-dialog-panel{max-height:calc(100dvh - 16px);border-radius:18px}.return-dialog-panel header,.return-dialog-body{padding:18px}.return-summary,.credit-adjustment-summary{grid-template-columns:1fr 1fr}.return-type-switch,.discount-scope-switch{grid-template-columns:1fr}.return-line{grid-template-columns:auto minmax(0,1fr)}.return-line-controls{grid-column:2;grid-template-columns:1fr}.invoice-discount-panel .return-money-input{max-width:none}.return-dialog-panel footer{padding:14px 18px}.return-dialog-panel footer .btn{flex:1}.credit-note-item{display:grid}.credit-note-amount{text-align:right}}