/* MiniFests additions on top of app.css (the prototype's own stylesheet). */

a { color: inherit; }
header.mf-top .brand { color: #fff; text-decoration: none; }

/* Links styled as the prototype's buttons */
a.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  border-radius: 10px; padding: 8px 11px; border: 1px solid transparent;
  background: var(--accent); color: var(--header);
}
a.btn:hover { background: var(--accent-dark); }
a.btn.secondary { background: #f7f8f5; color: var(--ink); border-color: #c9cfc4; font-weight: 600; }
a.btn.secondary:hover { border-color: var(--accent-deeper); }
a.btn.ghost { background: transparent; color: var(--ink); padding-left: 0; }
a.btn.ghost:hover { color: var(--accent-deeper); }
a.who-link { text-decoration: underline; }
.toolbar { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
a.card { color: inherit; text-decoration: none; display: block; }
a.title-link { text-decoration: none; }
.value.over { color: var(--danger); }

/* ≡ menu (actions in a menu, never bare icons) */
details.mf-menu { position: relative; }
details.mf-menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 8px 6px 14px;
  font-size: .82rem; user-select: none;
}
details.mf-menu > summary::-webkit-details-marker { display: none; }
details.mf-menu > summary .burger {
  background: var(--accent); color: #1f2418; border-radius: 999px; width: 28px; height: 28px;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
details.mf-menu > nav {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 210px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 6px; display: flex; flex-direction: column;
}
details.mf-menu > nav a, details.mf-menu > nav button {
  display: block; text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--ink);
  text-decoration: none; font-weight: 600; font-size: .88rem; background: none; border: 0; width: 100%;
}
details.mf-menu > nav a:hover, details.mf-menu > nav button:hover { background: var(--accent-soft); }
details.mf-menu > nav a.on { background: #eef3d6; }
details.mf-menu > nav .signout { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; color: var(--muted); }
details.mf-menu > nav .danger { color: var(--danger); }
details.mf-menu--row > summary {
  color: var(--ink); border-color: var(--line); padding: 2px 10px; font-size: 1.1rem; line-height: 1.2; background: #fff;
}
@media (max-width: 600px) { details.mf-menu > summary .who { display: none; } }

/* ── Embedded in the Mendip App (desktop shell tab / phone frame) ─────────────
   Slim the header, don't hide it (estate rule, mendipsys/complaints notes/briefs/
   embedded-mode-howto.md): the shell's strip is ITS chrome, not our navigation.
   Hide logo / name / Sign out (the shell shows who you are; signing out in the
   frame drops the shared sign-in for the App too). Keep Season · Suppliers
   inline at every width; the ≡ then holds only the super-admin pages, and is
   hidden for everyone else rather than opening an empty menu. */
.mf-inline { display: none; }
body.embedded header.mf-top { padding: 0 10px; min-height: 42px; border-bottom-width: 2px; flex-wrap: nowrap; gap: 8px; }
body.embedded header.mf-top .brand,
body.embedded .mf-menu .who,
body.embedded .mf-menu .signout,
body.embedded .mf-menu .nav-main { display: none; }
body.embedded .mf-inline { display: flex; gap: 2px; min-width: 0; overflow-x: auto; }
body.embedded .mf-inline a {
  color: #d7dbd6; text-decoration: none; font-weight: 600; font-size: .85rem; white-space: nowrap;
  padding: 11px 10px 9px; border-bottom: 2px solid transparent;
}
body.embedded .mf-inline a.on { color: #fff; border-bottom-color: var(--accent); }
body.embedded .mf-inline a:hover { color: #fff; }
body.embedded details.mf-menu:not(.has-extra) { display: none; }
body.embedded details.mf-menu > summary { border: 0; padding: 4px 0; }
body.embedded details.mf-menu > summary .burger { width: 26px; height: 26px; }
/* The theme banner stays (it tells you which weekend you're on) but short. */
body.embedded .hero-band img { height: 90px; object-fit: cover; }
body.embedded .site-footer { display: none; }
body.embedded main { padding-top: 14px; padding-bottom: 48px; }
@media (max-width: 360px) { body.embedded .mf-inline a { padding: 11px 7px 9px; font-size: .8rem; } }

/* Season bar */
.season-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.season-bar h2 { margin: 0; font-size: 1.2rem; }

.totals.totals-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .totals.totals-4 { grid-template-columns: repeat(2, 1fr); } }
.coverage { margin: 4px 0 14px; }
.coverage .badge { margin: 2px; text-transform: none; letter-spacing: 0; }

.tag {
  display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; background: #eef0ea; color: var(--muted); vertical-align: middle;
}

/* Booking form */
.booking-form {
  border: 1px solid #d7e98a; background: linear-gradient(180deg, var(--accent-soft), #fff 60%);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.booking-form .off-template { display: none; }
.booking-form.is-off-template .off-template { display: flex; }
.booking-form input, .booking-form select { width: 100%; }
.booking-form .time-range-inline input { width: auto; }

/* Inline edits */
input.money-in { width: 5.5rem; }
select.status-in { width: 8.6rem; font-weight: 600; }
select.book-enquiry, select.pay-unpaid { color: var(--warn); }
select.book-confirmed, select.pay-paid { color: var(--ok); }
select.book-pencilled, select.pay-invoiced { color: #0369a1; }
select.book-cancelled { color: var(--danger); }
.saving { opacity: .55; }
.error { border-color: var(--danger) !important; box-shadow: 0 0 0 2px rgba(185,28,28,.15); }
tr.is-cancelled td:not(.row-menu) { opacity: .55; }
td.row-menu { width: 1%; }
.paid-date { margin-top: 3px; }

/* Flash + toast */
.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: .9rem; }
.flash-success { background: var(--ok-soft); color: var(--ok); border: 1px solid #c6e59a; }
.flash-error { background: #fee2e2; color: var(--danger); border: 1px solid #fecaca; }
#mf-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--header); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: .85rem;
  transition: opacity .15s, transform .15s; z-index: 50;
}
#mf-toast.show { opacity: 1; transform: translate(-50%, 0); }
#mf-toast.bad { background: var(--danger); }

/* Users */
.role-key { display: grid; gap: 4px; margin-bottom: 14px; }
.danger-text { color: var(--danger) !important; }
textarea { width: 100%; }

/* Login */
.login-box { max-width: 420px; margin: 20px auto; }
.login-box input { width: 100%; }

/* Corner beta pill + feedback link (estate standard) */
.beta-pill {
  position: fixed; right: 12px; bottom: 12px; z-index: 40; display: flex; gap: 6px; align-items: center;
  background: var(--header); color: #fff; font-size: .72rem; padding: 5px 11px; border-radius: 999px;
  opacity: .85; pointer-events: none;
}
.beta-pill .bb-sep { opacity: .6; }
.beta-pill a.feedback-link { pointer-events: auto; color: var(--accent); font-weight: 600; text-decoration: none; }
.beta-pill a.feedback-link:hover { text-decoration: underline; }

/* File storage checks */
.st-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.st-row:last-of-type { border-bottom: 0; }
.st-icon { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; background: #eef0ea; color: var(--muted); }
.st-ok .st-icon { background: var(--ok-soft); color: var(--ok); }
.st-bad .st-icon { background: #fee2e2; color: var(--danger); }

/* ── Picture button (replaces the browser's raw file picker) ──────────────── */
.pic-btn {
  position: relative; overflow: hidden; display: inline-block; margin: 0; cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--ink);
  background: #f7f8f5; border: 1px solid #c9cfc4; border-radius: 8px; padding: 6px 10px; white-space: nowrap;
}
.pic-btn:hover { border-color: var(--accent-deeper); }
.pic-btn input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pic-btn:focus-within { outline: 2px solid var(--accent-deeper); outline-offset: 1px; }
.format-thumb { gap: 10px; }
.f-times { display: flex; align-items: center; gap: 6px; }
.f-times .sep { color: var(--muted); font-size: .8rem; }
#format-rows .f-times input { width: 6.6rem; }
#format-rows .f-budget input { width: 6rem; }
#format-rows input[type=checkbox] { width: auto; }
#format-rows .f-day select { min-width: 7.2rem; }
#format-rows .f-type select { min-width: 8.5rem; }
#format-rows .f-name input { min-width: 8rem; }
#format-rows .f-times input { width: 6.2rem; }
#format-rows td { padding-left: 5px; padding-right: 5px; }
#format-rows .format-thumb img { width: 44px; height: 44px; }
#format-rows .f-remove label { white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }

/* ── Phones: tables become panels (the estate's table.responsive pattern) ────
   One card per row, a small label from data-label on each cell, the main cell
   as the card's heading. The two editing tables get their own grid so related
   fields sit side by side and every input is full width and thumb-sized.
   900px, not 700: the editing tables need ~950px, so tablets and narrow
   windows get panels too rather than a sideways-scrolling table. */
@media (max-width: 900px) {
  table.responsive, table.responsive tbody,
  table.format-table, table.format-table tbody,
  table.bookings, table.bookings tbody { display: block; width: 100%; overflow: visible; }
  table.responsive thead, table.format-table thead, table.bookings thead { display: none; }

  /* Lists: label on the left, value on the right */
  table.responsive tr {
    display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 10px;
  }
  table.responsive td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    border: 0; padding: 4px 0; text-align: right;
  }
  table.responsive td::before {
    content: attr(data-label); flex: 0 0 6.5rem; text-align: left;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  }
  table.responsive td.cell-main { display: block; text-align: left; font-weight: 600; font-size: 1rem; padding-bottom: 6px; }
  table.responsive td.cell-main::before, table.responsive td.cell-action::before { display: none; }
  table.responsive td.cell-action { justify-content: flex-end; }
  table.responsive td.cell-action:empty { display: none; }
  table.responsive td form.row { justify-content: flex-end; }

  /* Editing panels: label ABOVE each field */
  table.format-table td[data-label]::before,
  table.bookings td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  }
  table.format-table td, table.bookings td { border: 0; padding: 0; min-width: 0; }
  table.format-table input:not([type=checkbox]):not([type=file]), table.format-table select,
  table.bookings input, table.bookings select { width: 100% !important; min-width: 0; font-size: 1rem; padding: 9px 10px; }


  /* Programme format: one panel per slot */
  #format-rows tr.slot-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px;
    grid-template-areas: "thumb thumb" "name name" "day type" "time time" "budget remove";
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent);
    border-radius: 12px; padding: 12px; margin-bottom: 12px;
  }
  #format-rows .f-thumb { grid-area: thumb; }  #format-rows .f-name { grid-area: name; }
  #format-rows .f-day { grid-area: day; }      #format-rows .f-type { grid-area: type; }
  #format-rows .f-time { grid-area: time; }    #format-rows .f-budget { grid-area: budget; }
  #format-rows .f-remove { grid-area: remove; align-self: end; justify-self: end; padding-bottom: 10px; }
  #format-rows .f-name input { font-weight: 600; }
  #format-rows .f-times input { flex: 1; width: auto !important; }
  .format-thumb img { width: 52px; height: 52px; }

  /* Weekend bookings: one panel per booking */
  .day-body { padding: 8px; }
  table.bookings tr {
    display: grid; grid-template-columns: 56px 1fr 1fr auto; gap: 10px;
    grid-template-areas:
      "thumb slot slot menu"
      "thumb who  who  who"
      "times times times times"
      "budget budget fee fee"
      "book book pay pay";
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px;
  }
  table.bookings tr:last-child { margin-bottom: 0; }
  table.bookings .b-thumb { grid-area: thumb; width: auto; padding: 0; }
  table.bookings .b-thumb .thumb { width: 56px; height: 56px; }
  table.bookings .b-slot { grid-area: slot; align-self: center; }
  table.bookings .b-who { grid-area: who; }
  table.bookings .b-times { grid-area: times; width: auto; max-width: none; }
  table.bookings .b-budget { grid-area: budget; }
  table.bookings .b-fee { grid-area: fee; }
  table.bookings .b-book { grid-area: book; }
  table.bookings .b-pay { grid-area: pay; }
  table.bookings .b-menu { grid-area: menu; width: auto; }
  table.bookings .time-range { flex-direction: row; width: 100%; min-width: 0; gap: 8px; }
  table.bookings .time-range input { flex: 1; }
  table.bookings td.mini.b-times { font-size: .95rem; color: var(--ink); }
  table.bookings input.time-edit[type=time], #format-rows input[type=time] { font-size: 1rem; padding: 9px 8px; color: var(--ink); }
}

/* Phone header (outside the App frame): one row, not two under a sticky bar */
@media (max-width: 600px) {
  header.mf-top { flex-wrap: nowrap; padding: 10px 14px; }
  header.mf-top .logo { height: 34px; width: auto; }
  header.mf-top .brand { gap: 10px; min-width: 0; }
  header.mf-top .brand-text { padding-left: 10px; }
  header.mf-top .brand-text .sub { display: none; }
  header.mf-top h1 { font-size: 1rem; white-space: nowrap; }
}