:root {
  --bg: #f3f8fc;
  --paper: #f8fbfe;
  --card: #ffffff;
  --ink: #18344c;
  --muted: #5d7388;
  --line: #d8e6f1;
  --accent: #2f7fc4;
  --accent-2: #7ec7f5;
  --accent-deep: #205f99;
  --ok: #1b8f66;
  --bad: #c94658;
  --warn: #c9901a;
  --soft-ok: #e8f8f1;
  --soft-bad: #fdecef;
  --soft-warn: #fff6dd;
  --shadow: 0 16px 40px rgba(45, 93, 134, .10);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: linear-gradient(180deg, #f9fcff 0%, var(--bg) 100%); color: var(--ink); }
body { min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(248, 251, 254, .92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.logo {
  width: 60px; height: 60px; border-radius: 18px;
  display: grid; place-items: center; background: #ffffff; color: var(--accent-deep);
  font-weight: 900; letter-spacing: -.06em; overflow: hidden; flex: 0 0 auto;
  border: 1px solid rgba(76,159,225,.24); box-shadow: 0 8px 24px rgba(76,159,225,.16);
}
.logo img, .logo-image {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.brand h1 { font-size: 28px; margin: 0; line-height: 1; letter-spacing: -.04em; color: var(--accent-deep); }
.brand span { font-size: 12px; color: var(--muted); }
.user-pill { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.brand-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.brand-topline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand-subtitle { font-size: 13px; color: var(--muted); }
.beta-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; background: #e8f3fb; color: var(--accent-deep); border: 1px solid #cfe4f5; }
.user-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.user-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.user-name { font-size: 16px; line-height: 1.1; }
.header-role { font-size: 12px; }
.main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 18px 80px; }
.hero {
  grid-column: span 12;
  border-radius: 30px; padding: 26px; background: linear-gradient(135deg, #ffffff, #eef7ff 58%, #e2f0fb 100%);
  box-shadow: var(--shadow); border: 1px solid rgba(126, 199, 245, .35); margin-bottom: 18px;
}
.hero h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 46px); letter-spacing: -.06em; color: var(--accent-deep); }
.hero p { color: var(--muted); margin: 0; max-width: 760px; line-height: 1.55; }


.hero-meta-list {
  display: grid;
  gap: 4px;
  color: var(--muted);
  margin: 0;
  max-width: 760px;
  line-height: 1.55;
}

.hero-meta-list strong {
  color: var(--ink);
}
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card {
  grid-column: span 12; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 18px;
  box-shadow: 0 8px 24px rgba(52, 103, 151, .06);
}
.card h3 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.03em; color: var(--accent-deep); }
.card p { color: var(--muted); line-height: 1.5; }
@media (min-width: 860px) {
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; }
}
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 800; font-size: 13px; color: #35506a; }
.input, select, textarea {
  width: 100%; border: 1px solid var(--line); background: #fbfdff; border-radius: 16px;
  padding: 13px 14px; color: var(--ink); outline: none;
}
textarea { min-height: 88px; resize: vertical; }
.input:focus, select:focus, textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(76,159,225,.16); }
.btn {
  border: 0; border-radius: 16px; padding: 12px 16px; font-weight: 900;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep)); color: white; display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  box-shadow: 0 10px 20px rgba(47,127,196,.18);
}
.btn:hover { filter: brightness(.98); }
.btn.secondary { background: #e8f3fb; color: var(--accent-deep); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn.danger { background: linear-gradient(180deg, #da5a6a, var(--bad)); }
.btn.ok { background: linear-gradient(180deg, #26a274, var(--ok)); }
.btn.small { padding: 8px 11px; border-radius: 12px; font-size: 13px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.tab { border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; background: #fff; color: var(--ink); font-weight: 800; }
.tab.active { background: var(--accent); color: white; border-color: var(--accent); }
.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi strong { font-size: 38px; letter-spacing: -.06em; color: var(--accent-deep); }
.kpi span { color: var(--muted); font-weight: 700; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 900;
  background: #edf4fa; color: #34526f;
}
.badge.ok { background: var(--soft-ok); color: var(--ok); }
.badge.bad { background: var(--soft-bad); color: var(--bad); }
.badge.warn { background: var(--soft-warn); color: var(--warn); }
.badge.temp-pos { background: #e8f3fb; color: #1e6fb8; }
.badge.temp-neg { background: #fdecef; color: #c24866; }
.badge.temp-zero { background: #eef2f6; color: #536579; }
.list { display: grid; gap: 12px; }
.item {
  border: 1px solid var(--line); background: #fbfdff; border-radius: 18px; padding: 14px;
  display: grid; gap: 8px;
}
.item-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.item-title { font-weight: 950; }
.item-sub { color: var(--muted); font-size: 13px; }
.check-section { display: grid; gap: 12px; margin: 12px 0; }
.check-group {
  border: 1px solid var(--line); border-radius: 20px; padding: 14px; background: #fbfdff;
}
.check-group h4 { margin: 0 0 12px; font-size: 16px; color: var(--accent-deep); }
.check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 12px 0;
  border-top: 1px solid #ecf2f8;
}
.check-row:first-of-type { border-top: 0; }
.check-label {
  font-weight: 800;
  color: #1f3959;
  flex: 1 1 auto;
  min-width: 0;
}
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.chip {
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  min-width: 92px;
  text-align: center;
}
.chip.active { background: var(--accent); color: white; border-color: var(--accent); }
.chip.bad.active { background: var(--bad); border-color: var(--bad); }
.chip.ok.active { background: var(--ok); border-color: var(--ok); }
@media (max-width: 560px) {
  .check-row {
    gap: 10px;
  }
  .check-label {
    font-size: 15px;
  }
  .chips {
    gap: 6px;
  }
  .chip {
    min-width: 84px;
    padding: 8px 10px;
    font-size: 15px;
  }
}
.fridge-form {
  border: 2px dashed #c4ddf1; border-radius: 22px; padding: 14px; background: #f7fbff; display: grid; gap: 12px;
}
.fridge-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.fridge-row .field { grid-column: span 12; }
@media (min-width: 740px) {
  .fridge-row .w2 { grid-column: span 2; }
  .fridge-row .w3 { grid-column: span 3; }
  .fridge-row .w4 { grid-column: span 4; }
  .fridge-row .w6 { grid-column: span 6; }
}
.summary-box { background: linear-gradient(135deg, #184269, #2f7fc4); color: white; border-radius: 22px; padding: 18px; display: grid; gap: 10px; }
.summary-box .badge { background: rgba(255,255,255,.12); color: white; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.details { white-space: pre-wrap; background: #fbfdff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; overflow-x: auto; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 50;
  background: #173957; color: white; padding: 12px 16px; border-radius: 999px; box-shadow: var(--shadow); font-weight: 850;
}
.empty { color: var(--muted); padding: 18px; border: 1px dashed var(--line); border-radius: 18px; text-align: center; background: rgba(255,255,255,.65); }
hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

.setup-note {
  display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px;
  background: linear-gradient(180deg, #f4faff, #eaf5fe); border: 1px solid #cfe4f5;
}
.setup-note strong { color: var(--accent-deep); font-size: 14px; letter-spacing: .01em; }
.setup-note p { margin: 0; }
.setup-list { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; }
.setup-list li { line-height: 1.45; }

@media (max-width: 760px) {
  .topbar-inner { align-items: flex-start; flex-direction: column; }
  .brand { width: 100%; }
  .logo { width: 54px; height: 54px; }
  .brand h1 { font-size: 22px; }
  .user-panel { width: 100%; justify-content: space-between; align-items: center; }
  .user-meta { align-items: flex-start; }
  .user-name { font-size: 15px; }
}

.auth-hero { max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }
.auth-grid {
  grid-column: span 12;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  justify-items: center;
}
.auth-card {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.auth-card .btn { width: 100%; }
@media (min-width: 980px) {
  .auth-grid {
    grid-template-columns: repeat(2, minmax(320px, 520px));
    justify-content: center;
    align-items: stretch;
  }
  .auth-card { height: 100%; }
}

.card-hint {
  margin-top: -4px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--muted);
}

.auth-card-wide {
  max-width: 720px;
}
@media (min-width: 980px) {
  .auth-card-wide {
    grid-column: 1 / -1;
  }
}

.tab-with-badge {
  position: relative;
}
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: #f3cf67;
  color: #8a6412;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(201, 144, 26, .18);
  border: 1px solid rgba(201, 144, 26, .18);
}
.tab.active .tab-badge {
  background: #f3cf67;
  color: #7c5a10;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 6px 18px rgba(52, 103, 151, .08);
}
.lang-flag {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  line-height: 1;
  font-size: 17px;
  box-shadow: none;
}
.lang-flag.active {
  background: #e8f3fb;
  border-color: #cfe4f5;
  box-shadow: inset 0 0 0 1px rgba(47,127,196,.08);
}
@media (max-width: 760px) {
  .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }
  .lang-switcher {
    order: 2;
  }
}

.requests-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.requests-list {
  gap: 18px;
}
.request-card {
  padding: 18px;
}
.request-role-line {
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--ink);
}
.request-role-line strong {
  font-weight: 900;
}
.request-role-value {
  font-weight: 900;
  color: var(--accent-deep);
}
@media (max-width: 760px) {
  .requests-header .btn {
    margin-top: 2px;
  }
}

/* Language switcher moved to top-right on mobile */
@media (max-width: 760px) {
  .topbar-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .brand {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .topbar-actions {
    width: auto;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
  }
  .lang-switcher {
    order: 0;
    align-self: flex-end;
  }
  .user-panel {
    width: auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px;
  }
  .user-meta {
    align-items: flex-end;
  }
  .user-name {
    text-align: right;
  }
}

.brand-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}
.user-name-left {
  font-size: 18px;
  line-height: 1.15;
  text-align: left;
}
.topbar-actions {
  align-self: flex-start;
}
.user-panel {
  justify-content: flex-end;
}
@media (max-width: 760px) {
  .brand {
    align-items: flex-start;
  }
  .brand-copy {
    gap: 8px;
  }
  .brand-subtitle {
    font-size: 12px;
  }
  .brand-user-meta {
    margin-top: 8px;
  }
  .user-name-left {
    font-size: 17px;
  }
  .topbar-actions {
    gap: 12px;
  }
  .user-panel {
    align-items: flex-end;
  }
}

.header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.brand-copy {
  justify-content: center;
}
.brand-topline {
  min-height: 60px;
  align-items: center;
}
.brand-subtitle {
  display: none !important;
}
.brand-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 0;
  margin-left: 0;
}
.user-name-left {
  font-size: 18px;
  line-height: 1.15;
  text-align: left;
}
.topbar-actions {
  align-self: flex-start;
}
@media (max-width: 760px) {
  .topbar-inner {
    align-items: flex-start;
  }
  .header-left {
    gap: 8px;
  }
  .brand-row {
    gap: 12px;
    align-items: center;
  }
  .brand-topline {
    min-height: 60px;
  }
  .brand-user-meta {
    padding-left: 0;
  }
  .user-name-left {
    font-size: 17px;
  }
}

/* Cleaner header layout */
.header-left {
  gap: 12px;
}
.brand-row {
  align-items: center;
  gap: 16px;
}
.logo {
  width: 72px;
  height: 72px;
  border-radius: 22px;
}
.brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 72px;
  gap: 10px;
}
.brand-copy h1 {
  margin: 0;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--accent-deep);
}
.brand-topline {
  display: none !important;
}
.brand-badge-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.beta-badge {
  padding: 6px 14px;
  font-size: 13px;
}
.brand-user-meta {
  align-items: flex-start;
  gap: 8px;
  padding-left: 0;
  margin-left: 0;
}
.header-role {
  align-self: flex-start;
}
.user-name-left {
  font-size: 19px;
  line-height: 1.12;
}
.topbar-actions {
  gap: 12px;
}
@media (max-width: 760px) {
  .topbar-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }
  .header-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
  }
  .brand-row {
    align-items: center;
    gap: 14px;
  }
  .logo {
    width: 68px;
    height: 68px;
  }
  .brand-copy {
    min-height: 68px;
    gap: 8px;
  }
  .brand-copy h1 {
    font-size: 28px;
  }
  .beta-badge {
    padding: 5px 12px;
    font-size: 12px;
  }
  .brand-user-meta {
    gap: 8px;
  }
  .user-name-left {
    font-size: 18px;
  }
  .topbar-actions {
    width: auto;
    flex: 0 0 auto;
    gap: 12px;
    align-items: flex-end;
  }
  .lang-switcher {
    order: 0;
  }
  .user-panel {
    width: auto;
    align-items: flex-end;
  }
}

.user-name-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.user-name-row .btn {
  flex: 0 0 auto;
}
@media (max-width: 760px) {
  .user-name-row {
    gap: 12px;
  }
}

/* Move the Logout button to the far right on the same row as the user name */
.brand-user-meta {
  width: min(100%, 1180px);
}

.user-name-row {
  width: 100%;
}

@media (max-width: 760px) {
  .brand-user-meta {
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
  }

  .user-name-row {
    width: 100%;
    justify-content: space-between;
  }

  .user-name-row .btn {
    margin-left: auto;
  }
}

@media (min-width: 761px) {
  .brand-user-meta {
    width: min(100%, 1180px);
  }

  .user-name-row .btn {
    margin-left: auto;
  }
}

.temp-alert {
  margin: 18px 0;
  padding: 16px;
  border-radius: 22px;
  background: #fff4d6;
  border: 1px solid #f0cd70;
  color: #6f4b00;
}
.temp-alert strong {
  color: #7c5100;
}
.temp-alert p {
  margin: 8px 0;
  color: #6f4b00;
}
.temp-alert-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.temp-alert-row {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(124,81,0,.12);
}
.temp-alert-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.temp-alert-name {
  font-weight: 900;
  color: #7c5100;
  font-size: 16px;
  line-height: 1.2;
}
.temp-alert-zone {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 900;
  background: rgba(124,81,0,.08);
  color: #7c5100;
  text-transform: uppercase;
}
.temp-alert-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: #6f4b00;
}
.fridge-range-note {
  margin: 14px 0 18px;
}

/* Clean history/details view */
.records-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.records-toolbar h3 { margin-bottom: 6px; }
.records-toolbar p {
  margin: 0;
  color: var(--muted);
  max-width: 560px;
}
.records-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.records-filters .input { width: auto; min-width: 150px; }

.record-detail {
  display: grid;
  gap: 22px;
  margin-top: 12px;
  width: 100%;
  overflow: hidden;
}
.detail-section {
  display: grid;
  gap: 12px;
}
.detail-fridge-list,
.detail-checks {
  display: grid;
  gap: 12px;
}
.detail-fridge-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfdff;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.detail-fridge-card.is-bad {
  border-color: #f0c6cf;
  background: #fff8fa;
}
.detail-fridge-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.detail-fridge-top div {
  display: grid;
  gap: 4px;
}
.detail-fridge-top strong {
  color: var(--accent-deep);
  font-size: 18px;
}
.detail-fridge-top span:not(.badge) {
  color: var(--muted);
  font-weight: 750;
}
.detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.detail-metrics div {
  border: 1px solid #e8f0f7;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  min-width: 0;
}
.detail-metrics small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.detail-metrics strong {
  overflow-wrap: anywhere;
}
.detail-check-section {
  display: grid;
  gap: 10px;
}
.detail-check-section h4 {
  margin: 10px 0 0;
  color: var(--accent-deep);
  font-size: 18px;
}
.detail-check-group {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfdff;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.detail-check-group.has-issue {
  border-color: #f0c6cf;
  background: #fff8fa;
}
.detail-check-group-head,
.detail-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.detail-check-group-head strong {
  color: var(--accent-deep);
}
.detail-check-rows {
  display: grid;
  gap: 8px;
}
.detail-check-row {
  padding: 8px 0;
  border-top: 1px solid #edf3f9;
}
.detail-check-row span:first-child {
  font-weight: 750;
}
.detail-note {
  border-radius: 14px;
  padding: 10px 12px;
  background: #eef7ff;
  color: var(--ink);
}
.verify-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 760px) {
  .records-toolbar {
    display: grid;
    gap: 14px;
  }
  .records-filters {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .records-filters .input,
  .records-filters .btn {
    width: 100%;
  }
  .detail-metrics {
    grid-template-columns: 1fr;
  }
  .verify-box {
    grid-template-columns: 1fr;
  }
  .record-detail h3 {
    font-size: 22px;
  }
  .detail-fridge-top strong {
    font-size: 17px;
  }
}


/* Make 'Open details' much more visible */
.record-item {
  gap: 12px;
}
.record-item-head {
  align-items: center;
}
.record-item-main {
  display: grid;
  gap: 4px;
}
.detail-toggle-btn {
  min-width: 190px;
  min-height: 54px;
  padding: 14px 22px;
  font-size: 18px;
  font-weight: 950;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(62, 115, 177, 0.14);
}
.record-badges {
  gap: 10px;
}

@media (max-width: 760px) {
  .record-item-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: stretch;
  }
  .detail-toggle-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    font-size: 20px;
    padding: 16px 20px;
  }
  .record-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}


/* History filters */
.records-filters select.input {
  min-width: 170px;
}
@media (max-width: 760px) {
  .records-filters select.input {
    min-width: 0;
  }
}


/* Auto filters for history */
.records-filter-panel {
  display: grid;
  gap: 12px;
}
.records-filter-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.records-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.filter-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.filter-field span {
  font-size: 15px;
  font-weight: 850;
  color: var(--ink);
}
.filter-field .input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.filter-field input[type="date"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 18px;
}
.records-export {
  margin-top: 16px;
}

@media (max-width: 760px) {
  .records-filters {
    grid-template-columns: 1fr;
  }
  .records-export .btn {
    width: 100%;
  }
}


/* Fix date filter alignment/overflow on mobile */
.records-toolbar,
.records-filter-panel,
.records-filters,
.filter-field,
.records-export {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.records-filter-panel {
  max-width: 100%;
  margin: 0 auto;
}

.records-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

.filter-field {
  width: 100%;
  min-width: 0;
}

.filter-field .input,
.filter-field select,
.filter-field input[type="date"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: block;
}

.filter-field input[type="date"] {
  text-align: center;
  padding-left: 14px;
  padding-right: 14px;
}

.filter-field input[type="date"]::-webkit-date-and-time-value {
  text-align: center;
}

.filter-field input[type="date"]::-webkit-datetime-edit {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.records-export {
  margin-top: 16px;
}

.records-export .btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* Developer role badge color */
.badge.developer {
  background: #efe7ff;
  color: #6f32c8;
  border: 1px solid #d8c3ff;
}
.header-role.developer {
  background: #efe7ff;
  color: #6f32c8;
  border-color: #d8c3ff;
  box-shadow: 0 8px 18px rgba(111, 50, 200, .10);
}


/* Safari-safe custom date picker and PDF export button */
.date-picker-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.date-display {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  background: #fbfdff;
  border-radius: 16px;
  padding: 13px 14px;
  min-height: 54px;
  color: var(--ink);
  font-weight: 850;
  text-align: center;
  font-size: 18px;
}
.date-native-overlay {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.records-export {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.records-export .btn {
  width: 100%;
}
@media (max-width: 760px) {
  .records-export {
    grid-template-columns: 1fr;
  }
}

/* Strong developer purple override */
.badge.developer,
span.badge.developer,
.header-role.developer,
span.header-role.developer {
  background: #efe7ff !important;
  color: #6f32c8 !important;
  border: 1px solid #d8c3ff !important;
}

/* Edit/delete controls */
.btn.danger {
  background: linear-gradient(180deg, #d84a63, #bf3550);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(191, 53, 80, .16);
}
.record-admin-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.record-edit-box {
  border: 1px solid #d9e8f5;
  background: #fbfdff;
  border-radius: 22px;
  padding: 16px;
  display: grid;
  gap: 14px;
}
.record-edit-box h3,
.record-edit-box h4 {
  margin-bottom: 4px;
}
.edit-fridge-list,
.edit-checks {
  display: grid;
  gap: 12px;
}
.edit-fridge-card,
.edit-check-group {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 10px;
}
.edit-check-row {
  display: grid;
  grid-template-columns: 1fr minmax(130px, 180px);
  gap: 10px;
  align-items: center;
  border-top: 1px solid #edf3f9;
  padding-top: 8px;
}
.edit-check-row label {
  margin: 0;
}
@media (max-width: 760px) {
  .record-admin-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .record-admin-actions .btn {
    width: 100%;
  }
  .edit-check-row {
    grid-template-columns: 1fr;
  }
}


.temp-field {
  min-width: 0;
}

.temp-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.temp-input-wrap .input {
  flex: 1 1 auto;
  min-width: 0;
}

.temp-sign-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.temp-sign-btn {
  width: 54px;
  min-width: 54px;
  border: 1px solid var(--border);
  border-radius: 18px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.temp-sign-btn.plus {
  background: linear-gradient(180deg, #eaf6ff, #d9efff);
  color: #0f66a8;
}

.temp-sign-btn.minus {
  background: linear-gradient(180deg, #fff0f3, #ffe1e8);
  color: #b72d4b;
}

.temp-sign-btn:active {
  transform: translateY(1px);
}

@media (max-width: 560px) {
  .temp-input-wrap {
    gap: 8px;
  }
  .temp-sign-btn {
    width: 50px;
    min-width: 50px;
    border-radius: 16px;
  }
}


.preset-location-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.preset-location-head h3 {
  margin-bottom: 6px;
}

.preset-location-select {
  min-width: 260px;
  margin: 0;
}

.preset-fridge-zones {
  display: grid;
  gap: 28px;
  margin-top: 20px;
}

.preset-zone {
  border: 1px solid rgba(149, 203, 238, .7);
  border-radius: 28px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(246, 252, 255, .94), rgba(255, 255, 255, .96));
}

.preset-zone-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.preset-zone-title h3 {
  font-size: clamp(26px, 5vw, 42px);
  letter-spacing: .02em;
  margin: 0;
}

.preset-fridge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.preset-fridge-card {
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.preset-fridge-card.needs-temp {
  border-color: rgba(183, 45, 75, .45);
  box-shadow: 0 0 0 4px rgba(183, 45, 75, .08);
}

.preset-fridge-card.temp-bad {
  background: linear-gradient(180deg, #fff, #fff6f7);
}

.preset-fridge-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(180deg, #386f9f, #274a68);
}

.preset-fridge-head strong {
  display: block;
  font-size: 18px;
  line-height: 1.15;
}

.preset-fridge-head span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  opacity: .9;
}

.preset-fridge-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .16);
  flex: 0 0 auto;
}

.preset-check-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.preset-fridge-footer {
  justify-content: space-between;
  margin-top: 22px;
}

@media (max-width: 760px) {
  .preset-location-head {
    display: block;
  }
  .preset-location-select {
    min-width: 0;
    margin-top: 14px;
  }
  .preset-fridge-grid {
    grid-template-columns: 1fr;
  }
  .preset-zone {
    padding: 14px;
    border-radius: 24px;
  }
  .preset-fridge-footer {
    flex-direction: column;
    align-items: stretch;
  }
}


/* Zone carousel layout - keeps the original WB Hygiene theme */
.fridge-zone-carousel {
  padding: 18px 0 20px;
  overflow: hidden;
}

.fridge-zone-carousel .preset-zone-title {
  padding: 0 18px;
}

.fridge-carousel-hint {
  margin: -8px 18px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.preset-fridge-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 18px 16px;
  scrollbar-width: thin;
}

.preset-fridge-carousel::after {
  content: "";
  min-width: 2px;
}

.carousel-fridge-card {
  flex: 0 0 min(86vw, 330px);
  scroll-snap-align: start;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,252,255,.98));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.carousel-fridge-card.temp-bad {
  background: linear-gradient(180deg, #fff, #fff6f7);
}

.carousel-fridge-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, #eef8ff, #e5f3ff);
  border: 1px solid rgba(149, 203, 238, .7);
}

.carousel-fridge-head strong {
  display: block;
  color: var(--blue);
  font-size: 22px;
  line-height: 1.1;
}

.carousel-fridge-head span:not(.badge) {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.carousel-range {
  margin: 0 2px 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.carousel-fridge-card .field {
  margin-bottom: 10px;
}

.carousel-fridge-card textarea {
  min-height: 74px;
}

@media (min-width: 760px) {
  .carousel-fridge-card {
    flex-basis: 340px;
  }
}

@media (max-width: 430px) {
  .fridge-zone-carousel .preset-zone-title {
    padding: 0 14px;
  }
  .fridge-carousel-hint {
    margin-left: 14px;
    margin-right: 14px;
  }
  .preset-fridge-carousel {
    padding-left: 14px;
    padding-right: 14px;
    gap: 12px;
  }
  .carousel-fridge-card {
    flex-basis: calc(100vw - 56px);
  }
  .carousel-fridge-head strong {
    font-size: 20px;
  }
}


/* Zone title outside the fridge cards - original WB Hygiene theme */
.fridge-zone-block {
  margin: 28px 0 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.fridge-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  margin-bottom: 8px;
}

.fridge-zone-header h3 {
  margin: 0;
  color: var(--blue);
  font-size: clamp(30px, 7vw, 46px);
  letter-spacing: .02em;
  line-height: 1;
}

.fridge-zone-header .badge {
  white-space: nowrap;
}

.fridge-zone-block .fridge-carousel-hint {
  margin: 0 4px 12px;
}

.fridge-zone-block .preset-fridge-carousel {
  padding-left: 4px;
  padding-right: 4px;
}

.carousel-fridge-card {
  flex: 0 0 min(86vw, 340px);
}

.carousel-fridge-head strong {
  font-size: 21px;
}

.carousel-fridge-head span:not(.badge) {
  font-weight: 800;
}

@media (max-width: 430px) {
  .fridge-zone-header {
    padding: 0 2px;
  }
  .fridge-zone-block .preset-fridge-carousel {
    padding-left: 2px;
    padding-right: 2px;
  }
  .carousel-fridge-card {
    flex-basis: calc(100vw - 58px);
  }
}


/* Visual fix for mobile carousel overflow and clipped cards */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

#app, .app-shell, main, #main, #recordStep {
  max-width: 100%;
  overflow-x: hidden;
}

.preset-fridge-zones,
.fridge-zone-block {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.fridge-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
  margin-bottom: 8px;
}

.fridge-zone-header h3 {
  flex: 1 1 auto;
  min-width: 0;
}

.fridge-carousel-hint {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  font-size: 14px;
  margin-bottom: 10px;
}

.preset-fridge-carousel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 12px;
  padding: 4px 2px 18px !important;
  scroll-padding-left: 2px;
  scroll-padding-right: 2px;
}

.carousel-fridge-card {
  box-sizing: border-box;
  flex: 0 0 calc(100% - 4px) !important;
  max-width: calc(100% - 4px);
  min-width: 0;
  scroll-snap-align: start;
  margin: 0;
}

.carousel-fridge-head {
  align-items: flex-start;
  gap: 10px;
}

.carousel-fridge-head > div {
  min-width: 0;
  flex: 1 1 auto;
}

.carousel-fridge-head strong,
.carousel-fridge-head span:not(.badge) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.carousel-fridge-head strong {
  font-size: clamp(18px, 5.4vw, 22px);
  line-height: 1.12;
}

.carousel-fridge-head .badge {
  flex: 0 0 auto;
}

.carousel-fridge-card .temp-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 52px;
  gap: 8px;
  width: 100%;
}

.carousel-fridge-card .temp-input-wrap .input {
  width: 100%;
  min-width: 0;
}

.carousel-fridge-card .temp-sign-actions {
  display: contents;
}

.carousel-fridge-card .temp-sign-btn {
  width: 52px;
  min-width: 52px;
}

.carousel-fridge-card select,
.carousel-fridge-card textarea,
.carousel-fridge-card input {
  max-width: 100%;
}

@media (max-width: 430px) {
  .preset-fridge-carousel {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 10px;
  }

  .carousel-fridge-card {
    flex-basis: 100% !important;
    max-width: 100%;
  }

  .carousel-fridge-card .temp-input-wrap {
    grid-template-columns: minmax(0, 1fr) 48px 48px;
  }

  .carousel-fridge-card .temp-sign-btn {
    width: 48px;
    min-width: 48px;
    padding-left: 0;
    padding-right: 0;
  }
}


/* Show refrigerator card names only, in uppercase */
.carousel-fridge-head strong {
  text-transform: uppercase;
}


/* Fridge card header: show only name + colored type badge */
.carousel-fridge-head {
  align-items: center;
}

.carousel-fridge-head strong {
  display: block;
}

.carousel-fridge-head span:not(.badge),
.carousel-range {
  display: none !important;
}

.carousel-fridge-head .badge.ok {
  background: #e4f8ef;
  color: #23865e;
  border-color: rgba(35, 134, 94, .14);
}

.carousel-fridge-head .badge.bad {
  background: #fde8ee;
  color: #bd3a55;
  border-color: rgba(189, 58, 85, .14);
}


/* Cleaner separation between fridge zones */
.preset-fridge-zones {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fridge-zone-block {
  padding-top: 8px;
}

.fridge-zone-block + .fridge-zone-block {
  margin-top: 34px;
  padding-top: 34px;
  position: relative;
}

.fridge-zone-block + .fridge-zone-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(191, 209, 226, 0) 0%,
    rgba(191, 209, 226, 1) 12%,
    rgba(191, 209, 226, 1) 88%,
    rgba(191, 209, 226, 0) 100%);
}

.fridge-zone-block + .fridge-zone-block .fridge-zone-header {
  margin-top: 0;
}

.fridge-zone-header {
  margin-bottom: 10px;
}

.fridge-carousel-hint {
  margin-bottom: 16px;
}


/* Fridge area aligned with checklist visual language */
.fridge-zone-block {
  background: transparent;
}

.fridge-zone-header h3 {
  color: var(--accent-deep);
  font-weight: 950;
}

.fridge-zone-header .badge {
  background: #edf4fa;
  color: #35506a;
  border: 1px solid var(--line);
  font-weight: 900;
  padding: 7px 12px;
}

.fridge-carousel-hint {
  color: var(--muted);
  font-weight: 800;
}

.carousel-fridge-card,
.preset-fridge-card {
  background: #fbfdff;
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 24px;
}

.carousel-fridge-card.temp-bad,
.preset-fridge-card.temp-bad {
  background: linear-gradient(180deg, #fbfdff, #fff7f8);
  border-color: rgba(183, 45, 75, .24);
}

.carousel-fridge-head {
  background: linear-gradient(180deg, #eef7ff, #e8f3fb);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.carousel-fridge-head strong {
  color: var(--accent-deep);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .01em;
  line-height: 1.08;
  text-transform: uppercase;
}

.carousel-fridge-head .badge {
  align-self: flex-start;
  font-size: 14px;
  padding: 8px 14px;
  border-width: 0;
}

.carousel-fridge-head .badge.ok {
  background: var(--soft-ok);
  color: var(--ok);
}

.carousel-fridge-head .badge.bad {
  background: var(--soft-bad);
  color: var(--bad);
}

.preset-fridge-card .field label,
.carousel-fridge-card .field label,
.preset-check-grid .field label,
.temp-field label {
  color: var(--accent-deep);
  font-weight: 900;
  font-size: 13px;
}

.carousel-fridge-card .input,
.carousel-fridge-card select,
.carousel-fridge-card textarea {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.carousel-fridge-card textarea {
  min-height: 92px;
}

.carousel-fridge-card select:focus,
.carousel-fridge-card .input:focus,
.carousel-fridge-card textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(76,159,225,.16);
}

@media (max-width: 430px) {
  .carousel-fridge-head strong {
    font-size: 18px;
  }
  .carousel-fridge-head .badge {
    font-size: 13px;
    padding: 7px 12px;
  }
}


/* Stronger centered divider between fridge zones */
.fridge-zone-block {
  position: relative;
}

.fridge-zone-block + .fridge-zone-block {
  margin-top: 62px;
  padding-top: 34px;
}

.fridge-zone-block + .fridge-zone-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(78%, 520px);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(214,229,242,.98), rgba(188,214,235,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 6px 18px rgba(76, 120, 164, .10);
  border: 1px solid rgba(191,214,232,.95);
}

.fridge-zone-block + .fridge-zone-block::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: min(56%, 360px);
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
}

@media (max-width: 430px) {
  .fridge-zone-block + .fridge-zone-block {
    margin-top: 54px;
    padding-top: 30px;
  }

  .fridge-zone-block + .fridge-zone-block::before {
    width: min(84%, 360px);
    height: 9px;
  }

  .fridge-zone-block + .fridge-zone-block::after {
    width: min(58%, 220px);
  }
}


/* Fridge section labels in black */
.carousel-fridge-card .field label,
.carousel-fridge-card .temp-field label,
.carousel-fridge-card .notes-field label,
.carousel-fridge-card .fridge-field-label,
.carousel-fridge-card .fridge-field-title {
  color: #1f3550 !important;
}


/* Reposition fridge section divider higher and more centered between sections */
.fridge-zone-block + .fridge-zone-block {
  margin-top: 64px !important;
  padding-top: 22px !important;
}

.fridge-zone-block + .fridge-zone-block::before {
  top: -30px !important;
  width: min(80%, 540px) !important;
  height: 12px !important;
}

.fridge-zone-block + .fridge-zone-block::after {
  top: -25px !important;
  width: min(58%, 380px) !important;
  height: 3px !important;
}

@media (max-width: 430px) {
  .fridge-zone-block + .fridge-zone-block {
    margin-top: 58px !important;
    padding-top: 18px !important;
  }

  .fridge-zone-block + .fridge-zone-block::before {
    top: -28px !important;
    width: min(82%, 320px) !important;
    height: 11px !important;
  }

  .fridge-zone-block + .fridge-zone-block::after {
    top: -23px !important;
    width: min(56%, 220px) !important;
    height: 3px !important;
  }
}


/* Remove fridge section divider bar and keep clean spacing */
.fridge-zone-block + .fridge-zone-block {
  margin-top: 42px !important;
  padding-top: 8px !important;
}

.fridge-zone-block + .fridge-zone-block::before,
.fridge-zone-block + .fridge-zone-block::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 430px) {
  .fridge-zone-block + .fridge-zone-block {
    margin-top: 36px !important;
    padding-top: 6px !important;
  }
}


/* Required temperature sign selection */
.temp-input-wrap-required {
  align-items: stretch;
}

.signed-temp-input {
  position: relative;
  min-width: 0;
  width: 100%;
}

.signed-temp-input .input {
  padding-left: 38px;
}

.temp-sign-inside {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
  color: #9eb1c1;
  pointer-events: none;
}

.temp-sign-inside.plus {
  color: var(--accent-deep);
}

.temp-sign-inside.minus {
  color: var(--bad);
}

.temp-sign-btn.active.plus {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(47, 127, 196, .16);
}

.temp-sign-btn.active.minus {
  background: linear-gradient(180deg, #da5a6a, var(--bad));
  color: #fff;
  border-color: var(--bad);
  box-shadow: 0 0 0 4px rgba(201, 70, 88, .16);
}

.carousel-fridge-card.needs-sign,
.carousel-fridge-card.needs-temp,
.carousel-fridge-card.needs-note {
  border-color: rgba(201, 70, 88, .45);
  box-shadow: 0 0 0 4px rgba(201, 70, 88, .08);
}


/* Location-first fridge selector */
.fridge-page-head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.fridge-page-head h3 {
  margin: 0;
}

.fridge-page-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-weight: 700;
}

.location-choice-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfdff;
}

.location-choice-box .field {
  min-width: 0;
}

.location-choice-box .badge {
  margin-bottom: 3px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .location-choice-box {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .location-choice-box .badge {
    justify-self: start;
    margin-bottom: 0;
  }
}


.latest-record-card {
  gap: 10px;
}
.latest-record-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 760px) {
  .temp-alert-main,
  .temp-alert-meta {
    grid-template-columns: 1fr;
  }
}


/* Checklist rows: compact single-line layout without horizontal overflow */
.check-group {
  overflow: hidden;
}

.check-row {
  display: grid !important;
  grid-template-columns: minmax(82px, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  width: 100%;
  min-width: 0;
}

.check-label {
  min-width: 0 !important;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: normal;
}

.chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  justify-content: flex-end;
  min-width: 0;
}

.chip {
  min-width: 0 !important;
  width: auto !important;
  white-space: nowrap;
  padding: 7px 9px !important;
  font-size: 14px !important;
  line-height: 1;
  border-radius: 999px;
}

@media (max-width: 430px) {
  .check-group {
    padding: 12px;
  }

  .check-row {
    grid-template-columns: minmax(76px, 1fr) auto !important;
    gap: 6px !important;
    padding: 10px 0;
  }

  .check-label {
    font-size: 14px;
  }

  .chips {
    gap: 4px !important;
  }

  .chip {
    padding: 7px 8px !important;
    font-size: 13.5px !important;
  }
}

@media (max-width: 370px) {
  .check-row {
    grid-template-columns: minmax(70px, 1fr) auto !important;
  }

  .check-label {
    font-size: 13px;
  }

  .chip {
    padding: 6px 7px !important;
    font-size: 12.5px !important;
  }
}


/* Clearer fridge temperature/result badges */
.badge.temp-pos {
  background: #e8f3fb;
  color: #1e6fb8;
}
.badge.temp-neg {
  background: #fdecef;
  color: #c24866;
}
.badge.out-range {
  background: #fff1d6;
  color: #a76100;
  border: 1px solid #f0c270;
  font-weight: 950;
  box-shadow: 0 1px 0 rgba(167, 97, 0, .08);
}
.temp-alert-meta .badge {
  font-size: 13px;
}


/* Alert card: temperature inline with fridge name */
.temp-alert-row {
  gap: 10px;
}
.temp-alert-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.temp-alert-main .temp-alert-temp {
  display: inline-flex;
  align-items: center;
}
.temp-alert-main .temp-alert-temp .badge {
  font-size: 14px;
  font-weight: 900;
}
.temp-alert-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-left: 0;
}
.temp-alert-range {
  font-weight: 700;
}
@media (max-width: 760px) {
  .temp-alert-row {
    gap: 8px;
  }
  .temp-alert-main {
    align-items: center;
  }
  .temp-alert-name {
    font-size: 15px;
  }
  .temp-alert-meta {
    gap: 8px;
  }
}


/* Summary alerts and compact recap sections */
.summary-alert {
  margin: 18px 0;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid var(--line);
}

.summary-alert strong {
  display: block;
  margin-bottom: 8px;
}

.summary-alert p {
  margin: 0 0 12px;
}

.checklist-alert {
  background: #fff7df;
  border-color: rgba(211, 175, 80, .48);
  color: #7a5412;
}

.checklist-alert strong,
.checklist-alert p {
  color: #7a5412;
}

.summary-alert-list {
  display: grid;
  gap: 10px;
}

.summary-alert-row {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(40, 66, 92, .08);
}

.summary-alert-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.summary-alert-zone {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 950;
  background: rgba(24, 66, 105, .08);
  color: var(--accent-deep);
  text-transform: uppercase;
}

.summary-alert-name {
  font-weight: 950;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.summary-alert-temp .badge {
  font-size: 14px;
}

.summary-alert-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.summary-alert-range,
.summary-alert-note {
  font-weight: 750;
  color: var(--muted);
}

.compact-summary-card {
  display: grid;
  gap: 14px;
  align-content: start;
}

.summary-toggle {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfdff;
  overflow: hidden;
}

.summary-toggle summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  color: var(--accent-deep);
  font-weight: 950;
  font-size: 18px;
}

.summary-toggle summary::-webkit-details-marker {
  display: none;
}

.summary-summary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.summary-show {
  pointer-events: none;
}

.summary-list {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid #edf3f9;
}

.summary-row strong {
  display: block;
  color: var(--ink);
  font-weight: 950;
}

.summary-row span:not(.badge) {
  color: var(--muted);
  font-weight: 750;
}

.summary-row-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .summary-toggle summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .summary-summary-actions {
    justify-content: flex-start;
  }

  .summary-alert-name {
    font-size: 15px;
  }
}


/* Unified summary warnings and cleaner confirm recap */
.summary-box .strong-anomaly-badge {
  background: #fde8ee !important;
  color: #bd3a55 !important;
  border: 1px solid rgba(189, 58, 85, .18);
  box-shadow: 0 8px 18px rgba(189, 58, 85, .12);
}

.unified-warning-alert,
.checklist-alert {
  background: #fff7df;
  border-color: rgba(211, 175, 80, .48);
  color: #7a5412;
}

.unified-warning-alert strong,
.unified-warning-alert p,
.checklist-alert strong,
.checklist-alert p {
  color: #7a5412;
}

.unified-warning-row {
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(175, 140, 54, .12);
}

.summary-alert-main-stack {
  display: grid;
  gap: 8px;
  width: 100%;
}

.summary-alert-topline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.summary-alert-name-full {
  font-size: 17px;
}

.summary-alert-meta-stack {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.checklist-status-badge {
  font-weight: 950;
}

.fridge-warning-row .summary-alert-topline {
  justify-content: flex-start;
}

.fridge-warning-row .summary-alert-temp .badge {
  font-size: 16px;
  font-weight: 950;
}

.fridge-warning-meta {
  gap: 12px;
}

.summary-row-issue-only {
  align-items: center;
}

@media (max-width: 760px) {
  .summary-alert-topline {
    align-items: flex-start;
    gap: 10px;
  }

  .fridge-warning-row .summary-alert-temp {
    width: 100%;
  }

  .fridge-warning-row .summary-alert-temp .badge {
    display: inline-flex;
  }
}

/* --- Summary confirm bug/layout fix update --- */
.checklist-warning-row,
.fridge-warning-row {
  padding: 16px 18px;
}

.checklist-warning-topline,
.fridge-warning-topline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.checklist-warning-topline .summary-alert-name,
.fridge-warning-topline .summary-alert-name {
  font-size: 18px;
  line-height: 1.2;
}

.checklist-warning-meta {
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}

.checklist-warning-meta .checklist-status-badge {
  min-width: 110px;
  justify-content: center;
}

.checklist-note-block {
  width: 100%;
  text-align: center;
}

.fridge-warning-meta-inline {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 2px;
}

.fridge-warning-meta-inline .summary-alert-temp .badge,
.fridge-warning-meta-inline .badge.out-range {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 950;
}

.fridge-warning-range {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
}

@media (max-width: 760px) {
  .checklist-warning-topline,
  .fridge-warning-topline {
    align-items: center;
    gap: 10px;
  }

  .checklist-warning-topline .summary-alert-zone,
  .fridge-warning-topline .summary-alert-zone {
    order: 1;
  }

  .checklist-warning-topline .summary-alert-name,
  .fridge-warning-topline .summary-alert-name {
    order: 2;
    font-size: 17px;
  }

  .fridge-warning-meta-inline {
    gap: 10px;
  }

  .fridge-warning-meta-inline .summary-alert-temp,
  .fridge-warning-meta-inline .badge.out-range {
    width: auto;
  }
}


/* Fridge type badge translations/colors */
.fridge-type-badge.positive {
  background: var(--soft-ok);
  color: var(--ok);
}

.fridge-type-badge.negative {
  background: var(--soft-bad);
  color: var(--bad);
}


/* --- Alert row alignment update --- */
.checklist-warning-topline,
.fridge-warning-topline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 0;
}

.checklist-warning-topline .summary-alert-zone,
.fridge-warning-topline .summary-alert-zone {
  margin: 0;
}

.checklist-warning-topline .summary-alert-name,
.fridge-warning-topline .summary-alert-name {
  min-width: 0;
  display: block;
}

@media (max-width: 760px) {
  .checklist-warning-topline,
  .fridge-warning-topline {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
  }

  .checklist-warning-topline .summary-alert-name,
  .fridge-warning-topline .summary-alert-name {
    font-size: 16px;
    line-height: 1.2;
  }
}

/* Personal email first login */
.email-first-login-card {
  max-width: 620px;
  margin: 28px auto;
}
.email-first-login-card h3 {
  margin-bottom: 10px;
}


/* Checklist confirm + dashboard refresh spacing */
.checklist-footer {
  margin-top: 24px;
  justify-content: flex-end;
}

.checklist-footer .btn {
  min-width: 240px;
}

.dashboard-latest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
}

.dashboard-latest-head h3 {
  margin: 0;
}

.dashboard-refresh-btn {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 560px) {
  .checklist-footer {
    justify-content: stretch;
  }

  .checklist-footer .btn {
    width: 100%;
    min-width: 0;
  }

  .dashboard-latest-head {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
  }

  .dashboard-refresh-btn {
    margin-left: auto;
  }
}

/* Record navigation refinements */
.record-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.record-hero-head .btn {
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .record-hero-head {
    align-items: stretch;
  }
  .record-hero-head .btn {
    width: 100%;
    justify-content: center;
  }
}