/* =========================================================
   THEME TOKENS
   Dark theme is the sizing baseline.
   Light theme ONLY changes colors (not sizes).
   ========================================================= */
:root {
  /* Colors — Dark (baseline) */
  --bg:#0b0f14;
  --panel:#151a22;
  --card:#151a22;
  --muted:#9aa4b2;
  --text:#e6edf3;
  --border:#1f2a37;
  --border-strong:#2a374a;
  --accent:#3b82f6;
  --accent-weak:#0b0f14; /* dark: banner uses main bg */
  --input-bg:#0f1520;
  --input-border:#263244;

  /* Sizing (shared by both themes) */
  --ctl-font-size:14px;
  --ctl-pad-y:6px;
  --ctl-pad-x:8px;
  --ctl-border-width:1px;
  --ctl-radius:8px;
  --panel-radius:10px;
  --row-gap:8px;
  --field-gap:6px;
  --field-pad:8px;
  --header-pad-y:12px;
  --header-pad-x:16px;

  /* Misc */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), white 70%);
  --danger:#b42318;
  --danger-weak:#2b0c0a;
}

/* Light theme — COLORS ONLY (no size overrides) */
[data-theme="light"] {
  /* Core palette */
  --bg:            #e6efff;       /* requested light page background */
  --panel:         #ffffff;
  --card:          #ffffff;
  --input-bg:      #ffffff;

  --text:          #0b1220;
  --muted:         #475569;

  --border:        #c9d4e7;       /* slightly darker borders/lines */
  --border-strong: #9fb2d6;

  --accent:        #155eef;
  --accent-weak:   #e6efff;       /* banner matches page background */

  --danger:        #b42318;
  --danger-weak:   #fee4e2;

  --input-border:  #d1d5db;
}

/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */
*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

header{
  padding:var(--header-pad-y) var(--header-pad-x);
  border-bottom:var(--ctl-border-width) solid var(--border);
  display:flex; gap:12px; flex-wrap:wrap;
  align-items:flex-end; /* tidy bottom alignment */
}

main{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:12px;
  padding:12px;
}

/* Prevent grid children from forcing overflow */
main > * { min-width: 0; }

.panel{
  border:var(--ctl-border-width) solid var(--border);
  border-radius:var(--panel-radius);
  overflow:hidden;
  background:var(--panel);
  min-width: 0;
}
.panel .body{ padding:10px; }

/* =========================================================
   HEADER LAYOUT (labels on the LEFT of fields)
   ========================================================= */
.header-right{
  margin-left:auto;
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}

/* Make each <label> inline row: "Text  [input]" */
/* CHANGED: apply to all labels inside header, not only direct children */
header label{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;   /* keep label text on one line */
}

/* 25% narrower widths (as requested earlier) */
/* CHANGED: apply to inputs/selects inside any header label */
header label > input,
header label > select{
  width: clamp(120px, 15vw, 180px);
  max-width: 100%;
  box-sizing: border-box;
}

/* "Load form" dropdown also reduced by ~25% */
header > select[title="Load form"]{
  width: clamp(135px, 18vw, 210px);
  max-width: 100%;
  box-sizing: border-box;
}

header > button,
.header-right > button{
  align-self: flex-end;
}

/* Ensure header never causes overflow */
header > * { min-width: 0; }

/* =========================================================
   FORMS & CONTROLS — unified sizing
   ========================================================= */
.row{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* shrink safely */
  gap:var(--row-gap);
}

label{ display:grid; gap:4px; } /* default vertical label layout elsewhere */

input,select,button,textarea{
  font-size:var(--ctl-font-size);
  padding:var(--ctl-pad-y) var(--ctl-pad-x);
  border-radius:var(--ctl-radius);
  border:var(--ctl-border-width) solid var(--input-border);
  line-height:1.25;
}

input,select,textarea{
  background:var(--input-bg);
  color:var(--text);
}
input::placeholder, textarea::placeholder{ color:var(--muted); }

