/* CSS Reset — minimize browser defaults across elements */
*, *::before, *::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img, picture, video, canvas, svg{display:block;max-width:100%}
ul{list-style:none;margin:0;padding:0}
fieldset{border:0;margin:0;padding:0}
legend{padding:0}
table{border-collapse:collapse;border-spacing:0}

/* Minimal, accessible, grayscale dashboard UI */
/* Design tokens */
:root{
  --bg: #ffffff;
  --bg-elev: #f6f7f8;
  --fg: #111111;
  --fg-muted: #555555;
  --border: #e5e7eb;
  --accent: #0f0f10;
  --muted: #9ca3af;
  --focus: #111111;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
  --radius: 14px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  /* Scrollbar (light) */
  --scrollbar-track: color-mix(in oklab, var(--bg), black 4%);
  --scrollbar-thumb: color-mix(in oklab, var(--fg), transparent 86%);
  --scrollbar-thumb-hover: color-mix(in oklab, var(--fg), transparent 80%);
}
[data-theme="dark"]{
  --bg: rgb(31 41 55 / var(--tw-bg-opacity, 1)); 
  --bg-elev: rgb(17 24 39 / var(--tw-bg-opacity, 1));
  --fg: #f5f5f5;
  --fg-muted: #b3b3b3;
  --border: #212226;
  --accent: #ffffff;
  --muted: #8a8f98;
  --focus: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  /* Scrollbar (dark) */
  --scrollbar-track: color-mix(in oklab, var(--bg), white 4%);
  --scrollbar-thumb: color-mix(in oklab, var(--fg), transparent 86%);
  --scrollbar-thumb-hover: color-mix(in oklab, var(--fg), transparent 80%);
}

/* Resets */
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,system-ui,"Apple Color Emoji","Segoe UI Emoji"}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
hr{border:0;border-top:1px solid var(--border)}

/* Themed scrollbars (Firefox + WebKit) */
*{scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:8px}
*::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:8px;border:2px solid var(--scrollbar-track)}
*::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover)}

/* Focus visibility */
:where(a,button,[role="button"],input,select,textarea,[tabindex]){outline:none}
:where(a,button,[role="button"],input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* Layout */
.layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.layout[data-collapsed="true"]{grid-template-columns:80px 1fr}
.sidebar{background:var(--bg-elev);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;align-self:start;height:100vh;overflow:auto}
.sidebar[data-collapsed="true"] .nav-label{display:none}
.sidebar .collapse-btn{margin-left:auto}
.sidebar .logo{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);justify-content:center}
.sidebar[data-collapsed="true"] .logo{justify-content:flex-start}
.sidebar .logo #logo{height:104px;transition:transform .2s ease, width .2s ease, height .2s ease}
.sidebar[data-collapsed="true"] .logo #logo{height:32px}

/* Theme-aware logos: toggle via JS by swapping src, plus CSS fallback */
[data-theme="dark"] .logo .logo-light{display:none}
.logo .logo-dark{display:none}
[data-theme="dark"] .logo .logo-dark{display:inline-block}
.sidebar .logo{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4)}
.sidebar nav{display:flex;flex-direction:column;padding:var(--space-2)}
.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-4);border-radius:10px;color:var(--fg-muted)}
.nav-item:hover,.nav-item:focus-visible{background:var(--bg);color:var(--fg)}
.nav-item.active{background:var(--fg);color:var(--bg)}
.sidebar .footer{margin-top:auto;padding:var(--space-4);color:var(--muted);font-size:12px}
.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5)}
/* Center header content to the same width as main container */
.topbar-inner{display:flex;align-items:center;gap:var(--space-3);width:100%;max-width:1280px;margin:0 auto}
.container{width:100%;padding:var(--space-5);max-width:1280px;margin:0 auto}
/* Improve search field sizing on large screens */
.topbar-inner form[role="search"] .input{width:clamp(160px,30vw,360px)}

/* Responsive sidebar as drawer on mobile */
@media (max-width: 1024px){
  /* Ensure main content always takes full width on mobile */
  .layout,.layout[data-collapsed="true"]{grid-template-columns:1fr}
  /* Sidebar overlays content instead of reserving grid space */
  .sidebar{position:fixed;inset:0 auto 0 0;width:280px;transform:translateX(-100%);transition:transform .25s ease;z-index:50}
  body[data-drawer="open"] .sidebar{transform:translateX(0)}
  .drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:40}
  body[data-drawer="open"] .drawer-backdrop{opacity:1;pointer-events:auto}
  /* Place logo at left and close button at right */
  .sidebar .logo{justify-content:space-between}
}

