/* styles.css – shared gate styles
   (Make sure this file does NOT redefine :root theme variables)
*/

/* =========================
   Gate UI primitives
   ========================= */

/* Button geometry */
:root{
  --btn-radius: 999px;      /* std button (pill) */
  --gate-btn-radius: 16px;  /* gate control buttons */

  /* Neutral button defaults */
  --btn-bg:     var(--gc-accent-bg, #e5e7eb);
  --btn-text:   var(--gc-accent-text, #111827);
  --btn-border: var(--gc-accent-border, #cbd5e1);

  /* Muted/secondary */
  --btn-muted-bg:     var(--gc-muted-bg, #e6e6e6);
  --btn-muted-text:   var(--gc-accent-text, #222);
  --btn-muted-border: var(--gc-muted-border, #aaa);

  /* Danger */
  --btn-danger-bg:     var(--gc-danger-bg, #dc2626);
  --btn-danger-text:   var(--gc-danger-text, #ffffff);
  --btn-danger-border: var(--gc-danger-border, #b91c1c);
}

/* Basic page layout wrapper (optional) */
.gate-page{
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 12px 24px;
}

/* =========================
   Page header (layout only)
   ========================= */

.page-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  margin-bottom: 6px;
}
.page-header-left,
.page-header-right{
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-title{
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

/* =========================
   Unified button system
   (one source of truth)
   ========================= */

/* ---- Base button primitives ---- */
.btn,
a.btn,
button.btn,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  -webkit-appearance: none;
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 8px 14px;
  min-height: 44px; /* iOS-friendly tap target */
  border-radius: var(--btn-radius);

  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);

  font-size: 16px;   /* prevents iOS zoom */
  line-height: 1;
  font-weight: 700;

  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover,
a.btn:hover,
button.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover{
  filter: brightness(0.97);
}
.btn:disabled,
button.btn:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
a.btn.disabled{
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
/* Not actually a button, creates button-style link in header */
.btn-back{
  background:#e5e7eb;
  color:#111111;
  border-radius:999px;
  flex:0 0 auto;
  text-decoration:none;
  margin-right:8px;
  font-size:12px;
  padding: 6px 10px;
}

/* ---- Size variants ---- */

/* Header button (currently unused) */
.btn-header{
  min-width: 6ch;
  padding: 6px 10px;
  min-height: 24px;
  font-size: 0.95rem;
}
/* Standard “nav button” sizing (Settings menu, etc.) */
.btn-nav{
  min-width: 150px;
  padding: 8px 14px;
  min-height: 40px;
  height: auto;
  font-size: 1rem;
  border-radius: 999px;
  border-width: 1px;
}
/* Footer/action button sizing (Save/Delete/Cancel/Settings footer, etc.) */
.btn-action{
  min-width: 170px;
  padding: 10px 22px;
  min-height: 48px;     /* larger tap target */
  height: auto;
  font-size: 1.06rem;
  border-radius: 999px; /* pill */
}
/* “Primary” action buttons (Save/Add/Apply) */
.btn.primary{
  background: var(--gc-accent-bg, #2563eb);
  border-color: var(--gc-accent-bg, #2563eb);
  color: var(--gc-accent-text, #ffffff);
}
/* Generic nav buttons (Settings) + Cancel buttons */
.btn.secondary,
.btn-cancel{
  background: var(--btn-muted-bg);
  border-color: var(--btn-muted-border);
  color: var(--btn-muted-text);
}
/* Danger nav + danger action (Delete/Clear Log/etc.) */
.btn.danger,
.btn-nav-danger,
.btn-action-danger{
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--btn-danger-text);
}
/* Optional: make secondary/danger hover a bit clearer */
.btn.primary:hover,
.btn.danger:hover,
.btn.secondary:hover{
  filter: brightness(0.95);
}

/* ---- Gate buttons (index page) ---- */
/* Keep these lightweight; state colors can be applied by your existing gate-state classes.
   This ensures gate buttons still look like “buttons” even before state is applied. */
.gate-btn{
  /* only if you use this class; otherwise ignore */
  min-width: 110px;
  height: 40px;
}

/* ==================================
 * Gate selector (styled like button)
 * ================================== */
.header-select-wrapper {
  position: relative;
  display: inline-block;
}
.header-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 6px 30px 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--gc-accent-border, #888);
  background: var(--gc-accent-bg, #f0f0f0);
  color: var(--gc-accent-text, #222);
  font-size: 0.95rem;
  cursor: pointer;
}
.header-select-wrapper::after {
  content: "▼";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  pointer-events: none;
  color: var(--gc-accent-text, #222);
}

/* ------------------------------
 *  Global Footer
 * ------------------------------ */
.page-footer {
  margin-top: 20px;
  padding-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px; /* places cancel/submit on same line */
}

/* ------------------------------
 * Form footer actions (Save / Back to Settings)
 * ------------------------------ */
.form-footer-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* ------------------------------
 * Flash banner
 * ------------------------------ */
.flash-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;                /* or top: 12px; if you prefer it at the top */
  transform: translateX(-50%);
  z-index: 1000;

  max-width: 90%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  color: #fff;
}
.flash-success {
  background-color: #16a34a;   /* green */
}
.flash-error {
  background-color: #dc2626;   /* red */
}
.flash-text {
  white-space: normal;
}
/* Small close button (X) */
.flash-close {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

/* ==============
 * General styles
 * ============== */
 body{
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--app-bg);
  color: var(--app-text);
}
/* Universal form controls (inputs + selects) */
.form-row .form-control,
.form-row .form-select {
  height: 34px; /* compact, consistent */
  padding: 0 10px;
  font-size: 1rem;
  border-radius: var(--gate-btn-radius);
  border: 1px solid #cbd5e1;
  box-sizing: border-box;
  background-color: #fff;
  color: #111827; /* fixed dark text for readability */
  /* Force consistent look on iOS Safari and others */
  -webkit-appearance: none;
  appearance: none;
}
/* iOS Safari fix: make numeric (tel) fields match other inputs */
.form-row input[type="tel"].form-control {
  height: 34px !important;
  padding: 0 10px;
  font-size: 1rem;
  border-radius: var(--gate-btn-radius);
  border: 1px solid #cbd5e1;
  box-sizing: border-box;
}

/* =========================================================
 * Gate Control – iOS/Safari polish pack (safe overrides)
 * Put at END of global CSS
 * ========================================================= */

/* 1) Prevent iOS auto-zoom on inputs (needs >=16px) */
input, select, textarea, button {
  font-size: 16px;
}
/* 2) Consistent box sizing */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 3) Safer tap targets */
button, .btn, input[type="submit"], input[type="button"] {
  min-height: 44px;
}
/* 4) Form rows: keep label + control aligned on iPhone */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 10px 0;
}
@media (min-width: 700px) {
  .form-row {
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 10px 14px;
  }
}
/* 5) Inputs full-width, prevent overflow */
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row select,
.form-row textarea {
  width: 100%;
  max-width: 100%;
}
/* Radio/checkbox groups: left aligned and stable spacing */
.radio-group,
.checkbox-group {
  display: grid;
  gap: 8px;
  justify-items: start;
  align-items: start;
}
.radio-group label,
.checkbox-group label {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  margin: 0;
}
/* Stop Safari from “helpfully” shrinking form controls */
input, select, textarea {
  min-width: 0;
}
/* Footer buttons: wrap cleanly on small screens */
.form-footer,
.card-footer,
.footer-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.form-footer .btn,
.card-footer .btn,
.footer-actions .btn,
.form-footer button,
.card-footer button,
.footer-actions button {
  flex: 1 1 140px;         /* wraps into two rows on narrow phones */
}
/* Reduce accidental horizontal scrolling */
html, body {
  overflow-x: hidden;
}
/* iOS safe-area padding for bottom bars / footers */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ================================================
 * Global iOS-safe input sizing (prevents overflow)
 * ================================================ */

input,
select,
textarea {
  box-sizing: border-box;
  max-width: 100%;
}
/* Flex containers must allow shrinking */
.field,
.form-row {
  min-width: 0;
}
/* iOS Safari: force date inputs to behave like normal inputs */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
}
/* iOS Safari date inputs can have a stubborn intrinsic width.
   Force them to shrink correctly in flex layouts. */
input[type="date"],
input[type="time"],
input[type="datetime-local"]{
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 100% !important;
  max-width: 100% !important;

  box-sizing: border-box !important;
  display: block !important;

  /* THE KEY PART */
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
/* Also force the parent wrappers to allow shrinking */
.form-row,
.form-row > *,
.field,
.field > * {
  min-width: 0 !important;
}
.form-card { overflow: hidden; }