/* /////////////////////////////////////
   LAYOUT
   Shared page structure, cards, panels and page actions
///////////////////////////////////// */

/*************************************
  SHARED PANELS / OPTION CARDS
  Reusable framework components
*************************************/

.cc-panel {
  --cc-panel-bg: var(--cc-colour-white);
  --cc-panel-border: var(--cc-colour-card-border);

  width: 100%;
  padding: clamp(0.75rem, 1vw, 1rem);
  border: 1px solid var(--cc-panel-border);
  border-radius: var(--cc-radius-lg, 0.85rem);
  background: var(--cc-panel-bg);
}

.cc-panel--soft {
  --cc-panel-bg: var(--cc-colour-surface, #fff);
  --cc-panel-border: var(--cc-colour-border, #d1d5db);
}

.cc-panel--neutral {
  --cc-panel-bg: var(--cc-colour-panel-neutral);
  --cc-panel-border: var(--cc-colour-card-border);
}

.cc-panel + .cc-panel {
  margin-top: var(--cc-space-3, 0.75rem);
}

.cc-panel__title {
  margin: 0 0 var(--cc-space-3, 0.75rem);
  color: var(--cc-text, var(--cc-colour-ink));
  font-size: clamp(0.82rem, 0.16vw + 0.78rem, 0.95rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cc-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--cc-space-2, 0.5rem);
}

.cc-option-card {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--cc-colour-card-border);
  border-radius: var(--cc-radius-md, 0.6rem);
  background: var(--cc-colour-white);
  color: var(--cc-text, var(--cc-colour-ink));
  text-align: left;
}

.cc-option-card:nth-child(even) {
  background: var(--cc-colour-white);
}

.cc-option-card:hover {
  border-color: var(--cc-colour-border-strong);
  background: var(--cc-colour-panel-selected);
}

.cc-option-card__title {
  color: var(--cc-text, var(--cc-colour-ink));
  font-size: clamp(0.84rem, 0.12vw + 0.8rem, 0.92rem);
  font-weight: 500;
  line-height: 1.2;
}

.cc-option-card__meta {
  color: var(--cc-text-muted, var(--cc-colour-text-soft));
  font-size: clamp(0.72rem, 0.1vw + 0.7rem, 0.8rem);
  line-height: 1.2;
}

.cc-panel .muted {
  color: var(--cc-colour-text-panel);
}

/*************************************
  SHARED ACCORDION
  Native details/summary component
*************************************/

.accordion {
  width: 100%;
  margin-block-start: var(--cc-space-3, 0.75rem);
}

.accordion-item {
  border: 1px solid var(--cc-colour-border, #d1d5db);
  background: var(--cc-colour-surface, #fff);
}

.accordion-item:first-child {
  border-start-start-radius: var(--cc-radius-md, 0.6rem);
  border-start-end-radius: var(--cc-radius-md, 0.6rem);
}

.accordion-item:last-child {
  border-end-start-radius: var(--cc-radius-md, 0.6rem);
  border-end-end-radius: var(--cc-radius-md, 0.6rem);
}

.accordion-item + .accordion-item {
  border-block-start: 0;
}

.accordion-header {
  margin: 0;
  list-style: none;
  cursor: pointer;
}

.accordion-header::-webkit-details-marker {
  display: none;
}

.accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3, 0.75rem);
  width: 100%;
  padding: var(--cc-space-3, 0.75rem);
  color: var(--cc-colour-text, var(--cc-colour-ink));
  font-weight: 500;
  line-height: 1.3;
}

.accordion-button::after {
  flex: 0 0 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 0.15s ease-in-out;
}

.accordion-item[open] > .accordion-header .accordion-button::after {
  transform: rotate(-135deg);
}

.accordion-body {
  padding: 0 var(--cc-space-3, 0.75rem) var(--cc-space-3, 0.75rem);
  border-block-start: 1px solid var(--cc-colour-border-soft, var(--cc-colour-border, #d1d5db));
}

.accordion-body > :first-child {
  margin-block-start: var(--cc-space-3, 0.75rem);
}

.accordion-body > :last-child {
  margin-block-end: 0;
}


/* /////////////////////////////////////
   DESKTOP FULL-WIDTH APP LAYOUT
   Practical admin/table workspace
///////////////////////////////////// */

:where(main) {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
}

@media (min-width: 47.5rem) {
  :where(main) {
    padding-inline: clamp(1rem, 2vw, 2rem);
  }

  .sheet-main {
    inline-size: 100%;
    max-inline-size: none;
  }

  .sheet-card {
    inline-size: 100%;
    max-inline-size: none;
  }
}

/* /////////////////////////////////////
   SHARED PAGE FLOW
///////////////////////////////////// */

:where(main) {
  width: 100%;
  display: grid;
  flex: 1 0 auto;
  gap: var(--cc-section-gap, clamp(0.75rem, 2vw, 1.25rem));
}

/* /////////////////////////////////////
   SHARED FOOTER
///////////////////////////////////// */

@media print {
}

/* /////////////////////////////////////
   SHARED SURFACES / CARDS
///////////////////////////////////// */

:where(
  .card,
  .sheet-card,
  .panel,
  .cc-card,
  .summary-card,
  .dashboard-card,
  .report-metric-card,
  .report-chart-card,
  .section-card,
  .product-check-card,
  .recipe-card,
  .invoice-card,
  .invoice-upload-card,
  .mobile-order-line-card,
  .mobile-admin-card
) {
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
  background: var(--cc-card-bg, var(--cc-colour-white));
  border: 1px solid var(--cc-colour-card-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: none !important;
  padding: var(--cc-card-padding, clamp(0.85rem, 2vw, 1.5rem));
}

:where(
  .cc-card,
  .cc-panel,
  .product-check-card,
  .report-metric-card,
  .login-card
) {
  box-shadow: none !important;
}

:where(.card, .sheet-card, .panel) :where(h1, h2, h3) {
  color: var(--cc-colour-text);
}

:where(.sheet-card) {
  background: var(--cc-sheet-bg, var(--cc-colour-white));
}

.card--warning {
  background: var(--cc-colour-warning-soft);
  border-color: var(--cc-colour-warning-line, var(--cc-colour-warning));
  color: var(--cc-colour-ink-strong);
}

.card--warning :where(h1, h2, h3, strong) {
  color: var(--cc-colour-ink-strong);
}

.card--warning :where(.muted) {
  color: var(--cc-colour-ink-muted);
}

/* /////////////////////////////////////
   SHARED ACTION ROWS / TOOLBARS
///////////////////////////////////// */

:where(
  .page-actions,
  .form-actions,
  .actions,
  .toolbar,
  .filters,
  .admin-actions,
  .admin-card-actions
) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
  align-items: center;
}

:where(.page-actions) {
  margin-block-end: clamp(0.75rem, 2vw, 1.25rem);
}

:where(.control-row) {
  display: grid;
  gap: var(--cc-space-3, 0.75rem);
  margin-block-end: clamp(0.75rem, 2vw, 1.25rem);
}

:where(.control-row) > :where(.page-actions) {
  margin-block-end: 0;
}

@media (min-width: 48rem) {
  :where(.control-row) {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  :where(.control-row) > :where(.page-actions) {
    justify-content: flex-end;
  }
}

@media (min-width: 64rem) {
  :where(main) {
    gap: clamp(1rem, 2vw, 1.75rem);
  }
}

/* /////////////////////////////////////
   SHARED CARD / MODULE GRID SPACING
   Global card/list spacing across pages and devices
///////////////////////////////////// */

:where(.card-grid, .summary-grid, .mobile-product-list, .mobile-card-list) {
  display: grid;
  gap: var(--cc-card-gap, clamp(0.75rem, 2vw, 1rem));
}

:where(.card-grid, .summary-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

:where(.card-grid) > :where(.card) {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4, 1rem);
}

:where(.card-grid) > :where(.card) > :where(.button, .btn, button) {
  margin-top: auto;
  align-self: flex-start;
}

:where(.summary-grid, .card-grid) {
  margin-block-start: var(--cc-space-3, 0.75rem);
}

:where(.checklist-form-list) {
  display: grid;
  gap: var(--cc-card-gap, clamp(0.65rem, 1.5vw, 0.85rem));
  margin-block-start: var(--cc-space-2, 0.5rem);
}

:where(.checklist-form-item) {
  display: grid;
  gap: 0.6rem;
  min-inline-size: 0;
  padding: var(--cc-card-padding, clamp(0.75rem, 1.5vw, 0.9rem));
  border: 1px solid var(--cc-colour-card-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-colour-white);
}

:where(.checklist-form-item__question, .checklist-form-item__guidance, .checklist-form-item__controls) {
  min-inline-size: 0;
}

:where(.checklist-form-item__question, .checklist-form-item__guidance) {
  display: grid;
  align-content: start;
  gap: var(--cc-space-1, 0.25rem);
}

:where(.checklist-form-item__question p, .checklist-form-item__guidance p) {
  margin: 0;
  overflow-wrap: anywhere;
}

:where(.checklist-form-label) {
  color: var(--cc-colour-muted);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
}

:where(.checklist-form-item__guidance p) {
  max-inline-size: 42rem;
}

:where(.checklist-form-item__controls) {
  display: grid;
  gap: 0.6rem;
}

:where(.checklist-form-field) {
  display: grid;
  gap: var(--cc-space-1, 0.25rem);
  margin: 0;
}

.checklist-form-field--details textarea {
  block-size: 5rem;
  min-height: 5rem;
  min-block-size: 5rem;
}

@media (min-width: 64rem) {
  :where(.checklist-form-item) {
    grid-template-columns: minmax(13rem, 0.95fr) minmax(17rem, 1.25fr) minmax(20rem, 1.1fr);
    align-items: start;
  }
}

@media (max-width: 40rem) {
  :where(.checklist-form-list) {
    gap: 0.6rem;
  }

  :where(.checklist-form-item) {
    padding: 0.75rem;
  }
}

:where(.page-actions, .admin-filter-form, .filter-form, .search-form, .filters) + :where(
  .card,
  .sheet-card,
  .panel,
  .cc-panel,
  .table-wrap,
  .status-message,
  .success-box,
  .error-message,
  .empty-state,
  .card-grid,
  .summary-grid,
  .mobile-product-list,
  .mobile-admin-list,
  .mobile-card-list
) {
  margin-block-start: var(--cc-filter-results-gap, clamp(0.875rem, 2vw, 1.25rem));
}

:where(.card-grid, .summary-grid, .mobile-product-list, .mobile-card-list) > :where(.card, .summary-card, .panel, .mobile-admin-card, .product-card) {
  margin: 0;
}

:where(.sheet-card, .card, .panel) > :where(.card, .panel, .cc-panel, .success-box, .error-message, .empty-state) + :where(.card, .panel, .cc-panel, .success-box, .error-message, .empty-state) {
  margin-block-start: var(--cc-card-gap, clamp(0.75rem, 2vw, 1rem));
}

:where(.sheet-card) > :where(.mobile-admin-card) + :where(form.admin-edit-form, .cc-panel, .card, .panel) {
  margin-block-start: var(--cc-space-4, 1rem);
}


/* /////////////////////////////////////
   SHARED SHEET CARD CHILD FLOW
   Spaces main stacked children inside sheet/card pages.
///////////////////////////////////// */

:where(.sheet-card) > :where(
  .page-actions,
  .status-message,
  .cc-panel,
  form,
  .card-grid,
  .summary-grid,
  .table-wrap
) + :where(
  .page-actions,
  .status-message,
  .cc-panel,
  form,
  .card-grid,
  .summary-grid,
  .table-wrap
) {
  margin-block-start: var(--cc-card-gap, clamp(0.75rem, 2vw, 1rem));
}


/* /////////////////////////////////////
   SHARED FORM FLOW
   Stacks form sections with framework spacing.
///////////////////////////////////// */

:where(.form-flow) {
  display: grid;
  gap: var(--cc-form-flow-gap, var(--cc-section-gap, clamp(1rem, 2vw, 1.25rem)));
}


/* /////////////////////////////////////
   SHARED CARD GRID ALIGNMENT
   Prevents cards stretching to the tallest item on desktop grids
///////////////////////////////////// */

:where(.card-grid) {
  align-items: start;
}

/* /////////////////////////////////////
   SHARED CALENDAR CARD GRID
   Month/day overview grids built from existing card surfaces.
///////////////////////////////////// */

.calendar-card-scroll {
  inline-size: 100%;
  margin-block-start: var(--cc-space-3, 0.75rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.calendar-card-weekdays,
.calendar-card-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(5.75rem, 1fr));
  gap: var(--cc-space-2, 0.5rem);
  min-inline-size: calc(7 * 5.75rem + 6 * var(--cc-space-2, 0.5rem));
}

.calendar-card-weekdays {
  margin-block-end: var(--cc-space-2, 0.5rem);
}

.calendar-card-weekday {
  color: var(--cc-colour-ink-muted, var(--cc-colour-text-soft));
  font-size: var(--cc-text-xs, 0.8rem);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.calendar-card-day {
  --cc-card-padding: clamp(0.45rem, 1vw, 0.65rem);

  display: grid;
  align-content: start;
  gap: var(--cc-space-1, 0.25rem);
  min-block-size: clamp(5.5rem, 9vw, 7rem);
  max-block-size: 7.5rem;
  aspect-ratio: 1 / 0.86;
  overflow: hidden;
}

.calendar-card-day--outside {
  background: var(--cc-colour-surface-muted, var(--cc-colour-surface));
}

.calendar-card-day__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cc-space-1, 0.25rem);
  min-inline-size: 0;
}

.calendar-card-day__number {
  color: var(--cc-colour-ink-strong, var(--cc-colour-text));
  font-size: var(--cc-text-sm, 0.9rem);
  font-weight: 600;
  line-height: 1;
}

.calendar-card-day__month {
  color: var(--cc-colour-ink-muted, var(--cc-colour-text-soft));
  font-size: var(--cc-text-xs, 0.8rem);
  line-height: 1;
}

.calendar-card-day__events {
  min-inline-size: 0;
}

.calendar-card-entry {
  max-inline-size: 100%;
}

@media (min-width: 48rem) {
  .calendar-card-weekdays,
  .calendar-card-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    inline-size: min(100%, 72rem);
    min-inline-size: 0;
  }
}

/* /////////////////////////////////////
   SHARED PANEL CHILD FLOW
   Keeps forms, fields and actions spaced consistently inside panels.
///////////////////////////////////// */

:where(.cc-panel) > :where(
  .form-grid,
  .form-field,
  .page-actions,
  .table-wrap,
  .status-message,
  .error-message
) + :where(
  .form-grid,
  .form-field,
  .page-actions,
  .table-wrap,
  .status-message,
  .error-message
) {
  margin-block-start: var(--cc-card-gap, clamp(0.75rem, 2vw, 1rem));
}

/* /////////////////////////////////////
   SHARED SORTABLE LISTS
   Compact drag/drop task lists inside framework panels.
///////////////////////////////////// */

:where(.sortable-list) {
  display: grid;
  gap: var(--cc-space-2, 0.5rem);
  min-block-size: 3rem;
}

:where(.sortable-list__item) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cc-space-3, 0.75rem);
  align-items: start;
  padding: var(--cc-space-3, 0.75rem);
  border: 1px solid var(--cc-colour-border);
  border-radius: var(--cc-radius, 0.75rem);
  background: var(--cc-colour-surface);
}

