/*
 * Back-office « service » : maintenance et capteurs, cuisine et commandes, catalogue, créneaux,
 * base de connaissances, marées, comptes de l'équipe. Pensé pour le doigt : tablette et téléphone.
 */

/* --- Commun ---------------------------------------------------------------------------- */

.svc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.svc-filters .segmented a { min-height: var(--tap); }
.svc-scroll { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.svc-scroll a { white-space: nowrap; min-height: var(--tap); }
.svc-card-title { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; margin-bottom: var(--space-2); }
.svc-prewrap { white-space: pre-line; overflow-wrap: anywhere; }
.svc-meta { display: flex; flex-wrap: wrap; gap: 2px var(--space-2); font-size: 0.86rem; color: var(--muted); }
.svc-meta strong { color: var(--ink); }
.svc-inactive { opacity: 0.62; }
.svc-low { color: var(--danger); font-weight: 650; }
.svc-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; padding: 1px 6px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); white-space: nowrap; }
.svc-code-block { margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--sand); border: 1px solid var(--line); font-size: 0.85rem; overflow-x: auto; }
.svc-callout { display: flex; gap: var(--space-3); align-items: flex-start; }
.svc-callout > .icon { color: var(--ochre); margin-top: 2px; }
.svc-detail { align-items: start; }

.svc-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.svc-actions .button_to, .svc-orders .button_to, .svc-ticket .button_to { width: 100%; }

.svc-form .btn--large { min-width: 200px; }
.svc-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.svc-fieldset legend { font-weight: 600; font-size: 0.93rem; margin-bottom: var(--space-2); padding: 0; }
.svc-checks { display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.svc-checks .check { min-height: var(--tap); align-items: center; padding: 4px 0; }
.svc-checks--days { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

.svc-lang { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.svc-lang > summary { min-height: var(--tap); display: flex; align-items: center; padding: 0 var(--space-4); font-weight: 650; cursor: pointer; }
.svc-lang[open] > summary { border-bottom: 1px solid var(--line); }
.svc-lang > .stack { padding: var(--space-4); }
.svc-lang-chip { display: inline-block; min-width: 30px; padding: 1px 6px; margin-right: 2px; border-radius: 6px; text-align: center; font-size: 0.75rem; font-weight: 700; background: var(--sea-soft); color: var(--sea); }
.svc-lang-chip--missing { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); text-decoration: line-through; }

.svc-preview > summary { cursor: pointer; color: var(--sea); min-height: 32px; display: inline-flex; align-items: center; }
.svc-preview[open] > p { margin-top: var(--space-2); }
.svc-preview-box { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--sea-soft); }
.svc-preview-box .eyebrow { margin-bottom: 4px; }

/* --- Maintenance : tableau et tickets ----------------------------------------------------- */

.svc-col-empty { padding: var(--space-2); }
.svc-ticket {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); background: var(--paper);
  border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.svc-ticket--urgent { border-left-color: var(--danger); }
.svc-ticket--high { border-left-color: var(--ochre); }
.svc-ticket--normal { border-left-color: var(--sea-2); }
.svc-ticket__head { display: flex; gap: var(--space-2); align-items: flex-start; }
.svc-ticket__icon { color: var(--muted); margin-top: 2px; }
.svc-ticket--urgent .svc-ticket__icon { color: var(--danger); }
.svc-ticket__title { font-size: 1rem; line-height: 1.3; }
.svc-ticket__title a { color: var(--ink); text-decoration: none; }
.svc-ticket__title a:hover { text-decoration: underline; }
.svc-ticket .btn { min-height: var(--tap); }

.svc-photos { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.svc-photo { display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--sand-2); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }

.svc-sensors > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: var(--tap); cursor: pointer; list-style: none; }
.svc-sensors > summary::-webkit-details-marker { display: none; }
.svc-sensors > summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.svc-sensors[open] > summary::after { content: "▴"; }
.svc-sensors__title { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.svc-sensors[open] > summary { margin-bottom: var(--space-3); }
.svc-sensor--alert { background: var(--danger-soft); border-radius: var(--radius-sm); padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }

/* --- Cuisine ------------------------------------------------------------------------------ */

.svc-kitchen { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
  .svc-kitchen { grid-template-columns: minmax(0, 1fr) 340px; }
  .svc-kitchen__side { position: sticky; top: var(--space-4); }
}
.svc-timegroup { display: flex; flex-direction: column; gap: var(--space-3); }
.svc-timegroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--line-strong); }
.svc-timegroup__time { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600; color: var(--ink); }
.svc-orders { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.svc-order { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.svc-order--placed { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn) inset, var(--shadow); }
.svc-order--ready, .svc-order--delivering { background: var(--ok-soft); }
.svc-order__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.svc-order__head h3 { font-size: 1.1rem; }
.svc-order__head h3 a { color: var(--ink); text-decoration: none; }
.svc-order__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 1.02rem; }
.svc-qty { display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--sea-soft); color: var(--sea); font-weight: 700; margin-right: 6px; }
.svc-fulfillment { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 0.88rem; font-weight: 650; background: var(--sand-2); color: var(--ink-2); }
.svc-fulfillment--delivery { background: var(--heather-soft); color: var(--heather); }
.svc-note { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink); font-size: 0.93rem; }
.svc-note .icon { color: var(--warn); margin-top: 1px; }
.svc-note--allergy { background: var(--danger-soft); border: 2px solid var(--danger); color: var(--ink); }
.svc-note--allergy .icon, .svc-note--allergy strong { color: var(--danger); }

.svc-prep .list > li { padding: var(--space-2) 0; }
.svc-prep .svc-qty { min-width: 44px; height: 36px; font-size: 1.1rem; }
.svc-prep__note { display: flex; gap: 6px; align-items: center; margin-top: var(--space-3); }

.svc-stock > li { flex-wrap: wrap; }
.svc-stock--low .list-item__main strong { color: var(--danger); }
.svc-stock__form { display: flex; align-items: center; gap: var(--space-2); }
.svc-stock__form .stepper button { width: var(--tap); height: var(--tap); }
.svc-stock__form .stepper input { width: 56px; min-height: var(--tap); }
.svc-stock__form .btn--small { min-height: var(--tap); }
.svc-kitchen__side .flash { margin-bottom: var(--space-3); }

.svc-orders-table td { min-width: 110px; }
.svc-date-filter input[type="date"] { width: auto; min-width: 150px; }

/* --- Créneaux et marées ------------------------------------------------------------------- */

.svc-slot-time { min-width: 64px; font-weight: 700; font-size: 1.05rem; display: flex; flex-direction: column; line-height: 1.2; }
.svc-tides { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.svc-tide-day .list > li { padding: var(--space-2) 0; }
.svc-tide-day .svc-card-title { margin-bottom: 0; }

.svc-kb-list > li { align-items: flex-start; }

@media (max-width: 600px) {
  .svc-filters { flex-direction: column; align-items: stretch; }
  .svc-filters .segmented { overflow-x: auto; flex-wrap: nowrap; }
  .svc-filters .segmented a { white-space: nowrap; }
  .svc-form .btn-row .btn { flex: 1; }
  .svc-order__items { font-size: 1.05rem; }
}