/* ── DASHBOARD TOKENS ────────────────────── */
:root {
  --db-bg: #e9e9ee;
  --db-surface: #ffffff;
  --db-ink: #1c1c1e;
  --db-ink-soft: #5a5a5a;
  --db-ink-muted: #a1a1a6;
  --db-border: #e5e5ea;
  --db-accent: #d0b608;
  --db-topbar-bg: #1c1c1e;
  --db-tab-bg: #dededf;
  --db-danger-bg: #fdecec;
  --db-danger-ink: #b42318;
  --db-success-bg: #e8f6ec;
  --db-success-ink: #1e7a3a;
  /* Only three text sizes in the whole dashboard */
  --db-title: 1.75rem;    /* 28px - page titles */
  --db-subtitle: 1.25rem; /* 20px - section titles */
  --db-text: 1rem;        /* 16px - everything else */

  --db-radius: 10px;
  --db-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

  /* status colors (used from milestone 4 on) */
  --db-status-waiting: #8e8e93;
  --db-status-planned: #8ec5ff;
  --db-status-incomplete: #f5c518;
  --db-status-finished: #34c759;
  --db-status-cancelled: #ff3b30;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Outfit', sans-serif;
  font-size: var(--db-text);
  line-height: 1.5;
  background: var(--db-bg);
  color: var(--db-ink);
}

/* The dashboard fills the viewport exactly: the page never scrolls,
   only the content area below the top bar does. */
.db-body {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

a { color: inherit; }

/* ── TOP BAR ─────────────────────────────── */
.db-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 16px;
  min-height: 64px;
  padding: 0 16px;
  background: var(--db-topbar-bg);
  color: #fff;
}

.db-topbar__brand { display: flex; align-items: center; flex: 0 0 auto; }
.db-topbar__logo { height: 44px; display: block; }

.db-topbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 8px 0;
  font-size: var(--db-text);
  min-width: 0;
}