/* Utilities */
.grid{display:grid;gap:var(--space-4)}
.grid-kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-kpi{grid-template-columns:1fr}}
.row{display:flex;align-items:center;gap:var(--space-3)}
.stack-mobile{ /* stack children vertically on small screens */ }
@media (max-width: 640px){
  .row.stack-mobile{flex-direction:column;align-items:stretch}
  .row.stack-mobile > *{width:100%}
}
.muted{color:var(--fg-muted)}
.pill{border:1px solid var(--border);padding:4px 10px;border-radius:999px;background:var(--bg-elev)}
.shadow{box-shadow:var(--shadow)}
.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elev);padding:var(--space-5)}
.kpi .value{font-weight:600;font-size:22px}

/* Dashboard grid: two columns on desktop, stacked on mobile */
.dashboard-grid{grid-template-columns:2fr 1fr;align-items:start}
@media (max-width:1024px){
  .dashboard-grid{grid-template-columns:1fr}
}

/* Card detail grid: two columns on desktop, stacked on mobile */
.card-detail-grid{grid-template-columns:1fr 1fr}
@media (max-width:1024px){
  .card-detail-grid{grid-template-columns:1fr}
}

/* Reusable two-column grid that stacks on mobile (≤640px) */
.grid-2col-mobile{grid-template-columns:1fr 1fr}
@media (max-width:640px){
  .grid-2col-mobile{grid-template-columns:1fr}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--bg);padding:8px 12px;border-radius:10px}
.btn:hover{background:var(--bg-elev)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* Inputs */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom: 9px;}
.input,.select,.textarea{border:1px solid var(--border);background:var(--bg);padding:8px 10px;border-radius:10px}
.field .input,.field .select,.field .textarea{width:100%}
.checkbox{width:18px;height:18px}
.help{color:var(--muted);font-size:12px}
.error{color:#c33}

/* Table */
.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--border);border-radius:12px}
.table thead th{position:sticky;top:0;background:var(--bg);text-align:left;font-weight:600;padding:12px;border-bottom:1px solid var(--border)}
.table tbody td{padding:12px;border-bottom:1px solid var(--border)}
.table tbody tr:hover{background:color-mix(in oklab, var(--bg-elev), black 3%)}
.table tbody tr:nth-child(2n){background:color-mix(in oklab, var(--bg-elev), black 1.5%)}
.table .row-check{width:40px}
.table .actions{white-space:nowrap}
.table .empty{padding:24px;text-align:center;color:var(--muted)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none}
.modal{position:fixed;inset:auto 0 0 0;margin:auto;top:10%;width:min(680px,90vw);display:none}
.modal.open,.modal-backdrop.open{display:block}

/* Load modal */
.load-modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.18);
  z-index:1000;
}
.load-modal.is-open{display:grid;}
.load-box{
  min-width:260px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  outline:none;
}
.load-spinner{
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid color-mix(in srgb, var(--border), transparent 30%);
  border-top-color:var(--fg);
  animation:spin .8s linear infinite;
}
.load-text{color:var(--muted);}
#load-progress{
  width:100%;
  height:8px;
  border:0;
  border-radius:999px;
  background:var(--bg-elev);
  color:var(--fg);
}
#load-progress::-webkit-progress-bar{background:var(--bg-elev);border-radius:999px;}
#load-progress::-webkit-progress-value{background:var(--fg);border-radius:999px;}
#load-progress::-moz-progress-bar{background:var(--fg);border-radius:999px;}

