@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Variáveis ───────────────────────────── */
:root {
  --blue-900: #0f2d55;
  --blue-800: #1a4b8c;
  --blue-700: #1F4E79;
  --blue-600: #2563c8;
  --blue-100: #dbeafe;
  --blue-50:  #eff6ff;

  --accent:       #f59e0b;
  --accent-dark:  #d97706;
  --accent-light: #fef3c7;

  --green:        #10b981;
  --green-light:  #d1fae5;
  --red:          #ef4444;
  --red-light:    #fee2e2;
  --purple:       #8b5cf6;
  --purple-light: #ede9fe;
  --orange:       #f97316;
  --orange-light: #ffedd5;

  --bg:       #f0f4f8;
  --card-bg:  #ffffff;
  --border:   #e2e8f0;
  --text:     #1e293b;
  --muted:    #64748b;
  --light:    #94a3b8;

  --sidebar-w: 240px;
  --topbar-h:  60px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.10);
  --shadow-xl:  0 16px 40px rgba(0,0,0,.12);

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
}

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

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Layout com sidebar ──────────────────── */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--blue-900);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  transition: transform .25s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
}

.brand-logo-surface { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; }
.brand-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.sidebar-brand .brand-logo-surface { width: 158px; padding: 0; }
.sidebar-close-btn { position: absolute; top: .65rem; right: .55rem; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; color: rgba(255,255,255,.58); background: rgba(255,255,255,.07); cursor: pointer; transition: .15s; }
.sidebar-close-btn:hover { color: #fff; background: rgba(255,255,255,.14); }
.sidebar-close-btn .ui-icon { width: .9rem; height: .9rem; }

.sidebar-nav { flex: 1; padding: .75rem 0; }

.nav-section-label {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(255,255,255,.3);
  padding: .75rem 1.25rem .25rem;
}

.sidebar-nav a {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem 1.25rem;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .85rem; font-weight: 500;
  border-radius: 0;
  transition: all .15s;
  position: relative;
}

.sidebar-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.sidebar-nav a.active {
  color: #fff;
  background: rgba(255,255,255,.12);
}

.sidebar-nav a.active::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.nav-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .8;
  font-size: .95rem;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.user-chip {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem;
  background: rgba(255,255,255,.07);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s;
}

.user-chip:hover { background: rgba(255,255,255,.13); }

.user-avatar {
  width: 30px; height: 30px;
  background: var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: white;
  flex-shrink: 0;
}

.user-info { min-width: 0; flex: 1; }
.user-name  { font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role  { font-size: .68rem; color: rgba(255,255,255,.45); text-transform: capitalize; }

.logout-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.4); font-size: .85rem; padding: 0 .2rem;
  transition: color .15s;
}
.logout-btn:hover { color: rgba(255,255,255,.8); }

.mobile-bottom-nav, .sidebar-overlay { display: none; }
.mobile-menu-btn { width: 38px; height: 38px; display: grid; place-items: center; margin-right: .2rem; border: 0; border-radius: 9px; color: var(--blue-700); background: var(--blue-50); cursor: pointer; transition: .15s; }
.mobile-menu-btn:hover { background: #e2edf7; }

/* ── Main content ────────────────────────── */
.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left .25s ease;
}

.sidebar-hidden .sidebar { transform: translateX(-100%); }
.sidebar-hidden .main { margin-left: 0; }

/* ── Topbar ──────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.75rem;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}

.topbar-title {
  font-size: 1rem; font-weight: 700; color: var(--blue-700);
  display: flex; align-items: center; gap: .5rem;
}

.topbar-actions { display: flex; align-items: center; gap: .75rem; }

/* ── Page content ────────────────────────── */
.page-content {
  flex: 1;
  padding: 1.5rem 1.75rem;
  max-width: 1400px;
}

.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem;
}

.page-header h1 {
  font-size: 1.25rem; font-weight: 700; color: var(--blue-700);
}

.page-header p {
  font-size: .8rem; color: var(--muted); margin-top: .15rem;
}

/* ── Cards ───────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}

.card-title {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .4rem;
}

.card-title-lg {
  font-size: .95rem; font-weight: 700; color: var(--blue-700);
  margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: .5rem;
}

/* ── KPI Grid ────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kpi-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
}

.kpi-card.blue::before   { background: var(--blue-700); }
.kpi-card.accent::before { background: var(--accent); }
.kpi-card.green::before  { background: var(--green); }
.kpi-card.purple::before { background: var(--purple); }
.kpi-card.red::before    { background: var(--red); }

.kpi-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: .65rem;
}

.kpi-card.blue   .kpi-icon { background: var(--blue-50);   }
.kpi-card.accent .kpi-icon { background: var(--accent-light); }
.kpi-card.green  .kpi-icon { background: var(--green-light);  }
.kpi-card.purple .kpi-icon { background: var(--purple-light); }
.kpi-card.red    .kpi-icon { background: var(--red-light);    }

.kpi-value {
  font-size: 1.75rem; font-weight: 800; line-height: 1;
  margin-bottom: .25rem;
}

.kpi-card.blue   .kpi-value { color: var(--blue-700); }
.kpi-card.accent .kpi-value { color: var(--accent-dark); }
.kpi-card.green  .kpi-value { color: var(--green); }
.kpi-card.purple .kpi-value { color: var(--purple); }
.kpi-card.red    .kpi-value { color: var(--red); }

.kpi-label {
  font-size: .72rem; color: var(--muted);
  font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
}

/* ── Charts row ──────────────────────────── */
.charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

/* ── Form ────────────────────────────────── */
.form-label {
  font-size: .75rem; font-weight: 600;
  color: var(--blue-700); margin-bottom: .3rem;
  display: block; letter-spacing: .01em;
}

.form-control, .form-select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .7rem;
  font-size: .875rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

.form-control:focus, .form-select:focus {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(37,99,200,.12);
}

.form-control::placeholder { color: var(--light); }

textarea.form-control { resize: vertical; min-height: 80px; }

.form-row { display: grid; gap: .85rem; margin-bottom: .85rem; }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.form-row.cols-6 { grid-template-columns: repeat(6, 1fr); }

.form-section {
  margin-bottom: 1.5rem;
}

.form-section-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--blue-700);
  border-left: 3px solid var(--accent);
  padding-left: .6rem;
  margin-bottom: .85rem;
  display: flex; align-items: center; gap: .4rem;
}

/* ── Checkbox ────────────────────────────── */
.check-item {
  display: flex; align-items: center; gap: .4rem;
  cursor: pointer; font-size: .85rem;
}

.check-item input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: var(--blue-700);
  cursor: pointer;
}