.db-topbar__email {
  color: var(--db-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-topbar__logout {
  color: #ff6b6b;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.db-topbar__logout:hover { color: #ff8f8f; }

/* Setări (gear) and Ieșire (door): icon buttons at the end of the user area. */
.db-topbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--db-ink-muted);
  flex: 0 0 auto;
}
.db-topbar__icon:hover,
.db-topbar__icon--active { color: #fff; background: rgba(255, 255, 255, 0.1); }
.db-topbar__icon--logout { color: #ff6b6b; }
.db-topbar__icon--logout:hover { color: #ff8f8f; }

.db-role {
  font-size: var(--db-text);
  font-weight: 700;
  line-height: 1.2;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--db-accent);
  color: var(--db-ink);
  white-space: nowrap;
}
.db-role--installer { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ── TABS (browser-tab style) ────────────── */
/* Tabs live inside the top bar and sit on its bottom edge. */
.db-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.db-tabs::-webkit-scrollbar { display: none; }

.db-tab {
  flex: 0 0 auto;
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 10px 10px 0 0;
  font-size: var(--db-text);
  font-weight: 500;
  color: var(--db-ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.db-tab:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.db-tab--active,
.db-tab--active:hover {
  background: var(--db-bg);
  color: var(--db-ink);
  font-weight: 600;
}

.db-tab--disabled,
.db-tab--disabled:hover {
  color: rgba(255, 255, 255, 0.28);
  background: none;
  cursor: not-allowed;
}

/* ── BURGER + DRAWER (phones) ────────────── */
.db-burger { display: none; }

/* Without the popover API the old wrapped top bar is still the fallback,
   so nothing below can leave a browser without navigation. */
@media (max-width: 760px) {
  .db-topbar { flex-wrap: wrap; gap: 8px; padding-top: 8px; }
  .db-topbar__user { order: 1; margin-left: auto; padding: 0; }
  .db-tabs { order: 2; flex-basis: 100%; }
}

@supports selector(:popover-open) {
  @media (max-width: 760px) {
    /* Logo and burger, nothing else: the account and the sections are in the drawer. */
    .db-topbar {
      flex-wrap: nowrap;
      align-items: center;
      min-height: 56px;
      gap: 10px;
      padding: 0 8px 0 12px;
    }
    .db-topbar__logo { height: 32px; }
    .db-tabs { display: none; }
    .db-topbar__user { display: none; }

    .db-burger {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-left: auto;
      border: none;
      border-radius: var(--db-radius);
      background: none;
      color: #fff;
      cursor: pointer;
    }
    /* A tap must not leave the button looking stuck in hover. */
    @media (hover: hover) {
      .db-burger:hover { background: rgba(255, 255, 255, 0.1); }
    }
  }
}

/* Drops down from under the top bar and stops at the last row. Whatever is
   left below it is the dimmed page, which is the point of a dropdown. */
.db-menu {
  --db-menu-top: 56px;               /* the phone top bar is exactly this tall */
  position: fixed;
  top: var(--db-menu-top);
  left: 0;
  right: 0;
  bottom: auto;                      /* the UA sets inset:0; without this the
                                        panel is stretched to the screen bottom */
  width: 100%;
  max-width: none;
  height: auto;
  max-height: calc(100dvh - var(--db-menu-top));
  margin: 0;
  padding: 0;
  border: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--db-topbar-bg);
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* display lives on :popover-open only. Setting it on .db-menu would override
   the user-agent rule that keeps a closed popover hidden, and it would never close. */
.db-menu:popover-open { display: flex; flex-direction: column; }

/* Starts below the top bar, so the logo and the burger stay lit. The panel
   covers the rest, so this only ever shows through while opening. */
.db-menu::backdrop {
  inset: 56px 0 0 0;
  background: rgba(0, 0, 0, 0.5);
}

/* Only the opening is animated. Transitioning display/overlay on the way out
   would mean the menu stays painted until a discrete transition finishes, and
   if that never runs it is stranded on screen. Closing is instant instead. */
@media (prefers-reduced-motion: no-preference) {
  .db-menu:popover-open { transition: opacity 0.16s ease, translate 0.16s ease; }
  @starting-style {
    .db-menu:popover-open { opacity: 0; translate: 0 -8px; }
  }

  .db-menu:popover-open::backdrop { transition: opacity 0.16s ease; }
  @starting-style { .db-menu:popover-open::backdrop { opacity: 0; } }
}

/* Above the phone breakpoint the tabs do the job, so it never opens.
   Needs the same specificity as the rule above to win. */
@media (min-width: 761px) {
  .db-menu,
  .db-menu:popover-open { display: none; }
}

/* Who is signed in: the top bar has no room for it on a phone. */
.db-menu__who {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  min-width: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.db-menu__email {
  color: var(--db-ink-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-menu__list { flex: 0 0 auto; display: flex; flex-direction: column; }

/* Full-bleed rows, straight after one another. Ieșire is simply the last one. */
.db-menu__link {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 16px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.07);
}
@media (hover: hover) {
  .db-menu__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .db-menu__link--danger:hover { background: rgba(255, 107, 107, 0.12); color: #ff8f8f; }
}

.db-menu__link--active,
.db-menu__link--active:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--db-accent);
  font-weight: 600;
  box-shadow: inset 3px 0 var(--db-accent), inset 0 -1px rgba(255, 255, 255, 0.07);
}

.db-menu__link--disabled,
.db-menu__link--disabled:hover {
  color: rgba(255, 255, 255, 0.28);
  background: none;
  cursor: not-allowed;
}

/* Website subsections, hanging off the "Website public" row. */
.db-menu__link--sub {
  padding-left: 34px;
  min-height: 46px;
  color: rgba(255, 255, 255, 0.6);
  box-shadow: inset 12px 0 0 -11px rgba(255, 255, 255, 0.35),
              inset 0 -1px rgba(255, 255, 255, 0.07);
}
.db-menu__link--sub-active,
.db-menu__link--sub-active:hover {
  color: var(--db-accent);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
}

.db-menu__link--danger {
  color: #ff6b6b;
  font-weight: 600;
  box-shadow: none;                  /* it is the bottom edge of the panel */
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* ── SUBNAV (website public sections) ────── */
/* The row holds the section strip and the section action side by side. */
.db-website__nav {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  padding: 0 24px;
  min-height: 52px;
  box-shadow: inset 0 -1px var(--db-border);
}

.db-subnav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  background: transparent;   /* same as the page behind the title */
  overflow-x: auto;
  scrollbar-width: none;
}
.db-subnav::-webkit-scrollbar { display: none; }

.db-subnav__item {
  flex: 0 0 auto;
  margin-top: 10px;
  padding: 9px 16px;
  border-radius: 10px 10px 0 0;
  color: var(--db-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.db-subnav__item:hover { background: rgba(255, 255, 255, 0.6); color: var(--db-ink); }

/* Like the tabs in the top bar: the open one is simply the content surface. */
.db-subnav__item--active,
.db-subnav__item--active:hover {
  background: var(--db-surface);
  color: var(--db-ink);
  font-weight: 600;
}

/* Section action (e.g. "+ Categorie nouă") lives at the end of the tab row. */
.db-subnav__action {
  margin-right: -8px;   /* sits at the very edge, clear of the tabs */
  align-self: center;   /* lifted off the tab baseline so it does not read as a tab */
  padding-left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.db-subnav__action .db-btn { min-height: 36px; padding: 6px 14px; }

/* "Website › Galerie foto": the section you are in, not just the area. */
.db-crumb,
.db-crumb__sep { color: var(--db-ink-muted); font-weight: 400; }

/* The website section runs edge to edge; its panel brings the padding (website.css). */
.db-website { padding: 0; }

/* ── MAIN ────────────────────────────────── */
.db-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Inside the flex column, blocks keep their natural height (the calendar opts out below). */
.db-main > * { flex-shrink: 0; }

.db-alert,
.db-notice {
  padding: 10px 14px;
  border-radius: var(--db-radius);
  font-size: var(--db-text);
  margin-bottom: 16px;
}
.db-alert  { background: var(--db-danger-bg);  color: var(--db-danger-ink); }
.db-notice { background: var(--db-success-bg); color: var(--db-success-ink); }

/* ── CALENDAR ────────────────────────────── */
.db-calendar {
  display: grid;
  /* The seven days always share the width: no horizontal scrolling. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

.db-calendar__day {
  /* "Calendar" links to #azi, so the browser scrolls today into view by itself. */
  scroll-margin: 10px;
  display: flex;
  flex-direction: column;
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow);
  min-width: 0;
}

/* Weekends: no work is planned there, so they stay in the background.
   Front-end only - scheduling on a Sunday still works. */
.db-calendar__day--weekend {
  background: #f3f3f6;   /* a touch darker than the white work days */
  border-color: #e2e2e8;
  border-style: dashed;
  box-shadow: none;
}
.db-calendar__day--weekend .db-calendar__weekday,
.db-calendar__day--weekend .db-calendar__date { color: var(--db-ink-muted); }

.db-calendar__day--today {
  border: 2px solid var(--db-accent);
  background: var(--db-surface);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(208, 182, 8, 0.18), var(--db-shadow);
}

.db-calendar__day--today .db-calendar__head {
  background: var(--db-accent);
  border-bottom-color: var(--db-accent);
  border-radius: 8px 8px 0 0;
}

.db-calendar__day--today .db-calendar__weekday,
.db-calendar__day--today .db-calendar__date { color: var(--db-ink); font-weight: 600; }

/* Navigation arrows: just the glyph, no button around it. */
.db-calendar__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  font-size: var(--db-title);
  font-weight: 700;
  line-height: 1;
  color: var(--db-ink-soft);
  text-decoration: none;
}
.db-calendar__arrow:hover { color: var(--db-ink); }

.db-calendar__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--db-border);
}
.db-calendar__date { margin-left: auto; }

.db-calendar__weekday {
  font-size: var(--db-text);
  color: var(--db-ink-soft);
  text-transform: capitalize;        /* the locale spells them lowercase */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-calendar__date { font-size: var(--db-subtitle); font-weight: 600; font-variant-numeric: tabular-nums; }

.db-calendar__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── BUTTONS & FORMS ─────────────────────── */
.db-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  background: var(--db-surface);
  color: var(--db-ink);
  font: inherit;
  font-size: var(--db-text);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.db-btn--primary { background: var(--db-ink); border-color: var(--db-ink); color: #fff; }
.db-btn--primary:hover { background: #000; }
.db-btn--block { width: 100%; }

.db-field { display: flex; flex-direction: column; gap: 6px; }
.db-label { font-size: var(--db-text); font-weight: 500; color: var(--db-ink-soft); }
.db-input {
  padding: 10px 12px;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  font: inherit;
  font-size: var(--db-text);
  background: var(--db-surface);
}
.db-input:focus { outline: 2px solid var(--db-accent); outline-offset: 1px; }

/* ── LOGIN ───────────────────────────────── */
.db-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.db-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--db-surface);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  padding: 32px 24px;
}

.db-login-card__header { text-align: center; margin-bottom: 24px; }
.db-login-logo { height: 48px; }
.db-login-brand { font-size: var(--db-title); letter-spacing: 0.12em; margin-top: 8px; }
.db-login-subtitle { color: var(--db-ink-soft); font-size: var(--db-text); }

.db-login-form { display: flex; flex-direction: column; gap: 16px; }

.db-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--db-text);
  color: var(--db-ink-soft);
}

/* ── PAGES ───────────────────────────────── */
.db-page-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.db-page-title { font-size: var(--db-title); font-weight: 600; line-height: 1.2; }

/* Keeps the back arrow glued to the title while the head stays space-between. */
.db-page-head__main { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Sits left of a page title, one step back up the hierarchy. */
.db-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: -8px;
  flex-shrink: 0;
  border-radius: 8px;
  color: var(--db-ink-soft);
}
.db-back:hover { background: var(--db-tab-bg); color: var(--db-ink); }
.db-back:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 1px; }

.db-card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow);
}

/* ── TABLE ───────────────────────────────── */
.db-table-wrap { overflow-x: auto; }

.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--db-text);
}

