/* Tide Clock Settings — clean, fixed 2×3 dashboard, icon top-left */
/* -------------------------------------------------------------- */
:root{
  --bg:#ffffff;
  --text:#0b1324;
  --muted:#5f6b7a;

  /* dark tile colors to match dashboard */
  --card-bg:#162041;          /* dark blue tile */
  --card-bg-hover:#1e2b52;
  --card-text:#ffffff;

  --stroke:rgba(0,0,0,.08);
  --shadow:0 4px 12px rgba(0,0,0,.12);

  /* colored icon accents */
  --brand:#4aa8ff;
  --accent:#4fd1c5;
  --warn:#ff8b5e;
}

*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust: 100%;
}
.page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ---------------- Header ---------------- */
/* Single row, three columns: [left group] | [center title] | [logout] */
.app-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--stroke);
}
.app-header-inner {
  max-width: 900px;        /* same as .view */
  margin: 0 auto;
  padding: .75rem 1rem;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: .75rem;
}

/* allow children to shrink correctly */
.app-header-inner > * {
  min-width: 0;
}

/* Left group: back + logo */
.header-left{
  display:flex;
  align-items:center;
  gap:.4rem;
}

/* Back button: hidden by default (dashboard shows logo only).
   app.js will show this and hide .header-logo on inner pages. */
.header-back{
  display:none;
}