/* ── Buttons ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: 7px; border: none;
  font-size: .83rem; font-weight: 600;
  font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}

.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--blue-700); color: #fff;
  box-shadow: 0 1px 3px rgba(31,78,121,.35);
}
.btn-primary:hover { background: var(--blue-800); box-shadow: 0 3px 8px rgba(31,78,121,.35); }

.btn-success {
  background: var(--green); color: #fff;
  box-shadow: 0 1px 3px rgba(16,185,129,.35);
}
.btn-success:hover { background: #059669; }

.btn-warning {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 3px rgba(245,158,11,.35);
}
.btn-warning:hover { background: var(--accent-dark); }

.btn-danger {
  background: var(--red); color: #fff;
  box-shadow: 0 1px 3px rgba(239,68,68,.35);
}
.btn-danger:hover { background: #dc2626; }

.btn-secondary { background: #e2e8f0; color: var(--text); }
.btn-secondary:hover { background: #cbd5e1; }

.btn-outline {
  background: transparent; color: var(--blue-700);
  border: 1.5px solid var(--blue-700);
}
.btn-outline:hover { background: var(--blue-700); color: #fff; }

.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: #f1f5f9; color: var(--text); }

.btn-sm { padding: .35rem .75rem; font-size: .78rem; border-radius: 6px; }
.btn-lg { padding: .7rem 1.5rem; font-size: .95rem; }
.btn-icon { padding: .5rem; border-radius: 6px; }

.btn-bar {
  display: flex; gap: .75rem; flex-wrap: wrap;
  align-items: center; margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

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

table.listing {
  width: 100%; border-collapse: collapse;
  font-size: .84rem;
}

table.listing thead th {
  background: #f8fafc;
  color: var(--muted);
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .6rem .85rem;
  text-align: left;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

table.listing tbody td {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

table.listing tbody tr:last-child td { border-bottom: none; }
table.listing tbody tr:hover td { background: #f8fafc; }

table.listing .actions {
  display: flex; gap: .35rem; flex-wrap: wrap;
}

/* ── Dynamic table ───────────────────────── */
.dyn-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.dyn-table th {
  background: var(--blue-700); color: #fff;
  padding: .5rem .6rem; text-align: center;
  font-size: .72rem; font-weight: 600;
}
.dyn-table td { padding: .25rem .3rem; border-bottom: 1px solid var(--border); }
.dyn-table td input, .dyn-table td select {
  width: 100%; border: 1.5px solid var(--border);
  border-radius: 4px; padding: .28rem .4rem;
  font-size: .82rem; font-family: inherit;
}
.dyn-table td input:focus, .dyn-table td select:focus {
  outline: none; border-color: var(--blue-600);
}
.dyn-table tr:hover td { background: #f0f5fb; }
.btn-remove-row {
  background: none; border: none; color: var(--red);
  cursor: pointer; font-size: 1rem; padding: 0 .2rem; line-height: 1;
}

/* ── Badges ──────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .55rem; border-radius: 50px;
  font-size: .7rem; font-weight: 700; line-height: 1.4;
  white-space: nowrap;
}

.badge-blue   { background: var(--blue-100);  color: var(--blue-700); }
.badge-green  { background: var(--green-light); color: #065f46; }
.badge-orange { background: var(--orange-light); color: #9a3412; }
.badge-red    { background: var(--red-light);  color: #991b1b; }
.badge-gray   { background: #f1f5f9; color: var(--muted); }
.badge-purple { background: var(--purple-light); color: #5b21b6; }

/* ── Progress ────────────────────────────── */
.progress-bar-wrap {
  background: #e2e8f0; border-radius: 99px;
  height: 8px; overflow: hidden;
}

.progress-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width .5s ease;
}

/* ── Login ───────────────────────────────── */
.login-wrapper {
  min-height: 100vh; display: flex;
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 60%, #1d4ed8 100%);
}

.login-left {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 3rem 4rem;
  color: white; display: none;
}

.login-right {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem; width: 100%; max-width: 480px;
  min-height: 100vh;
}

.login-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 2.5rem 2.25rem; width: 100%; max-width: 400px;
  box-shadow: var(--shadow-xl);
}

.login-logo {
  text-align: center; margin-bottom: 2rem;
}

.login-logo-circle {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; color: #fff;
  margin: 0 auto .75rem;
  box-shadow: 0 8px 20px rgba(31,78,121,.35);
}

.login-logo .brand  { font-size: 1.4rem; font-weight: 800; color: var(--blue-700); }
.login-logo .brand span { color: var(--accent); }
.login-logo p { color: var(--muted); font-size: .82rem; margin-top: .25rem; }

/* ── Toast ───────────────────────────────── */
.toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 9999; display: flex; flex-direction: column; gap: .5rem;
}

.toast {
  background: var(--text); color: #fff;
  padding: .75rem 1.2rem; border-radius: 9px;
  font-size: .85rem; min-width: 260px; max-width: 380px;
  box-shadow: var(--shadow-lg);
  animation: slideIn .2s ease;
  display: flex; align-items: flex-start; gap: .5rem;
}