.db-table th,
.db-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--db-border);
  white-space: nowrap;
}

.db-table th { font-weight: 600; color: var(--db-ink-soft); font-size: var(--db-text); }
.db-table tr:last-child td { border-bottom: none; }

.db-table__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.db-table__actions form { display: inline; }

/* Row actions are plain text, in the dashboard and the website alike. The
   delete one is red. A <button> (button_to) gets the same look as a link. */
.db-action-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: var(--db-text);
  font-weight: 500;
  color: var(--db-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.db-action-link:hover { background: var(--db-bg); color: var(--db-ink); }
.db-action-link--danger { color: var(--db-danger-ink); }
.db-action-link--danger:hover { background: var(--db-danger-bg); color: var(--db-danger-ink); }

/* Names in a table are not underlined; the whole row is the link (row_link_controller). */
.db-table a:not(.db-action-link) { text-decoration: none; }
.db-table a:not(.db-action-link):hover { text-decoration: underline; }
.db-row-link { cursor: pointer; }
.db-row-link:hover td { background: #f7f7f9; }

/* Required fields: a small red star after the label, nothing on optional ones.
   Driven by the input's own required attribute, so the two cannot disagree. */
.db-field:has(> :required) > .db-label::after {
  content: " *";
  color: var(--db-danger-ink);
  font-weight: 400;
}

.db-pill {
  display: inline-block;
  font-size: var(--db-text);
  font-weight: 600;
  line-height: 1.3;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--db-tab-bg);
}
.db-pill--owner { background: var(--db-accent); }

/* ── FORM ────────────────────────────────── */
.db-form {
  max-width: 520px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.db-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.db-btn--sm { min-height: 36px; padding: 6px 12px; }
.db-btn--danger { color: var(--db-danger-ink); border-color: var(--db-danger-bg); background: var(--db-danger-bg); }

/* ── FILTERS / SEARCH ────────────────────── */
.db-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.db-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--db-border);
  background: var(--db-surface);
  font-size: var(--db-text);
  text-decoration: none;
  white-space: nowrap;
}
.db-chip--active { background: var(--db-ink); border-color: var(--db-ink); color: #fff; }

.db-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.db-search .db-input { flex: 1 1 240px; }

.db-search__field { position: relative; flex: 1 1 280px; display: flex; }
.db-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--db-ink-muted);
  pointer-events: none;
}
.db-input--search { width: 100%; padding-left: 38px; }