/* Date inputs: desktop shows a calendar icon on the native picker indicator (interactive); mobile hides icons entirely */
input[type="date"]::-webkit-calendar-picker-indicator{
  margin:0;
  padding:0;
  width:18px;
  height:18px;
  background-color:var(--muted);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%0A%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%2F%3E%0A%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%2F%3E%0A%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:18px 18px;
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%0A%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%2F%3E%0A%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%2F%3E%0A%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%2F%3E%0A%3C%2Fsvg%3E");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:18px 18px;
  cursor:pointer;
}
input[type="date"]::-webkit-inner-spin-button{ display:none; }

@media (max-width: 720px), (pointer: coarse) {
  input[type="date"]::-webkit-calendar-picker-indicator{
    display:none;
    opacity:0;
  }
}


button{
  background:var(--input-bg);
  color:var(--text);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .02s, box-shadow .15s ease;
}
button:hover{ border-color:var(--accent); }
button:active{ transform: translateY(1px); }

/* Primary buttons — standard blue across both themes */
[data-theme] .primary{
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
}
[data-theme] .primary:hover{
  background: color-mix(in oklab, #0d6efd, black 10%);
  border-color: color-mix(in oklab, #0d6efd, black 10%);
}
[data-theme] .primary:active{
  background: color-mix(in oklab, #0d6efd, black 15%);
  border-color: color-mix(in oklab, #0d6efd, black 15%);
}
[data-theme] .primary:focus{
  box-shadow: 0 0 0 3px color-mix(in oklab, #0d6efd, white 70%);
  outline:none;
}

/* =========================================================
   LINKS — accessible, readable, and distinct when visited
   ========================================================= */
a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover{
  text-decoration-thickness: 2px;
}
a:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
  background: color-mix(in oklab, var(--accent), transparent 92%);
}

/* Keep links readable even in muted text blocks */
.muted a,
.muted a:visited{
  color: var(--accent);
}

/* Distinct visited colors for each theme (higher contrast) */
[data-theme="light"] a:visited{
  color: #6b21a8; /* deep purple on light bg */
}
[data-theme="dark"] a:visited{
  color: #c084fc; /* lilac on dark bg */
}

/* Specific tweak for the inline admin link */
a.admin-link{
  font-weight: 600;
}

/* =========================================================
   Field “cards” in Form Builder
   ========================================================= */
.field{
  display:grid;
  gap:var(--field-gap);
  border:var(--ctl-border-width) dashed var(--border);
  border-radius:var(--ctl-radius);
  padding:var(--field-pad);
  margin-bottom:8px;
  overflow:hidden; /* keep inner content from spilling */
}

/* Make inputs/selects respect their container width */
.field label > input,
.field label > select,
.field label > textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.field input[type="number"] {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Field title banners (both themes) */
.field-title{
  font-weight:600;
  border-radius:8px;
  padding:8px 10px;
  margin-bottom:10px;
  border:1px solid var(--border-strong);
  background:var(--accent-weak); /* uses theme token */
  color:var(--text);
}

/* GPS block */
fieldset{
  border:var(--ctl-border-width) solid var(--border);
  border-radius:10px;
}
legend{ color:var(--muted); padding:0 6px; }

/* Code blocks */
pre{
  background:#0a0f1a;
  color:#bdfcff;
  border-radius:var(--ctl-radius);
  border:var(--ctl-border-width) solid var(--border);
  padding:10px;
}

/* Tables */
table{ width:100%; border-collapse:collapse; }
th,td{ padding:6px 8px; }
th{ text-align:left; border-bottom:var(--ctl-border-width) solid var(--border); }
tr{ border-top:var(--ctl-border-width) solid var(--border); }

/* =========================================================
   Section titles + Submissions underline (both themes)
   ========================================================= */
.section-title,
.panel .body h4{
  margin:0 0 8px 0;
  font-weight:700;
  color:var(--text);
  position:relative;
}

.section-title::after,
.panel .body h4::after{
  content:"";
  display:block;
  height:2px;
  width:28px;
  margin-top:4px;
  border-radius:2px;
}

/* Light: solid accent */
[data-theme="light"] .section-title::after,
[data-theme="light"] .panel .body h4::after{
  background: var(--accent);
}

/* Dark: lifted accent for contrast */
[data-theme="dark"] .section-title::after,
[data-theme="dark"] .panel .body h4::after{
  background: color-mix(in oklab, var(--accent), white 25%);
}

/* =========================================================
   Submissions filter bar alignment (immediately after h4)
   ========================================================= */
.panel .body h4 + *{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}

/* Keep Submissions labels VERTICAL so header change doesn't affect them */
.panel .body h4 + * > label{
  display:grid;
  gap:4px;
}

.panel .body h4 + * > label > input,
.panel .body h4 + * > label > select{
  width: clamp(120px, 15vw, 180px); /* match header field widths */
  max-width: 100%;
  box-sizing: border-box;
}

.panel .body h4 + * > button{
  align-self:flex-end;
}

/* Muted text */
.muted{ color:var(--muted); font-size:12px; }

/* Focus ring */
input:focus, select:focus, textarea:focus, button:focus{
  outline:none;
  box-shadow: var(--focus-ring);
}

/* =========================================================
   THEME-SPECIFIC SURFACES
   ========================================================= */
[data-theme="light"] body { background: var(--bg); color: var(--text); }
[data-theme="light"] .panel { background: var(--panel); border-color: var(--border); }
[data-theme="light"] .field { background: var(--card); border-color: var(--border); }
[data-theme="light"] fieldset { border-color: var(--border); }
[data-theme="light"] legend { color: var(--muted); }

/* Inputs */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--input-border);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #64748b; }
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus { border-color: var(--accent); }

/* Buttons in light theme (non-primary baseline) */
[data-theme="light"] button {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="light"] button:hover { border-color: var(--border-strong); }

/* Dividers */
[data-theme="light"] hr { border-color: var(--border); }

/* =========================================================
   DANGER / DELETE BUTTONS — THEME-SPECIFIC
   ========================================================= */

/* Light theme — unchanged */
[data-theme="light"] button[title~="Delete"],
[data-theme="light"] button[data-variant="danger"] {
  background: #fee4e2;    /* light red surface */
  color: #7a271a;         /* deep red text */
  border-color: #ffd7d4;
}
[data-theme="light"] button[title~="Delete"]:hover,
[data-theme="light"] button[data-variant="danger"]:hover {
  background: #ffd9d6;
  border-color: #ffb3ad;
}
[data-theme="light"] button[title~="Delete"]:active,
[data-theme="light"] button[data-variant="danger"]:active {
  background: #ffcfc9;
  border-color: #ffa79f;
}
[data-theme="light"] button[title~="Delete"]:focus,
[data-theme="light"] button[data-variant="danger"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, #fee4e2, white 60%);
}

/* Dark theme — improved scheme for your dark mode */
[data-theme="dark"] button[title~="Delete"],
[data-theme="dark"] button[data-variant="danger"] {
  background: var(--danger-weak); /* #2b0c0a */
  color: color-mix(in oklab, var(--danger), white 35%);   /* readable red */
  border-color: color-mix(in oklab, var(--danger), white 10%);
}
[data-theme="dark"] button[title~="Delete"]:hover,
[data-theme="dark"] button[data-variant="danger"]:hover {
  background: color-mix(in oklab, var(--danger-weak), var(--danger) 25%);
  border-color: color-mix(in oklab, var(--danger), white 15%);
}
[data-theme="dark"] button[title~="Delete"]:active,
[data-theme="dark"] button[data-variant="danger"]:active {
  background: color-mix(in oklab, var(--danger-weak), var(--danger) 35%);
  border-color: color-mix(in oklab, var(--danger), white 20%);
}
[data-theme="dark"] button[title~="Delete"]:focus,
[data-theme="dark"] button[data-variant="danger"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger), white 55%);
}


/* Optional: ensure placeholder color isn’t overridden by autofill */
input:-webkit-autofill::first-line{
  color: var(--text);
}

/* =========================================================
   PHOTO HOVER PREVIEW (mouse-anchored)
   ========================================================= */
#photo-hover {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-9999px, -9999px); /* keep off-screen when hidden */
  z-index: 99999;
  pointer-events: none;
  background: color-mix(in oklab, var(--panel), black 0%);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  padding: 6px;
  display: none;
}

#photo-hover img {
  display: block;
  max-width: min(40vw, 520px);
  max-height: min(60vh, 520px);
  object-fit: contain;
  border-radius: 6px;
}

