/*
 * Uncle Ben's Pizza — assets/css/ui-system.css
 * Shared visual design, responsive layout and component styling. This file implements or supports: ui system.
 * Shared styles must remain responsive, accessible and compatible with the system-wide design tokens.
 * R10.9.0 developer-documentation pass.
 */
/* R10.8.0 — Unified UI/UX system */
:root{
  --ui-font:Manrope,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ui-text:#2b1d18;--ui-muted:#74675f;--ui-line:#e7ddd4;--ui-surface:#fff;--ui-surface-soft:#fbf8f4;
  --ui-primary:#e56a1f;--ui-primary-strong:#c94e14;--ui-danger:#b8382f;--ui-success:#2f7d46;--ui-focus:rgba(229,106,31,.20);
  --ui-r1:10px;--ui-r2:14px;--ui-r3:20px;--ui-r4:28px;
  --ui-s1:4px;--ui-s2:8px;--ui-s3:12px;--ui-s4:16px;--ui-s5:20px;--ui-s6:24px;--ui-s7:32px;--ui-s8:40px;
  --ui-shadow:0 10px 30px rgba(53,31,21,.08);--ui-shadow-lg:0 20px 55px rgba(53,31,21,.12);
  --ui-control:44px;--ui-content:1600px;
}
html{font-size:16px;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{font-family:var(--ui-font)!important;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figure,blockquote){overflow-wrap:anywhere}
body :where(h1,h2,h3,h4,h5,h6){text-wrap:balance;margin-top:0}
body :where(p,li,dd,dt,label,small,td,th){line-height:1.55}
body :where(p){margin-bottom:1em}
body :where(small,.muted){line-height:1.45}
body :where(img,svg,video,canvas,iframe){max-width:100%}
body :where(svg){flex:0 0 auto}
body :where(a){transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
body :where(a:not(.btn):not([class*="button"])){text-underline-offset:3px;text-decoration-thickness:1px}
body :where(a:not(.btn):not([class*="button"]):hover){text-decoration-thickness:2px}
body :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ui-focus)!important;outline-offset:2px!important;box-shadow:0 0 0 1px var(--ui-primary)!important}
body :where(button,.btn,input[type=submit],input[type=button],input[type=reset]){font-family:var(--ui-font)!important;font-weight:750;letter-spacing:-.005em;min-height:var(--ui-control);border-radius:var(--ui-r2);white-space:normal;line-height:1.2}
body :where(button,.btn,input[type=submit],input[type=button],input[type=reset]):disabled{opacity:.52;cursor:not-allowed;filter:grayscale(.12);transform:none!important;box-shadow:none!important}
body :where(input,select,textarea){font-family:var(--ui-font)!important;font-size:16px;line-height:1.35}
body :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){min-height:var(--ui-control);border-radius:var(--ui-r2);padding:10px 12px}
body :where(textarea){min-height:112px}
body :where(label){line-height:1.35;margin-bottom:6px}
body :where(fieldset){min-width:0;border:1px solid var(--ui-line);border-radius:var(--ui-r3);padding:var(--ui-s5)}
body :where(legend){padding-inline:8px;font-weight:800}
body :where(.card,[class*="-card"],[class*="panel"]){min-width:0}
body :where(.alert){line-height:1.5}
body :where(.pill,.badge,[class*="status"]){max-width:100%;white-space:normal}
body :where(table){font-variant-numeric:tabular-nums}
body :where(th){line-height:1.35}
body :where(td,th){overflow-wrap:normal;word-break:normal}
body .ui-scroll-table{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;border-radius:var(--ui-r2);scrollbar-width:thin}
body .ui-scroll-table>table{margin-top:0;min-width:680px}
body .ui-action-row,body :where(.form-actions,.actions,.button-row,.btn-row,.toolbar-actions,.admin-page-toolbar-links){display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
body :where(.form-actions,.actions,.button-row,.btn-row,.toolbar-actions)>.btn,
body :where(.form-actions,.actions,.button-row,.btn-row,.toolbar-actions)>button{margin-top:0}
body .ui-empty-state{padding:var(--ui-s7);text-align:center;color:var(--ui-muted);background:var(--ui-surface-soft);border:1px dashed var(--ui-line);border-radius:var(--ui-r3)}
body .ui-truncate{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Admin application */
body.admin-app-body{font-size:15px!important;letter-spacing:0!important}
body.admin-app-body>main{max-width:var(--ui-content)!important}
body.admin-app-body :where(.container,.admin-page-shell,.enterprise-os-shell,.r63-dashboard,[class*="-shell"]){min-width:0}
body.admin-app-body :where(.card,.r63-panel,.r64-panel-card,.restaurant-panel,.enterprise-card,[class*="-card"]){border-radius:var(--ui-r3);box-shadow:0 8px 24px rgba(42,31,25,.055)}
body.admin-app-body :where(h1){font-size:clamp(1.75rem,2.6vw,2.65rem)!important;line-height:1.08!important;letter-spacing:-.035em!important}
body.admin-app-body :where(h2){font-size:clamp(1.2rem,1.65vw,1.55rem)!important;line-height:1.18!important;letter-spacing:-.025em!important}
body.admin-app-body :where(h3){font-size:1rem!important;line-height:1.25!important}
body.admin-app-body :where(.eyebrow,[class*="eyebrow"]){font-size:.68rem!important;line-height:1.25!important;letter-spacing:.12em!important}
body.admin-app-body :where(.btn,button:not(.admin-nav-toggle):not(.admin-sidebar-group-title):not(.admin-icon-action):not(.admin-user-chip),input[type=submit]){padding:10px 14px;gap:7px;margin-top:0;box-shadow:none}
body.admin-app-body :where(.btn,.admin-page-toolbar-links a,.admin-sidebar-foot a){text-decoration:none}
body.admin-app-body :where(.btn-danger,[class*="danger"] button,.danger.btn){color:var(--ui-danger)}
body.admin-app-body :where(form){min-width:0}
body.admin-app-body form :where(.form-grid,.grid,[class*="form-grid"]){align-items:start}
body.admin-app-body :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){border-color:#ddd5cd;background:#fff}
body.admin-app-body :where(input,select,textarea)::placeholder{color:#968a81;opacity:1}
body.admin-app-body :where(.admin-page-heading,.r64-page-head,.enterprise-os-hero,.r1030-hero,.r63-dash-intro){gap:var(--ui-s6)}
body.admin-app-body :where(.admin-page-heading p,.r64-page-head p,.enterprise-os-hero p,.r1030-hero p,.r63-dash-intro p){max-width:78ch}
body.admin-app-body :where(.admin-page-heading,.r64-page-head,.enterprise-os-hero,.r1030-hero){margin-bottom:var(--ui-s6)}
body.admin-app-body :where(.card,.r63-panel,.r64-panel-card,.restaurant-panel,[class*="-card"]){padding:clamp(16px,1.8vw,24px)}
body.admin-app-body :where(.card,.r63-panel,.r64-panel-card,.restaurant-panel,[class*="-card"])>:first-child{margin-top:0}
body.admin-app-body :where(.card,.r63-panel,.r64-panel-card,.restaurant-panel,[class*="-card"])>:last-child{margin-bottom:0}
body.admin-app-body :where(.admin-sidebar-group a,.admin-sidebar-group-title){font-family:var(--ui-font)!important;line-height:1.2!important}
body.admin-app-body .admin-sidebar-group a{gap:8px!important;padding:10px 11px!important}
body.admin-app-body .admin-sidebar-group-title{min-height:38px;padding:8px 10px!important}
body.admin-app-body .admin-app-brand b{line-height:1.2!important}
body.admin-app-body .admin-app-brand small{line-height:1.25!important}
body.admin-app-body .admin-app-topbar{font-family:var(--ui-font)!important}
body.admin-app-body .admin-app-actions{min-width:0;flex-wrap:nowrap}
body.admin-app-body .admin-user-chip{min-width:0}
body.admin-app-body .admin-user-chip>span{min-width:0}
body.admin-app-body .admin-user-chip b,body.admin-app-body .admin-user-chip small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.admin-app-body :where(.admin-filter-bar,.r1034-media-toolbar,[class*="toolbar"]){gap:10px}
body.admin-app-body .admin-table-scroll,body.admin-app-body :where(.responsive-table,.table-wrap){border-radius:var(--ui-r2);overflow:auto;max-width:100%;-webkit-overflow-scrolling:touch}
body.admin-app-body :where(table){width:100%;border-collapse:separate;border-spacing:0;background:#fff}
body.admin-app-body :where(th,td){padding:11px 12px!important;vertical-align:middle;border-bottom:1px solid #eee7e1}
body.admin-app-body :where(th){font-size:.72rem!important;letter-spacing:.025em;text-transform:none;white-space:nowrap;background:#fbf8f5}
body.admin-app-body :where(td){font-size:.82rem!important}
body.admin-app-body tbody tr:hover td{background:#fffaf6}
body.admin-app-body :where(td form){margin:0}
body.admin-app-body td :where(.btn,button){min-height:36px;padding:7px 10px;font-size:.75rem}
body.admin-app-body :where(.alert){padding:12px 14px;margin:0 0 16px;border-radius:var(--ui-r2)}
body.admin-app-body :where(.metric-badge,.pill,[class*="badge"]){line-height:1.25}
body.admin-app-body :where(dialog,.dashboard-widget-card,.admin-command-dialog,[class*="modal"]){border-radius:var(--ui-r3)}
body.admin-app-body :where(.dashboard-widget-card,.admin-command-dialog,[class*="modal-card"]){padding:clamp(16px,2.2vw,26px)}

/* Public storefront */
body:not(.admin-app-body){font-size:16px}
body:not(.admin-app-body) .container{width:min(1180px,calc(100% - clamp(20px,5vw,40px)))}
body:not(.admin-app-body) :where(h1){line-height:1.04;letter-spacing:-.035em}
body:not(.admin-app-body) :where(h2){line-height:1.12;letter-spacing:-.025em}
body:not(.admin-app-body) :where(.card,.branch-card,.product-card,.menu-card){border-radius:var(--ui-r3)}
body:not(.admin-app-body) .site-header-inner{min-width:0}
body:not(.admin-app-body) #main-navigation{min-width:0}
body:not(.admin-app-body) .header-actions{min-width:0}
body:not(.admin-app-body) :where(.btn,button,input[type=submit]){margin-top:0}
body:not(.admin-app-body) :where(.hero-actions,.header-actions,.branch-phones,.auth-form-links){gap:10px}

/* Mobile consistency */
@media(max-width:820px){
  :root{--ui-control:46px}
  body.admin-app-body{font-size:15px!important}
  body.admin-app-body :where(.card,.r63-panel,.r64-panel-card,.restaurant-panel,[class*="-card"]){padding:16px}
  body.admin-app-body :where(.admin-page-heading,.r64-page-head,.enterprise-os-hero,.r1030-hero){gap:14px;margin-bottom:18px}
  body.admin-app-body :where(.admin-page-toolbar-links,.ui-action-row,.form-actions,.actions,.button-row,.btn-row,.toolbar-actions){width:100%}
  body.admin-app-body :where(.admin-page-toolbar-links,.ui-action-row,.form-actions,.actions,.button-row,.btn-row,.toolbar-actions)>.btn,
  body.admin-app-body :where(.ui-action-row,.form-actions,.actions,.button-row,.btn-row,.toolbar-actions)>button{flex:1 1 150px}
  body.admin-app-body :where(th,td){padding:10px!important}
  body:not(.admin-app-body) .site-header{padding-inline:12px}
}
@media(max-width:560px){
  body.admin-app-body :where(h1){font-size:1.75rem!important}
  body.admin-app-body :where(h2){font-size:1.22rem!important}
  body.admin-app-body :where(.admin-page-toolbar-links,.ui-action-row,.form-actions,.actions,.button-row,.btn-row,.toolbar-actions)>.btn,
  body.admin-app-body :where(.ui-action-row,.form-actions,.actions,.button-row,.btn-row,.toolbar-actions)>button{flex-basis:100%}
  body.admin-app-body td :where(.btn,button){min-height:40px}
  body:not(.admin-app-body) :where(.hero-actions,.auth-form-links){display:grid;grid-template-columns:1fr}
  body:not(.admin-app-body) :where(.hero-actions .btn,.auth-form-links a){width:100%}
}
@media(pointer:coarse){
  body :where(a.btn,button,input[type=submit],input[type=button],select){min-height:46px}
  body :where(input[type=checkbox],input[type=radio]){min-width:20px;min-height:20px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