/* Toasts */
.toasts{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:1100;
}
@media (max-width:640px){
  .toasts{left:16px;right:16px;}
}
.toast{
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:12px;
  padding:12px 14px;
  min-width:220px;
  max-width:420px;
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.toast.ok{
  background:color-mix(in srgb, #16a34a 18%, var(--bg));
  border-color:#15803d;
  color:#0f321a;
}
.toast.ok .msg{color:#134e24;}
.toast.err{
  background:color-mix(in srgb, #dc2626 20%, var(--bg));
  border-color:#b91c1c;
  color:#3f0a0a;
  outline:none;
}
.toast.err .msg{color:#6b1111;}
.toast .title{font-weight:600;}
.toast .msg{color:var(--muted);font-size:.95rem;}
.toast-close{
  margin-left:auto;
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:10px;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.toast-close span{font-size:20px;line-height:1;}

/* Dark theme legibility for toasts */
[data-theme="dark"] .toast{color:var(--fg)}
[data-theme="dark"] .toast .msg{color:var(--muted)}
[data-theme="dark"] .toast-close{background:var(--bg-elev);border-color:var(--border)}
[data-theme="dark"] .toast.ok{
  background: color-mix(in srgb, #16a34a 26%, var(--bg));
  border-color: #22c55e;
  color: #e6f9ee;
}
[data-theme="dark"] .toast.ok .msg{color:#bbf7d0}
[data-theme="dark"] .toast.err{
  background: color-mix(in srgb, #ef4444 26%, var(--bg));
  border-color: #f87171;
  color: #fee2e2;
}
[data-theme="dark"] .toast.err .msg{color:#fecaca}

/* Skeleton */
.skeleton{background:linear-gradient(90deg, color-mix(in oklab, var(--bg-elev), black 6%) 25%, color-mix(in oklab, var(--bg-elev), white 6%) 37%, color-mix(in oklab, var(--bg-elev), black 6%) 63%);background-size:400% 100%;animation:sheen 1.4s ease infinite;border-radius:8px}
@keyframes sheen{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* HTMX indicator */
.htmx-indicator{opacity:0;transition:opacity .2s}
.htmx-request .htmx-indicator{opacity:1}
.spinner{width:22px;height:22px;border-radius:999px;border:3px solid var(--border);border-top-color:var(--fg);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;background:var(--bg);border:1px solid var(--border);padding:8px 12px;z-index:50}

/* Visibility helpers: show proper controls per breakpoint */
.mobile-viewer{display:none}
.desktop-viewer{display:inline-flex}
@media (max-width:1024px){
  .mobile-viewer{display:inline-flex !important}
  .desktop-viewer{display:none !important}
}

/* Simple dropdown (details/summary) for mobile action menus */
.dropdown{position:relative;display:inline-block}
.dropdown summary{list-style:none;display:inline-flex;align-items:center;gap:8px}
.dropdown summary::-webkit-details-marker{display:none}
.dropdown .menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--bg);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);min-width:180px;padding:6px;z-index:60}
.dropdown .menu a,.dropdown .menu button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:0;background:transparent}
.dropdown .menu a:hover,.dropdown .menu button:hover{background:var(--bg-elev)}
.dropdown[open] > summary{background:var(--bg-elev);border-radius:10px}

/* Prose typography for rich text content */
.prose{color:var(--fg);line-height:1.7}
.prose :where(h1,h2,h3,h4){line-height:1.25;margin:var(--space-5) 0 var(--space-3)}
.prose :where(h1){font-size:1.8rem}
.prose :where(h2){font-size:1.4rem}
.prose :where(h3){font-size:1.2rem}
.prose :where(p){margin: var(--space-3) 0}
.prose :where(ul,ol){padding-left:1.25rem;margin: var(--space-3) 0}
.prose :where(li){margin:6px 0}
.prose :where(a){text-decoration:underline}
.prose :where(code){background:color-mix(in oklab, var(--bg-elev), black 4%);border:1px solid var(--border);padding:2px 4px;border-radius:6px}
.prose :where(blockquote){margin: var(--space-4) 0;padding: var(--space-3) var(--space-4);border-left:3px solid var(--border);color:var(--fg-muted);background:color-mix(in oklab, var(--bg-elev), black 2%);border-radius:8px}



/* Responsive grid just for this view */
.delivery-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);width:100%;align-items:start}
.delivery-grid > section{min-width:0}
@media (min-width: 1024px){.delivery-grid{grid-template-columns:1.1fr 1.4fr}}
.list-card{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--bg)}
.summary-row{justify-content:space-between;align-items:center;cursor:pointer}
.item-row{justify-content:space-between;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--bg-elev)}
.mod-row{border:1px dashed var(--border);border-radius:10px;padding:8px 10px}
.count{font-size:12px;color:var(--muted)}


.delivery-head-order{display: flex; flex-direction: column;gap: 6px;}
.delivery-head-order strong{margin-left: .5rem; font-size: .9rem;}
.delivery-head-order .muted{font-size: .9rem;}