@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
:root{--ink:#102019;--paper:#fffefa;--cream:#f5f3e9;--lime:#c8f72c;--muted:#61736b;--line:#e0e3d9}*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--cream);font-family:'IBM Plex Sans Arabic','DM Sans',system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}[hidden]{display:none!important}
.sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(0,0,0,0)}.dash-header{background:var(--ink);color:white;border-bottom:1px solid #34483c}.header-inner{width:min(1360px,calc(100% - 76px));height:80px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1}.brand-icon{width:39px;height:39px;background:var(--lime);color:var(--ink);border-radius:13px;display:grid;place-items:center;font-size:28px;transform:rotate(-7deg)}.brand small{display:block;font-size:10px;color:#a6bba8;font-weight:500;letter-spacing:0;margin-top:6px}.lime-dot{color:var(--lime)}.header-actions{display:flex;align-items:center;gap:15px}.env-pill,.live-pill{font-size:11px;font-weight:800;padding:7px 12px;border-radius:99px;border:1px solid #385a42;background:#1d3527;color:#a8d878}.live-dot,.live-pill i{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:50%;margin-inline-end:6px}.head-link{font-size:12px;border:1px solid #53735b;border-radius:99px;padding:8px 14px;font-weight:700}
.container{width:min(1320px,calc(100% - 72px));margin:34px auto 80px;min-height:68vh}h1{font-size:clamp(26px,4vw,42px);line-height:1.3;margin:8px 0;font-weight:900;letter-spacing:-.05em}h2{font-size:25px;font-weight:800;margin:5px 0 0;letter-spacing:-.03em}.tiny-label{color:#73916e;font-size:11px;font-weight:800;letter-spacing:.04em}.dash-title{display:flex;align-items:end;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:25px}.dash-title p{color:var(--muted);margin:5px 0;font-size:13px}.dash-controls{display:flex;align-items:center;gap:9px}.live-pill{background:#e8f0d7;border-color:#dceac3;color:#467941}.live-pill i{background:#62942b}.outline{border:1px solid #bfcabc;background:transparent;color:var(--ink);border-radius:13px;font-weight:800;padding:12px 18px;font-size:12px}.outline:hover{background:#e9eee4}
.panel{background:var(--paper);border:1px solid #e1e5da;padding:25px;border-radius:24px;box-shadow:0 8px 22px #1b33200a}.toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:20px}.toolbar h2{font-size:20px}.toolbar-right{display:flex;gap:9px;align-items:center}.toolbar select{background:#f8faf5;border:1px solid #ccd5c9;padding:12px 16px;min-width:210px;border-radius:11px}.toolbar button{background:var(--lime);border:0;border-radius:10px;padding:12px 17px;font-size:12px;font-weight:900;color:var(--ink)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:22px}.metric{background:var(--paper);border:1px solid #e1e5da;border-radius:23px;padding:23px 25px;display:flex;flex-direction:column;gap:2px;min-height:158px}.metric.ready{background:var(--lime);border-color:var(--lime)}.metric strong{font-size:51px;line-height:1.1;font-family:'DM Sans';font-weight:800}.metric>span:last-child{font-size:14px;color:var(--muted);font-weight:800}.metric.ready>span:last-child{color:#436026}.metric-icon{font-size:22px;color:#74966f;line-height:1}
.dash-grid{display:grid;grid-template-columns:minmax(290px,.8fr) minmax(420px,1.4fr);gap:20px}.panel-heading{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:22px;padding-bottom:15px;border-bottom:1px solid var(--line)}.panel-caption,.panel-heading small{font-size:11px;color:#879488}.queueItem{display:flex;align-items:center;justify-content:space-between;gap:11px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:700}.queueItem a{background:var(--lime);font-size:11px;border-radius:10px;padding:8px 12px;font-weight:900;white-space:nowrap}.queueItem a:hover{background:#aee51b}.add-box{padding-top:27px}.add-box h3{font-size:15px;margin:0 0 12px}.inline{display:flex;gap:9px}.inline input{background:#f8faf5;border:1px solid #d4decf;border-radius:12px;padding:13px;min-width:0;flex:1;width:100%;font-size:13px}.inline button{background:var(--ink);color:white;border:0;border-radius:12px;padding:11px 15px;font-weight:800;font-size:12px;white-space:nowrap}
.scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:610px;text-align:right}thead{background:#f4f6ed}th{font-size:11px;color:#6a796e;font-weight:900}th,td{padding:15px 9px;border-bottom:1px solid #e5e7dd;vertical-align:middle}td{font-size:12px;font-weight:700}td:first-child{font-family:'DM Sans';font-size:19px}td .actions{display:flex;gap:5px;flex-wrap:wrap}td button{background:var(--lime);color:var(--ink);border:0;border-radius:8px;padding:8px 9px;font-size:10px;font-weight:800;white-space:nowrap;min-height:34px}td button:hover{background:#addd29}.below-table{margin:20px 0 0;font-size:11px;color:var(--muted);line-height:1.8}
.welcome-banner{background:var(--lime);border-radius:24px;padding:25px 30px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:15px}.welcome-label{font-size:12px;font-weight:900}.welcome-banner h2{font-size:24px}.welcome-banner p{font-size:13px;margin:5px 0;color:#425d36}.welcome-banner strong{font-family:'DM Sans';letter-spacing:.1em}.welcome-badge{height:68px;width:68px;background:var(--ink);color:var(--lime);border-radius:21px;font-size:42px;display:grid;place-items:center;flex-shrink:0}
.login-panel{min-height:580px;background:var(--paper);border:1px solid var(--line);border-radius:29px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;max-width:950px;margin:50px auto;box-shadow:0 18px 50px #10261910}.login-copy{padding:65px 60px}.login-copy p{font-size:14px;color:var(--muted)}.login-copy form{margin-top:25px;display:grid;gap:12px}.login-copy label{font-weight:700;font-size:13px}.login-copy input{background:#f7f9f2;border:1px solid #d6dfd1;border-radius:12px;padding:14px;width:100%;font-size:15px}.login-copy form button{background:var(--ink);color:white;border:0;border-radius:13px;padding:14px;display:flex;justify-content:center;gap:10px;font-weight:800;margin-top:10px}.to-register{font-size:12px!important;margin-top:22px}.to-register a{font-weight:800;color:#5d892d}.login-aside{background:var(--lime);padding:70px 50px;display:flex;flex-direction:column;justify-content:center}.login-aside>span{font-size:100px;color:#34502a;line-height:1}.login-aside h2{font-size:50px;line-height:1.35;margin:25px 0}.login-aside p{font-size:14px;color:#405934}
#message{min-height:20px;color:#ab3133;font-size:13px;font-weight:800;text-align:center;margin-top:25px}.dash-footer{text-align:center;padding:25px;color:#8d9b8f;font-size:11px;border-top:1px solid var(--line)}.dash-footer a{margin-inline-start:14px;text-decoration:underline}
@media(max-width:1100px){.dash-grid{grid-template-columns:1fr}.container{width:min(100% - 42px,900px)}.login-copy{padding:45px 40px}}
@media(max-width:700px){.header-inner{width:calc(100% - 34px);height:69px}.brand{font-size:24px}.brand-icon{width:34px;height:34px;font-size:24px}.header-actions{gap:6px}.head-link{font-size:10px;padding:7px 9px}.env-pill{font-size:10px;padding:5px 9px}.container{width:calc(100% - 28px);margin:21px auto 55px}.dash-title{align-items:start}.dash-title h1{font-size:29px}.dash-controls{flex-wrap:wrap}.panel{padding:18px;border-radius:20px}.toolbar{display:block}.toolbar-right{margin-top:16px}.toolbar select{min-width:0;flex:1;width:60%}.metrics{gap:7px}.metric{min-height:115px;padding:13px;border-radius:17px}.metric strong{font-size:36px}.metric>span:last-child{font-size:10px}.metric-icon{font-size:17px}.dash-grid{gap:14px}.panel-heading h2{font-size:20px}.login-panel{grid-template-columns:1fr;min-height:0;margin:20px auto}.login-copy{padding:40px 25px}.login-aside{display:none}.welcome-banner{padding:18px}.welcome-badge{width:42px;height:42px;font-size:27px;border-radius:12px}.welcome-banner h2{font-size:20px}}


/* Mobile-first merchant fix: contain the ticket list inside its card, never expand the entire document. */
#dashboard,.container,.dash-grid,.dash-grid>*,.toolbar,.toolbar-right,.metrics,.metric,.panel,.scroll{min-width:0}
.dash-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}
.scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.dash-title>div,#who,.queueItem>div,.welcome-banner>div{min-width:0;overflow-wrap:anywhere}
.queueItem>div{flex:1 1 auto}
.queueItem a{flex:0 0 auto}
.welcome-banner strong{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:1100px){
 .dash-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
 .header-inner{min-width:0}
 .header-actions,.brand{min-width:0}
 .env-pill{white-space:nowrap}
 .container{width:calc(100% - 28px);max-width:100%}
 .dash-title>div:first-child{max-width:100%}
 .dash-title #who{word-break:break-word}
 .welcome-banner{align-items:flex-start}
 .welcome-banner>div{flex:1 1 auto}
 .queueItem{flex-wrap:wrap;align-items:center;gap:10px}
 .queueItem>div{flex:1 1 160px;overflow-wrap:anywhere}
 .queueItem a{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
 .inline input{min-width:0}
 .panel-heading{flex-wrap:wrap}
 .panel-heading>div{min-width:0}
 .panel-heading small{max-width:100%}
 .metric{min-width:0}
 /* Actual mobile ticket cards — no sideways scrolling or unreadable table columns. */
 .scroll{overflow:visible;width:100%;max-width:100%}
 .scroll table,.scroll tbody{display:block;width:100%;min-width:0;border-collapse:separate}
 .scroll thead{display:none}
 .scroll tbody{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 .scroll tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;background:#f7f9f2;border:1px solid #e0e6d9;border-radius:16px;min-width:0}
 .scroll tbody td{border:0;padding:0;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;min-width:0;font-size:13px;font-weight:700;overflow-wrap:anywhere}
 .scroll tbody td::before{content:attr(data-label);display:block;font:700 11px 'IBM Plex Sans Arabic',system-ui,sans-serif;color:#718276}
 .scroll tbody td:first-child{font:800 30px/1.1 'DM Sans',sans-serif;letter-spacing:-.04em}
 .scroll tbody td:first-child::before{font:700 11px 'IBM Plex Sans Arabic',system-ui,sans-serif;letter-spacing:0}
 .scroll tbody td:last-child{grid-column:1/-1;border-top:1px solid #dce2d6;padding-top:12px}
 .scroll tbody td:last-child .actions{display:flex;flex-wrap:wrap;gap:8px}
 .scroll tbody td .actions button{flex:1 1 auto;min-height:43px;font-size:12px;border-radius:10px}
 .scroll tbody tr.empty-row{display:block}
 .scroll tbody tr.empty-row td{display:block;text-align:center;font:600 13px 'IBM Plex Sans Arabic',system-ui,sans-serif;padding:18px 0}
 .scroll tbody tr.empty-row td::before{display:none}
}