:root { font-family: system-ui, sans-serif; color: #202a24; background: #faf8f2; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.masthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; background: #163f2d; color: white; padding: 1rem clamp(1rem, 4vw, 3rem); }
.masthead strong { letter-spacing: .05em; }
.masthead span { color: #dfebe2; }
main { max-width: 80rem; margin: auto; padding: clamp(.75rem, 3vw, 2rem); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
h2 { font-size: 1.08rem; }
h3 { font-size: 1rem; }
.card, aside { background: #fff; border: 1px solid #d9dfd5; border-radius: 1rem; padding: 1rem; display: grid; gap: .8rem; align-content: start; min-width: 0; }
.login { max-width: 27rem; margin: 2rem auto; padding: clamp(1rem, 4vw, 2rem); }
form, label, .list, .content, #data { display: grid; gap: .65rem; min-width: 0; }
form { gap: 1rem; }
label { font-weight: 600; }
input, select, button { font: inherit; min-height: 2.75rem; border-radius: .55rem; padding: .5rem .8rem; }
input, select { border: 1px solid #89988e; background: white; color: inherit; width: 100%; }
button { border: 1px solid #163f2d; background: #163f2d; color: white; cursor: pointer; font-weight: 650; }
button:hover:not(:disabled) { filter: brightness(.92); }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid #a34525; outline-offset: 3px; }
.secondary, nav button[aria-pressed=false] { background: #e9efe5; color: #163f2d; border-color: #c5d3c5; }
#workspace { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
#workspace > aside { position: sticky; top: 1rem; }
nav { display: grid; gap: .5rem; }
nav button { text-align: left; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .75rem; }
.metric-value { font-size: 1.55rem; font-variant-numeric: tabular-nums; font-weight: 750; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; text-align: left; }
th, td { padding: .65rem .55rem; border-bottom: 1px solid #d9dfd5; vertical-align: middle; }
th { color: #43584b; background: #e9efe5; }
td { overflow-wrap: anywhere; }
.search { max-width: 24rem; }
.inline-form { grid-template-columns: minmax(6rem, 1fr) auto; align-items: end; }
summary { color: #163f2d; font-weight: 650; cursor: pointer; padding: .7rem 0; }
.toolbar, .actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.toolbar { justify-content: space-between; }
.columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; }
.item { display: grid; gap: .25rem; padding: .75rem; border: 1px solid #d9dfd5; border-radius: .6rem; overflow-wrap: anywhere; }
button.item { color: inherit; background: white; text-align: left; }
button.item[aria-pressed=true] { background: #e9efe5; border-color: #55755f; }
.muted { color: #526059; font-size: .9rem; }
#error, #status:not(:empty) { max-width: 44rem; margin: 0 auto 1rem; padding: .7rem 1rem; border-radius: .55rem; background: #e9efe5; }
#error { color: #8b2914; background: #f9e8de; }
@media (max-width: 46rem) {
  #workspace, .columns { grid-template-columns: 1fr; }
  #workspace > aside { position: static; }
  nav { display: flex; flex-wrap: wrap; }
  aside { grid-template-columns: 1fr auto; align-items: center; }
  aside h2 { grid-column: 1 / -1; }
}

body[data-panel=store] #workspace { grid-template-columns: minmax(0, 1fr); max-width: 62rem; margin: 0 auto; }
body[data-panel=store] #workspace > aside { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; }
body[data-panel=store] nav { display: flex; flex-wrap: wrap; flex: 1 1 30rem; }
.work-task { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.4rem; text-align: left; background: #e9efe5; color: #163f2d; border-color: #c5d3c5; }
.work-task strong { background: #163f2d; color: #fff; border-radius: .4rem; min-width: 2rem; text-align: center; padding: .15rem .35rem; }

body[data-panel=platform] { background: #eef2f7; color: #172638; }
body[data-panel=platform] .masthead, body[data-panel=platform] #workspace > aside { background: #14263c; color: #f4f8ff; }
body[data-panel=platform] .masthead span { color: #ccd9ec; }
body[data-panel=platform] #workspace > aside { border-color: #14263c; }
body[data-panel=platform] nav button, body[data-panel=platform] #sign-out { background: #233850; color: #f4f8ff; border-color: #4a6381; }
body[data-panel=platform] nav button[aria-pressed=true] { background: #d9e8ff; color: #162941; border-color: #d9e8ff; }
body[data-panel=platform] .card { border-color: #d4dce7; }
body[data-panel=platform] .metrics .card { border-top: 3px solid #37639a; }
body[data-panel=platform] th { background: #e2eaf5; color: #243952; }


/* Admin management: usable controls at narrow desktop and mobile widths. */
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; scrollbar-gutter: stable; }
.table-scroll table { min-width: 760px; }
.table-scroll th, .table-scroll td { white-space: normal; min-width: 6rem; }
.table-scroll td:last-child { min-width: 13rem; }
.table-scroll td:first-child { min-width: 9rem; }
.compact-actions { flex-wrap: nowrap; }
.compact-actions button { min-height: 2.5rem; min-width: max-content; padding: .45rem .7rem; white-space: nowrap; }
.section-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1rem; }
.section-actions > p { flex: 1 1 14rem; }
.section-actions > button { flex: 0 0 auto; white-space: nowrap; }
.danger { color: #8e2d1b; border-color: #e8b8ae; background: #fff2ef; }
.danger:hover:not(:disabled) { background: #ffe3dd; filter: none; }
.editor-dialog { border: 1px solid #c8d2c9; border-radius: 1rem; width: min(94vw, 31rem);
  max-height: min(90dvh, 48rem); overflow-y: auto; color: #202a24; background: #fff;
  padding: clamp(1rem, 3vw, 1.65rem); box-shadow: 0 1.25rem 4rem #0003; }
.editor-dialog::backdrop { background: rgb(11 28 24 / .55); }
.editor-dialog h2 { font-size: 1.45rem; }
.editor-dialog > p { margin-top: .45rem; margin-bottom: 1rem; }
.editor-dialog label { display: grid; gap: .4rem; }
.editor-dialog form { gap: 1rem; }
.editor-dialog select, .editor-dialog input { min-height: 2.8rem; }
.editor-dialog .form-actions { justify-content: flex-end; margin-top: .5rem; }
.editor-dialog .form-actions button { flex: 0 1 auto; padding-inline: 1rem; }
.form-error { border-radius: .6rem; background: #fff2ef; color: #8e2d1b; padding: .75rem; }
@media (max-width: 46rem) {
  .compact-actions { flex-wrap: wrap; }
  .section-actions > button { width: 100%; }
  .editor-dialog { width: calc(100vw - 1rem); max-height: 94dvh; }
}



/* Weekly Store Timings — visual rhythm optimized for desktop and narrow mobile widths. */
.hours-status { color: #155e3b; font-size: .88rem; font-weight: 700; }
.hours-form { gap: 1rem; }
.hours-form > button[type=submit] { justify-self: start; min-width: 12rem; }
.hours-bulk { display: grid; gap: .85rem; padding: 1rem; border-radius: .9rem;
  border: 1px solid #b8cfc0; background: #f0f6ee; }
.hours-bulk > div:first-child { display: grid; gap: .3rem; }
.hours-bulk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .75rem; align-items: end; }
.hours-bulk-grid > button { align-self: end; white-space: normal; }
.hours-bulk label, .hours-day label { display: grid; gap: .4rem; }
.hours-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.hours-day { display: grid; align-content: start; gap: .85rem; border: 1px solid #d7e0d7;
  border-radius: .85rem; padding: .95rem; background: white; }
.hours-day-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; }
.hours-day-header > strong { font-size: 1rem; color: #153a2b; }
.hours-toggle { display: inline-flex !important; align-items: center; gap: .55rem !important;
  min-height: 2.25rem; font-size: .9rem; color: #1a4b35; }
.hours-toggle input[type=checkbox] { width: 1.3rem; height: 1.3rem; min-height: 1.3rem; margin: 0; accent-color: #163f2d; }
.hours-clock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.hours-day.hours-closed { background: #f4f5f3; border-style: dashed; }
.hours-closed .hours-toggle { color: #59635c; }
.hours-form input[type=time]:disabled { background: #e8ebe7; color: #5d6a62; }
@media (max-width: 60rem) {
  .hours-bulk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hours-bulk-grid > button { grid-column: 1 / -1; }
}
@media (max-width: 42rem) {
  .hours-list { grid-template-columns: 1fr; }
  .hours-bulk-grid { grid-template-columns: 1fr 1fr; }
  .hours-form > button[type=submit] { width: 100%; }
}


/* Pilot single-panel Super Admin operations */
body[data-panel="platform"] .work-task { text-align: left; min-width: 0; }
body[data-panel="platform"] .work-task span { overflow-wrap: anywhere; }
.platform-fulfilment { display: grid; gap: .85rem; margin-top: 1rem; }
.platform-fulfilment > button { width: 100%; }
.fulfilment-card { display: grid; gap: .85rem; min-width: 0; }
.fulfilment-card .card { margin: .2rem 0; padding: .85rem; }
.fulfilment-card form { display: grid; gap: .75rem; }
.fulfilment-card form label { display: grid; gap: .3rem; min-width: 0; }
.fulfilment-card form input, .fulfilment-card form select { min-width: 0; width: 100%; }
.fulfilment-card .primary-action, .platform-fulfilment .primary-action {
  color: #fff; background: #16452f; border-color: #16452f; min-height: 2.75rem;
  border-radius: .65rem; font-weight: 700;
}
.fulfilment-card .primary-action:focus-visible, .platform-fulfilment .primary-action:focus-visible {
  outline: 3px solid #84c5a2; outline-offset: 2px;
}
@media (max-width: 48rem) {
  body[data-panel="platform"] .columns { grid-template-columns: minmax(0, 1fr); }
  .platform-fulfilment { width: 100%; }
}

.product-gallery { min-inline-size: 0; margin: 0; padding: .7rem; border: 1px solid #c5d3c5; border-radius: .65rem; }
.product-gallery legend { padding: 0 .3rem; font-weight: 650; }
.product-gallery summary { width: fit-content; }
.product-gallery details > input, .product-gallery details > .actions, .product-gallery details > p { margin-bottom: .55rem; }
.gallery-selected, .catalog-product { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.gallery-thumbnail { width: 3.2rem; height: 3.2rem; flex: 0 0 auto; border-radius: .45rem; object-fit: cover; background: #faf8f2; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); gap: .5rem; }
button.gallery-option { min-width: 0; padding: .35rem; display: grid; gap: .3rem; align-content: start; color: #163f2d; background: #fff; border-color: #c5d3c5; font-size: .84rem; overflow-wrap: anywhere; }
button.gallery-option[aria-pressed=true] { border-color: #163f2d; box-shadow: inset 0 0 0 1px #163f2d; background: #e9efe5; }
.gallery-option img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .35rem; background: #faf8f2; }
.gallery-online { display: grid; gap: .55rem; margin-bottom: .75rem; padding-block: .55rem; border-block: 1px solid #d8dfd5; }
.online-photo { min-width: 0; display: grid; gap: .25rem; align-content: start; }
.online-photo a { color: #315644; font-size: .78rem; text-align: center; }
.gallery-more { grid-column: 1 / -1; justify-self: start; }
.gallery-sources { margin-top: .8rem; }

.fee-status { color: #163f2d; font-size: 1.4rem; font-weight: 750; margin-block: .65rem; }
.fee-editor { display: grid; gap: .8rem; max-width: 32rem; }
.fee-editor > label { display: grid; gap: .3rem; }
.fee-editor > button { justify-self: start; min-height: 2.75rem; }
.fee-preview { padding: .65rem .85rem; background: #e9efe5; color: #163f2d; border-radius: .55rem; }


.support-message { white-space: pre-wrap; overflow-wrap: anywhere; }
textarea {
  font: inherit;
  color: inherit;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #b6c4ba;
  border-radius: 8px;
  resize: vertical;
}