/* Canteen workspace: one page title, restrained red accents, and aligned controls. */
.app-shell.compact-shell #content,
.app-shell.compact-shell #content:has(>.staff-order-list),
.app-shell.compact-shell #content:has(>.management-layout) .management-main{
  background:#f8f9fb!important;box-shadow:none!important;
}
.app-shell.compact-shell #content>.heading,
.app-shell.compact-shell #content:has(>.staff-order-list)>.heading,
.app-shell.compact-shell .management-intro,
.app-shell.compact-shell .management-section-heading{
  min-height:0!important;margin:0 0 15px!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;color:#243047!important;
}
.app-shell.compact-shell #content>.heading h1{display:none!important}
.app-shell.compact-shell :is(.management-intro,.management-section-heading) h1{display:none!important}
.app-shell.compact-shell #content>.heading :is(p,small),
.app-shell.compact-shell #content>.heading .muted,
.app-shell.compact-shell .management-intro :is(p,small),
.app-shell.compact-shell .management-section-heading :is(p,small){color:#687386!important}
.app-shell.compact-shell :is(.management-intro,.management-section-heading) :is(h1,h2){color:#243047!important;font-size:18px!important}
.app-shell.compact-shell .management-intro::before,
.app-shell.compact-shell .management-intro::after,
.app-shell.compact-shell .management-section-heading::before,
.app-shell.compact-shell .management-section-heading::after,
.app-shell.compact-shell #content>.heading::before,
.app-shell.compact-shell #content>.heading::after{display:none!important}
.app-shell.compact-shell .prep-hero,
.staff-profile-identity{background:#ed1b2f!important;border-color:#ed1b2f!important;box-shadow:none!important}
.staff-profile-identity::after,.prep-hero::after{display:none!important}
.app-shell.compact-shell .app-scan:hover,
.app-shell.compact-shell .app-scan:focus-visible{background:#ed2635!important;border-color:#ed2635!important;box-shadow:none!important;transform:none!important}
.app-shell.compact-shell .app-categories button{background:#fff!important;border-color:#e8aeb6!important;color:#c7192b!important;box-shadow:none!important}
.app-shell.compact-shell .app-categories button.active,
.app-shell.compact-shell .app-categories button.active:hover{background:#e91b35!important;border-color:#e91b35!important;color:#fff!important;box-shadow:none!important}
.app-shell.compact-shell .app-categories button:not(.active):hover{background:#fff!important;border-color:#e8aeb6!important;color:#c7192b!important;box-shadow:none!important;transform:none!important}
.app-shell.compact-shell .product:hover{border-color:var(--ui-line)!important;background:#fff!important;box-shadow:none!important;transform:none!important}
.app-shell.compact-shell .product.product-selected:hover{border-color:#e91b35!important}
.app-shell.compact-shell #content .filters [data-action="filter-credit"]{display:none!important}
.app-shell.compact-shell [data-ui-credit]{display:none!important}
.app-shell[data-workspace-page="pos"] .searchbar,
.app-shell[data-workspace-page="pos"] .cart,
.app-shell.compact-shell .management-card,
.app-shell.compact-shell .student-card,
.app-shell.compact-shell .meal-grid>.panel,
.app-shell.compact-shell .sales-summary,
.app-shell.compact-shell .receive-upload,
.app-shell.compact-shell #cart>.cart-stock-note{
  background:#fff!important;border-color:#e2e6ec!important;box-shadow:none!important;
}
.app-shell.compact-shell .app-category-strip .app-category-arrow:hover{background:#fff!important;box-shadow:none!important}
.app-shell.compact-shell .staff-break-tabs button[aria-pressed=true]{background:#e91b35!important;border-color:#e91b35!important;color:#fff!important;box-shadow:none!important}
.app-shell.compact-shell .staff-break-tabs button:hover{box-shadow:none!important;transform:none!important}
.app-shell.compact-shell #content :is(.catalog-card,.student-card,.management-card,.receive-doc):hover{background:#fff!important;border-color:#e2e6ec!important;box-shadow:none!important;transform:none!important}
.app-shell #alert-slot .staff-attention{grid-template-columns:56px minmax(0,1fr) auto!important;min-height:78px!important;border-color:#efb4bc!important;border-left:3px solid #e91b35!important;box-shadow:none!important}
.app-shell #alert-slot .staff-attention:hover{background:#fff!important;box-shadow:none!important;transform:none!important}
.app-shell #alert-slot .staff-attention-count{display:flex!important;flex-direction:column;justify-content:center;gap:1px;width:56px!important;height:56px!important;flex-basis:56px!important;border-radius:12px!important;background:#e91b35!important;color:#fff!important;font-size:19px!important;line-height:1!important}
.app-shell #alert-slot .staff-attention-count::before{content:"";display:block;width:17px;height:17px;margin:0 auto;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 5v10l-9 5-9-5V7zM3 7l9 5 9-5M12 12v10'/%3E%3C/svg%3E")}
.app-shell #alert-slot .staff-attention-action span{display:none!important}
.app-shell.compact-shell .stock-search{max-width:520px;margin:0 0 15px!important}
.app-shell.compact-shell #stock-search{min-height:43px;border-color:#dfe4eb;background-color:#fff}
.app-shell.compact-shell .stock-metrics{margin-top:0}
.app-shell.compact-shell .stock-table{border:1px solid #e1e5eb;border-radius:13px;box-shadow:none}
.app-shell.compact-shell .stock-table table{width:100%;table-layout:fixed}
.app-shell.compact-shell .stock-table th:first-child{width:29%}
.app-shell.compact-shell .stock-table th:nth-child(2),.app-shell.compact-shell .stock-table th:nth-child(3),.app-shell.compact-shell .stock-table th:nth-child(4){width:10%}
.app-shell.compact-shell .stock-table th:nth-child(5){width:17%}
.app-shell.compact-shell .stock-table th:last-child{width:24%}
.app-shell.compact-shell .stock-table th{background:#f7f8fa;color:#536176}
.app-shell.compact-shell .stock-table tr{background:#fff!important}
.app-shell.compact-shell .stock-table tr:hover{background:#fff!important;box-shadow:none!important}
.app-shell.compact-shell .stock-table td{vertical-align:middle;border-bottom:1px solid #edf0f3}
.app-shell.compact-shell .stock-table td:nth-child(n+2):nth-child(-n+4){font-variant-numeric:tabular-nums;text-align:center}
.app-shell.compact-shell .stock-table td:last-child{text-align:right}
.app-shell.compact-shell .stock-row-actions{justify-content:flex-end;gap:6px}
.app-shell.compact-shell .stock-row-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 10px;border:1px solid #e0e4eb;border-radius:8px;background:#fff;color:#243047;font-size:11px;font-weight:650;box-shadow:none}
.app-shell.compact-shell .stock-row-actions button:hover{background:#fff;box-shadow:none}
.app-shell.compact-shell .stock-row-actions button[data-product]{border-color:#d42039;color:#c7192b}
.app-shell.compact-shell .stock-row-actions [data-stock-archive]{border-color:#f2d1d6;color:#c7192b}
.stock-row-actions svg{width:15px;height:15px;flex:none}
.app-shell.compact-shell .stock-buy{background:#fff;border-color:#e2e6ec;box-shadow:none}
.app-shell.compact-shell #content>.grid3>.metric,
.app-shell.compact-shell #content .stock-metrics>div,
.app-shell.compact-shell #content .stock-metrics>button,
.app-shell.compact-shell #content .staff-order-card.order-queue-row{
  background:#fff!important;border-color:#e2e6ec!important;box-shadow:none!important;
}
.app-shell.compact-shell #content .staff-order-card.order-queue-row:is(.queue-late,.status-preparing){border-left:3px solid #e91b35!important}
.app-shell.compact-shell #content:has(>.staff-order-list)>.heading{margin-bottom:12px!important}
.app-shell.compact-shell #content:has(>.staff-order-list) .order-overview-count,
.app-shell.compact-shell #content:has(>.staff-order-list) .order-overview-count strong{color:#263348!important}
.app-shell.compact-shell #content:has(>.staff-order-list) .order-overview-count strong{font-size:21px!important}
.app-shell.compact-shell #content:has(>.staff-order-list) .order-overview-auto{display:none!important}
.app-shell.compact-shell #content:has(>.staff-order-list) .order-overview-late{background:#fff!important;border-color:#e8d2d6!important;color:#bc2941!important}
.app-shell.compact-shell #content:has(>.staff-order-list) .order-overview-late strong{color:#bc2941!important}
.app-shell.compact-shell #content:has(>.staff-order-list) .pickup-queue{background:#fff!important;border-color:#e2e6ec!important;box-shadow:none!important;padding:14px 16px!important}
.app-shell.compact-shell #content:has(>.staff-order-list) .pickup-queue-intro{margin-bottom:9px}
.app-shell.compact-shell #content:has(>.staff-order-list) .pickup-queue-intro :is(small,span){display:none!important}
.app-shell.compact-shell #content:has(>.staff-order-list) .pickup-queue-intro strong{color:#263348;font-size:14px}
.app-shell.compact-shell #content:has(>.staff-order-list) #pickup-queue-input{min-height:42px;font-size:13px;border-color:#dfe4eb}
.app-shell.compact-shell #content:has(>.staff-order-list) #pickup-queue-form button{min-height:42px;background:#e91b35;color:#fff;font-size:12px}
.app-shell.compact-shell #content:has(>.staff-order-list) #pickup-queue-form button:hover{background:#e91b35;box-shadow:none}
.app-shell.compact-shell #content:has(>.staff-order-list) .order-stage-summary>span{background:#fff!important;border-color:#e2e6ec!important;color:#526176!important}
.app-shell.compact-shell #content:has(>.staff-order-list) .order-stage-summary b{color:#c7192b}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-list{gap:9px}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold{min-width:0;border:1px solid #e2e6ec;border-radius:12px;background:#fff;overflow:hidden}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold.queue-late{border-left:3px solid #e91b35}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary{display:grid;grid-template-columns:minmax(185px,1fr) minmax(150px,1.15fr) auto auto auto 18px;align-items:center;gap:12px;min-height:86px;padding:14px 18px;list-style:none;cursor:pointer;color:#263348}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary::-webkit-details-marker{display:none}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary::marker{content:''}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary::after{display:none!important}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary:hover{background:#fff!important}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary:focus-visible{outline:2px solid #e91b35;outline-offset:-3px}
.staff-order-fold-main{display:grid;gap:4px;min-width:0}
.staff-order-fold-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.25}
.staff-order-fold-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#788598;font-size:11px}
.staff-order-fold-preview{display:grid;gap:5px;min-width:0;color:#8893a3}
.staff-order-fold-preview small{color:#a1aab7;font-size:10px;font-weight:700}
.staff-order-fold-preview>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.4}
.staff-order-fold-status{padding:5px 8px;border-radius:7px;background:#f4f6f8;color:#526176;font-size:11px;font-weight:700;white-space:nowrap}
.staff-order-fold.queue-late .staff-order-fold-status{background:#fff0f2;color:#bc2941}
.staff-order-fold-total{color:#c7192b;font-size:15px;white-space:nowrap}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-action{min-height:35px;padding:7px 11px;border:1px solid #e91b35;border-radius:8px;background:#e91b35;color:#fff;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-action:hover{background:#d7142f;border-color:#d7142f;color:#fff;box-shadow:none}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-action:disabled{opacity:.5;cursor:not-allowed}
.staff-order-fold-chevron{display:grid;place-items:center;color:#798596;transition:transform .15s}
.staff-order-fold-chevron svg{width:17px;height:17px}
.staff-order-fold[open] .staff-order-fold-chevron{transform:rotate(180deg)}
.staff-order-fold-detail{border-top:1px solid #edf0f3;padding:14px 16px 16px}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-detail .staff-order-card.order-queue-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important;gap:12px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;overflow:visible!important}
.staff-order-fold-products{min-width:0}
.staff-order-fold-products h4{margin:0 0 9px;color:#526176;font-size:11px;font-weight:700}
.staff-order-fold-products .staff-order-line{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #f0f1f4}
.staff-order-fold-products .staff-order-line:last-child{border-bottom:0}
.staff-order-fold-products .staff-order-line img,.staff-order-fold-products .staff-order-placeholder{width:34px;height:38px;object-fit:contain}
.staff-order-fold-products .staff-order-line strong{display:block;color:#263348;font-size:12px;white-space:normal}
.staff-order-fold-products .staff-order-line small{display:block;color:#788598;font-size:10px}
.staff-order-fold-products .staff-order-line>b{display:block!important;color:#263348;font-size:12px;white-space:nowrap}
.staff-order-fold-payment{margin:0;color:#788598;font-size:11px}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-detail .order-queue-actions{display:flex;grid-area:auto!important;justify-content:flex-start;gap:7px;margin-top:2px}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-detail .order-queue-note{grid-area:auto!important;margin:0;color:#526176}
@media(max-width:900px) and (min-width:601px){
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) auto auto 18px;grid-template-areas:"main status total chevron" "preview preview action chevron";gap:9px 12px}
  .staff-order-fold-main{grid-area:main}
  .staff-order-fold-preview{grid-area:preview}
  .staff-order-fold-status{grid-area:status}
  .staff-order-fold-total{grid-area:total}
  .staff-order-fold-action{grid-area:action;justify-self:end}
  .staff-order-fold-chevron{grid-area:chevron}
}
@media(max-width:600px){
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) auto 18px;grid-template-areas:"main status chevron" "preview preview preview" "total action action";gap:8px 8px;min-height:0;padding:13px 12px}
  .staff-order-fold-main{grid-area:main}
  .staff-order-fold-main small{overflow:visible;white-space:normal;line-height:1.35}
  .staff-order-fold-preview{grid-area:preview;gap:2px;padding-top:3px;border-top:1px solid #f2f3f5}
  .staff-order-fold-status{grid-area:status;justify-self:end}
  .staff-order-fold-total{grid-area:total;justify-self:start;font-size:13px}
  .staff-order-fold-action{grid-area:action;justify-self:end}
  .staff-order-fold-chevron{grid-area:chevron}
  .staff-order-fold-detail{padding:12px}
  .staff-order-fold-products .staff-order-line{grid-template-columns:30px minmax(0,1fr) auto}
  .app-shell.compact-shell #content:has(>.staff-order-list) #pickup-queue-form button{min-width:93px}
}
.app-shell.compact-shell #content .stock-metrics>button strong{color:#d42039!important}
.app-shell.compact-shell .stock-buy .row.between{gap:12px;flex-wrap:wrap}
#modal:has(.staff-product-dialog){width:min(760px,calc(100vw - 24px));max-width:760px;padding:22px;border-radius:17px;color:#243047}
#modal:has(.staff-product-dialog)>h2{margin:0 42px 16px 0;font-size:19px;color:#243047}
#modal .staff-product-dialog{display:grid;gap:17px}
#modal .staff-product-hero{display:flex;align-items:center;gap:14px;padding:13px;border:1px solid #e5e8ed;border-radius:12px;background:#fff}
#modal .staff-product-hero img,#modal .staff-product-hero .staff-product-photo-empty{width:72px;height:76px;flex:0 0 72px;object-fit:contain;border-radius:9px;background:#f7f8fa}
#modal .staff-product-hero .staff-product-photo-empty{display:grid;place-items:center;color:#8a94a3;font-size:11px;text-align:center}
#modal .staff-product-hero strong{display:block;font-size:15px;line-height:1.35}
#modal .staff-product-hero small{display:block;margin-top:4px;color:#718093;font-size:11px}
#modal .staff-product-note{margin:0;padding:9px 11px;border-left:3px solid #e91b35;border-radius:7px;background:#fff6f7;color:#536176;font-size:12px;line-height:1.45}
#modal .staff-product-note strong{color:#b91932}
#modal .staff-product-dialog #product-form{margin:0}
#modal .staff-product-dialog .category-edit{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:0;padding:11px 13px;border:1px solid #e5e8ed;border-radius:11px;background:#fff}
#modal .staff-product-dialog .category-edit label{flex:1;min-width:180px;margin:0;font-size:12px;color:#536176}
#modal .staff-product-dialog .category-edit button{min-height:40px}
#modal .staff-product-dialog .form-grid{gap:11px 14px;align-items:start}
#modal .staff-product-dialog .form-grid label{font-size:12px;font-weight:600;color:#536176}
#modal .staff-product-dialog .form-grid input{min-height:40px;font-size:13px;font-weight:500}
#modal .staff-product-dialog [hidden]{display:none!important}
#modal .staff-product-dropzone{position:relative;display:flex!important;align-items:center;gap:13px;min-height:82px;padding:13px;border:1px dashed #e78896;border-radius:11px;background:#fffafa;cursor:pointer}
#modal .staff-product-dropzone:hover,#modal .staff-product-dropzone.is-dragging{background:#fff2f4;border-color:#d42039}
#modal .staff-product-dropzone svg{width:25px;height:25px;flex:none;color:#d42039}
#modal .staff-product-dropzone span{display:grid;gap:3px;color:#243047;font-size:12px;font-weight:650}
#modal .staff-product-dropzone small{color:#718093;font-size:11px;font-weight:400}
#modal .staff-product-dropzone input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
#modal .staff-product-dropzone:focus-within{outline:2px solid #e91b35;outline-offset:2px}
#modal .staff-product-dialog .preview-photo{max-width:90px;max-height:90px;object-fit:contain;margin:0}
#modal .staff-product-batches{padding-top:16px;border-top:1px solid #e6e9ee}
#modal .staff-product-batches h3{margin:0 0 8px;font-size:15px;color:#243047}
#modal .staff-product-batches .grid2{gap:12px}
#modal .staff-product-batches .grid2 input{min-height:40px;font-size:13px}
#modal .staff-product-batches small{display:block;margin-top:7px;font-size:11px;color:#718093}
#modal .staff-product-batches .actions{margin-top:12px}
#modal:has(>.staff-profile-dialog) .staff-profile-actions>button{background:#fff!important;border-color:#e4e7ec!important;color:#243047!important}
#modal:has(>.staff-profile-dialog) .staff-profile-actions>button:hover{background:#fff!important;border-color:#e4e7ec!important}
#modal:has(>.staff-profile-dialog) .staff-profile-action-icon{color:#d42039!important;border-color:#f1d2d7!important}
@media(max-width:850px){
  .app-shell #alert-slot .staff-attention{grid-template-columns:46px minmax(0,1fr) auto!important}
  .app-shell #alert-slot .staff-attention-count{width:46px!important;height:48px!important;flex-basis:46px!important;font-size:16px!important}
  .app-shell.compact-shell .stock-table{border:0}
  .app-shell.compact-shell .stock-table table{table-layout:auto}
  .app-shell.compact-shell .stock-table tr{border-color:#e1e5eb!important}
  .app-shell.compact-shell .stock-table td:last-child{text-align:left}
  .app-shell.compact-shell .stock-row-actions{justify-content:flex-start}
  #modal .staff-product-dialog .form-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  #modal:has(.staff-product-dialog){padding:16px}
  #modal .staff-product-dialog .form-grid{grid-template-columns:1fr}
  .app-shell #alert-slot .staff-attention-action{font-size:11px!important}
}

/* Order preparation follows the same restrained white and red language as the list. */
#modal:has(.order-preparation-dialog){padding:22px;max-width:760px;border-radius:16px}
#modal:has(.order-preparation-dialog)>h2{margin:0 0 14px;color:#263348;font-size:19px}
#modal .order-preparation-dialog{color:#263348}
#modal .order-preparation-dialog .prep-hero{padding:14px 16px;border:1px solid #e3e7ec;border-radius:11px;background:#fff;color:#263348;box-shadow:none}
#modal .order-preparation-dialog .prep-hero-kicker{color:#c7192b;font-size:10px}
#modal .order-preparation-dialog .prep-hero-main>strong{font-size:16px}
#modal .order-preparation-dialog .prep-hero-class{border-color:#e4e7ec;background:#f6f7f9;color:#657184}
#modal .order-preparation-dialog .prep-hero-time>span{color:#7c8797}
#modal .order-preparation-dialog .prep-hero-time>strong{color:#263348;font-size:12px}
#modal .order-preparation-dialog .prep-hero-time em{background:#fff0f2;color:#b51e36}
#modal .order-preparation-dialog .prep-progress-card{margin:12px 0;padding:12px 14px;border-color:#e3e7ec;background:#fff}
#modal .order-preparation-dialog .prep-progress-copy{margin-bottom:8px}
#modal .order-preparation-dialog .prep-progress-copy>strong{font-size:13px}
#modal .order-preparation-dialog .preparation-progress-track{height:6px;background:#f0f1f3}
#modal .order-preparation-dialog .preparation-progress-track span{background:#e91b35}
#modal .order-preparation-dialog .preparation-feedback{margin-bottom:13px;padding:9px 11px;border-color:#e4e7ec;background:#f8f9fa;color:#586679}
#modal .order-preparation-dialog .prep-list-heading strong{color:#263348;font-size:13px}
#modal .order-preparation-dialog #preparation-products .preparation-item{border-color:#e4e7ec;border-radius:10px}
#modal .order-preparation-dialog #preparation-products .preparation-item.is-prepared{border-color:#eacbd1;background:#fff8f9}
#modal .order-preparation-dialog .prep-item-media{background:#f7f8fa}
#modal .order-preparation-dialog .prep-item-info strong{color:#263348;font-size:13px}
#modal .order-preparation-dialog .prep-item-count,#modal .order-preparation-dialog .is-prepared .prep-item-count{color:#c7192b}
#modal .order-preparation-dialog #preparation-products .preparation-ready-button{border-color:#e7c3ca;background:#fff;color:#c7192b}
#modal .order-preparation-dialog #preparation-products .preparation-ready-button:disabled{border-color:#e5e7eb;background:#f6f7f8;color:#7b8797}
#modal .order-preparation-dialog .prep-actions{border-color:#e8ebef}
#modal .order-preparation-dialog .prep-actions .primary{background:#e91b35;border-color:#e91b35;color:#fff}
#modal .staff-prep-scan{display:grid;gap:6px;margin:0 0 13px;color:#526176;font-size:11px;font-weight:700}
#modal .staff-prep-scan input{width:100%;min-height:42px;box-sizing:border-box;padding:9px 12px;border:1px solid #dfe4ea;border-radius:8px;background:#fff;color:#263348;font-size:13px;font-weight:500}
#modal .staff-prep-scan input:focus{outline:2px solid #e91b35;outline-offset:1px}
#modal .staff-prep-scan small{color:#8792a0;font-size:10px;font-weight:400;line-height:1.4}
@media(max-width:600px){
  #modal:has(.order-preparation-dialog){padding:16px}
  #modal:has(.order-preparation-dialog)>h2{font-size:17px}
  #modal .order-preparation-dialog .prep-hero{padding:12px}
  #modal .order-preparation-dialog .prep-hero-main>strong{font-size:14px}
  #modal .order-preparation-dialog .prep-hero-time>strong{font-size:10px}
  #modal .order-preparation-dialog .prep-progress-card{padding:10px}
  #modal .order-preparation-dialog .prep-actions{bottom:-16px}
}

/* Black waiting labels and totals in the desktop canteen order list only. */
@media(min-width:901px){
  .app-shell.compact-shell #content .staff-order-fold:has(.status-waiting)>summary .staff-order-fold-status,
  .app-shell.compact-shell #content .staff-order-fold>summary .staff-order-fold-total{color:#111}
}

/* Ready for pickup has a restrained green badge on desktop. */
@media(min-width:901px){
  .app-shell.compact-shell #content .staff-order-fold:has(.status-ready)>summary .staff-order-fold-status{background:#eaf7ef;color:#187745}
}

/* Preparing orders have a soft yellow desktop status badge. */
@media(min-width:901px){
  .app-shell.compact-shell #content .staff-order-fold:has(.status-preparing)>summary .staff-order-fold-status{background:#fff6dc;color:#946514}
}

/* Direct order actions and a clear scan-or-complete preparation flow. */
.staff-order-fold-shortcuts{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:nowrap}
.app-shell.compact-shell #content .staff-order-fold-cancel{min-height:35px;padding:7px 9px;border:1px solid #e1e5eb;border-radius:8px;background:#fff;color:#657184;font-size:11px;font-weight:600;white-space:nowrap}
.app-shell.compact-shell #content .staff-order-fold-cancel:hover{border-color:#efb7c0;color:#c7192b;background:#fff7f8}
#modal .order-preparation-dialog .prep-item-media{transition:opacity .2s,filter .2s}
#modal .order-preparation-dialog #preparation-products .preparation-item{background:#fafbfc;transition:background .2s,border-color .2s}
#modal .order-preparation-dialog #preparation-products .preparation-item.is-partly-prepared{background:#fffdf6;border-color:#efe3be}
#modal .order-preparation-dialog #preparation-products .preparation-item.is-prepared{background:#f2faf5;border-color:#cde8d6}
#modal .order-preparation-dialog .prep-item-count{color:#788598}
#modal .order-preparation-dialog .is-partly-prepared .prep-item-count{color:#946514}
#modal .order-preparation-dialog .is-prepared .prep-item-count{color:#187745}
#modal .order-preparation-dialog .prep-item-buttons{display:flex;align-items:center;justify-content:flex-end;gap:6px}
#modal .order-preparation-dialog #preparation-products .preparation-ready-button{min-height:36px;padding:7px 11px;border-color:#e91b35;background:#e91b35;color:#fff;font-size:12px}
#modal .order-preparation-dialog .preparation-unit-button{min-height:36px;padding:7px 9px;border:1px solid #e1e5eb;border-radius:8px;background:#fff;color:#526176;font-size:12px}
#modal .order-preparation-dialog #preparation-products .is-prepared .preparation-ready-button:disabled{opacity:1;border-color:#cde8d6;background:#eaf7ef;color:#187745}
#modal .order-preparation-dialog .prep-hero-time .prep-status-active{background:#fff6dc;color:#946514}
#modal .order-preparation-dialog .preparation-feedback{font-size:12px;line-height:1.5}
#modal .order-preparation-dialog .prep-actions{display:flex;flex-wrap:wrap;gap:8px}
#modal .order-preparation-dialog #cancel-preparation-order{border-color:#e1e5eb;background:#fff;color:#657184}
@media(max-width:900px){.staff-order-fold-shortcuts{grid-area:action;justify-self:end}.staff-order-fold-shortcuts .staff-order-fold-action{grid-area:auto}}
@media(max-width:600px){
  #modal .order-preparation-dialog #preparation-products .preparation-item{grid-template-columns:52px minmax(0,1fr);gap:10px;padding:12px}
  #modal .order-preparation-dialog .prep-item-side{grid-column:2;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
  #modal .order-preparation-dialog .prep-item-media{width:52px;height:60px}
  #modal .order-preparation-dialog .prep-item-info strong{font-size:12px;overflow-wrap:anywhere}
  #modal .order-preparation-dialog .prep-actions .primary{flex:1 1 100%}
}
@media(min-width:901px) and (max-width:1200px){
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) auto auto 18px;grid-template-areas:"main status total chevron" "preview preview action chevron"}
  .staff-order-fold-main{grid-area:main}.staff-order-fold-preview{grid-area:preview}.staff-order-fold-status{grid-area:status}.staff-order-fold-total{grid-area:total}.staff-order-fold-shortcuts{grid-area:action}.staff-order-fold-chevron{grid-area:chevron}
}

#modal .order-preparation-dialog .preparation-unit-button::before,#modal .order-preparation-dialog #cancel-preparation-order::before{display:none!important}
@media(max-width:600px){.staff-order-fold-shortcuts{flex-wrap:wrap}}

/* Bag label printing is local to the selected order; scanner input stays global. */
#modal .order-preparation-dialog .prep-back-button{font-weight:500!important}
#modal .order-preparation-dialog .prep-print-button{font-weight:500;border-color:#e1e5eb;background:#fff;color:#526176}
.app-shell.compact-shell #content .staff-order-label-button{font-weight:500}
#staff-bag-label{display:none}
@media print{
  @page staff-bag-label{size:80mm 100mm;margin:3mm}
  html:has(#staff-bag-label),body:has(>#staff-bag-label){width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;background:#fff!important;overflow:visible!important;color:#000!important}
  body:has(>#staff-bag-label)>*:not(#staff-bag-label){display:none!important}
  body:has(>#staff-bag-label) dialog::backdrop{display:none!important}
  #staff-bag-label{display:block!important;page:staff-bag-label;width:74mm;max-width:100%;margin:0;background:#fff;color:#000;font:12px/1.4 Arial,sans-serif}

}

/* TSC DA210, 80 × 100 mm adhesive labels, 3 mm safe area. */
  #staff-bag-label *{box-sizing:border-box;color:#000;box-shadow:none;text-shadow:none;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  #staff-bag-label header{display:flex;justify-content:space-between;align-items:center;padding-bottom:3mm;border-bottom:1px solid #000;font-size:10px}
  #staff-bag-label header strong{font-size:15px}
  #staff-bag-label h1{margin:3mm 0 1mm;font-size:21px;line-height:1.15;overflow-wrap:anywhere}
  #staff-bag-label .bag-label-class{margin:0 0 3mm;font-size:14px;font-weight:700}
  #staff-bag-label .bag-label-due{display:grid;gap:1mm;padding:2mm 0;border-top:1px dashed #000;border-bottom:1px dashed #000}
  #staff-bag-label .bag-label-due span{font-size:10px}
  #staff-bag-label .bag-label-due strong{font-size:15px}
  #staff-bag-label ul{margin:2mm 0;padding:0;list-style:none}
  #staff-bag-label li{display:flex;gap:2mm;padding:2mm 0;border-bottom:1px solid #ddd;break-inside:avoid}
  #staff-bag-label li>b{min-width:7mm;font-size:16px;white-space:nowrap}
  #staff-bag-label li div{min-width:0;overflow-wrap:anywhere}
  #staff-bag-label li strong{font-size:12px}
  #staff-bag-label li small{display:block;font-size:10px}
  #staff-bag-label .bag-label-note{margin:2mm 0;overflow-wrap:anywhere}
  #staff-bag-label .bag-label-total{display:flex;justify-content:space-between;margin:3mm 0;gap:2mm}
  #staff-bag-label .bag-label-code{padding-top:3mm;border-top:1px dashed #000;text-align:center;break-inside:avoid}
  #staff-bag-label .bag-label-code>span{display:block;font-size:10px}
  #staff-bag-label .bag-label-barcode{display:block;width:100%;height:18mm;margin:2mm 0 1mm}
  #staff-bag-label .bag-label-code>strong{display:block;font:700 22px/1.2 monospace;letter-spacing:2px}
  #staff-bag-label footer{margin-top:3mm;text-align:center;font-size:9px}
#staff-bag-label.bag-label-measure{display:block;position:fixed;left:-10000px;top:0;visibility:hidden;width:74mm;font:12px/1.4 Arial,sans-serif}
#staff-bag-label .bag-label{width:74mm;height:93mm;display:flex;flex-direction:column;box-sizing:border-box;background:#fff;color:#000;font:12px/1.35 Arial,sans-serif;break-after:page;overflow:hidden}
#staff-bag-label .bag-label:last-child{break-after:auto}
#staff-bag-label .bag-label-top,#staff-bag-label .bag-label-bottom{flex:none}
#staff-bag-label .bag-label-body{flex:1;min-height:0;margin:1mm 0;overflow:visible}
#staff-bag-label header{padding-bottom:1.5mm}
#staff-bag-label h1{margin:2mm 0 .5mm;font-size:19px}
#staff-bag-label .bag-label-class{margin:0 0 1.5mm;font-size:12px}
#staff-bag-label .bag-label-due{padding:1mm 0;gap:0}
#staff-bag-label .bag-label-due small{font-size:9px}
#staff-bag-label .bag-label-due strong{font-size:12px}
#staff-bag-label ul{margin:0}
#staff-bag-label li{padding:1.2mm 0;gap:1.5mm}
#staff-bag-label li strong{font-size:11px}
#staff-bag-label li>b{font-size:14px}
#staff-bag-label .bag-label-note{display:block;margin:0;font-size:10px;line-height:1.35}
#staff-bag-label .bag-label-note b{font-size:10px;margin-right:1mm}
#staff-bag-label .bag-label-total{margin:1.5mm 0;font-size:11px}
#staff-bag-label .bag-label-code{padding-top:1.5mm}
#staff-bag-label .bag-label-barcode{height:12mm;margin:1mm 0}
#staff-bag-label .bag-label-code>strong{font-size:20px}
#staff-bag-label footer{margin-top:1mm;height:3mm;line-height:3mm;font-size:9px}

/* A single quantity counter and quiet icon actions for preparation products. */
#modal .order-preparation-dialog .prep-item-side{display:flex;flex-direction:row;align-items:center;justify-content:flex-end}
#modal .order-preparation-dialog .prep-item-count{display:inline-block;margin-top:5px;font-size:11px;font-weight:500;line-height:1.3}
#modal .order-preparation-dialog .prep-item-buttons{gap:7px}
#modal .order-preparation-dialog #preparation-products .preparation-ready-button,
#modal .order-preparation-dialog #preparation-products .preparation-unit-button{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border-radius:10px;box-shadow:none}
#modal .order-preparation-dialog #preparation-products .preparation-unit-button{border:1px solid #e1e5eb;background:#fff;color:#7a8797}
#modal .order-preparation-dialog #preparation-products .preparation-ready-button{border:1px solid #cde3d5;background:#f2faf5;color:#23804c}
#modal .order-preparation-dialog #preparation-products .preparation-ready-button:hover{border-color:#81bb96;background:#eaf7ef}
#modal .order-preparation-dialog #preparation-products .is-prepared .preparation-ready-button:disabled{opacity:1;background:#23804c;border-color:#23804c;color:#fff}
#modal .order-preparation-dialog .prep-item-buttons button::before{display:none!important}
#modal .order-preparation-dialog .prep-item-buttons button[hidden]{display:none!important}
#modal .order-preparation-dialog .prep-item-buttons svg{width:19px;height:19px;display:block}
@media(max-width:600px){
  #modal .order-preparation-dialog #preparation-products .preparation-item{grid-template-columns:46px minmax(0,1fr) auto;gap:9px}
  #modal .order-preparation-dialog .prep-item-side{grid-column:auto}
  #modal .order-preparation-dialog .prep-item-media{width:46px;height:54px}
}

/* Label visibility is explicit and independent of the student-card print view. */
@media print{
  #staff-bag-label,#staff-bag-label *{visibility:visible!important}
  #staff-bag-label{position:static!important;page:staff-bag-label}
}

/* Give the order identity and delivery details a little room to breathe. */
#modal .order-preparation-dialog .prep-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;padding:18px 20px;margin-bottom:16px}
#modal .order-preparation-dialog .prep-hero-main,#modal .order-preparation-dialog .prep-hero-time{gap:8px}
#modal .order-preparation-dialog .prep-hero-main>strong{line-height:1.4}
#modal .order-preparation-dialog .prep-hero-time>span,#modal .order-preparation-dialog .prep-hero-time>strong{line-height:1.45}
#modal .order-preparation-dialog .prep-hero-time em{margin-top:2px}
@media(max-width:600px){
  #modal .order-preparation-dialog .prep-hero{column-gap:18px;padding:16px}
  #modal .order-preparation-dialog .prep-hero-time>strong{font-size:11px}
}

/* Shared order cards: one reading order and restrained action colors. */
.staff-order-fold-meta-time::before{content:' · '}
.staff-order-action-mobile{display:none}
@media screen{
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-list{gap:12px}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold{background:#fff;border:1px solid #d5dce5;border-radius:13px;box-shadow:none}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold.queue-late{border-left:1px solid #d5dce5}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) 112px 16px;grid-template-areas:"name status chevron" "preview action action" "total action action";align-items:center;gap:8px 10px;padding:14px}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary:hover{background:#fff!important}
  .app-shell.compact-shell #content .staff-order-fold-main{display:contents}
  .app-shell.compact-shell #content .staff-order-fold-main>strong{grid-area:name;font-size:14px;line-height:1.4}
  .app-shell.compact-shell #content .staff-order-fold-main>small{grid-area:meta;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;color:#758193;font-size:10px;line-height:1.4;white-space:normal}
  .staff-order-fold-meta-reference,.staff-order-fold-meta-time{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .staff-order-fold-meta-time::before{content:none}
  .app-shell.compact-shell #content .staff-order-fold-preview{align-self:start;padding-top:0;border:0;gap:3px}
  .app-shell.compact-shell #content .staff-order-fold-preview small{color:#8290a0;font-size:10px;font-weight:500}
  .app-shell.compact-shell #content .staff-order-fold-preview>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;color:#526176;font-size:11px;line-height:1.5}
  .app-shell.compact-shell #content .staff-order-fold-total{align-self:end;color:#263348;font-size:14px;line-height:1.4}
  .app-shell.compact-shell #content .staff-order-fold-shortcuts{align-self:center;display:flex;flex-direction:column;align-items:stretch;justify-content:center;flex-wrap:nowrap;gap:6px;width:112px}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-action{width:100%;min-height:36px;padding:7px 10px;border:1px solid #d5dce5;background:#fff;color:#394b62;font-size:12px;font-weight:600;box-shadow:none}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-action:hover{background:#e8edf3;border-color:#bdc8d5;color:#263348}
  .app-shell.compact-shell #content .staff-order-fold-cancel{width:100%;min-height:30px;padding:5px 8px;border-color:#dce2e9;background:#f8f9fb;color:#6a788b;font-size:11px;font-weight:500}
  .app-shell.compact-shell #content .staff-order-fold-status{padding:5px 8px;font-size:10px;font-weight:600;background:#e4e8ed;color:#526176}
  .app-shell.compact-shell #content .staff-order-fold:has(.status-preparing)>summary .staff-order-fold-status{background:#fff2cf;color:#896219}
  .app-shell.compact-shell #content .staff-order-fold:has(.status-ready)>summary .staff-order-fold-status{background:#e1f1e7;color:#227148}
  .app-shell.compact-shell #content .staff-order-fold:has(.status-waiting)>summary .staff-order-fold-action{border-color:#edc2c9;background:#fff8f9;color:#b92f46}
  .app-shell.compact-shell #content .staff-order-fold:has(.status-ready)>summary .staff-order-fold-action{border-color:#bbd9c7;background:#edf7f1;color:#227148}
  .app-shell.compact-shell #content .staff-order-fold-chevron{color:#8b97a6}
  .staff-order-action-full{display:none}
  .staff-order-action-mobile{display:inline}
}

/* The shared canvas is gray; order cards and other content surfaces are white. */
.app-shell.compact-shell,.app-shell.compact-shell .work,
.app-shell.compact-shell #content,
.app-shell.compact-shell #content:has(>.staff-order-list){background:var(--ui-bg,#eef0f3)!important}
.app-shell.compact-shell #content .staff-order-filters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px;padding:0;overflow:visible}
.app-shell.compact-shell #content .staff-order-filters button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-width:0;min-height:36px;padding:7px 10px;border:1px solid #d9dfe7;border-radius:9px;background:#fff;color:#5c697b;font-size:11px;box-shadow:none;white-space:nowrap}
.app-shell.compact-shell #content .staff-order-filters button strong{font-size:11px;font-weight:500}
.app-shell.compact-shell #content .staff-order-filters button span{display:inline-grid;place-items:center;min-width:19px;padding:2px 5px;border-radius:5px;background:#eef1f5;color:#5c697b;font-size:10px;font-weight:600;line-height:1.2}
.app-shell.compact-shell #content .staff-order-filters button[aria-pressed=true]{border-color:#efbdc6;background:#fff1f3;color:#bb2d46}
.app-shell.compact-shell #content .staff-order-filters button[aria-pressed=true] span{background:#ffe0e5;color:#bb2d46}
.app-shell.compact-shell #content .staff-order-filters button:hover{border-color:#bfc9d6;background:#f8f9fb}
.app-shell.compact-shell #content .staff-order-filters button:focus-visible{outline:2px solid #d95c70;outline-offset:2px}


/* Keep the filter popup inside the application viewport, including device previews. */
.staff-order-filter-dropdown{display:none}
@media screen{
  .app-shell.compact-shell #content .staff-order-filters{display:none}
  .app-shell.compact-shell #content .staff-order-filter-dropdown{display:block;position:relative;margin:0 0 16px;padding:0;overflow:visible;min-width:0}
  .app-shell.compact-shell #content .staff-order-filter-trigger{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 14px;border:1px solid #d5dce5;border-radius:11px;background:#fff;color:#394b62;font-size:12px;font-weight:500;line-height:1.5;text-align:left;box-shadow:none}
  .app-shell.compact-shell #content .staff-order-filter-trigger::before{display:none!important}
  .app-shell.compact-shell #content .staff-order-filter-dropdown button>span{padding:0;border-radius:0;background:transparent;color:inherit;font-size:inherit;line-height:inherit}
  .app-shell.compact-shell #content .staff-order-filter-trigger svg{flex:none;width:19px;height:19px;color:#8692a2;pointer-events:none}
  .app-shell.compact-shell #content .staff-order-filter-chevron{margin-left:auto}
  .app-shell.compact-shell #content .staff-order-filter-trigger[aria-expanded=true]{border-color:#e7a8b4}
  .app-shell.compact-shell #content #staff-order-filter-options{position:absolute;inset:calc(100% + 6px) 0 auto;z-index:15;box-sizing:border-box;width:100%;max-width:100%;max-height:240px;overflow-y:auto;overscroll-behavior:contain;padding:5px;border:1px solid #d9dfe7;border-radius:11px;background:#fff;box-shadow:0 8px 22px #2633481a;scrollbar-width:thin}
  .app-shell.compact-shell #content #staff-order-filter-options[hidden]{display:none!important}
  .app-shell.compact-shell #content .staff-order-filter-dropdown.opens-up #staff-order-filter-options{inset:auto 0 calc(100% + 6px)}
  .app-shell.compact-shell #content #staff-order-filter-options button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:9px 11px;border:0;border-radius:7px;background:#fff;color:#526176;font-size:12px;font-weight:500;text-align:left;box-shadow:none}
  .app-shell.compact-shell #content #staff-order-filter-options button::before{display:none!important}
  .app-shell.compact-shell #content #staff-order-filter-options button[aria-selected=true]{background:#fff1f3;color:#bb2d46}
  .app-shell.compact-shell #content #staff-order-filter-options button:hover{background:#f2f4f7}
  .app-shell.compact-shell #content #staff-order-filter-options button small{flex:none;min-width:21px;padding:2px 5px;border-radius:5px;background:#eef1f5;color:#758193;font-size:10px;line-height:1.3;text-align:center}
  .app-shell.compact-shell #content :is(.staff-order-filter-trigger,#staff-order-filter-options button):focus-visible{outline:2px solid #d95c70;outline-offset:-2px}
}

/* The filter expands in normal flow, keeping the order cards below it. */
.staff-open-order-count{display:flex;align-items:baseline;gap:5px;margin:0 0 10px;color:#526176;font-size:13px;font-weight:500;line-height:1.5}
.staff-open-order-count strong{color:#263348;font-size:15px;font-weight:650}
@media screen{
  .app-shell.compact-shell #content #staff-order-filter-options{position:static;inset:auto;z-index:auto;margin:6px 0 0;max-height:240px;box-shadow:none;border-color:#d5dce5}
  .app-shell.compact-shell #content .staff-order-filter-trigger,
  .app-shell.compact-shell #content #staff-order-filter-options button{color:#263348;font-weight:550}
  .app-shell.compact-shell #content #staff-order-filter-options button small{color:#526176}
  .app-shell.compact-shell #content:has(>.staff-order-list) .pickup-queue{padding:0!important;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;margin:0 0 12px}
  .app-shell.compact-shell #content .pickup-queue-intro{display:none}
  .app-shell.compact-shell #content #pickup-queue-form{display:block;width:100%}
  .app-shell.compact-shell #content #pickup-queue-form>button{display:none}
  .app-shell.compact-shell #content:has(>.staff-order-list) #pickup-queue-input{display:block;width:100%;min-height:44px;padding:10px 14px 10px 42px;border:1px solid #edbdc5;border-radius:11px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238692a2' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") no-repeat 14px center/18px;color:#263348;font-size:12px;font-weight:400;line-height:1.5;box-sizing:border-box}
  .app-shell.compact-shell #content #pickup-queue-input::placeholder{color:#8692a2}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary{grid-template-areas:"name status chevron" "preview preview preview" "total action action";gap:8px 10px;padding:14px}
  .app-shell.compact-shell #content .staff-order-fold-main>small{color:#718094;font-weight:400}
  .app-shell.compact-shell #content .staff-order-fold-preview{padding:10px 0;border-top:1px solid #e9edf2;border-bottom:1px solid #e9edf2;gap:0}
  .app-shell.compact-shell #content .staff-order-fold-preview small{display:none}
  .app-shell.compact-shell #content .staff-order-fold-preview>span{color:#394b62;font-size:12px;font-weight:500;line-height:1.5}
  .app-shell.compact-shell #content .staff-order-fold-total{align-self:center;font-size:15px;line-height:1.4}
  .app-shell.compact-shell #content .staff-order-fold-shortcuts{flex-direction:row;align-items:center;justify-content:flex-end;width:auto;gap:6px}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-action{width:auto;min-width:76px;min-height:34px;padding:7px 8px;font-size:11px;font-weight:600}
  .app-shell.compact-shell #content .staff-order-fold-cancel{width:auto;min-width:56px;min-height:34px;padding:7px 8px;font-size:11px;font-weight:500}
  .app-shell.compact-shell #content .staff-order-list{gap:12px}
}


/* One common column for the page heading, search, filter and order cards. */
@media screen{
  .app-shell.compact-shell #content:has(>.staff-order-list){padding:0!important;border:0!important;border-radius:0!important}
  .app-shell.compact-shell .work:has(#content>.staff-order-list) .topbar.app-header{width:100%;max-width:100%;margin-inline:0;padding-inline:0;box-sizing:border-box}
  .app-shell.compact-shell #content .staff-order-fold-preview{grid-area:preview}
  .app-shell.compact-shell #content .staff-order-fold-status{grid-area:status;justify-self:end}
  .app-shell.compact-shell #content .staff-order-fold-total{grid-area:total;justify-self:start}
  .app-shell.compact-shell #content .staff-order-fold-shortcuts{grid-area:action;justify-self:end}
  .app-shell.compact-shell #content .staff-order-fold-chevron{grid-area:chevron}
}
@media screen and (min-width:601px){
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) 140px 18px;gap:10px 14px;padding:16px 18px;min-height:0}
  .app-shell.compact-shell #content .staff-order-fold-main>strong{font-size:16px}
  .app-shell.compact-shell #content .staff-order-fold-main>small{font-size:12px}
  .app-shell.compact-shell #content .staff-order-fold-preview>span{font-size:13px}
  .app-shell.compact-shell #content .staff-order-fold-status{font-size:11px}
  .app-shell.compact-shell #content .staff-order-fold-total{font-size:17px;color:#111}
  .app-shell.compact-shell #content .staff-order-fold:has(.status-waiting)>summary .staff-order-fold-status{color:#111}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-action,
  .app-shell.compact-shell #content .staff-order-fold-cancel{font-size:12px;min-height:36px;padding:8px 14px}
  .app-shell.compact-shell #content .staff-order-filter-trigger,
  .app-shell.compact-shell #content #staff-order-filter-options button,
  .app-shell.compact-shell #content:has(>.staff-order-list) #pickup-queue-input{font-size:14px}
}


/* Keep the order code beside its status, within the existing heading row. */
@media screen{
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) auto 16px}
  .app-shell.compact-shell #content .staff-order-fold-status-group{grid-area:status;justify-self:end;display:flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
  .app-shell.compact-shell #content .staff-order-fold-code{font:500 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#657184}
}
@media screen and (min-width:601px){
  .app-shell.compact-shell #content .staff-order-fold-code{font-size:12px}
}


/* Minimal order summaries; the expanded section uses one consistent set of rows. */
@media screen{
  .app-shell.compact-shell #content .staff-order-fold-total-block{grid-area:total;display:grid;justify-self:start;align-self:center;gap:3px;min-width:0}
  .app-shell.compact-shell #content .staff-order-fold-total-block>.staff-order-fold-total{grid-area:auto}
  .app-shell.compact-shell #content .staff-order-payment-hint{font-size:10px;font-weight:500;line-height:1.4;color:#946514}
  .app-shell.compact-shell #content .staff-order-fold-detail{padding:0 14px 14px;border-top:0}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-detail .staff-order-card.order-queue-row{gap:0!important}
  .app-shell.compact-shell #content .staff-order-fold-products{padding:14px 0;border-top:1px solid #e9edf2}
  .app-shell.compact-shell #content .staff-order-fold-products h4{font-size:12px;font-weight:600;margin:0 0 8px;color:#263348}
  .app-shell.compact-shell #content .staff-order-fold-products .staff-order-line{grid-template-columns:38px minmax(0,1fr) auto;gap:10px;padding:10px 0;border-bottom:1px solid #eef0f3}
  .app-shell.compact-shell #content .staff-order-fold-products .staff-order-line:last-child{border-bottom:0;padding-bottom:0}
  .app-shell.compact-shell #content .staff-order-fold-products .staff-order-line img,
  .app-shell.compact-shell #content .staff-order-fold-products .staff-order-placeholder{width:38px;height:42px;background:#f8f9fb;border-radius:7px;object-fit:contain}
  .app-shell.compact-shell #content .staff-order-fold-products .staff-order-placeholder{display:grid;place-items:center;font-size:12px;color:#718094}
  .app-shell.compact-shell #content .staff-order-fold-products .staff-order-line strong{font-size:12px;line-height:1.5;font-weight:550;overflow-wrap:anywhere}
  .app-shell.compact-shell #content .staff-order-fold-products .staff-order-line small{font-size:11px;font-weight:400;line-height:1.5;margin-top:2px}
  .app-shell.compact-shell #content .staff-order-fold-products .staff-order-line>b{font-size:12px;font-weight:600;align-self:center}
  .app-shell.compact-shell #content .staff-order-detail-info{margin:0;border-top:1px solid #e9edf2}
  .app-shell.compact-shell #content .staff-order-detail-info>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid #e9edf2}
  .app-shell.compact-shell #content .staff-order-detail-info dt{color:#718094;font-size:11px;font-weight:400;line-height:1.5}
  .app-shell.compact-shell #content .staff-order-detail-info dd{margin:0;color:#263348;text-align:right;font-size:12px;font-weight:500;line-height:1.5;overflow-wrap:anywhere}
  .app-shell.compact-shell #content .staff-order-detail-info dd small{display:block;margin-top:2px;font-size:10px;font-weight:500}
  .app-shell.compact-shell #content .staff-order-detail-late{color:#b92f46}
  .app-shell.compact-shell #content .staff-order-detail-soon{color:#946514}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-detail .order-queue-note{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid #e9edf2;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
  .app-shell.compact-shell #content .staff-order-fold-detail .order-queue-note>strong{font-weight:400;color:#718094;font-size:11px}
  .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold-detail .order-queue-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:0;padding-top:14px}
  .app-shell.compact-shell #content .staff-order-fold-detail .order-queue-actions>button{min-height:34px;padding:7px 12px;border:1px solid #dce2e9;border-radius:8px;background:#fff;color:#526176;font-size:11px;font-weight:500;box-shadow:none}
  .app-shell.compact-shell #content .staff-order-fold-detail .order-queue-actions>.order-queue-cancel{color:#a34755;border-color:#e8d9dc}
  .app-shell.compact-shell #content .staff-order-fold-detail .order-queue-actions>button:hover{background:#f8f9fb}
  .app-shell.compact-shell #content .staff-order-fold-detail .order-queue-pending{margin-top:12px}
}
@media screen and (min-width:601px){
  .app-shell.compact-shell #content .staff-order-fold-detail{padding:0 18px 18px}
  .app-shell.compact-shell #content .staff-order-detail-info dt,
  .app-shell.compact-shell #content .staff-order-fold-detail .order-queue-actions>button{font-size:12px}
  .app-shell.compact-shell #content .staff-order-detail-info dd,
  .app-shell.compact-shell #content .staff-order-fold-products .staff-order-line strong{font-size:13px}
}


/* Desktop filters stay visible; narrow screens keep the expanding picker. */
@media screen and (min-width:901px){
  .app-shell.compact-shell #content .staff-order-filter-dropdown{display:none}
  .app-shell.compact-shell #content .staff-order-filters{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;width:100%;margin:0 0 16px}
  .app-shell.compact-shell #content .staff-order-filters button{flex:1 0 auto;min-height:42px;padding:10px 12px;color:#263348;font-size:12px}
  .app-shell.compact-shell #content .staff-order-filters button strong{font-size:12px;font-weight:550}
  .app-shell.compact-shell #content .staff-order-filters button[aria-pressed=true]{color:#bb2d46}
}


/* Slightly smaller student names retain the existing row alignment. */
@media screen{
  .app-shell.compact-shell #content .staff-order-fold-main>strong{font-size:13px}
}
@media screen and (min-width:601px){
  .app-shell.compact-shell #content .staff-order-fold-main>strong{font-size:14px}
}


/* Stock opens directly with its tabs and search, without redundant action rows. */
@media screen{
  .app-shell.compact-shell[data-workspace-page="products"] #content>.management-context,
  .app-shell.compact-shell[data-workspace-page="products"] #content>.heading,
  .app-shell.compact-shell[data-workspace-page="products"] .management-workspace-tabs>[data-page="content-manager"]{display:none!important}
  .app-shell.compact-shell[data-workspace-page="products"] #content{padding:0!important;border:0!important;border-radius:0!important}
  .app-shell.compact-shell[data-workspace-page="products"] .management-workspace-tabs{margin:0 0 12px!important;padding-top:0!important}
  .app-shell.compact-shell[data-workspace-page="products"] .stock-search{width:100%;max-width:none;margin:0 0 12px!important}
  .app-shell.compact-shell[data-workspace-page="products"] #stock-search{width:100%;box-sizing:border-box}
}


/* Stock views share a compact toolbar and accessible icon-only row actions. */
@media screen{
  .app-shell.compact-shell[data-workspace-page="products"] #content [hidden]{display:none!important}
  .app-shell.compact-shell #content .staff-stock-tabs{align-items:center;gap:5px;overflow:visible;flex-wrap:wrap}
  .app-shell.compact-shell #content .staff-stock-tabs .staff-stock-add-button{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 12px;border:1px solid #edbdc5;border-radius:9px;background:#fff8f9;color:#b92f46;font-size:12px;font-weight:550}
  .app-shell.compact-shell #content .staff-stock-tabs .staff-stock-add-button::before{display:none!important}
  .app-shell.compact-shell #content .staff-stock-add-button svg{width:17px;height:17px;flex:none}
  .app-shell.compact-shell #content .staff-stock-tabs .staff-stock-add-button:hover{background:#fff1f3;border-color:#dc9daa}
  .app-shell.compact-shell #content .stock-row-actions{flex-direction:row;flex-wrap:nowrap;gap:6px}
  .app-shell.compact-shell #content .stock-row-actions .staff-stock-icon-action{display:inline-grid;place-items:center;width:34px;height:34px;min-width:34px;min-height:34px;flex:0 0 34px;padding:0;border:1px solid #dce2e9;border-radius:8px;background:#fff;color:#526176;box-shadow:none}
  .app-shell.compact-shell #content .stock-row-actions .staff-stock-icon-action::before{display:none!important}
  .app-shell.compact-shell #content .stock-row-actions .staff-stock-icon-action[data-stock-archive]{color:#b54c5b;border-color:#e8d9dc}
  .app-shell.compact-shell #content .stock-row-actions .staff-stock-icon-action svg{width:17px;height:17px}
  .app-shell.compact-shell #content .stock-row-actions .staff-stock-icon-action:hover{background:#f6f8fa}
  .app-shell.compact-shell #content .stock-row-actions .staff-stock-icon-action:focus-visible{outline:2px solid #d95c70;outline-offset:2px}
  .app-shell.compact-shell #content .stock-buy{margin-top:0}
}
@media screen and (min-width:851px){
  .app-shell.compact-shell .stock-table th:first-child{width:auto}
  .app-shell.compact-shell .stock-table th:nth-child(2),
  .app-shell.compact-shell .stock-table th:nth-child(3),
  .app-shell.compact-shell .stock-table th:nth-child(4){width:11%}
  .app-shell.compact-shell .stock-table th:nth-child(5){width:16%}
  .app-shell.compact-shell .stock-table th:last-child{width:100px}
}
@media screen and (max-width:600px){
  .app-shell.compact-shell #content .staff-stock-tabs{gap:3px}
  .app-shell.compact-shell #content .staff-stock-tabs>button{font-size:11px;padding:9px 6px}
  .app-shell.compact-shell #content .staff-stock-tabs .staff-stock-add-button{font-size:11px;padding:7px 8px;gap:4px}
}
@media screen and (max-width:360px){
  .app-shell.compact-shell #content .staff-stock-tabs .staff-stock-add-button{width:34px;height:34px;padding:0}
  .app-shell.compact-shell #content .staff-stock-add-button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}


/* On mobile, status and row actions share one compact footer. */
@media screen and (max-width:850px){
  .app-shell.compact-shell #content .stock-table td:nth-child(5){grid-column:1;grid-row:3;border-bottom:0;min-width:0}
  .app-shell.compact-shell #content .stock-table td:last-child:not([colspan]){grid-column:2/-1;grid-row:3;border-bottom:0;align-self:center}
  .app-shell.compact-shell #content .stock-row-actions{justify-content:flex-end}
}


/* Canteen categories and filters share the desktop pill style at every width. */
@media screen {
  .app-shell.compact-shell #content .staff-order-filter-dropdown{display:none}
  .app-shell.compact-shell #content :is(.staff-order-filters,.management-workspace-tabs,.app-categories,.staff-break-tabs){display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;padding:2px 0;border:0;background:transparent;box-shadow:none;box-sizing:border-box}
  .app-shell.compact-shell #content .staff-order-filters{width:100%;margin:0 0 16px;flex-wrap:wrap;overflow:visible}
  .app-shell.compact-shell #content .management-workspace-tabs{flex-wrap:wrap}
  .app-shell.compact-shell #content :is(.staff-order-filters,.management-workspace-tabs,.app-categories,.staff-break-tabs)>button:not(.staff-stock-add-button){display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-width:0;min-height:42px;padding:10px 12px;border:1px solid #d9dfe7!important;border-radius:14px!important;background:#fff!important;color:#263348!important;font-size:12px;font-weight:550;line-height:1.5;white-space:nowrap;box-shadow:none!important;transform:none!important}
  .app-shell.compact-shell #content .staff-order-filters>button{flex:1 0 auto}
  .app-shell.compact-shell #content .staff-order-filters>button strong{font-size:inherit;font-weight:inherit}
  .app-shell.compact-shell #content :is(.staff-order-filters,.management-workspace-tabs,.app-categories,.staff-break-tabs)>button:not(.staff-stock-add-button)::before{display:none!important}
  .app-shell.compact-shell #content :is(.staff-order-filters,.management-workspace-tabs,.app-categories,.staff-break-tabs)>button:not(.staff-stock-add-button):hover{border-color:#bfc9d6!important;background:#f8f9fb!important;color:#263348!important}
  .app-shell.compact-shell #content :is(.staff-order-filters,.management-workspace-tabs,.app-categories,.staff-break-tabs)>button:not(.staff-stock-add-button):is([aria-pressed=true],[aria-current=page],.active){border-color:#efbdc6!important;background:#fff1f3!important;color:#bb2d46!important}
  .app-shell.compact-shell #content :is(.staff-order-filters,.management-workspace-tabs,.app-categories,.staff-break-tabs)>button:focus-visible{outline:2px solid #d95c70;outline-offset:-2px}
  .app-shell.compact-shell #content .staff-order-filters>button span{background:#eef1f5;color:#5c697b}
  .app-shell.compact-shell #content .staff-order-filters>button[aria-pressed=true] span{background:#ffe0e5;color:#bb2d46}
}
@media screen and (max-width:900px) {
  .app-shell.compact-shell #content :is(.staff-order-filters,.app-categories,.staff-break-tabs){flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#cbd2dc transparent}
  .app-shell.compact-shell #content .staff-order-filters>button{flex:0 0 auto}
}
@media screen and (max-width:600px) {
  .app-shell.compact-shell #content .staff-stock-tabs{gap:5px}
  .app-shell.compact-shell #content .staff-stock-tabs>button:not(.staff-stock-add-button){padding:10px 8px}
}


/* The checkout button is the single total in the canteen payment panel. */
.app-shell.compact-shell #cart .cart-total{display:none!important}


/* Keep the stock creation action distinct from the view filters. */
@media screen {
  .app-shell.compact-shell #content .staff-stock-tabs .staff-stock-add-button{min-height:42px;padding:10px 14px;border:1px solid #e91b35;border-radius:14px;background:#e91b35;color:#fff;font-size:12px;font-weight:600;box-shadow:0 3px 8px #e91b351a}
  .app-shell.compact-shell #content .staff-stock-tabs .staff-stock-add-button:hover{background:#cf1730;border-color:#cf1730;color:#fff}
  .app-shell.compact-shell #content .staff-stock-tabs .staff-stock-add-button:focus-visible{outline:2px solid #b82b40;outline-offset:2px}
  .app-shell.compact-shell #content .staff-stock-tabs .staff-stock-add-button svg{width:18px;height:18px}
  .app-shell.compact-shell #content .staff-stock-add-button>span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:nowrap}
}
@media screen and (max-width:600px) {
  .app-shell.compact-shell #content .staff-stock-tabs .staff-stock-add-button{width:auto;height:auto;padding:10px 12px}
}


/* Product creation belongs beside the stock page title, outside the filters. */
@media screen {
  .app-shell.compact-shell .app-header-actions .staff-stock-header-action{display:none}
  .app-shell.compact-shell[data-workspace-page="products"] .app-header-actions .staff-stock-header-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:42px;padding:10px 14px;border:1px solid #e91b35;border-radius:14px;background:#e91b35;color:#fff;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;box-shadow:0 3px 8px #e91b351a}
  .app-shell.compact-shell .app-header-actions .staff-stock-header-action::before{display:none!important}
  .app-shell.compact-shell[data-workspace-page="products"] .app-header-actions .staff-stock-header-action:hover{background:#cf1730;border-color:#cf1730;color:#fff}
  .app-shell.compact-shell .app-header-actions .staff-stock-header-action:focus-visible{outline:2px solid #b82b40;outline-offset:2px}
  .app-shell.compact-shell .app-header-actions .staff-stock-header-action svg{width:18px;height:18px;flex:none}
  .app-shell.compact-shell .app-header-actions .staff-stock-header-action>span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:nowrap}
}
@media screen and (max-width:600px) {
  .app-shell.compact-shell[data-workspace-page="products"] .app-header-actions .staff-stock-header-action{min-height:38px;padding:8px 10px;font-size:11px}
  .app-shell.compact-shell[data-workspace-page="products"] .app-header-actions{gap:6px}
}

/* Keep the stock title and its actions in one aligned mobile row. */
@media screen and (max-width:600px) {
  .app-shell.compact-shell[data-workspace-page="products"] .topbar.app-header{padding-inline:0;flex-wrap:nowrap;gap:8px}
  .app-shell.compact-shell[data-workspace-page="products"] .app-header-title{gap:6px}
  .app-shell.compact-shell[data-workspace-page="products"] .app-mobile-mark{width:32px;height:32px;flex:0 0 32px}
  .app-shell.compact-shell[data-workspace-page="products"] .app-header-actions{flex-wrap:nowrap;gap:5px}
  .app-shell.compact-shell[data-workspace-page="products"] .app-header-actions .ui-icon-button{width:34px;height:34px;min-width:34px;padding:0}
  .app-shell.compact-shell[data-workspace-page="products"] .app-header-actions .staff-stock-header-action{padding:8px;gap:4px}
}


/* Three simple stock actions sit in their own row above the view filters. */
@media screen {
  .app-shell.compact-shell #content .staff-stock-quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}
  .app-shell.compact-shell #content .staff-stock-quick-actions .staff-stock-action-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:96px;padding:16px 10px;border:1px solid #dde2e9;border-radius:16px;background:#fff;color:#263348;box-shadow:none;text-align:center}
  .app-shell.compact-shell #content .staff-stock-action-card::before{display:none!important}
  .app-shell.compact-shell #content .staff-stock-action-card strong{font-size:13px;font-weight:550;line-height:1.4}
  .app-shell.compact-shell #content .staff-stock-action-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#fff1f3;color:#d12c46}
  .app-shell.compact-shell #content .staff-stock-action-icon svg{width:21px;height:21px}
  .app-shell.compact-shell #content .staff-stock-quick-actions .staff-stock-action-card:hover{background:#fafbfc;border-color:#bac5d3;box-shadow:none;transform:none}
  .app-shell.compact-shell #content .staff-stock-action-card:focus-visible{outline:2px solid #d95c70;outline-offset:2px}
  .staff-stock-product-picker{display:grid;gap:12px}
  #staff-stock-action-search{width:100%;min-height:44px;border:1px solid #edbdc5;border-radius:12px;background:#fff;padding:11px 14px;font-size:14px}
  .staff-stock-picker-results{display:grid;max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain}
  .staff-stock-picker-results>button{display:grid;grid-template-columns:38px minmax(0,1fr) 16px;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 4px;border:0;border-bottom:1px solid #e9edf2;border-radius:0;background:#fff;color:#263348;text-align:left;box-shadow:none}
  .staff-stock-picker-results>button::before{display:none!important}
  .staff-stock-picker-results>button:hover{background:#f8f9fb}
  .staff-stock-picker-results>button:focus-visible{outline:2px solid #d95c70;outline-offset:-2px}
  .staff-stock-picker-results img,.staff-stock-picker-placeholder{width:38px;height:42px;object-fit:contain;border-radius:7px;background:#f8f9fb}
  .staff-stock-picker-placeholder{display:grid;place-items:center;color:#8996a8}
  .staff-stock-picker-placeholder svg{width:22px;height:22px}
  .staff-stock-picker-results>button>span{min-width:0}
  .staff-stock-picker-results strong{display:block;font-size:13px;font-weight:550;line-height:1.5;overflow-wrap:anywhere}
  .staff-stock-picker-results small{display:block;margin-top:3px;font-size:11px;color:#718094}
  .staff-stock-picker-results>button>svg{width:16px;height:16px;color:#8996a8}
  .staff-product-dialog>[hidden]{display:none!important}
}
@media screen and (max-width:600px) {
  .app-shell.compact-shell #content .staff-stock-quick-actions{gap:8px;margin-bottom:14px}
  .app-shell.compact-shell #content .staff-stock-quick-actions .staff-stock-action-card{min-height:88px;padding:12px 5px;gap:8px;border-radius:14px}
  .app-shell.compact-shell #content .staff-stock-action-card strong{font-size:11px}
}


/* Stock view selectors use the same icon-card layout as the action row. */
@media screen {
  .app-shell.compact-shell #content .management-workspace-tabs.staff-stock-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0!important;margin:0 0 16px!important;border:0}
  .app-shell.compact-shell #content .management-workspace-tabs.staff-stock-tabs>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:96px;padding:16px 10px;border-radius:16px!important;white-space:normal;text-align:center}
  .app-shell.compact-shell #content .management-workspace-tabs.staff-stock-tabs>button strong{font-size:13px;font-weight:550;line-height:1.4}
  .app-shell.compact-shell #content .staff-stock-view-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#fff1f3;color:#d12c46}
  .app-shell.compact-shell #content .staff-stock-view-icon svg{width:21px;height:21px}
  .app-shell.compact-shell #content .staff-stock-tabs>button[aria-current=page] .staff-stock-view-icon{background:#ffe3e9;color:#d12c46}
}
@media screen and (max-width:600px) {
  .app-shell.compact-shell #content .management-workspace-tabs.staff-stock-tabs{gap:8px;margin-bottom:14px!important}
  .app-shell.compact-shell #content .management-workspace-tabs.staff-stock-tabs>button{min-height:88px;padding:12px 5px;gap:8px;border-radius:14px!important}
  .app-shell.compact-shell #content .management-workspace-tabs.staff-stock-tabs>button strong{font-size:11px}
}

/* Editing a product reuses its photo instead of requesting another upload. */
#modal .staff-product-dropzone[hidden],#modal .staff-product-photo-ready[hidden],#modal .staff-product-photo-change[hidden]{display:none!important}
#modal .staff-product-photo-ready{display:grid;gap:4px;margin-bottom:8px}
#modal .staff-product-photo-ready strong{font-size:13px;font-weight:550;color:#263348}
#modal .staff-product-photo-ready small{font-size:11px;color:#718094;line-height:1.5}
#modal .staff-product-photo-change{min-height:34px;padding:7px 10px;border:1px solid #dce2e9;border-radius:9px;background:#fff;color:#526176;font-size:12px;font-weight:500;box-shadow:none}
#modal .staff-product-photo-change:hover{background:#f8f9fb}

/* Shared management tabs use the same cards throughout their workspace. */
@media screen {
.app-shell.compact-shell #content .management-workspace-tabs.staff-management-tabs{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}
@media screen and (max-width:600px) {
.app-shell.compact-shell #content .management-workspace-tabs.staff-management-tabs{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
}

/* Student search and filters keep one clear, responsive row. */
.app-shell.compact-shell #content .student-filter-bar{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:10px;align-items:center;margin-bottom:12px}
.app-shell.compact-shell #content .student-filter-bar :is(input,select){width:100%;min-width:0;min-height:44px;margin:0;padding:10px 13px;border:1px solid #dce2eb;border-radius:12px;background-color:#fff;color:#263348;font-size:13px;box-sizing:border-box}
.app-shell.compact-shell #content .student-filter-bar input{border-color:#edbdc5}
.app-shell.compact-shell #content .student-filter-bar input::placeholder{color:#8290a2}
.app-shell.compact-shell #content .student-filter-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;margin:0 0 12px;color:#526176;font-size:12px}
.app-shell.compact-shell #content #student-filter-clear{min-height:30px;margin:0;padding:5px 9px;border:0;background:transparent;color:#c6324b;font-size:12px;font-weight:500;box-shadow:none}
.app-shell.compact-shell #content #student-filter-clear[hidden]{display:none!important}
.app-shell.compact-shell #content #student-filter-clear:focus-visible{outline:2px solid #d95c70;outline-offset:2px}
@media(max-width:760px){
 .app-shell.compact-shell #content .student-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .app-shell.compact-shell #content .student-filter-bar input{grid-column:1/-1}
 .app-shell.compact-shell #content .student-filter-bar :is(input,select){font-size:12px;padding:10px;min-height:44px}
}

/* Sales search sits directly on the canvas; categories use the red accent. */
@media screen {
 .app-shell.compact-shell[data-workspace-page="pos"] #content .searchbar{padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important}
 .app-shell.compact-shell[data-workspace-page="pos"] #content #app-categories>button{border-color:#efc2c9!important;background:#fff!important;color:#526176!important;border-radius:18px!important}
 .app-shell.compact-shell[data-workspace-page="pos"] #content #app-categories>button:not(.active):hover{border-color:#df95a2!important;background:#fff!important;color:#526176!important}
 .app-shell.compact-shell[data-workspace-page="pos"] #content #app-categories>button:is(.active,[aria-pressed="true"]){border-color:#d95c70!important;background:#fff!important;color:#526176!important}
 .app-shell.compact-shell[data-workspace-page="pos"] #content .app-category-arrow:not(:disabled){border-color:#d9dfe7;background:#fff;color:#263348}
}

/* Product prices stay clear without overpowering the card title. */
.app-shell.compact-shell[data-workspace-page="pos"] #product-grid .product .price{font-weight:650;font-size:18px}

@media(max-width:850px){.app-shell.compact-shell[data-workspace-page="pos"] #product-grid .product .price{font-size:19px}}

/* The card itself adds the product; only a selected quantity needs a badge. */
.app-shell.compact-shell[data-workspace-page="pos"] #product-grid .product:not(.product-selected) .product-add-mark{display:none}

/* Softer order typography, red totals and clear preparation actions. */
@media screen {
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold{border-color:#dfe5ed;border-radius:18px;box-shadow:0 3px 10px #26334806}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{background:linear-gradient(90deg,#fff8f9,#fff 24%)}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>strong{color:#526176;font-weight:600}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview>span{color:#65758a;font-weight:450}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary .staff-order-fold-total{color:#d51e38;font-weight:650}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold:has(.status-waiting,.status-preparing)>summary .staff-order-fold-action{background:linear-gradient(135deg,#ed1b35,#d31530);border-color:#df1933;color:#fff;font-weight:550;border-radius:12px;box-shadow:0 3px 8px #df193318}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold:has(.status-waiting,.status-preparing)>summary .staff-order-fold-action:hover{background:#cf142e;border-color:#cf142e;color:#fff}
}

/* Shared heading and attention column follows each workspace's content inset. */
@media screen {
 .app-shell.compact-shell .work{--staff-content-inset:0px}
 .app-shell.compact-shell[data-workspace-page="students"] .work,
 .app-shell.compact-shell[data-workspace-page="history"] .work:has(#content #sales-report-body),
 .app-shell.compact-shell[data-workspace-page="receiving"] .work:has(#content>.receive-upload),
 .app-shell.compact-shell[data-workspace-page="catalog"] .work:has(#content #catalog-results),
 .app-shell.compact-shell[data-workspace-page="family"] .work:has(#content>.meal-grid),
 .app-shell.compact-shell[data-workspace-page="settings"] .work:has(#content #settings-form){--staff-content-inset:17px}
 .app-shell.compact-shell .work .topbar.app-header,
 .app-shell.compact-shell .work #alert-slot{
  width:calc(100% - 2 * var(--staff-content-inset));
  max-width:none;
  margin-inline:auto;padding-inline:0;box-sizing:border-box;min-width:0;
 }
}
@media screen and (max-width:760px) {
 .app-shell.compact-shell[data-workspace-page="students"] .work,
 .app-shell.compact-shell[data-workspace-page="history"] .work:has(#content #sales-report-body),
 .app-shell.compact-shell[data-workspace-page="receiving"] .work:has(#content>.receive-upload),
 .app-shell.compact-shell[data-workspace-page="catalog"] .work:has(#content #catalog-results),
 .app-shell.compact-shell[data-workspace-page="family"] .work:has(#content>.meal-grid),
 .app-shell.compact-shell[data-workspace-page="settings"] .work:has(#content #settings-form){--staff-content-inset:11px}
}

/* Only the active stock section is filled with the shared brand red. */
@media screen {
 .app-shell.compact-shell #content :is(.staff-stock-quick-actions .staff-stock-action-card,.management-workspace-tabs.staff-stock-tabs:has(.staff-stock-view-icon)>button){background:#fff!important;border-color:#efc2c9!important;color:var(--ui-red,#ed2635)!important}
 .app-shell.compact-shell #content :is(.staff-stock-action-icon,.staff-stock-view-icon){background:#fff1f3;color:var(--ui-red,#ed2635)}
 .app-shell.compact-shell #content :is(.staff-stock-quick-actions .staff-stock-action-card,.management-workspace-tabs.staff-stock-tabs:has(.staff-stock-view-icon)>button):hover{background:#fff!important;border-color:var(--ui-red,#ed2635)!important;color:var(--ui-red,#ed2635)!important}
 .app-shell.compact-shell #content .management-workspace-tabs.staff-stock-tabs:has(.staff-stock-view-icon)>button[aria-current=page]{background:var(--ui-red,#ed2635)!important;border-color:var(--ui-red,#ed2635)!important;color:#fff!important;box-shadow:none!important}
 .app-shell.compact-shell #content .staff-stock-tabs>button[aria-current=page] .staff-stock-view-icon{background:#ffffff24;color:#fff}
 .app-shell.compact-shell #content :is(.staff-stock-quick-actions .staff-stock-action-card,.management-workspace-tabs.staff-stock-tabs:has(.staff-stock-view-icon)>button):focus-visible{outline:2px solid var(--ui-red,#ed2635);outline-offset:3px}
}

/* Six stock cards share one desktop row; mobile retains two rows of three. */
@media screen {
 .app-shell.compact-shell #content .staff-stock-controls{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:10px;min-width:0;margin-bottom:16px;overflow-x:auto;scrollbar-width:thin}
 .app-shell.compact-shell #content .staff-stock-controls>nav{min-width:0;margin:0!important;align-items:stretch!important;align-self:stretch}
 .app-shell.compact-shell #content .staff-stock-controls :is(.staff-stock-action-card,.staff-stock-tabs>button){height:114px!important;min-height:114px!important;padding-inline:6px}
}
@media screen and (max-width:850px) {
 .app-shell.compact-shell #content .staff-stock-controls{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:14px;overflow:visible}
 .app-shell.compact-shell #content .staff-stock-controls :is(.staff-stock-action-card,.staff-stock-tabs>button){height:96px!important;min-height:96px!important}
}
@media screen and (max-width:760px){.app-shell.compact-shell #content .staff-stock-controls :is(.staff-stock-action-card,.staff-stock-tabs>button){height:88px!important;min-height:88px!important}}

/* White stock cards with softly translucent black labels. */
@media screen {
 .app-shell.compact-shell #content .staff-stock-controls :is(.staff-stock-quick-actions .staff-stock-action-card,.management-workspace-tabs.staff-stock-tabs>button),
 .app-shell.compact-shell #content .staff-stock-controls :is(.staff-stock-quick-actions .staff-stock-action-card,.management-workspace-tabs.staff-stock-tabs>button):is([aria-current=page],[aria-pressed=true],:hover){background:#fff!important;border-color:#efc2c9!important;color:rgba(0,0,0,.70)!important;box-shadow:none!important}
 .app-shell.compact-shell #content .staff-stock-controls :is(.staff-stock-action-icon,.staff-stock-view-icon),
 .app-shell.compact-shell #content .staff-stock-controls .staff-stock-tabs>button[aria-current=page] .staff-stock-view-icon{background:rgba(0,0,0,.04);color:rgba(0,0,0,.70)}
}

/* The stock table is one card; vertical scrolling belongs to the workspace. */
@media screen{
 .app-shell.compact-shell #content .stock-table.staff-stock-products-panel{padding:0!important;max-height:none!important;overflow:visible!important}
}
@media screen and (min-width:761px){
 .app-shell.compact-shell #content .stock-table.staff-stock-products-panel{overflow:clip!important;border-radius:18px;background:#fff}
}

/* Red stock summaries sit above the full-width product/barcode search. */
@media screen{
 .app-shell.compact-shell #content .stock-metrics>div,
 .app-shell.compact-shell #content .stock-metrics>button{background:var(--ui-red,#ed2635)!important;border-color:var(--ui-red,#ed2635)!important;color:#fff!important}
 .app-shell.compact-shell #content .stock-metrics>div :is(small,strong),
 .app-shell.compact-shell #content .stock-metrics>button :is(small,strong){color:#fff!important}
 .app-shell.compact-shell #content .stock-metrics small{opacity:.85}
 .app-shell.compact-shell #content .stock-metrics>button.active{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)!important}
 .app-shell.compact-shell #content .stock-metrics>button:focus-visible{outline:2px solid rgba(0,0,0,.55);outline-offset:3px}
}

/* Small white icons identify each stock summary without adding action buttons. */
@media screen{
 .app-shell.compact-shell #content .stock-metrics>div,
 .app-shell.compact-shell #content .stock-metrics>button{position:relative;display:grid;align-content:start;justify-items:start;padding:20px;text-align:left}
 .app-shell.compact-shell #content .stock-metrics .staff-stock-metric-icon{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;pointer-events:none}
 .app-shell.compact-shell #content .stock-metrics .staff-stock-metric-icon svg{width:20px;height:20px}
 .app-shell.compact-shell #content .stock-metrics small{display:block;min-height:32px;padding-right:38px;box-sizing:border-box}
}
@media screen and (max-width:760px){
 .app-shell.compact-shell #content .stock-metrics>div,
 .app-shell.compact-shell #content .stock-metrics>button{padding:13px 10px}
}
@media screen and (max-width:600px){
 .app-shell.compact-shell #content .stock-metrics .staff-stock-metric-icon{position:static;width:26px;height:26px;margin-bottom:7px;border-radius:8px}
 .app-shell.compact-shell #content .stock-metrics .staff-stock-metric-icon svg{width:18px;height:18px}
 .app-shell.compact-shell #content .stock-metrics small{padding-right:0;min-height:30px}
}


/* Mobile stock cards combine product identity, status and actions in one header. */
@media screen and (max-width:850px){
 .app-shell.compact-shell #content .stock-table.staff-stock-products-panel{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
 .app-shell.compact-shell #content .stock-table tbody>tr:has(>td:nth-child(6)){position:relative;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;padding:12px;margin:0 0 12px;border-radius:16px}
 .app-shell.compact-shell #content .stock-table tbody>tr>td{min-width:0;border-bottom:0}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:first-child:not([colspan]){grid-column:1/-1;grid-row:1;min-height:42px;padding:0 154px 0 0!important;border-top:0}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:first-child .row{gap:8px;min-height:42px;align-items:center}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:first-child .row>span{min-width:0;flex:1;overflow:hidden}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:first-child strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:first-child small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:first-child :is(.stock-product-photo,.stock-photo-empty){width:34px;height:42px;flex-basis:34px}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:nth-child(n+2):nth-child(-n+4){grid-row:2;padding:8px 4px!important;background:#f7f8fa;border-radius:10px;text-align:center}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:nth-child(2){grid-column:1}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:nth-child(3){grid-column:2}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:nth-child(4){grid-column:3}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:nth-child(5){position:absolute;grid-column:auto;grid-row:auto;top:12px;right:106px;height:40px;display:flex;align-items:center;padding:0!important}
 .app-shell.compact-shell #content .stock-table tbody>tr>td:last-child:not([colspan]){position:absolute;grid-column:auto;grid-row:auto;top:12px;right:12px;align-self:center;padding:0!important}
 .app-shell.compact-shell #content .stock-table .stock-row-actions{gap:6px;justify-content:flex-end}
 .app-shell.compact-shell #content .stock-table .stock-row-actions .staff-stock-icon-action{width:40px;height:40px;min-width:40px;min-height:40px;flex:0 0 40px;padding:0!important;border-radius:10px}
}

/* Stock table headings use a light tint of the canteen red. */
@media screen{
 .app-shell.compact-shell #content .stock-table thead,
 .app-shell.compact-shell #content .stock-table thead th{background:#fff1f3!important}
 .app-shell.compact-shell #content .stock-table thead th{border-bottom-color:#f1dce0}
}

/* Avoid the red outer ring on clicked staff controls. */
:is(.app-shell.compact-shell,#modal) :is(input,select,textarea,button,a,summary,[role="button"]):focus{outline:none!important;box-shadow:none!important}
:is(.app-shell.compact-shell,#modal) :is(button,a,summary,[role="button"]):focus-visible{outline:2px solid #aab4c2!important;outline-offset:-2px!important}
:is(.app-shell.compact-shell,#modal) :focus-within:not(:focus){outline:none!important}

/* Neutral stock summaries and headings, with brand color on the icons. */
@media screen{
 .app-shell.compact-shell #content .stock-metrics>div,
 .app-shell.compact-shell #content .stock-metrics>button{background:#fff!important;border-color:#dce2e9!important;color:#23272f!important}
 .app-shell.compact-shell #content .stock-metrics>div :is(small,strong),
 .app-shell.compact-shell #content .stock-metrics>button :is(small,strong){color:#23272f!important}
 .app-shell.compact-shell #content .stock-metrics small{opacity:1;color:#748092!important}
 .app-shell.compact-shell #content .stock-metrics>button.active{box-shadow:inset 0 0 0 2px #cbd2dc!important}
 .app-shell.compact-shell #content .stock-metrics .staff-stock-metric-icon{background:#fff;color:var(--ui-red,#ed2635)}
 .app-shell.compact-shell #content .stock-table thead,
 .app-shell.compact-shell #content .stock-table thead th{background:#f1f3f5!important}
 .app-shell.compact-shell #content .stock-table thead th{border-bottom-color:#dce2e9}
}
.app-shell.compact-shell #content .stock-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 0;padding:12px 0;min-width:0}
.app-shell.compact-shell #content .stock-pagination-count{color:#748092;font-size:12px;white-space:nowrap}
.app-shell.compact-shell #content .stock-pagination-buttons{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.app-shell.compact-shell #content .stock-pagination-buttons>span{padding:0 3px;color:#748092}
.app-shell.compact-shell #content .stock-pagination button{width:auto;min-width:34px;min-height:34px;margin:0;padding:6px 10px;border:1px solid #dce2e9;border-radius:8px;background:#fff;color:#526176;font-size:12px;line-height:1.4;box-shadow:none}
.app-shell.compact-shell #content .stock-pagination button[aria-current="page"]{background:#e9edf2;color:#23272f;border-color:#cbd2dc;font-weight:650}
.app-shell.compact-shell #content .stock-pagination button:disabled{opacity:.45;cursor:default}
@media(max-width:600px){
 .app-shell.compact-shell #content .stock-pagination{flex-direction:column;align-items:stretch;gap:8px}
 .app-shell.compact-shell #content .stock-pagination-count{text-align:center;font-size:11px}
 .app-shell.compact-shell #content .stock-pagination-buttons{justify-content:center;gap:4px}
 .app-shell.compact-shell #content .stock-pagination button{padding:6px 8px;min-width:30px;font-size:11px}
}

/* Purchasing is the seventh stock card; mobile keeps it as one compact full row. */
@media screen{
 .app-shell.compact-shell #content .staff-stock-controls:has(.action-supply){grid-template-columns:repeat(7,minmax(80px,1fr));gap:10px}
 .app-shell.compact-shell #content .staff-stock-controls:has(.action-supply)>nav{display:contents!important}
 .app-shell.compact-shell #content .staff-stock-controls .staff-stock-action-card.action-supply{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;margin:0;padding:16px 6px;border:1px solid #efc2c9;border-radius:16px;background:#fff;color:rgba(0,0,0,.70);text-align:center;box-shadow:none}
 .app-shell.compact-shell #content .staff-stock-controls .staff-stock-action-card.action-supply strong{font-size:13px;line-height:1.4;font-weight:550}
}
@media screen and (max-width:850px){
 .app-shell.compact-shell #content .staff-stock-controls:has(.action-supply){grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .app-shell.compact-shell #content .staff-stock-controls .staff-stock-action-card.action-supply{grid-column:1/-1;flex-direction:row;height:52px!important;min-height:52px!important;padding:8px 12px}
 .app-shell.compact-shell #content .staff-stock-controls .staff-stock-action-card.action-supply strong{font-size:12px}
 .app-shell.compact-shell #content .staff-stock-controls .staff-stock-action-card.action-supply .staff-stock-action-icon{width:30px;height:30px}
}

/* Compact product rows, an inline action, and a delivery countdown. */
.app-shell.compact-shell #content .staff-order-filters{scrollbar-width:none!important}
.app-shell.compact-shell #content .staff-order-filters::-webkit-scrollbar{display:none!important;width:0;height:0}
.app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) auto 16px;grid-template-areas:"name status chevron" "preview action action" "countdown total total";gap:8px 12px;min-height:0;padding:14px 16px}
.app-shell.compact-shell #content .staff-order-fold-main{display:contents}
.app-shell.compact-shell #content .staff-order-fold-main>strong{grid-area:name}
.app-shell.compact-shell #content .staff-order-fold-status-group{grid-area:status;justify-self:end}
.app-shell.compact-shell #content .staff-order-fold-chevron{grid-area:chevron}
.app-shell.compact-shell #content .staff-order-fold-preview{grid-area:preview;display:grid;gap:4px;padding:7px 0;border:0;align-self:center}
.app-shell.compact-shell #content .staff-order-fold-preview>small{display:none}
.app-shell.compact-shell #content .staff-order-preview-products{display:grid;gap:4px;min-width:0;white-space:normal;overflow:visible;-webkit-line-clamp:unset}
.app-shell.compact-shell #content .staff-order-preview-product{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.5;color:#65758a;font-weight:450}
.app-shell.compact-shell #content .staff-order-preview-more{font-size:10px;color:#7b8799;font-weight:400}
.app-shell.compact-shell #content .staff-order-fold-shortcuts{grid-area:action;justify-self:end;align-self:center;display:flex;flex-direction:row;width:auto;gap:6px;flex-wrap:nowrap}
.app-shell.compact-shell #content .staff-order-fold-total-block{grid-area:total;justify-self:end;text-align:right;display:grid;gap:3px;min-width:0}
.app-shell.compact-shell #content .staff-order-fold-total-block>.staff-order-fold-total{grid-area:auto}
.app-shell.compact-shell #content .staff-order-countdown{grid-area:countdown;display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0;font-size:11px;color:#69788b}
.app-shell.compact-shell #content .staff-order-countdown strong{font-variant-numeric:tabular-nums;font-size:13px;color:#394b62;font-weight:600;white-space:nowrap}
.app-shell.compact-shell #content .staff-order-countdown.is-overdue strong{color:#bf3045}
.app-shell.compact-shell #content .staff-order-countdown.is-due strong{color:#a77425}
.app-shell.compact-shell #content .staff-order-fold-total-block,.app-shell.compact-shell #content .staff-order-countdown{padding-top:8px;border-top:1px solid #edf0f4}
@media(min-width:901px){
 .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary{grid-template-columns:minmax(150px,.9fr) minmax(0,1.7fr) auto auto 16px;grid-template-areas:"name preview action status chevron" "countdown preview action total chevron";column-gap:18px}
 .app-shell.compact-shell #content .staff-order-fold-total-block,.app-shell.compact-shell #content .staff-order-countdown{border:0;padding-top:0}
}
@media(max-width:600px){
 .app-shell.compact-shell #content:has(>.staff-order-list) .staff-order-fold>summary{gap:7px 9px;padding:12px}
 .app-shell.compact-shell #content .staff-order-fold-shortcuts .staff-order-fold-action{min-height:34px;padding:7px 10px;font-size:11px}
 .app-shell.compact-shell #content .staff-order-preview-product{font-size:11px}
 .app-shell.compact-shell #content .staff-order-countdown{font-size:10px}
 .app-shell.compact-shell #content .staff-order-countdown strong{font-size:12px}
}

/* Keep desktop order columns aligned independently of names, status and action text. */
@media screen and (min-width:851px){
 .app-shell.compact-shell #content>.staff-order-list{container-type:inline-size;container-name:desktop-orders}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{
  grid-template-columns:minmax(150px,.8fr) minmax(0,1.8fr) 112px 176px 16px;
  grid-template-areas:"name preview action status chevron" "countdown preview action total chevron";
  gap:8px 16px;min-height:100px;padding:18px 20px;background:#fff;
 }
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>strong{font-size:14px;line-height:1.4;min-width:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview{min-width:0;padding:0 14px;border-left:1px solid #edf0f3;align-self:center}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-product{font-size:12px;line-height:1.5}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts{width:112px;justify-self:stretch}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts .staff-order-fold-action{width:100%;min-height:38px;padding:8px 10px;font-size:12px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-status-group{display:flex;justify-content:flex-end;align-items:center;gap:8px;width:176px;min-width:0;white-space:nowrap}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-status{font-size:11px;padding:5px 8px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-code{font-size:10px;color:#7b8797}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block{width:176px;justify-self:stretch;text-align:right;border:0;padding:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total{font-size:18px;font-variant-numeric:tabular-nums}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block>.staff-order-fold-total{justify-self:end;text-align:right}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-countdown{border:0;padding:0;align-self:center;gap:4px;font-size:11px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-countdown strong{font-size:12px}
 @container desktop-orders (max-width:760px){
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) 112px 16px;grid-template-areas:"name status chevron" "countdown status chevron" "preview action action" "preview total total";gap:8px 12px;padding:16px}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview{padding:0;border:0}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-status-group{width:auto;flex-direction:column;align-items:flex-end;gap:3px}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts{width:112px;justify-self:end}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block{width:auto;justify-self:end}
 }
 @container desktop-orders (max-width:380px){
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) auto 16px;grid-template-areas:"name name chevron" "countdown countdown countdown" "status status status" "preview preview preview" "action total total";padding:12px;gap:10px}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-status-group{flex-direction:row;justify-content:flex-start;justify-self:start}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts{justify-self:start}
 }
 @container desktop-orders (min-width:620px) and (max-width:760px){
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(110px,.8fr) minmax(0,1.6fr) 96px 130px 16px;grid-template-areas:"name preview action status chevron" "countdown preview action total chevron";gap:8px 10px;min-height:116px;padding:16px 14px}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview{padding:0 10px;border-left:1px solid #edf0f3}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts{width:96px;justify-self:stretch}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-status-group,.app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block{width:130px;justify-self:stretch}
 }
}

/* Desktop orders use one shared table grid; the existing mobile cards are unchanged. */
.staff-order-table-head{display:none}
@media screen and (min-width:851px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content>.staff-order-list{
  --order-columns:minmax(130px,.8fr) minmax(0,1.7fr) 140px 124px 88px 108px 16px;
  display:grid;gap:0;container-type:inline-size;container-name:desktop-orders;
  border:1px solid #d9dde3;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 2px 8px #17253605;
 }
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-table-head{
  display:grid;grid-template-columns:var(--order-columns);align-items:center;column-gap:12px;padding:13px 18px;
  background:#f7f8fa;border-bottom:1px solid #e1e5eb;color:#647084;font-size:11px;font-weight:600;line-height:1.4;
 }
 .staff-order-table-head .order-heading-total{text-align:right}
 .staff-order-table-head .order-heading-action{text-align:center}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-list>.staff-order-fold{border:0;border-bottom:1px solid #e8ebef;border-radius:0;background:#fff;box-shadow:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-list>.staff-order-fold:last-child{border-bottom:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{
  grid-template-columns:var(--order-columns);grid-template-areas:"name preview countdown status total action chevron";
  align-items:center;gap:0 12px;min-height:86px;padding:16px 18px;background:#fff;
 }
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary:hover{background:#fafbfc!important}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>strong{font-size:13px;font-weight:600;line-height:1.5;color:#293649;min-width:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview{min-width:0;align-self:center;border:0;padding:0;gap:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-products{gap:3px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-product{font-size:12px;line-height:1.5;color:#526176;font-weight:400}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-more{font-size:10px;color:#8993a2}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-countdown{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;border:0;padding:0;font-size:10px;font-weight:400;line-height:1.5}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-countdown strong{font-size:12px;font-weight:550;line-height:1.5}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-status-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;width:124px;justify-self:start;min-width:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-status{padding:4px 8px;border-radius:6px;font-size:10px;font-weight:600;line-height:1.5}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-code{font-size:9px;color:#8b95a3;line-height:1.5}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block{width:88px;justify-self:stretch;align-self:center;text-align:right;gap:3px;border:0;padding:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block>.staff-order-fold-total{font-size:14px;font-weight:600;color:#293649!important;justify-self:end;text-align:right;font-variant-numeric:tabular-nums}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-payment-hint{font-size:9px;line-height:1.4;white-space:normal}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts{width:108px;justify-self:stretch;align-self:center}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts .staff-order-fold-action{width:100%;min-height:34px;padding:7px 10px;border-radius:7px;font-size:11px;font-weight:550;box-shadow:none;background:#e91b35;border-color:#e91b35}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold:has(.status-waiting,.status-preparing)>summary .staff-order-fold-action{background:#e91b35;border-color:#e91b35;border-radius:7px;box-shadow:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold:has(.status-ready)>summary .staff-order-fold-action{background:#eff7f2;border-color:#c8dfd1;color:#267448}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-chevron{justify-self:center;width:16px;color:#8b95a3}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold[open]>summary{background:#fafbfc}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-detail{border-top:1px solid #edf0f3;padding:0 18px 18px}
 @container desktop-orders (max-width:960px){
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-table-head{display:none}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(120px,.8fr) minmax(0,1.5fr) 108px 16px;grid-template-areas:"name preview action chevron" "countdown status total chevron";gap:10px 12px;padding:16px}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-status-group{flex-direction:row;align-items:center;gap:6px;width:auto;justify-self:start}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block{width:108px}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-countdown{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px}
 }
 @container desktop-orders (max-width:520px){
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) 108px 16px;grid-template-areas:"name status chevron" "preview preview preview" "countdown total total" "action action action";gap:10px;padding:14px}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-status-group{flex-direction:column;align-items:flex-end;justify-self:end}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block{justify-self:end}
  .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts{justify-self:start}
 }
}

/* Separate desktop order cards while retaining the shared column alignment. */
@media screen and (min-width:851px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content>.staff-order-list{gap:10px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-table-head{border:0;border-radius:0;background:transparent;padding-top:4px;padding-bottom:4px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-list>.staff-order-fold,
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-list>.staff-order-fold:last-child{border:1px solid #dce1e7;border-radius:12px;background:#fff;box-shadow:0 2px 5px #17253604;overflow:hidden}
}

/* Solid green delivery action in the desktop order cards. */
@media screen and (min-width:851px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold:has(.status-ready)>summary .staff-order-fold-action{background:#198754;border-color:#198754;color:#fff;box-shadow:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold:has(.status-ready)>summary .staff-order-fold-action:not(:disabled):hover{background:#146c43;border-color:#146c43;color:#fff}
}

/* Delivery is a neutral secondary action; the ready badge carries its status color. */
@media screen and (min-width:851px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold:has(.status-ready)>summary .staff-order-fold-action{background:#fff;border-color:#d6dce3;color:#374151;box-shadow:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold:has(.status-ready)>summary .staff-order-fold-action:not(:disabled):hover{background:#f5f6f7;border-color:#bcc5cf;color:#293649}
}

/* Stock shortcuts: red labels and glyphs, with existing white cards. */
@media screen{
 .app-shell.compact-shell #content .staff-stock-controls :is(.staff-stock-action-card,.staff-stock-tabs>button) strong,
 .app-shell.compact-shell #content .staff-stock-controls :is(.staff-stock-action-icon,.staff-stock-view-icon){color:var(--ui-red,#ed2635)!important}
}

/* Stock shortcut labels stay neutral while the icons retain their red accent. */
@media screen{
 .app-shell.compact-shell #content .staff-stock-controls :is(.staff-stock-action-card,.staff-stock-tabs>button) strong{color:rgba(0,0,0,.70)!important}
}

/* Fine neutral separators between desktop inventory product rows. */
@media screen and (min-width:851px){
 .app-shell.compact-shell #content .stock-table tbody>tr:not(:last-child)>td{border-bottom:1px solid #dedede!important}
}

/* Center stock pagination; keep page numbers plain and navigation icon based. */
@media screen{
 .app-shell.compact-shell #content .stock-pagination{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
 .app-shell.compact-shell #content .stock-pagination-count{grid-column:1;grid-row:1}
 .app-shell.compact-shell #content .stock-pagination-buttons{grid-column:2;grid-row:1;justify-content:center}
 .app-shell.compact-shell #content .stock-pagination button.stock-page-number{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0;color:#526176}
 .app-shell.compact-shell #content .stock-pagination button.stock-page-number[aria-current="page"]{color:var(--ui-red,#ed2635);font-weight:700}
 .app-shell.compact-shell #content .stock-pagination button.stock-page-arrow{display:inline-flex;align-items:center;justify-content:center;width:34px;padding:6px}
 .app-shell.compact-shell #content .stock-pagination .stock-page-arrow svg{width:18px;height:18px;flex:none}
}
@media screen and (max-width:1100px){
 .app-shell.compact-shell #content .stock-pagination{grid-template-columns:minmax(0,1fr);gap:6px}
 .app-shell.compact-shell #content .stock-pagination-count{grid-column:1;grid-row:1;text-align:center}
 .app-shell.compact-shell #content .stock-pagination-buttons{grid-column:1;grid-row:2}
}

/* Compact finance workspace and summary icons beside the heading. */
.app-shell.compact-shell #content .stock-metrics>div,
.app-shell.compact-shell #content .stock-metrics>button{grid-template-columns:24px minmax(0,1fr)!important;gap:0 9px!important;align-items:center!important}
.app-shell.compact-shell #content .stock-metrics .staff-stock-metric-icon{position:static!important;grid-column:1;grid-row:1;top:auto!important;right:auto!important;width:24px!important;height:24px!important;margin:0!important;background:transparent!important;border-radius:0!important;color:#d82329!important}
.app-shell.compact-shell #content .stock-metrics small{grid-column:2;grid-row:1;min-height:0!important;padding:0!important;opacity:1!important}
.app-shell.compact-shell #content .stock-metrics strong{grid-column:1/-1;grid-row:2;margin-top:18px!important}
#app>.app-shell.compact-shell:is([data-workspace-page="management"],[data-workspace-page="finance"]) #content .management-main{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
#app .finance-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
#app .finance-card{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid #dedede;border-radius:16px;background:#fff;color:#374151}
#app .finance-card h2{display:flex;align-items:center;gap:9px;margin:0;font-size:14px;font-weight:600;color:#4b5563}
#app .finance-card h2 svg{width:20px;height:20px;color:#d82329;flex:none}
#app .finance-card>strong{font-size:28px;font-weight:650;color:#263248;font-variant-numeric:tabular-nums}
#app .finance-card small,#app #finance-rate-example,#app #finance-rate-status{font-size:12px;color:#747b86;line-height:1.5;margin:0}
#app .finance-pricing{width:100%;max-width:none}
#app #finance-rate-form{display:grid;gap:12px;margin:0}
#app #finance-rate-form label{font-size:13px;color:#6b7280;margin:0}
#app .finance-rate-controls{display:flex;gap:10px;align-items:stretch}
#app .finance-rate-input{display:flex;align-items:center;width:160px;border:1px solid #dedede;border-radius:10px;padding-right:14px;background:#fff}
#app #finance-rate{min-width:0;width:100%;border:0;background:transparent;margin:0;padding:12px}
#app .finance-rate-controls button{background:#d82329!important;color:#fff!important;border-color:#d82329!important;border-radius:10px;padding:10px 22px}
@media(max-width:600px){#app .finance-summary{gap:10px}#app .finance-card{padding:15px;gap:10px}#app .finance-card h2{font-size:12px;gap:6px}#app .finance-card>strong{font-size:23px}#app .finance-card small{font-size:10px}.app-shell.compact-shell #content .stock-metrics>div,.app-shell.compact-shell #content .stock-metrics>button{grid-template-columns:18px minmax(0,1fr)!important;gap:0 5px!important}.app-shell.compact-shell #content .stock-metrics .staff-stock-metric-icon{width:18px!important;height:18px!important}}

/* Settings stays the parent workspace; finance opens as its own section. */
#app .settings-simple-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,320px));gap:14px}
#app .settings-finance-card{display:flex;align-items:center;gap:12px;min-height:96px;padding:18px;border:1px solid #dedede;border-radius:14px;background:#fff;color:#4b5563;text-align:left;box-shadow:none}
#app .settings-finance-card>span:nth-child(2){display:grid;gap:5px;flex:1;min-width:0}
#app .settings-finance-card strong{font-size:15px;font-weight:600;color:#374151}
#app .settings-finance-card small{font-size:11px;color:#7b818a;line-height:1.5}
#app .settings-card-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff1f2;color:#d82329}
#app .settings-card-icon svg{width:20px;height:20px}
#app .settings-card-arrow{color:#9ca3af}
#app .settings-card-arrow svg{width:16px;height:16px}
#app .settings-finance-card:focus-visible{outline:2px solid #d82329;outline-offset:3px}
#app .settings-finance-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:6px 0;border:0;background:transparent;color:#6b7280;font-size:12px;box-shadow:none}
#app .settings-finance-back>.ui-icon,#app .settings-finance-card>.ui-icon{display:none!important}
@media(max-width:600px){#app .settings-simple-grid{grid-template-columns:1fr}#app .settings-finance-card{min-height:84px;padding:16px}}

/* Calendar periods and a compact profit ranking within the finance workspace. */
#app .finance-period-tabs{display:flex;gap:8px;margin:0 0 14px}
#app .finance-period-tabs button{padding:9px 16px;min-height:38px;border:1px solid #dedede;border-radius:10px;background:#fff;color:#6b7280;font-size:12px;box-shadow:none}
#app .finance-period-tabs button[aria-pressed=true]{border-color:#e7b9bc;background:#fff1f2;color:#d82329}
#app .finance-period-tabs button>.ui-icon{display:none!important}
#app .finance-pricing-note,#app .finance-empty{margin:0;font-size:12px;color:#7b818a;line-height:1.5}
#app .finance-top-products{margin-top:14px}
#app .finance-product-ranks{list-style:none;padding:0;margin:0;display:grid}
#app .finance-product-ranks li{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid #ededed;min-width:0}
#app .finance-product-photo{display:grid;place-items:center;width:38px;height:42px;border-radius:8px;background:#f5f5f5;flex:none;color:#d82329}
#app .finance-product-photo img{display:block;width:100%;height:100%;object-fit:contain;padding:3px}
#app .finance-product-photo svg{width:19px;height:19px}
#app .finance-product-copy{display:grid;gap:4px;flex:1;min-width:0}
#app .finance-product-copy strong{font-size:13px;font-weight:600;color:#4b5563;overflow-wrap:anywhere}
#app .finance-product-profit{font-size:15px;color:#374151;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:600px){#app .finance-product-copy strong{font-size:12px}#app .finance-product-profit{font-size:13px}#app .finance-pricing-note{font-size:11px}}

/* Optional finance tools stay collapsed in one small panel. */
#app .finance-extras{margin-top:14px;background:#fff;border:1px solid #dedede;border-radius:14px;overflow:hidden}
#app .finance-extras details+details{border-top:1px solid #ededed}
#app .finance-extras summary{display:flex;align-items:center;gap:10px;padding:15px 18px;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:#4b5563}
#app .finance-extras summary::-webkit-details-marker{display:none}
#app .finance-extras summary:after{content:'';margin-left:auto;border-color:#888;transform:rotate(45deg)}
#app .finance-extras details[open]>summary:after{transform:rotate(225deg)}
#app .finance-extras summary svg{width:18px;height:18px;color:#d82329;flex:none}
#app .finance-detail-body{padding:0 18px 16px;font-size:12px;color:#6b7280}
#app .finance-detail-body form{margin:0;padding:0;display:grid;gap:8px}
#app .finance-detail-body label{font-size:12px;color:#6b7280;display:grid;gap:7px}
#app .finance-detail-body input,#app .finance-detail-body select{font-size:13px;min-width:0;width:100%;min-height:40px;padding:8px 10px;border:1px solid #dedede;border-radius:8px;background:#fff;color:#374151}
#app .finance-inline{display:flex;gap:8px;max-width:450px}
#app .finance-extras button{font-size:12px;min-height:40px;padding:9px 16px;border-radius:8px;box-shadow:none;white-space:nowrap}
#app .finance-extras button.primary{background:#d82329;color:#fff;border:1px solid #d82329}
#app .finance-extras button .ui-icon{display:none!important}
#app .finance-mini-values{display:flex;flex-wrap:wrap;gap:24px;margin:14px 0}
#app .finance-mini-values>div{display:grid;gap:6px}
#app .finance-mini-values strong{font-size:16px;font-weight:600;color:#374151}
#app .finance-goal-progress{display:grid;gap:8px;margin-top:12px;max-width:450px}
#app .finance-goal-progress progress{width:100%;height:6px;accent-color:#d82329;border:0;border-radius:4px;overflow:hidden}
#app .finance-goal-progress progress::-webkit-progress-bar{background:#eee}
#app .finance-goal-progress progress::-webkit-progress-value{background:#d82329}
#app .finance-alert-list{max-height:240px;overflow-y:auto}
#app .finance-alert-list>div{display:grid;gap:5px;padding:10px 0;border-bottom:1px solid #ededed}
#app .finance-alert-list strong{font-size:12px;color:#4b5563}
#app .finance-report-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:450px}
#app .finance-download-buttons{display:flex;gap:8px}
#app .finance-detail-body p{margin:10px 0 0;font-size:12px}
@media(max-width:600px){#app .finance-extras summary{padding:13px 14px;font-size:12px}#app .finance-detail-body{padding:0 14px 14px}#app .finance-mini-values{gap:18px}#app .finance-report-dates{gap:8px}}

/* Advertisement editor: external CSS respects the live CSP. */
#modal:has(#ad-editor){width:min(920px,calc(100vw - 24px));max-width:920px!important;max-height:calc(100dvh - 24px);padding:24px;background:#fff;overflow:auto}
#modal:has(#ad-editor)>h2{font-size:20px;margin:0 40px 20px 0;color:#374151}
#ad-editor{font-size:13px;color:#4b5563}#ad-editor *{box-sizing:border-box}
#ad-editor svg{width:18px;height:18px;flex:none}
#ad-editor label{display:grid;gap:6px;margin:0;font-size:12px;color:#6b7280}
#ad-editor input:not([type=checkbox]),#ad-editor select{width:100%;min-width:0;min-height:40px;padding:9px 10px;margin:0;border:1px solid #dedede;border-radius:9px;background:#fff;color:#374151;font:inherit}
#ad-editor button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 12px;border:1px solid #dedede;border-radius:9px;background:#fff;color:#4b5563;font:inherit;box-shadow:none}
#ad-editor button.primary{background:#d82329!important;border-color:#d82329!important;color:#fff!important}
#ad-editor button>.ui-icon{display:none!important}#ad-editor button::before,#ad-editor button::after{display:none!important;content:none!important}
#ad-editor .ad-editor-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
#ad-editor .ad-tabs{display:flex;gap:4px;background:#f4f4f4;padding:4px;border-radius:10px}
#ad-editor .ad-tabs button{border:0;background:transparent;min-height:34px;padding:7px 14px;font-weight:600}
#ad-editor .ad-tabs button[aria-selected=true]{background:#fff;color:#d82329;box-shadow:0 1px 4px #00000009}
#ad-editor #ad-tab-count{font-size:11px;background:#eee;border-radius:5px;padding:1px 5px;color:#777}
#ad-editor .ad-editor-switch{position:relative;display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;white-space:nowrap}
#ad-editor .ad-editor-switch input{position:absolute;opacity:0;width:38px;height:22px;margin:0;cursor:pointer}
#ad-editor .ad-switch-track{width:38px;height:22px;border-radius:20px;background:#ccc;position:relative;flex:none;transition:background .15s;pointer-events:none}
#ad-editor .ad-switch-track::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .15s}
#ad-editor .ad-editor-switch input:checked+.ad-switch-track{background:#d82329}
#ad-editor .ad-editor-switch input:checked+.ad-switch-track::after{transform:translateX(16px)}
#ad-editor .ad-editor-switch input:focus-visible+.ad-switch-track{outline:2px solid #d82329;outline-offset:3px}
#ad-editor .ad-editor-top{display:grid;gap:16px}
#ad-editor .ad-editor-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
#ad-editor .ad-editor-fields{display:grid;grid-template-columns:minmax(0,1fr) 140px 80px;gap:12px;grid-column:1/-1}
#ad-editor [data-ad-apply]{grid-column:1/-1;justify-self:end;min-width:180px}
#ad-search-status{font-size:11px;color:#888;line-height:1.4}#ad-search-status:empty{display:none}
#ad-editor .ad-editor-hint,#ad-editor .ad-editor-empty{font-size:11px;color:#888;margin:0;line-height:1.5}
#ad-editor .ad-editor-empty{padding:18px;border:1px dashed #dedede;border-radius:10px;grid-column:1/-1}
#ad-editor .ad-editor-library-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:0 0 16px}
#ad-editor .ad-editor-library-head h3{font-size:14px;color:#4b5563;margin:0}
#ad-editor .ad-editor-rows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#ad-editor .ad-tile{position:relative;border:1px solid #eee;border-radius:12px;overflow:hidden;min-width:0}
#ad-editor .ad-tile.is-editing{outline:2px solid #d82329;outline-offset:2px}
#ad-editor .ad-tile-tools{position:absolute;right:7px;top:7px;display:flex;gap:4px}
#ad-editor .ad-tile-tools button{width:27px;min-height:27px;padding:5px;border:0;border-radius:7px;background:#ffffffed;color:#d82329;flex:none}
#ad-editor .ad-tile-tools svg{width:15px;height:15px}
#ad-editor .ad-tile-position{position:absolute;left:8px;top:8px;font-size:10px;color:#fff;background:#ffffff25;border-radius:5px;padding:3px 6px}
#ad-editor .ad-editor-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;margin-top:18px;border-top:1px solid #eee}
#ad-editor-error{font-size:12px;color:#d82329;white-space:pre-line}#ad-editor [hidden]{display:none!important}
#ad-editor button:focus-visible,#ad-editor input:focus-visible,#ad-editor select:focus-visible{outline:2px solid #d82329;outline-offset:2px}
@media(max-width:650px){#modal:has(#ad-editor){padding:16px}#ad-editor .ad-editor-toolbar{flex-wrap:wrap;gap:12px}#ad-editor .ad-tabs{width:100%}#ad-editor .ad-tabs button{flex:1}#ad-editor .ad-editor-controls{grid-template-columns:1fr;gap:10px}#ad-editor .ad-editor-fields{grid-template-columns:1fr 76px;gap:10px}#ad-editor .ad-editor-fields>label:first-child{grid-column:1/-1}#ad-editor [data-ad-apply]{width:100%}#ad-editor .ad-editor-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#ad-editor .ad-tile-tools button{width:24px;min-height:24px;padding:4px}#ad-editor .ad-editor-footer{flex-wrap:wrap}#ad-editor .ad-editor-footer>div{display:flex;gap:6px}}

/* Search and selection share one compact product picker. */
#ad-editor .ad-editor-controls{grid-template-columns:1fr}
#ad-editor .ad-product-picker{position:relative;min-width:0}
#ad-editor .ad-editor-fields{grid-template-columns:minmax(0,1fr) 160px}
#ad-editor #ad-product-results{display:grid;max-height:240px;overflow-y:auto;border:1px solid #dedede;border-radius:10px;margin-top:6px;background:#fff;overscroll-behavior:contain}
#ad-editor #ad-product-results button{justify-content:flex-start;gap:12px;width:100%;min-height:64px;border:0;border-bottom:1px solid #eee;border-radius:0;padding:8px 12px;text-align:left}
#ad-editor #ad-product-results button:last-child{border-bottom:0}
#ad-editor #ad-product-results button:is(:hover,.is-focused){background:#fff0f1}
#ad-editor #ad-product-results img,#ad-editor #ad-product-chosen img{width:44px;height:44px;object-fit:contain;flex:none;background:#fff;border-radius:6px}
#ad-editor #ad-product-results button>span,#ad-editor #ad-product-chosen>span{display:grid;gap:3px;min-width:0}
#ad-editor #ad-product-results strong,#ad-editor #ad-product-chosen strong{font-weight:600;overflow-wrap:anywhere}
#ad-editor #ad-product-results small,#ad-editor #ad-product-chosen small{color:#858585;font-size:11px}
#ad-editor .ad-search-empty{padding:14px;margin:0;color:#777;font-size:12px}
#ad-editor #ad-product-chosen{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid #e5e5e5;border-radius:10px;background:#fafafa;margin-top:8px}
#ad-editor #ad-search-status:empty{display:none}
#ad-editor .ad-editor-library-head h3{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
#ad-editor .ad-editor-library-head h3 small{font-size:11px;font-weight:400;color:#888}
#ad-editor .ad-tile{cursor:grab;border-color:#dedede}
#ad-editor .ad-tile.is-dragging{opacity:.55}
#ad-editor .ad-tile.is-drop-target{outline:2px solid #d82329;outline-offset:2px}
#ad-editor button.ad-tile-position{left:8px;top:8px;min-height:25px;height:25px;padding:3px 6px;border:0;border-radius:6px;color:#fff;background:#ffffff25;gap:3px;font-size:11px;cursor:grab;touch-action:none}
#ad-editor button.ad-tile-position svg{width:13px;height:13px}
@media(max-width:650px){
 #ad-editor .ad-editor-fields{grid-template-columns:minmax(0,1fr) 100px}
 #ad-editor .ad-editor-fields>label:first-child{grid-column:auto}
 #ad-editor [data-ad-new]{white-space:nowrap;flex:none}
 #ad-editor .ad-editor-library-head h3{gap:4px}
 #ad-editor .ad-editor-library-head h3 small{flex-basis:100%}
}


/* Spread the pricing preference across the card instead of leaving an empty side. */
#app .finance-pricing{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  column-gap:32px;row-gap:10px;align-items:start;
}
#app .finance-pricing>h2{align-self:start;margin:0;line-height:1.4}
#app .finance-pricing #finance-rate-form{grid-row:span 2;align-self:center;gap:10px}
#app .finance-pricing .finance-pricing-note{align-self:start}
#app .finance-pricing .finance-rate-controls{width:100%}
#app .finance-pricing .finance-rate-input{width:auto;flex:1;min-width:0}
#app .finance-pricing .finance-rate-controls button{flex:none;white-space:nowrap}
#app .finance-pricing #finance-rate-status:empty{display:none}
@media(max-width:600px){
 #app .finance-pricing{display:grid;grid-template-columns:1fr;gap:12px}
 #app .finance-pricing #finance-rate-form{grid-row:auto}
 #app .finance-pricing .finance-rate-input{flex:0 1 160px}
}

/* Keep each expanded order label beside its value at every screen width. */
@media screen{
 .app-shell.compact-shell #content .staff-order-detail-info>div{grid-template-columns:128px minmax(0,1fr);column-gap:16px}
 .app-shell.compact-shell #content .staff-order-detail-info dd{text-align:left;justify-self:start}
}
@media screen and (max-width:600px){
 .app-shell.compact-shell #content .staff-order-detail-info>div{grid-template-columns:106px minmax(0,1fr);column-gap:12px}
}
/* Compact order cards; clicking the heading opens the complete existing detail. */
@media screen{
 .app-shell.compact-shell[data-workspace-page="orders"] #content>.staff-order-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;border:0;background:transparent;overflow:visible}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-table-head{display:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-list>.staff-order-fold,
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-list>.staff-order-fold:last-child{border:1px solid #cdcdcd;border-radius:12px;background:#fff;box-shadow:none;min-width:0;overflow:hidden}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold[open]{grid-column:1/-1}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name status" "schedule total" "preview action";gap:8px 14px;padding:16px;min-height:0;align-items:center;background:#fff}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main{grid-area:name;min-width:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>strong{font-size:15px;line-height:1.4;overflow-wrap:anywhere}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-status-group{grid-area:status;display:flex;flex-direction:column;align-items:flex-end;justify-self:end;width:auto;gap:3px;white-space:normal;text-align:right}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary .staff-order-fold-status-group .staff-order-fold-status{font-size:11px;line-height:1.4;padding:4px 7px;border:1px solid #f3c9cd;border-radius:8px;background:#fff0f1;color:#ed1c24}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold[open] .staff-order-fold-main>strong{white-space:normal;overflow:visible;text-overflow:clip}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-code{font-size:10px;line-height:1.4;color:#718094}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-schedule{grid-area:schedule;display:grid;gap:3px;min-width:0;font-size:12px;line-height:1.5;color:#718094}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-schedule .staff-order-countdown{display:flex;grid-area:auto;align-items:center;justify-content:flex-start;gap:4px;margin:0;padding:0;border:0;min-width:0;background:none;font-size:11px;line-height:1.4}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-schedule .staff-order-countdown strong{font-size:11px;line-height:1.4;font-weight:500}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-schedule .staff-order-countdown small{font-size:11px;line-height:1.4}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview{grid-area:preview;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;border:0;margin:0;padding:0;font-size:12px;color:#718094}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview>span{font-size:12px;line-height:1.5}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-hint{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#ed1c24}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-hint svg{width:13px;height:13px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold[open] .staff-order-detail-hint svg{transform:rotate(180deg)}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block{grid-area:total;width:auto;justify-self:end;align-self:center;border:0;padding:0;gap:3px;text-align:right}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block>.staff-order-fold-total{font-size:16px;line-height:1.4}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts{grid-area:action;justify-self:end;align-self:center;width:auto}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts .staff-order-fold-action{width:auto;min-height:34px;padding:7px 12px;font-size:12px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold[open]>summary .staff-order-fold-shortcuts{display:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-detail .order-queue-actions>.primary{background:#ed1c24;border-color:#ed1c24;color:#fff}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info>div,
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-detail .order-queue-note{grid-template-columns:128px minmax(0,1fr);column-gap:16px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info dd{text-align:left;justify-self:start}
}
@media screen and (max-width:600px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{padding:14px;gap:8px 10px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info>div,
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-detail .order-queue-note{grid-template-columns:106px minmax(0,1fr);column-gap:12px}
}

/* Orders remain one full-width column on every screen. */
@media screen{.app-shell.compact-shell[data-workspace-page="orders"] #content>.staff-order-list{grid-template-columns:minmax(0,1fr)}}

/* Compact order metadata and centered product thumbnails. */
@media screen{
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(160px,220px) minmax(0,1fr) auto;grid-template-areas:"name photos status" "schedule photos total" "preview photos action";padding:14px 16px;gap:6px 18px}
 .staff-order-fold-thumbnails{grid-area:photos;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
 .staff-order-thumb{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid #e0e3e8;border-radius:9px;background:#fff;padding:5px;flex:none;box-sizing:border-box}
 .staff-order-thumb img{width:100%;height:100%;object-fit:contain}
 .staff-order-thumb small{position:absolute;right:2px;bottom:2px;min-width:15px;padding:1px 3px;border-radius:4px;background:#fff1f2;color:#d82329;font-size:10px;text-align:center}
 .staff-order-thumb-fallback{font-size:9px;line-height:1.2;text-align:center;overflow-wrap:anywhere}
 .staff-order-thumb-more{font-size:12px;color:#69788b}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:8px 0;border-top:1px solid #e9edf2;border-bottom:1px solid #e9edf2}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;padding:0;border:0;font-size:12px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info dd{margin:0;font-size:12px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info dt{font-size:11px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-detail .order-queue-note{display:flex;align-items:baseline;gap:6px;padding:5px 0;border:0;font-size:12px;line-height:1.5}
 .staff-order-inline-qty{display:inline-block;margin-left:6px;color:#718094;font-size:11px;font-weight:500;white-space:nowrap}
 .staff-order-line small:empty{display:none}
}
@media screen and (max-width:700px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name status" "schedule total" "photos photos" "preview action";gap:7px 10px;padding:12px}
 .staff-order-fold-thumbnails{justify-content:flex-start;gap:6px}
 .staff-order-thumb{width:44px;height:44px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-detail .order-queue-note{flex-wrap:wrap}
}

/* Keep order products next to the customer information. */
@media screen{
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(160px,210px) minmax(0,1fr) auto;gap:4px 16px;padding:12px 16px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-thumbnails{justify-content:flex-start;gap:7px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-thumb{width:48px;height:48px;border-color:#eceef1;border-radius:7px;padding:4px}
}
@media screen and (max-width:700px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:12px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-thumb{width:42px;height:42px}
}

/* Hide product thumbnails in the order summary; keep detail photos. */
@media screen{.app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-thumbnails{display:none}}

/* Align expanded order information in equal, centered columns. */
@media screen{
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;padding:12px 0;align-items:center}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info>div{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:5px 7px;min-width:0;text-align:center}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info dd{text-align:center;justify-self:center;overflow-wrap:anywhere}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-detail .order-queue-note{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;text-align:center;gap:6px;padding:8px 12px;line-height:1.5;overflow-wrap:anywhere}
}
@media screen and (max-width:600px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 0}
}

/* Compact left-aligned information strip with subtle separators. */
@media screen{
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:10px 0;padding:10px 0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info>div{display:flex;justify-content:flex-start;align-items:baseline;text-align:left;gap:6px;padding:0 18px;border:0;border-right:1px solid #e2e5ea}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info>div:first-child{padding-left:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info>div:last-child{border-right:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info dd{text-align:left;justify-self:start;font-weight:500}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-detail .order-queue-note{justify-content:flex-start;text-align:left;align-items:baseline;padding:6px 0;gap:7px}
}
@media screen and (max-width:650px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-info>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;padding:0;border:0}
}

/* Four shared columns keep every order aligned and compact. */
@media screen{
 .app-shell.compact-shell[data-workspace-page="orders"] #content>.staff-order-list{grid-template-columns:minmax(0,1fr);gap:10px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(140px,1fr) minmax(0,1.65fr) minmax(190px,1.15fr) 130px;grid-template-areas:"name preview delivery total";gap:18px;padding:14px 18px;align-items:center}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main{display:grid;gap:4px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>small{font-size:11px;color:#718094}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview{display:grid;align-content:center;gap:6px;min-width:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-products{display:grid;gap:4px;min-width:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-product{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#34445a;line-height:1.5}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-product>span{color:#718094;font-size:11px}
 .staff-order-row-detail{display:flex;align-items:center;gap:10px;font-size:11px;color:#718094}
 .staff-order-fold-delivery{grid-area:delivery;display:grid;align-content:center;gap:6px;min-width:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-delivery .staff-order-fold-schedule{grid-area:auto;gap:2px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-delivery .staff-order-fold-status-group{grid-area:auto;align-items:flex-start;justify-self:start}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block{grid-area:total;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;min-width:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block .staff-order-fold-shortcuts{grid-area:auto;margin-top:2px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total{font-size:18px}
}
@media screen and (max-width:900px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(110px,1fr) minmax(0,1.25fr) minmax(155px,1fr) 105px;gap:12px;padding:12px}
}
@media screen and (max-width:650px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) 110px;grid-template-areas:"name total" "preview total" "delivery delivery";gap:10px 12px;padding:12px}
 .staff-order-fold-delivery{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid #edf0f3}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main{gap:3px}
}

/* Reset old grid areas inside the student identity column. */
@media screen{
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0;text-align:left}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>strong,
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>small,
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>.staff-order-fold-code{grid-area:auto;position:static;display:block;margin:0;min-width:0;max-width:100%;line-height:1.4}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview .staff-order-row-detail{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
}

/* The action already indicates the order state in the compact summary. */
@media screen{.app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary .staff-order-fold-status-group{display:none}}

/* Mobile order card: aligned header, product summary and compact delivery strip. */
@media screen and (max-width:650px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) 100px;grid-template-areas:"name total" "preview preview" "delivery delivery";column-gap:12px;row-gap:10px;padding:14px;align-items:start}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main{gap:3px;justify-content:flex-start}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>strong{font-size:14px;line-height:1.4}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>small{font-size:10px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>.staff-order-fold-code{font-size:9px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block{align-self:start;gap:4px;align-items:flex-end}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total{font-size:17px;line-height:1.2}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-payment-hint{font-size:9px;line-height:1.3}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block .staff-order-fold-shortcuts{margin:3px 0 0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts .staff-order-fold-action{min-height:32px;padding:7px 13px;font-size:11px;box-shadow:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview{gap:7px;padding-top:9px;border-top:1px solid #edf0f3;width:100%}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-products{gap:3px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-product{font-size:12px;line-height:1.5}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview .staff-order-row-detail{justify-content:space-between;gap:10px;font-size:10px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-detail-hint{font-size:11px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-delivery{display:block;padding-top:9px;border-top:1px solid #edf0f3}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-delivery .staff-order-fold-schedule{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px;font-size:11px;line-height:1.5}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-schedule .staff-order-countdown{font-size:10px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-schedule .staff-order-countdown strong,
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-schedule .staff-order-countdown small{font-size:10px}
}

/* Compact mobile summary: identity and products left, price and action right. */
@media screen and (max-width:650px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary{grid-template-columns:minmax(0,1fr) 92px;grid-template-areas:"name total" "preview total" "delivery delivery";gap:7px 12px;padding:12px;align-items:start}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main{display:flex;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:3px 7px;min-width:0}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>strong{max-width:100%;font-size:14px;line-height:1.3}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>small{font-size:10px;line-height:1.3}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-main>.staff-order-fold-code{display:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview{padding:0;border:0;gap:4px;min-width:0;width:auto}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-products{gap:2px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-product{font-size:11px;line-height:1.5}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-preview-product>span{font-size:10px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-preview .staff-order-row-detail{justify-content:flex-start;gap:9px;font-size:10px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block{align-self:stretch;justify-content:space-between;align-items:flex-end;gap:4px;min-width:0;text-align:right}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total{font-size:17px;line-height:1.3}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block .staff-order-payment-hint{display:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total-block .staff-order-fold-shortcuts{width:100%;margin:0;justify-content:flex-end}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts .staff-order-fold-action{width:92px;max-width:100%;min-height:34px;padding:7px 8px;font-size:11px;box-sizing:border-box;box-shadow:none;text-align:center}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-delivery{padding-top:7px;margin-top:1px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-delivery .staff-order-fold-schedule{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px 8px;font-size:10px;line-height:1.4}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-schedule .staff-order-countdown strong,
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-schedule .staff-order-countdown small{font-size:9px}
}

/* Desktop order prices and icon actions share the brand red. */
.staff-order-action-icon{display:none}
@media screen and (min-width:651px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-total{color:#ed1c24}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts .staff-order-fold-action{display:flex;align-items:center;justify-content:center;width:38px;height:38px;min-height:38px;padding:8px;border:1px solid #ed1c24;background:#ed1c24;color:#fff;border-radius:9px;box-sizing:border-box}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts .staff-order-fold-action:hover{background:#d61520;border-color:#d61520}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-action .staff-order-action-full,
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-action .staff-order-action-mobile{display:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-action .staff-order-action-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-action-icon svg{width:20px;height:20px}
}

/* Keep the action label visible beside its leading icon. */
@media screen and (min-width:651px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-shortcuts .staff-order-fold-action{width:auto;min-width:100px;height:36px;min-height:36px;padding:8px 12px;gap:6px;white-space:nowrap}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-action .staff-order-action-mobile{display:inline;font-size:12px;line-height:1.3}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold-action .staff-order-action-icon{width:17px;height:17px;flex:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-action-icon svg{width:17px;height:17px}
}

/* Leading icons keep every expanded order action readable. */
.app-shell.compact-shell[data-workspace-page="orders"] #content .order-queue-actions>button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.staff-order-detail-action-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none}
.staff-order-detail-action-icon svg{display:block;width:16px;height:16px}

/* Consistent red actions and alignment for every compact order state. */
@media screen{
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary .staff-order-payment-hint{display:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary .staff-order-fold-total{color:#ed1c24}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary .staff-order-fold-total-block{gap:8px;align-items:flex-end;justify-content:center}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary .staff-order-fold-shortcuts{margin:0;justify-content:flex-end}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary .staff-order-fold-shortcuts .staff-order-fold-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:112px;min-width:112px;height:36px;min-height:36px;padding:7px 10px;border:1px solid #ed1c24;background:#ed1c24;color:#fff;border-radius:9px;box-sizing:border-box;box-shadow:none;white-space:nowrap}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary .staff-order-fold-shortcuts .staff-order-fold-action:hover{background:#d61520;border-color:#d61520;color:#fff}
}
@media screen and (max-width:650px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary .staff-order-fold-total-block{justify-content:space-between;gap:6px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-fold>summary .staff-order-fold-shortcuts .staff-order-fold-action{width:92px;min-width:92px;height:34px;min-height:34px;padding:7px 6px;font-size:11px}
}

/* Keep the order filters on one aligned row; overflow scrolls horizontally. */
@media screen and (min-width:651px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-filters{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:7px;padding:3px 1px;max-width:100%;box-sizing:border-box;overscroll-behavior-x:contain}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-filters>button{flex:0 0 auto;min-height:38px;padding:8px 10px;font-size:11px}
}
/* Fit all seven order categories without a clipped trailing button. */
@media screen and (min-width:1001px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-filters{gap:5px;overflow:visible;flex-wrap:nowrap}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-filters>button{flex:1 1 auto;min-width:0;gap:4px;padding:8px 7px;font-size:11px}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-filters>button span{min-width:17px;padding:2px 4px;font-size:10px;flex-shrink:0}
}
@media screen and (min-width:651px) and (max-width:1000px){
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-filters{display:none}
 .app-shell.compact-shell[data-workspace-page="orders"] #content .staff-order-filter-dropdown{display:block}
}
/* Keep the staff sidebar footer limited to the account profile. */
.shell .sidebar footer :is(.sidebar-date,.staff-legal-details){display:none!important}

/* Simplify cancellation controls and keep the reason field fixed in height. */
#modal #staff-cancel-order button::before,#modal #staff-cancel-order button::after{content:none!important;display:none!important}
#modal #staff-cancel-order button :is(svg,.ui-icon,.staff-order-detail-action-icon){display:none!important}
#modal #staff-cancel-order button.danger{background:#ed1c24!important;border-color:#ed1c24!important;color:#fff!important;box-shadow:none!important}
#modal #staff-cancel-order button.danger:hover{background:#d61520!important;border-color:#d61520!important}
#modal #staff-cancel-order textarea[name="reason"]{height:84px!important;min-height:84px!important;max-height:84px!important;resize:none!important;overflow-y:auto!important;box-sizing:border-box}

/* Capacity editor owns its layout, independent of generic management form rules. */
#app .capacity-editor{display:flex!important;flex-direction:column!important;gap:20px!important;width:100%;min-width:0;padding:24px!important;margin:20px 0!important;background:#fff;border:1px solid #e0e4eb;border-radius:18px;box-sizing:border-box;overflow:visible!important}
#app .capacity-editor :is(h2,p){margin:0!important;line-height:1.55!important;white-space:normal!important;overflow-wrap:anywhere}
#app .capacity-editor h2{font-size:20px}
#app .capacity-editor p{font-size:13px;color:#69778b}
#app .capacity-availability{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px;background:#f7f8fa;border:1px solid #e4e7ed;border-radius:12px}
#app .capacity-availability>div{display:flex;flex-direction:column;gap:6px;min-width:0}
#app .capacity-editor button{flex-shrink:0;min-height:40px;white-space:normal;line-height:1.4}
#app .capacity-editor button::before,#app .capacity-editor button::after{display:none!important;content:none!important}
#app .capacity-picker{display:flex;flex-direction:column;gap:8px}
#app .capacity-picker>div{display:flex;gap:10px;align-items:center}
#app .capacity-picker select{flex:1;min-width:0;width:auto}
#app .capacity-table-wrap{width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain}
#app .capacity-table{width:100%;min-width:700px;border-collapse:collapse;table-layout:auto}
#app .capacity-table :is(th,td){padding:10px!important;text-align:left;vertical-align:middle;border-bottom:1px solid #e5e8ee;white-space:nowrap}
#app .capacity-table thead th{background:#f6f7f9;font-size:12px}
#app .capacity-table tbody th{min-width:150px;max-width:220px;white-space:normal;font-size:13px;line-height:1.5}
#app .capacity-table input{width:74px!important;min-width:64px;height:40px!important;min-height:40px!important;margin:0!important;padding:8px!important;font-size:13px;box-sizing:border-box}
#app .capacity-table td:last-of-type button{font-size:12px}
#app .capacity-table [data-fill]{margin-left:6px;font-size:12px}
#app .capacity-footer{display:flex!important;align-items:center;justify-content:space-between;gap:16px;position:static!important;padding:0!important;background:none!important;border:0!important}
#app .capacity-footer span{font-size:13px;line-height:1.5;color:#56657a}
#app .app-shell.compact-shell:has(#capacity-editor) .app-main{overflow-y:auto!important;min-height:0}
#app .app-shell.compact-shell:has(#capacity-editor) #content{overflow:visible!important;height:auto!important;max-height:none!important}
#app .management-main:has(#capacity-editor){overflow:visible!important;height:auto!important;max-height:none!important;min-width:0}
@media(max-width:650px){#app .capacity-editor{padding:16px!important;gap:16px!important}#app .capacity-availability{flex-direction:column;align-items:stretch}#app .capacity-picker>div{flex-direction:column;align-items:stretch}#app .capacity-picker select{width:100%}#app .capacity-footer{flex-direction:column;align-items:stretch}#app .capacity-editor h2{font-size:17px}}

#app .app-shell.compact-shell:has(#capacity-editor)>main{overflow-y:auto!important;min-height:0;max-height:none!important}

#app .capacity-food-picker{display:flex;flex-direction:column;gap:12px;min-width:0}
#app #capacity-food-search{width:100%;box-sizing:border-box;min-height:44px;margin:0}
#app .capacity-food-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:12px;max-height:330px;overflow-y:auto;padding:3px;min-width:0}
#app .capacity-editor .capacity-food-card{display:flex!important;flex-direction:column!important;align-items:center;justify-content:flex-start;gap:8px;min-width:0;padding:12px!important;border:1px solid #dbe1e9!important;border-radius:12px!important;background:#fff!important;color:#263348!important;box-sizing:border-box}
#app .capacity-food-card[aria-pressed=true]{border-color:#ed1c24!important;background:#fff4f5!important}
#app .capacity-food-card img,#app .capacity-food-placeholder{width:100%;height:80px;object-fit:contain;flex-shrink:0}
#app .capacity-food-card strong{font-size:12px;line-height:1.45;text-align:center;white-space:normal}
#app .capacity-food-card small{font-size:11px;color:#738198}
#app .capacity-food-placeholder{display:grid;place-items:center;color:#8994a4;background:#f7f8fa;border-radius:8px}
@media(max-width:650px){#app .capacity-food-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:290px}}

#app .capacity-compact{max-width:900px;margin-inline:auto!important;gap:18px!important}
#app .capacity-combo{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
#app #capacity-food-options:not([hidden]){position:absolute;top:100%;left:0;right:0;z-index:25;max-height:250px;overflow-y:auto;background:#fff;border:1px solid #dce1e8;border-radius:10px;padding:5px;box-shadow:0 8px 22px #26334816}
#app #capacity-food-options>button{display:flex;align-items:center;gap:12px;width:100%;padding:7px 10px!important;border:0!important;background:#fff!important;color:#263348!important;text-align:left;min-height:52px}
#app #capacity-food-options>button:hover{background:#fff1f3!important}
#app #capacity-food-options img{width:48px;height:40px;object-fit:contain;flex:none}
#app #capacity-selected:not([hidden]){display:flex;align-items:center;gap:14px;padding:10px 14px;border:1px solid #e3e7ed;border-radius:10px;background:#fafbfc}
#app #capacity-selected img{width:65px;height:50px;object-fit:contain}
#app #capacity-edit:not([hidden]){display:flex;flex-direction:column;gap:18px}
#app .capacity-mode{display:flex;gap:8px;flex-wrap:wrap}
#app .capacity-mode button{flex:1;min-width:110px;background:#fff;border:1px solid #dce1e8;border-radius:9px;padding:10px}
#app .capacity-mode button[aria-pressed=true]{color:#ed1c24;background:#fff1f3;border-color:#ed1c24}
#app .capacity-break-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#app #capacity-inputs label{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0!important}
#app #capacity-inputs input{width:100%;min-width:0;height:44px;box-sizing:border-box;margin:0!important}
#app #capacity-configured>span{display:block;margin-bottom:8px;color:#748096;font-size:12px}
#app #capacity-configured>div{display:flex;flex-wrap:wrap;gap:8px}
#app #capacity-configured button{font-size:12px;padding:7px 10px;min-height:34px;border:1px solid #e0e4ea;border-radius:8px;background:#fff}
#app .capacity-compact [hidden]{display:none!important}
@media(max-width:650px){#app .capacity-break-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#app .capacity-compact{max-width:100%}}

/* Food strip participates in normal flow; no floating dropdown. */
#app .capacity-compact{max-width:none;margin:8px 0!important;padding:20px!important;gap:14px!important}
#app .capacity-combo{gap:10px}
#app .capacity-food-strip{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;gap:8px;align-items:center;min-width:0}
#app .capacity-compact #capacity-food-options:not([hidden]){position:static!important;display:flex!important;align-items:stretch;gap:8px;overflow-x:auto!important;overflow-y:hidden!important;width:100%;max-height:none!important;min-width:0;left:auto;right:auto;top:auto;border:0!important;border-radius:0;padding:2px!important;background:transparent;box-shadow:none!important;scrollbar-width:none;scroll-snap-type:x proximity;box-sizing:border-box}
#app #capacity-food-options::-webkit-scrollbar{display:none}
#app .capacity-compact #capacity-food-options>button{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;flex:0 0 calc((100% - 72px)/10);width:calc((100% - 72px)/10);min-width:76px;min-height:100px;padding:7px 5px!important;border:1px solid #e0e4ea!important;border-radius:9px;background:#fff!important;scroll-snap-align:start;box-sizing:border-box}
#app .capacity-compact #capacity-food-options>button[aria-pressed=true]{border-color:#ed1c24!important;background:#fff3f4!important}
#app .capacity-compact #capacity-food-options img{width:100%;height:48px;object-fit:contain}
#app .capacity-compact #capacity-food-options span{font-size:10px;line-height:1.35;text-align:center;white-space:normal;overflow-wrap:anywhere}
#app .capacity-food-strip>button{width:30px;min-width:30px;min-height:34px;height:34px;padding:0!important;font-size:24px;border:1px solid #e1e5eb;border-radius:50%;background:#fff;line-height:1}
#app .capacity-food-strip>button:disabled{opacity:.35}
#app .management-main:has(#capacity-editor)>.settings-finance-back{margin-bottom:8px!important}
@media(max-width:650px){#app .capacity-compact{padding:14px!important}#app .capacity-food-strip{grid-template-columns:26px minmax(0,1fr) 26px;gap:5px}#app .capacity-food-strip>button{width:26px;min-width:26px}#app .capacity-compact #capacity-food-options>button{flex-basis:78px;width:78px}}

#app .day-end-date-toolbar{display:flex!important;align-items:center;gap:12px;margin:4px 0 20px!important;padding:0 0 16px!important;border-bottom:1px solid #e0e5ec}
#app .day-end-date-controls{display:flex;align-items:center;padding:5px;background:#fff;border:1px solid #dfe5ed;border-radius:13px;gap:4px}
#app .day-end-date-controls>button{display:grid;place-items:center;width:34px;min-width:34px;height:38px;min-height:38px;padding:6px;border:0;background:transparent;border-radius:8px;color:#61718a}
#app .day-end-date-controls>button:hover{background:#fff0f2;color:#ed1c24}
#app .day-end-date-controls>button:disabled{opacity:.3}
#app .day-end-date-toolbar button::before,#app .day-end-date-toolbar button::after{display:none!important;content:none!important}
#app .day-end-date-toolbar svg{width:20px;height:20px;flex:none}
#app .day-end-date-display{position:relative;display:flex!important;align-items:center;gap:11px;padding:4px 14px!important;margin:0!important;cursor:pointer;min-width:175px;box-sizing:border-box}
#app .day-end-date-display>svg{color:#ed1c24}
#app .day-end-date-display>span{display:flex;flex-direction:column;gap:2px;pointer-events:none}
#app .day-end-date-display strong{font-size:14px;line-height:1.4;color:#28364b}
#app .day-end-date-display small{font-size:11px;color:#8793a4;line-height:1.4}
#app .day-end-date-display #day-end-day{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;cursor:pointer;margin:0!important;min-height:0}
#app .day-end-date-display #day-end-day::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
#app .day-end-date-display:focus-within{outline:2px solid #ed1c24;outline-offset:2px;border-radius:8px}
#app .day-end-date-toolbar .day-end-today{min-height:38px;padding:8px 15px;border:1px solid #f1c8cf;background:#fff1f3;color:#db1c31;border-radius:9px;font-size:12px}
#app .day-end-date-toolbar .day-end-today:disabled{opacity:.5}
@media(max-width:420px){#app .day-end-date-toolbar{gap:8px}#app .day-end-date-display{min-width:0;padding:4px 8px!important;gap:7px}#app .day-end-date-display strong{font-size:12px}#app .day-end-date-controls>button{width:28px;min-width:28px}#app .day-end-date-toolbar .day-end-today{padding:8px 10px}}

#app .day-end-date-controls>.day-end-date-display{width:auto;height:auto;min-height:46px;text-align:left;background:transparent;border:0;border-radius:8px}
.ck-day-calendar{position:fixed;z-index:1000;background:#fff;border:1px solid #e1e6ee;border-radius:17px;padding:15px;box-shadow:0 14px 45px #25334b26;box-sizing:border-box;color:#29384d;font-family:inherit}
.ck-day-calendar button{font-family:inherit;cursor:pointer;box-shadow:none!important;transform:none!important}
.ck-day-calendar button::before,.ck-day-calendar button::after{content:none!important;display:none!important}
.ck-calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.ck-calendar-heading strong{font-size:14px;text-transform:capitalize}
.ck-calendar-heading button{display:grid;place-items:center;width:30px;min-height:30px;height:30px;padding:0;border:1px solid #e8ebf0;border-radius:8px;background:#f8f9fb;color:#61718a;font-size:22px}
.ck-calendar-week,.ck-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ck-calendar-week{margin-bottom:7px}
.ck-calendar-week span{text-align:center;font-size:11px;font-weight:600;color:#96a0b0;padding:5px 0}
.ck-calendar-days button{display:grid;place-items:center;padding:0;min-width:0;min-height:33px;height:33px;border:1px solid transparent;border-radius:9px;background:transparent;color:#34435a;font-size:12px;line-height:1}
.ck-calendar-days button.is-outside{color:#aeb7c5}
.ck-calendar-days button.is-today{border-color:#f1bbc5;color:#ed1c24}
.ck-calendar-days button:not(:disabled):hover{background:#fff0f3;color:#e31d34}
.ck-calendar-days button.is-selected{background:#ed1c24!important;color:#fff!important;border-color:#ed1c24}
.ck-day-calendar button:disabled{opacity:.28;cursor:default}
.ck-day-calendar button:focus-visible{outline:2px solid #ed1c24;outline-offset:1px}
.ck-calendar-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0f4;padding-top:10px;margin-top:11px}
.ck-calendar-footer button{font-size:11px;padding:6px 9px;min-height:30px;border:0;border-radius:7px;background:transparent;color:#77859b}
.ck-calendar-footer button:first-child{color:#ed1c24;background:#fff2f4}

#app .setup-screen{background:#fff;border:1px solid #e0e5ec;border-radius:16px;padding:22px;margin:12px 0;min-width:0}
#app .setup-screen h2{font-size:20px;margin:0 0 20px}
#app .setup-screen label{display:flex;flex-direction:column;gap:7px;margin:0!important;min-width:0;font-size:12px}
#app .setup-screen input:not([type=checkbox]),#app .setup-screen select{width:100%;min-width:0;box-sizing:border-box;margin:0!important;min-height:40px}
#app .setup-control-row{display:grid;grid-template-columns:1fr 2fr;gap:16px;margin-bottom:20px}
#app .setup-breaks{display:grid;gap:10px}
#app .setup-break-row{display:grid;grid-template-columns:110px minmax(100px,1fr) minmax(100px,1fr);align-items:center;gap:14px;padding:14px;border:1px solid #e4e8ee;border-radius:10px}
#app .setup-break-row strong{font-size:13px}
#app .setup-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
#app .setup-actions span{font-size:12px;color:#6d7c90}
#app .setup-home-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:22px;min-width:0}
#app .setup-screen fieldset{border:1px solid #e1e6ed;border-radius:11px;padding:14px;margin:0 0 14px;min-width:0}
#app .setup-screen legend{font-size:13px;font-weight:600;padding:0 6px}
#app .setup-screen .setup-check{display:flex;flex-direction:row;align-items:center;gap:8px;padding:6px 0;line-height:1.4}
#app .setup-screen .setup-check input{width:16px;height:16px;min-height:0;flex:none;accent-color:#ed1c24}
#app .setup-categories{max-height:230px;overflow-y:auto}
#app #setup-products{max-height:210px;overflow:auto}
#app #setup-products button{display:block;width:100%;text-align:left;padding:8px;border:0;background:#f7f8fa;font-size:12px;margin-top:5px}
#app #setup-featured{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
#app #setup-featured button{font-size:11px;padding:6px 8px;border:1px solid #f0c3ca;border-radius:7px;background:#fff3f5}
#app .setup-preview{min-width:0;background:#f6f7f9;border:1px solid #e2e7ee;padding:10px;border-radius:12px}
#app .setup-preview-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px}
#app .setup-preview-toolbar select{width:auto;flex:1;font-size:12px}
#app .setup-preview p{font-size:11px;margin:10px 0;line-height:1.5}
#app #setup-preview-frame{display:block;width:100%;height:740px;background:#fff;border:1px solid #e0e4eb;border-radius:10px;box-sizing:border-box;margin:0 auto}
#app #setup-preview-frame.is-mobile{max-width:390px}
#app .setup-first-notice{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border:1px solid #f0cbd2;background:#fff4f6;border-radius:10px;margin-bottom:16px;font-size:13px}
#app .setup-screen button::before,#app .setup-screen button::after{content:none!important;display:none!important}
@media(max-width:1100px){#app .setup-home-layout{grid-template-columns:1fr}#app #setup-home{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#app #setup-home>.setup-actions{grid-column:1/-1}#app #setup-home fieldset{margin:0}#app #setup-preview-frame{height:650px}}
@media(max-width:600px){#app .setup-screen{padding:14px}#app .setup-control-row{grid-template-columns:1fr}#app .setup-break-row{grid-template-columns:1fr 1fr;gap:10px}#app .setup-break-row>strong{grid-column:1/-1}#app #setup-home{display:flex;flex-direction:column}#app .setup-first-notice{align-items:flex-start;flex-direction:column}}

/* Long settings editors must escape the fixed-height management overview. */
#app .app-shell.compact-shell.management-overview:has(:is(#canteen-setup,#capacity-editor)){height:auto!important;min-height:100dvh!important;overflow:visible!important}
#app .app-shell.compact-shell.management-overview:has(:is(#canteen-setup,#capacity-editor)) .work{height:auto!important;min-height:100dvh!important;max-height:none!important;display:block!important;overflow:visible!important;padding-bottom:36px!important}
#app .app-shell.compact-shell.management-overview:has(:is(#canteen-setup,#capacity-editor)) #content{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;flex:none!important}
#app .app-shell.compact-shell.management-overview:has(:is(#canteen-setup,#capacity-editor)) .management-layout{height:auto!important;min-height:0!important;overflow:visible!important}
#app .app-shell.compact-shell.management-overview:has(:is(#canteen-setup,#capacity-editor)) .management-main{display:block!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
#app .setup-screen{flex-shrink:0}
@media(max-width:850px){#app .app-shell.compact-shell.management-overview:has(:is(#canteen-setup,#capacity-editor)) .work{padding-bottom:110px!important}}

#app #setup-home fieldset .setup-section-controls[hidden]{display:none!important}
#app #setup-home fieldset.is-selected{border-color:#ed1c24;background:#fffafb}
#app #setup-home legend button{min-height:28px;padding:2px 5px;border:0;background:transparent;font-size:13px;text-align:left}
#app #setup-home fieldset{margin-bottom:12px}

#app .setup-block-layout{grid-template-columns:260px minmax(0,1fr);gap:18px}
#app .setup-block-sidebar{min-width:0}
#app #setup-block-list{display:flex;flex-direction:column;gap:5px}
#app #setup-block-list>small{font-size:11px;margin:10px 0 4px;color:#8a97a9}
#app #setup-block-list>button{min-height:35px;padding:8px 10px;text-align:left;font-size:12px;border:1px solid #e4e8ed;border-radius:8px;background:#fff}
#app #setup-block-list>button.is-selected{border-color:#ed1c24;color:#ed1c24;background:#fff2f4}
#app #setup-add-section{width:100%;margin:12px 0;font-size:12px;border:1px dashed #ed1c24;color:#ed1c24;background:#fff8f9;min-height:38px}
#app #setup-block-settings{border-top:1px solid #e4e8ef;padding-top:14px;display:flex;flex-direction:column;gap:12px}
#app #setup-block-settings h3{font-size:14px;margin:0}
#app #block-product-count{font-size:12px;color:#8a7580}
#app #block-selected-products{display:flex;flex-wrap:wrap;gap:5px}
#app #block-selected-products button{font-size:11px;min-height:29px;padding:5px 7px;border:1px solid #f0c4cc;background:#fff3f5;border-radius:7px;text-align:left}
#app #block-product-results{display:grid;gap:5px;max-height:280px;overflow-y:auto}
#app #block-product-results button{display:flex;align-items:center;gap:7px;padding:6px;text-align:left;font-size:11px;min-height:45px}
#app #block-product-results img{width:38px;height:32px;object-fit:contain;flex:none}
#app #block-product-results b{margin-left:auto;color:#ed1c24}
#app .setup-block-order{display:flex;gap:5px;flex-wrap:wrap}
#app .setup-block-order button{font-size:10px;min-height:30px;padding:5px 7px}
#app .setup-block-sidebar .setup-actions{flex-direction:column;align-items:stretch}
#app .setup-preview-canvas{position:relative;width:100%;overflow:hidden;margin-top:12px;background:#eef0f4;border:1px solid #e1e5ec;border-radius:10px;min-width:0}
#app .setup-preview-canvas #setup-preview-frame{position:absolute;left:0;top:0;max-width:none!important;margin:0!important;border:0;border-radius:0;transform-origin:top left;display:block}
@media(max-width:900px){#app .setup-block-layout{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:650px){#app .setup-block-layout{grid-template-columns:1fr}#app .setup-preview{order:-1}#app .setup-preview-canvas{max-height:500px}}

#modal .ad-editor-fields{grid-template-columns:minmax(0,1fr) minmax(120px,170px) minmax(160px,200px)}
@media(max-width:650px){#modal .ad-editor-fields{grid-template-columns:1fr 1fr}#modal .ad-editor-fields>label:first-child{grid-column:1/-1}}

/* Settings cards fill the available workspace instead of fixed-width tracks. */
#app .settings-simple-grid{display:grid;width:100%;max-width:none;box-sizing:border-box;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#app .settings-simple-grid>.settings-finance-card{width:100%;max-width:none;min-width:0;box-sizing:border-box;height:100%}
@media(max-width:1200px){#app .settings-simple-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#app .settings-simple-grid>.settings-finance-card:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:600px){#app .settings-simple-grid{grid-template-columns:1fr}}

/* Compact settings labels remain on a single line. */
#app .settings-simple-grid>.settings-finance-card{gap:10px;padding:16px}
#app .settings-simple-grid .settings-finance-card strong{font-size:13px;line-height:1.4;white-space:nowrap}
#app .settings-simple-grid .settings-finance-card small{font-size:10px;line-height:1.5;white-space:nowrap}
#app .settings-simple-grid .settings-card-icon{flex-shrink:0;width:34px;height:34px}
#app .settings-simple-grid .settings-card-arrow{flex-shrink:0}
@media(min-width:1201px){#app .settings-simple-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}

#app .settings-simple-grid:has(>.settings-finance-card:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){#app .settings-simple-grid:has(>.settings-finance-card:nth-child(4)){grid-template-columns:1fr}}

#app .setup-toggle-list{display:grid;gap:12px;max-width:760px}#app .setup-toggle{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px;border:1px solid #e1e5eb;border-radius:12px;margin:12px 0;background:#fff}#app .setup-toggle input{width:20px;height:20px;accent-color:#ed1c24;flex-shrink:0}#app .setup-weekdays{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 24px}#app .setup-weekdays label{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid #e1e5eb;border-radius:10px}#app .setup-weekdays input{accent-color:#ed1c24}#app .setup-closure-add{display:grid;grid-template-columns:1fr 1fr 1.3fr auto;align-items:end;gap:12px;margin:16px 0}#app .setup-closure-add label{display:grid;gap:7px}#app .setup-closure-add input{min-width:0;width:100%;box-sizing:border-box}#app .setup-closure-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid #e1e5eb;border-radius:10px;margin:10px 0}#app .setup-closure-row span{display:grid;gap:4px}#app .setup-closure-row small{color:#748094}@media(max-width:900px){#app .setup-closure-add{grid-template-columns:1fr 1fr}}@media(max-width:600px){#app .setup-closure-add{grid-template-columns:1fr}#app .setup-actions{flex-wrap:wrap}}

#app #canteen-setup .setup-toggle{display:flex;flex-direction:row;text-align:left;justify-content:space-between;align-items:center}
#app #canteen-setup .setup-weekdays label{display:flex;flex-direction:row;align-items:center;gap:8px}
#app #canteen-setup .setup-weekdays label:has(input:checked){background:#fff2f3;border-color:#f6b4bb;color:#c7192c}
#app #canteen-setup .setup-toggle input{appearance:none;-webkit-appearance:none;position:relative;display:block;width:42px;height:24px;min-height:24px;margin:0;padding:0;border:0;border-radius:20px;background:#d6dae1;cursor:pointer;box-shadow:none}
#app #canteen-setup .setup-toggle input::after{content:"";position:absolute;width:18px;height:18px;top:3px;left:3px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002;transition:transform .15s}
#app #canteen-setup .setup-toggle input:checked{background:#ed1c24}
#app #canteen-setup .setup-toggle input:checked::after{transform:translateX(18px)}
#app #canteen-setup .setup-toggle input:focus-visible{outline:2px solid #263348;outline-offset:3px}

#app #setup-notifications .setup-actions{justify-content:flex-start;max-width:760px;gap:12px}#app #setup-notifications .setup-actions .primary{margin-left:auto}

/* Compact, spaced setup screens with the shared branded date popup. */
#app #canteen-setup{padding:22px}
#app #canteen-setup h2{font-size:18px;line-height:1.4;margin:0 0 22px;font-weight:650}
#app #canteen-setup h3{font-size:14px;line-height:1.5;margin:26px 0 14px;font-weight:650}
#app #canteen-setup #setup-calendar>h3:first-child{margin-top:0}
#app #canteen-setup .setup-weekdays{gap:9px;margin:0 0 24px}
#app #canteen-setup .setup-weekdays label{padding:11px 13px;font-size:12px;border-radius:11px;cursor:pointer}
#app #canteen-setup .setup-weekdays input{appearance:none;-webkit-appearance:none;position:relative;width:17px;height:17px;min-height:17px;flex:0 0 17px;padding:0;margin:0;border:1.5px solid #c9ced8;border-radius:5px;background:#fff;box-shadow:none;cursor:pointer}
#app #canteen-setup .setup-weekdays input:checked{border-color:#ed1c24;background:#ed1c24}
#app #canteen-setup .setup-weekdays input:checked::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#app #canteen-setup .setup-weekdays input:focus-visible{outline:2px solid #34435c;outline-offset:3px}
#app #canteen-setup .setup-toggle{padding:14px 16px;margin:0;font-size:12px}
#app #canteen-setup .setup-closure-add{gap:14px;margin:0 0 20px}
#app #canteen-setup .setup-closure-add label{font-size:11px;gap:8px}
#app #canteen-setup .setup-closure-add input,#app #canteen-setup .setup-closure-add button{font-size:12px;min-height:44px}
#app #canteen-setup .setup-date-field{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:10px 12px;border:1px solid #dce3ee;border-radius:11px;background:#fff;color:#35445d;box-sizing:border-box;white-space:nowrap}
#app #canteen-setup .setup-date-field svg{width:18px;height:18px;flex-shrink:0;color:#ed1c24}
#app #canteen-setup .setup-date-field[aria-expanded=true]{border-color:#ed1c24;background:#fff6f7}
#app #canteen-setup .setup-holidays{margin-top:26px;border:1px solid #e2e6ee;border-radius:12px;overflow:hidden}
#app #canteen-setup .setup-holiday-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;background:#f8f9fb;border-bottom:1px solid #e2e6ee}
#app #canteen-setup .setup-holiday-heading h3{margin:0}
#app #canteen-setup #holiday-year{width:100px;min-height:36px;padding:6px 10px;font-size:12px}
#app #canteen-setup #holiday-list{max-height:270px;overflow:auto;overscroll-behavior:contain}
#app #canteen-setup .setup-holiday-row{display:grid;grid-template-columns:145px minmax(0,1fr) auto;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid #eef0f4;font-size:12px;line-height:1.5}
#app #canteen-setup .setup-holiday-row:last-child{border-bottom:0}
#app #canteen-setup .setup-holiday-row time{color:#728096;font-size:11px}
#app #canteen-setup .setup-holiday-row small{font-size:10px;background:#f3f5f8;border-radius:6px;padding:4px 7px;color:#65758c;white-space:nowrap}
#app #canteen-setup .setup-toggle-list{gap:12px;margin:0 0 20px}
#app #canteen-setup #setup-notifications p{font-size:11px;line-height:1.7;max-width:760px;margin:12px 0 0}
#app #canteen-setup #setup-notifications p:empty{display:none}
#app #canteen-setup .setup-actions{margin-top:20px;gap:12px}
#app #canteen-setup .setup-actions button{font-size:12px;min-height:42px;padding:10px 15px}
#app .settings-finance-back:has(+#canteen-setup){margin:12px 0 18px}
#modal.barcode-modal .camera-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
#modal.barcode-modal .camera-actions>button{min-width:0;width:100%;margin:0;padding:10px 8px;font-size:12px;line-height:1.5;white-space:normal;box-sizing:border-box}
#modal.barcode-modal .camera-actions>button[hidden]{display:none!important}
#modal.barcode-modal .camera-actions>.primary,#modal.barcode-modal #camera-cart{grid-column:auto}
#modal.barcode-modal #price-manual{margin:18px 0 12px}#modal.barcode-modal #price-manual label{display:grid;gap:8px;font-size:12px}#modal.barcode-modal #price-manual input{width:100%;min-height:44px;box-sizing:border-box}
#modal.barcode-modal .camera-actions>button>.ui-icon{display:none!important}
@media(max-width:650px){#app #canteen-setup{padding:18px}#app #canteen-setup h2{font-size:16px}#app #canteen-setup h3{font-size:13px}#app #canteen-setup .setup-closure-add{grid-template-columns:1fr}#app #canteen-setup .setup-holiday-row{grid-template-columns:minmax(0,1fr) auto;gap:5px 10px}#app #canteen-setup .setup-holiday-row time{grid-column:1/-1}}