:where(.sortable-list__item.is-dragging) {
  opacity: 0.65;
}

:where(.sortable-list__handle) {
  cursor: grab;
  user-select: none;
}

:where(.sortable-list__content) {
  display: grid;
  gap: var(--cc-space-1, 0.25rem);
}

:where(.sortable-list__content h4, .sortable-list__content p) {
  margin: 0;
}



/* /////////////////////////////////////
   SHARED DASHBOARD CARDS
   Consistent dashboard card height, spacing and button alignment.
///////////////////////////////////// */

:where(.dashboard-card) {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4, 1rem);
  border-color: transparent;
  background: var(--cc-card-bg, var(--cc-colour-white));
  box-shadow: var(--cc-shadow-dashboard-card) !important;
  transform: translateY(0);
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

:where(.dashboard-card:hover, .dashboard-card:focus-within) {
  box-shadow: var(--cc-shadow-dashboard-card-hover) !important;
  transform: translateY(-0.125rem);
}

:where(.dashboard-card) > :where(h1, h2, h3) {
  margin-block: 0;
  align-self: flex-start;
  font-size: var(--cc-card-title-size);
  line-height: 1.25;
}

:where(.dashboard-card) > :where(.status-pill) {
  margin-block: 0;
  align-self: flex-start;
}

