/* ==========================================================================
   OFFICE IDENTITY — the office's mark, the strip that carries it in the header, what it adds to a
   receipt, and the settings cards that set it. Prefix `.idn-`. Logical properties only (RTL first);
   colours are tokens, so both themes and the high-contrast fallback come for free.
   Written for: Offices/OfficeLogo, Offices/OfficeWorkingHours, Settings → Office details.
   ========================================================================== */

/* -- the mark: a logo on a light plate, or the first letter of the office's name -------------- */

.idn-mark {
  --idn-size: 2.5rem;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--idn-size);
  block-size: var(--idn-size);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-primary-fg);
  font-size: calc(var(--idn-size) * 0.44);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  user-select: none;
}

.idn-mark--sm { --idn-size: 1.75rem; }
.idn-mark--lg { --idn-size: 3.5rem; }
.idn-mark--xl { --idn-size: 6rem; }

/* A picture is shown on paper-white whatever the theme: a logo drawn in dark ink on a transparent ground would
   vanish on a dark surface, and a plate is how every product shows somebody else's artwork. */
.idn-mark.has-logo {
  background: var(--neutral-0);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.idn-mark img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0.125rem;
  object-fit: contain;
}

/* -- the header: the office, under the platform's own mark ---------------------------------- */

.idn-office {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-sidebar-border);
}

.idn-office__name {
  min-inline-size: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-sidebar-fg);
  /* A long name wraps to a second line and no further; the page title says the rest. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* -- a receipt, a printed report: the logo beside the office's name ------------------------- */

.idn-lh {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-inline-size: 0;
}

.idn-lh__logo {
  flex: none;
  /* Tall enough to stand beside the name and the number, and as wide as the picture is, up to a limit: a logo that is wider than
     it is tall is not squeezed into a square. */
  inline-size: auto;
  max-inline-size: 6rem;
  block-size: 3.5rem;
  object-fit: contain;
}

.idn-lh__text { min-inline-size: 0; flex: 1 1 auto; }

/* What the office adds under a receipt's totals: its own note, and when it is open. */
.idn-notes {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--bil-paper-rule, var(--color-border));
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--bil-paper-soft, var(--color-text-muted));
}

.idn-notes p { margin: 0; overflow-wrap: anywhere; }
.idn-notes__hours strong { font-weight: var(--font-weight-semibold); }

/* -- Settings → Office details: the logo card ------------------------------------------------ */

.idn-logo {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 40rem) {
  .idn-logo { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); }
}

.idn-logo__preview {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.idn-logo__caption { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.idn-logo__form { display: grid; gap: var(--space-3); min-inline-size: 0; }
.idn-logo__none { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* -- Settings → Office details: the working hours card -------------------------------------- */

.idn-hours { display: grid; gap: var(--space-3); }

.idn-hours__summary {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.idn-hours__summary strong { color: var(--color-text); font-weight: var(--font-weight-semibold); }

.idn-days { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.idn-day {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

@media (min-width: 48rem) {
  .idn-day { grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr); align-items: start; }
}

.idn-day__head { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--tap-target-min); }
.idn-day__name { font-weight: var(--font-weight-semibold); }
.idn-day__state { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.idn-day__body { display: grid; gap: var(--space-2); min-inline-size: 0; }

/* A day that is switched off shows none of its ranges: the switch is the first thing in the row, so the
   rule follows it. Where the browser has no :has(), every range stays in view — harmless, they are ignored on save. */
.idn-day:has(.idn-day__switch:not(:checked)) .idn-day__ranges,
.idn-day:has(.idn-day__switch:not(:checked)) .idn-day__add { display: none; }
.idn-day:has(.idn-day__switch:checked) .idn-day__state--closed { display: none; }
.idn-day:has(.idn-day__switch:not(:checked)) .idn-day__state--open { display: none; }

.idn-day__ranges { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.idn-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.idn-range__time { inline-size: 7.5rem; direction: ltr; text-align: center; }
.idn-range__to { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.idn-range__error { flex-basis: 100%; margin: 0; }

.idn-day__error { margin: 0; }

/* The printed sheet of a report: the logo is a little smaller than a receipt's, and the office's line keeps its own style. */
.idn-lh--report { align-items: center; margin-block-end: var(--space-2); }
.idn-lh--report .idn-lh__logo { max-inline-size: 5rem; block-size: 3rem; }
.idn-lh--report .rep-sheet__office { margin: 0; }