/* ==========================================================================
   SKLS RMS — CLEANED APPLICATION STYLESHEET
   Legacy duplicate POS rules removed. Keep the POS section below as the
   single source of truth for POS styling.
   ========================================================================== */

:root{--bg:#f4f6f8;--panel:#fff;--text:#172033;--muted:#6b7280;--border:#e5e7eb;--primary:#0f766e;--primary-2:#115e59;--nav:#111827;--nav-text:#cbd5e1;--danger:#b42318;--warning:#b54708;--success:#067647;--shadow:0 10px 30px rgba(16,24,40,.06);--radius:18px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,"Noto Sans Arabic",sans-serif;color:var(--text);background:var(--bg)}body{font-size:14px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%}.app-shell{display:flex;min-height:100vh}.sidebar{width:246px;background:var(--nav);color:var(--nav-text);padding:18px 14px 14px;display:flex;flex-direction:column;position:fixed;inset-block:0;inset-inline-start:0;z-index:40;box-shadow:0 0 0 1px rgba(255,255,255,.04)}.brand{display:flex;align-items:center;gap:10px;padding:7px 9px 18px;border-bottom:1px solid rgba(255,255,255,.08)}.brand img{width:40px;height:40px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}.brand strong{display:block;color:#fff;font-size:16px}.brand small{display:block;margin-top:3px;color:#94a3b8;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-list{display:flex;flex-direction:column;gap:3px;padding-top:14px;overflow:auto;scrollbar-width:thin}.nav-list a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;color:#cbd5e1;transition:.15s}.nav-list a:hover{background:rgba(255,255,255,.07);color:#fff}.nav-list .nav-primary{background:rgba(15,118,110,.22);color:#d5fffb}.nav-icon{width:22px;text-align:center;font-size:17px}.nav-section{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#64748b;padding:16px 11px 5px}.sklstech{margin-top:auto;padding:12px 9px 2px;font-size:11px;color:#64748b}.sklstech:hover{color:#fff}.workspace{margin-inline-start:246px;width:calc(100% - 246px);min-width:0}.topbar{height:70px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:30;backdrop-filter:blur(14px)}.topbar-title strong{display:block;font-size:15px}.topbar-title small{display:block;color:var(--muted);margin-top:2px}.top-actions{display:flex;align-items:center;gap:10px}.language-switch button,.icon-button{border:1px solid var(--border);background:#fff;color:#344054;border-radius:10px;min-height:38px;padding:0 12px}.icon-button{width:38px;padding:0;display:grid;place-items:center;font-size:18px}.user-chip{display:flex;align-items:center;gap:8px;padding:4px 8px}.user-chip .avatar{width:34px;height:34px;border-radius:50%;background:#ecfdf3;color:#067647;display:grid;place-items:center;font-weight:800}.user-chip strong{display:block;font-size:13px}.user-chip small{display:block;color:var(--muted);font-size:11px}.content{padding:26px;max-width:1800px;margin:auto}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}.page-heading h1{font-size:28px;line-height:1.1;margin:3px 0 7px;letter-spacing:-.03em}.page-heading p{margin:0;color:var(--muted)}.eyebrow{font-size:10px!important;font-weight:900;letter-spacing:.13em;color:var(--primary)!important;text-transform:uppercase}.heading-actions{display:flex;gap:8px;flex-wrap:wrap}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}.panel.narrow{max-width:720px}.panel.span-2{grid-column:span 2}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.panel h2,.panel-head h2{font-size:17px;margin:0 0 3px}.panel-head p{margin:0;color:var(--muted);font-size:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:#fff;color:#344054;border-radius:10px;padding:9px 13px;font-weight:700;min-height:38px}.btn:hover{background:#f9fafb}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-2)}.btn-secondary{background:#eef2f6;border-color:#d0d5dd;color:#1d2939}.btn-danger{background:#b42318;border-color:#b42318;color:#fff}.btn-ghost{background:#fff}.btn-lg{min-height:48px;font-size:15px}.btn-sm{padding:6px 9px;min-height:32px;font-size:12px}.danger-link{color:var(--danger)}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.kpi{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.kpi>span{display:block;color:var(--muted);font-size:12px;font-weight:700}.kpi strong{display:block;font-size:25px;margin:8px 0 5px;letter-spacing:-.03em}.kpi strong small{font-size:11px;color:var(--muted)}.kpi em{font-size:11px;color:#98a2b3;font-style:normal}.dashboard-grid,.detail-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:18px}.cashier-banner{background:linear-gradient(135deg,#eff8ff,#ecfdf3);border:1px solid #d1e9ff;padding:15px 18px;border-radius:14px;margin-bottom:18px;display:flex;gap:12px;align-items:center}.cashier-banner span{color:#475467}.alert-list{display:flex;flex-direction:column;gap:7px}.alert-list a{display:flex;justify-content:space-between;align-items:center;background:#f9fafb;border:1px solid #f2f4f7;border-radius:10px;padding:10px 12px}.alert-list b{min-width:30px;height:28px;border-radius:9px;background:#fff;display:grid;place-items:center;border:1px solid var(--border)}.trend-chart{height:250px;display:flex;align-items:end;gap:8px;padding:20px 4px 0;border-bottom:1px solid var(--border)}.trend-bar-wrap{height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;flex:1;min-width:18px;position:relative}.trend-bar{width:min(28px,80%);background:linear-gradient(180deg,#0f766e,#14b8a6);border-radius:8px 8px 3px 3px;min-height:3px;transition:.2s}.trend-bar-wrap:hover .trend-bar{filter:brightness(.92)}.trend-bar-wrap small{font-size:9px;color:#98a2b3;margin-top:6px;white-space:nowrap}.trend-tip{position:absolute;bottom:calc(var(--h) + 28px);background:#111827;color:#fff;padding:5px 7px;border-radius:7px;font-size:10px;opacity:0;pointer-events:none;white-space:nowrap}.trend-bar-wrap:hover .trend-tip{opacity:1}.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:collapse;min-width:650px}.table-wrap th{text-align:start;padding:10px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#667085;background:#f9fafb;border-bottom:1px solid var(--border)}.table-wrap td{padding:12px;border-bottom:1px solid #f0f2f5;vertical-align:middle}.table-wrap tr:last-child td{border-bottom:0}.table-wrap tbody tr:hover{background:#fcfcfd}.table-wrap td small{display:block;color:#98a2b3;margin-top:2px}.clickable,.table-wrap tr[onclick]{cursor:pointer}.empty{text-align:center!important;color:#98a2b3!important;padding:35px!important}.status,.pill{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800;text-transform:capitalize;background:#f2f4f7;color:#475467;white-space:nowrap}.status-completed,.status-paid,.status-delivered,.status-ready,.pill.success{background:#ecfdf3;color:#067647}.status-preparing,.status-assigned,.status-out_for_delivery{background:#fffaeb;color:#b54708}.status-cancelled,.status-refunded,.status-failed{background:#fef3f2;color:#b42318}.muted-pill{background:#f2f4f7;color:#667085}.toolbar{display:flex;gap:10px;align-items:end;margin-bottom:15px;flex-wrap:wrap}.toolbar label{display:flex;flex-direction:column;gap:5px;color:#667085;font-size:11px}.searchbox{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #d0d5dd;border-radius:10px;padding:0 10px;min-width:280px;height:40px}.searchbox:focus-within{border-color:#6fc7bf;box-shadow:0 0 0 3px rgba(15,118,110,.08)}.searchbox input{border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;height:auto!important;width:100%;background:transparent}.toolbar select,.toolbar input{height:40px;border:1px solid #d0d5dd;border-radius:10px;padding:0 10px;background:#fff}.row-actions{display:flex;gap:6px}.actions-col{width:150px}.pagination{display:flex;justify-content:center;align-items:center;gap:14px;padding-top:16px;color:#667085}.pagination a{font-weight:700;color:var(--primary)}.form-panel{max-width:1050px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:flex;flex-direction:column;gap:6px;color:#475467;font-size:12px;font-weight:650}.field>span b{color:#d92d20}.field input,.field select,.field textarea,.form-grid input,.form-grid select,.form-grid textarea,.inline-form input,.inline-form select{width:100%;border:1px solid #d0d5dd;background:#fff;color:#101828;border-radius:10px;padding:10px 11px;outline:none;min-height:42px}.field textarea{resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#5bb8af;box-shadow:0 0 0 3px rgba(15,118,110,.08)}.field small{color:#98a2b3;font-weight:400}.field em{color:#d92d20;font-style:normal;font-weight:500}.field-check{justify-content:end}.field-check input[type=checkbox]{width:20px;height:20px;min-height:0}.field ul{list-style:none;padding:0;margin:5px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.field li label{display:flex;align-items:center;gap:7px;background:#f9fafb;border:1px solid #eaecf0;padding:8px;border-radius:8px}.field li input{width:17px!important;min-height:0!important}.form-actions{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--border);margin-top:20px;padding-top:16px}.form-error,.message.error{background:#fef3f2;border:1px solid #fecdca;color:#b42318;padding:10px 12px;border-radius:10px}.messages{margin-bottom:15px}.message{padding:10px 12px;border-radius:10px;background:#eff8ff;border:1px solid #b2ddff}.message.success{background:#ecfdf3;border-color:#abefc6;color:#067647}.info-callout{margin-top:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:13px}.info-callout p{margin:5px 0 0;color:#64748b}.danger-panel{border-color:#fecdca}.delete-object{background:#fff5f4;border:1px solid #fee4e2;padding:12px;border-radius:10px;margin:15px 0}.details-list{display:grid;grid-template-columns:110px 1fr;gap:9px 12px}.details-list dt{color:#98a2b3}.details-list dd{margin:0;font-weight:650;word-break:break-word}.order-items article{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid #f2f4f7}.order-items article>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.order-items small{color:#667085}.remove-tag,.add-tag{font-size:11px;border-radius:7px;padding:3px 7px}.remove-tag{background:#fff4ed;color:#b93815}.add-tag{background:#ecfdf3;color:#067647}.order-items em{font-style:normal;color:#667085;font-size:11px}.invoice-summary{margin-inline-start:auto;margin-top:18px;max-width:360px}.invoice-summary>div{display:flex;justify-content:space-between;padding:5px 0}.invoice-summary .grand-total{border-top:1px solid var(--border);margin-top:7px;padding-top:11px;font-size:17px}.status-form{margin-top:20px;border-top:1px solid var(--border);padding-top:15px}.status-form label{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.status-form select{height:40px;border:1px solid #d0d5dd;border-radius:9px;padding:0 8px}.shift-current{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.shift-current>div:first-child{margin-inline-end:auto}.shift-money span{display:block;color:#667085}.shift-money strong{font-size:20px}.inline-form{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.inline-form label{display:flex;flex-direction:column;gap:5px;color:#667085;font-size:11px}
/* POS */.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.52);backdrop-filter:blur(2px)}.modal-card{position:relative;background:#fff;border-radius:18px;width:min(650px,100%);max-height:85vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(15,23,42,.25)}.modal-card.small{width:min(480px,100%)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px;border-bottom:1px solid var(--border)}.modal-head h3{margin:3px 0 0;font-size:20px}.modal-body{padding:18px;overflow:auto}.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid var(--border)}.custom-options{display:flex;flex-direction:column;gap:14px}.custom-group{border:1px solid var(--border);border-radius:12px;padding:12px}.custom-group h4{margin:0 0 2px}.custom-group>p{margin:0 0 9px;color:#98a2b3;font-size:11px}.choice{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px}.choice:hover{background:#f9fafb}.choice input{width:18px;height:18px}.choice span{display:flex;justify-content:space-between;gap:10px;flex:1}.choice b{font-size:11px;color:#0f766e}.toast{position:fixed;inset-inline-end:24px;bottom:24px;background:#101828;color:#fff;padding:11px 14px;border-radius:10px;z-index:120;box-shadow:0 12px 35px rgba(16,24,40,.25)}
/* login */.login-page{background:#0f172a}.login-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(420px,.9fr) minmax(480px,1.1fr)}.login-visual{background:linear-gradient(145deg,#0f172a,#172554 60%,#0f766e);padding:42px;color:#fff;display:flex;flex-direction:column}.login-brand{display:flex;align-items:center;gap:12px}.login-brand img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:13px;padding:5px}.login-brand strong{font-size:21px;display:block}.login-brand span{display:block;color:#cbd5e1;font-size:12px;margin-top:2px}.login-copy{margin:auto 0;max-width:550px}.login-copy h1{font-size:46px;line-height:1.02;letter-spacing:-.05em;margin:0 0 15px}.login-copy p{color:#d7e2f0;line-height:1.7;font-size:15px}.login-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}.login-badges span{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);padding:7px 10px;border-radius:999px;font-size:11px}.login-visual>a{font-size:11px;color:#94a3b8}.login-panel{background:#f8fafc;display:grid;place-items:center;padding:35px}.login-card{width:min(420px,100%);background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:32px;box-shadow:0 24px 60px rgba(15,23,42,.08)}.login-card h2{font-size:27px;margin:4px 0 7px}.login-card>.muted{color:#64748b;margin:0 0 22px;line-height:1.5}.login-card label{display:flex;flex-direction:column;gap:6px;color:#475569;font-size:12px;font-weight:700;margin-bottom:14px}.login-card input{height:45px;border:1px solid #cbd5e1;border-radius:10px;padding:0 12px;outline:none}.login-card input:focus{border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.09)}.login-card button{width:100%;margin-top:5px}.mobile-login-brand{display:none}
.mobile-only{display:none}.sidebar-overlay{display:none}
html[dir=rtl] .page-heading h1{letter-spacing:0}html[dir=rtl] .nav-section,html[dir=rtl] .eyebrow{letter-spacing:0}html[dir=rtl] .table-wrap th,html[dir=rtl] .table-wrap td{text-align:right}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.sidebar{transform:translateX(-110%);transition:.2s}.workspace{margin-inline-start:0;width:100%}.mobile-only{display:grid}.sidebar.open{transform:translateX(0)}html[dir=rtl] .sidebar{transform:translateX(110%)}html[dir=rtl] .sidebar.open{transform:translateX(0)}.sidebar-overlay.open{display:block;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:35}.topbar{padding:0 14px}.content{padding:18px}.user-chip>div{display:none}.dashboard-grid,.detail-grid{grid-template-columns:1fr}.panel.span-2{grid-column:auto}.login-wrap{grid-template-columns:1fr}.login-visual{display:none}.login-panel{min-height:100vh}.mobile-login-brand{display:flex;align-items:center;gap:8px;margin-bottom:25px}.mobile-login-brand img{width:40px;height:40px;object-fit:contain}.mobile-login-brand strong{font-size:18px}}
@media(max-width:640px){.content{padding:13px}.topbar-title small{display:none}.page-heading{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:24px}.kpi-grid{grid-template-columns:1fr}.form-grid,.two-col{grid-template-columns:1fr}.panel{border-radius:14px;padding:14px}.language-switch button{padding:0 8px}.top-actions{gap:3px}.user-chip{display:none}.login-panel{padding:16px}.login-card{padding:24px}.field ul{grid-template-columns:1fr}}
.note-history{display:flex;flex-direction:column;gap:9px}.note-card{border:1px solid var(--border);border-radius:11px;padding:12px}.note-card.important{border-color:#fedf89;background:#fffaeb}.note-card strong{display:block}.note-card small{display:block;color:#98a2b3;margin-top:5px}
.purchase-lines-head{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.purchase-line{display:grid;grid-template-columns:minmax(220px,1.7fr) 1fr 1fr auto;gap:8px;margin-bottom:8px}.purchase-line select,.purchase-line input{border:1px solid #d0d5dd;border-radius:9px;padding:9px;min-height:40px}
@media(max-width:700px){.purchase-line{grid-template-columns:1fr 1fr}.purchase-line select{grid-column:span 2}}
.required-dot{color:#d92d20}.static-alerts>div{display:flex;justify-content:space-between;align-items:center;background:#f9fafb;border:1px solid #f2f4f7;border-radius:10px;padding:10px 12px}.static-alerts>div b{min-width:30px;height:28px;border-radius:9px;background:#fff;display:grid;place-items:center;border:1px solid var(--border)}.cashier-alerts-only{max-width:760px}.danger-panel{border-color:#fecdca;background:#fffafa}.danger-panel>p{color:#b42318;line-height:1.5}.stack-form{display:flex;flex-direction:column;gap:10px;margin-top:13px}.stack-form select,.stack-form input{min-height:40px;border:1px solid #d0d5dd;border-radius:9px;padding:8px 10px;background:#fff}.driver-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}.driver-card{border:1px solid var(--border);border-radius:14px;padding:15px;background:#fff}.driver-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.driver-card-head strong{display:block;font-size:15px}.driver-card-head small{display:block;color:var(--muted);margin-top:3px}.driver-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0}.driver-stats>div{background:#f8fafc;border-radius:10px;padding:9px}.driver-stats span{display:block;color:var(--muted);font-size:10px}.driver-stats b{display:block;font-size:18px;margin-top:3px}.driver-actions{display:flex;gap:7px;flex-wrap:wrap}.driver-actions form{margin:0}.advance-inline{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(130px,1.2fr) auto;gap:6px}.advance-inline input{min-height:34px;border:1px solid #d0d5dd;border-radius:8px;padding:6px 8px;min-width:0}.shift-current{display:grid;grid-template-columns:1.2fr .8fr 1.1fr 1.5fr;gap:18px;align-items:center}.shift-money span{display:block;color:var(--muted);font-size:11px}.shift-money strong{display:block;font-size:20px;margin-top:4px}.shift-money small{display:block;color:#98a2b3;margin-top:3px;font-size:9px}.shift-kpis .kpi{padding:13px}.shift-kpis .kpi strong{font-size:20px}.field ul{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.field ul label{display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:9px;padding:8px;background:#fff;font-weight:500}.field ul input{width:17px;height:17px;min-height:0;padding:0}
@media(max-width:1100px){.shift-current{grid-template-columns:1fr 1fr}.advance-inline{grid-template-columns:1fr}}
@media(max-width:640px){.driver-grid{grid-template-columns:1fr}.driver-stats{grid-template-columns:1fr 1fr 1fr}.shift-current{grid-template-columns:1fr}.field ul{grid-template-columns:1fr}}

.contact-list{display:grid;gap:10px;margin:12px 0 18px}.contact-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px;border:1px solid var(--border);border-radius:12px}.contact-row>div:first-child{display:grid;gap:4px}.contact-row small{color:var(--muted)}.contact-row .row-actions{display:flex;gap:6px;flex-wrap:wrap}.contact-row form{margin:0}.contact-add{border-top:1px solid var(--border);padding-top:16px}.check-line{display:flex;gap:8px;align-items:center}
/* Complete owner workspace */
.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-bottom:20px}.module-grid-wide{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.module-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:17px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow);transition:.15s}.module-card:hover{transform:translateY(-2px);border-color:#9bd5cf;box-shadow:0 16px 36px rgba(16,24,40,.09)}.module-icon{width:42px;height:42px;border-radius:12px;background:#ecfdf3;color:#067647;display:grid;place-items:center;font-size:20px;font-weight:800;flex:0 0 auto}.module-card strong{display:block;font-size:15px}.module-card p{margin:5px 0 8px;color:var(--muted);line-height:1.45;font-size:12px}.module-card b{font-size:11px;color:var(--primary)}.kitchen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}.kitchen-ticket{border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden}.kitchen-ticket.overdue{border-color:#fda29b;box-shadow:0 0 0 2px rgba(217,45,32,.05)}.kitchen-ticket>header{display:flex;align-items:flex-start;justify-content:space-between;padding:13px 14px;border-bottom:1px solid var(--border);background:#f9fafb}.kitchen-ticket header strong{font-size:16px}.kitchen-ticket header small{display:block;color:var(--muted);margin-top:3px}.overdue-banner{background:#fef3f2;color:#b42318;padding:7px 14px;font-weight:800;font-size:11px}.ready-time{padding:7px 14px;background:#fffaeb;color:#b54708;font-size:11px;font-weight:700}.kitchen-lines{padding:11px 14px}.kitchen-line{padding:9px 0;border-bottom:1px dashed #eaecf0}.kitchen-line:last-child{border-bottom:0}.kitchen-line>b{display:block}.kitchen-line small{display:block;color:#667085;margin-top:4px}.kitchen-ticket>footer{display:flex;justify-content:flex-end;gap:7px;padding:11px 14px;border-top:1px solid var(--border)}.kitchen-ticket>footer form{margin:0}.empty-state{grid-column:1/-1;text-align:center;color:#98a2b3;padding:35px}.ops-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.stack-form label{display:flex;flex-direction:column;gap:6px;color:#475467;font-size:12px;font-weight:650}.stack-form textarea{border:1px solid #d0d5dd;border-radius:9px;padding:8px 10px;resize:vertical}.account-lines{display:flex;flex-direction:column}.account-lines>div{display:flex;justify-content:space-between;gap:20px;padding:13px 2px;border-bottom:1px solid #f0f2f5}.account-lines>div:last-child{border-bottom:0}.account-lines span{color:#667085}.account-lines b{font-variant-numeric:tabular-nums}.account-lines .account-total{font-size:16px;padding-top:17px}.account-total span,.account-total b{color:#067647;font-weight:900}.info-callout{border:1px solid #b2ddff;background:#eff8ff;border-radius:12px;padding:13px 14px;margin-bottom:16px}.info-callout strong{display:block;color:#175cd3}.info-callout p{margin:5px 0 0;color:#475467;line-height:1.5}.muted{color:var(--muted)}
@media(max-width:800px){.ops-grid{grid-template-columns:1fr}.module-grid,.module-grid-wide{grid-template-columns:1fr}.kitchen-grid{grid-template-columns:1fr}}


/* v0.5.1 professional UX + Owner-only analytics */
:root{--surface-soft:#f8fafc;--surface-tint:#f0fdfa;--focus:0 0 0 3px rgba(15,118,110,.12)}
.nav-list a[aria-current="page"],.nav-list a.active{background:rgba(255,255,255,.10);color:#fff}
.professional-form{padding:24px}.professional-form .form-grid{gap:20px}.professional-form .field>span{font-size:12px;color:#344054}.professional-form .field input,.professional-form .field select,.professional-form .field textarea{min-height:46px;border-radius:11px;padding:10px 12px}.professional-form .field textarea{min-height:100px}.professional-form .field input:focus,.professional-form .field select:focus,.professional-form .field textarea:focus{outline:none;border-color:#5db8b0;box-shadow:var(--focus)}.form-span-2{grid-column:1/-1}.form-actions{position:sticky;bottom:0;margin:24px -24px -24px;padding:14px 24px;background:rgba(255,255,255,.96);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;backdrop-filter:blur(12px);z-index:5}
.permission-field{margin-top:8px;border:1px solid #d9e5e4;border-radius:16px;padding:18px;background:linear-gradient(180deg,#fbfefd,#f8fafc)}.permission-title{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}.permission-title strong{display:block;font-size:15px;color:#101828}.permission-title small{display:block;font-size:11px;color:#667085;margin-top:5px;line-height:1.5;max-width:720px}.permission-field>div[id^="id_permission_keys"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.permission-field>div[id^="id_permission_keys"]>div{border:1px solid var(--border);border-radius:12px;background:#fff;padding:12px}.permission-field>div[id^="id_permission_keys"]>div>label{font-size:11px;font-weight:850;color:#344054;margin-bottom:7px;display:block}.permission-field ul{grid-template-columns:1fr!important;gap:7px}.permission-field ul label{min-height:42px;padding:10px 11px!important;border-radius:10px!important}.permission-field ul label:hover{border-color:#9bd5cf;background:#f0fdfa}.permission-field input[type="checkbox"]{accent-color:var(--primary)}
.owner-only-pill{display:inline-flex;align-items:center;white-space:nowrap;border:1px solid #b7e4df;background:#ecfdf8;color:#08766d;border-radius:999px;padding:5px 9px;font-size:9px;font-weight:900;letter-spacing:.07em}.owner-dashboard-badge{display:flex;align-items:center;gap:11px;border:1px solid #cce9e5;background:linear-gradient(135deg,#f0fdfa,#f8fafc);border-radius:14px;padding:11px 14px;margin-bottom:16px}.owner-dashboard-badge>span{width:34px;height:34px;border-radius:10px;background:#0f766e;color:#fff;display:grid;place-items:center}.owner-dashboard-badge strong{display:block}.owner-dashboard-badge small{display:block;color:#667085;margin-top:2px}.owner-kpi-grid .kpi{display:flex;gap:13px;align-items:center;min-height:112px}.owner-kpi-grid .kpi-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;background:#f0fdfa;color:#0f766e;font-size:18px;font-weight:900}.owner-kpi-grid .kpi-feature{border-color:#b7e4df;background:linear-gradient(145deg,#fff,#f4fdfb)}
.owner-alert-panel{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:20px;margin-bottom:18px}.alert-panel-head{align-items:center}.owner-alert-grid{display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:10px}.alert-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border:1px solid var(--border);border-radius:13px;padding:13px;min-height:82px;background:#fff;transition:.16s}.alert-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,24,40,.07)}.alert-symbol{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f2f4f7;font-size:16px}.alert-card strong{display:block;font-size:12px}.alert-card small{display:block;color:#667085;font-size:9px;line-height:1.35;margin-top:3px}.alert-card>b{min-width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#f9fafb;border:1px solid var(--border);font-size:14px}.alert-warning{border-color:#fedf89;background:#fffdf7}.alert-warning .alert-symbol{background:#fffaeb;color:#b54708}.alert-danger{border-color:#fecdca;background:#fffafa}.alert-danger .alert-symbol{background:#fef3f2;color:#b42318}.alert-info{border-color:#b2ddff;background:#f8fbff}.alert-info .alert-symbol{background:#eff8ff;color:#175cd3}.alert-ok .alert-symbol{background:#ecfdf3;color:#067647}
.dashboard-charts-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.8fr) minmax(260px,.8fr);gap:18px}.chart-panel{min-height:330px}.chart-wide{min-width:0}.chart-tag{background:#f2f4f7;color:#475467;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:900}.professional-trend{height:255px}.donut-chart-host{min-height:235px;display:grid;align-items:center}.donut-chart-layout{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}.donut-chart{width:146px;height:146px;border-radius:50%;display:grid;place-items:center;margin:auto;box-shadow:inset 0 0 0 1px rgba(15,23,42,.04)}.donut-hole{width:92px;height:92px;border-radius:50%;background:#fff;display:grid;place-content:center;text-align:center;box-shadow:0 1px 10px rgba(15,23,42,.06)}.donut-hole strong{display:block;font-size:17px}.donut-hole small{color:#98a2b3;font-size:9px}.donut-legend{display:flex;flex-direction:column;gap:9px}.donut-legend-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:7px;align-items:center;border-bottom:1px solid #f2f4f7;padding-bottom:7px}.legend-dot{width:9px;height:9px;border-radius:50%;background:var(--dot)}.legend-name{font-size:11px;color:#475467}.donut-legend-row strong{font-size:11px}.donut-legend-row small{font-size:9px;color:#98a2b3;min-width:28px;text-align:end}.recent-orders-panel{margin-top:0}.text-link{font-size:11px;font-weight:800;color:var(--primary)}
.cashier-home-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}.cashier-home-icon{width:52px;height:52px;border-radius:15px;background:#ecfdf3;color:#067647;display:grid;place-items:center;font-size:24px}.cashier-home-card strong{font-size:17px}.cashier-home-card p{margin:5px 0 0;color:#667085;line-height:1.5}.cashier-module-grid{max-width:1100px}



html[dir="rtl"] .professional-form input[dir="ltr"],html[dir="rtl"] .professional-form textarea[dir="ltr"]{text-align:left}html[dir="rtl"] .professional-form input[dir="rtl"],html[dir="rtl"] .professional-form textarea[dir="rtl"]{text-align:right}.professional-form input[dir="ltr"],.professional-form textarea[dir="ltr"]{unicode-bidi:plaintext}.professional-form input[dir="rtl"],.professional-form textarea[dir="rtl"]{unicode-bidi:plaintext}
@media(max-width:1450px){.owner-alert-grid{grid-template-columns:repeat(3,1fr)}.dashboard-charts-grid{grid-template-columns:1.4fr 1fr}.dashboard-charts-grid .chart-panel:last-child{grid-column:2}.chart-wide{grid-row:span 2}}
@media(max-width:1100px){.owner-alert-grid{grid-template-columns:repeat(2,1fr)}.dashboard-charts-grid{grid-template-columns:1fr 1fr}.chart-wide{grid-column:1/-1;grid-row:auto}.dashboard-charts-grid .chart-panel:last-child{grid-column:auto}.permission-field>div[id^="id_permission_keys"]{grid-template-columns:1fr}}
@media(max-width:980px){.owner-alert-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.owner-alert-grid,.dashboard-charts-grid{grid-template-columns:1fr}.dashboard-charts-grid .chart-panel:last-child,.chart-wide{grid-column:auto}.donut-chart-layout{grid-template-columns:1fr}.permission-title{flex-direction:column}.professional-form{padding:16px}.form-actions{margin:20px -16px -16px;padding:12px 16px}}


/* v0.5.3 — Owner exception center, automatic cash shift opening, language switch */
.professional-alert-panel{padding:0;overflow:hidden;border:1px solid #e4e7ec;background:#fff}
.owner-alert-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;border-bottom:1px solid #eaecf0;background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%)}
.owner-alert-heading{display:flex;align-items:center;gap:14px;min-width:0}.owner-alert-heading h2{margin:2px 0 4px;font-size:20px;letter-spacing:-.02em}.owner-alert-heading p:last-child{margin:0;color:#667085;line-height:1.5}.owner-alert-shield{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#101828;color:#fff;font-size:21px;font-weight:800;box-shadow:0 7px 18px rgba(16,24,40,.16);flex:0 0 auto}
.alert-overview{min-width:170px;border-radius:14px;padding:11px 14px;display:flex;align-items:center;gap:10px}.alert-overview-attention{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}.alert-overview-attention>strong{font-size:26px;line-height:1}.alert-overview-attention>span{font-size:11px;font-weight:700;line-height:1.25}.alert-overview-clear{background:#ecfdf3;border:1px solid #abefc6;color:#067647}.alert-overview-clear .alert-check{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#d1fadf;font-size:17px;font-weight:900}.alert-overview-clear strong,.alert-overview-clear small{display:block}.alert-overview-clear strong{font-size:13px}.alert-overview-clear small{font-size:9px;margin-top:2px;color:#16835b}
.professional-alert-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}.owner-alert-item{position:relative;display:flex;gap:12px;min-height:132px;padding:18px;border-inline-end:1px solid #eaecf0;background:#fff;transition:background .16s ease,transform .16s ease,box-shadow .16s ease}.owner-alert-item:last-child{border-inline-end:0}.owner-alert-item:hover{z-index:2;background:#fcfcfd;box-shadow:0 10px 28px rgba(16,24,40,.08);transform:translateY(-1px)}
.owner-alert-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;background:#f2f4f7;color:#344054;font-size:17px}.owner-alert-content{min-width:0;display:flex;flex-direction:column;flex:1}.owner-alert-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.owner-alert-title strong{font-size:12px;line-height:1.35;color:#101828}.owner-alert-content>p{font-size:9.5px;line-height:1.45;color:#667085;margin:6px 0 11px}.owner-alert-action{margin-top:auto;font-size:10px;font-weight:750;color:#475467;display:inline-flex;align-items:center;gap:5px}.owner-alert-action b{font-size:13px;transition:transform .15s}.owner-alert-item:hover .owner-alert-action b{transform:translateX(2px)}
.alert-count,.alert-state-clear{display:inline-grid;place-items:center;min-width:27px;height:25px;border-radius:8px;padding:0 7px;font-size:10px;font-weight:800;flex:0 0 auto}.alert-state-clear{background:#ecfdf3;color:#067647;border:1px solid #abefc6}.owner-alert-item.is-warning .owner-alert-icon{background:#fffaeb;color:#b54708}.owner-alert-item.is-warning .alert-count{background:#fffaeb;color:#b54708;border:1px solid #fedf89}.owner-alert-item.is-danger .owner-alert-icon{background:#fef3f2;color:#b42318}.owner-alert-item.is-danger .alert-count{background:#fef3f2;color:#b42318;border:1px solid #fecdca}.owner-alert-item.is-info .owner-alert-icon{background:#eff8ff;color:#175cd3}.owner-alert-item.is-info .alert-count{background:#eff8ff;color:#175cd3;border:1px solid #b2ddff}.owner-alert-item.is-clear{background:#fcfcfd}.owner-alert-item.is-clear .owner-alert-content>p{color:#98a2b3}

.shift-open-panel{display:grid;grid-template-columns:minmax(300px,1.35fr) minmax(260px,.8fr) auto;gap:24px;align-items:center;padding:24px;background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);border:1px solid #e4e7ec}.shift-open-copy{display:flex;gap:14px;align-items:flex-start}.shift-open-copy h2{margin:2px 0 7px;font-size:22px}.shift-open-copy>div:last-child>p:last-child{margin:0;color:#667085;line-height:1.55;max-width:620px}.shift-open-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#101828;color:#fff;font-size:20px;box-shadow:0 8px 20px rgba(16,24,40,.15);flex:0 0 auto}.automatic-opening-card{background:#fff;border:1px solid #d0d5dd;border-radius:14px;padding:14px 16px;box-shadow:0 2px 8px rgba(16,24,40,.04)}.automatic-opening-card>span{display:block;color:#667085;font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.04em}.automatic-opening-card>strong{display:block;color:#101828;font-size:27px;letter-spacing:-.035em;margin-top:4px}.automatic-opening-card>strong small{font-size:11px;color:#667085;font-weight:700}.automatic-opening-card>p{margin:5px 0 0;color:#98a2b3;font-size:9px;line-height:1.4}.shift-open-action{display:flex;justify-content:flex-end}.shift-open-action .btn{min-width:150px;justify-content:center;min-height:48px}

.language-switch{display:flex;align-items:center}.language-switch button{min-height:38px;padding:0 13px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;color:#344054;font-weight:750;font-size:12px;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:.15s}.language-switch button:hover{border-color:#98a2b3;background:#f9fafb;color:#101828}
html[dir="rtl"] .owner-alert-item:hover .owner-alert-action b{transform:translateX(-2px)}

@media(max-width:1450px){.professional-alert-grid{grid-template-columns:repeat(3,1fr)}.owner-alert-item{border-bottom:1px solid #eaecf0}.owner-alert-item:nth-child(3n){border-inline-end:0}}
@media(max-width:1100px){.shift-open-panel{grid-template-columns:1fr 1fr}.shift-open-action{grid-column:1/-1}.shift-open-action .btn{width:100%}.professional-alert-grid{grid-template-columns:repeat(2,1fr)}.owner-alert-item:nth-child(3n){border-inline-end:1px solid #eaecf0}.owner-alert-item:nth-child(2n){border-inline-end:0}}
@media(max-width:700px){.owner-alert-header{align-items:flex-start;flex-direction:column;padding:18px}.alert-overview{width:100%}.professional-alert-grid{grid-template-columns:1fr}.owner-alert-item,.owner-alert-item:nth-child(2n),.owner-alert-item:nth-child(3n){border-inline-end:0;border-bottom:1px solid #eaecf0;min-height:112px}.owner-alert-item:last-child{border-bottom:0}.shift-open-panel{grid-template-columns:1fr;padding:18px}.shift-open-action{grid-column:auto}.automatic-opening-card>strong{font-size:24px}}

/* Dashboard analytics cards — v0.5.5 refinement */
.dashboard-charts-grid{
  display:grid;
  grid-template-columns:minmax(0,1.75fr) repeat(2,minmax(300px,.82fr));
  gap:20px;
  align-items:stretch;
}
.dashboard-charts-grid .chart-panel{
  min-width:0;
  min-height:318px;
  height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:24px;
}
.dashboard-charts-grid .panel-head{
  margin-bottom:18px;
  gap:14px;
  align-items:flex-start;
}
.dashboard-charts-grid .panel-head h2{font-size:18px;line-height:1.25;margin:0 0 5px}
.dashboard-charts-grid .panel-head p{font-size:11px;line-height:1.45;margin:0;color:#667085}
.chart-tag{flex:0 0 auto;font-size:10px;padding:6px 9px}
.professional-trend{
  height:220px;
  min-height:220px;
  margin-top:auto;
  position:relative;
}
.professional-trend.is-empty{
  display:grid;
  place-items:center;
  height:auto;
  min-height:205px;
  margin-top:0;
}
.chart-empty-state{
  max-width:330px;
  margin:auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#667085;
}
.chart-empty-icon{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:#f0fdfa;
  color:#0f766e;
  font-size:22px;
  font-weight:900;
  margin-bottom:3px;
}
.chart-empty-state strong{font-size:14px;color:#101828}
.chart-empty-state p{font-size:11px;line-height:1.5;margin:0;color:#98a2b3}
.donut-chart-host{
  min-height:220px;
  flex:1;
  display:grid;
  align-items:center;
}
.donut-chart-layout{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:16px;
  align-items:center;
  width:100%;
  min-width:0;
}
.donut-chart{
  width:118px;
  height:118px;
  min-width:118px;
  border-radius:50%;
  margin:auto;
}
.donut-hole{width:74px;height:74px;padding:4px;overflow:hidden}
.donut-hole strong{
  font-size:15px;
  line-height:1.15;
  white-space:nowrap;
  letter-spacing:-.02em;
}
.donut-hole small{font-size:8px;margin-top:2px}
.donut-legend{min-width:0;gap:0}
.donut-legend-row{
  grid-template-columns:9px minmax(58px,1fr) auto 30px;
  gap:7px;
  min-width:0;
  padding:9px 0;
  border-bottom:1px solid #eef2f6;
}
.donut-legend-row:last-child{border-bottom:0}
.legend-dot{width:8px;height:8px}
.legend-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10.5px;
}
.donut-legend-row strong{
  font-size:10.5px;
  line-height:1.2;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.donut-legend-row small{
  min-width:30px;
  font-size:9px;
  white-space:nowrap;
}
.donut-chart-layout.is-empty .donut-chart{opacity:.9}
.donut-chart-layout.is-empty .donut-legend-row strong,
.donut-chart-layout.is-empty .donut-legend-row small{color:#98a2b3}
html[dir="rtl"] .donut-legend-row small{text-align:start}

@media(max-width:1500px){
  .dashboard-charts-grid{grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr) minmax(280px,.85fr)}
  .dashboard-charts-grid .chart-panel{padding:20px}
  .donut-chart-layout{grid-template-columns:104px minmax(0,1fr);gap:12px}
  .donut-chart{width:104px;height:104px;min-width:104px}
  .donut-hole{width:66px;height:66px}
  .donut-hole strong{font-size:13px}
}
@media(max-width:1250px){
  .dashboard-charts-grid{grid-template-columns:1fr 1fr}
  .dashboard-charts-grid .chart-wide{grid-column:1/-1}
  .dashboard-charts-grid .chart-panel{min-height:290px}
  .professional-trend{height:205px;min-height:205px}
  .donut-chart-layout{grid-template-columns:130px minmax(0,1fr)}
  .donut-chart{width:126px;height:126px;min-width:126px}
  .donut-hole{width:78px;height:78px}
  .donut-hole strong{font-size:15px}
}
@media(max-width:760px){
  .dashboard-charts-grid{grid-template-columns:1fr;gap:14px}
  .dashboard-charts-grid .chart-wide{grid-column:auto}
  .dashboard-charts-grid .chart-panel{min-height:auto;padding:18px}
  .professional-trend,.professional-trend.is-empty{height:190px;min-height:190px}
  .donut-chart-host{min-height:190px}
  .donut-chart-layout{grid-template-columns:110px minmax(0,1fr);gap:14px}
  .donut-chart{width:108px;height:108px;min-width:108px}
  .donut-hole{width:68px;height:68px}
}
@media(max-width:430px){
  .donut-chart-layout{grid-template-columns:1fr}
  .donut-chart{width:124px;height:124px}
  .donut-hole{width:76px;height:76px}
}

/* Dashboard mix cards — v0.5.6 */
.dashboard-charts-grid .mix-chart-panel{
  min-height:350px;
  padding:22px 22px 18px;
}
.mix-chart-panel .panel-head{
  margin-bottom:8px;
}
.mix-chart-panel .donut-chart-host{
  min-height:0;
  flex:1;
  display:block;
}
.donut-chart-layout-vertical{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:12px;
  min-width:0;
}
.donut-visual-area{
  min-height:150px;
  display:grid;
  place-items:center;
  padding:4px 0 2px;
}
.donut-chart-layout-vertical .donut-chart{
  width:142px;
  height:142px;
  min-width:142px;
  margin:0;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.045),0 8px 24px rgba(15,23,42,.045);
}
.donut-chart-layout-vertical .donut-hole{
  width:88px;
  height:88px;
  padding:7px;
  overflow:visible;
}
.donut-chart-layout-vertical .donut-hole strong{
  display:block;
  max-width:76px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:17px;
  line-height:1.1;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.donut-chart-layout-vertical .donut-hole small{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:16px;
  margin-top:4px;
  color:#98a2b3;
  font-size:8.5px;
  line-height:1.1;
  white-space:nowrap;
}
.donut-chart-layout-vertical .donut-hole small b{
  color:#667085;
  font-size:8.5px;
}
.mix-breakdown{
  width:100%;
  border:1px solid #eaecf0;
  border-radius:13px;
  overflow:hidden;
  background:#fff;
}
.mix-breakdown .mix-breakdown-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 42px;
  align-items:center;
  gap:10px;
  min-height:43px;
  padding:9px 11px;
  border:0;
  border-bottom:1px solid #f0f2f5;
}
.mix-breakdown .mix-breakdown-row:last-child{border-bottom:0}
.legend-identity{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.mix-breakdown .legend-dot{
  width:9px;
  height:9px;
  min-width:9px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dot) 12%,transparent);
}
.mix-breakdown .legend-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#344054;
  font-size:11px;
  font-weight:650;
}
.mix-breakdown .legend-value{
  max-width:118px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#101828;
  font-size:11px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  text-align:end;
}
.mix-breakdown .legend-percent{
  min-width:42px;
  height:24px;
  padding:0 6px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#f2f4f7;
  color:#667085;
  font-size:9px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.donut-chart-layout-vertical.is-empty .donut-chart{
  box-shadow:inset 0 0 0 1px #e4e7ec;
  opacity:1;
}
.donut-chart-layout-vertical.is-empty .legend-value{color:#667085}
.donut-chart-layout-vertical.is-empty .legend-percent{color:#98a2b3;background:#f8fafc}
.payment-mix-panel .mix-breakdown .legend-value{max-width:132px}
html[dir="rtl"] .mix-breakdown .legend-value{text-align:start}

@media(max-width:1500px){
  .dashboard-charts-grid .mix-chart-panel{padding:20px 18px 16px}
  .donut-chart-layout-vertical .donut-chart{width:132px;height:132px;min-width:132px}
  .donut-chart-layout-vertical .donut-hole{width:82px;height:82px}
  .donut-visual-area{min-height:140px}
  .mix-breakdown .mix-breakdown-row{grid-template-columns:minmax(0,1fr) auto 39px;gap:7px;padding-inline:9px}
  .mix-breakdown .legend-value{font-size:10.5px;max-width:105px}
  .payment-mix-panel .mix-breakdown .legend-value{max-width:118px}
}
@media(max-width:1250px){
  .dashboard-charts-grid .mix-chart-panel{min-height:340px}
  .donut-chart-layout-vertical .donut-chart{width:144px;height:144px;min-width:144px}
  .donut-chart-layout-vertical .donut-hole{width:90px;height:90px}
  .mix-breakdown .legend-value,.payment-mix-panel .mix-breakdown .legend-value{max-width:none}
}
@media(max-width:760px){
  .dashboard-charts-grid .mix-chart-panel{min-height:auto}
  .donut-visual-area{min-height:142px}
  .mix-breakdown .mix-breakdown-row{grid-template-columns:minmax(0,1fr) auto 42px;padding:10px 12px}
}















@media(max-width:600px){.two-col{grid-template-columns:1fr}}


/* ============================================================
   SKLS RMS — CURRENT ORDER FINAL STABLE LAYOUT
   One scrollbar only
   ============================================================ */


/* ============================================================
   POS PAGE
   ============================================================ */







/* ============================================================
   CURRENT ORDER CARD
   ============================================================ */













/* ============================================================
   ORDER HEADER — STAYS VISIBLE
   ============================================================ */



















/* ============================================================
   ORDER TYPE
   ============================================================ */













/* ============================================================
   ORDER CONTEXT
   VERY IMPORTANT:
   no independent scrolling
   ============================================================ */




/* remove previous delivery max-height rule */




/* ============================================================
   DELIVERY WORKFLOW
   ============================================================ */




/* ------------------------------------------------------------
   Delivery heading
   ------------------------------------------------------------ */













/* ------------------------------------------------------------
   Customer badge
   ------------------------------------------------------------ */
















/* ============================================================
   DELIVERY PHONE
   ============================================================ */




























/* ============================================================
   EXISTING CUSTOMER
   ============================================================ */
















/* ============================================================
   PHONE / ADDRESS SELECTORS
   ============================================================ */













/* ============================================================
   INLINE ADD PHONE / ADDRESS
   ============================================================ */
















/* ============================================================
   NEW CUSTOMER
   ============================================================ */






















/* ============================================================
   DELIVERY ZONE / DRIVER
   ============================================================ */




/* ============================================================
   ITEMS HEADER
   ============================================================ */
















/* ============================================================
   ORDER ITEMS
   No nested scrollbar
   ============================================================ */
















/* ============================================================
   CART ITEM
   ============================================================ */

























/* ============================================================
   DISCOUNT / PREP / NOTES
   ============================================================ */













/* ============================================================
   TOTALS
   ============================================================ */










/* ============================================================
   AMOUNT DUE
   ============================================================ */
















/* ============================================================
   CHECKOUT — ALWAYS VISIBLE
   ============================================================ */
















/* ============================================================
   ARABIC
   ============================================================ */










/* ============================================================
   SMALLER WIDTH
   ============================================================ */




/* ============================================================
   TABLET
   ============================================================ */




/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:620px){

    


    


    


    .two-col{
        grid-template-columns:1fr;
    }


    


    

}

/* ==========================================================================
   SKLS RMS — POS
   Single authoritative POS stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   POS workspace
   -------------------------------------------------------------------------- */
.pos-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(500px, 37vw, 590px);
    gap: 22px;
    height: calc(100dvh - 122px);
    min-height: 620px;
    overflow: hidden;
    align-items: stretch;
}

.pos-menu {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pos-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 2px 6px;
    margin-bottom: 12px;
}

.pos-head h1 {
    margin: 3px 0 0;
    font-size: 27px;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.pos-search {
    width: min(390px, 42%);
    min-width: 280px;
    height: 46px;
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Held-order banner
   -------------------------------------------------------------------------- */
.resume-banner {
    margin: 0 0 14px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fffaeb;
}

.resume-banner > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.resume-banner strong {
    color: #93370d;
}

.resume-banner span {
    color: #b54708;
    font-size: 11px;
}

.resume-banner .btn {
    background: #fff;
}

/* --------------------------------------------------------------------------
   Categories
   -------------------------------------------------------------------------- */
.category-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 14px;
    scrollbar-width: none;
}

.category-strip::-webkit-scrollbar {
    display: none;
}

.category-chip {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 15px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #fff;
    color: #475467;
    font-weight: 750;
    white-space: nowrap;
    transition: .15s ease;
}

.category-chip:hover {
    border-color: #98a2b3;
    background: #f9fafb;
}

.category-chip.active {
    border-color: #101828;
    background: #101828;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */
.product-grid {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    align-content: start;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1px 4px 22px 1px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.product-card {
    min-height: 160px;
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .035);
    transition: .16s ease;
}

.product-card:hover {
    border-color: #9bd5cf;
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(16, 24, 40, .08);
}

.product-add {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    background: transparent;
    text-align: start;
    color: inherit;
}

.product-accent {
    display: block;
    width: 100%;
    height: 5px;
    flex: 0 0 5px;
    background: var(--accent);
}

.product-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 14px 7px;
}

.product-body small {
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}

.product-body strong {
    color: #101828;
    font-size: 16px;
    line-height: 1.3;
}

.product-body span {
    color: #98a2b3;
    font-size: 10px;
}

.product-add > b {
    margin-top: auto;
    padding: 7px 14px 14px;
    color: #0f766e;
    font-size: 16px;
    font-weight: 850;
}

.product-add > b small {
    color: #98a2b3;
    font-size: 9px;
}

/* ==========================================================================
   CURRENT ORDER
   The card has ONE scrollbar. Header and checkout remain sticky.
   ========================================================================== */
.current-order-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #cfd6df;
    border-top: 4px solid #0f766e;
    border-radius: 22px;
    background: #fff;
    box-shadow:
        0 18px 48px rgba(15, 23, 42, .11),
        0 4px 12px rgba(15, 23, 42, .05);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.current-order-card::-webkit-scrollbar {
    width: 7px;
}

.current-order-card::-webkit-scrollbar-track {
    background: transparent;
}

.current-order-card::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
}

/* --------------------------------------------------------------------------
   Current-order header
   -------------------------------------------------------------------------- */
.order-card-head {
    position: sticky;
    top: 0;
    z-index: 20;
    flex: 0 0 auto;
    min-height: 106px;
    padding: 17px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e4e7ec;
    background:
        linear-gradient(135deg, #effcf9 0%, #ffffff 62%, #f8fafc 100%);
    box-shadow: 0 3px 8px rgba(15, 23, 42, .025);
}

.order-card-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.current-order-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #dff8f2;
    color: #0f766e;
    font-size: 21px;
    font-weight: 900;
}

.order-card-title .eyebrow {
    margin: 0 0 2px;
    color: #0f766e;
}

.order-card-title h2 {
    margin: 0;
    color: #101828;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
}

.order-status-label {
    display: inline-flex;
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #667085;
    font-size: 9px;
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   Order type
   -------------------------------------------------------------------------- */
.order-type-wrap {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.order-type-wrap label {
    color: #475467;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

.order-type-wrap select {
    width: 100%;
    height: 46px;
    padding-inline: 12px;
    border: 1.5px solid #475467;
    border-radius: 11px;
    outline: none;
    background: #fff;
    color: #101828;
    font-size: 14px;
    font-weight: 750;
}

.order-type-wrap select:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .10);
}

/* --------------------------------------------------------------------------
   Order context
   No independent scrolling here.
   -------------------------------------------------------------------------- */
.order-context {
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 14px 16px;
    border-bottom: 1px solid #e4e7ec;
    background: #fff;
}

.order-context label,
.order-controls label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #475467;
    font-size: 10px;
    font-weight: 750;
}

.order-context input,
.order-context select,
.order-context textarea,
.order-controls input,
.order-controls textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #101828;
}

.order-context input:focus,
.order-context select:focus,
.order-context textarea:focus,
.order-controls input:focus,
.order-controls textarea:focus {
    border-color: #5bb8af;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .08);
}

.context-row {
    margin: 0;
}

/* ==========================================================================
   DELIVERY — PHONE FIRST
   ========================================================================== */
.delivery-fields,
.delivery-customer-workflow {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
}

.delivery-workflow-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid #cce8e3;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0fdfa, #f8fffd);
}

.delivery-workflow-heading > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delivery-workflow-heading strong {
    color: #134e4a;
    font-size: 12px;
}

.delivery-workflow-heading small {
    color: #667085;
    font-size: 9px;
    line-height: 1.4;
}

.delivery-customer-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #667085;
    font-size: 9px;
    font-weight: 850;
}

.delivery-customer-badge[data-state="found"] {
    background: #dcfae6;
    color: #067647;
}

.delivery-customer-badge[data-state="new"] {
    background: #fff4e5;
    color: #b54708;
}

.delivery-customer-badge[data-state="loading"] {
    background: #eff8ff;
    color: #175cd3;
}

.delivery-customer-badge[data-state="error"] {
    background: #fee4e2;
    color: #b42318;
}

.delivery-phone-field > span b,
.delivery-routing-fields label > span b,
.delivery-new-customer label > span b {
    color: #d92d20;
}

.delivery-phone-input-wrap {
    position: relative;
}

.delivery-phone-input-wrap input {
    height: 47px !important;
    padding-inline: 12px 68px !important;
    border: 1px solid #98a2b3 !important;
    border-radius: 11px !important;
    font-size: 16px !important;
    font-weight: 850;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.delivery-phone-input-wrap input:focus {
    border-color: #0f766e !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .10);
}

.phone-progress {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 4px 6px;
    border-radius: 7px;
    background: #f2f4f7;
    color: #98a2b3;
    font-size: 9px;
    font-weight: 750;
}

.phone-progress b {
    color: #0f766e;
}

.delivery-phone-field > small {
    color: #98a2b3;
    font-size: 9px;
}

.delivery-lookup-loading {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 9px;
    background: #f8fafc;
    color: #667085;
    font-size: 10px;
}

.mini-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid #d0d5dd;
    border-top-color: #0f766e;
    border-radius: 50%;
    animation: rms-spin .7s linear infinite;
}

@keyframes rms-spin {
    to { transform: rotate(360deg); }
}

/* Existing customer */
.delivery-existing-customer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #b7e4d8;
    border-radius: 13px;
    background: #fbfffe;
}

.delivery-customer-summary {
    display: flex;
    align-items: center;
    gap: 9px;
}

.customer-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0f766e;
    color: #fff;
    font-weight: 900;
}

.delivery-customer-summary small {
    display: block;
    color: #667085;
    font-size: 9px;
}

.delivery-customer-summary strong {
    display: block;
    margin-top: 1px;
    color: #101828;
    font-size: 13px;
}

.delivery-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 8px;
}

.inline-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.inline-contact-editor {
    padding: 10px;
    border: 1px dashed #cfd6df;
    border-radius: 10px;
    background: #fff;
}

.inline-contact-editor label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.inline-contact-editor input,
.inline-contact-editor textarea {
    width: 100%;
    min-height: 41px;
    padding: 8px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #fff;
}

.inline-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 8px;
}

/* New customer */
.delivery-new-customer {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border: 1px solid #fedf89;
    border-radius: 13px;
    background: #fffcf5;
}

.new-customer-callout strong {
    display: block;
    color: #93370d;
    font-size: 12px;
}

.new-customer-callout span {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 9px;
}

.delivery-routing-fields {
    padding-top: 10px;
    border-top: 1px dashed #d0d5dd;
}

/* ==========================================================================
   CART
   ========================================================================== */
.cart-head {
    flex: 0 0 auto;
    min-height: 52px;
    padding: 9px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e4e7ec;
    background: #f8fafc;
}

.cart-head-title {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cart-head-title > span {
    color: #344054;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}

.cart-head-title small {
    color: #98a2b3;
    font-size: 8px;
}

.cart-count-badge {
    min-width: 34px;
    height: 30px;
    padding-inline: 9px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.cart-lines {
    flex: 0 0 auto;
    width: 100%;
    min-height: 175px;
    max-height: none;
    overflow: visible;
    padding: 10px 13px;
    background: #fff;
}

.empty-cart {
    min-height: 155px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    text-align: center;
    color: #98a2b3;
}

.empty-cart > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 9px;
    border-radius: 50%;
    background: #f2f4f7;
    font-size: 21px;
}

.empty-cart strong {
    color: #344054;
    font-size: 13px;
}

.empty-cart p {
    margin: 4px 0 0;
    color: #98a2b3;
    font-size: 10px;
}

/* Actual cart line */
.cart-line {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-bottom: 8px;
    padding: 11px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .025);
}

.cart-line:last-child {
    margin-bottom: 0;
}

.cart-line-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.cart-line-title strong {
    min-width: 0;
    color: #101828;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.cart-line-meta {
    margin-top: 4px;
    color: #667085;
    font-size: 9px;
    line-height: 1.45;
}

.cart-line-meta .removed {
    color: #b93815;
}

.cart-line-meta .added {
    color: #067647;
}

.cart-price {
    white-space: nowrap;
    color: #101828;
    font-size: 12px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
}

.qty-control button {
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: #344054;
    font-weight: 800;
}

.qty-control button:hover {
    border-color: #0f766e;
    background: #f0fdfa;
    color: #0f766e;
}

.qty-control button.remove {
    margin-inline-start: 5px;
    color: #b42318;
}

.qty-control b {
    min-width: 28px;
    text-align: center;
}

/* ==========================================================================
   ORDER CONTROLS
   ========================================================================== */
.order-controls {
    flex: 0 0 auto;
    padding: 11px 16px;
    border-top: 1px solid #e4e7ec;
    background: #fbfcfd;
}

.order-controls .two-col {
    gap: 8px;
}

.order-controls input {
    min-height: 40px;
    font-size: 12px;
}

.order-controls textarea {
    height: 48px;
    min-height: 48px;
    resize: none;
    font-size: 11px;
}

/* ==========================================================================
   TOTALS
   ========================================================================== */
.amount-panel {
    flex: 0 0 auto;
    padding: 10px 16px 12px;
    border-top: 1px solid #e4e7ec;
    background: #fff;
}

.amount-panel > div:not(.amount-due) {
    min-height: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #667085;
    font-size: 10.5px;
}

.amount-panel > div:not(.amount-due) b {
    color: #475467;
    font-weight: 850;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.amount-due {
    min-height: 61px;
    margin-top: 8px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f766e, #15877d);
    color: #fff;
    box-shadow: 0 9px 22px rgba(15, 118, 110, .18);
}

.amount-due-label {
    display: flex;
    flex-direction: column;
}

.amount-due-label span {
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.amount-due-label small {
    margin-top: 1px;
    color: rgba(255, 255, 255, .73);
    font-size: 8px;
}

.amount-due strong {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #fff;
    font-size: 23px;
    font-weight: 900;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.amount-due strong small {
    font-size: 9px;
    opacity: .85;
}

/* ==========================================================================
   CHECKOUT
   Always visible at the bottom of the order card.
   ========================================================================== */
.sticky-checkout {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex: 0 0 auto;
    min-height: 72px;
    display: grid;
    grid-template-columns: 94px 106px minmax(170px, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-top: 1px solid #d0d5dd;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -7px 20px rgba(15, 23, 42, .07);
    backdrop-filter: blur(10px);
}

.sticky-checkout .btn {
    height: 52px;
    min-height: 52px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 850;
}

.checkout-clear {
    border: 1px solid #fda29b;
    background: #fff;
    color: #b42318;
}

.checkout-hold {
    border: 1px solid #d0d5dd;
    background: #f2f4f7;
    color: #344054;
}

.checkout-pay {
    display: flex !important;
    flex-direction: column;
    gap: 1px !important;
    border: 1px solid #0f766e !important;
    background: #0f766e !important;
    color: #fff !important;
    box-shadow: 0 8px 19px rgba(15, 118, 110, .20);
}

.checkout-pay:hover {
    background: #115e59 !important;
}

.checkout-pay strong {
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    opacity: .9;
    white-space: nowrap;
}

/* ==========================================================================
   CUSTOMIZATION + PAYMENT
   ========================================================================== */
.payment-due-box {
    margin-bottom: 15px;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #b7e4df;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdfa, #fff);
}

.payment-due-box span {
    color: #475467;
    font-size: 12px;
    font-weight: 800;
}

.payment-due-box strong {
    color: #067647;
    font-size: 24px;
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.payment-methods label input {
    display: none;
}

.payment-methods label span {
    min-height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid #d0d5dd;
    border-radius: 11px;
    background: #fff;
    font-weight: 850;
    transition: .15s ease;
}

.payment-methods label span:hover {
    border-color: #98a2b3;
    background: #f9fafb;
}

.payment-methods label input:checked + span {
    border-color: #0f766e;
    background: #ecfdf3;
    color: #067647;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, .08);
}

/* ==========================================================================
   RTL
   ========================================================================== */
html[dir="rtl"] .pos-head h1 {
    letter-spacing: 0;
}

html[dir="rtl"] .current-order-card {
    direction: rtl;
}

html[dir="rtl"] .delivery-phone-input-wrap input {
    direction: ltr;
    text-align: right;
}

html[dir="rtl"] .phone-progress {
    direction: ltr;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1450px) {
    .pos-page {
        grid-template-columns: minmax(0, 1fr) 470px;
        gap: 16px;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    }

    .delivery-contact-grid {
        grid-template-columns: 1fr;
    }

    .sticky-checkout {
        grid-template-columns: 88px 98px minmax(145px, 1fr);
    }
}

@media (max-width: 1080px) {
    .pos-page {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .pos-menu {
        height: 65vh;
        min-height: 560px;
    }

    .current-order-card {
        height: auto;
        max-height: none;
        margin-top: 20px;
        overflow: visible;
    }

    .order-card-head {
        position: relative;
    }

    .sticky-checkout {
        position: sticky;
        bottom: 0;
    }
}

@media (max-width: 700px) {
    .pos-head {
        align-items: stretch;
        flex-direction: column;
    }

    .pos-search {
        width: 100%;
        min-width: 0;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .order-type-wrap {
        width: 100%;
        flex: auto;
    }

    .order-type-wrap select {
        width: 100%;
    }

    .delivery-contact-grid,
    .two-col {
        grid-template-columns: 1fr;
    }

    .sticky-checkout {
        grid-template-columns: 1fr 1fr;
    }

    .checkout-pay {
        grid-column: 1 / -1;
    }

    .payment-methods {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .product-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .product-card {
        min-height: 145px;
    }

    .product-body strong {
        font-size: 14px;
    }
}


/* ============================================================
   SKLS RMS — Purchasing
   ============================================================ */

.purchase-create-form{
    max-width:1100px;
}

.purchase-section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    margin:23px 0 14px;
    padding-top:20px;

    border-top:1px solid #eaecf0;
}

.purchase-section-heading:first-of-type{
    margin-top:0;
    padding-top:0;
    border-top:0;
}

.purchase-section-heading>div{
    display:flex;
    align-items:center;
    gap:10px;
}

.purchase-section-number{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border-radius:9px;

    background:#0f766e;
    color:#fff;

    font-size:11px;
    font-weight:900;
}

.purchase-section-heading strong{
    display:block;
    color:#101828;
    font-size:14px;
}

.purchase-section-heading small{
    display:block;
    margin-top:2px;
    color:#98a2b3;
    font-size:9px;
}


/* Items */

.purchase-line-labels{
    display:grid;

    grid-template-columns:
        minmax(220px,1.8fr)
        minmax(110px,.7fr)
        minmax(120px,.8fr)
        120px
        38px;

    gap:8px;

    padding:0 3px 6px;

    color:#667085;

    font-size:9px;
    font-weight:800;
}

.purchase-line-friendly{
    display:grid;

    grid-template-columns:
        minmax(220px,1.8fr)
        minmax(110px,.7fr)
        minmax(120px,.8fr)
        120px
        38px;

    gap:8px;

    align-items:center;

    margin-bottom:8px;
}

.purchase-line-friendly select,
.purchase-line-friendly input{
    width:100%;
    min-width:0;

    min-height:43px;

    padding:8px 10px;

    border:1px solid #d0d5dd;
    border-radius:10px;

    background:#fff;
}

.purchase-input-with-unit{
    position:relative;
}

.purchase-input-with-unit input{
    padding-inline-end:40px;
}

.purchase-unit{
    position:absolute;

    inset-inline-end:9px;
    top:50%;

    transform:translateY(-50%);

    color:#98a2b3;

    font-size:9px;
}

.purchase-line-total{
    min-height:43px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;

    padding:6px 10px;

    border:1px solid #e4e7ec;
    border-radius:10px;

    background:#f8fafc;
}

.purchase-line-total strong{
    color:#101828;
    font-size:12px;
    font-variant-numeric:tabular-nums;
}

.purchase-line-total small{
    color:#98a2b3;
    font-size:8px;
}


/* Payment type */

.purchase-payment-options{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:10px;

    margin-bottom:15px;
}

.purchase-payment-option{
    cursor:pointer;
}

.purchase-payment-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.purchase-payment-option>span{
    min-height:115px;

    display:flex;
    flex-direction:column;

    padding:14px;

    border:1px solid #d0d5dd;
    border-radius:13px;

    background:#fff;

    transition:.15s ease;
}

.purchase-payment-option>span>b{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    margin-bottom:9px;

    border-radius:9px;

    background:#f2f4f7;

    color:#475467;
}

.purchase-payment-option strong{
    color:#101828;
    font-size:12px;
}

.purchase-payment-option small{
    margin-top:4px;

    color:#667085;

    font-size:9px;
    line-height:1.4;
}

.purchase-payment-option:hover>span{
    border-color:#98a2b3;
}

.purchase-payment-option input:checked+span{
    border-color:#0f766e;

    background:#f0fdfa;

    box-shadow:
        0 0 0 2px rgba(15,118,110,.08);
}

.purchase-payment-option input:checked+span>b{
    background:#0f766e;
    color:#fff;
}


/* Payment details */

.purchase-payment-details{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:12px;

    margin-bottom:15px;
}


/* Summary */

.purchase-summary{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    overflow:hidden;

    margin-top:18px;

    border:1px solid #d0d5dd;
    border-radius:14px;

    background:#fff;
}

.purchase-summary>div{
    padding:14px 16px;

    border-inline-end:1px solid #eaecf0;
}

.purchase-summary>div:last-child{
    border-inline-end:0;
}

.purchase-summary span{
    display:block;

    color:#667085;

    font-size:9px;
    font-weight:750;
}

.purchase-summary strong{
    display:flex;
    align-items:baseline;
    gap:4px;

    margin-top:5px;

    color:#101828;

    font-size:20px;

    font-variant-numeric:tabular-nums;
}

.purchase-summary strong span{
    color:inherit;
    font-size:inherit;
}

.purchase-summary strong small{
    color:#98a2b3;
    font-size:9px;
}

.purchase-credit-summary.has-credit{
    background:#fffaeb;
}

.purchase-credit-summary.has-credit strong{
    color:#b54708;
}


/* Credit notice */

.purchase-credit-notice{
    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-top:10px;

    padding:11px 12px;

    border:1px solid #fedf89;
    border-radius:11px;

    background:#fffaeb;
}

.purchase-credit-notice>span{
    width:28px;
    height:28px;

    display:grid;
    place-items:center;

    flex:0 0 28px;

    border-radius:8px;

    background:#f79009;

    color:#fff;
}

.purchase-credit-notice strong{
    display:block;

    color:#93370d;

    font-size:10px;
}

.purchase-credit-notice small{
    display:block;

    margin-top:2px;

    color:#b54708;

    font-size:9px;
}


/* Purchase list badges */

.purchase-payment-badge{
    display:inline-flex;
    align-items:center;

    padding:5px 8px;

    border-radius:999px;

    font-size:9px;
    font-weight:850;

    white-space:nowrap;
}

.purchase-payment-badge.paid{
    background:#ecfdf3;
    color:#067647;
}

.purchase-payment-badge.partial{
    background:#fffaeb;
    color:#b54708;
}

.purchase-payment-badge.credit{
    background:#fff4ed;
    color:#b93815;
}

.purchase-balance-due{
    color:#b42318;
}

.purchase-balance-clear{
    color:#067647;
}


/* Responsive */

@media(max-width:900px){

    .purchase-payment-options{
        grid-template-columns:1fr;
    }

    .purchase-payment-option>span{
        min-height:auto;
    }

    .purchase-payment-details,
    .purchase-summary{
        grid-template-columns:1fr;
    }

    .purchase-summary>div{
        border-inline-end:0;
        border-bottom:1px solid #eaecf0;
    }

    .purchase-summary>div:last-child{
        border-bottom:0;
    }

    .purchase-line-labels{
        display:none;
    }

    .purchase-line-friendly{
        grid-template-columns:1fr 1fr;
    }

    .purchase-line-friendly .purchase-item{
        grid-column:1/-1;
    }

    .purchase-line-total{
        align-items:flex-start;
    }
}

/* ===== Consolidated former POS inline styles ===== */
/* ============================================================
   SKLS RMS POS — visual refresh v070
   Same color tokens as before. Reworked for a calmer, more
   legible, more deliberately laid-out screen: clearer type
   scale, more consistent rhythm, bigger touch targets, and a
   single point of visual weight (the Pay button / amount due).
   Scoped to .pos-v2 so it does not disturb the rest of RMS.
   ============================================================ */


#deliveryFields[hidden],
#deliveryRoutingFields[hidden],
#tableRow[hidden],
#takeawayCustomerRow[hidden],
[hidden] {
  display: none !important;
}

:root {
  /* --- unchanged brand tokens --- */
  --pos-bg: #f4f7f9;
  --pos-card: #ffffff;
  --pos-card-soft: #f8fafb;
  --pos-border: #e3e9ee;
  --pos-border-strong: #d3dde5;
  --pos-text: #172033;
  --pos-muted: #667085;
  --pos-primary: #0f8278;
  --pos-primary-dark: #096c64;
  --pos-primary-soft: #eaf8f5;
  --pos-blue-soft: #eff6ff;
  --pos-warning-soft: #fff7ed;
  --pos-danger: #b42318;
  --pos-danger-soft: #fff4f2;
  --pos-shadow: 0 12px 34px rgba(16, 24, 40, .075);

  --pay-ink: #172033;
  --pay-muted: #667085;
  --pay-border: #e7eaf0;
  --pay-surface: #ffffff;
  --pay-soft: #f7f8fa;
  --pay-accent: #0f8278;
  --pay-accent-soft: #edf9f7;
  --pay-danger: #b42318;
  --pay-danger-soft: #fff4f2;
  --pay-shadow: 0 28px 80px rgba(16, 24, 40, .18);

  /* --- new: type + rhythm system (no new colors) --- */
  --pos-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --pos-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Tajawal', 'Cairo', sans-serif;
  --pos-radius-lg: 20px;
  --pos-radius-md: 14px;
  --pos-radius-sm: 10px;
  --pos-space-1: 6px;
  --pos-space-2: 10px;
  --pos-space-3: 16px;
  --pos-space-4: 22px;
  --pos-space-5: 30px;
}

.pos-v2, .pos-v2 input, .pos-v2 select, .pos-v2 textarea, .pos-v2 button {
  font-family: var(--pos-font-body);
}

/* Workspace */

.pos-page.pos-v2 {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  padding: var(--pos-space-3);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(520px, 1fr);
  gap: var(--pos-space-4);
  align-items: start;
  background: var(--pos-bg);
  color: var(--pos-text);
  font-size: 15px;
  line-height: 1.45;
}

.pos-v2 .pos-menu,
.pos-v2 .current-order-card {
  border: 1px solid var(--pos-border);
  background: var(--pos-card);
  box-shadow: var(--pos-shadow);
}

.pos-v2 .pos-menu {
  min-width: 0;
  border-radius: var(--pos-radius-lg);
  padding: var(--pos-space-4);
  min-height: calc(100vh - 105px);
}

.pos-v2 .current-order-card {
  min-width: 0;
  border-radius: var(--pos-radius-lg);
  position: sticky;
  top: 12px;
  max-height: calc(100dvh - 118px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b7c2cc transparent;
}

/* Resume banner */

.pos-v2 .resume-banner {
  margin-bottom: var(--pos-space-4);
  padding: 14px 16px;
  border-radius: var(--pos-radius-md);
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pos-v2 .resume-banner > div {
  display: grid;
  gap: 3px;
}

.pos-v2 .resume-banner strong {
  color: #1d4ed8;
  font-size: .92rem;
}

.pos-v2 .resume-banner span {
  color: #475569;
  font-size: .84rem;
}

/* Header + search */

.pos-v2 .pos-friendly-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  align-items: center;
  gap: var(--pos-space-4);
  margin-bottom: var(--pos-space-4);
  padding-bottom: var(--pos-space-4);
  border-bottom: 1px solid var(--pos-border);
}

.pos-v2 .pos-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.pos-v2 .pos-title-icon,
.pos-v2 .current-order-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--pos-primary);
  background: var(--pos-primary-soft);
  border: 1px solid rgba(15, 130, 120, .12);
}

.pos-v2 .pos-title-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
}

.pos-v2 .current-order-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.pos-v2 .pos-title-icon svg,
.pos-v2 .current-order-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pos-v2 .eyebrow {
  margin: 0 0 3px;
  color: var(--pos-muted);
  font-size: .8rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}

.pos-v2 .pos-head h1 {
  margin: 0;
  font-family: var(--pos-font-display);
  color: var(--pos-text);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.01em;
}

.pos-v2 .pos-head-helper {
  display: block;
  margin-top: 6px;
  color: var(--pos-muted);
  font-size: .86rem;
}

.pos-v2 .pos-search-modern {
  position: relative;
  min-height: 54px;
  border: 1.5px solid var(--pos-border-strong);
  border-radius: var(--pos-radius-md);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pos-v2 .pos-search-modern:focus-within {
  border-color: var(--pos-primary);
  box-shadow: 0 0 0 4px rgba(15, 130, 120, .1);
}

.pos-v2 .pos-search-modern > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: #7a8698;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.pos-v2 .pos-search-modern input {
  min-width: 0;
  width: 100%;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 50px;
  color: var(--pos-text);
  font-size: .92rem;
}

.pos-v2 .pos-search-clear {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 9px;
  background: #eef2f5;
  color: #5d6979;
  cursor: pointer;
  font-size: 1.1rem;
}

.pos-v2 .pos-search-clear:hover {
  background: #e4e9ed;
}

/* Section micro headings */

.pos-v2 .pos-list-heading,
.pos-v2 .order-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pos-v2 .pos-list-heading {
  margin: 0 2px 12px;
}

.pos-v2 .order-section-heading {
  padding: 18px 20px 8px;
}

.pos-v2 .pos-list-heading span,
.pos-v2 .order-section-heading span {
  color: var(--pos-text);
  font-size: .86rem;
  font-weight: 700;
}

.pos-v2 .pos-list-heading small,
.pos-v2 .order-section-heading small {
  color: var(--pos-muted);
  font-size: .76rem;
}

/* Categories */

.pos-v2 .category-strip {
  margin: 0 0 20px;
  padding: 3px 0 8px;
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pos-v2 .category-strip::-webkit-scrollbar {
  display: none;
}

.pos-v2 .category-chip {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 17px;
  border: 1.5px solid var(--pos-border);
  border-radius: 999px;
  background: #fff;
  color: #475467;
  font: inherit;
  font-size: .86rem;
  font-weight: 650;
  cursor: pointer;
  transition: .15s ease;
}

.pos-v2 .category-chip:hover {
  border-color: rgba(15, 130, 120, .35);
  background: #f7fbfa;
  color: var(--pos-primary-dark);
}

.pos-v2 .category-chip.active {
  border-color: var(--pos-primary);
  background: var(--pos-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 130, 120, .18);
}

/* Product grid */

.pos-v2 .product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  align-content: start;
}

.pos-v2 .product-card {
  min-width: 0;
  border: 1px solid var(--pos-border);
  border-radius: 17px;
  overflow: hidden;
  background: #fff;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.pos-v2 .product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 130, 120, .35);
  box-shadow: 0 10px 24px rgba(16, 24, 40, .09);
}

.pos-v2 .product-add {
  position: relative;
  width: 100%;
  min-height: 132px;
  border: 0;
  background: #fff;
  padding: 16px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 13px;
  text-align: start;
  cursor: pointer;
  color: inherit;
}

.pos-v2 .product-accent {
  position: absolute;
  inset-inline-start: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 6px 6px 0;
  background: var(--accent, var(--pos-primary));
}

html[dir="rtl"] .pos-v2 .product-accent {
  border-radius: 6px 0 0 6px;
}

.pos-v2 .product-body {
  min-width: 0;
  padding-inline-start: 5px;
  display: grid;
  align-content: start;
  gap: 5px;
}

.pos-v2 .product-body small {
  color: var(--pos-muted);
  font-size: .72rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-v2 .product-body strong {
  color: var(--pos-text);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.pos-v2 .product-body > span {
  color: #98a2b3;
  font-size: .72rem;
}

.pos-v2 .product-add > b {
  justify-self: start;
  padding: 7px 11px;
  border-radius: 10px;
  color: var(--pos-primary-dark);
  background: var(--pos-primary-soft);
  font-size: .94rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pos-v2 .product-add > b small {
  margin-inline-start: 3px;
  color: #5d736f;
  font-size: .66rem;
  font-weight: 600;
}

/* Order panel */

.pos-v2 .pos-order-head {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--pos-border);
  background: rgba(255, 255, 255, .97);
  position: sticky;
  top: 0;
  z-index: 5;
}

.pos-v2 .order-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pos-v2 .order-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.pos-v2 .order-title-line h2 {
  margin: 0;
  font-family: var(--pos-font-display);
  color: var(--pos-text);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.2;
}

.pos-v2 .order-status-label {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--pos-primary-dark);
  background: var(--pos-primary-soft);
  font-size: .7rem;
  font-weight: 700;
}

.pos-v2 .order-type-modern {
  display: grid;
  gap: 8px;
}

.pos-v2 .order-type-modern > label {
  color: var(--pos-muted);
  font-size: .74rem;
  font-weight: 700;
}

.pos-v2 .order-type-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 5px;
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-md);
  background: #f7f9fa;
}

.pos-v2 .order-type-segment {
  min-width: 0;
  min-height: 54px;
  padding: 7px 5px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: inherit;
  transition: .15s ease;
}

.pos-v2 .order-type-segment svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pos-v2 .order-type-segment span {
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}

.pos-v2 .order-type-segment:hover {
  color: var(--pos-primary);
}

.pos-v2 .order-type-segment.active {
  border-color: rgba(15, 130, 120, .2);
  background: #fff;
  color: var(--pos-primary-dark);
  box-shadow: 0 3px 10px rgba(16, 24, 40, .08);
}

.pos-v2 .pos-native-order-type {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Context */

.pos-v2 .order-context {
  margin: 0 16px 10px;
  padding: 16px;
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-md);
  background: var(--pos-card-soft);
}

.pos-v2 .order-context label,
.pos-v2 .order-controls label,
.pos-v2 .delivery-fields label {
  display: grid;
  gap: 7px;
}

.pos-v2 .order-context label > span,
.pos-v2 .order-controls label > span,
.pos-v2 .delivery-fields label > span {
  color: #475467;
  font-size: .78rem;
  font-weight: 700;
}

.pos-v2 .order-context select,
.pos-v2 .order-context input,
.pos-v2 .order-context textarea,
.pos-v2 .order-controls select,
.pos-v2 .order-controls input,
.pos-v2 .order-controls textarea,
.pos-v2 .delivery-fields select,
.pos-v2 .delivery-fields input,
.pos-v2 .delivery-fields textarea {
  width: 100%;
  min-height: 46px;
  border: 1.5px solid var(--pos-border-strong);
  border-radius: var(--pos-radius-sm);
  background: #fff;
  color: var(--pos-text);
  padding: 10px 12px;
  outline: none;
  font: inherit;
  font-size: .88rem;
  transition: .15s ease;
}

.pos-v2 .order-context textarea,
.pos-v2 .order-controls textarea,
.pos-v2 .delivery-fields textarea {
  resize: vertical;
}

.pos-v2 .order-context select:focus,
.pos-v2 .order-context input:focus,
.pos-v2 .order-context textarea:focus,
.pos-v2 .order-controls input:focus,
.pos-v2 .order-controls textarea:focus,
.pos-v2 .delivery-fields select:focus,
.pos-v2 .delivery-fields input:focus,
.pos-v2 .delivery-fields textarea:focus {
  border-color: var(--pos-primary);
  box-shadow: 0 0 0 3px rgba(15, 130, 120, .09);
}

/* Delivery workflow */

.pos-v2 .delivery-fields {
  display: grid;
  gap: 14px;
}

.pos-v2 .delivery-workflow-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pos-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pos-v2 .delivery-workflow-heading > div {
  display: grid;
  gap: 2px;
}

.pos-v2 .delivery-workflow-heading strong {
  color: var(--pos-text);
  font-size: .88rem;
  font-weight: 700;
}

.pos-v2 .delivery-workflow-heading small {
  color: var(--pos-muted);
  font-size: .74rem;
}

.pos-v2 .delivery-customer-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef2f5;
  color: #667085;
  font-size: .68rem;
  font-weight: 700;
}

.pos-v2 .delivery-customer-badge[data-state="found"] {
  color: #08735f;
  background: #e9f9f3;
}

.pos-v2 .delivery-customer-badge[data-state="new"] {
  color: #9a5b09;
  background: #fff4df;
}

.pos-v2 .delivery-phone-input-wrap {
  position: relative;
}

.pos-v2 .delivery-phone-input-wrap input {
  padding-inline-end: 66px;
}

.pos-v2 .phone-progress {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pos-muted);
  font-size: .72rem;
  font-weight: 600;
}

.pos-v2 .delivery-existing-customer,
.pos-v2 .delivery-new-customer,
.pos-v2 .inline-contact-editor {
  padding: 14px;
  border: 1px solid var(--pos-border);
  border-radius: 14px;
  background: #fff;
}

.pos-v2 .delivery-customer-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pos-v2 .customer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--pos-primary-dark);
  background: var(--pos-primary-soft);
  font-weight: 800;
}

.pos-v2 .delivery-customer-summary > div:last-child {
  display: grid;
  gap: 2px;
}

.pos-v2 .delivery-customer-summary small {
  color: var(--pos-muted);
  font-size: .7rem;
}

.pos-v2 .delivery-customer-summary strong {
  color: var(--pos-text);
  font-size: .9rem;
  font-weight: 700;
}

.pos-v2 .delivery-contact-grid,
.pos-v2 .delivery-routing-fields,
.pos-v2 .two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.pos-v2 .inline-contact-actions,
.pos-v2 .inline-editor-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pos-v2 .new-customer-callout {
  margin-bottom: 11px;
  display: grid;
  gap: 2px;
}

.pos-v2 .new-customer-callout strong {
  color: #9a5b09;
  font-weight: 700;
}

.pos-v2 .new-customer-callout span {
  color: var(--pos-muted);
  font-size: .74rem;
}

/* Cart */

.pos-v2 .cart-head {
  padding: 14px 20px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pos-v2 .cart-head-title {
  display: grid;
  gap: 2px;
}

.pos-v2 .cart-head-title span {
  color: var(--pos-text);
  font-size: .86rem;
  font-weight: 700;
}

.pos-v2 .cart-head-title small {
  color: var(--pos-muted);
  font-size: .72rem;
}

.pos-v2 .cart-count-badge {
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--pos-primary-dark);
  background: var(--pos-primary-soft);
  font-size: .76rem;
  font-weight: 800;
}

.pos-v2 .cart-lines {
  margin: 0 16px 10px;
  min-height: 150px;
  max-height: 310px;
  overflow-y: auto;
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-md);
  background: #fff;
}

.pos-v2 .empty-cart {
  min-height: 150px;
  padding: 26px 16px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  text-align: center;
}

.pos-v2 .empty-cart > span {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--pos-primary);
  background: var(--pos-primary-soft);
  font-size: 1.4rem;
}

.pos-v2 .empty-cart strong {
  color: var(--pos-text);
  font-size: .9rem;
  font-weight: 700;
}

.pos-v2 .empty-cart p {
  margin: 0;
  color: var(--pos-muted);
  font-size: .74rem;
}

.pos-v2 .cart-line {
  padding: 13px 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  border-bottom: 1px solid #edf0f2;
}

.pos-v2 .cart-line:last-child {
  border-bottom: 0;
}

.pos-v2 .cart-line-title strong {
  color: var(--pos-text);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
}

.pos-v2 .cart-line-meta {
  margin-top: 4px;
  color: var(--pos-muted);
  font-size: .7rem;
  line-height: 1.4;
}

.pos-v2 .cart-line-meta .removed {
  color: #b54708;
}

.pos-v2 .cart-line-meta .added {
  color: #08735f;
}

.pos-v2 .qty-control {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pos-v2 .qty-control button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--pos-border);
  border-radius: 9px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  font-size: .98rem;
  font-weight: 600;
}

.pos-v2 .qty-control button:hover {
  border-color: rgba(15, 130, 120, .35);
  background: var(--pos-primary-soft);
  color: var(--pos-primary-dark);
}

.pos-v2 .qty-control b {
  min-width: 26px;
  text-align: center;
  color: var(--pos-text);
  font-size: .82rem;
  font-weight: 700;
}

.pos-v2 .qty-control .remove {
  margin-inline-start: 4px;
  color: #b42318;
}

.pos-v2 .cart-price {
  color: var(--pos-text);
  font-size: .88rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Order options */

.pos-v2 .order-options-heading {
  border-top: 1px solid #f0f2f4;
}

.pos-v2 .order-controls {
  padding: 4px 16px 13px;
  display: grid;
  gap: 12px;
}

/* Totals */

.pos-v2 .amount-panel {
  margin: 0 16px 14px;
  padding: 16px;
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-md);
  background: var(--pos-card-soft);
  display: grid;
  gap: 8px;
}

.pos-v2 .amount-panel > div:not(.amount-due) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--pos-muted);
  font-size: .78rem;
}

.pos-v2 .amount-panel > div:not(.amount-due) b {
  color: #344054;
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pos-v2 .amount-due {
  margin-top: 5px;
  padding: 17px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid rgba(15, 130, 120, .18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.pos-v2 .amount-due-label {
  display: grid;
  gap: 2px;
}

.pos-v2 .amount-due-label span {
  color: var(--pos-text);
  font-size: .84rem;
  font-weight: 700;
}

.pos-v2 .amount-due-label small {
  color: var(--pos-muted);
  font-size: .68rem;
}

.pos-v2 .amount-due > strong {
  font-family: var(--pos-font-display);
  color: var(--pos-primary-dark);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pos-v2 .amount-due > strong small {
  font-family: var(--pos-font-body);
  font-size: .7rem;
  font-weight: 700;
  color: #62807b;
}

/* Checkout */

.pos-v2 .sticky-checkout {
  position: sticky;
  bottom: 0;
  z-index: 6;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--pos-border);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;

  grid-template-columns:
    minmax(104px, .72fr)
    minmax(104px, .78fr)
    minmax(190px, 1.7fr);

  gap: 11px;

  width: 100%;
  box-sizing: border-box;

  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

.pos-v2 .sticky-checkout .btn {
  min-height: 54px;
  border-radius: var(--pos-radius-sm);
  font-weight: 750;
  font-size: .92rem;
}

.pos-v2 .sticky-checkout .btn {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  white-space: nowrap;
}

.pos-v2 .checkout-clear,
.pos-v2 .checkout-hold {
  justify-content: center;
}

.pos-v2 .checkout-pay {
  min-width: 0;
}

.pos-v2 .checkout-pay > span,
.pos-v2 .checkout-pay > strong {
  min-width: 0;
}


.pos-v2 .checkout-clear {
  color: #b42318;
  background: #fff;
  border: 1.5px solid #f3c7c3;
}

.pos-v2 .checkout-clear:hover {
  background: var(--pos-danger-soft);
}

.pos-v2 .checkout-hold {
  color: #8a5400;
  background: #fffaf0;
  border: 1.5px solid #f3d7a2;
}

.pos-v2 .checkout-hold:hover {
  background: #fff3dc;
}

.pos-v2 .checkout-pay {
  border: 1px solid var(--pos-primary);
  background: linear-gradient(135deg, var(--pos-primary), #128d83);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 130, 120, .22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-inline: 18px;
}

.pos-v2 .checkout-pay:hover {
  background: linear-gradient(135deg, var(--pos-primary-dark), var(--pos-primary));
  box-shadow: 0 12px 26px rgba(15, 130, 120, .28);
}

.pos-v2 .checkout-pay span {
  font-weight: 700;
}

.pos-v2 .checkout-pay strong {
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Generic modal improvements */

body.modal-open {
  overflow: hidden;
}

.pos-v2 + .modal .modal-backdrop,
.payment-modal .modal-backdrop,
.payment-success-modal .modal-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(15, 23, 42, .42);
}

.modal-card {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: var(--pay-shadow);
  font-family: var(--pos-font-body);
}

.modal-head h3 {
  font-family: var(--pos-font-display);
  font-weight: 600;
}

.custom-options {
  display: grid;
  gap: 13px;
}

.custom-group {
  padding: 14px;
  border: 1px solid var(--pos-border);
  border-radius: 15px;
  background: #f9fbfc;
}

.custom-group h4 {
  margin: 0 0 5px;
  color: var(--pos-text);
  font-size: .92rem;
  font-weight: 700;
}

.custom-group p {
  margin: 0 0 9px;
  color: var(--pos-muted);
  font-size: .76rem;
}

/* Payment modal */

.payment-modal-card {
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 34px);
  overflow-y: auto;
  border-radius: 24px;
  background: #fff;
}

.payment-modal-card .modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 24px 26px 18px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pay-border);
}

.payment-modal-card .modal-head h3 {
  margin: 3px 0 0;
  color: var(--pay-ink);
  font-size: 1.38rem;
  letter-spacing: -.01em;
}

.payment-modal-body {
  display: grid;
  gap: 19px;
  padding: 24px 26px;
}

.payment-due-box {
  min-height: 108px;
  padding: 22px 24px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(15, 130, 120, .06), rgba(37, 99, 235, .035)),
    var(--pay-soft);
  border: 1px solid rgba(15, 130, 120, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.payment-due-box > span {
  color: var(--pay-muted);
  font-size: .8rem;
  font-weight: 700;
}

.payment-due-box > strong {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  direction: ltr;
  white-space: nowrap;
  font-family: var(--pos-font-display);
  color: var(--pay-ink);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.payment-due-box > strong #paymentDueValue {
  font-weight: 700;
  unicode-bidi: isolate;
}

.payment-due-box > strong small {
  font-family: var(--pos-font-body);
  color: var(--pay-muted);
  font-size: .8rem;
  font-weight: 700;
}

.payment-method-title,
.cash-received-field > span,
.quick-cash-label {
  color: var(--pay-muted);
  font-size: .8rem;
  font-weight: 750;
}

.payment-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.payment-method-option {
  position: relative;
  cursor: pointer;
}

.payment-method-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method-option > span {
  min-height: 64px;
  border: 1.5px solid var(--pay-border);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--pay-ink);
  background: #fff;
  font-weight: 700;
  font-size: .92rem;
  transition: .15s ease;
}

.payment-method-option svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.payment-method-option input:checked + span {
  color: var(--pay-accent);
  border-color: rgba(15, 130, 120, .55);
  background: var(--pay-accent-soft);
  box-shadow: 0 0 0 3px rgba(15, 130, 120, .09);
}

.cash-payment-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 19px;
  border: 1px solid var(--pay-border);
  background: #fff;
}

.cash-received-field {
  display: grid;
  gap: 8px;
}

.cash-input-wrap {
  position: relative;
}

.cash-input-wrap input {
  width: 100%;
  min-height: 66px;
  padding-inline: 18px 78px;
  border: 2px solid var(--pay-border);
  border-radius: 16px;
  outline: none;
  color: var(--pay-ink);
  background: #fff;
  font-family: var(--pos-font-body);
  font-size: clamp(1.6rem, 4vw, 2.05rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cash-input-wrap input:focus {
  border-color: var(--pay-accent);
  box-shadow: 0 0 0 4px rgba(15, 130, 120, .1);
}

.cash-input-wrap input[aria-invalid="true"] {
  border-color: rgba(180, 35, 24, .68);
  background: var(--pay-danger-soft);
}

.cash-input-wrap > strong {
  position: absolute;
  inset-inline-end: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pay-muted);
  font-size: .8rem;
  font-weight: 700;
}

.quick-cash-section {
  display: grid;
  gap: 9px;
}

.cash-quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cash-quick-btn {
  min-height: 44px;
  padding: 9px 15px;
  border: 1.5px solid var(--pay-border);
  border-radius: 12px;
  background: #fff;
  color: var(--pay-ink);
  cursor: pointer;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cash-quick-btn:hover,
.cash-quick-exact {
  border-color: rgba(15, 130, 120, .3);
  background: var(--pay-accent-soft);
  color: var(--pay-accent);
}

.cash-quick-exact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cash-quick-exact span {
  font-size: .72rem;
  font-weight: 800;
}

.cash-calculation {
  display: grid;
  gap: 9px;
}

.cash-calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--pay-muted);
  font-size: .9rem;
}

.cash-calc-row strong {
  color: var(--pay-ink);
  font-weight: 700;
}

.cash-remaining-row {
  padding: 11px 13px;
  border-radius: 11px;
  color: var(--pay-danger);
  background: var(--pay-danger-soft);
}

.cash-remaining-row strong {
  color: var(--pay-danger);
}

.cash-change-box {
  padding: 17px 18px;
  border-radius: 15px;
  background: var(--pay-accent-soft);
  border: 1px solid rgba(15, 130, 120, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cash-change-box > span {
  color: var(--pay-accent);
  font-size: .82rem;
  font-weight: 800;
}

.cash-change-box > strong {
  font-family: var(--pos-font-display);
  color: var(--pay-accent);
  font-size: 2.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cash-change-box small {
  font-family: var(--pos-font-body);
  font-size: .74rem;
  font-weight: 700;
}

.cash-payment-hint {
  min-height: 18px;
  color: var(--pay-muted);
  font-size: .8rem;
}

.cash-payment-hint.is-error {
  color: var(--pay-danger);
  font-weight: 700;
}

.payment-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 17px 26px 21px;
  border-top: 1px solid var(--pay-border);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.payment-confirm-button {
  min-width: 230px;
  min-height: 54px;
  border-radius: var(--pos-radius-sm);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 750;
}

.payment-confirm-button strong {
  font-size: .74rem;
  font-weight: 700;
  opacity: .85;
}

.payment-confirm-button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

/* Payment success */

.payment-success-card {
  width: min(500px, calc(100vw - 28px));
  padding: 32px 30px 27px;
  border-radius: 24px;
  text-align: center;
  background: #fff;
}

.payment-success-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--pay-accent);
  background: var(--pay-accent-soft);
}

.payment-success-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: pos-check-draw .45s ease-out .1s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .payment-success-icon svg {
    animation: none;
    stroke-dashoffset: 0;
  }
}

@keyframes pos-check-draw {
  to { stroke-dashoffset: 0; }
}

.payment-success-card h2 {
  margin: 5px 0 8px;
  font-family: var(--pos-font-display);
  color: var(--pay-ink);
  font-size: 1.45rem;
  font-weight: 600;
}

.payment-success-order {
  color: var(--pay-muted);
  font-size: .9rem;
}

.payment-success-order strong {
  color: var(--pay-ink);
}

.payment-success-summary {
  margin-top: 21px;
  padding: 13px 0;
  border-top: 1px solid var(--pay-border);
  border-bottom: 1px solid var(--pay-border);
}

.payment-success-summary > div {
  padding: 7px 0;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: var(--pay-muted);
  font-size: .88rem;
}

.payment-success-summary strong {
  color: var(--pay-ink);
  font-weight: 700;
}

.payment-success-change {
  margin-top: 20px;
  padding: 21px 18px;
  border-radius: 18px;
  background: var(--pay-accent-soft);
  border: 1px solid rgba(15, 130, 120, .14);
}

.payment-success-change > span {
  display: block;
  color: var(--pay-accent);
  font-size: .78rem;
  font-weight: 800;
}

.payment-success-change > strong {
  display: block;
  margin-top: 8px;
  font-family: var(--pos-font-display);
  color: var(--pay-accent);
  font-size: clamp(2.9rem, 8vw, 4.3rem);
  line-height: 1;
  font-weight: 600;
}

.payment-success-change small {
  font-family: var(--pos-font-body);
  font-size: .86rem;
  font-weight: 700;
}

.payment-success-actions {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Customer notes */

.pos-customer-notes {
  margin: 0 16px 10px;
  padding: 14px;
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-md);
  background: var(--pos-card-soft);
}

.pos-customer-notes-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pos-customer-notes-head strong {
  color: var(--pos-text);
  font-size: .86rem;
  font-weight: 700;
}

.pos-customer-notes-head small {
  display: block;
  margin-top: 2px;
  color: var(--pos-muted);
  font-size: .72rem;
}

.pos-customer-note-list {
  display: grid;
  gap: 8px;
}

.customer-note-item {
  padding: 10px 12px;
  border: 1px solid var(--pos-border);
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-note-item.is-important {
  border-color: #f3d7a2;
  background: var(--pos-warning-soft);
}

.customer-note-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .82rem;
  color: var(--pos-text);
}

.customer-note-warning {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #9a5b09;
  background: #fff3dc;
  font-weight: 800;
  font-size: .7rem;
}

.customer-note-item small {
  flex: 0 0 auto;
  color: var(--pos-muted);
  font-size: .68rem;
}

.customer-note-empty {
  padding: 10px;
  color: var(--pos-muted);
  font-size: .78rem;
  text-align: center;
}

.pos-customer-note-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--pos-border);
  display: grid;
  gap: 9px;
}

/* Empty state */

.pos-v2 .empty-state {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  color: var(--pos-muted);
  font-size: .9rem;
  border: 1px dashed var(--pos-border-strong);
  border-radius: var(--pos-radius-md);
}

/* Buttons (ghost/primary used across modals) */

.btn {
  font-family: var(--pos-font-body);
  font-weight: 650;
}

.btn-ghost {
  color: var(--pos-text);
  background: #fff;
  border: 1.5px solid var(--pay-border);
}

.btn-ghost:hover {
  background: var(--pay-soft);
}

.btn-primary {
  color: #fff;
  background: var(--pos-primary);
  border: 1px solid var(--pos-primary);
}

.btn-primary:hover {
  background: var(--pos-primary-dark);
}

/* Keyboard accessibility */

.pos-v2 button:focus-visible,
.pos-v2 input:focus-visible,
.pos-v2 select:focus-visible,
.pos-v2 textarea:focus-visible,
.pos-v2 a:focus-visible {
  outline: 2px solid var(--pos-primary);
  outline-offset: 2px;
}

/* RTL */

html[dir="rtl"] .pos-v2 .pos-title-group,
html[dir="rtl"] .pos-v2 .order-card-title,
html[dir="rtl"] .pos-v2 .delivery-customer-summary {
  direction: rtl;
}

html[dir="rtl"] .payment-due-box > strong {
  direction: ltr;
}

html[dir="rtl"] .cash-input-wrap input {
  text-align: right;
}

/* Responsive */

@media (max-width: 1280px) {
  .pos-page.pos-v2 {
    grid-template-columns: minmax(0, 1fr) minmax(470px, .95fr);
  }

  .pos-v2 .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) and (min-width: 981px) {
  .pos-page.pos-v2 {
    grid-template-columns: minmax(0, 1fr) minmax(440px, .95fr);
  }

  .pos-v2 .sticky-checkout {
    grid-template-columns:
      minmax(92px, .72fr)
      minmax(92px, .78fr)
      minmax(170px, 1.6fr);
  }
}

@media (max-width: 980px) {
  .pos-page.pos-v2 {
    grid-template-columns: 1fr;
  }

  .pos-v2 .current-order-card {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .pos-v2 .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pos-page.pos-v2 {
    padding: 8px;
    gap: 10px;
  }

  .pos-v2 .pos-menu,
  .pos-v2 .current-order-card {
    border-radius: 18px;
  }

  .pos-v2 .pos-menu {
    padding: 14px;
  }

  .pos-v2 .pos-friendly-head {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .pos-v2 .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .pos-v2 .product-add {
    min-height: 118px;
    padding: 13px;
  }

  .pos-v2 .pos-list-heading small,
  .pos-v2 .order-section-heading small {
    display: none;
  }

  .pos-v2 .delivery-contact-grid,
  .pos-v2 .delivery-routing-fields,
  .pos-v2 .two-col {
    grid-template-columns: 1fr;
  }

  .pos-v2 .sticky-checkout {
    grid-template-columns:
      minmax(88px, .72fr)
      minmax(88px, .72fr)
      minmax(150px, 1.65fr);
    padding-inline: 11px;
  }

  .payment-methods {
    grid-template-columns: 1fr;
  }

  .payment-modal-card,
  .payment-success-card {
    width: calc(100vw - 14px);
    border-radius: 19px;
  }

  .payment-modal-card .modal-head,
  .payment-modal-body,
  .payment-modal-actions {
    padding-inline: 17px;
  }

  .payment-success-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .pos-v2 .product-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pos-v2 .order-type-segment span {
    font-size: .68rem;
  }

  .pos-v2 .sticky-checkout {
    grid-template-columns: 1fr 1fr;
  }

  .pos-v2 .checkout-pay {
    grid-column: 1 / -1;
    min-height: 58px;
  }
}

/* ========================================================================== 
   SKLS RMS — REFERENCE UI FINAL OVERRIDES
   Visual source of truth: uploaded SKLS RMS POS reference image.
   This block intentionally comes LAST in app.css.
   ========================================================================== */

:root {
  --rms-primary: #76090f;
  --rms-primary-hover: #65070c;
  --rms-primary-pressed: #56060a;
  --rms-primary-soft: #f9edef;
  --rms-sidebar: #10161b;
  --rms-sidebar-soft: #161d23;
  --rms-page: #f5f6f7;
  --rms-surface: #ffffff;
  --rms-surface-soft: #f8f9fa;
  --rms-input: #f7f8f9;
  --rms-border: #e1e4e8;
  --rms-border-strong: #cfd4da;
  --rms-text: #171a1f;
  --rms-text-secondary: #555d67;
  --rms-muted: #7a828c;
  --rms-danger: #a10b1d;
  --rms-success: #19734b;
  --rms-warning: #ad6508;
  --rms-sidebar-width: 240px;
  --rms-topbar-height: 66px;
  --rms-radius: 9px;
  --rms-radius-lg: 12px;
  --rms-shadow: 0 1px 3px rgba(16, 24, 40, .055);

  --bg: var(--rms-page);
  --panel: var(--rms-surface);
  --text: var(--rms-text);
  --muted: var(--rms-muted);
  --border: var(--rms-border);
  --primary: var(--rms-primary);
  --primary-2: var(--rms-primary-hover);
  --nav: var(--rms-sidebar);
  --nav-text: #d5dae0;
  --danger: var(--rms-danger);
  --warning: var(--rms-warning);
  --success: var(--rms-success);
  --shadow: var(--rms-shadow);
  --radius: var(--rms-radius-lg);

  --pos-bg: var(--rms-page);
  --pos-card: var(--rms-surface);
  --pos-card-soft: var(--rms-surface-soft);
  --pos-border: var(--rms-border);
  --pos-border-strong: var(--rms-border-strong);
  --pos-text: var(--rms-text);
  --pos-muted: var(--rms-muted);
  --pos-primary: var(--rms-primary);
  --pos-primary-dark: var(--rms-primary-hover);
  --pos-primary-soft: var(--rms-primary-soft);
  --pos-danger: var(--rms-danger);
  --pos-danger-soft: #fff4f5;
  --pos-shadow: var(--rms-shadow);
  --pos-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans Arabic", sans-serif;
  --pos-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans Arabic", sans-serif;
  --pos-radius-lg: 12px;
  --pos-radius-md: 9px;
  --pos-radius-sm: 7px;

  --pay-accent: var(--rms-primary);
  --pay-accent-soft: var(--rms-primary-soft);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--rms-page); }
body {
  margin: 0;
  background: var(--rms-page);
  color: var(--rms-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans Arabic", sans-serif;
  font-size: 14px;
  line-height: 1.35;
}
button, input, select, textarea { font: inherit; }

/* ----- Application shell ----- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 50;
  width: var(--rms-sidebar-width);
  padding: 0 10px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rms-sidebar);
  color: #d5dae0;
  border: 0;
  box-shadow: none;
}
.workspace {
  width: calc(100% - var(--rms-sidebar-width));
  min-width: 0;
  margin-inline-start: var(--rms-sidebar-width);
}
.brand {
  min-height: 80px;
  margin: 0 -10px 9px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  border: 0;
  background: linear-gradient(180deg, #79090f 0%, #68070c 100%);
}
.brand img {
  width: 38px;
  height: 38px;
  padding: 0;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}
.brand strong {
  display: block;
  color: #fff;
  font-size: 19px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
}
.brand small {
  display: block;
  max-width: 150px;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-list {
  min-height: 0;
  padding: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.nav-list a {
  min-height: 44px;
  margin: 0;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  border-radius: 6px;
  color: #d6dbe0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.nav-list a:hover { background: rgba(255,255,255,.055); color: #fff; }
.nav-list a.active,
.nav-list a[aria-current="page"],
.nav-list a.nav-primary { background: var(--rms-primary); color: #fff; }
.nav-icon {
  width: 25px;
  min-width: 25px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
  font-size: 17px;
  line-height: 1;
}
.nav-section {
  height: 13px;
  min-height: 13px;
  margin: 8px 5px 4px;
  padding: 0;
  flex: 0 0 auto;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.095);
  color: transparent;
  font-size: 0;
  line-height: 0;
}
.sklstech {
  margin-top: 10px;
  padding: 13px 12px 2px;
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #7e8790;
  font-size: 10px;
}

/* ----- Top bar ----- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  height: var(--rms-topbar-height);
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--rms-border);
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
}
.topbar-primary { min-width: 0; display: flex; align-items: center; flex: 1; }
.topbar-title strong { color: var(--rms-text); font-size: 14px; font-weight: 700; }
.topbar-title small { margin-top: 2px; color: var(--rms-muted); font-size: 10px; }
.top-actions { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.icon-button,
.language-switch button,
.topbar-branch {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--rms-text);
  box-shadow: none;
}
.icon-button { width: 40px; padding: 0; display: grid; place-items: center; }
.icon-button:hover,
.language-switch button:hover,
.topbar-branch:hover { background: #f5f6f7; }
.topbar-branch {
  min-width: 170px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e5e8;
  background: #fafbfb;
  font-size: 12px;
  font-weight: 650;
}
.topbar-branch svg,
.language-switch svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar-branch span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-branch b { margin-inline-start: auto; font-size: 13px; font-weight: 700; }
.language-switch { margin: 0; }
.language-switch button {
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
}
.language-switch button b { font-size: 12px; }
.user-chip { min-height: 48px; padding: 4px 7px; display: flex; align-items: center; gap: 9px; }
.user-chip .avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e6e8eb;
  color: #24282d;
  font-size: 12px;
  font-weight: 800;
}
.user-chip strong { display: block; color: #171a1f; font-size: 12px; font-weight: 650; }
.user-chip small { display: block; margin-top: 2px; color: #7b838d; font-size: 10px; }

.content { width: 100%; max-width: none; margin: 0; padding: 22px 26px; }

/* ----- Generic system surfaces ----- */
.panel, .kpi, .module-card, .owner-alert-panel {
  border: 1px solid var(--rms-border);
  border-radius: var(--rms-radius-lg);
  background: #fff;
  box-shadow: var(--rms-shadow);
}
.btn {
  border-color: var(--rms-border-strong);
  border-radius: 8px;
  box-shadow: none;
  font-weight: 650;
}
.btn-primary { border-color: var(--rms-primary); background: var(--rms-primary); color: #fff; }
.btn-primary:hover { border-color: var(--rms-primary-hover); background: var(--rms-primary-hover); }

/* ========================================================================== 
   POS page — desktop first
   ========================================================================== */
.pos-shell { height: 100vh; overflow: hidden; }
.pos-shell .workspace { height: 100vh; overflow: hidden; }
.pos-shell .content {
  height: calc(100vh - var(--rms-topbar-height));
  padding: 10px 14px 12px 26px;
  overflow: hidden;
}
html[dir="rtl"] .pos-shell .content { padding: 10px 26px 12px 14px; }

/* topbar search */
.pos-search-topbar {
  width: clamp(360px, 38vw, 500px);
  height: 42px;
  min-width: 280px;
  padding: 0 10px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d7dbe0;
  border-radius: 8px;
  background: #f7f8f9;
  box-shadow: none;
}
.pos-search-topbar:focus-within { border-color: #bcc2c9; box-shadow: 0 0 0 2px rgba(118,9,15,.045); }
.pos-search-topbar > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: #68717a;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pos-search-topbar input {
  min-width: 0;
  height: auto !important;
  padding: 0 !important;
  flex: 1;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #24282d;
  box-shadow: none !important;
  font-size: 12px;
}
.pos-search-topbar input::placeholder { color: #737b84; }
.pos-search-topbar kbd {
  min-width: 27px;
  height: 23px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: #eceef0;
  color: #6f7780;
  font-family: inherit;
  font-size: 9px;
  font-weight: 650;
  box-shadow: none;
}
.pos-search-clear {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #7a828b;
  font-size: 16px;
}
.pos-search-clear:hover { background: #eceef0; color: #22272d; }

.pos-page.pos-v2 {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(455px, 37.5%, 500px);
  gap: 18px;
  align-items: stretch;
  overflow: hidden;
  background: transparent;
  color: var(--rms-text);
  font-family: var(--pos-font-body);
  font-size: 14px;
  line-height: 1.35;
}

.pos-v2 .pos-menu {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.pos-v2 .resume-banner { margin: 0 0 8px; border-radius: 8px; }
.pos-v2 .pos-head.pos-friendly-head {
  min-height: 51px;
  margin: 0;
  padding: 5px 1px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
}
.pos-v2 .pos-title-group { display: flex; align-items: center; gap: 10px; }
.pos-v2 .pos-title-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #171a1f;
}
.pos-v2 .pos-title-icon svg,
.pos-v2 .current-order-icon svg,
.pos-v2 .order-type-segment svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pos-v2 .pos-title-group .eyebrow,
.pos-v2 .pos-head-helper { display: none; }
.pos-v2 .pos-title-group h1 {
  margin: 0;
  color: #15191e;
  font-family: var(--pos-font-body);
  font-size: 25px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.025em;
}
html[dir="rtl"] .pos-v2 .pos-title-group h1 { letter-spacing: 0; }

/* Order type now lives on the menu side, like the reference. */
.pos-v2 .pos-order-type-bar { margin: 0 0 12px; flex: 0 0 auto; }
.pos-v2 .pos-order-type-bar .order-type-segments {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.pos-v2 .order-type-segment {
  min-height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #e0e3e7;
  border-radius: 7px;
  background: #fff;
  color: #1b1f24;
  box-shadow: var(--rms-shadow);
  font-size: 13px;
  font-weight: 700;
}
.pos-v2 .order-type-segment svg { width: 19px; height: 19px; }
.pos-v2 .order-type-segment:hover { border-color: #cbd0d5; background: #fbfbfc; }
.pos-v2 .order-type-segment.active,
.pos-v2 .order-type-segment[aria-pressed="true"] {
  border-color: var(--rms-primary);
  background: var(--rms-primary);
  color: #fff;
  box-shadow: 0 2px 4px rgba(118,9,15,.12);
}
.pos-v2 .pos-native-order-type {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pos-v2 .pos-list-heading {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.pos-v2 .pos-list-heading > span,
.pos-v2 .pos-list-heading > small { display: none; }
.pos-v2 .category-strip {
  margin: 0;
  padding: 0 0 10px;
  display: flex;
  gap: 7px;
  flex: 0 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.pos-v2 .category-strip::-webkit-scrollbar { display: none; }
.pos-v2 .category-chip {
  min-height: 39px;
  padding: 0 14px;
  flex: 0 0 auto;
  border: 1px solid #e0e3e7;
  border-radius: 6px;
  background: #fff;
  color: #171b20;
  box-shadow: 0 1px 2px rgba(16,24,40,.025);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.pos-v2 .category-chip:hover { border-color: #cfd4d9; background: #fafafa; }
.pos-v2 .category-chip.active { border-color: var(--rms-primary); background: var(--rms-primary); color: #fff; }

/* Products: same density/proportion as the reference */
.pos-v2 .product-grid {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  align-content: start;
  gap: 9px;
  padding: 0 4px 12px 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #cdd2d7 transparent;
}
html[dir="rtl"] .pos-v2 .product-grid { padding: 0 0 12px 4px; }
.pos-v2 .product-card {
  min-width: 0;
  min-height: 205px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e0e3e7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,.045);
  transform: none;
}
.pos-v2 .product-card:hover { border-color: #c9ced4; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16,24,40,.07); }
.pos-v2 .product-add {
  width: 100%;
  min-height: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: inherit;
  text-align: start;
  box-shadow: none;
}
.pos-v2 .product-add:hover { transform: none; background: #fff; }
.pos-v2 .product-accent { display: none; }
.pos-v2 .product-media {
  width: 100%;
  height: 96px;
  min-height: 96px;
  flex: 0 0 96px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #eceef0;
}
.pos-v2 .product-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pos-v2 .product-media-placeholder {
  background:
    radial-gradient(circle at 75% 22%, rgba(255,255,255,.75), transparent 28%),
    linear-gradient(145deg, #ded6cc 0%, #efe7dc 50%, #d8cabb 100%);
  color: rgba(69,49,35,.58);
}
.pos-v2 .product-media-placeholder span { font-size: 32px; font-weight: 800; text-transform: uppercase; }
.pos-v2 .product-body {
  min-height: 43px;
  padding: 7px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pos-v2 .product-body small,
.pos-v2 .product-body > span { display: none; }
.pos-v2 .product-body strong {
  min-height: 30px;
  color: #171a1f;
  font-size: 11.5px;
  line-height: 1.28;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pos-v2 .product-add > b {
  margin: 0;
  padding: 2px 8px 7px;
  color: var(--rms-primary);
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 800;
}
.pos-v2 .product-add > b small { color: inherit; font-size: 8px; }
.pos-v2 .product-add::after { display: none !important; content: none !important; }
.pos-v2 .product-add-label {
  min-height: 33px;
  margin: auto 7px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: var(--rms-primary);
  color: #fff;
  font-size: 11.5px;
  line-height: 1;
  font-weight: 700;
}
.pos-v2 .product-add:hover .product-add-label { background: var(--rms-primary-hover); }

/* ----- Current order panel ----- */
.pos-v2 .current-order-card {
  position: relative;
  top: auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #e7e9ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 9px rgba(16,24,40,.045);
  scrollbar-width: thin;
  scrollbar-color: #d2d6da transparent;
}
.pos-v2 .current-order-card::-webkit-scrollbar { width: 6px; }
.pos-v2 .current-order-card::-webkit-scrollbar-thumb { border-radius: 99px; background: #d2d6da; }
.pos-v2 .order-card-head {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 59px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  border: 0;
  border-bottom: 1px solid #e8eaed;
  background: #fff;
  box-shadow: none;
}
.pos-v2 .order-card-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pos-v2 .current-order-icon {
  width: 31px;
  height: 31px;
  min-width: 31px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: #181c21;
  font-size: 20px;
}
.pos-v2 .current-order-icon svg { width: 21px; height: 21px; }
.pos-v2 .order-card-title .eyebrow { display: none; }
.pos-v2 .order-title-line { display: flex; align-items: center; gap: 7px; }
.pos-v2 .order-title-line h2 {
  margin: 0;
  color: #12161a;
  font-family: var(--pos-font-body);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.015em;
}
.pos-v2 .order-head-meta { display: flex; align-items: center; gap: 7px; }
.pos-v2 .order-number { color: #343a41; font-size: 11px; font-weight: 800; white-space: nowrap; }
.pos-v2 .order-mode-chip {
  min-height: 25px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  background: #f1f2f4;
  color: #626a73;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.pos-v2 .order-more {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #2a2f35;
  font-size: 19px;
}
.pos-v2 .order-more:hover { background: #f4f5f6; }

.pos-v2 .order-section-heading {
  min-height: 0;
  margin: 0;
  padding: 9px 14px 5px;
  border: 0;
  background: #fff;
}
.pos-v2 .order-section-heading > span { color: #6d757e; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .055em; }
.pos-v2 .order-section-heading > small { display: none; }
.pos-v2 .order-context {
  width: auto;
  max-height: none;
  margin: 0 12px 8px;
  padding: 10px 11px;
  flex: 0 0 auto;
  overflow: visible;
  border: 1px solid #e3e5e8;
  border-radius: 8px;
  background: #fafafa;
  box-shadow: none;
}
.pos-v2 .order-context label,
.pos-v2 .order-controls label {
  gap: 5px;
  color: #3e454d;
  font-size: 9.5px;
  font-weight: 700;
}
.pos-v2 .order-context input,
.pos-v2 .order-context select,
.pos-v2 .order-context textarea,
.pos-v2 .order-controls input,
.pos-v2 .order-controls textarea {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #d9dde1;
  border-radius: 6px;
  outline: 0;
  background: #fff;
  color: #171b20;
  box-shadow: none;
  font-size: 10.5px;
}
.pos-v2 .order-context input:focus,
.pos-v2 .order-context select:focus,
.pos-v2 .order-context textarea:focus,
.pos-v2 .order-controls input:focus,
.pos-v2 .order-controls textarea:focus {
  border-color: #bfc4ca;
  box-shadow: 0 0 0 2px rgba(118,9,15,.04);
}

/* Delivery workflow keeps all existing functionality but follows reference surfaces. */
.pos-v2 .delivery-fields,
.pos-v2 .delivery-customer-workflow { gap: 8px; }
.pos-v2 .delivery-workflow-heading,
.pos-v2 .delivery-existing-customer,
.pos-v2 .delivery-new-customer,
.pos-v2 .inline-contact-editor {
  border-radius: 7px;
  box-shadow: none;
}
.pos-v2 .delivery-workflow-heading { padding: 9px; border-color: #e0e3e7; background: #fff; }
.pos-v2 .delivery-workflow-heading strong { color: #23282e; font-size: 10.5px; }
.pos-v2 .delivery-workflow-heading small { color: #7b838c; font-size: 8.5px; }
.pos-v2 .delivery-customer-badge { min-height: 23px; padding: 0 7px; border-radius: 99px; font-size: 8px; }
.pos-v2 .delivery-phone-input-wrap input { height: 40px !important; min-height: 40px !important; font-size: 12px !important; }
.pos-v2 .delivery-existing-customer { padding: 10px; border-color: #dde2e5; background: #fff; }
.pos-v2 .customer-avatar { width: 33px; height: 33px; min-width: 33px; background: #191d22; }
.pos-v2 .delivery-new-customer { padding: 10px; border-color: #ead8aa; background: #fffaf1; }
.pos-v2 .delivery-contact-grid { gap: 7px; }

/* Cart */
.pos-v2 .cart-head {
  min-height: 39px;
  padding: 7px 14px;
  flex: 0 0 auto;
  border-top: 1px solid #eceef0;
  border-bottom: 1px solid #eceef0;
  background: #fff;
}
.pos-v2 .cart-head-title > span { color: #343a40; font-size: 10px; font-weight: 800; letter-spacing: 0; }
.pos-v2 .cart-head-title small { display: none; }
.pos-v2 .cart-count-badge {
  min-width: 25px;
  height: 24px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #f0f1f2;
  color: #4d555e;
  font-size: 9px;
  font-weight: 800;
}
.pos-v2 .cart-lines {
  width: 100%;
  min-height: 130px;
  max-height: none;
  padding: 0;
  flex: 0 0 auto;
  overflow: visible;
  background: #fff;
}
.pos-v2 .empty-cart { min-height: 130px; padding: 14px; }
.pos-v2 .empty-cart > span { width: 38px; height: 38px; margin-bottom: 6px; border-radius: 50%; background: #f1f2f3; font-size: 18px; }
.pos-v2 .empty-cart strong { color: #3d444c; font-size: 11px; }
.pos-v2 .empty-cart p { margin-top: 3px; color: #8b929a; font-size: 9px; }
.pos-v2 .cart-line {
  width: 100%;
  margin: 0;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid #eceef0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.pos-v2 .cart-line:last-child { border-bottom: 0; }
.pos-v2 .cart-line-title strong { color: #171a1f; font-size: 11px; line-height: 1.3; font-weight: 750; }
.pos-v2 .cart-line-meta { margin-top: 2px; color: #737b84; font-size: 8.5px; line-height: 1.35; }
.pos-v2 .cart-price { align-self: center; color: #171a1f; font-size: 11px; font-weight: 800; }
.pos-v2 .cart-item-main { min-width: 0; display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 9px; align-items: center; }
.pos-v2 .cart-item-main.no-thumb { grid-template-columns: minmax(0,1fr); }
.pos-v2 .cart-item-thumb { width: 54px; height: 48px; overflow: hidden; border: 1px solid #e0e3e7; border-radius: 6px; background: #eceef0; }
.pos-v2 .cart-item-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pos-v2 .qty-control { margin-top: 6px; display: flex; align-items: center; gap: 0; }
.pos-v2 .qty-control button,
.pos-v2 .qty-control b {
  width: 29px;
  min-width: 29px;
  height: 28px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 1px solid #d9dde1;
  border-radius: 0;
  background: #fff;
  color: #30363c;
  font-size: 11px;
}
.pos-v2 .qty-control button:first-child { border-radius: 5px 0 0 5px; }
.pos-v2 .qty-control button:nth-of-type(2) { border-radius: 0 5px 5px 0; }
html[dir="rtl"] .pos-v2 .qty-control button:first-child { border-radius: 0 5px 5px 0; }
html[dir="rtl"] .pos-v2 .qty-control button:nth-of-type(2) { border-radius: 5px 0 0 5px; }
.pos-v2 .qty-control b { border-inline: 0; font-weight: 750; }
.pos-v2 .qty-control button.remove { width: 28px; min-width: 28px; margin-inline-start: 8px; border: 0; border-radius: 5px; background: transparent; color: var(--rms-danger); }
.pos-v2 .qty-control button:hover { background: #f6f7f8; color: var(--rms-primary); }

/* Order options */
.pos-v2 .order-options-heading { display: none; }
.pos-v2 .order-controls {
  padding: 8px 13px;
  flex: 0 0 auto;
  border-top: 1px solid #eceef0;
  background: #fff;
}
.pos-v2 .order-controls .two-col { gap: 7px; }
.pos-v2 .order-controls textarea { height: 38px; min-height: 38px; resize: none; }

/* Totals */
.pos-v2 .amount-panel {
  padding: 9px 14px 10px;
  flex: 0 0 auto;
  border-top: 1px solid #eceef0;
  background: #fff;
}
.pos-v2 .amount-panel > div:not(.amount-due) {
  min-height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #5f6770;
  font-size: 9.5px;
}
.pos-v2 .amount-panel > div:not(.amount-due) b { color: #252a30; font-size: 10.5px; font-weight: 750; }
.pos-v2 .amount-panel > div:has(#discountValue),
.pos-v2 .amount-panel > div:has(#discountValue) b { color: var(--rms-danger); }
.pos-v2 .amount-due {
  min-height: 52px;
  margin-top: 5px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 7px;
  background: var(--rms-primary-soft);
  color: var(--rms-primary);
  box-shadow: none;
}
.pos-v2 .amount-due-label span { color: var(--rms-primary); font-size: 14px; font-weight: 800; }
.pos-v2 .amount-due-label small { display: none; }
.pos-v2 .amount-due strong { color: var(--rms-primary); font-size: 22px; font-weight: 850; }
.pos-v2 .amount-due strong small { color: inherit; font-size: 8px; opacity: 1; }

/* Checkout */
.pos-v2 .sticky-checkout {
  position: sticky;
  bottom: 0;
  z-index: 21;
  min-height: 113px;
  padding: 9px 12px 11px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 0 0 auto;
  border-top: 1px solid #e3e5e8;
  background: rgba(255,255,255,.985);
  box-shadow: 0 -4px 10px rgba(16,24,40,.035);
  backdrop-filter: none;
}
.pos-v2 .sticky-checkout .btn {
  height: 45px;
  min-height: 45px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 750;
}
.pos-v2 .checkout-pay {
  order: 1;
  grid-column: 1 / -1;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 7px !important;
  border: 1px solid var(--rms-primary) !important;
  background: var(--rms-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.pos-v2 .checkout-pay:hover { background: var(--rms-primary-hover) !important; }
.pos-v2 .checkout-pay strong { display: none; }
.pos-v2 .checkout-hold { order: 2; border-color: #dfe2e5; background: #f5f6f7; color: #23282e; }
.pos-v2 .checkout-clear { order: 3; border-color: #ecd8dc; background: #fff7f8; color: var(--rms-danger); }

/* Modal colors */
.modal-backdrop { background: rgba(17,21,25,.45); backdrop-filter: none; }
.modal-card, .payment-modal-card, .payment-success-card { border: 1px solid #e2e5e8; border-radius: 12px; box-shadow: 0 24px 60px rgba(16,24,40,.18); }
.payment-due-box { border-color: #ecd9dd; border-radius: 8px; background: var(--rms-primary-soft); }
.payment-due-box strong { color: var(--rms-primary); }
.payment-methods label input:checked + span { border-color: var(--rms-primary); background: var(--rms-primary-soft); color: var(--rms-primary); box-shadow: 0 0 0 2px rgba(118,9,15,.05); }
.cash-quick-btn.cash-quick-exact,
.payment-modal-actions .btn-primary,
#confirmPayment { border-color: var(--rms-primary) !important; background: var(--rms-primary) !important; color: #fff !important; }

/* Focus */
.pos-v2 button:focus-visible,
.pos-v2 input:focus-visible,
.pos-v2 select:focus-visible,
.pos-v2 textarea:focus-visible,
.pos-v2 a:focus-visible,
.pos-search-topbar input:focus-visible {
  outline: 2px solid rgba(118,9,15,.55);
  outline-offset: 2px;
}

/* ----- RTL ----- */
html[dir="rtl"] .sidebar { direction: rtl; }
html[dir="rtl"] .nav-list a { text-align: right; }
html[dir="rtl"] .pos-search-topbar input { text-align: right; }
html[dir="rtl"] .pos-v2 .current-order-card { direction: rtl; }
html[dir="rtl"] .pos-v2 .delivery-phone-input-wrap input { direction: ltr; text-align: right; }

/* ----- Laptop / tablet / mobile ----- */
@media (max-width: 1450px) {
  :root { --rms-sidebar-width: 226px; }
  .pos-page.pos-v2 { grid-template-columns: minmax(0,1fr) 445px; gap: 14px; }
  .pos-v2 .product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .pos-v2 .product-card { min-height: 192px; }
  .pos-v2 .product-media { height: 86px; min-height: 86px; flex-basis: 86px; }
}
@media (max-width: 1230px) {
  .pos-v2 .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .topbar-branch { min-width: 145px; }
}
@media (max-width: 980px) {
  body.pos-shell { height: auto; overflow: auto; }
  .sidebar { transform: translateX(-110%); transition: transform .18s ease; }
  html[dir="rtl"] .sidebar { transform: translateX(110%); }
  .sidebar.open, html[dir="rtl"] .sidebar.open { transform: translateX(0); }
  .workspace { width: 100%; margin-inline-start: 0; height: auto; overflow: visible; }
  .topbar { padding: 0 14px; }
  .mobile-only { display: grid; }
  .topbar-branch { min-width: 42px; width: 42px; padding: 0; justify-content: center; }
  .topbar-branch span, .topbar-branch b { display: none; }
  .pos-shell .content, html[dir="rtl"] .pos-shell .content { height: auto; padding: 14px; overflow: visible; }
  .pos-page.pos-v2 { height: auto; display: block; overflow: visible; }
  .pos-v2 .pos-menu { height: auto; min-height: 620px; overflow: visible; }
  .pos-v2 .product-grid { max-height: 62vh; }
  .pos-v2 .current-order-card { height: auto; margin-top: 16px; overflow: visible; }
  .pos-v2 .order-card-head { position: relative; }
  .pos-v2 .sticky-checkout { position: sticky; }
}
@media (max-width: 720px) {
  .user-chip > div { display: none; }
  .language-switch button span { display: none; }
  .pos-search-topbar { width: 100%; min-width: 0; }
  .pos-v2 .pos-order-type-bar .order-type-segments { gap: 6px; }
  .pos-v2 .order-type-segment { min-height: 43px; padding: 0 8px; gap: 6px; font-size: 10.5px; }
  .pos-v2 .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pos-v2 .delivery-contact-grid,
  .pos-v2 .delivery-routing-fields,
  .pos-v2 .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .top-actions { gap: 3px; }
  .user-chip { display: none; }
  .pos-v2 .pos-title-group h1 { font-size: 21px; }
  .pos-v2 .product-grid { gap: 7px; }
  .pos-v2 .product-card { min-height: 176px; }
  .pos-v2 .product-media { height: 78px; min-height: 78px; flex-basis: 78px; }
  .pos-v2 .product-add-label { min-height: 30px; margin: auto 6px 6px; }
  .pos-v2 .order-head-meta .order-mode-chip { display: none; }
}

/* ============================================================
   SKLS RMS — operational enhancements
   Persistent customer notes, overdue rows, driver stats
   ============================================================ */

.customer-note-actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.pos-v2 .customer-note-item{
    flex-wrap:wrap;
}

.pos-v2 .customer-note-main{
    min-width:0;
    flex:1 1 240px;
}

.pos-v2 .customer-note-actions{
    flex:0 0 auto;
}

.note-history .note-card{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.note-card-content{
    min-width:0;
    flex:1 1 320px;
}

.note-edit-details{
    flex:1 1 100%;
}

.note-edit-details>summary{
    display:inline-flex;
    list-style:none;
}

.note-edit-details>summary::-webkit-details-marker{
    display:none;
}

.order-row-overdue{
    background:#fff8f7;
}

.order-row-overdue:hover{
    background:#fff2f0 !important;
}

.overdue-order-banner{
    border-color:#fecdca;
    background:#fff6f5;
}

.overdue-order-banner strong{
    color:#b42318;
}

.overdue-order-banner span{
    color:#912018;
}

.driver-stats{
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
}

@media(max-width:640px){
    .customer-note-actions{
        width:100%;
    }

    .driver-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* ============================================================
   POS — MAKE "ORDER DETAILS" CLEARLY VISIBLE
   ============================================================ */

.pos-v2 .order-section-heading {
    position: relative;
    z-index: 5;

    flex: 0 0 auto !important;

    width: auto;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 11px 15px 7px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    background: #ffffff !important;

    overflow: visible !important;
}

.pos-v2 .order-section-heading > span {
    display: block !important;

    color: #15191f !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 18px !important;

    opacity: 1 !important;
    visibility: visible !important;

    text-transform: none !important;
    letter-spacing: 0 !important;
}

html[dir="rtl"] .pos-v2 .order-section-heading {
    text-align: right;
}

html[dir="rtl"] .pos-v2 .order-section-heading > span {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.pos-v2 .order-context {
    position: relative;
    z-index: 1;

    flex: 0 0 auto !important;

    margin-top: 0 !important;
}


/* ============================================================
   SKLS RMS — PROFESSIONAL LOGIN PAGE
   ============================================================ */

.rms-login-page {
    --login-primary: #74080e;
    --login-primary-hover: #62070c;
    --login-primary-pressed: #52060a;

    --login-dark: #101519;
    --login-dark-2: #0d1216;

    --login-page: #f4f5f7;
    --login-surface: #ffffff;

    --login-border: #e1e4e8;
    --login-border-strong: #cfd4da;

    --login-text: #15191f;
    --login-text-2: #4e5661;
    --login-muted: #7b838d;

    --login-danger: #a20b20;

    margin: 0;
    min-height: 100vh;
    background: var(--login-page);
    color: var(--login-text);
}


/* ============================================================
   PAGE LAYOUT
   ============================================================ */

.rms-login-shell {
    display: grid;
    grid-template-columns:
        minmax(420px, 46%)
        minmax(480px, 54%);

    min-height: 100vh;
}


/* ============================================================
   LEFT / BRAND SIDE
   ============================================================ */

.rms-login-brand-panel {
    position: relative;

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 38px 46px 30px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #101519 0%,
            #0d1216 72%,
            #170d0f 100%
        );

    overflow: hidden;
}


/* Burgundy visual accent */

.rms-login-brand-panel::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -170px;
    top: -150px;

    border-radius: 50%;

    background: rgba(116, 8, 14, .32);

    pointer-events: none;
}


.rms-login-brand-panel::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 5px;
    height: 42%;

    background: #74080e;

    pointer-events: none;
}


/* ============================================================
   BRAND
   ============================================================ */

.rms-login-brand-top {
    position: relative;
    z-index: 2;
}


.rms-login-brand {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    color: #ffffff;

    text-decoration: none;
}


.rms-login-logo-wrap {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 9px;

    background: #ffffff;

    border: 1px solid rgba(255, 255, 255, .14);

    overflow: hidden;
}


.rms-login-logo-wrap img {
    display: block;

    max-width: 37px;
    max-height: 37px;

    object-fit: contain;
}


.rms-login-brand-copy {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.rms-login-brand-copy strong {
    font-size: 18px;
    line-height: 1.1;

    font-weight: 850;

    letter-spacing: -.02em;
}


.rms-login-brand-copy small {
    color: rgba(255, 255, 255, .63);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .03em;
}


/* ============================================================
   LEFT CONTENT
   ============================================================ */

.rms-login-visual-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 590px;

    margin: auto 0;

    padding: 70px 0 60px;
}


.rms-login-kicker {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 5px 10px;

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 6px;

    color: #d9b4b7;

    background: rgba(116, 8, 14, .16);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;
}


.rms-login-visual-content h1 {
    max-width: 560px;

    margin: 18px 0 15px;

    color: #ffffff;

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.04;

    font-weight: 850;

    letter-spacing: -.045em;
}


.rms-login-visual-content > p {
    max-width: 520px;

    margin: 0;

    color: rgba(255, 255, 255, .68);

    font-size: 14px;
    line-height: 1.75;
}


/* ============================================================
   FEATURES
   ============================================================ */

.rms-login-feature-list {
    display: grid;

    gap: 9px;

    margin-top: 36px;
}


.rms-login-feature {
    display: flex;
    align-items: center;

    gap: 13px;

    max-width: 500px;

    padding: 12px 13px;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 8px;

    background: rgba(255, 255, 255, .035);
}


.rms-login-feature-icon {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 7px;

    background: #74080e;

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;
}


.rms-login-feature div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.rms-login-feature strong {
    color: #ffffff;

    font-size: 12px;
    font-weight: 750;
}


.rms-login-feature small {
    color: rgba(255, 255, 255, .55);

    font-size: 10px;
    line-height: 1.45;
}


/* ============================================================
   BRAND FOOTER
   ============================================================ */

.rms-login-brand-footer {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.rms-login-language-badges {
    display: flex;
    align-items: center;

    gap: 6px;
}


.rms-login-language-badges span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 24px;

    padding: 3px 8px;

    border: 1px solid rgba(255, 255, 255, .1);

    border-radius: 5px;

    color: rgba(255, 255, 255, .62);

    font-size: 9px;
    font-weight: 700;
}


.rms-login-credit {
    color: rgba(255, 255, 255, .55);

    text-decoration: none;

    font-size: 10px;

    transition:
        color .15s ease;
}


.rms-login-credit:hover {
    color: #ffffff;
}


/* ============================================================
   RIGHT / LOGIN FORM SIDE
   ============================================================ */

.rms-login-form-panel {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 48px;

    background: #f4f5f7;
}


.rms-login-card {
    width: 100%;
    max-width: 440px;

    padding: 34px 36px 32px;

    border: 1px solid var(--login-border);

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 14px 35px rgba(16, 21, 25, .06);
}


/* ============================================================
   LOGIN HEADER
   ============================================================ */

.rms-login-card-header {
    margin-bottom: 27px;
}


.rms-login-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #74080e;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: .11em;
}


.rms-login-card-header h2 {
    margin: 0;

    color: var(--login-text);

    font-size: 27px;
    line-height: 1.2;

    font-weight: 850;

    letter-spacing: -.035em;
}


.rms-login-card-header p {
    margin: 9px 0 0;

    color: var(--login-muted);

    font-size: 12px;
    line-height: 1.6;
}


/* ============================================================
   FORM
   ============================================================ */

.rms-login-form {
    display: flex;
    flex-direction: column;

    gap: 17px;
}


.rms-login-field {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.rms-login-field > label {
    color: var(--login-text-2);

    font-size: 11px;
    font-weight: 750;
}


.rms-login-input-wrap {
    position: relative;

    display: flex;
    align-items: center;
}


.rms-login-input-icon {
    position: absolute;

    inset-inline-start: 12px;

    z-index: 2;

    color: #737b85;

    font-size: 14px;

    pointer-events: none;
}


.rms-login-input-wrap input {
    width: 100%;
    height: 45px;

    box-sizing: border-box;

    padding:
        0 13px
        0 39px;

    border: 1px solid #d9dde2;

    border-radius: 7px;

    outline: none;

    background: #f8f9fa;

    color: #15191f;

    font: inherit;
    font-size: 13px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


html[dir="rtl"]
.rms-login-input-wrap input {
    padding:
        0 39px
        0 13px;
}


.rms-login-input-wrap input:hover {
    border-color: #c6cbd1;
}


.rms-login-input-wrap input:focus {
    border-color: #74080e;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(116, 8, 14, .08);
}


.rms-login-input-wrap input::placeholder {
    color: #a2a8af;
}


/* ============================================================
   BUTTON
   ============================================================ */

.rms-login-submit {
    width: 100%;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 3px;

    border: 1px solid #74080e;

    border-radius: 7px;

    cursor: pointer;

    background: #74080e;

    color: #ffffff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .08s ease;
}


.rms-login-submit:hover {
    background: #62070c;

    border-color: #62070c;
}


.rms-login-submit:active {
    background: #52060a;

    border-color: #52060a;

    transform: translateY(1px);
}


.rms-login-submit-arrow {
    font-size: 15px;
    line-height: 1;
}


/* ============================================================
   SECURITY NOTE
   ============================================================ */

.rms-login-security {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 1px;

    color: #7b838d;

    font-size: 9px;
    line-height: 1.4;

    text-align: center;
}


.rms-login-security-icon {
    width: 16px;
    height: 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #edf5f0;

    color: #177a4b;

    font-size: 9px;
    font-weight: 800;
}


/* ============================================================
   ERRORS
   ============================================================ */

.rms-login-error {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    padding: 10px 11px;

    border: 1px solid #efd0d5;

    border-radius: 7px;

    background: #fff6f7;

    color: #8f1021;

    font-size: 11px;
    line-height: 1.45;
}


.rms-login-error ul,
.rms-login-field-error ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.rms-login-error-icon {
    width: 19px;
    height: 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #a20b20;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
}


.rms-login-field-error {
    color: #a20b20;

    font-size: 10px;
}


/* ============================================================
   MOBILE BRAND
   ============================================================ */

.rms-login-mobile-brand {
    display: none;
}


.rms-login-mobile-footer {
    display: none;
}


/* ============================================================
   RTL
   ============================================================ */

html[dir="rtl"] .rms-login-page,
html[dir="rtl"] .rms-login-card,
html[dir="rtl"] .rms-login-brand-panel {
    text-align: right;
}


html[dir="rtl"]
.rms-login-brand-panel::after {
    left: auto;
    right: 0;
}


html[dir="rtl"]
.rms-login-brand-panel::before {
    right: auto;
    left: -170px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

    .rms-login-shell {
        grid-template-columns:
            minmax(350px, 42%)
            1fr;
    }


    .rms-login-brand-panel {
        padding:
            32px
            30px
            26px;
    }


    .rms-login-visual-content h1 {
        font-size: 39px;
    }


    .rms-login-form-panel {
        padding: 34px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 780px) {

    .rms-login-shell {
        display: block;

        min-height: 100vh;
    }


    .rms-login-brand-panel {
        display: none;
    }


    .rms-login-form-panel {
        min-height: 100vh;

        justify-content: center;

        padding:
            24px
            18px;

        background:
            #f4f5f7;
    }


    .rms-login-mobile-brand {
        width: 100%;
        max-width: 420px;

        display: flex;
        align-items: center;

        gap: 11px;

        margin-bottom: 18px;
    }


    .rms-login-mobile-brand img {
        width: 39px;
        height: 39px;

        object-fit: contain;
    }


    .rms-login-mobile-brand div {
        display: flex;
        flex-direction: column;
    }


    .rms-login-mobile-brand strong {
        color: #15191f;

        font-size: 16px;
        font-weight: 850;
    }


    .rms-login-mobile-brand small {
        margin-top: 2px;

        color: #7b838d;

        font-size: 9px;
    }


    .rms-login-card {
        max-width: 420px;

        padding:
            28px
            24px;

        border-radius: 9px;
    }


    .rms-login-card-header h2 {
        font-size: 23px;
    }


    .rms-login-mobile-footer {
        width: 100%;
        max-width: 420px;

        display: block;

        margin-top: 16px;

        text-align: center;
    }


    .rms-login-mobile-footer a {
        color: #7b838d;

        text-decoration: none;

        font-size: 9px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .rms-login-form-panel {
        padding:
            18px
            14px;
    }


    .rms-login-card {
        padding:
            24px
            18px;
    }


    .rms-login-input-wrap input {
        height: 44px;
    }


    .rms-login-submit {
        height: 45px;
    }

}


/* ==========================================================================
   SKLS RMS — MENU-WIDE SCHEDULED DISCOUNTS
   Dedicated Owner management + POS campaign display
   ========================================================================== */

.discount-status-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}

.discount-status-kpis>div{
  padding:14px 16px;
  border:1px solid var(--rms-border,#e1e4e8);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--rms-shadow,0 1px 3px rgba(16,24,40,.055));
}

.discount-status-kpis span{
  display:block;
  color:var(--rms-muted,#7a828c);
  font-size:10px;
  font-weight:750;
}

.discount-status-kpis strong{
  display:block;
  margin-top:5px;
  color:var(--rms-text,#171a1f);
  font-size:22px;
}

.discount-table td{
  vertical-align:middle;
}

.discount-table td>strong{
  display:block;
}

.discount-status{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 9px;
  border-radius:999px;
  font-size:9px;
  font-weight:850;
}

.discount-status-active{
  border:1px solid #dcbfc2;
  background:#f9edef;
  color:#76090f;
}

.discount-status-scheduled{
  border:1px solid #fedf89;
  background:#fffaeb;
  color:#b54708;
}

.discount-status-expired{
  border:1px solid #d0d5dd;
  background:#f2f4f7;
  color:#667085;
}

.discount-status-inactive{
  border:1px solid #e4e7ec;
  background:#fff;
  color:#98a2b3;
}

.discount-actions{
  align-items:center;
  flex-wrap:wrap;
}

.discount-actions form{
  margin:0;
}

.discount-editor-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,.65fr);
  gap:18px;
  align-items:start;
}

.discount-editor-form{
  max-width:none;
}

.discount-value-input{
  position:relative;
}

.discount-value-input input{
  padding-inline-end:38px!important;
}

.discount-value-input>b{
  position:absolute;
  inset-inline-end:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--rms-primary,#76090f);
  pointer-events:none;
}

.discount-overlap-note{
  margin-top:18px;
  padding:12px 14px;
  border:1px solid #fedf89;
  border-radius:9px;
  background:#fffaeb;
}

.discount-overlap-note strong{
  color:#93370d;
}

.discount-overlap-note p{
  margin:4px 0 0;
  color:#b54708;
  font-size:10px;
  line-height:1.5;
}

.discount-live-preview{
  position:sticky;
  top:84px;
}

.discount-preview-product{
  overflow:hidden;
  border:1px solid var(--rms-border,#e1e4e8);
  border-radius:10px;
  background:#fff;
}

.discount-preview-label{
  display:block;
  padding:12px 14px;
  border-bottom:1px solid var(--rms-border,#e1e4e8);
  background:#fafbfb;
  color:var(--rms-text,#171a1f);
  font-weight:800;
}

.discount-preview-product>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:11px 14px;
  border-bottom:1px solid #f0f2f5;
}

.discount-preview-product>div:last-child{
  border-bottom:0;
}

.discount-preview-product div>span{
  color:var(--rms-muted,#7a828c);
  font-size:10px;
}

.discount-preview-product strong{
  font-variant-numeric:tabular-nums;
}

.discount-preview-product strong small{
  color:var(--rms-muted,#7a828c);
  font-size:9px;
}

.discount-preview-saving{
  color:var(--rms-primary,#76090f);
}

.discount-preview-final{
  background:var(--rms-primary-soft,#f9edef);
}

.discount-preview-final strong{
  color:var(--rms-primary,#76090f);
  font-size:20px;
}

.discount-history-note{
  margin-top:14px;
}


/* POS active campaign */

.pos-v2 .menu-campaign-banner{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 9px;
  padding:9px 11px;
  border:1px solid #dfc2c5;
  border-radius:8px;
  background:#f9edef;
}

.pos-v2 .menu-campaign-badge{
  min-width:50px;
  min-height:31px;
  padding:5px 8px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:var(--rms-primary,#76090f);
  color:#fff;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.pos-v2 .menu-campaign-banner>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.pos-v2 .menu-campaign-banner strong{
  color:var(--rms-primary,#76090f);
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pos-v2 .menu-campaign-banner small{
  color:#75575a;
  font-size:9px;
}

.pos-v2 .product-campaign-pricing{
  margin-top:auto;
  padding:6px 14px 11px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

.pos-v2 .product-campaign-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
}

.pos-v2 .product-campaign-off{
  padding:2px 5px;
  border-radius:4px;
  background:var(--rms-primary,#76090f);
  color:#fff;
  font-size:8px;
  line-height:1.3;
  font-weight:850;
}

.pos-v2 .product-original-price{
  color:#8b929a;
  font-size:9px;
  text-decoration:line-through;
}

.pos-v2 .product-final-price{
  padding:0!important;
  margin:0!important;
  color:var(--rms-primary,#76090f)!important;
  background:transparent!important;
  font-size:15px!important;
  font-weight:850!important;
}

.pos-v2 .product-final-price small{
  color:#7a828c!important;
  font-size:8px!important;
}


/* Historical promotion display on Order Detail / invoice */

.order-promotion-tag{
  display:inline-flex;
  align-items:center;
  margin-top:3px;
  padding:3px 7px;
  border:1px solid #dfc2c5;
  border-radius:999px;
  background:#f9edef;
  color:#76090f;
  font-size:9px;
  font-weight:850;
}

.order-promotion-prices{
  color:#667085!important;
  line-height:1.45;
}

@media(max-width:900px){
  .discount-status-kpis{
    grid-template-columns:1fr 1fr;
  }

  .discount-editor-grid{
    grid-template-columns:1fr;
  }

  .discount-live-preview{
    position:relative;
    top:auto;
  }
}

@media(max-width:520px){
  .discount-status-kpis{
    grid-template-columns:1fr;
  }
}


/* ==========================================================================
   SETTINGS — AUTHORITATIVE MENU DISCOUNT SUMMARY
   ========================================================================== */

.settings-discount-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:14px 0;
}

.settings-discount-card{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border:1px solid var(--rms-border,#e1e4e8);
  border-radius:9px;
  background:#fff;
}

.settings-discount-card-active{
  border-color:#dfc2c5;
  background:#fff8f8;
}

.settings-discount-card-scheduled{
  border-color:#fedf89;
  background:#fffaeb;
}

.settings-discount-status{
  color:var(--rms-muted,#7a828c);
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.settings-discount-card-active .settings-discount-status,
.settings-discount-card-active>b{
  color:var(--rms-primary,#76090f);
}

.settings-discount-card-scheduled .settings-discount-status{
  color:#b54708;
}

.settings-discount-card strong{
  color:var(--rms-text,#171a1f);
  font-size:13px;
}

.settings-discount-card>b{
  font-size:20px;
}

.settings-discount-card small{
  color:var(--rms-muted,#7a828c);
  font-size:10px;
}

@media(max-width:700px){
  .settings-discount-summary{
    grid-template-columns:1fr;
  }
}


.order-current-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding:10px 12px;
  border:1px solid var(--rms-border,#e1e4e8);
  border-radius:8px;
  background:#f8f9fa;
}

.order-current-status>span{
  color:var(--rms-muted,#7b838d);
  font-size:10px;
  font-weight:750;
}

.ready-order-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.ready-order-actions>.btn,
.ready-order-action-form>.btn{
  min-width:120px;
}

.ready-order-action-form{
  margin:0;
}

.order-confirm-modal[hidden]{
  display:none!important;
}

.order-confirm-modal{
  position:fixed;
  inset:0;
  z-index:3000;
  display:grid;
  place-items:center;
  padding:20px;
}

.order-confirm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(16,21,25,.58);
  backdrop-filter:blur(2px);
}

.order-confirm-dialog{
  position:relative;
  z-index:1;
  width:min(430px,100%);
  padding:25px;
  border:1px solid var(--rms-border,#e1e4e8);
  border-radius:12px;
  background:#fff;
  box-shadow:0 24px 70px rgba(16,21,25,.22);
  text-align:center;
}

.order-confirm-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  border-radius:50%;
  background:var(--rms-primary-soft,#f8ecee);
  color:var(--rms-primary,#74080e);
  font-size:22px;
  font-weight:900;
}

.order-confirm-dialog h2{
  margin:0;
  color:var(--rms-text,#15191f);
  font-size:20px;
}

.order-confirm-dialog p{
  margin:9px 0 20px;
  color:var(--rms-text-2,#4e5661);
  font-size:12px;
  line-height:1.6;
}

.order-confirm-actions{
  display:flex;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
}

.order-confirm-actions form{
  margin:0;
}

.order-confirm-actions .btn{
  min-width:112px;
}

body.order-modal-open{
  overflow:hidden;
}

/* Arabic / RTL workflow */
html[dir="rtl"] .order-workflow-panel,
html[dir="rtl"] .order-current-status,
html[dir="rtl"] .ready-order-actions,
html[dir="rtl"] .order-confirm-dialog,
html[dir="rtl"] .details-list,
html[dir="rtl"] .order-items,
html[dir="rtl"] .invoice-summary{
  direction:rtl;
  text-align:right;
}

html[dir="rtl"] .ready-order-actions{
  flex-direction:row;
}

html[dir="rtl"] .order-confirm-actions{
  direction:rtl;
}

html[dir="rtl"] .order-confirm-dialog{
  text-align:center;
}

html[dir="rtl"] select,
html[dir="rtl"] input,
html[dir="rtl"] textarea{
  text-align:right;
}

@media(max-width:560px){
  .ready-order-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .ready-order-actions>.btn,
  .ready-order-action-form,
  .ready-order-action-form>.btn{
    width:100%;
    min-width:0;
  }

  .order-confirm-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .order-confirm-actions .btn,
  .order-confirm-actions form,
  .order-confirm-actions form .btn{
    width:100%;
    min-width:0;
  }
}



.pos-v2 .custom-delivery-fee-field{
  min-width:0;
}

.pos-v2 .custom-delivery-money-input{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.pos-v2 .custom-delivery-money-input input{
  flex:1 1 auto;
  min-width:0;
}

.pos-v2 .custom-delivery-money-input strong{
  flex:0 0 auto;
  min-width:48px;
  padding:0 4px;
  color:var(--rms-text-2,#4e5661);
  font-size:11px;
  font-weight:800;
  text-align:center;
}

.pos-v2 #customDeliveryFee[aria-invalid="true"]{
  border-color:var(--rms-danger,#a20b20);
  box-shadow:0 0 0 2px rgba(162,11,32,.08);
}

.pos-v2 .custom-delivery-fee-field small{
  display:block;
  margin-top:5px;
  color:var(--rms-muted,#7b838d);
  font-size:10px;
  line-height:1.45;
}

html[dir="rtl"] .pos-v2 .custom-delivery-money-input{
  direction:rtl;
}

html[dir="rtl"] .pos-v2 #customDeliveryFee{
  direction:ltr;
  text-align:right;
}

@media(max-width:760px){
  .pos-v2 .delivery-routing-fields{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   EXISTING CUSTOMER AVATAR — LIGHTER DESIGN
   ============================================================ */

.pos-v2 .customer-avatar {
    background: #f8ecee;
    color: #74080e;
    border: 1px solid #e5c5c9;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-size: 17px;
    font-weight: 800;

    box-shadow: none;
}


/* ============================================================
   SKLS RMS — DISCOUNT SCOPE V10
   All Menu Items + Selected Menu Items
   ============================================================ */

.discount-editor-page,
.discount-management-page {
    max-width: 1280px;
    margin: 0 auto;
}

.discount-editor-card,
.table-card.discount-table-card {
    background: var(--rms-surface, #fff);
    border: 1px solid var(--rms-border, #e1e4e8);
    border-radius: 14px;
}

.discount-editor-card {
    overflow: hidden;
}

.discount-form-section {
    display: grid;
    grid-template-columns: minmax(210px, 0.32fr) minmax(0, 1fr);
    gap: 28px;
    padding: 24px;
    border-bottom: 1px solid var(--rms-border, #e1e4e8);
}

.discount-form-section.compact-section {
    display: block;
}

.discount-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.discount-form-grid .field-span-2 {
    grid-column: 1 / -1;
}

.discount-value-input {
    position: relative;
}

.discount-value-input input {
    padding-inline-end: 42px;
}

.discount-value-input > strong {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rms-muted, #7b838d);
}

.discount-scope-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.discount-scope-choice {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px;
    border: 1px solid var(--rms-border, #e1e4e8);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.discount-scope-choice:has(input:checked) {
    border-color: #74080e;
    background: #fff8f8;
    box-shadow: 0 0 0 2px rgba(116, 8, 14, 0.07);
}

.discount-scope-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.scope-radio-ui {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2px solid #b7bec7;
    border-radius: 50%;
    margin-top: 2px;
    background: #fff;
}

.discount-scope-choice:has(input:checked) .scope-radio-ui {
    border: 5px solid #74080e;
}

.scope-choice-copy {
    display: grid;
    gap: 3px;
}

.scope-choice-copy small,
.section-copy p,
.selected-items-toolbar small {
    color: var(--rms-muted, #7b838d);
}

.discount-selected-items {
    grid-column: 2;
    margin-top: -4px;
    padding: 16px;
    border: 1px solid var(--rms-border, #e1e4e8);
    border-radius: 12px;
    background: var(--rms-surface-muted, #f8f9fa);
}

.selected-items-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.selected-items-toolbar > div {
    display: grid;
    gap: 2px;
}

.discount-item-search {
    min-width: min(360px, 50%);
}

.discount-item-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 360px;
    overflow: auto;
    padding: 2px;
}

.discount-item-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #e4e7eb;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.discount-item-option:has(input:checked) {
    border-color: #c78489;
    background: #fff7f7;
}

.discount-item-option input {
    position: absolute;
    opacity: 0;
}

.discount-check-ui {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 1px solid #b9c0c8;
    border-radius: 5px;
    color: transparent;
    background: #fff;
    font-size: 12px;
    font-weight: 900;
}

.discount-item-option:has(input:checked) .discount-check-ui {
    border-color: #74080e;
    background: #74080e;
    color: #fff;
}

.discount-no-results {
    padding: 22px;
    text-align: center;
    color: var(--rms-muted, #7b838d);
}

.discount-active-toggle {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.discount-active-toggle > span {
    display: grid;
    gap: 3px;
}

.discount-active-toggle small {
    color: var(--rms-muted, #7b838d);
}

.discount-live-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: #fbfbfc;
    border-bottom: 1px solid var(--rms-border, #e1e4e8);
}

.discount-preview-prices {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-original {
    color: #808792;
    text-decoration: line-through;
}

.preview-off {
    padding: 4px 8px;
    border-radius: 999px;
    background: #f8ecee;
    color: #74080e;
    font-size: 12px;
    font-weight: 800;
}

.discount-preview-prices > strong {
    font-size: 22px;
    color: #15191f;
}

.discount-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
}

.field-error,
.form-alert-danger {
    color: #a20b20;
}

.form-alert {
    margin: 20px 24px 0;
    padding: 12px 14px;
    border-radius: 9px;
}

.form-alert-danger {
    border: 1px solid #efc6cb;
    background: #fff5f6;
}

.discount-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.discount-summary-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 16px;
    background: #fff;
    border: 1px solid var(--rms-border, #e1e4e8);
    border-radius: 11px;
}

.discount-summary-card span {
    color: var(--rms-text-2, #4e5661);
}

.discount-summary-card strong {
    font-size: 22px;
}

.discount-table td > small {
    display: block;
    margin-top: 3px;
    color: var(--rms-muted, #7b838d);
}

.scope-pill,
.discount-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f1f3f5;
    color: #39414b;
    font-size: 12px;
    font-weight: 700;
}

.scope-pill-all {
    background: #f8ecee;
    color: #74080e;
}

.status-active {
    background: #e9f7ef;
    color: #177a4b;
}

.status-scheduled {
    background: #fff5e6;
    color: #9a5a08;
}

.status-expired,
.status-inactive {
    background: #f1f3f5;
    color: #68717c;
}

.selected-scope-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.discount-items-details {
    position: relative;
}

.discount-items-details summary {
    cursor: pointer;
    color: #74080e;
    font-size: 12px;
    font-weight: 700;
    list-style: none;
}

.discount-items-details summary::-webkit-details-marker {
    display: none;
}

.discount-items-popover {
    position: absolute;
    z-index: 20;
    inset-inline-start: 0;
    top: calc(100% + 7px);
    display: grid;
    gap: 5px;
    min-width: 220px;
    max-width: 320px;
    max-height: 240px;
    overflow: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--rms-border, #e1e4e8);
    border-radius: 9px;
    box-shadow: 0 12px 30px rgba(16, 21, 25, 0.12);
}

@media (max-width: 900px) {
    .discount-form-section {
        grid-template-columns: 1fr;
    }

    .discount-selected-items {
        grid-column: 1;
    }

    .discount-scope-options,
    .discount-form-grid,
    .discount-item-options,
    .discount-summary-grid {
        grid-template-columns: 1fr;
    }

    .selected-items-toolbar,
    .discount-live-preview {
        align-items: stretch;
        flex-direction: column;
    }

    .discount-item-search {
        min-width: 0;
        width: 100%;
    }
}

/* ============================================================
   DISCOUNT — ELEGANT MENU ITEM SEARCH
   ============================================================ */

.discount-item-search-wrap {
    width: min(100%, 390px);
    margin-inline-start: auto;
}

.discount-item-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #fff;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.discount-item-search:hover {
    border-color: #c6cbd1;
    background: #fdfdfd;
}

.discount-item-search:focus-within {
    border-color: var(--rms-primary, #74080e);
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(116, 8, 14, 0.09),
        0 4px 14px rgba(21, 25, 31, 0.05);
}

.discount-search-icon {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
    color: #717983;
    pointer-events: none;
    transition: color 0.18s ease;
}

.discount-search-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.discount-item-search:focus-within .discount-search-icon {
    color: var(--rms-primary, #74080e);
}

.discount-item-search input[type="search"] {
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding-block: 0;
    padding-inline-start: 44px;
    padding-inline-end: 44px;
    border: 0;
    outline: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--rms-text, #15191f);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
}

.discount-item-search input[type="search"]::placeholder {
    color: #8b929b;
    font-weight: 400;
    opacity: 1;
}

.discount-item-search input[type="search"]:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
}

.discount-item-search input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
    opacity: 0.6;
}

.discount-search-shortcut {
    position: absolute;
    inset-inline-end: 11px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 1px solid #e2e5e8;
    border-radius: 6px;
    background: #f6f7f8;
    color: #737b85;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

.discount-item-search:focus-within .discount-search-shortcut {
    border-color: rgba(116, 8, 14, 0.16);
    background: var(--rms-primary-soft, #f8ecee);
    color: var(--rms-primary, #74080e);
}


/* Selected items header becomes cleaner with search beside it */

.selected-items-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-bottom: 1px solid #eceef1;
    background: #fafbfb;
}

.selected-items-toolbar > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.selected-items-toolbar > div:first-child > strong {
    color: var(--rms-text, #15191f);
    font-size: 0.94rem;
    font-weight: 700;
}

.selected-items-toolbar > div:first-child > small {
    color: var(--rms-muted, #7b838d);
    font-size: 0.78rem;
}


/* Search results area */

.discount-item-options {
    max-height: 330px;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: #c8cdd2 transparent;
}

.discount-item-option {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.discount-item-option:hover {
    background: #f7f8f9;
    border-color: #eceef0;
}

.discount-item-option:has(input:checked) {
    background: var(--rms-primary-soft, #f8ecee);
    border-color: rgba(116, 8, 14, 0.13);
}

.discount-item-option > span:last-child {
    color: var(--rms-text, #15191f);
    font-size: 0.88rem;
    font-weight: 500;
}


/* Empty search result */

.discount-no-results {
    margin: 8px 10px 14px;
    padding: 20px;
    border: 1px dashed #d7dbe0;
    border-radius: 9px;
    background: #fafbfb;
    color: var(--rms-muted, #7b838d);
    text-align: center;
    font-size: 0.86rem;
}


/* Arabic / narrow screens */

@media (max-width: 720px) {
    .selected-items-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .discount-item-search-wrap {
        width: 100%;
        margin-inline-start: 0;
    }
}

.adjustment-kpis{margin-bottom:18px}.adjustment-filters{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(150px,.9fr) minmax(150px,.8fr) minmax(150px,.8fr) auto;gap:12px;align-items:end;margin:16px 0 18px}.adjustment-filters label,.adjustment-form .field{display:grid;gap:6px}.adjustment-filter-actions,.form-actions,.row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.adjustment-form-panel{max-width:820px}.adjustment-form{display:grid;gap:16px}.adjustment-type-field ul{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap}.adjustment-type-field li label{display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 12px;border:1px solid var(--rms-border);border-radius:var(--rms-radius);background:var(--rms-surface);cursor:pointer}.amount-positive{color:var(--rms-success)}.amount-negative{color:var(--rms-danger)}.adjustment-cards-mobile{display:none}.adjustment-mobile-card{border:1px solid var(--rms-border);border-radius:var(--rms-radius-lg);background:var(--rms-surface);padding:14px;box-shadow:var(--rms-shadow)}.adjustment-mobile-card+.adjustment-mobile-card{margin-top:10px}.adjustment-mobile-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.adjustment-confirm-grid{display:grid;gap:12px;margin:0 0 18px}.adjustment-confirm-grid>div{display:grid;grid-template-columns:minmax(110px,160px) 1fr;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--rms-border)}.adjustment-confirm-grid dt{color:var(--rms-muted)}.adjustment-confirm-grid dd{margin:0;font-weight:600}@media(max-width:1050px){.adjustment-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.adjustment-filter-actions{grid-column:1/-1}}@media(max-width:720px){.adjustment-kpis,.adjustment-filters{grid-template-columns:1fr}.adjustment-filter-actions{grid-column:auto}.adjustment-table-desktop{display:none}.adjustment-cards-mobile{display:block}.adjustment-mobile-card .row-actions .btn{flex:1 1 120px}.adjustment-confirm-grid>div{grid-template-columns:1fr;gap:4px}}html[dir="rtl"] .adjustment-mobile-head,html[dir="rtl"] .row-actions,html[dir="rtl"] .form-actions{direction:rtl}



.employee-finance-page{
  --finance-primary:var(--rms-primary,#76090f);
  --finance-primary-hover:var(--rms-primary-hover,#65070c);
  --finance-primary-soft:var(--rms-primary-soft,#f9edef);
  --finance-surface:var(--rms-surface,#fff);
  --finance-surface-soft:var(--rms-surface-soft,#f8f9fa);
  --finance-border:var(--rms-border,#e1e4e8);
  --finance-border-strong:var(--rms-border-strong,#cfd4da);
  --finance-text:var(--rms-text,#171a1f);
  --finance-text-2:var(--rms-text-secondary,#555d67);
  --finance-muted:var(--rms-muted,#7a828c);
  --finance-success:var(--rms-success,#19734b);
  --finance-danger:var(--rms-danger,#a10b1d);
  --finance-warning:var(--rms-warning,#ad6508);
  --finance-radius:var(--rms-radius,9px);
  --finance-radius-lg:var(--rms-radius-lg,12px);
  --finance-shadow:var(--rms-shadow,0 1px 3px rgba(16,24,40,.055));
  width:100%;
  color:var(--finance-text);
}

.employee-finance-page .finance-page-heading{
  align-items:center;
  margin-bottom:18px;
}

.employee-finance-page .finance-heading-copy,
.employee-finance-page .finance-employee-heading{
  min-width:0;
  display:flex;
  align-items:center;
  gap:13px;
}

.employee-finance-page .finance-heading-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border:1px solid #e7c9cd;
  border-radius:11px;
  background:var(--finance-primary-soft);
  color:var(--finance-primary);
  font-size:22px;
  font-weight:900;
}

.employee-finance-page .finance-heading-icon.is-danger{
  border-color:#efcdd1;
  background:#fff4f5;
  color:var(--finance-danger);
}

.employee-finance-page .finance-page-heading h1{
  margin:3px 0 5px;
  color:var(--finance-text);
  font-size:27px;
  line-height:1.12;
  letter-spacing:-.025em;
}

html[dir="rtl"] .employee-finance-page .finance-page-heading h1{
  letter-spacing:0;
}

.employee-finance-page .finance-page-heading p:last-child{
  max-width:760px;
  color:var(--finance-muted);
  line-height:1.5;
}

.employee-finance-page .finance-primary-action{
  min-height:42px;
  padding-inline:15px;
}

.employee-finance-page .finance-btn-icon{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:5px;
  background:rgba(255,255,255,.15);
  font-size:16px;
  font-weight:800;
}


/* Summary */

.employee-finance-page .finance-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}

.employee-finance-page .finance-summary-card{
  min-width:0;
  min-height:116px;
  padding:17px 18px;
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid var(--finance-border);
  border-radius:var(--finance-radius-lg);
  background:var(--finance-surface);
  box-shadow:var(--finance-shadow);
}

.employee-finance-page .finance-summary-card.is-bonus{
  border-color:#d8e8df;
}

.employee-finance-page .finance-summary-card.is-deduction{
  border-color:#eed9dc;
}

.employee-finance-page .finance-summary-card.is-net{
  border-color:#e4d5d7;
  background:linear-gradient(135deg,#fff 0%,var(--finance-primary-soft) 145%);
}

.employee-finance-page .finance-summary-icon{
  width:43px;
  height:43px;
  flex:0 0 43px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f1f3f4;
  color:var(--finance-text);
  font-size:20px;
  font-weight:900;
}

.employee-finance-page .finance-summary-card.is-bonus .finance-summary-icon{
  background:#edf7f1;
  color:var(--finance-success);
}

.employee-finance-page .finance-summary-card.is-deduction .finance-summary-icon{
  background:#fff2f3;
  color:var(--finance-danger);
}

.employee-finance-page .finance-summary-card.is-net .finance-summary-icon{
  background:var(--finance-primary-soft);
  color:var(--finance-primary);
}

.employee-finance-page .finance-summary-card>div:last-child{
  min-width:0;
}

.employee-finance-page .finance-summary-card span{
  display:block;
  color:var(--finance-muted);
  font-size:10px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.04em;
}

html[dir="rtl"] .employee-finance-page .finance-summary-card span{
  letter-spacing:0;
}

.employee-finance-page .finance-summary-card strong{
  display:block;
  margin-top:5px;
  overflow:hidden;
  color:var(--finance-text);
  font-size:23px;
  font-weight:850;
  line-height:1.15;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.employee-finance-page .finance-summary-card.is-bonus strong{
  color:var(--finance-success);
}

.employee-finance-page .finance-summary-card.is-deduction strong{
  color:var(--finance-danger);
}

.employee-finance-page .finance-summary-card.is-net strong{
  color:var(--finance-primary);
}

.employee-finance-page .finance-summary-card strong small{
  display:inline;
  color:inherit;
  font-size:9px;
  font-weight:700;
  opacity:.78;
}

.employee-finance-page .finance-summary-card>div:last-child>small{
  display:block;
  margin-top:4px;
  color:var(--finance-muted);
  font-size:9px;
  line-height:1.35;
}


/* Panel headings */

.employee-finance-page .finance-panel-heading,
.employee-finance-page .finance-form-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.employee-finance-page .finance-panel-heading h2,
.employee-finance-page .finance-form-card-head h2,
.employee-finance-page .finance-panel-head h2{
  margin:2px 0 4px;
  color:var(--finance-text);
  font-size:17px;
}

.employee-finance-page .finance-panel-heading p:last-child,
.employee-finance-page .finance-form-card-head p:last-child,
.employee-finance-page .finance-panel-head p:last-child{
  margin:0;
  color:var(--finance-muted);
  font-size:11px;
  line-height:1.45;
}

.employee-finance-page .finance-record-count,
.employee-finance-page .finance-edit-pill{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid var(--finance-border);
  border-radius:999px;
  background:var(--finance-surface-soft);
  color:var(--finance-muted);
  font-size:9px;
  font-weight:800;
}


/* Filters */

.employee-finance-page .finance-filter-panel{
  padding:18px;
}

.employee-finance-page .finance-filter-grid{
  display:grid;
  grid-template-columns:minmax(190px,1.35fr) minmax(150px,.8fr) minmax(145px,.75fr) minmax(145px,.75fr) auto;
  gap:10px;
  align-items:end;
  margin:15px 0 0;
}

.employee-finance-page .finance-field{
  min-width:0;
  display:grid;
  gap:6px;
}

.employee-finance-page .finance-field>span,
.employee-finance-page .finance-field>label,
.employee-finance-page .finance-field>label:first-child{
  color:var(--finance-text-2);
  font-size:10px;
  font-weight:750;
}

.employee-finance-page .finance-field input,
.employee-finance-page .finance-field select,
.employee-finance-page .finance-field textarea,
.employee-finance-page .finance-filter-grid input,
.employee-finance-page .finance-filter-grid select{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:8px 10px;
  border:1px solid var(--finance-border-strong);
  border-radius:8px;
  outline:none;
  background:var(--finance-surface);
  color:var(--finance-text);
  box-shadow:none;
}

.employee-finance-page .finance-field textarea{
  min-height:106px;
  resize:vertical;
}

.employee-finance-page .finance-field input:focus,
.employee-finance-page .finance-field select:focus,
.employee-finance-page .finance-field textarea:focus,
.employee-finance-page .finance-filter-grid input:focus,
.employee-finance-page .finance-filter-grid select:focus{
  border-color:#c4979b;
  box-shadow:0 0 0 3px rgba(118,9,15,.055);
}

.employee-finance-page .finance-filter-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}


/* History table */

.employee-finance-page .finance-history-panel{
  padding:0;
  overflow:hidden;
}

.employee-finance-page .finance-history-panel>.finance-panel-head{
  margin:0;
  padding:18px 20px;
  align-items:center;
  border-bottom:1px solid var(--finance-border);
  background:linear-gradient(180deg,#fff,#fcfcfd);
}

.employee-finance-page .finance-table-wrap{
  overflow:auto;
}

.employee-finance-page .finance-table{
  width:100%;
  min-width:820px;
  border-collapse:collapse;
}

.employee-finance-page .finance-table th{
  padding:10px 13px;
  text-align:start;
  border-bottom:1px solid var(--finance-border);
  background:#f8f9fa;
  color:#656d76;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.045em;
  white-space:nowrap;
}

html[dir="rtl"] .employee-finance-page .finance-table th{
  text-align:right;
  letter-spacing:0;
}

.employee-finance-page .finance-table td{
  padding:12px 13px;
  border-bottom:1px solid #eef0f2;
  vertical-align:middle;
}

.employee-finance-page .finance-table tbody tr:last-child td{
  border-bottom:0;
}

.employee-finance-page .finance-table tbody tr:hover{
  background:#fcfcfd;
}

.employee-finance-page .finance-date-cell strong{
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.employee-finance-page .finance-mini-avatar{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border:1px solid #e7c8cb;
  border-radius:8px;
  background:var(--finance-primary-soft);
  color:var(--finance-primary);
  font-size:11px;
  font-weight:850;
}

.employee-finance-page .finance-employee-link,
.employee-finance-page .finance-payroll-employee{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.employee-finance-page .finance-employee-link{
  color:var(--finance-text);
  font-size:11px;
  font-weight:750;
}

.employee-finance-page .finance-employee-link:hover{
  color:var(--finance-primary);
}

.employee-finance-page .finance-payroll-employee>span:last-child{
  min-width:0;
  display:grid;
  gap:2px;
}

.employee-finance-page .finance-payroll-employee strong{
  overflow:hidden;
  color:var(--finance-text);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.employee-finance-page .finance-payroll-employee small{
  overflow:hidden;
  color:var(--finance-muted);
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.employee-finance-page .finance-type-badge{
  min-height:25px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}

.employee-finance-page .finance-type-badge>span{
  font-size:12px;
  line-height:1;
}

.employee-finance-page .finance-type-badge.is-bonus{
  border-color:#d0e5d8;
  background:#eff8f2;
  color:var(--finance-success);
}

.employee-finance-page .finance-type-badge.is-deduction{
  border-color:#efcfd3;
  background:#fff3f4;
  color:var(--finance-danger);
}

.employee-finance-page .finance-money{
  color:var(--finance-text);
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.employee-finance-page .amount-positive{
  color:var(--finance-success)!important;
}

.employee-finance-page .amount-negative{
  color:var(--finance-danger)!important;
}

.employee-finance-page .finance-money.neutral{
  color:var(--finance-text);
}

.employee-finance-page .finance-money.muted-money{
  color:var(--finance-text-2);
}

.employee-finance-page .finance-reason-cell{
  min-width:180px;
  max-width:300px;
}

.employee-finance-page .finance-reason-cell strong{
  display:block;
  overflow:hidden;
  color:var(--finance-text);
  font-size:10.5px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.employee-finance-page .finance-reason-cell small,
.employee-finance-page .finance-notes-cell{
  color:var(--finance-muted);
  font-size:9px;
  line-height:1.4;
}

.employee-finance-page .finance-reason-cell small{
  display:block;
  max-width:260px;
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.employee-finance-page .finance-audit-cell{
  min-width:120px;
  display:grid;
  gap:2px;
}

.employee-finance-page .finance-audit-cell strong{
  color:var(--finance-text-2);
  font-size:10px;
  font-weight:700;
}

.employee-finance-page .finance-audit-cell small{
  color:var(--finance-muted);
  font-size:8.5px;
}

.employee-finance-page .finance-row-actions{
  flex-wrap:nowrap;
}

.employee-finance-page .finance-actions-column{
  min-width:125px;
}


/* Empty */

.employee-finance-page .finance-empty-state{
  min-height:190px;
  padding:28px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--finance-muted);
}

.employee-finance-page .finance-empty-icon{
  width:44px;
  height:44px;
  margin-bottom:10px;
  display:grid;
  place-items:center;
  border:1px solid #ead3d5;
  border-radius:11px;
  background:var(--finance-primary-soft);
  color:var(--finance-primary);
  font-size:18px;
  font-weight:850;
}

.employee-finance-page .finance-empty-state strong{
  color:var(--finance-text);
  font-size:12px;
}

.employee-finance-page .finance-empty-state p{
  max-width:390px;
  margin:5px 0 12px;
  font-size:10px;
  line-height:1.45;
}


/* Mobile adjustment cards */

.employee-finance-page .finance-mobile-list{
  display:none;
  padding:12px;
  background:#f8f9fa;
}

.employee-finance-page .finance-adjustment-card{
  margin:0 0 10px;
  padding:14px;
  border:1px solid var(--finance-border);
  border-radius:10px;
  background:#fff;
  box-shadow:none;
}

.employee-finance-page .finance-adjustment-card:last-child{
  margin-bottom:0;
}

.employee-finance-page .adjustment-mobile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.employee-finance-page .finance-mobile-employee{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:11px;
  border-bottom:1px solid #eef0f2;
}

.employee-finance-page .finance-mobile-employee>span:last-child{
  min-width:0;
  display:grid;
  gap:2px;
}

.employee-finance-page .finance-mobile-employee strong{
  color:var(--finance-text);
  font-size:11px;
}

.employee-finance-page .finance-mobile-employee small{
  color:var(--finance-muted);
  font-size:9px;
}

.employee-finance-page .finance-mobile-details{
  display:grid;
  gap:9px;
  padding:11px 0;
}

.employee-finance-page .finance-mobile-details>div{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:10px;
}

.employee-finance-page .finance-mobile-details span{
  color:var(--finance-muted);
  font-size:9px;
}

.employee-finance-page .finance-mobile-details strong{
  min-width:0;
  color:var(--finance-text-2);
  font-size:10px;
  font-weight:650;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.employee-finance-page .finance-mobile-actions{
  padding-top:10px;
  border-top:1px solid #eef0f2;
}

.employee-finance-page .finance-mobile-actions .btn{
  flex:1 1 100px;
}


/* Pagination */

.employee-finance-page .finance-pagination{
  min-height:56px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-top:1px solid var(--finance-border);
  color:var(--finance-muted);
  font-size:10px;
}

.employee-finance-page .finance-pagination strong{
  color:var(--finance-text);
}


/* Form editor */

.employee-finance-page .finance-editor-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:18px;
  align-items:start;
}

.employee-finance-page .finance-form-card{
  max-width:none;
  padding:0;
  overflow:hidden;
}

.employee-finance-page .finance-form-card-head{
  padding:20px 22px;
  border-bottom:1px solid var(--finance-border);
  background:linear-gradient(180deg,#fff,#fcfcfd);
}

.employee-finance-page .finance-adjustment-form{
  display:block;
}

.employee-finance-page .finance-form-section{
  padding:20px 22px;
  border-bottom:1px solid var(--finance-border);
}

.employee-finance-page .finance-form-section-title{
  margin-bottom:15px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.employee-finance-page .finance-step{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:var(--finance-primary);
  color:#fff;
  font-size:10px;
  font-weight:850;
}

.employee-finance-page .finance-form-section-title>div{
  display:grid;
  gap:2px;
}

.employee-finance-page .finance-form-section-title strong{
  color:var(--finance-text);
  font-size:12px;
}

.employee-finance-page .finance-form-section-title small{
  color:var(--finance-muted);
  font-size:9px;
  line-height:1.4;
}

.employee-finance-page .finance-search-field{
  margin-bottom:10px;
}

.employee-finance-page .finance-search-input{
  position:relative;
  display:flex;
  align-items:center;
}

.employee-finance-page .finance-search-input>span{
  position:absolute;
  inset-inline-start:11px;
  z-index:2;
  color:var(--finance-muted);
  font-size:15px;
  pointer-events:none;
}

.employee-finance-page .finance-search-input input{
  padding-inline-start:34px;
  padding-inline-end:35px;
}

.employee-finance-page .finance-search-input button{
  position:absolute;
  inset-inline-end:7px;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--finance-muted);
  font-size:16px;
}

.employee-finance-page .finance-search-input button:hover{
  background:#f0f1f2;
  color:var(--finance-text);
}

.employee-finance-page .finance-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.employee-finance-page .finance-type-field{
  grid-column:1/-1;
}

.employee-finance-page .finance-type-field>ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}

.employee-finance-page .finance-type-field li{
  margin:0;
}

.employee-finance-page .finance-type-field li label{
  min-height:52px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--finance-border-strong);
  border-radius:9px;
  background:#fff;
  color:var(--finance-text);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

.employee-finance-page .finance-type-field li label:hover{
  border-color:#d1a4a8;
  background:#fffafa;
}

.employee-finance-page .finance-type-field input[type="radio"]{
  width:17px!important;
  height:17px!important;
  min-height:0!important;
  padding:0!important;
  accent-color:var(--finance-primary);
}

.employee-finance-page .finance-money-input{
  position:relative;
}

.employee-finance-page .finance-money-input input{
  padding-inline-end:64px;
  font-variant-numeric:tabular-nums;
}

.employee-finance-page .finance-money-input>strong{
  position:absolute;
  inset-inline-end:11px;
  top:50%;
  transform:translateY(-50%);
  padding-inline-start:8px;
  border-inline-start:1px solid var(--finance-border);
  color:var(--finance-muted);
  font-size:9px;
  font-weight:750;
}

.employee-finance-page .finance-field>small{
  color:var(--finance-muted);
  font-size:8.5px;
  line-height:1.4;
}

.employee-finance-page .finance-field-errors{
  color:var(--finance-danger);
  font-size:9px;
}

.employee-finance-page .finance-field-errors ul,
.employee-finance-page .finance-form-error ul{
  margin:0;
  padding-inline-start:18px;
}

.employee-finance-page .finance-form-error{
  margin:18px 22px 0;
  padding:10px 12px;
  border:1px solid #efcbd0;
  border-radius:8px;
  background:#fff5f6;
  color:var(--finance-danger);
  font-size:10px;
}

.employee-finance-page .finance-form-actions{
  position:static;
  margin:0;
  padding:15px 22px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  border:0;
  background:#fafbfb;
  backdrop-filter:none;
}

.employee-finance-page .finance-save-button{
  min-width:115px;
}

.employee-finance-page .finance-editor-aside{
  display:grid;
  gap:14px;
}

.employee-finance-page .finance-rule-card,
.employee-finance-page .finance-audit-card{
  margin:0;
  padding:18px;
}

.employee-finance-page .finance-rule-icon{
  width:38px;
  height:38px;
  margin-bottom:12px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--finance-primary);
  color:#fff;
  font-weight:900;
}

.employee-finance-page .finance-rule-card h3{
  margin:0 0 5px;
  font-size:14px;
}

.employee-finance-page .finance-rule-card>p{
  margin:0;
  color:var(--finance-muted);
  font-size:10px;
  line-height:1.5;
}

.employee-finance-page .finance-rule-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.employee-finance-page .finance-rule-list>div{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:9px;
  align-items:start;
}

.employee-finance-page .finance-rule-list>div>span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:var(--finance-primary-soft);
  color:var(--finance-primary);
  font-size:12px;
  font-weight:850;
}

.employee-finance-page .finance-rule-list p{
  margin:0;
  display:grid;
  gap:2px;
}

.employee-finance-page .finance-rule-list strong{
  color:var(--finance-text);
  font-size:10px;
}

.employee-finance-page .finance-rule-list small{
  color:var(--finance-muted);
  font-size:8.5px;
  line-height:1.4;
}

.employee-finance-page .finance-audit-card dl{
  display:grid;
  gap:10px;
  margin:12px 0 0;
}

.employee-finance-page .finance-audit-card dl>div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding-bottom:9px;
  border-bottom:1px solid #eef0f2;
}

.employee-finance-page .finance-audit-card dl>div:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.employee-finance-page .finance-audit-card dt{
  color:var(--finance-muted);
  font-size:9px;
}

.employee-finance-page .finance-audit-card dd{
  margin:0;
  color:var(--finance-text);
  font-size:9px;
  font-weight:700;
  text-align:end;
}


/* Delete */

.employee-finance-page .finance-delete-card{
  width:min(720px,100%);
  margin-inline:auto;
  padding:0;
  overflow:hidden;
}

.employee-finance-page .finance-delete-warning{
  padding:20px 22px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  border-bottom:1px solid #efd6da;
  background:linear-gradient(135deg,#fff7f8,#fff);
}

.employee-finance-page .finance-delete-warning-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--finance-danger);
  color:#fff;
  font-size:18px;
  font-weight:900;
}

.employee-finance-page .finance-delete-warning h2{
  margin:0 0 5px;
  color:var(--finance-text);
  font-size:16px;
}

.employee-finance-page .finance-delete-warning p{
  margin:0;
  color:var(--finance-muted);
  font-size:10px;
  line-height:1.5;
}

.employee-finance-page .finance-delete-employee{
  margin:18px 22px 0;
  padding:13px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--finance-border);
  border-radius:9px;
  background:var(--finance-surface-soft);
}

.employee-finance-page .finance-profile-avatar{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border:1px solid #e3c0c4;
  border-radius:10px;
  background:var(--finance-primary-soft);
  color:var(--finance-primary);
  font-size:15px;
  font-weight:850;
}

.employee-finance-page .finance-profile-avatar.large{
  width:48px;
  height:48px;
  flex-basis:48px;
  font-size:17px;
}

.employee-finance-page .finance-delete-employee>div{
  display:grid;
  gap:2px;
}

.employee-finance-page .finance-delete-employee span{
  color:var(--finance-muted);
  font-size:8.5px;
  text-transform:uppercase;
}

.employee-finance-page .finance-delete-employee strong{
  color:var(--finance-text);
  font-size:12px;
}

.employee-finance-page .finance-delete-employee small{
  color:var(--finance-muted);
  font-size:9px;
}

.employee-finance-page .finance-confirm-grid{
  margin:18px 22px 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  overflow:hidden;
  border:1px solid var(--finance-border);
  border-radius:9px;
}

.employee-finance-page .finance-confirm-grid>div{
  min-height:78px;
  padding:12px 13px;
  display:grid;
  grid-template-columns:1fr;
  align-content:start;
  gap:5px;
  border:0;
  border-inline-end:1px solid var(--finance-border);
  border-bottom:1px solid var(--finance-border);
}

.employee-finance-page .finance-confirm-grid>div:nth-child(3n){
  border-inline-end:0;
}

.employee-finance-page .finance-confirm-grid>div:last-child{
  border-bottom:0;
}

.employee-finance-page .finance-confirm-grid .finance-confirm-wide{
  grid-column:1/-1;
  border-inline-end:0;
}

.employee-finance-page .finance-confirm-grid dt{
  color:var(--finance-muted);
  font-size:8.5px;
  text-transform:uppercase;
  letter-spacing:.035em;
}

.employee-finance-page .finance-confirm-grid dd{
  margin:0;
  color:var(--finance-text);
  font-size:10.5px;
  font-weight:700;
  line-height:1.45;
}

.employee-finance-page .finance-delete-audit{
  margin:14px 22px 0;
  padding:10px 12px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
  border-radius:8px;
  background:#f7f8f9;
  color:var(--finance-muted);
  font-size:9px;
}

.employee-finance-page .finance-delete-audit strong{
  color:var(--finance-text-2);
  font-size:9.5px;
}

.employee-finance-page .finance-delete-audit small{
  white-space:nowrap;
}

.employee-finance-page .finance-delete-actions{
  position:static;
  margin:18px 0 0;
  padding:14px 22px;
  border-top:1px solid var(--finance-border);
  background:#fafbfb;
}

.employee-finance-page .finance-delete-button{
  min-width:105px;
}


/* Employee detail */

.employee-finance-page .finance-employee-overview{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.employee-finance-page .finance-employee-meta{
  min-width:240px;
  padding:12px 14px;
  display:grid;
  gap:3px;
  border:1px solid var(--finance-border);
  border-radius:9px;
  background:#fff;
}

.employee-finance-page .finance-employee-meta>span{
  color:var(--finance-muted);
  font-size:8.5px;
  text-transform:uppercase;
}

.employee-finance-page .finance-employee-meta>strong{
  color:var(--finance-text);
  font-size:12px;
}

.employee-finance-page .finance-employee-meta>small{
  color:var(--finance-muted);
  font-size:8.5px;
}


/* Payroll */

.employee-finance-page .finance-payroll-formula{
  margin-bottom:14px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid #e5d3d5;
  border-radius:10px;
  background:linear-gradient(135deg,var(--finance-primary-soft),#fff 72%);
}

.employee-finance-page .finance-formula-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--finance-primary);
  color:#fff;
  font-size:14px;
  font-weight:900;
}

.employee-finance-page .finance-payroll-formula>div{
  min-width:0;
  flex:1;
}

.employee-finance-page .finance-payroll-formula strong{
  display:block;
  color:var(--finance-text);
  font-size:11px;
}

.employee-finance-page .finance-payroll-formula p{
  margin:3px 0 0;
  color:var(--finance-muted);
  font-size:9px;
  line-height:1.45;
}

.employee-finance-page .finance-payroll-formula>span{
  flex:0 0 auto;
  color:var(--finance-primary);
  font-size:9px;
  font-weight:750;
  white-space:nowrap;
}

.employee-finance-page .payroll-table{
  min-width:1250px;
}

.employee-finance-page .finance-advance-inline{
  min-width:260px;
  display:grid;
  grid-template-columns:84px minmax(110px,1fr) auto;
  gap:5px;
}

.employee-finance-page .finance-advance-inline input{
  min-width:0;
  min-height:34px;
  padding:6px 7px;
  border:1px solid var(--finance-border-strong);
  border-radius:7px;
  background:#fff;
}

.employee-finance-page .finance-net-pay{
  min-height:31px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  border:1px solid #e2c5c8;
  border-radius:7px;
  background:var(--finance-primary-soft);
  color:var(--finance-primary);
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.employee-finance-page .finance-payroll-mobile,
.employee-finance-page .finance-advance-history-mobile{
  display:none;
}

.employee-finance-page .finance-payroll-card{
  padding:14px;
  border:1px solid var(--finance-border);
  border-radius:10px;
  background:#fff;
}

.employee-finance-page .finance-payroll-card+.finance-payroll-card{
  margin-top:10px;
}

.employee-finance-page .finance-payroll-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:11px;
  border-bottom:1px solid #eef0f2;
}

.employee-finance-page .finance-payroll-breakdown{
  display:grid;
  gap:0;
  margin-top:8px;
}

.employee-finance-page .finance-payroll-breakdown>div{
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid #f0f1f2;
}

.employee-finance-page .finance-payroll-breakdown>div:last-child{
  border-bottom:0;
}

.employee-finance-page .finance-payroll-breakdown span{
  color:var(--finance-muted);
  font-size:9px;
}

.employee-finance-page .finance-payroll-breakdown strong{
  color:var(--finance-text);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}

.employee-finance-page .finance-payroll-net{
  margin-top:10px;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-radius:8px;
  background:var(--finance-primary-soft);
  color:var(--finance-primary);
}

.employee-finance-page .finance-payroll-net span{
  font-size:10px;
  font-weight:750;
}

.employee-finance-page .finance-payroll-net strong{
  font-size:16px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}

.employee-finance-page .finance-advance-details{
  margin-top:10px;
  border:1px solid var(--finance-border);
  border-radius:8px;
  background:#fafbfb;
}

.employee-finance-page .finance-advance-details summary{
  padding:11px 12px;
  color:var(--finance-text-2);
  font-size:10px;
  font-weight:750;
  cursor:pointer;
}

.employee-finance-page .finance-advance-mobile-form{
  padding:0 12px 12px;
  display:grid;
  gap:9px;
}

.employee-finance-page .finance-advance-history-card{
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  border:1px solid var(--finance-border);
  border-radius:9px;
  background:#fff;
}

.employee-finance-page .finance-advance-history-card+.finance-advance-history-card{
  margin-top:8px;
}

.employee-finance-page .finance-advance-history-card>div{
  display:grid;
  gap:2px;
}

.employee-finance-page .finance-advance-history-card small{
  color:var(--finance-muted);
  font-size:8.5px;
}

.employee-finance-page .finance-advance-history-card p{
  grid-column:1/-1;
  margin:0;
  color:var(--finance-muted);
  font-size:9px;
}


/* Responsive */

@media(max-width:1180px){
  .employee-finance-page .finance-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .employee-finance-page .finance-filter-actions{
    grid-column:1/-1;
    justify-content:flex-start;
  }

  .employee-finance-page .finance-editor-layout{
    grid-template-columns:minmax(0,1fr) 270px;
  }
}

@media(max-width:900px){
  .employee-finance-page .finance-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .employee-finance-page .finance-summary-card.is-net{
    grid-column:1/-1;
  }

  .employee-finance-page .finance-editor-layout{
    grid-template-columns:1fr;
  }

  .employee-finance-page .finance-editor-aside{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .employee-finance-page .finance-page-heading{
    align-items:stretch;
  }

  .employee-finance-page .finance-heading-copy,
  .employee-finance-page .finance-employee-heading{
    align-items:flex-start;
  }

  .employee-finance-page .finance-heading-icon,
  .employee-finance-page .finance-profile-avatar.large{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .employee-finance-page .finance-page-heading h1{
    font-size:23px;
  }

  .employee-finance-page .heading-actions{
    width:100%;
  }

  .employee-finance-page .heading-actions .btn{
    flex:1 1 auto;
  }

  .employee-finance-page .finance-summary-grid{
    grid-template-columns:1fr;
  }

  .employee-finance-page .finance-summary-card.is-net{
    grid-column:auto;
  }

  .employee-finance-page .finance-summary-card{
    min-height:94px;
    padding:14px;
  }

  .employee-finance-page .finance-summary-card strong{
    font-size:20px;
  }

  .employee-finance-page .finance-filter-grid{
    grid-template-columns:1fr;
  }

  .employee-finance-page .finance-filter-actions{
    grid-column:auto;
  }

  .employee-finance-page .finance-filter-actions .btn{
    flex:1 1 120px;
  }

  .employee-finance-page .adjustment-table-desktop,
  .employee-finance-page .finance-payroll-table-desktop,
  .employee-finance-page .finance-advance-history-desktop{
    display:none;
  }

  .employee-finance-page .finance-mobile-list,
  .employee-finance-page .finance-payroll-mobile,
  .employee-finance-page .finance-advance-history-mobile{
    display:block;
    padding:12px;
    background:#f8f9fa;
  }

  .employee-finance-page .finance-editor-aside{
    grid-template-columns:1fr;
  }

  .employee-finance-page .finance-form-grid{
    grid-template-columns:1fr;
  }

  .employee-finance-page .finance-type-field{
    grid-column:auto;
  }

  .employee-finance-page .finance-form-section,
  .employee-finance-page .finance-form-card-head{
    padding:16px;
  }

  .employee-finance-page .finance-form-actions{
    padding:13px 16px;
  }

  .employee-finance-page .finance-form-actions .btn{
    flex:1 1 120px;
  }

  .employee-finance-page .finance-confirm-grid{
    grid-template-columns:1fr 1fr;
  }

  .employee-finance-page .finance-confirm-grid>div:nth-child(3n){
    border-inline-end:1px solid var(--finance-border);
  }

  .employee-finance-page .finance-confirm-grid>div:nth-child(2n){
    border-inline-end:0;
  }

  .employee-finance-page .finance-confirm-grid .finance-confirm-wide{
    grid-column:1/-1;
    border-inline-end:0;
  }

  .employee-finance-page .finance-payroll-formula{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .employee-finance-page .finance-payroll-formula>span{
    width:100%;
    padding-inline-start:45px;
  }
}

@media(max-width:480px){
  .employee-finance-page .finance-heading-copy,
  .employee-finance-page .finance-employee-heading{
    gap:9px;
  }

  .employee-finance-page .finance-page-heading h1{
    font-size:21px;
  }

  .employee-finance-page .finance-summary-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .employee-finance-page .finance-type-field>ul{
    grid-template-columns:1fr;
  }

  .employee-finance-page .finance-confirm-grid{
    grid-template-columns:1fr;
  }

  .employee-finance-page .finance-confirm-grid>div,
  .employee-finance-page .finance-confirm-grid>div:nth-child(2n),
  .employee-finance-page .finance-confirm-grid>div:nth-child(3n){
    border-inline-end:0;
  }

  .employee-finance-page .finance-delete-audit{
    grid-template-columns:1fr;
    gap:3px;
  }

  .employee-finance-page .finance-delete-audit small{
    white-space:normal;
  }

  .employee-finance-page .finance-delete-actions{
    flex-direction:column-reverse;
  }

  .employee-finance-page .finance-delete-actions .btn{
    width:100%;
  }

  .employee-finance-page .finance-mobile-details>div{
    grid-template-columns:76px minmax(0,1fr);
  }
}


/* RTL */

html[dir="rtl"] .employee-finance-page .finance-heading-copy,
html[dir="rtl"] .employee-finance-page .finance-employee-heading,
html[dir="rtl"] .employee-finance-page .finance-employee-link,
html[dir="rtl"] .employee-finance-page .finance-payroll-employee,
html[dir="rtl"] .employee-finance-page .finance-form-section-title,
html[dir="rtl"] .employee-finance-page .finance-delete-warning,
html[dir="rtl"] .employee-finance-page .finance-delete-employee{
  direction:rtl;
}

html[dir="rtl"] .employee-finance-page .finance-filter-grid input[type="date"],
html[dir="rtl"] .employee-finance-page input[type="number"]{
  direction:ltr;
  text-align:right;
}

html[dir="rtl"] .employee-finance-page .finance-audit-card dd{
  text-align:start;
}

/* SKLS RMS — Printer Management. Append to the end of static/css/app.css */
.printer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.printer-card{padding:17px;min-width:0}.printer-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.printer-card-head h2{margin:2px 0 4px;font-size:16px}.printer-card-head p:last-child{margin:0;color:var(--rms-muted,#7a828c);font-size:10px}.printer-status{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid var(--rms-border,#e1e4e8);border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}.printer-status.online{background:#eff8f2;border-color:#cfe6d8;color:var(--rms-success,#19734b)}.printer-status.offline,.printer-status.error{background:#fff3f4;border-color:#efcfd3;color:var(--rms-danger,#a10b1d)}.printer-status.unknown{background:#f7f8f9;color:var(--rms-muted,#7a828c)}.printer-meta{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:14px 0;border:1px solid var(--rms-border,#e1e4e8);border-radius:9px;overflow:hidden}.printer-meta>div{padding:9px 10px;border-bottom:1px solid #eef0f2}.printer-meta>div:nth-child(odd){border-inline-end:1px solid #eef0f2}.printer-meta>div:nth-last-child(-n+2){border-bottom:0}.printer-meta dt{color:var(--rms-muted,#7a828c);font-size:8px;text-transform:uppercase}.printer-meta dd{margin:3px 0 0;color:var(--rms-text,#171a1f);font-size:9.5px;font-weight:700;overflow-wrap:anywhere}.printer-error{padding:8px 10px;border-radius:7px;background:#fff4f5;color:var(--rms-danger,#a10b1d);font-size:9px;line-height:1.4}.printer-actions{padding-top:11px;border-top:1px solid #eef0f2}.printer-actions form{margin:0}.printer-form-panel{max-width:1000px;margin-inline:auto}.printer-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.printer-field{display:grid;gap:6px}.printer-field>span{font-size:10px;font-weight:750;color:var(--rms-text-secondary,#555d67)}.printer-field input,.printer-field select,.printer-field textarea,.managed-routing-form input,.managed-routing-form select{width:100%;min-height:42px;border:1px solid var(--rms-border-strong,#cfd4da);border-radius:8px;background:#fff;padding:8px 10px}.printer-field small{font-size:8.5px;color:var(--rms-muted,#7a828c)}.is-hidden{display:none!important}.printer-delete-card{max-width:650px;margin-inline:auto}.queue-filter{display:flex;align-items:end;gap:9px;flex-wrap:wrap}.queue-filter .field{min-width:210px}.queue-error{max-width:280px;color:var(--rms-muted,#7a828c);font-size:9px;overflow-wrap:anywhere}.managed-routing-form p,.printer-form-panel form>p,.detail-grid aside form>p{display:grid;gap:5px;margin:0 0 10px}.managed-routing-form label,.printer-form-panel form>p label,.detail-grid aside form>p label{font-size:10px;font-weight:700;color:var(--rms-text-secondary,#555d67)}.managed-routing-form input,.managed-routing-form select,.printer-form-panel form>p input,.printer-form-panel form>p select,.detail-grid aside form>p input,.detail-grid aside form>p select{width:100%;min-height:40px;border:1px solid var(--rms-border-strong,#cfd4da);border-radius:8px;padding:7px 9px}.status-printing{background:#fff7e8;color:var(--rms-warning,#ad6508)}.status-printed{background:#eff8f2;color:var(--rms-success,#19734b)}.status-failed{background:#fff3f4;color:var(--rms-danger,#a10b1d)}.status-cancelled{background:#f2f3f4;color:var(--rms-muted,#7a828c)}
@media(max-width:1180px){.printer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.printer-grid{grid-template-columns:1fr}.printer-form-grid{grid-template-columns:1fr}.printer-meta{grid-template-columns:1fr}.printer-meta>div,.printer-meta>div:nth-child(odd),.printer-meta>div:nth-last-child(-n+2){border-inline-end:0;border-bottom:1px solid #eef0f2}.printer-meta>div:last-child{border-bottom:0}.printer-card-head{flex-direction:column}.printer-actions .btn{flex:1 1 110px}.queue-filter{display:grid;grid-template-columns:1fr}.queue-filter .field{min-width:0}}