:where(.dashboard-card) > p {
  margin-block: 0;
  font-size: var(--cc-text-sm);
  line-height: 1.45;
}

:where(.dashboard-card) > .muted {
  margin-block: 0;
  font-size: var(--cc-card-meta-size);
  line-height: 1.35;
}

:where(.dashboard-card) > :where(.button, .btn, button) {
  margin-block-start: auto;
  align-self: flex-start;
}

:where(.dashboard-card) > :where(.actions, .admin-card-actions) {
  margin-block-start: auto;
  align-self: flex-start;
}

:where(.dashboard-grid) {
  align-items: stretch;
  gap: var(--cc-section-gap, clamp(1rem, 2vw, 1.5rem));
  margin-block-end: var(--cc-section-gap, clamp(1rem, 2vw, 1.5rem));
}

:where(.dashboard-grid) > :where(.dashboard-card) {
  block-size: 100%;
}

:where(.summary-card) {
  font-size: var(--cc-card-meta-size);
  line-height: 1.35;
}

:where(.summary-card) > :where(h1, h2, h3) {
  font-size: var(--cc-card-title-size);
  line-height: 1.25;
}

:where(.summary-label) {
  font-size: var(--cc-card-meta-size);
  line-height: 1.3;
}

:where(.summary-value) {
  font-size: var(--cc-metric-value-size);
  line-height: 1.15;
}