.db-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.db-actions form { display: inline; }

/* ── DETAILS / SECTIONS ──────────────────── */
.db-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 18px;
  font-size: var(--db-text);
}
.db-details .db-label { display: block; color: var(--db-ink-muted); }

.db-section-title { font-size: var(--db-subtitle); font-weight: 600; margin: 24px 0 10px; }
.db-empty { color: var(--db-ink-muted); text-align: center; padding: 20px; }
.db-sub { color: var(--db-ink-soft); font-size: var(--db-text); }
.db-sep { border: none; border-top: 1px solid var(--db-border); }
.db-radio { display: flex; align-items: center; gap: 8px; font-size: var(--db-text); }

/* ── STATUS PILLS ────────────────────────── */
.db-pill--waiting    { background: #e8e8ed; color: #3a3a3c; }
.db-pill--planned    { background: #dbeeff; color: #14589e; }
.db-pill--incomplete { background: #fff2c2; color: #8a6d00; }
.db-pill--finished   { background: var(--db-success-bg); color: var(--db-success-ink); }
.db-pill--cancelled  { background: var(--db-danger-bg); color: var(--db-danger-ink); }
.db-pill--installer  { background: #e8e8ed; }

/* Website: offers and contact messages, blog posts, offer source. */
.db-pill--new        { background: #fff2c2; color: #8a6d00; }
.db-pill--contacted  { background: #dbeeff; color: #14589e; }
.db-pill--closed,
.db-pill--published,
.db-pill--ai         { background: var(--db-success-bg); color: var(--db-success-ink); }
.db-pill--draft,
.db-pill--manual     { background: #e8e8ed; color: #3a3a3c; }

/* ── CALENDAR EXTRAS ─────────────────────── */
.db-calendar__nav { display: flex; align-items: center; gap: 8px; }
.db-switch { display: flex; gap: 6px; }

.db-calendar--month {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(110px, 1fr);
  overflow-y: auto;
}
.db-calendar--month .db-calendar__body { padding: 6px; }
.db-calendar__day--outside { opacity: 0.45; }

.db-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff8d6;
  border: 1px solid #f0dd8a;
  border-radius: var(--db-radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: var(--db-text);
}

.db-calendar__place { width: 100%; margin-top: auto; }
.db-calendar__place form { width: 100%; }

/* Narrow screens that still show seven columns. */
@media (min-width: 761px) and (max-width: 1400px) {
  .db-calendar { gap: 6px; }
  /* Full weekday names do not fit beside the date in a narrow column, so the
     date drops to its own line rather than the name being cut off. */
  .db-calendar__head { padding: 8px 10px; flex-wrap: wrap; row-gap: 0; }
  .db-calendar__body { padding: 8px; gap: 8px; }
  .db-appt { padding: 10px 12px; }
}

/* ── APPOINTMENT CARD ────────────────────── */
.db-appt {
  border: 1px solid var(--db-border);
  border-left: 6px solid var(--db-status-planned);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
  font-size: var(--db-text);
  box-shadow: var(--db-shadow);
}
.db-appt--finished   { border-left-color: var(--db-status-finished); }
.db-appt--incomplete { border-left-color: var(--db-status-incomplete); }
.db-appt--cancelled {
  border-left-color: var(--db-status-cancelled);
  background: #fbfbfc;
  opacity: 0.65;
}
.db-appt--cancelled .db-appt__client { text-decoration: line-through; }
.db-appt__cancelled {
  display: inline-block;
  margin-top: 4px;
  color: var(--db-danger-ink);
  font-weight: 600;
}

.db-appt__link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.db-appt__client { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.db-appt__address { color: var(--db-ink-soft); overflow-wrap: anywhere; }
.db-appt__meta { color: var(--db-ink-muted); margin-top: 2px; }
.db-appt__warning { display: inline-block; margin-top: 4px; color: var(--db-danger-ink); font-size: var(--db-text); font-weight: 600; }
.db-appt__action { margin-top: 6px; width: 100%; }

/* ── LOG ─────────────────────────────────── */
.db-log { padding: 8px 4px; }
.db-log__row {
  display: grid;
  grid-template-columns: 150px 170px 1fr;
  gap: 10px;
  padding: 8px 14px;
  font-size: var(--db-text);
  border-bottom: 1px solid var(--db-border);
}
.db-log__row:last-child { border-bottom: none; }
.db-log__time { color: var(--db-ink-muted); font-variant-numeric: tabular-nums; }
.db-log__who { color: var(--db-ink-soft); }

/* Phone: the date and the author share the first line, the description follows. */
@media (max-width: 760px) {
  .db-log { padding: 0; }
  .db-log__row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
    padding: 12px 14px;
  }
  .db-log__time { grid-column: 1; grid-row: 1; }
  .db-log__who  { grid-column: 2; grid-row: 1; }
  .db-log__what { grid-column: 1 / -1; grid-row: 2; }
}

/* ── MOBILE CALENDAR (installers) ────────── */
/* One day per row, stacked; the list scrolls vertically instead of sideways. */
@media (max-width: 760px) {
  .db-calendar,
  .db-calendar--month {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .db-calendar__day { min-height: 0; }

  /* Week view: the days share the screen height, but never shrink below
     what they contain - otherwise the cards spill over the next day. */
  .db-calendar--week .db-calendar__day { flex: 1 0 auto; }

  /* Month view: natural height, the list scrolls. */
  .db-calendar--month .db-calendar__day { flex: 0 0 auto; }

  .db-calendar__day--outside { display: none; }

  .db-calendar__head {
    gap: 10px;
    justify-content: flex-start;
    padding: 12px 14px;
  }

  .db-calendar__body {
    overflow-y: visible;
    padding: 10px;
    gap: 8px;
  }

  .db-appt { padding: 12px 14px; }
  .db-appt__link { gap: 2px; }

  .db-calendar--month .db-calendar__body:empty { padding: 0; }
}

/* ── OUTCOME BUTTONS ─────────────────────── */
/* Bigger than a desk button: these get tapped with gloves on a site. The
   colors are the app's own, not the calendar's status colors. */
.db-sheet__action {
  min-height: 52px;
  padding: 12px 16px;
  font-weight: 600;
  width: 100%;
}
.db-sheet__action--finish {
  background: var(--db-success-ink);
  border-color: var(--db-success-ink);
  color: #fff;
}
.db-sheet__action--finish:hover { background: #18632f; border-color: #18632f; }

/* ── MODAL ───────────────────────────────── */
.db-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.db-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 30, 0.45);
}

.db-modal__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--db-surface);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.db-modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
}

.db-modal__title { font-size: var(--db-subtitle); font-weight: 600; }

/* Either an <a> (close_path) or a <button> (frame modal), so reset both. */
.db-modal__close {
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--db-ink-soft);
  flex-shrink: 0;
}
.db-modal__close:hover { background: var(--db-bg); color: var(--db-ink); }

.db-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

/* A turbo-frame is inline by default, which would collapse the modal steps. */
.db-modal__body turbo-frame { display: block; }

/* ── FILE DROPZONE ───────────────────────── */
.db-drop { position: relative; }

/* Kept in the layout (1px, not display:none) so it stays focusable and the
   browser can anchor its "required" bubble inside the zone. */
.db-drop__input {
  position: absolute;
  left: 24px;
  bottom: 12px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.db-drop__zone {
  display: block;
  border: 1.5px dashed var(--db-border);
  border-radius: var(--db-radius);
  background: var(--db-bg);
  padding: 24px 20px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.db-drop__zone:hover { border-color: var(--db-ink-muted); background: var(--db-surface); }

.db-drop:focus-within .db-drop__zone {
  border-color: var(--db-accent);
  box-shadow: 0 0 0 3px rgba(208, 182, 8, .2);
}
.db-drop--over .db-drop__zone {
  border-color: var(--db-accent);
  border-style: solid;
  background: var(--db-surface);
}

/* Beats the browser's own [hidden] rule, which this display would override. */
.db-drop__state[hidden] { display: none; }

.db-drop__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.db-drop__icon { color: var(--db-ink-muted); }
.db-drop__title { font-weight: 500; }
.db-drop__link { color: var(--db-ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.db-drop__hint { font-size: .8125rem; color: var(--db-ink-muted); }

/* Filled state: the file reads as a row, not as a call to action. */
.db-drop--filled .db-drop__zone {
  border-style: solid;
  border-color: var(--db-border);
  background: var(--db-surface);
  padding: 14px 56px 14px 16px;
}
.db-drop__file {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.db-drop__badge { color: var(--db-accent); flex-shrink: 0; }

.db-drop__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.db-drop__name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-drop__meta { font-size: .8125rem; color: var(--db-ink-muted); }

/* Sits over the zone, only once a file is picked. */
.db-drop__clear {
  display: none;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--db-ink-muted);
  cursor: pointer;
}
.db-drop--filled .db-drop__clear { display: flex; }
.db-drop__clear:hover { background: var(--db-bg); color: var(--db-ink); }
.db-drop__clear:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 1px; }

.db-drop__error {
  margin-top: 8px;
  font-size: .875rem;
  color: var(--db-danger-ink);
}

/* The optional file gets a shorter zone: same language, less weight. */
.db-drop--compact .db-drop__zone { padding: 16px; }
.db-drop--compact .db-drop__title { font-weight: 500; font-size: .9375rem; }
.db-drop--compact.db-drop--filled .db-drop__zone { padding: 12px 52px 12px 14px; }

@media (max-width: 760px) {
  .db-drop__zone { padding: 20px 16px; }
  .db-drop--compact .db-drop__zone { padding: 14px; }

}

.db-modal .db-form { max-width: none; padding: 0; }

/* On a phone the modal is a sheet at the bottom. Same breakpoint as the rest
   of the phone layout, so there is no in-between width with a centred dialog. */
@media (max-width: 760px) {
  .db-modal { padding: 0; align-items: flex-end; }
  .db-modal__panel {
    max-width: none;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }

  /* Grab handle: says "this sheet came from the bottom". */
  .db-modal__panel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--db-border);
  }

  .db-modal__head { padding: 20px 16px 14px; }
  .db-modal__body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .db-modal .db-form { gap: 12px; }
  .db-modal .db-btn { width: 100%; }

  /* The submit button stays on screen however long the form is. */
  .db-modal .db-form__actions {
    flex-direction: column-reverse;
    position: sticky;
    bottom: calc(-16px - env(safe-area-inset-bottom));
    margin: 4px -16px calc(-16px - env(safe-area-inset-bottom));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--db-surface);
    border-top: 1px solid var(--db-border);
  }
  .db-modal .db-form__actions .db-btn { width: 100%; }
}

.db-modal__panel--wide { max-width: 760px; }

/* ── OFFER ───────────────────────────────── */
.db-offer { display: flex; flex-direction: column; gap: 18px; padding: 18px; }

/* The attached file on the left, what you can do with it on the right. */
.db-offer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.db-offer__file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.db-offer__file svg { color: var(--db-accent); flex-shrink: 0; }
.db-offer__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-offer__meta { color: var(--db-ink-muted); font-size: .875rem; white-space: nowrap; }

.db-offer__upload { display: flex; flex-direction: column; gap: 14px; }
/* Only a separator when there is a file above to separate from. */
.db-offer__upload--replace { padding-top: 18px; border-top: 1px solid var(--db-border); }

.db-offer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.db-offer__status { color: var(--db-ink-muted); font-size: var(--db-text); }
.db-offer__submit { flex-shrink: 0; }

/* Two buttons over an offer that exists: side by side, then stacked. */
.db-offer .db-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* The card tells you at a glance whether the PDF is there before you drive. */
.db-appt__offer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .8125rem;
  color: var(--db-ink-soft);
}
.db-appt__offer--missing { color: var(--db-danger-ink); }

/* ── OUTCOME SHEET ───────────────────────── */
/* The address is already in the modal title, so this is only status and day. */
.db-sheet__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--db-border);
}
.db-sheet__day { color: var(--db-ink-soft); font-variant-numeric: tabular-nums; }

.db-sheet__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* "sau" on a rule: the two answers are alternatives, not a sequence. */
.db-sheet__or {
  text-align: center;
  font-size: var(--db-subtitle);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--db-ink-muted);
}