.toast.success { background: #064e3b; border-left: 4px solid var(--green); }
.toast.error   { background: #7f1d1d; border-left: 4px solid var(--red); }

@keyframes slideIn {
  from { transform: translateX(80px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Spinner ─────────────────────────────── */
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Modal ───────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,45,85,.55);
  backdrop-filter: blur(2px);
  z-index: 500; display: flex;
  align-items: center; justify-content: center;
  padding: 1rem;
}

.modal-box {
  background: #fff; border-radius: var(--radius-lg);
  padding: 1.75rem; width: 100%; max-width: 500px;
  box-shadow: var(--shadow-xl);
  max-height: 90vh; overflow-y: auto;
}

.modal-box h3 {
  font-size: 1.05rem; font-weight: 700;
  color: var(--blue-700); margin-bottom: 1.25rem;
}

/* ── Section header ──────────────────────── */
.section-header {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--blue-700);
  border-left: 3px solid var(--accent); padding-left: .6rem;
  margin: 1.5rem 0 .85rem;
  display: flex; align-items: center; gap: .4rem;
}

/* ── Stat chip ───────────────────────────── */
.stat-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .35rem .7rem;
  font-size: .8rem; color: var(--muted);
}

.stat-chip strong { color: var(--text); }

/* ── Info list ───────────────────────────── */
.info-list { width: 100%; }
.info-list tr td { padding: .3rem 0; vertical-align: top; }
.info-list tr td:first-child { color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; width: 42%; padding-right: .75rem; }
.info-list tr td:last-child  { font-size: .88rem; color: var(--text); font-weight: 500; }

/* ── Croqui table ────────────────────────── */
.croqui-table th { font-size: .7rem; }
.croqui-table td input { text-align: center; }

/* ── Nav user (old compat) ───────────────── */
.nav-user { display: none; }
.navbar   { display: none; }

/* ── Breadcrumb ──────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--muted);
  margin-bottom: .5rem;
}

.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue-700); }
.breadcrumb span { color: var(--light); }

/* ── Empty state ─────────────────────────── */
.empty-state {
  text-align: center; padding: 3rem 1rem;
  color: var(--muted);
}

.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.empty-state p { font-size: .88rem; }

/* ── Responsive ──────────────────────────── */
@media (max-width: 1024px) {
  .charts-row { grid-template-columns: 1fr; }
  .two-col    { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3, .form-row.cols-4, .form-row.cols-6 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-2 { grid-template-columns: 1fr; }
  .page-content { padding: 1rem; }
  .login-right { max-width: 100%; }
  .mobile-menu-btn { width: 38px; height: 38px; display: grid; place-items: center; margin-right: .2rem; border: 0; border-radius: 9px; color: var(--blue-700); background: var(--blue-50); font-size: 1rem; cursor: pointer; }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; border: 0; background: rgba(12,32,54,.48); backdrop-filter: blur(2px); }
  .sidebar-overlay.open { display: block; }
  .sidebar { z-index: 100; }
  .mobile-bottom-nav { position: fixed; z-index: 80; left: .75rem; right: .75rem; bottom: max(.65rem, env(safe-area-inset-bottom)); min-height: 62px; display: flex; justify-content: space-around; padding: .4rem .45rem; border: 1px solid rgba(210,220,229,.9); border-radius: 17px; background: rgba(255,255,255,.94); box-shadow: 0 10px 35px rgba(15,45,85,.18); backdrop-filter: blur(12px); }
  .mobile-bottom-nav a, .mobile-bottom-nav button { min-width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem; border: 0; border-radius: 10px; color: var(--muted); background: transparent; text-decoration: none; font-family: inherit; }
  .mobile-bottom-nav a > span, .mobile-bottom-nav button > span { font-size: 1rem; }
  .mobile-bottom-nav small { font-size: .58rem; font-weight: 700; }
  .mobile-bottom-nav a.active { color: var(--blue-700); background: var(--blue-50); }
  body:not(.field-app) .page-content { padding-bottom: 6rem; }
}

@media (min-width: 1200px) {
  .login-left { display: flex; }
  .login-wrapper { justify-content: flex-end; }
  .login-right { max-width: 520px; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3, .form-row.cols-4, .form-row.cols-6 { grid-template-columns: 1fr; }
  .kpi-value { font-size: 1.4rem; }
}

/* ── Reset Modal options ─────────────────── */
.reset-opt {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.reset-opt:hover { border-color: #fca5a5; background: #fff5f5; }
.reset-opt.selected { border-color: #f87171; background: #fef2f2; }
.reset-opt input[type="radio"] { display: none; }
.reset-opt-icon { font-size: 1.1rem; flex-shrink: 0; }

/* ── Aplicativo de campo / Parte diária guiada ───────────────────────────── */
.field-app {
  --field-navy: #12345b;
  --field-blue: #1d5f9f;
  --field-sky: #e9f3fb;
  --field-orange: #f28c28;
  --field-green: #16866b;
  background: #f4f7fa;
}

.field-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 2rem 3rem;
}

.field-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.field-header h1 { color: var(--field-navy); font-size: 1.55rem; line-height: 1.2; }
.field-subtitle { color: var(--muted); font-size: .82rem; margin-top: .2rem; }
.eyebrow { color: var(--field-orange); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.field-back {
  width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 12px;
  display: grid; place-items: center; background: #fff; color: var(--field-navy);
  font-size: 1.8rem; line-height: 1; text-decoration: none; box-shadow: var(--shadow-sm);
}

.save-state {
  border-radius: 999px; padding: .38rem .72rem; font-size: .7rem; font-weight: 700;
  color: var(--muted); background: #fff; border: 1px solid var(--border); white-space: nowrap;
}
.save-state[data-state="saved"] { color: #08725a; background: #e7f7f1; border-color: #b8e5d6; }
.save-state[data-state="saving"] { color: #1d5f9f; background: #edf6fc; border-color: #c5dff2; }
.save-state[data-state="dirty"] { color: #97600b; background: #fff8e8; border-color: #f5ddb0; }
.save-state[data-state="offline"] { color: #6b4db4; background: #f3effd; border-color: #ded4f6; }
.save-state[data-state="error"] { color: #a12929; background: #fff0f0; border-color: #f4c4c4; }

.wizard-progress {
  display: flex; align-items: center; padding: 1rem 1.25rem; margin-bottom: 1.75rem;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 5px 20px rgba(18,52,91,.05);
}
.wizard-step { display: flex; align-items: center; gap: .7rem; border: 0; background: none; color: var(--light); font-family: inherit; text-align: left; cursor: pointer; }
.wizard-step > span:last-child { display: flex; flex-direction: column; }
.wizard-step strong { color: inherit; font-size: .82rem; }
.wizard-step small { color: var(--light); font-size: .66rem; margin-top: .05rem; }
.step-number { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid #cbd5e1; font-weight: 800; font-size: .73rem; flex: 0 0 auto; }
.wizard-step.active { color: var(--field-blue); }
.wizard-step.active .step-number { color: #fff; background: var(--field-blue); border-color: var(--field-blue); box-shadow: 0 0 0 5px var(--field-sky); }
.wizard-step.complete { color: var(--field-green); }
.wizard-step.complete .step-number { font-size: 0; color: #fff; background: var(--field-green); border-color: var(--field-green); }
.wizard-step.complete .step-number::before { content: ''; width: 8px; height: 4px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-1px); }
.step-line { height: 1px; background: var(--border); flex: 1; margin: 0 1.15rem; }

.wizard-page { display: none; animation: fieldFade .22s ease; }
.wizard-page.active { display: block; }
@keyframes fieldFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.section-heading { display: flex; align-items: flex-start; gap: .9rem; margin: 0 0 1.2rem; }
.section-heading h2, .operation-hero h2 { color: var(--field-navy); font-size: 1.35rem; line-height: 1.25; }
.section-heading p, .operation-hero p { color: var(--muted); font-size: .8rem; margin-top: .2rem; }
.section-index { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--field-navy); font-size: .7rem; font-weight: 800; box-shadow: 0 5px 14px rgba(18,52,91,.2); }

.identity-card {
  display: flex; align-items: center; gap: .85rem; color: #fff; margin-bottom: 1rem; padding: 1rem 1.15rem;
  border-radius: 14px; background: linear-gradient(115deg, #12345b, #1c527f); box-shadow: 0 8px 20px rgba(18,52,91,.14);
}
.identity-avatar { width: 45px; height: 45px; border-radius: 13px; background: rgba(255,255,255,.15); display: grid; place-items: center; font-size: .78rem; font-weight: 800; border: 1px solid rgba(255,255,255,.18); }
.identity-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.identity-main small { color: rgba(255,255,255,.58); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.identity-main strong { font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-main span { color: rgba(255,255,255,.65); font-size: .7rem; }
.verified-pill { font-size: .66rem; font-weight: 700; padding: .35rem .6rem; border-radius: 99px; color: #d8fff2; background: rgba(26,185,137,.18); border: 1px solid rgba(102,231,189,.28); }

.field-card { padding: 1.25rem; border-radius: 14px; box-shadow: 0 4px 16px rgba(18,52,91,.045); }
.field-card-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.field-card-title h3 { color: var(--field-navy); font-size: .93rem; }
.field-card-title > span { color: var(--muted); font-size: .68rem; }
.field-card-title > span.done { color: var(--field-green); font-weight: 700; }
.readonly-field { color: #516071; background: #f7f9fb; border-style: dashed; }
.control-lg { min-height: 47px; }
.compact-row { margin-top: 1rem; margin-bottom: 0; }
.field-app .form-control, .field-app .form-select { border-color: #d7e0e8; padding: .68rem .75rem; border-radius: 9px; }
.field-app .form-control:focus, .field-app .form-select:focus { border-color: var(--field-blue); box-shadow: 0 0 0 3px rgba(29,95,159,.1); }
.field-app .form-control.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,.1); }

.time-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border: 1px solid #c9dfef; border-radius: 12px; background: #f3f9fd; }
.time-suggestion > div { display: flex; flex-direction: column; }
.time-suggestion small { color: var(--muted); font-size: .67rem; text-transform: uppercase; letter-spacing: .05em; }
.time-input { border: 0; outline: 0; color: var(--field-navy); background: transparent; font-family: inherit; font-size: 1.45rem; font-weight: 800; width: 130px; }
.btn-now { min-height: 42px; padding: .55rem .8rem; border: 1px solid #b8d5e9; border-radius: 9px; color: var(--field-blue); background: #fff; font-family: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }

.meter-grid, .end-shift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.meter-field { display: block; }
.meter-field > span { display: block; margin-bottom: .35rem; color: var(--field-navy); font-size: .72rem; font-weight: 700; }
.meter-field > div { display: flex; align-items: center; border: 1.5px solid #d7e0e8; border-radius: 10px; background: #fff; transition: .15s; }
.meter-field > div:focus-within { border-color: var(--field-blue); box-shadow: 0 0 0 3px rgba(29,95,159,.1); }
.meter-field input { width: 100%; min-width: 0; border: 0; outline: 0; padding: .75rem; background: transparent; color: var(--text); font: 700 .95rem inherit; }
.meter-field em { padding-right: .75rem; color: var(--light); font-size: .75rem; font-style: normal; }

.checklist-card { padding-bottom: .5rem; }
.checklist-list { border-top: 1px solid var(--border); }
.checklist-row { display: grid; grid-template-columns: 30px minmax(190px, 1fr) auto; align-items: center; gap: .75rem; min-height: 70px; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.check-order { color: #a1adba; font-size: .65rem; font-weight: 800; }
.check-description { display: flex; flex-direction: column; }
.check-description strong { color: #263b50; font-size: .78rem; }
.check-description small { color: var(--muted); font-size: .66rem; margin-top: .1rem; }
.check-options { display: flex; align-items: center; gap: .35rem; }
.check-choice input { position: absolute; opacity: 0; pointer-events: none; }
.check-choice { min-width: 58px; height: 42px; display: flex; align-items: center; justify-content: center; gap: .28rem; border: 1px solid #dbe3ea; border-radius: 9px; background: #fff; color: var(--muted); cursor: pointer; font-size: .7rem; transition: .15s; }
.check-choice span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #eef2f6; font-size: .67rem; font-weight: 800; }
.check-choice em { font-style: normal; }
.check-choice.ok:has(input:checked) { color: #08725a; border-color: #62c5a7; background: #e9f9f3; }
.check-choice.ok:has(input:checked) span { color: #fff; background: var(--field-green); }
.check-choice.attention:has(input:checked) { color: #9b5e09; border-color: #eeb450; background: #fff8e8; }
.check-choice.attention:has(input:checked) span { color: #fff; background: #e59a20; }
.check-choice.na:has(input:checked) { color: #536170; border-color: #aebac5; background: #f2f5f7; }
.attention-card { border-left: 3px solid var(--field-orange); }

.wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.wizard-actions.align-end { justify-content: flex-end; }
.btn-app { min-height: 46px; border-radius: 10px; padding: .7rem 1.15rem; }

.operation-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.shift-chip { display: flex; align-items: center; gap: .6rem; min-width: 150px; padding: .65rem .85rem; border: 1px solid #bfe1d5; border-radius: 11px; color: #397263; background: #eefaf6; font-size: .65rem; }
.shift-chip strong { color: #126d57; font-size: .82rem; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #16a37c; box-shadow: 0 0 0 5px rgba(22,163,124,.12); }

.status-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .65rem; margin-bottom: 1rem; }
.status-option { min-height: 72px; display: flex; align-items: center; gap: .65rem; padding: .65rem; border: 1.5px solid #dce4eb; border-radius: 12px; background: #fff; color: var(--text); font-family: inherit; text-align: left; cursor: pointer; transition: .16s; }
.status-option:hover { border-color: #b8c7d4; transform: translateY(-1px); }
.status-option.active { border-color: var(--field-blue); box-shadow: 0 0 0 3px rgba(29,95,159,.08); }
.status-option > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.status-option strong { color: var(--field-navy); font-size: .73rem; }
.status-option small { color: var(--muted); font-size: .61rem; margin-top: .1rem; }
.status-icon { width: 33px; height: 33px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; font-size: .95rem; font-weight: 800; }
.status-icon.production { color: #1764a4; background: #e7f2fb; }
.status-icon.stopped { color: #a86505; background: #fff2d9; }
.status-icon.fueling { color: #6250aa; background: #efecfb; }
.status-icon.maintenance { color: #a34343; background: #fcecec; }
.status-icon.finished { color: #08725a; background: #e7f7f1; }

.activity-panel { display: none; padding: 1.2rem; border: 1px solid var(--border); border-radius: 15px; background: #fff; box-shadow: 0 5px 20px rgba(18,52,91,.05); animation: fieldFade .18s ease; }
.activity-panel.active { display: block; }
.activity-title, .activity-title > div { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.activity-title { margin-bottom: 1rem; }
.activity-title h3 { color: var(--field-navy); font-size: .9rem; }
.activity-title > strong { color: var(--field-blue); font-size: 1.05rem; }
.activity-mark { width: 4px; height: 22px; border-radius: 4px; }
.activity-mark.production { background: #2580c3; }.activity-mark.stopped { background: #e7a12f; }.activity-mark.fueling { background: #7867bd; }.activity-mark.maintenance { background: #c45a5a; }.activity-mark.finished { background: var(--field-green); }
.panel-help { color: var(--muted); font-size: .72rem; margin: -.35rem 0 1rem; }

.holes-list { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.hole-card { display: grid; grid-template-columns: minmax(85px, .8fr) .7fr 1fr; grid-template-rows: auto 5px; align-items: center; gap: .5rem 1rem; padding: .8rem; border: 1px solid #e0e7ed; border-radius: 11px; background: #fbfcfd; cursor: text; }
.hole-card.completed { border-color: #a7deca; background: #f5fcf9; }
.hole-id, .hole-expected, .hole-input { display: flex; flex-direction: column; }
.hole-card small { color: var(--muted); font-size: .6rem; }
.hole-card strong { color: var(--field-navy); font-size: .76rem; }
.hole-expected em { margin-top: .08rem; color: var(--muted); font-size: .58rem; font-style: normal; }
.hole-card.in-progress { border-color: #f0cc8b; background: #fffbf2; }
.hole-card.locked { border-color: #a7deca; background: #f2faf7; cursor: default; }
.hole-card.locked .hole-expected em { color: var(--field-green); font-weight: 700; }
.hole-card.locked .hole-input input { color: #6b847c; background: #e8f2ee; cursor: not-allowed; }
.hole-input input { width: 100%; max-width: 100px; min-height: 38px; padding: .35rem .5rem; border: 1.5px solid #ccd8e2; border-radius: 8px; outline: 0; color: var(--field-blue); background: #fff; font: 800 .92rem inherit; }
.hole-input input:focus { border-color: var(--field-blue); }
.hole-progress { grid-column: 1 / -1; height: 5px; border-radius: 9px; background: #e5ebf0; position: relative; }
.hole-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--field-green); transition: width .25s; }
.hole-progress em { position: absolute; right: 0; bottom: 8px; color: var(--muted); font-size: .58rem; font-style: normal; }
.loading-block, .empty-inline { grid-column: 1/-1; padding: 2rem; border: 1px dashed #cfd9e2; border-radius: 10px; color: var(--muted); text-align: center; font-size: .78rem; }

.stop-list { display: flex; flex-direction: column; gap: .65rem; }
.stop-card { padding: .75rem; border: 1px solid #e0e7ed; border-radius: 11px; background: #fbfcfd; }
.stop-reason { display: grid; grid-template-columns: 130px 1fr 35px; align-items: center; gap: .65rem; }
.stop-reason > label { color: var(--field-navy); font-size: .72rem; font-weight: 700; }
.remove-stop { width: 32px; height: 32px; border: 0; border-radius: 8px; color: #a84646; background: #fdeeee; font-size: 1.05rem; cursor: pointer; }
.stop-details { display: none; grid-template-columns: 1fr 1fr .7fr; align-items: end; gap: .65rem; padding-top: .7rem; margin-top: .7rem; border-top: 1px dashed #d9e1e8; }
.stop-details.open { display: grid; }
.stop-details label { display: flex; flex-direction: column; gap: .25rem; color: var(--muted); font-size: .65rem; }
.stop-duration { min-height: 42px; display: flex; flex-direction: column; justify-content: center; padding: .35rem .7rem; border-radius: 8px; color: var(--muted); background: #eef3f6; }
.stop-duration small { font-size: .58rem; text-transform: uppercase; }.stop-duration strong { color: var(--field-navy); font-size: .75rem; }

.subsection-title { margin: 1.1rem 0 .7rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--field-navy); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.material-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.material-row { min-height: 57px; display: grid; grid-template-columns: 1fr 115px 125px 160px; align-items: center; gap: .7rem; border-bottom: 1px solid var(--border); }
.material-row > strong { color: var(--field-navy); font-size: .76rem; }
.switch-label { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .67rem; cursor: pointer; }
.switch-label input { position: absolute; opacity: 0; }
.switch-label span { width: 30px; height: 18px; padding: 2px; border-radius: 99px; background: #cdd6de; transition: .15s; }
.switch-label span::before { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: .15s; }
.switch-label input:checked + span { background: var(--field-green); }.switch-label input:checked + span::before { transform: translateX(12px); }
.end-time { margin: 1rem 0; }
.compact-checklist .checklist-row { min-height: 62px; }
.top-space { margin-top: 1rem; }
.operation-actions > div { display: flex; gap: .65rem; }

@media (max-width: 1100px) {
  .status-grid { grid-template-columns: repeat(3, 1fr); }
  .holes-list { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .field-app .topbar { display: none; }
  .field-app .mobile-bottom-nav { display: none; }
  .field-shell { padding: calc(.9rem + env(safe-area-inset-top)) .9rem calc(6.5rem + env(safe-area-inset-bottom)); }
  .field-header { grid-template-columns: 38px minmax(0, 1fr); gap: .7rem; }
  .field-header h1 { font-size: 1.15rem; }
  .field-back { width: 38px; height: 38px; border-radius: 10px; }
  .save-state { grid-column: 2; justify-self: start; margin-top: -.45rem; padding: .23rem .55rem; }
  .wizard-progress { position: sticky; top: 0; z-index: 40; margin: 0 -.9rem 1.2rem; padding: .75rem .9rem; border-width: 0 0 1px; border-radius: 0; }
  .wizard-step > span:last-child { display: none; }
  .wizard-step { flex: 0 0 auto; }
  .step-number { width: 30px; height: 30px; }
  .step-line { margin: 0 .65rem; }
  .section-heading h2, .operation-hero h2 { font-size: 1.1rem; }
  .field-card { padding: 1rem; }
  .identity-card { padding: .85rem; }
  .verified-pill { display: none; }
  .meter-grid, .end-shift-grid { grid-template-columns: 1fr 1fr; }
  .checklist-row { grid-template-columns: 24px 1fr; padding: .8rem 0; }
  .check-options { grid-column: 2; }
  .check-choice { flex: 1; min-width: 0; min-height: 43px; }
  .operation-hero { align-items: flex-end; }
  .status-grid { display: flex; overflow-x: auto; margin-right: -.9rem; padding: 0 .9rem .5rem 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .status-grid::-webkit-scrollbar { display: none; }
  .status-option { flex: 0 0 150px; scroll-snap-align: start; }
  .activity-panel { margin: 0 -.15rem; padding: 1rem; }
  .material-row { grid-template-columns: 1fr 1fr; padding: .65rem 0; }
  .material-row .form-select { grid-column: 1 / -1; }
  .operation-actions { align-items: stretch; flex-direction: column; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; margin: 0; padding: .7rem max(.8rem, env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left)); border-top: 1px solid var(--border); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); box-shadow: 0 -6px 20px rgba(18,52,91,.08); }
  .operation-actions > .btn-secondary { display: none; }
  .operation-actions > div { width: 100%; }
  .operation-actions .btn { flex: 1; justify-content: center; }
}

@media (max-width: 520px) {
  .field-shell { padding-left: .75rem; padding-right: .75rem; }
  .wizard-progress { margin-left: -.75rem; margin-right: -.75rem; padding-left: 1.2rem; padding-right: 1.2rem; }
  .form-row.cols-2, .field-app .form-row.cols-3, .field-app .form-row.cols-4 { grid-template-columns: 1fr; }
  .identity-main strong { font-size: .82rem; }
  .time-suggestion { align-items: stretch; }
  .btn-now { align-self: center; }
  .operation-hero { align-items: flex-start; flex-direction: column; }
  .shift-chip { min-width: 0; }
  .hole-card { grid-template-columns: 1fr 1fr; }
  .hole-input { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .hole-input input { min-height: 44px; }
  .stop-reason { grid-template-columns: 1fr 35px; }
  .stop-reason > label { grid-column: 1 / -1; }
  .stop-details.open { grid-template-columns: 1fr 1fr; }
  .stop-duration { grid-column: 1 / -1; }
  .check-description small { display: none; }
  .check-choice em { font-size: .6rem; }
  .wizard-actions:not(.operation-actions) .btn { flex: 1; justify-content: center; }
}

/* ── Login moderno ─────────────────────────────────────────────────────── */
.login-page-modern { background: #edf3f7; min-height: 100vh; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, 1.15fr) minmax(440px, .85fr); }
.auth-showcase { min-height: 100vh; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 2.2rem 3.2rem; color: #fff; background: linear-gradient(145deg, #0d2948 0%, #123b66 52%, #176394 100%); }
.auth-showcase::before { content: ''; position: absolute; width: 480px; height: 480px; right: -220px; top: -190px; border: 90px solid rgba(255,255,255,.035); border-radius: 50%; }
.auth-showcase::after { content: ''; position: absolute; width: 350px; height: 350px; left: -180px; bottom: -230px; border: 70px solid rgba(242,140,40,.12); border-radius: 50%; }
.showcase-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom right, #000, transparent 72%); }
.showcase-brand, .mobile-brand { position: relative; z-index: 1; display: flex; align-items: center; }
.showcase-brand .brand-logo-surface { width: min(195px, 34vw); padding: 0; }
.showcase-content { position: relative; z-index: 1; width: 100%; max-width: 610px; margin: auto 0; }
.showcase-pill { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; padding: .4rem .7rem; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.showcase-pill i { width: 7px; height: 7px; border-radius: 50%; background: #5de0ae; box-shadow: 0 0 0 4px rgba(93,224,174,.12); }
.showcase-content h1 { max-width: 590px; font-size: clamp(2.2rem, 4vw, 3.9rem); line-height: 1.05; letter-spacing: -.045em; }
.showcase-content > p { max-width: 520px; margin: 1.4rem 0 2rem; color: rgba(255,255,255,.66); font-size: .95rem; line-height: 1.65; }
.showcase-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.showcase-features > div { min-height: 105px; padding: .85rem; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.055); backdrop-filter: blur(5px); }
.showcase-features > div > span { display: block; color: #f5a850; font-size: .62rem; font-weight: 800; margin-bottom: .65rem; }
.showcase-features p { display: flex; flex-direction: column; }.showcase-features strong { font-size: .72rem; }.showcase-features small { margin-top: .2rem; color: rgba(255,255,255,.48); font-size: .61rem; line-height: 1.35; }
.showcase-footer { position: relative; z-index: 1; color: rgba(255,255,255,.34); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.auth-panel { min-width: 0; display: grid; place-items: center; min-height: 100vh; padding: 2.2rem; background: #f6f8fa; }
.auth-card-modern { width: 100%; max-width: 405px; min-width: 0; }
.mobile-brand { display: none; justify-content: center; margin-bottom: 2rem; padding: .8rem 1rem; border-radius: 14px; background: linear-gradient(145deg, #0d2948, #174e7e); box-shadow: 0 10px 24px rgba(18,52,91,.14); }
.mobile-brand .brand-logo-surface { width: min(175px, 58vw); background: transparent; }
.auth-heading { margin-bottom: 2rem; }
.auth-heading > p { color: #e17e1e; font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.auth-heading h2 { color: #12345b; font-size: 1.75rem; letter-spacing: -.025em; margin: .35rem 0 .35rem; }
.auth-heading > span { color: var(--muted); font-size: .78rem; }
.auth-field { display: block; margin-bottom: 1rem; }
.auth-field > span { display: block; margin-bottom: .38rem; color: #29445e; font-size: .7rem; font-weight: 700; }
.auth-field > div { min-height: 52px; display: flex; align-items: center; border: 1.5px solid #d6e0e8; border-radius: 11px; background: #fff; transition: .15s; }
.auth-field > div:focus-within { border-color: #1d5f9f; box-shadow: 0 0 0 4px rgba(29,95,159,.08); }
.auth-field input { flex: 1; min-width: 0; align-self: stretch; border: 0; outline: 0; padding: 0 .65rem; color: #20364b; background: transparent; font: .85rem inherit; }
.auth-field input::placeholder { color: #a0adba; }
.field-icon { width: 38px; display: grid; place-items: center; color: #7590a8; font-size: .43rem; font-style: normal; }.lock-icon { font-size: .55rem; }
.auth-field button { align-self: stretch; border: 0; padding: 0 .8rem; color: #1d5f9f; background: transparent; font: 700 .65rem inherit; cursor: pointer; }
.auth-submit { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.4rem; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(115deg, #164b7d, #1d6ba8); box-shadow: 0 8px 20px rgba(29,95,159,.22); font: 700 .83rem inherit; cursor: pointer; transition: .15s; }
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 11px 25px rgba(29,95,159,.27); }.auth-submit:disabled { opacity: .65; transform: none; }
.auth-submit b { position: absolute; margin-left: 310px; font-size: 1rem; }
.auth-error { display: none; padding: .7rem; border: 1px solid #f3c4c4; border-radius: 9px; color: #9e3030; background: #fff0f0; font-size: .72rem; text-align: center; }.auth-error.visible { display: block; }
.auth-security { display: flex; align-items: center; gap: .65rem; margin-top: 1.4rem; padding: .7rem .8rem; border: 1px solid #dce8e3; border-radius: 10px; color: #17705b; background: #f3faf7; }
.auth-security > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #2c987c; font-size: .68rem; }
.auth-security p { display: flex; flex-direction: column; }.auth-security strong { font-size: .67rem; }.auth-security small { color: #668479; font-size: .59rem; }
.apk-download { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .7rem; padding: .65rem; border: 1px solid #d8e2e9; border-radius: 10px; color: #31566f; background: #fff; text-decoration: none; }
.apk-download > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #1d5f9f; background: #eaf4fb; font-size: .72rem; font-weight: 800; }.apk-download p { display: flex; flex-direction: column; }.apk-download strong { font-size: .67rem; }.apk-download small { color: #84919c; font-size: .58rem; }
.auth-version { margin-top: 1.4rem; color: #a0acb7; font-size: .62rem; text-align: center; }

@media (max-width: 920px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-showcase { display: none; }
  .auth-panel { width: 100%; max-width: 100vw; overflow: hidden; padding: calc(2rem + env(safe-area-inset-top)) 1.25rem calc(2rem + env(safe-area-inset-bottom)); background: linear-gradient(165deg, #eef5f9, #f9fafb 46%); }
  .mobile-brand { display: flex; }
  .auth-card-modern { width: calc(100vw - 2.5rem); max-width: 405px; padding: 1.5rem; border: 1px solid rgba(218,228,236,.8); border-radius: 20px; background: rgba(255,255,255,.76); box-shadow: 0 18px 45px rgba(18,52,91,.08); backdrop-filter: blur(12px); }
}

@media (max-width: 420px) {
  .auth-panel { align-items: start; padding-top: calc(1.25rem + env(safe-area-inset-top)); }
  .auth-card-modern { padding: 1.25rem; }
  .mobile-brand { margin-bottom: 1.7rem; }
  .auth-heading h2 { font-size: 1.45rem; }
  .auth-submit b { right: 2.5rem; }
}

/* ── Painel do operador ────────────────────────────────────────────────── */
.operator-app { background: #f3f6f9; }
.operator-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.7rem 2rem 7rem; }
.operator-hero { min-height: 150px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; padding: 1.7rem 2rem; border-radius: 20px; color: #fff; background: linear-gradient(115deg, #102f52 0%, #174e7e 60%, #1d6798 100%); box-shadow: 0 12px 30px rgba(18,52,91,.15); position: relative; overflow: hidden; }
.operator-hero::after { content: ''; position: absolute; width: 260px; height: 260px; right: -100px; top: -135px; border: 55px solid rgba(255,255,255,.05); border-radius: 50%; }
.operator-hero > div { position: relative; z-index: 1; }.operator-hero .eyebrow { color: #f5ae5a; }
.operator-hero h1 { margin: .25rem 0; font-size: 1.65rem; letter-spacing: -.025em; }.operator-hero > div > p:last-child { color: rgba(255,255,255,.62); font-size: .78rem; }
.today-card { min-width: 145px; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.today-card > span { font-size: 1.75rem; font-weight: 800; line-height: 1; }.today-card > div { display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.17); padding-left: .8rem; }.today-card strong { font-size: .7rem; letter-spacing: .08em; }.today-card small { color: rgba(255,255,255,.58); font-size: .62rem; text-transform: capitalize; }
.operator-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
.operator-summary > div { min-height: 76px; display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid #dde6ed; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(18,52,91,.035); }
.summary-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; }.summary-icon.blue { color: #1764a4; background: #e8f3fb; }.summary-icon.orange { color: #a7650b; background: #fff2dc; }.summary-icon.green { color: #08725a; background: #e7f7f1; }
.operator-summary p { display: flex; flex-direction: column; }.operator-summary small { color: var(--muted); font-size: .62rem; }.operator-summary strong { color: #12345b; font-size: .92rem; }
.operator-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.operator-section-title h2 { color: #12345b; font-size: 1.05rem; }.operator-section-title p { color: var(--muted); font-size: .68rem; }
#sync-state { display: flex; align-items: center; gap: .4rem; color: #43806f; font-size: .62rem; font-weight: 700; }#sync-state i { width: 6px; height: 6px; border-radius: 50%; background: #20a580; }#sync-state.error { color: #ad4444; }#sync-state.error i { background: #d55a5a; }
.worksites-list { display: flex; flex-direction: column; gap: .9rem; }
.worksite-card { overflow: hidden; border: 1px solid #dce5ec; border-radius: 17px; background: #fff; box-shadow: 0 5px 18px rgba(18,52,91,.045); }
.worksite-card > header { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: 1rem 1.15rem; border-bottom: 1px solid #e6ecf1; background: linear-gradient(to right, #fbfcfd, #fff); }
.worksite-symbol { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: #164a78; font-weight: 900; box-shadow: 0 5px 12px rgba(22,74,120,.18); }
.worksite-card header > div:nth-child(2) { min-width: 0; }.worksite-card header span:first-child { color: #d17b24; font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.worksite-card h3 { overflow: hidden; color: #173957; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }.worksite-card header p { color: var(--muted); font-size: .63rem; }
.active-badge { display: flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: 99px; color: #08725a !important; background: #e9f8f3; font-size: .6rem !important; letter-spacing: 0 !important; text-transform: none !important; }.active-badge i { width: 6px; height: 6px; border-radius: 50%; background: #13a17a; }
.fire-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; padding: .9rem; background: #f7f9fb; }
.fire-card { padding: .95rem; border: 1px solid #dce5ec; border-radius: 13px; background: #fff; }
.fire-top { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }.fire-top > div { display: flex; flex-direction: column; }.fire-top small { color: var(--muted); font-size: .58rem; text-transform: uppercase; }.fire-top strong { color: #12345b; font-size: .9rem; }
.current-status { display: flex; align-items: center; gap: .35rem; padding: .28rem .5rem; border-radius: 99px; color: #1c6399; background: #eaf4fb; font-size: .57rem; font-weight: 700; }.current-status i { width: 6px; height: 6px; border-radius: 50%; background: #2885c2; }.current-status.pending { color: #7a8792; background: #f0f3f5; }.current-status.pending i { background: #9aa7b2; }.current-status.done { color: #08725a; background: #e8f8f2; }.current-status.done i { background: #17a17a; }
.fire-metrics { display: flex; align-items: center; gap: 1rem; margin: .9rem 0 .7rem; }
.progress-ring { width: 62px; height: 62px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(#1d6da7 var(--progress), #e6edf2 0); position: relative; }.progress-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }.progress-ring span { position: relative; z-index: 1; color: #174e7e; font-size: .88rem; font-weight: 800; }.progress-ring small { font-size: .52rem; }
.fire-metrics > div:last-child { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }.fire-metrics p { display: flex; flex-direction: column; }.fire-metrics p span { color: var(--muted); font-size: .57rem; }.fire-metrics p strong { color: #29445e; font-size: .72rem; }
.linear-progress { height: 4px; overflow: hidden; border-radius: 99px; background: #e6edf2; }.linear-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1c659e, #28a180); }
.fire-action { min-height: 40px; display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; padding: .55rem .7rem; border-radius: 9px; color: #fff; background: #1a5c91; font-size: .67rem; font-weight: 700; text-decoration: none; }.fire-action b { font-size: .9rem; }.fire-action.done { color: #08725a; background: #e7f7f1; }
.no-active-fire { grid-column: 1/-1; padding: 1.3rem; border: 1px dashed #d2dce4; border-radius: 10px; color: var(--muted); background: #fff; font-size: .72rem; text-align: center; }
.operator-loading, .operator-empty { padding: 3rem 1rem; border: 1px solid #dce5ec; border-radius: 16px; color: var(--muted); background: #fff; text-align: center; }.spinner.dark { margin-right: .5rem; border-color: #c5d4df; border-top-color: #1d5f9f; }
.operator-empty > span { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto .8rem; border-radius: 16px; color: #1d5f9f; background: #eaf4fb; font-size: 1.3rem; }.operator-empty h3 { color: #12345b; font-size: .95rem; }.operator-empty p { margin: .3rem 0 1rem; font-size: .72rem; }.operator-empty.error > span { color: #a43c3c; background: #fdeeee; }

@media (max-width: 850px) {
  .operator-shell { padding: 1rem 1rem 6.5rem; }
  .fire-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .operator-shell { padding: .75rem .75rem 6.5rem; }
  .operator-hero { min-height: 140px; align-items: flex-start; padding: 1.25rem; border-radius: 16px; }.operator-hero h1 { font-size: 1.3rem; }.operator-hero > div > p:last-child { max-width: 215px; }
  .today-card { min-width: 0; padding: .65rem; }.today-card > span { font-size: 1.3rem; }.today-card small { display: none; }
  .operator-summary { gap: .45rem; }.operator-summary > div { min-width: 0; min-height: 70px; flex-direction: column; align-items: flex-start; justify-content: center; gap: .3rem; padding: .6rem; }.summary-icon { width: 28px; height: 28px; border-radius: 8px; font-size: .72rem; }.operator-summary small { white-space: nowrap; font-size: .52rem; }.operator-summary strong { font-size: .73rem; }
  .operator-section-title p { display: none; }
  .worksite-card > header { grid-template-columns: 38px minmax(0, 1fr); padding: .85rem; }.worksite-symbol { width: 38px; height: 38px; }.active-badge { display: none; }
  .fire-grid { padding: .65rem; }.fire-card { padding: .8rem; }
}

/* ── Histórico responsivo ──────────────────────────────────────────────── */
.history-page .page-header h1 { font-size: 1.45rem; letter-spacing: -.02em; }
.history-filters { border-radius: 15px; box-shadow: 0 5px 18px rgba(18,52,91,.04); }
.history-results { overflow: hidden; border-radius: 15px; box-shadow: 0 5px 18px rgba(18,52,91,.04); }

/* Ajustes e perfis */
.settings-page { max-width: 1100px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.settings-card { min-height: 110px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; align-items: center; gap: 1rem; padding: 1.2rem; border: 1px solid #dfe7ed; border-radius: 15px; color: var(--text); background: #fff; box-shadow: 0 4px 15px rgba(18,52,91,.04); text-decoration: none; transition: .16s; }
.settings-card:hover { transform: translateY(-2px); border-color: #b9cfdf; box-shadow: 0 8px 22px rgba(18,52,91,.08); }
.settings-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; color: var(--blue-700); background: var(--blue-50); }
.settings-icon .ui-icon { width: 1.35rem; height: 1.35rem; }
.settings-card > span:nth-child(2) { display: flex; flex-direction: column; }
.settings-card strong { color: var(--blue-900); font-size: .92rem; }
.settings-card small { margin-top: .2rem; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.settings-arrow { color: #8da2b5; }
.permission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.permission-grid > div { display: flex; flex-direction: column; align-items: flex-start; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #f9fbfc; }
.permission-grid strong { margin-top: .7rem; color: var(--blue-900); font-size: .8rem; }
.permission-grid p { margin-top: .25rem; color: var(--muted); font-size: .69rem; line-height: 1.5; }
.modal-actions { display: flex; gap: .65rem; flex-wrap: wrap; }
.read-only-part .save-state { color: #08725a; background: #e7f7f1; border-color: #b8e5d6; }
.read-only-part input:disabled, .read-only-part select:disabled, .read-only-part textarea:disabled { opacity: .78; cursor: not-allowed; }
.readonly-alert { align-items: center; gap: .8rem; margin-bottom: 1.1rem; padding: .85rem 1rem; border: 1px solid #d7dee5; border-radius: 11px; color: #41566b; background: #f5f7f9; }
.readonly-alert > .ui-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; color: #64748b; }
.readonly-alert > div { display: flex; flex-direction: column; gap: .12rem; }
.readonly-alert strong { color: #263d52; font-size: .8rem; }
.readonly-alert span { color: #6b7d8f; font-size: .7rem; }
.worksite-card.finalized { opacity: .82; }
.worksite-card.finalized header { border-bottom: 1px solid #e1e7ec; }
.inactive-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem; border-radius: 99px; color: #64748b; background: #eef1f4; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.inactive-badge i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
.worksite-readonly { padding: 1rem 1.15rem; color: #6b7d8f; font-size: .72rem; }

/* Acabamento visual compartilhado por administração, obras e cadastros */
.sidebar { background: linear-gradient(180deg, #0d2949 0%, #123a62 72%, #0e3154 100%); box-shadow: 5px 0 25px rgba(10,38,65,.1); }
.sidebar-brand { min-height: 82px; padding: .75rem 1rem; }
.sidebar-nav a { margin: .18rem .65rem; padding: .68rem .72rem; border-radius: 9px; }
.sidebar-nav a.active { background: linear-gradient(90deg, rgba(255,255,255,.13), rgba(255,255,255,.07)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.sidebar-nav a.active::before { left: -.65rem; width: 3px; }
.topbar { border-color: #e6ebef; box-shadow: 0 2px 12px rgba(18,52,91,.045); }
.page-content { width: 100%; }
.page-header h1 { letter-spacing: -.02em; }
.card { border-color: #dfe7ed; border-radius: 14px; box-shadow: 0 4px 15px rgba(18,52,91,.04); }
.btn { min-height: 38px; border-radius: 9px; }
.btn-primary { background: linear-gradient(115deg, #174e7e, #1e679f); }
.form-control, .form-select { min-height: 41px; border-color: #d6e0e8; border-radius: 8px; }
@media (max-width: 700px) {
  .history-page .page-header { margin-bottom: 1rem; }
  .history-page .page-header h1 { font-size: 1.2rem; }
  .history-filters .form-row { grid-template-columns: 1fr 1fr; }
  .history-results .table-wrap { overflow: visible; padding: .65rem; background: #f4f7f9; }
  .history-results table, .history-results tbody, .history-results tr, .history-results td { display: block; width: 100%; }
  .history-results thead { display: none; }
  .history-results tbody { display: flex; flex-direction: column; gap: .65rem; }
  .history-results table.listing tbody tr { overflow: hidden; padding: .6rem .75rem; border: 1px solid #dae4eb; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(18,52,91,.035); }
  .history-results table.listing tbody td { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .38rem 0; border-bottom: 1px solid #edf1f4; text-align: right; }
  .history-results table.listing tbody td::before { content: attr(data-label); color: #738291; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .history-results table.listing tbody td:last-child { border-bottom: 0; }
  .history-results table.listing tbody td:last-child .actions { width: 100%; justify-content: flex-end; }
  .history-results table.listing tbody tr:hover td { background: transparent; }
}
@media (max-width: 470px) {
  .history-filters .form-row { grid-template-columns: 1fr; }
}

/* ── Sistema de ícones vetoriais e responsividade global ─────────────── */
html {
  min-width: 280px;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }

.ui-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
  color: currentColor;
  vertical-align: -.18em;
}
.auth-submit { position: relative; }
.auth-submit b { right: 1rem; margin-left: 0; display: grid; place-items: center; }
.ui-icon-sm { width: .9rem; height: .9rem; }
.ui-icon-lg { width: 1.35rem; height: 1.35rem; }
.icon-label { display: inline-flex; align-items: center; gap: .45rem; }
.nav-icon .ui-icon, .mobile-bottom-nav .ui-icon { width: 1.12rem; height: 1.12rem; }
.logout-btn .ui-icon { width: 1rem; height: 1rem; }
.mobile-menu-btn .ui-icon { width: 1.2rem; height: 1.2rem; }
.kpi-icon .ui-icon { width: 1.25rem; height: 1.25rem; }
.empty-icon .ui-icon { width: 2rem; height: 2rem; }
.empty-state .empty-icon { display: grid; place-items: center; color: #8ba0b3; }
.reset-opt-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px; color: #a23b3b; background: #fff0f0; }
.reset-opt-icon .ui-icon { width: 1rem; height: 1rem; }
.status-icon .ui-icon, .summary-icon .ui-icon { width: 1rem; height: 1rem; }
.btn .ui-icon { width: 1rem; height: 1rem; }
.btn-icon-only { width: 2.5rem; padding-inline: 0; justify-content: center; }
.status-dot { width: .42rem; height: .42rem; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: currentColor; }

.main, .page-content, .card, .table-wrap, .form-row > *, .page-header > *, .topbar-title { min-width: 0; }
.page-content { margin-inline: auto; }
.topbar-title { overflow: hidden; }
.topbar-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
.card-title, .card-title-lg { flex-wrap: wrap; }
.card-title .ui-icon, .card-title-lg .ui-icon { color: var(--blue-600); }
.table-wrap { width: 100%; scrollbar-width: thin; scrollbar-color: #b8c6d2 transparent; }
table.listing { min-width: 620px; }
.modal-box { width: min(100%, 520px); max-height: calc(100dvh - 2rem); overflow-y: auto; }
#modal-reset { padding: .75rem; overflow-y: auto; }
#modal-reset > div { max-height: calc(100dvh - 1.5rem); overflow-y: auto !important; }
.page-wrapper { width: min(100%, 1180px); margin-inline: auto; padding: 1.5rem clamp(.85rem, 3vw, 2rem) 3rem; }
.detail-summary-grid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem .75rem; border-bottom: 1px solid var(--border); }
.card-head > * { min-width: 0; }

@media (max-width: 1100px) {
  .sidebar { width: min(84vw, 280px); transform: translateX(-100%); box-shadow: 12px 0 36px rgba(7,25,43,.24); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .mobile-menu-btn { width: 40px; height: 40px; display: grid; place-items: center; margin-right: .25rem; border: 0; border-radius: 10px; color: var(--blue-700); background: var(--blue-50); cursor: pointer; }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; border: 0; background: rgba(8,25,42,.52); backdrop-filter: blur(3px); }
  .sidebar-overlay.open { display: block; }
  .mobile-bottom-nav { position: fixed; z-index: 80; left: .75rem; left: max(.75rem, env(safe-area-inset-left)); right: .75rem; right: max(.75rem, env(safe-area-inset-right)); bottom: .65rem; bottom: max(.65rem, env(safe-area-inset-bottom)); min-height: 64px; display: flex; justify-content: space-around; gap: .2rem; padding: .4rem; border: 1px solid rgba(210,220,229,.9); border-radius: 18px; background: rgba(255,255,255,.95); box-shadow: 0 12px 36px rgba(15,45,85,.18); backdrop-filter: blur(14px); }
  .mobile-bottom-nav a, .mobile-bottom-nav button { min-width: 56px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; padding: .25rem .4rem; border: 0; border-radius: 11px; color: var(--muted); background: transparent; text-decoration: none; font-family: inherit; }
  .mobile-bottom-nav small { font-size: .58rem; font-weight: 700; }
  .mobile-bottom-nav a.active { color: var(--blue-700); background: var(--blue-50); }
  body:not(.field-app) .page-content { padding-bottom: 6rem; }
  .field-app .mobile-bottom-nav { display: none; }
  .sidebar-brand .brand-logo-surface { width: 150px; }
}

@media (max-width: 720px) {
  .topbar { height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(.85rem, env(safe-area-inset-right)) 0 max(.85rem, env(safe-area-inset-left)); }
  .topbar-title { font-size: .9rem; }
  .page-content { padding: 1rem max(.85rem, env(safe-area-inset-right)) 1rem max(.85rem, env(safe-area-inset-left)); }
  .page-header { align-items: stretch; margin-bottom: 1rem; }
  .page-header > div:first-child { flex: 1 1 100%; }
  .page-header h1 { font-size: 1.12rem; }
  .page-header-actions { width: 100%; justify-content: stretch; }
  .page-header-actions .btn { flex: 1 1 auto; justify-content: center; }
  .card { padding: 1rem; }
  .charts-row, .two-col { gap: .85rem; }
  .form-row { gap: .7rem; }
  .btn-bar { align-items: stretch; }
  .btn-bar .btn { flex: 1 1 145px; justify-content: center; }
  .toast-container { left: .75rem; right: .75rem; bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
  .toast { width: 100%; }
  .history-results table.listing { min-width: 0; }
  .detail-summary-grid { grid-template-columns: 1fr; gap: .85rem; margin-bottom: .85rem; }
  .card-head { padding: .9rem 1rem .7rem; flex-wrap: wrap; }
  .permission-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .kpi-grid { gap: .65rem; }
  .kpi-card { padding: .95rem; }
  .kpi-icon { width: 34px; height: 34px; }
  .kpi-label { font-size: .64rem; }
  .page-header-actions, .page-header-actions .btn { width: 100%; }
  .modal-overlay { padding: .65rem; align-items: flex-end; }
  .modal-box { width: 100%; max-height: calc(100dvh - 1.3rem); border-radius: 16px 16px 12px 12px; }
  .wizard-actions:not(.operation-actions) { align-items: stretch; flex-direction: column-reverse; }
  .wizard-actions:not(.operation-actions) .btn { width: 100%; }
  .page-wrapper { padding-top: 1rem; }
  .page-wrapper > div:first-child { align-items: flex-start !important; flex-wrap: wrap; }
  .field-card-title { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .activity-title { align-items: flex-start; flex-wrap: wrap; }
  .table-wrap:has(.mobile-card-table) { overflow: visible; padding: .65rem; background: #f4f7f9; }
  table.mobile-card-table { min-width: 0; }
  .mobile-card-table thead { display: none; }
  .mobile-card-table tbody { display: grid; gap: .65rem; }
  .mobile-card-table tbody tr { display: block; overflow: hidden; padding: .55rem .75rem; border: 1px solid #dae4eb; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(18,52,91,.035); }
  .mobile-card-table tbody td[data-label] { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid #edf1f4; text-align: right; }
  .mobile-card-table tbody td[data-label]::before { content: attr(data-label); color: #738291; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
  .mobile-card-table tbody td[data-label]:last-child { border-bottom: 0; }
  .mobile-card-table tbody td[colspan] { display: block; width: 100%; border: 0; }
  .mobile-card-table .actions { justify-content: flex-end; }
  .mobile-card-table tbody tr:hover td { background: transparent; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-card { min-height: 96px; padding: 1rem; }
}

@media (max-width: 350px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .mobile-bottom-nav { left: .35rem; left: max(.35rem, env(safe-area-inset-left)); right: .35rem; right: max(.35rem, env(safe-area-inset-right)); }
  .mobile-bottom-nav a, .mobile-bottom-nav button { min-width: 0; flex: 1; padding-inline: .15rem; }
  .mobile-bottom-nav small { font-size: .53rem; }
  .operation-actions .btn { padding-inline: .4rem; font-size: .68rem; white-space: normal; text-align: center; }
}

@media (max-width: 380px) {
  .operator-hero { flex-direction: column; }
  .today-card { align-self: stretch; }
  .operator-summary small { white-space: normal; line-height: 1.2; }
}

@media (hover: none) and (pointer: coarse) {
  .btn, .form-control, .form-select, .check-item { min-height: 44px; }
  .sidebar-nav a { min-height: 46px; }
  .btn:active { transform: scale(.985); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}