#photo-hover[data-show="1"] {
  display: block;
}


/* =========================================================
   MOBILE / TABLET SHELL (non-desktop platforms)
   Used by App.tsx when isMobile === true.
   The inner container is fluid and always constrained
   to the device viewport width (no fixed max width).
   ========================================================= */
.m-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

.m-shell, .m-shell *{
  box-sizing:border-box;
}

.m-header{
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:var(--ctl-border-width) solid var(--border);
  background: color-mix(in oklab, var(--bg), transparent 10%);
  backdrop-filter: blur(10px);
}


/* Reset global desktop header/main rules inside the mobile shell */
.m-shell header.m-header{
  padding:0;      /* override global header padding */
  display:block;  /* override global header flex layout */
  gap:0;
  flex-wrap:unset;
  align-items:stretch;
}
.m-shell main.m-content{
  display:block;             /* override global main grid */
  grid-template-columns:none;
  gap:0;
  width:100%;
  max-width:100%;
  min-width:0;
}


.m-inner{
  width:100%;
  max-width:100%; /* fluid within device width */
  margin:0 auto;
  padding:12px 14px;
}

.m-appbar{
  display:flex;
  align-items:center;
  gap:12px;
}

.m-title{
  font-size:16px;
  font-weight:800;
  letter-spacing:.2px;
}