/* /////////////////////////////////////
   SHARED COMPACT LIST
   Tight task/detail lists inside cards and panels.
///////////////////////////////////// */

:where(.compact-list) {
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}

:where(.compact-list li + li) {
  margin-block-start: 0.2rem;
}

/* /////////////////////////////////////
   SHARED SECTION HEADING ROW
///////////////////////////////////// */

.section-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-sm, 0.75rem);
}

.section-heading-row > :where(h1, h2, h3, h4) {
  margin-block: 0;
}

/* /////////////////////////////////////
   SHARED APP FOOTER
///////////////////////////////////// */

.site-footer {
  margin-block-start: var(--cc-section-gap, clamp(0.75rem, 2vw, 1.25rem));
  padding-block: clamp(1rem, 2.5vw, 1.5rem);
  padding-inline: clamp(1rem, 4vw, 2rem);
  background: var(--cc-colour-simply-catering-green, #73C357);
  border-block-start: 1px solid rgb(15 39 66 / 0.14);
  color: var(--cc-colour-white);
}

.site-footer-inner {
  max-inline-size: var(--cc-content-max-width, 72rem);
  margin-inline: auto;
}

.site-footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem) clamp(1.25rem, 4vw, 3rem);
  align-items: start;
}

.site-footer-column {
  display: grid;
  gap: 0.35rem;
  min-inline-size: 0;
}

.site-footer-heading {
  margin: 0;
  color: var(--cc-colour-white);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.25;
}

.site-footer-links {
  display: grid;
  gap: 0.16rem;
}

.site-footer-link {
  color: var(--cc-colour-white);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.25;
  text-align: start;
  text-decoration: none;
}

.site-footer-link:hover,
.site-footer-link:focus-visible {
  color: var(--cc-colour-white);
  text-decoration: underline;
}

/* /////////////////////////////////////
   FOOD SAFETY PACK CARD FLOW
   Section headings sit above method card grids
///////////////////////////////////// */

:where(.food-safety-pack-flow) {
  display: grid;
  gap: var(--cc-section-gap, clamp(1rem, 2vw, 1.5rem));
}

:where(.food-safety-pack-section) {
  display: grid;
  gap: var(--cc-card-gap, clamp(0.75rem, 2vw, 1rem));
}

:where(.food-safety-section-header) {
  display: grid;
  gap: var(--cc-space-2, 0.5rem);
}

:where(.food-safety-section-header) > :where(h2, p) {
  margin-block: 0;
}

:where(.food-safety-method-card) > :where(h3, p) {
  margin-block: 0;
}