:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #edf3f4;
  --surface-3: #f8fafc;
  --text: #17212b;
  --muted: #617080;
  --line: #d8e0e6;
  --line-soft: #e9eef2;
  --ok: #147a51;
  --warning: #9a6500;
  --danger: #b3261e;
  --accent: #205f6d;
  --accent-2: #2d7a5f;
  --shadow: 0 14px 32px rgba(22, 34, 44, .08);
  --shadow-soft: 0 4px 14px rgba(22, 34, 44, .05);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.app-update-overlay[hidden] { display: none; }
.app-update-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; background: #f7f9fc; }
.app-update-content { text-align: center; max-width: 380px; }
.app-update-content strong { display: block; font-size: 22px; line-height: 1.35; color: #27333f; }
.app-update-content p { color: #677680; font-size: 14px; margin: 10px 0 0; }
.app-update-spinner { width: 42px; height: 42px; margin: 0 auto 24px; border: 3px solid #e0e7eb; border-top-color: #e87912; border-radius: 50%; animation: app-update-spin .85s linear infinite; }
.app-updating { overflow: hidden; }
@keyframes app-update-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-update-spinner { animation-duration: 2s; } }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 10px 22px;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}
.topbar-brand {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  min-width: 220px;
}
.topbar-brand img {
  flex: 0 0 auto;
  height: 34px;
  object-fit: contain;
  width: 34px;
}
.topbar-brand > div {
  display: flex;
  align-items: center;
}
.topbar-brand strong {
  font-size: 15px;
  letter-spacing: .2px;
  line-height: 1.1;
}
.topbar-brand-version {
  color: #a6afb8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 3px;
  vertical-align: baseline;
}
.status-card-label {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
}
.status-card-label form { margin: 0; }
.status-clear-warning { height: 24px; width: 24px; }
.usage-page-head { margin-bottom: 14px; }
.usage-filters {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}
.usage-filters label { display: grid; gap: 6px; }
.usage-filters label > span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.usage-filters select { min-height: 40px; }
.usage-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}
.usage-summary article { background: var(--card); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 5px; padding: 14px; }
.usage-summary span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.usage-summary strong { font-size: 24px; line-height: 1.1; }
.usage-summary .usage-last-access { font-size: 15px; }
.usage-grid { align-items: start; }
.usage-card { min-width: 0; }
.usage-card header { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 10px; }
.usage-card h2 { font-size: 16px; margin: 0; }
.usage-card p { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
@media (max-width: 820px) {
  .usage-filters, .usage-summary { grid-template-columns: 1fr; }
}
.topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.topbar nav a {
  padding: 8px 11px;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.topbar nav a.active,
.topbar nav a:hover {
  background: var(--surface-2);
  color: var(--accent);
  text-decoration: none;
}
.nav-menu {
  position: relative;
}
.nav-menu::after {
  content: "";
  display: block;
  height: 10px;
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
}
.nav-menu-trigger {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}
.nav-menu.active > .nav-menu-trigger {
  background: var(--surface-2);
  color: var(--accent);
}
.nav-submenu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 3px;
  left: 0;
  min-width: 210px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 4px);
  transform: translateY(-2px);
  transition: opacity .16s ease, transform .16s ease;
  z-index: 10;
}
.nav-menu:hover .nav-submenu,
.nav-menu:focus-within .nav-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.topbar nav .nav-menu:nth-last-of-type(-n+2) .nav-submenu {
  left: auto;
  right: 0;
}
.nav-submenu a {
  display: block;
  white-space: nowrap;
}
.nav-submenu a.active {
  background: #e7f1f1;
  color: var(--accent);
}
.nav-submenu-nested {
  min-width: 230px;
  padding: 6px;
}
.nav-submenu-item {
  position: relative;
}
.nav-submenu-parent {
  align-items: center;
  display: flex !important;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.nav-submenu-item.active > .nav-submenu-parent,
.nav-submenu-parent:hover {
  background: #e7f1f1;
  color: var(--accent);
}
.nav-flyout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 3px;
  left: calc(100% + 6px);
  min-width: 220px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  top: -6px;
  transform: translateX(-2px);
  transition: opacity .16s ease, transform .16s ease;
}
.nav-submenu-item::after {
  content: "";
  display: block;
  height: 100%;
  left: 100%;
  position: absolute;
  top: 0;
  width: 8px;
}
.nav-submenu-item:hover .nav-flyout,
.nav-submenu-item:focus-within .nav-flyout {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.nav-flyout a {
  background: var(--surface);
  display: block;
  white-space: nowrap;
}
.topbar nav .nav-menu:nth-last-of-type(-n+2) .nav-submenu-nested .nav-flyout {
  left: auto;
  right: calc(100% + 6px);
}
.topbar nav a.logout-link {
  border: 1px solid var(--line);
  color: var(--danger);
}
.topbar nav a.logout-link:hover {
  background: #fff1f2;
}
.nav-user {
  align-items: center;
  background: #f2f5f7;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  height: 34px;
  line-height: 1;
  padding: 0 10px;
}
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 22px 42px;
}
.muted,
.label,
small { color: var(--muted); }
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
h1 { font-size: 27px; margin: 0; letter-spacing: 0; }
h2 { font-size: 18px; margin: 24px 0 12px; }
.page-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 17px;
  min-width: 0;
  box-shadow: var(--shadow);
}
.card:hover {
  border-color: #c7d7dd;
}
.card strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 20px;
}
.card .time-value {
  color: var(--accent);
  font-size: 19px;
}
.card .time-zone {
  display: block;
  margin-top: 3px;
}
.card.compact strong { font-size: 14px; }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background: #edf2f4;
  color: var(--text);
}
.badge.ok,
.badge.success,
.badge.sent { background: #e7f5ee; color: var(--ok); }
.badge.warning,
.badge.pending,
.badge.cancel_requested,
.badge.baseline { background: #fff4db; color: var(--warning); }
.badge.error,
.badge.failed,
.badge.cancelled { background: #fde8e7; color: var(--danger); }
.banner {
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.banner.ok { background: #e7f5ee; border-color: #bde5cf; color: var(--ok); }
.banner.warning { background: #fff4db; border-color: #f2d28a; color: var(--warning); }
.banner.danger { background: #fde8e7; border-color: #f5b7b1; color: var(--danger); }
.dismissible-banner {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.dismissible-banner form {
  flex: 0 0 auto;
}
.icon-button {
  align-items: center;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(179, 38, 30, .28);
  border-radius: 999px;
  color: inherit;
  display: inline-flex;
  font-size: 20px;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  line-height: 1;
  min-height: 30px;
  padding: 0;
  width: 30px;
}
.icon-button:hover {
  background: #fff;
  border-color: rgba(179, 38, 30, .55);
  box-shadow: 0 3px 10px rgba(179, 38, 30, .12);
  color: var(--danger);
}
.dismiss-button {
  margin-top: -2px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.table-wrap,
.table-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  box-shadow: var(--shadow-soft);
}
.table-panel-head {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 760px;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
.table-panel-head span {
  color: var(--muted);
  font-size: 13px;
}
.table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.inline-pagination {
  margin-top: 0;
}
.sync-events-list {
  display: grid;
  gap: 10px;
}
.sync-events-head {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 10px;
  min-width: 0;
}
.sync-event-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.sync-event-main {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 128px minmax(150px, 1fr) minmax(130px, 180px);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}
.sync-cancel-form {
  margin-top: 8px;
}
.sync-label {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.sync-progress-cell .progress-meter {
  width: 100%;
}
.sync-event-detail {
  border-top: 1px solid var(--line-soft);
  padding: 10px 14px 12px;
}
.sync-event-detail p {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}
.pagination a,
.pagination span {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  min-height: 34px;
  padding: 6px 10px;
}
.pagination a:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.pagination .active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pagination .disabled {
  color: var(--muted);
  opacity: .55;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
th, td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
th {
  background: #f5f8fa;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}
tbody tr:hover {
  background: #f9fbfc;
}
td { overflow-wrap: anywhere; }
td.wide { min-width: 260px; }
.empty {
  color: var(--muted);
  text-align: center;
}
.filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
  gap: 10px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.settings-form {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
}
.settings-hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  margin: 0 0 14px;
  padding: 14px;
}
.settings-hero h2 {
  margin: 0 0 4px;
}
.settings-hero p {
  color: var(--muted);
  margin: 0;
}
.settings-backup-panel {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}
.settings-backup-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.settings-backup-actions form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin: 0;
}
.settings-backup-panel p {
  color: var(--muted);
  margin: 4px 0;
}
.settings-danger-panel {
  border-color: #f0b4ae;
}
.settings-danger-panel strong {
  color: var(--danger);
}
.settings-group {
  display: grid;
  gap: 10px;
  overflow: visible;
}
.settings-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 18px;
  padding: 16px;
}
.settings-card-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.settings-card-head h2,
.settings-card-head p {
  margin: 0;
}
.settings-card-head p {
  color: var(--muted);
  font-size: 13px;
}
.settings-group-head {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  padding: 11px 14px;
}
.settings-group-head::-webkit-details-marker {
  display: none;
}
.settings-group-head strong {
  color: var(--text);
  display: block;
  font-size: 16px;
}
.settings-group-head small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}
.settings-group-head em,
.settings-section legend em {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  padding: 5px 8px;
}
.settings-section-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  padding: 0;
}
.template-form {
  display: grid;
  gap: 18px;
  margin-bottom: 14px;
}
.template-form label {
  display: grid;
  gap: 8px;
}
.template-form label > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.template-form textarea {
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font: 14px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  resize: vertical;
}
.form-actions,
.inline-form {
  display: flex;
  gap: 10px;
  align-items: center;
}
.energy-toolbar {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.inline-card-form {
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
}
.inline-card-form label {
  display: grid;
  gap: 5px;
}
.inline-card-form label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.kvs-media-form {
  align-items: end;
  width: 100%;
}
.energy-diagnostic-panel {
  margin-top: 14px;
}
.maintenance-loader-form {
  align-items: center;
  margin-bottom: 16px;
}
.maintenance-loader-form small {
  max-width: 760px;
}
.maintenance-attempts,
.maintenance-submissions,
.maintenance-routes {
  margin-top: 16px;
}
.maintenance-submissions table {
  min-width: 1040px;
}
.compact-definition-list {
  display: grid;
  gap: 6px 10px;
  grid-template-columns: minmax(110px, max-content) minmax(180px, 1fr);
  margin: 0;
}
.compact-definition-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.compact-definition-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.json-preview {
  background: #f7fafb;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: #24313a;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  margin: 0;
  max-height: 220px;
  max-width: 430px;
  overflow: auto;
  padding: 9px;
  white-space: pre-wrap;
}
.json-preview.large {
  max-height: 420px;
  max-width: none;
}
.route-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
}
.route-list code {
  background: #f2f5f7;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: #24313a;
  font-size: 12px;
  padding: 6px 9px;
}
.maintenance-report-toolbar {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.maintenance-load-shell {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.maintenance-load-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(250px, 1fr) minmax(560px, 1.65fr);
  padding: 14px;
}
.maintenance-load-card p {
  color: var(--muted);
  margin: 4px 0 0;
}
.maintenance-load-fields {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(150px, .8fr) minmax(150px, .8fr) minmax(190px, 1fr) auto;
}
.maintenance-load-card label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.maintenance-load-card label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.maintenance-progress-card,
.maintenance-empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.maintenance-progress-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.maintenance-progress-head span {
  color: var(--accent);
  font-size: 22px;
  font-weight: 850;
}
.maintenance-progress-track {
  background: #edf2f4;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}
.maintenance-progress-track span {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  display: block;
  height: 100%;
  transition: width .22s ease;
  width: 0;
}
.maintenance-empty-state {
  display: grid;
  min-height: 170px;
  place-items: center;
  text-align: center;
}
.maintenance-empty-state p {
  color: var(--muted);
  margin: 4px 0 0;
  max-width: 580px;
}
.maintenance-refresh-form {
  align-items: center;
}
.maintenance-report-panel {
  margin-top: 18px;
}
.maintenance-report-list {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.maintenance-report-row {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(190px, .72fr) minmax(250px, 1.08fr) minmax(230px, 1fr) minmax(230px, 1fr);
}
.maintenance-restaurant-card,
.maintenance-report-section {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
}
.maintenance-restaurant-card {
  background:
    radial-gradient(circle at top right, rgba(244, 211, 22, .16), transparent 38%),
    linear-gradient(145deg, #ffffff, #f7fbfc 62%, #f2f7f8);
  border-color: #e1ecef;
  align-content: start;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.maintenance-restaurant-card form {
  margin: 0;
}
.maintenance-restaurant-card strong {
  font-size: 18px;
  line-height: 1.15;
}
.restaurant-code {
  background: #205f6d;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-self: start;
  padding: 5px 9px;
}
.maintenance-section-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.maintenance-report-section [data-audit-panel] {
  align-content: start;
  display: grid;
  gap: 8px;
}
.maintenance-metric-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.maintenance-metric-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.maintenance-metric-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.maintenance-metric-grid > div {
  background: #f8fafb;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 8px;
}
.maintenance-metric-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.maintenance-metric-grid strong {
  font-size: 20px;
  line-height: 1;
}
.maintenance-ratio-line {
  align-items: end;
  display: flex;
  gap: 10px;
}
.maintenance-ratio-line strong {
  color: #667085;
  font-size: 34px;
  line-height: 1;
}
.maintenance-ratio-line span,
.maintenance-muted {
  color: var(--muted);
}
.maintenance-energy-review {
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 10px;
}
.maintenance-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.maintenance-chip {
  background: #edf2f4;
  border-radius: 999px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  padding: 6px 9px;
}
.maintenance-chip.good,
.maintenance-metric-grid .good { color: var(--ok); }
.maintenance-chip.warn,
.maintenance-metric-grid .warn { color: var(--warning); }
.maintenance-chip.bad,
.maintenance-metric-grid .bad { color: var(--danger); }
.maintenance-chip.good { background: #e7f5ee; }
.maintenance-chip.warn { background: #fff4db; }
.maintenance-chip.bad { background: #fde8e7; }
.maintenance-empty {
  align-items: center;
  background: #f8fafb;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  min-height: 78px;
  padding: 12px;
}
.maintenance-audit-picker {
  align-items: center;
  background: #fbfcfd;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  display: grid;
  gap: 5px;
  padding: 7px;
}
.maintenance-audit-picker span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.maintenance-audit-picker select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-height: 34px;
  padding: 6px 8px;
  width: 100%;
}
.maintenance-observation-list {
  margin: 0;
  padding-left: 18px;
}
.maintenance-observation-list li {
  margin-bottom: 6px;
}
.maintenance-observation-input {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-height: 132px;
  padding: 10px;
  resize: vertical;
  width: 100%;
}
.maintenance-observation-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32, 95, 109, .12);
  outline: 0;
}
.maintenance-diagnostics {
  margin-top: 16px;
}
.maintenance-diagnostics summary {
  cursor: pointer;
  font-weight: 800;
  margin-bottom: 10px;
}
.maintenance-source-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.maintenance-source-cards .card {
  box-shadow: var(--shadow-soft);
}
.maintenance-source-cards .card strong {
  font-size: 19px;
}
.maintenance-machine-list {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.maintenance-machine-list span {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  padding: 4px 8px;
}
.maintenance-objective-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.6fr);
}
.maintenance-objective-form {
  display: grid;
  gap: 12px;
}
.maintenance-objective-form label {
  display: grid;
  gap: 6px;
}
.maintenance-objective-form label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.maintenance-objective-table {
  min-width: 780px;
}
.maintenance-objective-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.maintenance-objective-actions form {
  margin: 0;
}
.maintenance-link-note {
  background: #f8fafb;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  padding: 11px;
}
@media (max-width: 1180px) {
  .maintenance-load-card {
    grid-template-columns: 1fr;
  }
  .maintenance-load-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .maintenance-report-row {
    grid-template-columns: 1fr;
  }
  .maintenance-source-cards,
  .maintenance-objective-layout {
    grid-template-columns: 1fr;
  }
}
.status-module-card.ok {
  border-color: #bde5cf;
}
.status-module-card.warning {
  border-color: #f2d28a;
}
.status-module-card.error {
  border-color: #f5b7b1;
}
.status-automation-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.status-automation-cards .card strong {
  font-size: 17px;
}
.quick-links-panel {
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
}
.section-title-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.section-title-row h2 {
  margin: 24px 0 12px;
}
.energy-restaurant-form {
  align-items: start;
  margin-bottom: 18px;
}
.energy-restaurant-form label {
  min-width: 190px;
}
.energy-restaurant-form textarea {
  min-height: 64px;
  width: 230px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font: 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  resize: vertical;
}
.table-action-form {
  margin: 0;
}
.editable-links-table {
  min-width: 980px;
}
.editable-links-table input,
.editable-links-table textarea {
  width: 100%;
}
.editable-links-table textarea {
  min-height: 58px;
  resize: vertical;
}
.editable-links-table td {
  min-width: 120px;
}
.editable-links-table td:nth-child(3),
.editable-links-table td:nth-child(4),
.editable-links-table td:nth-child(5),
.editable-links-table td:nth-child(6) {
  min-width: 180px;
}
.editable-links-table td:first-child {
  min-width: 82px;
}
.editable-links-table td:last-child {
  display: grid;
  gap: 7px;
  min-width: 100px;
}
.progress-meter {
  background: #edf2f4;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  height: 10px;
  min-width: 110px;
  overflow: hidden;
}
.progress-meter span {
  background: var(--accent-2);
  display: block;
  height: 100%;
}
.button.small,
button.small {
  font-size: 13px;
  min-height: 31px;
  padding: 5px 9px;
}
.button.danger,
button.danger {
  background: #fff;
  border-color: #f0b4ae;
  color: var(--danger);
}
.button.danger:hover,
button.danger:hover {
  background: #fff1f2;
  border-color: #dc7d75;
}
.ratio-table-value {
  color: var(--accent);
  font-size: 18px;
}
.ratio-delta {
  color: var(--text);
  font-weight: 800;
}
.ratio-delta.good {
  color: #087443;
}
.ratio-delta.bad {
  color: #b42318;
}
.ratio-delta.neutral {
  color: var(--text);
}
.data-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 8px;
}
.data-status.good {
  background: #e8f6ef;
  color: #087443;
}
.data-status.bad {
  background: #fff1f2;
  color: #b42318;
}
.calendar-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 20px 0 12px;
}
.calendar-head h2 {
  margin: 0 0 2px;
}
.ratio-calendar {
  display: grid;
  gap: 8px;
}
.ratio-weekdays,
.ratio-week {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.ratio-weekdays span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}
.ratio-day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 7px;
  min-height: 108px;
  padding: 10px;
}
.ratio-day.outside {
  background: #f2f5f7;
  color: var(--muted);
  opacity: .64;
}
.ratio-day.has-ratio {
  border-color: #bed7d1;
}
.ratio-day-number {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.ratio-day strong {
  color: var(--accent);
  font-size: 25px;
  line-height: 1;
}
.ratio-day small {
  font-size: 12px;
  line-height: 1.3;
}
.kvs-calendar .ratio-day {
  color: inherit;
  min-height: 164px;
  text-decoration: none;
}
.kvs-day.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(32, 95, 109, .12), var(--shadow-soft);
}
.kvs-calendar .kvs-day.outside {
  background: #f1f3f5;
  border-color: #d9e0e5;
  color: #56616b;
  opacity: 1;
  box-shadow: none;
}
.kvs-calendar .kvs-day.outside .kvs-slot,
.kvs-pill.outside {
  background: #e5e9ed;
  color: #56616b;
}
.kvs-calendar .kvs-day.outside .kvs-slot strong {
  color: inherit;
}
.kvs-calendar .kvs-day.outside.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(32, 95, 109, .12);
}
.kvs-day-month {
  font-size: 11px;
  font-weight: 500;
}
.kvs-calendar .kvs-day.future {
  cursor: default;
}
.kvs-slot-grid {
  display: grid;
  gap: 6px;
}
.kvs-slot,
.kvs-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  justify-content: center;
  line-height: 1;
  padding: 5px 7px;
  white-space: nowrap;
}
.kvs-slot {
  align-items: center;
  border-radius: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: stretch;
  padding: 6px 7px;
}
.kvs-slot-name {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}
.kvs-slot strong {
  font-size: 12px;
}
.kvs-slot.good,
.kvs-pill.good,
.kvs-text.good,
.kvs-second-badge.good {
  background: #e8f6ef;
  color: #087443;
}
.kvs-slot.warn,
.kvs-pill.warn,
.kvs-text.warn,
.kvs-second-badge.warn {
  background: #fff4df;
  color: #9a6500;
}
.kvs-slot.bad,
.kvs-pill.bad,
.kvs-text.bad,
.kvs-second-badge.bad {
  background: #fff1f2;
  color: #b42318;
}
.kvs-slot.empty,
.kvs-pill.empty,
.kvs-text.empty,
.kvs-second-badge.empty {
  background: #eef2f5;
  color: var(--muted);
}
.kvs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.kvs-hour-panel {
  margin-top: 22px;
}
.kvs-average-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.kvs-average-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 8px;
  padding: 14px;
}
.kvs-average-card span,
.kvs-average-card small {
  color: var(--muted);
  font-weight: 800;
}
.kvs-average-card strong {
  border-radius: 8px;
  display: inline-flex;
  font-size: 28px;
  justify-content: center;
  line-height: 1;
  padding: 10px;
}
.modal-backdrop {
  align-items: center;
  background: rgba(15, 23, 42, .38);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 60;
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  padding: 18px;
  width: min(780px, 100%);
}
.modal-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}
.modal-head h2 {
  margin: 0 0 3px;
}
.modal-close {
  align-items: center;
  background: #f6f8fa;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  width: 32px;
}
.modal-close:hover {
  background: #eef3f5;
  text-decoration: none;
}
.kvs-modal {
  width: min(380px, 100%);
}
.kvs-hour-grid {
  display: grid;
  gap: 5px;
}
.kvs-hour-card {
  align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 5px 8px;
}
.kvs-hour-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.kvs-hour-card strong {
  min-width: 72px;
}
.kvs-second-badge {
  align-items: baseline;
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
  justify-content: center;
  min-width: 60px;
  padding: 4px 8px;
}
.kvs-second-badge b {
  font-size: 15px;
  line-height: 1;
}
.kvs-second-badge small {
  font-size: 10px;
  font-weight: 900;
}
.kvs-average-table td {
  vertical-align: middle;
}
.kvs-average-table td small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  margin-top: 4px;
}
.kvs-line-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 18px;
}
.kvs-line-summary article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 4px;
  padding: 13px;
}
.kvs-line-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}
.kvs-line-summary strong {
  color: var(--accent);
  font-size: 24px;
}
.kvs-line-table td,
.kvs-line-table th {
  white-space: nowrap;
}
.kvs-line-table td:last-child {
  white-space: normal;
  min-width: 260px;
}
.line-group-panel {
  display: grid;
  gap: 12px;
}
.line-group-list {
  display: grid;
  gap: 10px;
}
.line-group-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.line-group-card.ok {
  border-color: #b8e2cd;
}
.line-group-card.ok summary {
  background: #f2fbf6;
}
.line-group-card.ok .line-group-metrics b {
  background: #e8f6ef;
  color: #087443;
}
.line-group-card.has-alerts {
  border-color: #f2c3bd;
}
.line-group-card summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  padding: 12px 14px;
}
.line-group-card summary::-webkit-details-marker {
  display: none;
}
.line-group-card summary strong,
.line-group-card summary small {
  display: block;
}
.line-group-card summary small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}
.line-group-metrics {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.line-group-metrics b,
.line-group-metrics em {
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  padding: 6px 8px;
}
.line-group-metrics b {
  background: #fff1f2;
  color: var(--danger);
}
.line-group-metrics em {
  background: #eef5f7;
  color: var(--accent);
}
.line-group-detail {
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 8px;
  padding: 10px;
}
.line-group-empty {
  background: #f2fbf6;
  border: 1px solid #ccebd9;
  border-radius: 7px;
  color: #087443;
  font-size: 13px;
  font-weight: 800;
  padding: 10px;
}
.line-issue-chip {
  align-items: center;
  background: #fbfcfd;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 9px 10px;
}
.line-issue-chip span,
.line-values small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.line-values {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.line-values small {
  background: #eef2f5;
  border-radius: 999px;
  padding: 5px 7px;
}
.line-values small.warn {
  background: #fff4db;
  color: var(--warning);
}
.line-values small b {
  display: block;
  font-size: 10px;
  line-height: 1.1;
}
.kvs-line-table .line-cell-warn {
  background: #fff8e6;
  color: var(--warning);
  font-weight: 850;
}
.kvs-line-table .line-cell-warn small {
  color: var(--warning);
  display: block;
  font-size: 11px;
  line-height: 1.2;
}
.supervisor-sync-form {
  align-items: start;
}
.supervisor-restaurant-picker {
  min-width: min(360px, 100%);
}
.supervisor-restaurant-picker select {
  min-height: 172px;
}
.graph-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 18px;
}
.graph-filter-card,
.graph-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}
.graph-filter-card {
  align-self: start;
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px;
}
.graph-filter-row {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.graph-filter-row label {
  display: grid;
  gap: 5px;
  min-width: 170px;
}
.graph-filter-row label span,
.graph-picker-head strong,
.restaurant-dropdown summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.graph-switch {
  align-items: center;
  background: #f7fafb;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  display: flex !important;
  gap: 8px !important;
  padding: 9px 10px;
}
.graph-switch input {
  width: auto;
}
.graph-picker-head,
.graph-card-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.graph-picker-head div {
  display: flex;
  gap: 6px;
}
.graph-picker-head {
  min-width: 210px;
}
.restaurant-dropdown {
  flex: 1 1 280px;
  min-width: 260px;
  position: relative;
  z-index: 14;
}
.kvs-media-restaurant-dropdown {
  align-self: end;
  flex: 0 1 360px;
  min-width: min(360px, 100%);
}
.kvs-media-restaurant-dropdown[open] {
  z-index: 30;
}
.restaurant-dropdown summary {
  align-items: center;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
  min-height: 40px;
  padding: 8px 11px;
}
.restaurant-dropdown summary::-webkit-details-marker {
  display: none;
}
.restaurant-dropdown summary::after {
  color: var(--muted);
  content: "v";
  font-size: 12px;
  font-weight: 900;
}
.restaurant-dropdown[open] summary::after {
  transform: rotate(180deg);
}
.restaurant-dropdown summary strong {
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.restaurant-dropdown-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 10px;
  left: 0;
  margin-top: 6px;
  max-width: min(720px, calc(100vw - 40px));
  min-width: min(520px, calc(100vw - 40px));
  padding: 10px;
  position: absolute;
  right: auto;
  top: 100%;
  z-index: 40;
}
.kvs-media-restaurant-dropdown .restaurant-dropdown-panel {
  left: 0;
  max-width: min(620px, calc(100vw - 40px));
  min-width: min(460px, calc(100vw - 40px));
  position: absolute;
  right: auto;
  width: auto;
}
.kvs-media-restaurant-dropdown .restaurant-picker {
  gap: 6px;
  grid-template-columns: 1fr;
  max-height: 260px;
}
.kvs-media-restaurant-dropdown .restaurant-chip {
  align-items: start;
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr);
  min-height: 34px;
  padding: 6px 9px;
}
.kvs-media-restaurant-dropdown .restaurant-chip-code {
  background: #eef5f7;
  border-radius: 999px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 7px;
}
.kvs-media-restaurant-dropdown .restaurant-chip-name {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.restaurant-picker {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}
.restaurant-chip {
  align-items: center;
  background: #fbfcfd;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  min-height: 38px;
  padding: 8px 9px;
}
.restaurant-chip input {
  flex: 0 0 auto;
  height: 14px;
  min-height: 0;
  padding: 0;
  width: 14px;
}
.restaurant-chip span {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: break-word;
}
.graph-card {
  min-width: 0;
  overflow: hidden;
}
.graph-card-head {
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 14px;
}
.graph-card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.report-layout {
  display: grid;
  gap: 16px;
}
.report-filter-card {
  display: grid;
  gap: 14px;
}
.report-filter-grid,
.report-include-row {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.report-filter-grid label:not(.graph-switch),
.report-observations-field {
  display: grid;
  gap: 5px;
}
.report-filter-grid label:not(.graph-switch) {
  min-width: 170px;
}
.report-filter-grid label span,
.report-observations-field span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.report-observations-field textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  min-height: 92px;
  padding: 10px;
  resize: vertical;
  width: 100%;
}
.report-preview-card {
  overflow: hidden;
}
.report-preview {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 14px;
}
.report-preview-head {
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  gap: 3px;
  padding-bottom: 10px;
}
.report-preview-head strong {
  font-size: 20px;
}
.report-preview-head span {
  color: var(--muted);
  font-weight: 750;
}
.report-preview-section {
  display: grid;
  gap: 8px;
}
.report-preview-section h3 {
  font-size: 16px;
  margin: 0;
}
.report-table th,
.report-table td {
  font-size: 13px;
  white-space: nowrap;
}
.report-ratio-value {
  color: #667085;
  font-size: 18px;
  font-weight: 850;
}
.report-chart-wrap {
  min-height: 300px;
}
.report-observations-preview {
  background: #fbfcfd;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  min-height: 72px;
  padding: 10px;
  white-space: pre-wrap;
}
.graph-card-head strong {
  display: block;
  font-size: 18px;
}
.graph-card-head span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 2px;
}
.graph-live-badge {
  background: #e8f6ef;
  border: 1px solid #b8e2cd;
  border-radius: 999px;
  color: #087443 !important;
  flex: 0 0 auto;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1;
  margin: 0 !important;
  padding: 6px 9px;
}
.graph-live-badge.loading {
  background: #fff7e6;
  border-color: #ffd591;
  color: #ad6800 !important;
}
.energy-chart-wrap {
  min-height: 360px;
  overflow-x: hidden;
  padding: 12px;
  position: relative;
}
.chart-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 8px;
  min-height: 24px;
}
.chart-legend span {
  align-items: center;
  color: #344054;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
}
.chart-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 9px;
  width: 18px;
}
.chart-legend .legend-previous {
  background: repeating-linear-gradient(90deg, #667085 0 6px, transparent 6px 11px);
  border-radius: 0;
}
.energy-chart-wrap canvas {
  display: block;
  min-width: 0;
  width: 100%;
}
.chart-tooltip {
  background: rgba(16, 24, 40, .94);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .22);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  max-width: 220px;
  opacity: 0;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -110%);
  transition: opacity .12s ease;
  z-index: 3;
}
.chart-tooltip.visible {
  opacity: 1;
}
.chart-tooltip small {
  color: rgba(255, 255, 255, .72);
  display: block;
  font-weight: 700;
  margin-top: 2px;
}
.chart-empty {
  color: var(--muted);
  font-weight: 800;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.graph-table-panel {
  margin-top: 10px;
}
.graph-table-panel small {
  color: var(--muted);
  display: block;
  margin-top: 5px;
}
.settings-form fieldset {
  background: #fbfcfd;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: none;
  margin: 0;
  padding: 10px;
}
.settings-form legend {
  align-items: center;
  color: #344054;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0;
  width: 100%;
}
.settings-form legend span {
  font-weight: 800;
}
.settings-form legend small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  margin-right: auto;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 9px;
}
.users-page-head { align-items: flex-end; }
.users-eyebrow { color: var(--accent); display: block; font-size: 11px; font-weight: 850; margin-bottom: 3px; text-transform: uppercase; }
.users-head-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.users-head-actions button { align-items: center; display: inline-flex; gap: 8px; }
.users-head-actions button span { font-size: 20px; font-weight: 400; line-height: 1; }
.users-stats { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.users-stats article { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-soft); padding: 12px 14px; }
.users-stats span, .users-stats strong { display: block; }
.users-stats span { color: var(--muted); font-size: 11px; font-weight: 750; }
.users-stats strong { color: var(--text); font-size: 24px; line-height: 1; margin-top: 7px; }
.users-workspace { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); scroll-margin-top: 78px; }
.users-directory, .users-editor { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-soft); overflow: hidden; }
.users-directory { position: sticky; top: 72px; }
.users-directory > header { align-items: center; border-bottom: 1px solid var(--line-soft); display: flex; gap: 10px; justify-content: space-between; padding: 12px; }
.users-directory > header strong, .users-directory > header small { display: block; }
.users-directory > header strong { font-size: 15px; }
.users-directory > header small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.users-directory > header > span { align-items: center; background: #edf3f4; border-radius: 999px; color: var(--accent); display: flex; font-size: 11px; font-weight: 850; height: 25px; justify-content: center; min-width: 25px; padding: 0 7px; }
.users-search { display: block; padding: 10px; }
.users-search input { background: #f8fafb; font-size: 12px; width: 100%; }
.users-directory-list { border-top: 1px solid var(--line-soft); display: grid; max-height: calc(100vh - 280px); overflow-y: auto; }
.users-directory-item { align-items: center; background: #fff; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; color: var(--text); display: grid; gap: 9px; grid-template-columns: 34px minmax(0, 1fr) 9px; min-height: 58px; padding: 9px 11px; text-align: left; width: 100%; }
.users-directory-item:hover { background: #f6f9fa; color: var(--text); }
.users-directory-item.active { background: #eaf3f5; box-shadow: inset 3px 0 var(--accent); color: var(--text); }
.users-avatar { align-items: center; background: #e7f0f2; border: 1px solid #cbdde1; border-radius: 7px; color: var(--accent); display: inline-flex; flex: 0 0 auto; font-size: 11px; font-weight: 900; height: 34px; justify-content: center; width: 34px; }
.users-avatar.new { background: #e8f5ee; border-color: #c4e5d2; color: var(--ok); font-size: 21px; font-weight: 500; }
.users-directory-copy { min-width: 0; }
.users-directory-copy strong, .users-directory-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.users-directory-copy strong { font-size: 12px; }
.users-directory-copy small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.users-status-dot { border-radius: 50%; height: 8px; width: 8px; }
.users-status-dot.active { background: #22a06b; box-shadow: 0 0 0 3px #e2f4eb; }
.users-status-dot.inactive { background: #c93d36; box-shadow: 0 0 0 3px #fbe8e6; }
.users-empty, .users-search-empty { color: var(--muted); font-size: 11px; margin: 0; padding: 18px 12px; text-align: center; }
.users-editor-head { align-items: center; background: #f8fafb; border-bottom: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; padding: 13px 16px; }
.users-editor-head > div { align-items: center; display: flex; gap: 11px; min-width: 0; }
.users-editor-head h2, .users-editor-head p { margin: 0; }
.users-editor-head h2 { font-size: 17px; overflow-wrap: anywhere; }
.users-editor-head p { color: var(--muted); font-size: 10px; margin-top: 3px; }
.users-editor-state { border-radius: 999px; font-size: 9px; font-weight: 850; padding: 5px 9px; text-transform: uppercase; }
.users-editor-state.active { background: #e4f5ec; color: #147a51; }
.users-editor-state.inactive { background: #fde9e7; color: #b3261e; }
.users-editor-state.new { background: #e7f0f2; color: var(--accent); }
.users-editor-form { display: grid; gap: 0; }
.users-account-fields { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 16px; }
.users-account-fields > label:not(.users-active-switch) { display: grid; gap: 5px; min-width: 0; }
.users-account-fields > label > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.users-account-fields input, .users-account-fields select { font-size: 12px; min-width: 0; width: 100%; }
.users-active-switch { align-items: center; align-self: end; background: #f7f9fa; border: 1px solid var(--line-soft); border-radius: 7px; cursor: pointer; display: flex; gap: 9px; min-height: 35px; padding: 6px 9px; }
.users-active-switch input { accent-color: var(--ok); height: 16px; margin: 0; min-height: 16px; width: 16px; }
.users-active-switch > span { min-width: 0; }
.users-active-switch b, .users-active-switch small { display: block; }
.users-active-switch b { color: var(--text); font-size: 10px; }
.users-active-switch small { color: var(--muted); font-size: 8px; margin-top: 1px; }
.users-permission-tools { margin:0 16px 14px; display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; }
.users-permission-tools > button { padding:7px 12px; font-size:11px; min-height:34px; }
.users-permission-tools small { font-size:10px; line-height:1.5; color:var(--muted); flex:1; min-width:180px; }
.users-permission-tools > p { flex-basis:100%; margin:0; font-size:11px; color:#345c70; }
.users-permission-tools > p:empty { display:none; }
.users-permission-copy { display:flex; flex-wrap:wrap; align-items:end; gap:10px; width:100%; padding:14px; background:#f5f8fa; border:1px solid var(--line); border-radius:9px; }
.users-permission-copy label { flex:1; min-width:180px; display:grid; gap:6px; font-size:11px; }
.users-permission-copy select { width:100%; min-width:0; font-size:12px; }
.users-permission-copy button { font-size:11px; }
.users-permission-copy p { width:100%; margin:0; font-size:11px; color:var(--muted); }
.users-password-policy { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:20px; margin:20px 0; border:1px solid #dce7ec; border-radius:12px; background:var(--surface); }
.users-password-policy>div:first-child { flex:1; min-width:220px; }
.users-password-policy h2 { font-size:16px; margin:0 0 6px; }
.users-password-policy p { font-size:12px; line-height:1.6; margin:0; color:var(--muted); }
.users-password-policy-actions { display:flex; flex-wrap:wrap; gap:8px; }
.users-password-policy-actions button { margin:0; font-size:12px; }
.users-password-policy>p,.users-password-policy>small { width:100%; }
.users-password-policy>small { font-size:11px; color:var(--muted); }
.users-directory-row { display:flex; align-items:stretch; }
.users-directory-row[hidden] { display:none; }
.users-password-pick { display:flex; align-items:center; padding:0 6px 0 10px; margin:0; }
.users-password-pick input { width:16px; height:16px; margin:0; accent-color:var(--accent); }
.users-directory-row .users-directory-item { flex:1; min-width:0; }
.users-password-pending { color:#966019!important; }
.users-legacy-access-note { padding:10px 16px; margin:0; color:var(--muted); font-size:11px; background:#f8fafb; }
.users-password-individual { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; background:#f6f9fa; border-bottom:1px solid var(--line-soft); }
.users-password-individual div { display:grid; gap:4px; }
.users-password-individual strong { font-size:12px; }
.users-password-individual small { font-size:11px; color:var(--muted); }
.users-password-individual button { margin:0; font-size:11px; }
.account-card { max-width:560px; margin:24px auto; padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.account-card header { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.account-avatar { display:grid; place-items:center; width:42px; height:42px; border-radius:10px; background:#e8f2f5; color:#246678; font-weight:700; }
.account-card h2 { margin:0 0 4px; font-size:18px; }
.account-card header p { margin:0; font-size:13px; color:var(--muted); }
.account-card label { display:grid; gap:8px; margin:18px 0 0; font-size:14px; }
.account-card input { width:100%; margin:0; min-height:44px; }
.account-card #account-password-help { font-size:12px; line-height:1.6; color:var(--muted); margin:8px 0; }
.account-card footer { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.account-card footer>* { margin:0; }
@media(max-width:600px) { .account-card { padding:20px; } .account-card footer>* { flex:1; text-align:center; } }
.users-permissions-head { align-items: center; border-top: 1px solid var(--line-soft); display: flex; gap: 14px; justify-content: space-between; padding: 12px 16px; }
.users-permissions-head h3, .users-permissions-head p { margin: 0; }
.users-permissions-head h3 { font-size: 14px; }
.users-permissions-head p { color: var(--muted); font-size: 10px; margin-top: 2px; }
.permission-legend { display: flex; flex-wrap: wrap; gap: 5px; }
.permission-legend span { border-radius: 999px; font-size: 8px; font-weight: 850; padding: 4px 7px; }
.permission-legend .none { background: #edf0f2; color: #4d5b65; }
.permission-legend .read { background: #eaf2ff; color: #175cd3; }
.permission-legend .write { background: #dcfae6; color: #067647; }
.users-permission-groups { border-top: 1px solid var(--line-soft); }
.users-permission-group { border: 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: 9px; grid-template-columns: minmax(140px, .55fr) minmax(0, 1.45fr); margin: 0; padding: 12px 16px; }
.users-permission-group:last-child { border-bottom: 0; }
.users-permission-group legend { float: left; grid-column: 1; padding: 0; width: 100%; }
.users-permission-group legend span, .users-permission-group legend small { display: block; }
.users-permission-group legend span { color: var(--text); font-size: 12px; font-weight: 900; }
.users-permission-group legend small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.permission-group-actions { align-items: flex-start; align-self: start; display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1; }
.permission-group-actions button { background: #fff; border-color: #d8e0e6; color: #52616c; flex: 0 0 auto; font-size: 8px; min-height: 26px; padding: 3px 6px; }
.permission-group-actions button:hover { background: #eef4f5; border-color: #b9cdd2; color: var(--accent); }
.permission-rows { display: grid; gap: 6px; grid-column: 2; grid-row: 1 / span 2; }
.permission-row { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(150px, 1fr) 235px; }
.permission-row > span { color: #40505d; font-size: 10px; line-height: 1.2; min-width: 0; }
.permission-level { background: #f2f5f6; border: 1px solid var(--line-soft); border-radius: 6px; display: grid; gap: 3px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; }
.permission-level.permission-consult { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.permission-level label { cursor: pointer; min-width: 0; }
.permission-level input { height: 0; opacity: 0; pointer-events: none; position: absolute; width: 0; }
.permission-level label span { align-items: center; border-radius: 4px; color: #687782; display: flex; font-size: 8px; font-weight: 800; justify-content: center; min-height: 25px; padding: 3px; }
.permission-level input[value="none"]:checked + span { background: #fff; box-shadow: 0 1px 4px rgba(40, 50, 58, .12); color: #4d5b65; }
.permission-level input[value="read"]:checked + span { background: #e1ecff; box-shadow: 0 1px 4px rgba(23, 92, 211, .14); color: #175cd3; }
.permission-level input[value="write"]:checked + span { background: #d7f5e2; box-shadow: 0 1px 4px rgba(6, 118, 71, .14); color: #067647; }
.users-editor-actions { align-items: center; background: #f8fafb; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; padding: 11px 16px; }
.users-editor-actions button { font-size: 11px; }
.users-builtin-info { padding: 22px 16px; }
.users-builtin-info strong { font-size: 14px; }
.users-builtin-info p { color: var(--muted); font-size: 11px; margin: 5px 0 0; max-width: 620px; }
.setting-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.setting-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
input, select, button, .button {
  min-height: 35px;
  border-radius: 6px;
  border: 1px solid var(--line);
  padding: 8px 10px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}
.setting-field textarea {
  min-height: 74px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font: 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32, 95, 109, .14);
  outline: none;
}
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}
button:hover,
.button:hover {
  background: #174d5b;
  border-color: #174d5b;
  filter: none;
  text-decoration: none;
}
button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.button.secondary {
  background: var(--surface);
  color: var(--accent);
}
.action-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.action-list form,
.action-list button { width: 100%; }
.action-list .inline-form {
  align-items: stretch;
}
.action-list .inline-form select {
  min-width: 130px;
}
.action-list .inline-form button {
  flex: 1;
  width: auto;
}
.detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow);
}
dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 14px;
}
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
.signature-toggle {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}
.signature-toggle h2 {
  margin: 0;
}
.toggle-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.toggle-row {
  align-items: center;
  background: var(--surface-2);
  border-radius: 6px;
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
}
.toggle-row input {
  min-height: 18px;
  width: 18px;
}
.email-body {
  white-space: pre-wrap;
  background: #101828;
  color: #f8fafc;
  padding: 14px;
  border-radius: 8px;
  overflow: auto;
}
.login-box {
  max-width: 460px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 22px 60px rgba(20, 32, 46, .16);
}
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 12%, rgba(40, 122, 99, .14), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(31, 95, 122, .15), transparent 30%),
    linear-gradient(135deg, #f8fafb 0%, #eef3f7 100%);
}
.login-shell {
  width: min(460px, calc(100vw - 32px));
}
.login-page .login-box {
  max-width: none;
}
.login-brand {
  align-items: center;
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}
.login-brand img {
  flex: 0 0 auto;
  height: 58px;
  object-fit: contain;
  width: 58px;
}
.login-brand h1 {
  font-size: 23px;
  line-height: 1.15;
  margin: 0;
}
.login-brand p {
  color: var(--muted);
  margin: 5px 0 0;
}
.login-box form {
  display: grid;
  gap: 14px;
}
.login-box label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
}
.login-box input {
  width: 100%;
}
.login-box button {
  width: 100%;
}
.turnstile-box {
  min-height: 65px;
  display: flex;
  align-items: center;
}

.food-paper-upload-card,
.food-paper-empty,
.food-paper-report-meta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.food-paper-upload-card { padding: 16px; }
.food-paper-upload-form {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.food-paper-upload-form > div:first-child { grid-column: 1 / -1; }
.food-paper-upload-actions { display: grid; gap: 8px; }
.food-paper-upload-actions button { white-space: nowrap; }
.food-paper-upload-form p,
.food-paper-empty p { color: var(--muted); margin: 5px 0 0; }
.food-paper-file-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.food-paper-file-field span { color: var(--muted); font-size: 12px; font-weight: 700; }
.food-paper-file-field input { min-width: 0; padding: 6px; }
.food-paper-thresholds {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 8px 14px;
  margin-top: 14px;
}
.food-paper-thresholds span {
  background: var(--surface-2);
  border-radius: 5px;
  color: var(--text);
  font-weight: 700;
  padding: 5px 7px;
}
.food-paper-thresholds small { flex-basis: 100%; }
.food-paper-empty { margin-top: 16px; padding: 34px; text-align: center; }
.food-paper-empty strong { display: block; font-size: 16px; }
.food-paper-report-meta {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  padding: 14px;
}
.food-paper-report-meta > div { display: grid; gap: 4px; min-width: 0; }
.food-paper-report-meta strong { overflow-wrap: anywhere; }
.food-paper-report-meta small { color: var(--muted); overflow-wrap: anywhere; }
.food-paper-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}
.food-paper-summary .card {
  box-shadow: var(--shadow-soft);
  min-height: 116px;
  padding: 15px;
}
.food-paper-summary .card.compact strong {
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1.05;
}
.food-paper-summary .card small { display: block; margin-top: 7px; }
.food-paper-rules,
.food-paper-findings { margin-top: 16px; }
.food-paper-rule-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
}
.food-paper-rule {
  align-items: start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}
.food-paper-rule.no-evaluable { border-left-color: var(--muted); }
.food-paper-rule strong { display: block; margin-top: 3px; }
.food-paper-rule small { color: var(--muted); }
.food-paper-findings-toolbar {
  align-items: center;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}
.food-paper-filter-group { display: flex; flex-wrap: wrap; gap: 7px; }
.food-paper-filter-group button {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
}
.food-paper-filter-group button:hover,
.food-paper-filter-group button.active {
  background: #e1f0f1;
  border-color: #a8cfd3;
  color: #174d5b;
}
.food-paper-visible-count { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.food-paper-findings-list { display: grid; gap: 10px; padding: 0 12px 12px; }
.food-paper-finding {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid #c88719;
  border-radius: 7px;
  display: grid;
  gap: 12px;
  padding: 14px;
}
.food-paper-finding.critical { border-left-color: var(--danger); }
.food-paper-finding-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.food-paper-finding-head strong { display: block; margin-top: 3px; }
.food-paper-finding-head small,
.food-paper-finding p { color: var(--muted); margin: 0; }
.food-paper-finding-status { align-items: end; display: grid; gap: 5px; text-align: right; white-space: nowrap; }
.food-paper-finding-status .badge { justify-content: center; width: auto; }
.food-paper-evidence {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.food-paper-evidence div {
  background: var(--surface-2);
  border-radius: 5px;
  display: grid;
  gap: 2px;
  padding: 8px;
}
.food-paper-evidence dt { color: var(--muted); font-size: 11px; }
.food-paper-evidence dd { font-weight: 700; overflow-wrap: anywhere; }
.food-paper-recommendation {
  background: #eff7f7;
  border-radius: 5px;
  color: #174d5b;
  font-size: 13px;
  padding: 9px 10px;
}
.food-paper-review-list {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 7px 0 0;
  padding: 0;
}
.food-paper-review-list li { line-height: 1.35; }
.settings-contacts-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: var(--shadow-soft);
  margin: 22px 0;
  padding: 16px;
}
.settings-contacts-head {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}
.settings-contacts-head h2 { margin: 0; }
.settings-contacts-head p { color: var(--muted); font-size: 13px; margin: 5px 0 0; }
.settings-contact-provider-status { display: flex; flex-wrap: wrap; gap: 6px; justify-content: end; }
.incident-contact-form,
.incident-contact-row {
  align-items: end;
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(170px, 1.3fr) repeat(4, minmax(130px, 1fr)) auto;
}
.incident-contact-form.new {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  margin-top: 14px;
  padding: 12px;
}
.incident-contact-form label,
.incident-contact-row > label { display: grid; gap: 5px; min-width: 0; }
.incident-contact-form label > span,
.incident-contact-row > label > span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.incident-contact-form input,
.incident-contact-row input { min-width: 0; width: 100%; }
.incident-contact-list { display: grid; margin-top: 12px; }
.incident-contact-row { border-top: 1px solid var(--line-soft); padding: 10px 0; }
.incident-contact-row > form[id^="incident-contact-"] { display: contents; }
.incident-contact-actions { display: flex; gap: 6px; }
.incident-contact-actions form { margin: 0; }
.incident-contact-actions button,
.incident-contact-form > button { min-height: 37px; padding: 8px 10px; }
.settings-contacts-note { color: var(--muted); display: block; margin-top: 8px; }
@media (max-width: 1180px) {
  .incident-contact-form,
  .incident-contact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .incident-contact-actions { align-self: end; }
}
@media (max-width: 700px) {
  .settings-contacts-head { align-items: stretch; flex-direction: column; }
  .settings-contact-provider-status { justify-content: start; }
  .incident-contact-form,
  .incident-contact-row { grid-template-columns: 1fr; }
}
.food-dashboard-head {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.food-dashboard-head h1 { margin: 0; }
.food-dashboard-head p { color: var(--muted); margin: 6px 0 0; }
.food-dashboard-head-side { align-items: end; display: grid; gap: 10px; justify-items: end; }
.food-dashboard-head-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
.food-dashboard-chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 800; padding: 8px 10px; }
.food-dashboard-chip.success { background: #edf9f0; color: #176534; }
.food-dashboard-chip.warning { background: #fff8e6; color: #9a5a00; }
.food-dashboard-head-actions { display: flex; gap: 8px; justify-content: end; }
.food-dashboard-head-actions button { font-size: 12px; min-height: 34px; padding: 7px 12px; }
.food-dashboard-load-button { background: #fff; border: 1px solid #d88b86; color: #a33b35; }
.food-dashboard-upload { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow-soft); padding: 14px; }
.food-dashboard-upload-head { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.food-dashboard-upload-head strong { display: block; }
.food-dashboard-upload-head small { color: var(--muted); display: block; margin-top: 3px; }
.food-dashboard-file-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.food-dashboard-file-field { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 5px; min-width: 0; padding: 11px; }
.food-dashboard-file-field.required { border-color: #9bc5cb; }
.food-dashboard-file-field span { font-size: 13px; font-weight: 800; }
.food-dashboard-file-field small { color: var(--muted); font-size: 11px; line-height: 1.35; min-height: 30px; }
.food-dashboard-file-field input { font-size: 11px; min-width: 0; padding: 4px; }
.food-dashboard-sources { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.food-dashboard-source { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 11px; grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 108px; min-width: 0; padding: 12px; }
.food-dashboard-source.loaded { border-color: #b6dac0; }
.food-dashboard-source.mismatch { border-color: #edc685; }
.food-dashboard-source-icon { align-items: end; background: #e9f6ed; border: 1px solid #79b68a; border-radius: 4px; color: #176534; display: flex; font-size: 10px; font-weight: 900; height: 48px; justify-content: center; padding-bottom: 7px; position: relative; width: 38px; }
.food-dashboard-source-icon::after { background: #fff; border-bottom: 1px solid #79b68a; border-left: 1px solid #79b68a; content: ""; height: 10px; position: absolute; right: -1px; top: -1px; width: 10px; }
.food-dashboard-source.mismatch .food-dashboard-source-icon { background: #fff5e5; border-color: #edc685; color: #aa6100; }
.food-dashboard-source strong, .food-dashboard-source small { display: block; overflow-wrap: anywhere; }
.food-dashboard-source strong { font-size: 12px; }
.food-dashboard-source small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.food-dashboard-source-state { color: #218045; font-size: 20px; font-weight: 900; }
.food-dashboard-source.mismatch .food-dashboard-source-state { color: #c17206; }
.food-dashboard-metrics { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 16px; }
.food-dashboard-metric { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow-soft); min-width: 0; padding: 13px 12px; text-align: center; }
.food-dashboard-metric span { color: var(--muted); display: block; font-size: 11px; font-weight: 800; }
.food-dashboard-metric strong { display: block; font-size: 22px; line-height: 1.1; margin-top: 8px; overflow-wrap: anywhere; }
.food-dashboard-metric small { color: var(--muted); display: block; font-size: 11px; line-height: 1.35; margin-top: 8px; }
.food-dashboard-metric.danger strong { color: var(--danger); }
.food-dashboard-visual-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(0, .72fr); margin-top: 16px; }
.food-dashboard-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow-soft); min-width: 0; padding: 14px; }
.food-dashboard-panel-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 14px; }
.food-dashboard-panel-head strong { font-size: 14px; }
.food-dashboard-panel-head span { color: var(--muted); font-size: 11px; text-align: right; }
.food-dashboard-waterfall-chart {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  height: 205px;
  padding: 28px 4px 0;
  position: relative;
}
.food-dashboard-waterfall-chart::before {
  border-top: 1px dashed #a8adb3;
  content: "";
  left: 4px;
  position: absolute;
  right: 4px;
  top: 30px;
}
.food-dashboard-waterfall-step {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-width: 0;
}
.food-dashboard-waterfall-step b {
  color: #343b43;
  font-size: 10px;
  margin-bottom: 4px;
  white-space: nowrap;
}
.food-dashboard-waterfall-step span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.15;
  min-height: 29px;
  padding-top: 5px;
  text-align: center;
}
.food-dashboard-waterfall-column { background: #173552; min-height: 8px; width: min(38px, 70%); }
.food-dashboard-waterfall-step.increase .food-dashboard-waterfall-column { background: #dc2626; }
.food-dashboard-waterfall-step.decrease .food-dashboard-waterfall-column { background: #2d9b63; }
.food-dashboard-waterfall-step.decrease b { color: #218452; }
.food-dashboard-bars { display: grid; gap: 10px; }
.food-dashboard-bar-row { align-items: center; display: grid; gap: 8px; grid-template-columns: 78px minmax(0, 1fr) auto; }
.food-dashboard-bar-row > span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.food-dashboard-bar-row b { font-size: 11px; text-align: right; white-space: nowrap; }
.food-dashboard-bar-track { background: var(--surface-2); border-radius: 3px; height: 12px; overflow: hidden; }
.food-dashboard-bar-track i { background: var(--accent); display: block; height: 100%; min-width: 2px; }
.distribution .food-dashboard-bar-track i { background: var(--danger); }
.food-dashboard-quality-body { align-items: center; display: grid; gap: 14px; grid-template-columns: auto minmax(0, 1fr); }
.food-dashboard-score { align-items: center; background: #fff; border: 9px solid #f1b52d; border-radius: 50%; color: #20242a; display: flex; flex-direction: column; font-size: 26px; font-weight: 900; height: 112px; justify-content: center; width: 112px; }
.food-dashboard-score small { font-size: 11px; font-weight: 700; }
.food-dashboard-score em { color: #a66b00; font-size: 10px; font-style: normal; margin-top: 2px; }
.food-dashboard-quality-list { display: grid; gap: 9px; }
.food-dashboard-quality-list p { align-items: center; color: var(--muted); display: grid; font-size: 11px; gap: 7px; grid-template-columns: 9px minmax(0, 1fr); line-height: 1.3; margin: 0; }
.food-dashboard-quality-list i { background: #269251; border-radius: 50%; display: block; height: 8px; width: 8px; }
.food-dashboard-quality-list .warning i { background: #df991a; }
.food-dashboard-quality-list .danger i { background: var(--danger); }
.food-dashboard-bottom-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); margin-top: 16px; }
.food-dashboard-product-list, .food-dashboard-alert-list { display: grid; }
.food-dashboard-product-list > div { align-items: center; border-top: 1px solid var(--line-soft); display: grid; gap: 9px; grid-template-columns: 24px minmax(0, 1fr) 72px auto; padding: 8px 0; }
.food-dashboard-product-list > div > b { color: var(--muted); font-size: 12px; }
.food-dashboard-product-list span { font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.food-dashboard-product-list small { color: var(--muted); font-size: 11px; }
.food-dashboard-product-list strong { color: var(--danger); font-size: 12px; white-space: nowrap; }
.food-dashboard-table-wrap { overflow-x: auto; }
.food-dashboard-table { border-collapse: collapse; font-size: 11px; width: 100%; }
.food-dashboard-table th { color: var(--muted); font-size: 10px; font-weight: 800; padding: 0 7px 7px; text-align: left; text-transform: uppercase; }
.food-dashboard-table td { border-top: 1px solid var(--line-soft); padding: 7px; vertical-align: middle; }
.food-dashboard-table td:first-child { color: var(--muted); width: 26px; }
.food-dashboard-table td.danger { color: var(--danger); font-weight: 800; white-space: nowrap; }
.food-dashboard-alert-list > div { align-items: center; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; grid-template-columns: 24px minmax(0, 1fr) minmax(130px, .7fr); padding: 10px 0; }
.food-dashboard-alert-list b { align-items: center; background: #fff1ef; border: 1px solid #e8b1aa; border-radius: 50%; color: var(--danger); display: flex; font-size: 11px; height: 21px; justify-content: center; width: 21px; }
.food-dashboard-alert-list span { font-size: 12px; line-height: 1.4; }
.food-dashboard-alert-list small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.food-dashboard-context-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.food-dashboard-context { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow-soft); padding: 13px; }
.food-dashboard-context span { color: var(--muted); display: block; font-size: 11px; font-weight: 800; }
.food-dashboard-context strong { color: #174d5b; display: block; font-size: 17px; margin-top: 7px; overflow-wrap: anywhere; }
.food-dashboard-context small { color: var(--muted); display: block; font-size: 11px; margin-top: 6px; }
.food-dashboard-details { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; margin-top: 16px; }
.food-dashboard-details summary { cursor: pointer; font-size: 13px; font-weight: 800; padding: 13px 14px; }
.food-dashboard-details .food-paper-rule-grid { border-top: 1px solid var(--line-soft); }
@media (max-width: 1200px) {
  .food-dashboard-file-grid, .food-dashboard-sources, .food-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-dashboard-visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-dashboard-quality { grid-column: span 2; }
}
@media (max-width: 700px) {
  .food-dashboard-head, .food-dashboard-upload-head { align-items: stretch; flex-direction: column; }
  .food-dashboard-head-side { align-items: start; justify-items: start; }
  .food-dashboard-head-chips { justify-content: start; }
  .food-dashboard-head-actions { justify-content: start; }
  .food-dashboard-file-grid, .food-dashboard-sources, .food-dashboard-metrics, .food-dashboard-visual-grid, .food-dashboard-bottom-grid, .food-dashboard-context-grid { grid-template-columns: 1fr; }
  .food-dashboard-quality { grid-column: auto; }
  .food-dashboard-alert-list > div { grid-template-columns: 24px minmax(0, 1fr); }
  .food-dashboard-alert-list small { grid-column: 2; }
  .food-dashboard-waterfall-chart { gap: 3px; }
  .food-dashboard-waterfall-step b { font-size: 8px; }
  .food-dashboard-waterfall-step span { font-size: 8px; }
}
.food-paper-more-wrap {
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: center;
  padding: 12px;
}

@media (min-width: 821px) {
  .topbar .nav-submenu-nested .nav-flyout {
    left: auto;
    right: calc(100% + 6px);
    transform: translateX(2px);
  }
  .topbar .nav-submenu-nested .nav-submenu-item::after {
    left: auto;
    right: 100%;
  }
  .topbar .nav-submenu-nested .nav-submenu-item:hover .nav-flyout,
  .topbar .nav-submenu-nested .nav-submenu-item:focus-within .nav-flyout {
    transform: translateX(0);
  }
}

@media (max-width: 820px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-brand { min-width: 0; }
  .topbar nav { width: 100%; }
  .nav-menu { width: 100%; }
  .nav-submenu {
    min-width: 100%;
    opacity: 1;
    pointer-events: auto;
    position: static;
    transform: none;
    transition: none;
  }
  .nav-flyout {
    border: 0;
    box-shadow: none;
    left: auto;
    margin: 2px 0 6px 10px;
    min-width: 0;
    opacity: 1;
    padding: 4px;
    pointer-events: auto;
    position: static;
    transform: none;
    transition: none;
  }
  .nav-submenu-item::after {
    display: none;
  }
  .container { padding: 16px; }
  .grid-2 { grid-template-columns: 1fr; }
  .graph-layout { grid-template-columns: 1fr; }
  .graph-filter-card,
  .graph-filter-row { align-items: stretch; flex-direction: column; }
  .graph-card-head,
  .graph-picker-head { align-items: flex-start; flex-direction: column; }
  .users-workspace { grid-template-columns: 1fr; }
  .users-directory { position: static; }
  .users-directory-list { max-height: 230px; }
  .users-account-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .users-permission-group { grid-template-columns: 125px minmax(0, 1fr); }
  .permission-row { grid-template-columns: minmax(120px, 1fr) 235px; }
  .restaurant-dropdown { min-width: 0; width: 100%; }
  .restaurant-dropdown-panel {
    max-width: 100%;
    min-width: 0;
    position: static;
  }
  .restaurant-picker { grid-template-columns: 1fr; max-height: 260px; }
  .restaurant-chip { width: 100%; }
  .settings-section-grid { grid-template-columns: 1fr; }
  .settings-backup-panel { align-items: stretch; flex-direction: column; }
  .settings-backup-actions,
  .settings-backup-actions form { justify-content: stretch; }
  .settings-backup-actions button,
  .settings-backup-actions input { width: 100%; }
  .maintenance-load-card,
  .maintenance-load-fields,
  .status-automation-cards,
  .food-paper-upload-form,
  .food-paper-report-meta,
  .food-paper-rule-grid { grid-template-columns: 1fr; }
  .food-paper-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-paper-findings-toolbar { align-items: flex-start; flex-direction: column; }
  .food-paper-visible-count { white-space: normal; }
  .food-paper-finding-head { align-items: start; flex-direction: column; }
  .food-paper-finding-status { align-items: start; text-align: left; }
  .sync-event-main { grid-template-columns: 1fr 1fr; }
  .filters { grid-template-columns: 1fr; }
  .ratio-calendar { overflow-x: auto; padding-bottom: 4px; }
  .ratio-weekdays,
  .ratio-week { min-width: 720px; }
  dl { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .users-page-head { align-items: stretch; flex-direction: column; }
  .users-head-actions { align-items: stretch; justify-content: stretch; }
  .users-head-actions button { justify-content: center; width: 100%; }
  .users-stats { grid-template-columns: 1fr; }
  .users-account-fields { grid-template-columns: 1fr; }
  .users-permissions-head { align-items: flex-start; flex-direction: column; }
  .users-permission-group { grid-template-columns: 1fr; }
  .users-permission-group legend,
  .permission-group-actions,
  .permission-rows { grid-column: 1; grid-row: auto; }
  .permission-row { align-items: stretch; grid-template-columns: 1fr; }
  .users-editor-actions { align-items: stretch; flex-direction: column; }
  .users-editor-actions button { width: 100%; }
}

/* Food & Paper diagnostic assistant */
.fp-page-head {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.fp-page-head h1 { font-size: 27px; margin: 2px 0 0; }
.fp-page-head p { color: var(--muted); margin: 5px 0 0; }
.fp-eyebrow { color: #287187; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.fp-page-actions { align-items: center; display: flex; gap: 8px; }
.fp-page-actions form { margin: 0; }
.fp-page-actions button { min-height: 36px; padding: 8px 12px; }
.fp-upload-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
  padding: 16px;
  position: relative;
}
.fp-upload-panel.loading::after {
  background: linear-gradient(90deg, transparent, rgba(39, 124, 146, .3), transparent);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  animation: fp-loading 1.1s linear infinite;
}
@keyframes fp-loading { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.fp-upload-heading { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.fp-upload-heading strong, .fp-upload-heading small { display: block; }
.fp-upload-heading small { color: var(--muted); margin-top: 3px; }
.fp-file-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.fp-file-grid-single { grid-template-columns: minmax(0, 1fr); }
.fp-file-grid-single .fp-file-field { min-height: 154px; }
.fp-file-field {
  background: #f8fafb;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  display: grid;
  gap: 5px;
  min-height: 136px;
  min-width: 0;
  padding: 12px;
  position: relative;
}
.fp-file-field:hover { border-color: #8dbbc6; }
.fp-file-field.ready { background: #f1faf5; border-color: #96caaa; }
.fp-file-index { align-items: center; background: #deebee; border-radius: 5px; color: #245e6d; display: flex; font-size: 11px; font-weight: 900; height: 25px; justify-content: center; width: 25px; }
.fp-file-field.ready .fp-file-index { background: #d7f0df; color: #176534; }
.fp-file-field strong { font-size: 13px; line-height: 1.25; }
.fp-file-field small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.fp-file-field input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.fp-selected-files { display: grid; gap: 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: auto; }
.fp-selected-files span { background: #fff; border: 1px solid var(--line-soft); border-radius: 5px; color: #5d6872; font-size: 10px; font-weight: 700; overflow: hidden; padding: 6px 8px; text-overflow: ellipsis; white-space: nowrap; }
.fp-file-field.ready .fp-selected-files span { border-color: #c7e2d0; color: #176534; }
.fp-upload-footer { align-items: center; display: flex; gap: 16px; justify-content: flex-end; margin-top: 12px; }
.fp-upload-footer span { color: var(--muted); font-size: 12px; }
.fp-empty-state {
  align-items: center;
  background: var(--surface);
  border: 1px dashed #cbd5da;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 330px;
  padding: 30px;
  text-align: center;
}
.fp-empty-state > span { align-items: center; background: #e5f0f2; border-radius: 8px; color: #256579; display: flex; font-size: 13px; font-weight: 900; height: 52px; justify-content: center; margin-bottom: 14px; width: 52px; }
.fp-empty-state strong { font-size: 18px; }
.fp-empty-state p { color: var(--muted); margin: 6px 0 0; }
.fp-source-strip { display: grid; gap: 9px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fp-source-strip article { align-items: center; background: var(--surface); border: 1px solid #cfe2d5; border-radius: 7px; display: grid; gap: 9px; grid-template-columns: 33px minmax(0, 1fr) auto; min-width: 0; padding: 9px; }
.fp-source-strip article > span { align-items: center; background: #e7f5ec; border-radius: 4px; color: #1f7544; display: flex; font-size: 9px; font-weight: 900; height: 34px; justify-content: center; }
.fp-source-strip strong, .fp-source-strip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-source-strip strong { font-size: 11px; }
.fp-source-strip small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.fp-source-strip b { color: #238653; font-size: 10px; }
.fp-kpi-grid { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.fp-kpi-grid article { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #91a1ab; border-radius: 7px; min-width: 0; padding: 12px 14px; }
.fp-kpi-grid article.critical { border-left-color: #d4473f; }
.fp-kpi-grid article.warning { border-left-color: #e69520; }
.fp-kpi-grid article.success { border-left-color: #2e9561; }
.fp-kpi-grid span, .fp-kpi-grid small { color: var(--muted); display: block; font-size: 11px; }
.fp-kpi-grid strong { display: block; font-size: 25px; line-height: 1; margin: 7px 0 5px; }
.fp-kpi-grid .critical strong { color: #c43b34; }
.fp-kpi-grid .warning strong { color: #c87405; }
.fp-kpi-grid .success strong { color: #238653; }
.fp-kpi-grid .fp-total-deviation strong { font-size: 19px; }
.fp-cost-summary { margin-top: 16px; }
.fp-cost-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.fp-cost-heading h2 { font-size: 16px; margin: 0; }
.fp-cost-status { padding: 6px 10px; border-radius: 5px; font-size: 12px; font-weight: 700; background: #eef1f3; color: #55616c; }
.fp-cost-status.success { background: #e5f5eb; color: #197548; }
.fp-cost-status.critical { background: #fde9e7; color: #b73530; }
.fp-cost-grid strong { font-size: 21px; overflow-wrap: anywhere; }
.fp-cost-grid small { line-height: 1.5; }
.fp-real-cost-card { position: relative; }
.fp-real-cost-label { padding-right: 26px; }
.fp-cost-info-wrap { position: absolute; top: 7px; right: 8px; width: 28px; height: 28px; }
.fp-cost-info { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #e87912; line-height: 1; cursor: help; }
.fp-cost-info svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.fp-cost-info:hover, .fp-cost-info:focus { background: #fff0dd; color: #c65c06; }
.fp-cost-info:focus-visible { outline: 2px solid #e87912; outline-offset: 2px; }
.fp-kpi-grid .fp-cost-tooltip { position: absolute; top: 100%; right: 0; z-index: 5; width: 220px; max-width: calc(100vw - 80px); padding: 9px 11px; border-radius: 6px; background: #27333f; color: #fff; font-size: 12px; line-height: 1.5; box-shadow: var(--shadow-soft); visibility: hidden; opacity: 0; transition: opacity .15s; }
.fp-cost-info-wrap:hover .fp-cost-tooltip, .fp-cost-info-wrap:focus-within .fp-cost-tooltip { visibility: visible; opacity: 1; }
.fp-objectives-panel { display: block; scroll-margin-top: 85px; }
.fp-objectives-head, .fp-objectives-head form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.fp-objectives-head h2 { font-size: 17px; margin: 0; }
.fp-objectives-head p { color: var(--muted); font-size: 12px; }
.fp-objectives-head label { display: grid; gap: 5px; }
.fp-objectives-head input { width: 110px; }
.fp-objectives-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin-top: 12px; }
.fp-objective-row { display: grid; grid-template-columns: minmax(0, 1fr) 115px auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); margin: 0; }
.fp-objective-row label { font-size: 12px; overflow-wrap: anywhere; }
.fp-objective-row > div { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.fp-objective-row input { width: 90px; min-width: 0; padding: 7px; font-size: 12px; }
.fp-objective-row button { padding: 7px 10px; font-size: 12px; }
.fp-objective-add { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 18px; }
.fp-objective-add label { display: grid; gap: 5px; font-size: 12px; }
@media (max-width: 1000px) { .fp-objectives-list { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  body:has(.fp-page-head) .topbar, body:has(.fp-objectives-panel) .topbar { position: relative; }
}
.fp-workspace { align-items: start; display: grid; gap: 12px; grid-template-columns: minmax(0, 1.22fr) minmax(410px, .78fr); margin-top: 12px; }
.fp-product-panel, .fp-detail-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-soft); min-width: 0; }
.fp-filter-bar { align-items: end; border-bottom: 1px solid var(--line-soft); display: grid; gap: 8px; grid-template-columns: minmax(150px, 1.2fr) repeat(2, minmax(108px, .72fr)); padding: 12px; }
.fp-filter-bar label { display: grid; gap: 4px; min-width: 0; }
.fp-filter-bar label > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.fp-filter-bar input, .fp-filter-bar select { font-size: 12px; min-height: 35px; min-width: 0; padding: 7px 9px; width: 100%; }
.fp-filter-bar button { min-height: 35px; padding: 7px 10px; }
.fp-list-heading { align-items: center; display: flex; gap: 14px; justify-content: space-between; padding: 13px 14px; }
.fp-list-heading strong, .fp-list-heading small { display: block; }
.fp-list-heading strong { font-size: 14px; }
.fp-list-heading small, .fp-list-heading > span { color: var(--muted); font-size: 10px; }
.fp-list-heading small { margin-top: 2px; }
.fp-product-table { border-top: 1px solid var(--line-soft); }
.fp-product-table-head, .fp-product-row { display: grid; gap: 9px; grid-template-columns: minmax(125px, 1fr) 92px minmax(160px, 1.25fr) 88px 14px; }
.fp-product-table-head { color: var(--muted); font-size: 9px; font-weight: 800; padding: 8px 13px; text-transform: uppercase; }
.fp-product-row { align-items: center; background: transparent; border: 0; border-radius: 0; border-top: 1px solid var(--line-soft); color: var(--text); min-height: 58px; padding: 9px 13px; text-align: left; width: 100%; }
.fp-product-row:hover { background: #f5f9fa; color: var(--text); }
.fp-product-row.active { background: #edf5f7; box-shadow: inset 3px 0 #317c91; color: var(--text); }
.fp-product-row > span:first-child { min-width: 0; }
.fp-product-row > span:first-child strong, .fp-product-row > span:first-child small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-product-row > span:first-child strong { font-size: 12px; }
.fp-product-row > span:first-child small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.fp-product-row > b { font-size: 11px; white-space: nowrap; }
.fp-product-row .negative { color: #c43b34; }
.fp-product-row .positive { color: #238653; }
.fp-row-indicator { align-items: center; color: #46515b; display: grid; font-size: 10px; gap: 7px; grid-template-columns: 7px minmax(0, 1fr); line-height: 1.3; }
.fp-row-indicator i { background: #e69520; border-radius: 50%; height: 7px; width: 7px; }
.fp-row-indicator i.critical { background: #d4473f; }
.fp-product-row em { background: #fff1d9; border-radius: 5px; color: #a95c00; font-size: 9px; font-style: normal; font-weight: 800; padding: 5px 6px; text-align: center; }
.fp-product-row em.critical { background: #fde8e6; color: #b62e28; }
.fp-product-row em.detected { border: 1px solid transparent; }
.fp-product-row em.detected.inactive { background: #fee4e2; border-color: #f7b5b0; color: #b42318; }
.fp-product-row em.detected.performance { background: #f0e9ff; border-color: #d8c6ff; color: #6941c6; }
.fp-product-row em.detected.waste { background: #dcfae6; border-color: #a9e8be; color: #067647; }
.fp-product-row em.detected.delivery { background: #ffead5; border-color: #f6c894; color: #b54708; }
.fp-product-row em.detected.count { background: #eaf2ff; border-color: #bad2ff; color: #175cd3; }
.fp-row-arrow { color: #7a8790; font-size: 19px; text-align: right; }
.fp-no-results { color: var(--muted); padding: 34px 15px; text-align: center; }
.fp-pagination { align-items: center; border-top: 1px solid var(--line-soft); color: var(--muted); display: flex; font-size: 10px; gap: 12px; justify-content: space-between; padding: 10px 13px; }
.fp-pagination > div { display: flex; gap: 4px; }
.fp-pagination > div > span { display: flex; gap: 4px; }
.fp-pagination button { min-height: 29px; min-width: 29px; padding: 4px 7px; }
.fp-pagination button.active { background: #317c91; border-color: #317c91; color: #fff; }
.fp-detail-panel { max-height: calc(100vh - 28px); overflow-y: auto; position: sticky; top: 14px; }
.fp-detail-head { align-items: start; background: #f5f8f9; border-bottom: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; padding: 15px; }
.fp-detail-head > div:first-child { min-width: 0; }
.fp-detail-head > div:first-child > span { color: #286b7e; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.fp-detail-head h2 { font-size: 19px; line-height: 1.15; margin: 4px 0; overflow-wrap: anywhere; }
.fp-detail-head small { color: var(--muted); font-size: 10px; }
.fp-detail-impact { flex: 0 0 auto; text-align: right; }
.fp-detail-impact strong, .fp-detail-impact span { display: block; }
.fp-detail-impact strong { font-size: 18px; white-space: nowrap; }
.fp-detail-impact.negative strong { color: #c43b34; }
.fp-detail-impact.positive strong { color: #238653; }
.fp-detail-impact span { background: #fff1d9; border-radius: 5px; color: #a95c00; font-size: 9px; font-weight: 800; margin: 5px 0 0 auto; padding: 4px 6px; width: fit-content; }
.fp-detail-section { border-bottom: 1px solid var(--line-soft); padding: 13px 15px; }
.fp-detail-section h3 { font-size: 11px; margin: 0 0 9px; }
.fp-detail-section > p { color: var(--muted); font-size: 10px; line-height: 1.45; margin: 8px 0 0; }
.fp-detail-section.muted { background: #fafbfb; }
.fp-detail-section.muted ul { color: var(--muted); font-size: 10px; line-height: 1.45; margin: 0; padding-left: 17px; }
.fp-indicator-list { display: grid; gap: 7px; }
.fp-indicator { border: 1px solid var(--line); border-left: 3px solid #e69520; border-radius: 6px; padding: 9px; }
.fp-indicator.critical { border-left-color: #d4473f; }
.fp-indicator-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.fp-indicator-head > div { align-items: center; display: flex; gap: 7px; }
.fp-indicator-head i { background: #e69520; border-radius: 50%; display: block; height: 7px; width: 7px; }
.fp-indicator.critical .fp-indicator-head i { background: #d4473f; }
.fp-indicator-head strong { font-size: 10px; }
.fp-indicator-head > span { background: #fff1d9; border-radius: 4px; color: #a95c00; font-size: 8px; font-weight: 800; padding: 3px 5px; }
.fp-indicator.critical .fp-indicator-head > span { background: #fde8e6; color: #b62e28; }
.fp-indicator > p { color: #3f4b55; font-size: 10px; line-height: 1.4; margin: 6px 0 0; }
.fp-evidence-grid, .fp-detail-metrics { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.fp-evidence-grid > div, .fp-detail-metrics > div { background: #f7f9fa; border-radius: 5px; min-width: 0; padding: 7px 8px; }
.fp-evidence-grid span, .fp-evidence-grid strong, .fp-detail-metrics span, .fp-detail-metrics strong { display: block; overflow-wrap: anywhere; }
.fp-evidence-grid span, .fp-detail-metrics span { color: var(--muted); font-size: 8px; }
.fp-evidence-grid strong, .fp-detail-metrics strong { font-size: 10px; margin-top: 2px; }
.fp-conclusion { background: #eef6f8; border: 1px solid #c5dde3; border-radius: 7px; margin: 12px; padding: 12px; }
.fp-conclusion > span { color: #286b7e; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.fp-conclusion ol { color: #283842; font-size: 10px; line-height: 1.5; margin: 6px 0 0; padding-left: 18px; }

/* Food & Paper product inspector */
.fp-modern-product-head { padding: 20px 20px 12px; }
.fp-modern-family { color: #f06b12; display: block; font-size: 12px; font-weight: 700; }
.fp-modern-product-head h2 { color: #0d1f3c; font-size: 23px; line-height: 1.08; margin: 7px 0 10px; overflow-wrap: anywhere; }
.fp-modern-product-head h3 { color: #0d1f3c; font-size: 19px; margin: 20px 0 0; }
.fp-modern-status { align-items: center; color: #7a8794; display: flex; font-size: 12px; gap: 7px; }
.fp-modern-status strong { border-radius: 999px; font-size: 11px; padding: 5px 11px; }
.fp-modern-status strong.active { background: #e4f6e9; color: #178443; }
.fp-modern-status strong.inactive { background: #fde9e7; color: #b73530; }
.fp-modern-back {
  align-items: center;
  background: transparent;
  border: 0;
  color: #357489;
  display: inline-flex;
  font-size: 10px;
  gap: 4px;
  margin: -8px 0 9px;
  min-height: 28px;
  padding: 3px 0;
}
.fp-modern-back:hover { background: transparent; color: #174f63; }
.fp-modern-back span { font-size: 19px; line-height: 1; }
.fp-modern-economic-hero {
  align-items: center;
  background: #fff8f7;
  border: 1px solid #fac6c1;
  border-radius: 8px;
  display: grid;
  gap: 0 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 2px 16px 14px;
  padding: 11px 14px;
}
.fp-modern-economic-hero > div { align-items: center; display: flex; gap: 8px; }
.fp-modern-economic-hero > div span { color: #71808e; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.fp-modern-economic-hero > div b { align-items: center; background: #f36b16; border-radius: 5px; color: #fff; display: flex; font-size: 13px; height: 23px; justify-content: center; width: 23px; }
.fp-modern-economic-hero > strong { color: #dc2824; font-size: 26px; line-height: 1; white-space: nowrap; }
.fp-modern-economic-hero > small { color: #71808e; font-size: 10px; grid-column: 2; text-align: right; }
.fp-modern-economic-hero.positive { background: #f3fbf6; border-color: #bfe3ca; }
.fp-modern-economic-hero.positive > strong { color: #21814b; }
.fp-modern-summary { padding: 0 16px 17px; }
.fp-modern-summary > h3 { color: #0d1f3c; font-size: 16px; margin: 0 0 11px; }
.fp-modern-summary > div { display: grid; gap: 9px; }
.fp-executive-card {
  align-items: center;
  background: #fff;
  border: 1px solid #dce2e7;
  border-left: 3px solid #ee790f;
  border-radius: 8px;
  color: #0d1f3c;
  display: grid;
  gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr) auto 10px;
  min-height: 88px;
  padding: 11px 12px;
  text-align: left;
  width: 100%;
}
.fp-executive-card:hover { background: #fffaf6; color: #0d1f3c; transform: none; }
.fp-executive-card.performance { border-left-color: #efad14; }
.fp-executive-card.economy { border-left-color: #df302d; }
.fp-executive-card.waste { border-left-color: #3579b9; }
.fp-executive-card.status { border-left-color: #c53d36; }
.fp-executive-card.related { border-left-color: #6d5ac7; }
.fp-executive-icon, .fp-focus-icon {
  align-items: center;
  align-self: stretch;
  background: #fff0e4;
  border-radius: 8px;
  color: #ed6b0d;
  display: flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  letter-spacing: 0;
  min-height: 50px;
}
.fp-executive-card.performance .fp-executive-icon { background: #fff6dc; color: #d99800; }
.fp-executive-card.economy .fp-executive-icon { background: #fdeaea; color: #d92826; }
.fp-executive-card.waste .fp-executive-icon { background: #e8f3fb; color: #23699f; }
.fp-executive-card.status .fp-executive-icon { background: #fdeaea; color: #b73530; }
.fp-executive-card.related .fp-executive-icon { background: #f0edff; color: #6352b8; }
.fp-executive-copy { display: block; min-width: 0; }
.fp-executive-copy > strong, .fp-executive-copy > small, .fp-executive-copy > b { display: block; }
.fp-executive-copy > strong { font-size: 13px; }
.fp-executive-copy > small { color: #7a8794; font-size: 10px; font-weight: 500; margin-top: 4px; }
.fp-executive-copy > b { font-size: 16px; margin-top: 5px; overflow-wrap: anywhere; }
.fp-executive-copy > b small { color: #7a8794; font-size: 10px; }
.fp-executive-copy > b > span { border-left: 1px solid #d7dde2; margin: 0 8px; }
.fp-executive-extra { color: #7a8794; display: block; font-size: 10px; font-weight: 500; margin-top: 4px; }
.fp-executive-extra strong { color: #e16a0b; }
.fp-executive-card > em { background: #fff0dc; border-radius: 999px; color: #de6c08; font-size: 9px; font-style: normal; font-weight: 800; padding: 5px 8px; }
.fp-executive-card > i, .fp-product-data-toggle > i {
  border-bottom: 2px solid #82909b;
  border-right: 2px solid #82909b;
  display: block;
  height: 8px;
  transform: rotate(-45deg);
  width: 8px;
}
.fp-product-data-toggle {
  align-items: center;
  background: #205f6d;
  border: 1px solid #174f5c;
  border-radius: 8px;
  box-shadow: 0 7px 16px rgba(32, 95, 109, .2);
  color: #fff;
  display: flex;
  font-size: 15px;
  font-weight: 850;
  gap: 12px;
  justify-content: center;
  margin: 0 16px 18px;
  min-height: 52px;
  width: calc(100% - 32px);
}
.fp-product-data-toggle:hover { background: #174f5c; color: #fff; }
.fp-product-data-toggle > i { border-color: #fff; height: 10px; transform: rotate(45deg); transition: transform .2s ease; width: 10px; }
.fp-product-data-toggle[aria-expanded="true"] > i { transform: rotate(225deg); }
.fp-raw-product-data { border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.fp-raw-product-head { align-items: center; background: #f4f7f8; display: flex; justify-content: space-between; padding: 13px 15px; }
.fp-raw-product-head span, .fp-raw-product-head strong { display: block; }
.fp-raw-product-head span { color: #286b7e; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.fp-raw-product-head strong { font-size: 11px; margin-top: 2px; }
.fp-raw-product-head em { background: #e7edf0; border-radius: 5px; color: #485a65; font-size: 9px; font-style: normal; font-weight: 800; padding: 5px 7px; }
.fp-modern-focus, .fp-modern-stat-grid, .fp-modern-chart, .fp-modern-callout { margin: 0 16px 14px; }
.fp-modern-focus { align-items: center; background: #fff8f2; border: 1px solid #f3b08a; border-radius: 8px; display: grid; gap: 16px; grid-template-columns: 68px minmax(0, 1fr); padding: 16px; }
.fp-modern-focus .fp-focus-icon { font-size: 14px; min-height: 66px; }
.fp-modern-focus small { color: #71808e; display: block; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.fp-modern-focus strong { color: #f06b12; display: block; font-size: 29px; line-height: 1.05; margin-top: 5px; }
.fp-modern-focus p { color: #71808e; font-size: 11px; margin: 5px 0 0; }
.fp-modern-focus.performance { background: #fffbef; border-color: #e9ad20; }
.fp-modern-focus.performance .fp-focus-icon { background: #fff4d6; color: #e39b00; }
.fp-modern-focus.waste { background: #f2f8fc; border-color: #9bc7e4; }
.fp-modern-focus.waste .fp-focus-icon { background: #e2f1fa; color: #23699f; }
.fp-modern-focus.waste strong { color: #23699f; }
.fp-modern-focus.status { background: #fff5f4; border-color: #efaaa5; }
.fp-modern-focus.status .fp-focus-icon { background: #fde4e2; color: #b73530; }
.fp-modern-focus.status strong { color: #b73530; font-size: 22px; }
.fp-modern-focus.related { background: #f7f5ff; border-color: #c9c0f4; }
.fp-modern-focus.related .fp-focus-icon { background: #ebe7ff; color: #6352b8; }
.fp-modern-focus.related strong { color: #6352b8; }
.fp-modern-stat-grid { background: #fff; border: 1px solid #dce2e7; border-radius: 8px; display: grid; padding: 12px 4px; }
.fp-modern-stat-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fp-modern-stat-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-modern-stat-grid > div { border-right: 1px solid #e0e5e9; min-width: 0; padding: 3px 9px; }
.fp-modern-stat-grid > div:last-child { border-right: 0; }
.fp-modern-stat-grid span, .fp-modern-stat-grid strong { display: block; overflow-wrap: anywhere; }
.fp-modern-stat-grid span { color: #71808e; font-size: 9px; }
.fp-modern-stat-grid strong { color: #0d1f3c; font-size: 15px; margin-top: 7px; }
.fp-modern-chart { background: #fff; border: 1px solid #dce2e7; border-radius: 8px; padding: 15px; }
.fp-modern-chart h3, .fp-modern-callout h3 { color: #0d1f3c; font-size: 13px; margin: 0; }
.fp-modern-help { color: #71808e; font-size: 10px; line-height: 1.4; margin: 4px 0 12px; }
.fp-bar-chart { align-items: end; border-bottom: 1px solid #cfd7dd; display: flex; gap: 54px; height: 170px; justify-content: center; margin-top: 12px; padding: 28px 20px 0; }
.fp-bar-chart > div { align-items: center; display: flex; flex: 0 1 100px; flex-direction: column; height: 100%; justify-content: end; }
.fp-bar-chart b { background: #3778e9; border-radius: 5px 5px 0 0; display: block; max-height: 100%; min-height: 8px; position: relative; width: 64px; }
.fp-bar-chart b.counted { background: #27ad69; }
.fp-waste-chart b.incomplete { background: #347db2; }
.fp-waste-chart b.complete { background: #28a66a; }
.fp-bar-chart b span { color: #1c2d45; font-size: 9px; left: 50%; position: absolute; top: -19px; transform: translateX(-50%); white-space: nowrap; }
.fp-bar-chart small { color: #627282; font-size: 9px; margin: 6px -15px -20px; white-space: nowrap; }
.fp-yield-gauge { height: 190px; margin: 4px auto 0; max-width: 320px; position: relative; }
.fp-yield-gauge svg { display: block; height: 150px; margin: auto; width: 100%; }
.fp-yield-gauge path { fill: none; stroke-linecap: round; stroke-width: 13; }
.fp-yield-gauge path.track { stroke: #e1e6e9; }
.fp-yield-gauge path.value { stroke: #f27310; }
.fp-yield-gauge circle.marker { fill: #0d1f3c; stroke: #fff; stroke-width: 2; }
.fp-yield-gauge > div { bottom: 31px; left: 50%; position: absolute; text-align: center; transform: translateX(-50%); }
.fp-yield-gauge > div strong, .fp-yield-gauge > div span { display: block; }
.fp-yield-gauge > div strong { color: #f06b12; font-size: 23px; }
.fp-yield-gauge > div span { color: #71808e; font-size: 9px; }
.fp-yield-gauge > small { color: #71808e; font-size: 9px; position: absolute; right: 12%; top: 35px; }
.fp-yield-gauge > small b { color: #0d1f3c; display: block; font-size: 11px; }
.fp-modern-callout { align-items: center; background: #fff; border: 1px solid #dce2e7; border-radius: 8px; display: grid; gap: 14px; grid-template-columns: 48px minmax(0, 1fr); padding: 13px; }
.fp-modern-callout > span { align-items: center; background: #fff0e4; border-radius: 8px; color: #ef6d10; display: flex; font-size: 19px; font-weight: 900; height: 48px; justify-content: center; }
.fp-modern-callout.info > span { background: #e7f0fa; color: #3c6fa4; }
.fp-modern-callout p, .fp-modern-callout ul { color: #617183; font-size: 10px; line-height: 1.45; margin: 5px 0 0; }
.fp-modern-callout ul { padding-left: 16px; }
.fp-modern-callout li::marker { color: #ef6d10; }
.fp-modern-callout.status > span { background: #fde4e2; color: #b73530; }
.fp-related-list { display: flex; flex-wrap: wrap; gap: 7px; }
.fp-related-list span { background: #f0edff; border: 1px solid #d7d0f8; border-radius: 6px; color: #5546a2; font-size: 10px; font-weight: 750; padding: 7px 9px; }
.fp-factor-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-factor-grid > div { background: #fff7f0; border-radius: 7px; display: grid; gap: 4px; grid-template-columns: 28px minmax(0, 1fr); padding: 11px; }
.fp-factor-grid > div.performance { background: #fffae9; }
.fp-factor-grid > div.waste { background: #fff0f0; }
.fp-factor-grid > div > span { align-items: center; color: #ef6d10; display: flex; font-size: 9px; font-weight: 900; grid-row: 1 / span 2; }
.fp-factor-grid small { color: #71808e; font-size: 9px; }
.fp-factor-grid strong { color: #0d1f3c; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 1220px) {
  .fp-file-grid, .fp-source-strip, .fp-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-file-grid.fp-file-grid-single { grid-template-columns: minmax(0, 1fr); }
  .fp-workspace { grid-template-columns: 1fr; }
  .fp-detail-panel { max-height: none; position: static; }
}
@media (max-width: 760px) {
  .fp-page-head, .fp-upload-heading, .fp-upload-footer { align-items: stretch; flex-direction: column; }
  .fp-page-actions, .fp-page-actions form, .fp-page-actions button { width: 100%; }
  .fp-file-grid, .fp-source-strip, .fp-kpi-grid { grid-template-columns: 1fr; }
  .fp-selected-files { grid-template-columns: 1fr; }
  .fp-filter-bar { grid-template-columns: 1fr 1fr; }
  .fp-search-field { grid-column: 1 / -1; }
  .fp-product-table-head { display: none; }
  .fp-product-row { grid-template-columns: minmax(0, 1fr) auto; }
  .fp-row-indicator { grid-column: 1 / -1; }
  .fp-product-row em { grid-column: 1; grid-row: 3; justify-self: start; }
  .fp-row-arrow { grid-column: 2; grid-row: 1 / span 3; }
  .fp-list-heading > span { display: none; }
  .fp-detail-head { align-items: flex-start; flex-direction: column; }
  .fp-detail-impact { text-align: left; }
  .fp-detail-impact span { margin-left: 0; }
  .fp-modern-product-head h2 { font-size: 20px; }
  .fp-modern-economic-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .fp-modern-economic-hero > strong { font-size: 23px; }
  .fp-modern-economic-hero > small { grid-column: 2; text-align: right; }
  .fp-executive-card { grid-template-columns: 46px minmax(0, 1fr) auto 9px; }
  .fp-executive-card > em { display: none; }
  .fp-modern-stat-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-modern-stat-grid.four > div:nth-child(2) { border-right: 0; }
  .fp-modern-stat-grid.four > div:nth-child(n+3) { border-top: 1px solid #e0e5e9; padding-top: 9px; }
  .fp-factor-grid { grid-template-columns: 1fr; }
}

/* Estado operativo */
.ops-status-hero {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid #16794f;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  min-height: 126px;
  padding: 22px 24px;
}
.ops-status-hero.is-warning { border-left-color: #bd7900; }
.ops-status-hero.is-error { border-left-color: #c13a33; }
.ops-status-copy { min-width: 0; }
.ops-status-kicker, .ops-panel-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ops-status-copy h1 { font-size: 27px; line-height: 1.15; margin: 6px 0 5px; }
.ops-status-copy p { color: var(--muted); font-size: 14px; margin: 0; }
.ops-status-indicator {
  align-items: center;
  display: grid;
  gap: 3px;
  grid-template-columns: auto auto;
  justify-items: start;
  min-width: 145px;
}
.ops-status-indicator strong { font-size: 17px; }
.ops-status-indicator small { color: var(--muted); font-size: 11px; grid-column: 1 / -1; }
.ops-status-dot, .ops-mini-dot, .ops-module-dot {
  background: #16794f;
  border-radius: 50%;
  display: inline-block;
  height: 9px;
  width: 9px;
}
.is-warning .ops-status-dot, .ops-health-card.warning .ops-mini-dot, .ops-module-row.warning .ops-module-dot { background: #bd7900; }
.is-error .ops-status-dot, .ops-health-card.error .ops-mini-dot, .ops-module-row.error .ops-module-dot { background: #c13a33; }
.ops-mini-dot.neutral { background: #64818a; }
.ops-health-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}
.ops-health-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  min-height: 68px;
  padding: 12px;
}
.ops-health-card > div { display: grid; gap: 2px; min-width: 0; }
.ops-health-card > div span { color: var(--muted); font-size: 11px; }
.ops-health-card > div strong { font-size: 16px; overflow-wrap: anywhere; }
.ops-health-card form { margin-left: auto; }
.ops-dashboard-grid {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
}
.ops-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 16px;
}
.ops-panel header, .usage-compact-panel header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 11px;
}
.ops-panel h2, .usage-compact-panel h2 { font-size: 17px; margin: 3px 0 0; }
.ops-panel header > small { color: var(--muted); font-size: 11px; }
.ops-module-list { display: grid; gap: 1px; }
.ops-module-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  min-height: 52px;
  padding: 7px 0;
}
.ops-module-row:first-child { border-top: 0; }
.ops-module-row > div { display: grid; gap: 2px; min-width: 0; }
.ops-module-row strong { font-size: 13px; }
.ops-module-row small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-module-row > span:last-child { color: #16794f; font-size: 11px; font-weight: 800; }
.ops-module-row.warning > span:last-child { color: #a06700; }
.ops-module-row.error > span:last-child { color: #b72e28; }
.ops-automation-list { display: grid; }
.ops-automation-list > div { border-top: 1px solid var(--line); display: grid; gap: 3px; padding: 10px 0; }
.ops-automation-list > div:first-child { border-top: 0; padding-top: 0; }
.ops-automation-list > div:last-child { padding-bottom: 0; }
.ops-automation-list span { color: var(--muted); font-size: 11px; font-weight: 700; }
.ops-automation-list strong { font-size: 15px; }
.ops-automation-list small { color: var(--muted); font-size: 11px; }
.ops-provider-strip {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  margin-top: 14px;
  min-height: 58px;
  padding: 9px 16px;
}
.ops-provider-strip > span { color: var(--muted); font-size: 12px; font-weight: 800; margin-right: auto; }
.ops-provider-strip > div { align-items: baseline; display: flex; gap: 5px; }
.ops-provider-strip strong { font-size: 20px; }
.ops-provider-strip small { color: var(--muted); font-size: 11px; font-weight: 700; }

/* Registro de uso compacto */
.usage-compact-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.usage-compact-head h1 { font-size: 25px; margin: 3px 0; }
.usage-compact-head p { color: var(--muted); font-size: 13px; margin: 0; }
.usage-metrics { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.usage-metrics span {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  padding: 7px 9px;
  white-space: nowrap;
}
.usage-metrics b { color: var(--text); font-size: 14px; }
.usage-metrics .usage-metrics-time { color: var(--muted); }
.usage-filters.usage-filters-compact { grid-template-columns: 130px minmax(170px, 1fr) minmax(220px, 1.3fr); margin-bottom: 12px; }
.usage-filters.usage-filters-compact select { min-height: 34px; padding: 6px 9px; }
.usage-compact-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.usage-compact-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-width: 0; padding: 14px; }
.usage-compact-panel header > div > span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.usage-compact-panel header > small { color: var(--muted); font-size: 10px; }
.usage-compact-list { display: grid; }
.usage-compact-list > div {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(75px, .7fr) minmax(0, 1.55fr) 30px minmax(115px, .9fr);
  min-height: 38px;
  padding: 6px 0;
}
.usage-compact-list.recent > div { grid-template-columns: minmax(115px, .9fr) minmax(75px, .7fr) minmax(0, 1.5fr); }
.usage-compact-list span, .usage-compact-list small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-compact-list strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-compact-list b { font-size: 13px; text-align: center; }
.usage-compact-list .usage-person { color: var(--text); font-weight: 700; }

@media (max-width: 900px) {
  .ops-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-dashboard-grid, .usage-compact-grid { grid-template-columns: 1fr; }
  .usage-compact-head { align-items: flex-start; flex-direction: column; }
  .usage-metrics { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .ops-status-hero { align-items: flex-start; flex-direction: column; gap: 16px; padding: 18px; }
  .ops-status-copy h1 { font-size: 23px; }
  .ops-health-grid { grid-template-columns: 1fr; }
  .ops-provider-strip { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .ops-provider-strip > span { margin-right: 100%; }
  .usage-filters.usage-filters-compact { grid-template-columns: 1fr; }
  .usage-compact-list > div, .usage-compact-list.recent > div { grid-template-columns: minmax(0, 1fr) auto; }
  .usage-compact-list > div > small, .usage-compact-list > div > b { display: none; }
}