.m-chip{
  font-size:12px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 100%;
}

.m-content{
  flex:1;
  padding:12px 0 calc(132px + env(safe-area-inset-bottom)) 0; /* room for bottom nav */
}

.m-card{
  border:var(--ctl-border-width) solid var(--border);
  border-radius:14px;
  background:var(--panel);
  padding:12px;
  display:grid;
  gap:10px;
  box-shadow: 0 10px 30px color-mix(in oklab, black, transparent 88%);
}

.m-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.m-grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

@media (max-width: 420px){
  .m-grid2{ grid-template-columns:1fr; }
}

/* Touch-friendly control sizes (also prevents iOS zoom-on-focus) */
.m-shell input,
.m-shell select,
.m-shell textarea,
.m-shell button{
  font-size:16px;
  padding:10px 12px;
  border-radius:12px;
}

.m-shell label{
  gap:6px;
}

/* Recording context: mobile-friendly grid */
.m-rec select{ width:100%; }
.m-rec button{ width:100%; }
.m-rec .muted{ font-size:12px; }

/* Bottom nav */
.m-bottomnav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:20;
  border-top:var(--ctl-border-width) solid var(--border);
  background: color-mix(in oklab, var(--bg), transparent 12%);
  backdrop-filter: blur(12px);
  padding-bottom: env(safe-area-inset-bottom);
}

.m-navgrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.m-navgrid4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}

.m-navgridAuto{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  gap:8px;
  width:100%;
}

.m-navbtn{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:700;
  border-radius:12px;
  padding:10px 8px;
  background:var(--panel);
  border:var(--ctl-border-width) solid var(--border);
}

.m-navbtn.active{
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.m-shell .section-title{
  font-size:16px;
}


/* === Fluid-width safety net (prevents post-load overflow from wide tables/strings) === */
html, body, #root { max-width: 100%; overflow-x: hidden; }
.m-shell, .m-content, .m-inner, .m-card, .panel, .rt-wrap { max-width: 100%; min-width: 0; }
table { max-width: 100%; }
th, td { overflow-wrap: anywhere; word-break: break-word; }
img, video, canvas { max-width: 100%; height: auto; }