:root { --brand:#0f766e; --brand-dark:#115e59; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
.brand-bg { background: linear-gradient(135deg, #0f766e 0%, #115e59 55%, #064e3b 100%); }
.card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; }
.btn { transition: all .15s ease; }
.btn:hover { transform: translateY(-1px); }
.nav-link { cursor:pointer; }
.nav-link.active { background: rgba(255,255,255,.16); border-left:3px solid #5eead4; }
.fade-in { animation: fade .25s ease; }
@keyframes fade { from {opacity:0; transform:translateY(6px);} to {opacity:1; transform:none;} }
.badge { font-size:.7rem; padding:2px 8px; border-radius:999px; font-weight:600; }
table tbody tr:hover { background:#f8fafc; }
.modal-overlay { background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
input,select,textarea { outline:none; }
input:focus,select:focus,textarea:focus { border-color:#0f766e; box-shadow:0 0 0 3px rgba(15,118,110,.12); }

/* ---------------------------------------------------------------------------
   MOBILE-FRIENDLY / RESPONSIVE
   The app is a sidebar layout on desktop and a slide-in drawer on mobile.
   These rules apply to past, current and future views consistently.
--------------------------------------------------------------------------- */

/* Sidebar slide-in drawer on small screens */
#sidebar { transition: transform .25s ease; }
@media (max-width: 1023px) {
  #sidebar { transform: translateX(-100%); width: 16rem; z-index: 50; }
  #sidebar.open { transform: translateX(0); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
  #mainArea { margin-left: 0 !important; }
}
#sidebarBackdrop { transition: opacity .2s ease; }

/* Tap targets: comfortable size on touch devices */
@media (max-width: 640px) {
  .btn { min-height: 42px; }
  input, select, textarea { font-size: 16px; } /* prevents iOS zoom-on-focus */
  #content { padding: 1rem !important; }
  header.app-header { padding: .75rem 1rem !important; }
}

/* Responsive tables: switch to stacked "cards" on phones.
   Each <td> shows its column label via data-label. Add the
   .responsive-table class to a <table> and data-label to each <td>. */
@media (max-width: 768px) {
  table.responsive-table thead { display: none; }
  table.responsive-table tbody tr {
    display: block; border: 1px solid #e2e8f0; border-radius: 12px;
    margin-bottom: .75rem; padding: .25rem .5rem; background: #fff;
  }
  table.responsive-table tbody td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; text-align: right; padding: .5rem .25rem !important;
    border: none !important; border-bottom: 1px solid #f1f5f9 !important;
    white-space: normal !important;
  }
  table.responsive-table tbody tr td:last-child { border-bottom: none !important; }
  table.responsive-table tbody td::before {
    content: attr(data-label); font-weight: 600; color: #64748b;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
    text-align: left; flex: 0 0 auto;
  }
  table.responsive-table tbody td:empty { display: none; }
}

/* Grids that should collapse to one column on phones */
@media (max-width: 640px) {
  .grid.sm-collapse { grid-template-columns: 1fr !important; }
}

/* Persistent, bold field labels above inputs */
.field-label { display:block; font-weight:600; font-size:.8rem; color:#334155; margin-bottom:.25rem; }
.field-group { margin-bottom: .85rem; }

/* Permission checkbox grid */
.perm-grid { display:grid; grid-template-columns: 1fr 1fr; gap:.4rem .9rem; }
@media (max-width: 640px) { .perm-grid { grid-template-columns: 1fr; } }
.perm-section { border:1px solid #e2e8f0; border-radius:10px; padding:.75rem; margin-bottom:.6rem; }
.perm-section h5 { font-weight:700; font-size:.75rem; text-transform:uppercase; color:#0f766e; margin-bottom:.4rem; }
.perm-item { display:flex; align-items:center; gap:.5rem; font-size:.85rem; }

/* Camera capture frames */
.cam-frame { background:#0f172a; overflow:hidden; position:relative; }
.cam-frame video, .cam-frame img { width:100%; height:100%; object-fit:cover; }
.step-dot { width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700; }
.step-done { background:#10b981;color:#fff; }
.step-active { background:#0f766e;color:#fff; }
.step-todo { background:#e2e8f0;color:#94a3b8; }