/* Everything that belongs to "not finished" sits together, on white. */
.db-sheet__block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.db-sheet__date { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   PHONE LAYOUT
   Everything below only applies at phone width; the desktop layout above is
   untouched. The rule of the section: nothing scrolls sideways except the
   filter strip, which is meant to.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Scrolling stays, the bar goes - the same treatment the tab strips,
     the subnav and the filter strip already get further up. */
  .db-main,
  .db-calendar,
  .db-calendar--month,
  .db-calendar__body,
  .db-modal__body,
  .db-menu { scrollbar-width: none; }

  .db-main::-webkit-scrollbar,
  .db-calendar::-webkit-scrollbar,
  .db-calendar--month::-webkit-scrollbar,
  .db-calendar__body::-webkit-scrollbar,
  .db-modal__body::-webkit-scrollbar,
  .db-menu::-webkit-scrollbar { display: none; }

  /* ── Website public ──────────────────────── */
  /* The sections moved into the burger, so the sideways strip is gone and the
     action - which used to be pushed off screen - gets the full width. */
  .db-subnav { display: none; }

  .db-website__nav {
    display: block;
    min-height: 0;
    padding: 0 16px 12px;
    box-shadow: none;
  }
  .db-subnav__action { width: 100%; margin-right: 0; padding-left: 0; }
  .db-subnav__action .db-btn { width: 100%; justify-content: center; }

  /* ── Page shell ──────────────────────────── */
  .db-main:not(.db-website) { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }

  .db-page-head { align-items: stretch; gap: 10px; margin-bottom: 14px; }
  .db-page-title { font-size: var(--db-subtitle); }

  /* Page actions run the full width: one primary on its own line, the rest
     paired up. Reaching a 44px target beats keeping them on one row. */
  .db-page-head > .db-btn { width: 100%; }
  .db-page-head .db-actions { width: 100%; gap: 8px; }
  .db-page-head .db-actions > *,
  .db-page-head .db-actions form { flex: 1 1 calc(50% - 4px); }
  .db-page-head .db-actions form { display: flex; }
  .db-page-head .db-actions .db-btn { width: 100%; }
  .db-page-head .db-actions .db-btn--primary { flex: 1 1 100%; }

  /* ── Filters: one strip that scrolls, instead of three wrapped rows ── */
  .db-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
    gap: 8px;
    /* bleeds to the screen edges so the strip reads as scrollable */
    margin: 0 -16px 12px;
    padding: 2px 16px;
    /* a long fade reads as "keep going", a short one reads as a cut-off chip */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent 100%);
  }
  .db-filters::-webkit-scrollbar { display: none; }
  .db-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 14px;
  }

  /* ── Search: field on its own line, buttons share the next one ── */
  .db-search { gap: 8px; margin-bottom: 14px; }
  .db-search__field { flex: 1 1 100%; }
  .db-search input[type="date"] { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .db-search .db-btn { flex: 1 1 calc(50% - 4px); }

  /* ── Tables become cards ─────────────────── */
  /* Same markup as the desktop table: each cell only says what role it plays
     and the grid below places it. No second set of views to keep in sync.
     Every role selector is scoped to .db-table--cards, otherwise the generic
     "td" rule below outranks it and the whole layout collapses to one column. */
  .db-table-wrap { overflow-x: visible; }

  /* The wrapper stops being a panel; each row becomes its own card, the way
     the appointment cards in the calendar already work. */
  /* The website panel is neutralised in website.css, which loads after this. */
  .db-card.db-table-wrap {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  /* On a phone a button that is not full width reads as a second thought. */
  .db-offer { padding: 14px; gap: 14px; }
  .db-offer__footer { flex-direction: column; align-items: stretch; }
  .db-offer__submit { width: 100%; }
  .db-offer .db-actions { width: 100%; }
  .db-offer .db-actions > *,
  .db-offer .db-actions form { flex: 1 1 100%; }
  .db-offer .db-actions form { display: flex; }
  .db-offer .db-actions .db-btn { width: 100%; }

  .db-table--cards thead { display: none; }
  .db-table--cards { display: block; }
  .db-table--cards tbody { display: flex; flex-direction: column; gap: 8px; }

  .db-table--cards tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 12px;
    padding: 10px 14px;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    box-shadow: var(--db-shadow);
  }
  .db-table--cards tbody tr:hover { background: var(--db-surface); }

  .db-table--cards td {
    display: block;
    grid-column: 1 / -1;
    padding: 0;
    border: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Top line: the identifier on the left, the status on the right. */
  .db-table--cards .db-td--key {
    grid-column: 1;
    grid-row: 1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .db-table--cards .db-td--status {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: right;
    color: var(--db-ink-soft);
  }
  .db-table--cards .db-td--status .db-sub { display: block; }

  /* The name of the thing, the line people actually scan for. */
  .db-table--cards .db-td--title {
    font-size: var(--db-subtitle);
    font-weight: 600;
    line-height: 1.15;
  }
  /* Tables without a separate name column promote the identifier instead. */
  .db-table--cards tr:not(:has(.db-td--title)) .db-td--key { font-size: var(--db-subtitle); }

  /* Supporting values keep their column header as a label. */
  .db-table--cards .db-td--sub {
    display: flex;
    gap: 12px;
    line-height: 1.35;
    color: var(--db-ink-soft);
  }
  .db-table--cards .db-td--sub::before {
    content: attr(data-label);
    flex: 0 0 92px;
    color: var(--db-ink-muted);
  }

  /* A paragraph of free text (a message, a review) gets no label - it is
     obviously the body of the card. */
  .db-table--cards .db-td--body { color: var(--db-ink-soft); line-height: 1.35; }

  /* The "#" column header is hidden on a card, so the number carries it. */
  .db-table--cards .db-td--id::before { content: "#"; color: var(--db-ink-muted); }

  /* Row actions stay text on a card too, lined up at its bottom right. */
  .db-table--cards .db-table__actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
  }
  /* An actions cell with no actions in it must not add a gap. */
  .db-table--cards .db-table__actions:not(:has(*)) { display: none; }
  .db-table--cards .db-table__actions form { display: flex; }
  .db-table--cards .db-table__actions .db-action-link {
    display: inline-flex;
    min-height: 36px;
    padding: 6px 10px;
    margin-block: 0;
  }
  .db-table--cards .db-table__actions > .db-action-link:last-child,
  .db-table--cards .db-table__actions > form:last-child .db-action-link { margin-right: -10px; }
  .db-table--cards .db-row-link:hover td { background: none; }

  .db-table--cards .db-empty {
    grid-column: 1 / -1;
    text-align: left;
    padding: 0;
    color: var(--db-ink-muted);
  }

  /* ── Detail cards ────────────────────────── */
  .db-details { grid-template-columns: 1fr; gap: 0; padding: 2px 16px; }
  .db-details > * { padding: 12px 0; box-shadow: inset 0 -1px var(--db-border); }
  .db-details > *:last-child { box-shadow: none; }

  .db-section-title { margin: 20px 0 8px; }

  /* ── Tap targets ─────────────────────────── */
  /* Text links inside cards (a client, a contract number) are 17-22px tall.
     The hit area grows without moving anything; it stays short of 44px on
     purpose, because adjacent rows are only a few px apart and larger areas
     would overlap and catch the wrong link. */
  .db-table--cards a,
  .db-details a {
    display: inline-block;
    padding-block: 5px;
    margin-block: -5px;
  }

  /* The week arrows and the logo were 28px and 32px tall. */
  .db-calendar__arrow {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
  }
  .db-topbar__brand { min-height: 44px; padding-right: 8px; }

  /* ── Calendar head ───────────────────────── */
  .db-calendar__nav { width: 100%; justify-content: space-between; gap: 4px; }
  .db-calendar__nav .db-page-title { min-width: 0; text-align: center; }
  .db-page-head .db-switch { width: 100%; gap: 8px; }
  .db-page-head .db-switch .db-btn { flex: 1 1 0; min-height: 42px; }

  .db-banner { flex-direction: column; align-items: stretch; }
  .db-banner .db-btn { width: 100%; }

  /* ── Forms ───────────────────────────────── */
  .db-form { padding: 16px; gap: 14px; }
  .db-form__actions { flex-direction: column-reverse; gap: 8px; }
  .db-form__actions .db-btn { width: 100%; }
}

/* Postpone the oil change reminder: a days field and a button, inline. */
.db-snooze { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.db-snooze .db-input { width: 72px; min-height: 36px; padding: 6px 8px; }

/* A date and its validity side by side (the car papers). */
.db-field-pair { display: grid; grid-template-columns: 1fr 9rem; gap: 10px; }

/* Setări: full width, no card. Grouped sections, one field under another. */
.db-settings { display: flex; flex-direction: column; gap: 8px; }
.db-settings__group + .db-settings__group { border-top: 1px solid var(--db-border); }
.db-settings__group:first-of-type .db-section-title { margin-top: 0; }
.db-settings__grid { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }
/* Fields at a normal width (what the old card had); on a phone the screen
   is narrower than this, so they fill it. */
.db-settings__grid .db-field { max-width: 520px; }
.db-settings__toggle { min-height: 44px; }
.db-settings .db-form__actions { justify-content: flex-start; padding-top: 8px; }

@media (max-width: 760px) {
  .db-settings .db-form__actions .db-btn { width: 100%; }
}
}