/* === Header Back Button (matches Logout button style) === */
.header-back-btn {
  background: linear-gradient(135deg, #1c4d9c, #0b326f); /* same as logout button */
  color: #fff;
  border: none;
  border-radius: 0.45rem;
  padding: 0.45rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: background 0.2s ease;
  height: 40px;
}

.header-back-btn:hover {
  background: linear-gradient(135deg, #0b326f, #1c4d9c);
}

.header-back-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* Hide back button on dashboard; hide logo on pages */
body.dashboard-view #header-back { display: none !important; }
body.page-view .header-logo     { display: none !important; }

/* Logo (shown on dashboard, can be hidden via JS on pages) */
.logo{
  width:40px;
  height:40px;
}


/* Center block: title + station text */
.header-center{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.app-title{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

/* Header station: 1 or 2 lines, scaled via JS */
.header-station {
  margin-top: .2rem;
  color: #c1121f;         /* bold red */
  font-weight: 800;
  line-height: 1.05;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Each line is created by JS (class="header-station-line") */
.header-station-line {
  display: block;
  white-space: nowrap;
  line-height: 1.05;
  font-weight: 700;
  color: #cc1122;
}

/* Extra safety: prevent any visual spill under icons */
#header-station-name {
  overflow: hidden;
}

/* Logout button on the right */
.logout-link{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .6rem;
  border-radius: .6rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid #d7dee8;
  color: #0b1324;
  white-space: nowrap;
}
.logout-link svg{
  width:22px;
  height:22px;
}

/* ---------------- Main ---------------- */
.app-main{
  flex:1;
  display:block;
  padding:1rem;
}
.view{
  max-width:900px;
  margin:0 auto;
}

/* ---------------- Dashboard grid (fixed 2×3) ---------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:.9rem;
  align-items:stretch;
}

/* ---------------- Dashboard tiles ---------------- */
.card{
  position:relative;
  display:flex;
  flex-direction:column;      /* icon above text */
  align-items:flex-start;
  padding:1rem;
  background:var(--card-bg);
  color:var(--card-text);
  border:0;
  border-radius:1rem;
  cursor:pointer;
  box-shadow:var(--shadow);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  height:100%;
  min-height:112px;
}
.card:hover{
  transform: translateY(-2px);
  background:var(--card-bg-hover);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* colored icon chip top-left */
.card .icon{
  width:36px;
  height:36px;
  border-radius:.6rem;
  display:grid;
  place-items:center;
  background:radial-gradient(120% 120% at 10% 10%, var(--brand), transparent);
  color:#fff;
  margin-bottom:.6rem;
  pointer-events:none;
}
.card.warning .icon{
  background:radial-gradient(120% 120% at 10% 10%, var(--warn), transparent);
}

.card .text{
  width:100%;
  display:flex;
  flex-direction:column;
}
.card .text h2{
  font-size:1rem;
  margin:.05rem 0 .2rem;
  color:#fff;
  line-height:1.25;
}
.card .text p{
  margin:0;
  color:#d7def0;
  font-size:.9rem;
  line-height:1.35;
}

/* Slightly subtler helper text under card titles */
.card-help {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Tiny screens: keep 2 cols, just tighten */
@media (max-width:360px){
  .app-main { padding: .75rem; }
  .card{ min-height:104px; padding:.85rem; }
  .card .icon{ width:32px; height:32px; margin-bottom:.5rem; }
  .card .text h2{ font-size:.95rem; }
  .card .text p{ font-size:.85rem; }
}

/* ---------------- Screens ---------------- */
.view-screen{
  animation:fade .18s ease-in;
}
.screen-header{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:.8rem;
}
.screen-header h2{
  margin:0;
  font-size:1.1rem;
}
.screen-body{
  background:#fff;
  color:var(--text);
  border:1px solid var(--stroke);
  border-radius:1rem;
  padding:1rem;
}

/* ---------------- Forms ---------------- */
.field-group{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin:.8rem 0;
}
.field-group.inline{
  flex-direction:row;
  align-items:center;
  gap:.5rem;
}
label{
  color:var(--muted);
  font-size:.9rem;
}
input,
select{
  width:100%;
  padding:.7rem .8rem;
  border-radius:.6rem;
  border:1px solid #dbe2ee;
  background:#f9fbff;
  color:#0b1324;
}
select:disabled,
input:disabled{
  opacity:.7;
}

.section-title {
  margin: .2rem 0 .5rem;
  font-size: 1.1rem;
  font-weight: 700;          /* bold */
  color: #0b1324;            /* same dark text as refine_location */
  display: flex;
  align-items: center;
  gap: .5rem;
}

.section-title sup.required-star {
    color: red;
    font-weight: 700; /* force bold */
    vertical-align: super;
}

#historyDialogSubscription .info-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border-radius:.75rem;
  cursor:pointer;
  border:1px solid #d7dee8;
  background:#f7faff;
  color:#0b1324;
  text-decoration:none;
  font-weight:600;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* tile-style primary button (matches dashboard cards) */
.btn-tile{
  background: var(--card-bg);
  color: var(--card-text);
  border: none;
  border-radius: 1rem;
  box-shadow: var(--shadow);
}
.btn-tile:hover,
.btn-tile:focus-visible{
  background: var(--card-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  outline: none;
}

/* subtle secondary (e.g. Back) */
.btn-subtle{
  background: linear-gradient(180deg, #f7faff, #e3e9f9);
  color:#0a3d91;
  border:1px solid #c8d4f0;
}
.btn-subtle:hover{
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn-with-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.btn-block{
  width:100%;
}

/* iOS Safari: prevent zoom-on-focus by ensuring controls are >= 16px on phones */
@media (max-width: 768px){
  input, select, textarea, button{
    font-size: 16px;
  }
}

/* General: prevent text selection/callout on interactive UI */
button, .btn{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* good for normal buttons/links */
}

/* +/- buttons: we need to fully own the gesture (no iOS long-press behavior) */
.offset-btn{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  touch-action: none;       /* IMPORTANT: keep this (do NOT override later) */
}

/* prevent the iOS context menu from appearing on icons/text within buttons */
.offset-btn *{
  pointer-events: none;
}





/* 75/25 layout for actions where used */
.actions-row{
  display:flex;
  gap:.75rem;
  margin-top:1rem;
}
.actions-row .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-weight:600;
  border-radius:.75rem;
}
.btn-grow-3{ flex:3; }
.btn-grow-1{ flex:1; }

/* Refine Location offset buttons */
.offset-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.offset-btn {
  font-size: 2rem;
  font-weight: 700;
  padding: 0.3rem 1rem;
  line-height: 1;
  width: 60px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #0a3d62;
  border-radius: 0.6rem;
}
.offset-btn:active {
  transform: scale(0.92);
}
.offset-display {
  min-width: 80px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
}

/* ---------------- Flash ---------------- */
.flash{
  margin-top:1rem;
  padding:.7rem 1rem;
  border-radius:.6rem;
  background:#f6fbff;
  border:1px solid #cfe6ff;
  color:#083a63;
}
.flash.is-success{
  border-color:#bdece4;
  box-shadow:0 0 0 1px rgba(79,209,197,.25) inset;
}
.flash.is-error{
  border-color:#ffd2c3;
  box-shadow:0 0 0 1px rgba(255,139,94,.25) inset;
}

/* ---------------- Footer ---------------- */
.app-footer{
  opacity:.8;
  text-align:center;
  padding:1rem;
  color:#5f6b7a;
  margin-top:1rem;
}

/* ---------------- Error page ---------------- */
.page-error{
  display:grid;
  place-items:center;
}
.error-card{
  background:#fff;
  color:var(--text);
  border:1px solid var(--stroke);
  border-radius:1rem;
  padding:1.2rem;
  text-align:center;
  max-width:480px;
  margin:2rem;
}
.error-card .btn{
  margin-top:.8rem;
}

/* Compact dashboard tiles on smaller phones */
@media (max-width: 480px) {
  .view-dashboard .grid {
    gap: 0.6rem; /* slightly tighter vertical spacing */
  }

  .view-dashboard .card {
    padding: 0.7rem 0.8rem;
  }

  .view-dashboard .card .icon {
    width: 40px;
    height: 40px;
  }

  .view-dashboard .card .text h2 {
    font-size: 0.95rem;
  }

  .view-dashboard .card .text p,
  .view-dashboard .card .text p.card-help {
    font-size: 0.8rem;
  }

  .dashboard-note {
    font-size: 0.8rem;
  }
}
/* Info dialog styling (used by refine_location & display_settings) */
/* Base popup layout */
.info-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  position: fixed;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;

  /* Desktop behaviour */
  max-width: var(--dialog-max, 640px);
  min-width: 360px;       /* 👈 prevents “super narrow” behaviour on resized desktop */

  width: 94vw;            /* 👈 mobile-first: fills most of the screen */
}

/* True small-screen behaviour */
@media (max-width: 450px) {
  .info-dialog {
    min-width: 88vw;      /* slightly smaller than screen */
    max-width: 94vw;      /* ensures mobile “popup look” */
  }
}

.info-dialog::backdrop {
  background: rgba(3, 6, 20, .7);
}

.info-dialog-header {
  background: #0b1324;
  color: #eaf1ff;
  padding: 1rem 1.2rem;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.info-dialog-body {
  background: #ffffff;
  color: #0b1324;
  padding: 1rem 1.2rem;
  max-height: 70vh;        /* long content scrolls cleanly */
  overflow: auto;
  font-size: .95rem;
  line-height: 1.45;
}
/* Close button inside info dialog header */
.info-dialog-close {
  margin-left: auto;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(234, 241, 255, 0.5);
  background: transparent;
  color: #eaf1ff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.info-dialog-close:hover,
.info-dialog-close:focus {
  background: rgba(234, 241, 255, 0.15);
  outline: none;
}


/* ---------------- Animations ---------------- */
@keyframes fade{
  from{ opacity:0; transform:translateY(6px);}
  to{   opacity:1; transform:none;}
}

/* Note under dashboard grid */
.dash-note,
.note-under-grid,
.dashboard-note{
  margin-top: 0.9rem;
  text-align: center;
  font-weight: 700;
  color: #b00020;
}

/* Links tidy */
a.card,
a.btn{
  text-decoration:none;
}
a.card:hover h2,
a.card:hover p{
  text-decoration:none;
}

/* Highlight Tide Station select only when a real value is chosen */
select.select-highlight{
  font-weight:500;
}
select.select-highlight.is-selected{
  color:#c1121f;
  font-weight:700;
}
select.select-highlight option[value=""]{
  color:#7a8799;
}
/* Ensure header back button is hidden by default.
   app.js will show it on inner pages via inline style. */
.header-back {
  display: none;
}