body.ui-admin{--ui-bg:#f4f6f8;--ui-paper:#fff;--ui-ink:#202b35;--ui-muted:#71808e;--ui-line:#e1e6eb;background:#f4f6f8;color:#202b35}
.ui-admin header{background:#fff;border-bottom:1px solid #e1e6eb}.ui-admin main,.ui-admin main.wide{max-width:1400px}
.ui-admin .tabs{background:#e9eef2;border:1px solid #e1e6eb;border-radius:14px;padding:6px;overflow-x:auto;flex-wrap:nowrap}
.ui-admin .tabs button{background:transparent;color:#657482;border-radius:10px;white-space:nowrap}.ui-admin .tabs button.on{background:#202d37;color:white;box-shadow:0 3px 8px #15253116}
.ui-admin #login{background:#edf1f5}.ui-admin #login .box{background:white;border:1px solid #e1e6eb;border-radius:24px;box-shadow:0 24px 70px #1d344914}
.ui-admin .categoryHead,.ui-admin .systemBannerHead{background:#25343e;border-bottom-color:#93b8ac}.ui-admin .categoryCount{color:#e0e9ed}
.ui-admin .addBtn,.ui-admin .optEditBtn,.ui-admin .menuDetailsContent .mrRow2,.ui-admin .menuDetailsContent .mrRow3{background:#f1f4f7;color:#344b5a;border-color:#dce4e9}
.ui-admin input,.ui-admin textarea,.ui-admin select{background:#fff;border-color:#dce3e9;color:#25333e}
.ui-admin .dashHeading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:32px 0 28px}.dashHeading .eyebrow{color:#137c60}.dashHeading h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.06em;margin:0 0 8px}.dashHeading p{font-size:14px;color:#72818d}
.dashPicker{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.dashPicker label{flex-basis:100%;font-size:12px;color:#71808e}.dashPicker input{border:1px solid #dce3e9;border-radius:10px;padding:9px;min-height:44px}.dashPicker button{border:0;border-radius:10px;padding:10px 14px;background:#25343e;color:white}
.dashPeriod{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.dashPeriod strong{font-size:18px}.dashPeriod span{font-size:13px;color:#71808e}.dashPeriod b{font-size:11px;background:#e0f1e9;color:#197b5c;padding:5px 9px;border-radius:6px}
.dashMetrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.dashMetrics article,.dashCard{background:#fff;border:1px solid #e1e6eb;border-radius:18px;padding:24px;box-shadow:0 5px 18px #20334404}.dashMetrics span{display:block;font-size:13px;color:#71808e}.dashMetrics strong{display:block;font-size:clamp(23px,2.4vw,33px);font-weight:750;letter-spacing:-.045em;margin:12px 0}.dashMetrics small{font-size:12px;color:#7c8892}.dashMetrics article:first-child{background:#22343a;color:#fff;border-color:#22343a}.dashMetrics article:first-child span,.dashMetrics article:first-child small{color:#b9d0cd}
.dashCharts{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-bottom:20px}.dashCardHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px}.dashCardHead h3{font-size:17px;margin:0}.dashCardHead span{font-size:11px;color:#71808e}.dashChartScroll{overflow-x:auto}.dashChartScroll svg{width:100%;min-width:470px;display:block}.dashChartScroll text{fill:#6b7c88;font:11px sans-serif}
.dashRank{display:flex;gap:13px;align-items:center;margin:18px 0}.dashRank>span{color:#8996a0;font-size:12px;width:15px}.dashRank>div{flex:1;min-width:0}.dashRankName{display:flex;justify-content:space-between;gap:10px;font-size:13px}.dashRankName b{overflow-wrap:anywhere}.dashRankName strong{white-space:nowrap}.dashTrack{height:5px;background:#edf2f4;border-radius:5px;margin-top:9px;overflow:hidden}.dashTrack i{display:block;height:100%;background:#56a58d;border-radius:5px}.dashTableScroll{overflow:auto}.dashTable{width:100%;border-collapse:collapse;white-space:nowrap;font-size:13px}.dashTable th{text-align:right;color:#71808e;font-weight:600;background:#f6f8fa}.dashTable th,.dashTable td{padding:15px 13px;border-bottom:1px solid #edf0f3}.dashTable td{text-align:right;font-variant-numeric:tabular-nums}.dashTable th:first-child,.dashTable td:first-child{text-align:left}.dashTable small{display:block;color:#83909a;font-size:11px;margin-top:4px}.dashNote{font-size:12px;color:#7c8994;line-height:1.7;margin-top:16px}.dashEmpty{color:#81909b;font-size:14px;padding:40px 0}
@media(max-width:950px){.dashMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashCharts{grid-template-columns:1fr}.ui-admin .dashHeading{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.dashMetrics{gap:10px}.dashMetrics article{padding:17px}.dashCard{padding:18px;border-radius:14px}.dashMetrics strong{font-size:24px}.dashPicker{width:100%}.dashPicker input{flex:1}.ui-admin .dashHeading{margin-top:22px}.dashCharts{gap:14px}.dashPeriod{gap:8px}}

/* Constrain grid children, not just the outer page: wide charts/tables scroll inside their card. */
.ui-admin main,.ui-admin main.wide{width:100%;min-width:0;box-sizing:border-box}.ui-admin .panel,.ui-admin .dashCharts,.ui-admin .dashCard,.ui-admin #dashboard,.ui-admin #p5{min-width:0;max-width:100%;box-sizing:border-box}
.ui-admin .dashCharts{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.ui-admin .dashChartScroll,.ui-admin .dashTableScroll{width:100%;max-width:100%;min-width:0}.ui-admin .dashChartScroll svg{min-width:0;width:100%;height:auto}
.ui-admin .dashMetrics article{min-width:0;overflow-wrap:anywhere}.ui-admin .dashMetrics strong{font-size:clamp(20px,2.4vw,33px)}.dashRefresh{border:0;border-radius:10px;padding:12px 16px;background:#25343e;color:#fff}
.salesCalendar{background:#fff;border:1px solid #e1e6eb;border-radius:14px;margin-bottom:22px}.salesCalendar summary{display:flex;align-items:center;gap:16px;flex-wrap:wrap;cursor:pointer;padding:16px;list-style:none}.salesCalendar summary::-webkit-details-marker{display:none}.salesCalendar summary span{font-size:13px;color:#71808e}.salesCalendar summary span:last-child{margin-left:auto}.salesCalendarBody{max-width:440px;margin:auto;padding:0 16px 20px}.salesCalendarHead{display:flex;align-items:center;justify-content:space-between}.salesCalendarHead button{width:44px;border:0;background:#f1f4f6;border-radius:10px;font-size:24px}.salesCalendarBody p{font-size:12px;color:#64786d;margin:12px 0}.salesCalendarGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}.salesCalendarGrid>span{font-size:12px;color:#84909a;padding:8px 0}.salesCalendarGrid button{position:relative;border:0;background:transparent;border-radius:10px;min-width:0;min-height:44px;padding:8px 0 14px;color:#233c32;font-size:14px}.salesCalendarGrid button:disabled{color:#bdc5cb}.salesCalendarGrid .hasSales{background:#eef6f2;cursor:pointer}.salesCalendarGrid i{position:absolute;bottom:5px;left:calc(50% - 2px);width:4px;height:4px;background:#17815c;border-radius:50%}.salesCalendarGrid .selected{background:#245c44;color:#fff}.salesCalendarGrid .selected i{background:#fff}
@media(max-width:950px){.ui-admin .dashCharts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.ui-admin header{width:100%;box-sizing:border-box;flex-wrap:wrap}.ui-admin header h1{min-width:0;overflow-wrap:anywhere}.ui-admin .dashMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-admin .dashMetrics article{padding:14px 12px}.ui-admin .dashMetrics strong{font-size:22px}.ui-admin .dashHeading{gap:12px}.ui-admin .dashCardHead{align-items:flex-start}.dashPeriod span{overflow-wrap:anywhere}}
@media(max-width:340px){.ui-admin .dashMetrics{grid-template-columns:minmax(0,1fr)}}
.ui-admin .dashMenuMore{display:block;width:100%;margin-top:20px;border:1px solid #dce5e8;border-radius:10px;background:#f4f7f8;color:#315749;padding:12px;font-size:13px;font-weight:700;cursor:pointer}
.dashMenuDialog{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:calc(100% - 28px);max-width:620px;max-height:85vh;max-height:85dvh;padding:0;border:1px solid #e1e6eb;border-radius:20px;background:#fff;color:#24343e;box-shadow:0 24px 80px #132e3540;overflow:hidden;font-family:inherit}
.dashMenuDialog[open]{display:flex;flex-direction:column}.dashMenuDialog::backdrop{background:#10251b88}
.dashMenuHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid #e8edf0;flex-shrink:0}.dashMenuHeader h3{margin:0;font-size:20px}.dashMenuHeader p{margin:5px 0 0;font-size:13px;color:#778793}
.dashMenuClose{width:44px;height:44px;flex:0 0 44px;border:0;border-radius:12px;background:#f1f4f6;color:#4a6157;font-size:18px;cursor:pointer}
.dashMenuList{overflow:auto;min-height:0;overscroll-behavior:contain}.dashMenuList table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}.dashMenuList th{position:sticky;top:0;background:#f6f8fa;color:#7a8791;font-size:12px}.dashMenuList th,.dashMenuList td{padding:15px 16px;text-align:left;border-bottom:1px solid #edf1f3;overflow-wrap:anywhere}.dashMenuList th:first-child{width:52px}.dashMenuList th:last-child{width:110px}.dashMenuList td:first-child{color:#7a8791;font-variant-numeric:tabular-nums}.dashMenuList td:last-child,.dashMenuList th:last-child{text-align:right;font-variant-numeric:tabular-nums}.dashMenuList td:nth-child(2){font-weight:650}.dashMenuFooter{padding:17px 24px;font-size:13px;color:#476a58;background:#f4f8f6;flex-shrink:0}
@media(max-width:600px){.dashMenuHeader{padding:18px 16px}.dashMenuList th,.dashMenuList td{padding:13px 10px}.dashMenuList th:first-child{width:42px}.dashMenuList th:last-child{width:88px}.dashMenuFooter{padding:16px}}
.ui-admin .dashSalesCard{display:flex;flex-direction:column}
.ui-admin .dashSalesCard .dashChartScroll{position:relative;flex:1;min-height:240px;overflow:hidden}
.ui-admin .dashSalesCard .dashChartScroll svg{position:absolute;inset:0;width:100%;height:100%;min-width:0}
.ui-admin .dashSalesCard .dashCardHead,.ui-admin .dashSalesCard .dashNote{flex-shrink:0}
@media(max-width:600px){.ui-admin .dashSalesCard .dashChartScroll{min-height:220px}.ui-admin .dashSalesCard .dashChartScroll text{font-size:10px}}