/* logbook.css — NZ logbook page layout (header + grid + footer) */

/* ---------- Variables ---------- */
:root {
  /* vertical scale */
  --hour-height: 60px;

  /* page width (subtract both body paddings = 32px) */
  --page-width: min(900px, calc(100vw - 32px));

  --ink: #000;

  /* column widths */
  --col-hours: 60px;
  --col-rest:  40px;  /* narrowed */
  --col-work:  40px;  /* narrowed */
  --col-rego:  65px;
  --col-hubbo: 65px;

  /* remarks auto-fills the remaining width */
  --col-remarks: calc(
    var(--page-width)
    - (var(--col-hours) + var(--col-rest) + var(--col-work) + var(--col-rego) + var(--col-hubbo))
  );

  --grid-border: #000;
  --grid-strong: #b3b3b3;   /* hour lines - lighter so labels stand out */
  --grid-light:  #d9d9d9;   /* 15-min ticks */
  --label-bg:    #fff;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 16px;
}

/* topbar container */
.wrap { max-width: var(--page-width); margin: 0 auto; }

/* ---------- Topbar (buttons/date) ---------- */
.topbar { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.date-input { border: 1px solid #ccc; padding: 6px 8px; }
.btn { border: 1px solid #bbb; background: #eee; padding: 6px 12px; cursor: pointer; }
.btn:hover { background: #e5e5e5; }

/* Hide reload buttons but keep them in DOM (JS safety) */
#btnReload,
#btnReload2 { display: none !important; }

/* ---------- Make header, grid, footer share exact width & box model ---------- */
.form-header,
.page,
.form-footer {
  width: var(--page-width);
  margin: 0 auto;
  box-sizing: border-box;  /* include borders in width */
}

/* ---------- Header band ---------- */
.form-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;  /* Name | Midnight | Date */
  gap: 8px;
  border-left: 4px solid var(--grid-border);
  border-right: 4px solid var(--grid-border);
  border-top: 4px solid var(--grid-border);
  border-bottom: 0;  /* opens into grid below */
  padding: 10px;
}

.hfield { display: flex; justify-content: center; align-items: center; }
.hlabel { min-width: 110px; font-weight: bold; }

/* header text (no boxes) */
.hinput {
  flex: 1;
  min-height: 28px;
  border: none;
  padding: 0;
  background: transparent;
  text-align: center;
  font-weight: normal;
}

/* Hide "Name" label (value is already shown) */
.form-header .hfield-name .hlabel { display: none; }
.form-header .hfield-name { justify-content: flex-start; }
.form-header .hfield-name .hinput { text-align: left; }

/* Make Midnight compact (doesn't stretch) */
.form-header .hfield-midnight .hinput {
  flex: 0 0 auto;
  width: auto;
  text-align: center;
}

/* Date cell compact + slight tracking */
.form-header .hfield-date .hinput {
  flex: 0 0 auto;
  width: auto;
  letter-spacing: 0.02em;
  text-align: right;
}

/* ---------- Grid frame ---------- */
.page {
  position: relative;
  height: calc((25 * var(--hour-height)) + var(--top-gutter, 0px)); /* 24h + 1h padding */
  border: 4px solid var(--grid-border);
  border-top: none;   /* meets header cleanly */
  border-bottom: none;
  overflow: hidden;
}

/* Column rails (vertical dividers) */
.vcol { position: absolute; top: 0; bottom: 0; }
.col-hours   { left: 0; width: var(--col-hours); border-right: 1px solid var(--grid-border); }
.col-rest    { left: var(--col-hours); width: var(--col-rest); border-right: 1px solid var(--grid-border); }
.col-work    { left: calc(var(--col-hours) + var(--col-rest)); width: var(--col-work); border-right: 1px solid var(--grid-border); }
.col-remarks { left: calc(var(--col-hours) + var(--col-rest) + var(--col-work)); width: var(--col-remarks); border-right: 1px solid var(--grid-border); }
.col-rego    { left: calc(var(--col-hours) + var(--col-rest) + var(--col-work) + var(--col-remarks)); width: var(--col-rego); border-right: 1px solid var(--grid-border); }
.col-hubbo   { left: calc(var(--col-hours) + var(--col-rest) + var(--col-work) + var(--col-remarks) + var(--col-rego)); width: var(--col-hubbo); border-right: 1px solid var(--grid-border); }

/* Column headings */
.heading {
  position: absolute;
  top: 6px; left: 6px; right: 6px;
  font-size: 12px; font-weight: bold;
  z-index: 3;
}

/* ---------- Grid lines ---------- */
.hour-label {
  position: absolute;
  left: 8px;
  transform: translateY(-50%);
  font-size: 12px;
  color: #000;
  z-index: 2;
}
.grid-line {
  position: absolute;
  left: var(--col-hours);
  width: calc(var(--page-width) - var(--col-hours));
  height: 1px;
  background: var(--grid-light);
}
.grid-line.hour { background: var(--grid-strong); height: 2px; }

/* ---------- Path strokes inside Rest / Work bands ---------- */
.stroke { position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); }
.band { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.switch-connector {
  position: absolute;
  left: calc(var(--col-hours) + var(--col-rest)); /* divider between Rest | Work */
  width: 0;
  border-left: 2px solid var(--ink);
}

/* continuous baseline + horizontal connectors */
.vline { position: absolute; left: 50%; transform: translateX(-1px); width: 2px; background: #000; }
.h-connector { position: absolute; left: calc(var(--col-hours) + var(--col-rest)); width: var(--col-work); height: 2px; background: #000; }
.h-connector.rev { left: var(--col-hours); width: var(--col-rest); }

/* Continuous path pieces */
.vert { position: absolute; left: 50%; transform: translateX(-1px); width: 2px; background: #000; }
.hconn-in { position: absolute; height: 2px; background: #000; }

/* ---------- Labels (centre/remarks column) ---------- */
.marker {
  position: absolute;
  left:  calc(var(--col-hours) + var(--col-rest) + var(--col-work) + 6px);
  right: calc(var(--col-rego) + var(--col-hubbo) + 6px);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  transform: translateY(-50%);
  line-height: 1.2;
  max-width: calc(var(--col-remarks) - 12px);
  /* multi-line wrapping */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  hyphens: auto;
  z-index: 2;
  background: #fff;
}

/* ---------- Right-column cells (Rego / RUC) ---------- */
.cell {
  position: absolute;
  left: 6px; right: 6px;
  transform: translateY(-50%);
  font-size: 12px;
  background: #fff;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

/* tighter padding in Rego + Hubbo only */
.col-rego .cell,
.col-hubbo .cell {
  left: 2px;
  right: 2px;
  padding: 0 4px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.col-rego .heading,
.col-hubbo .heading {
  left: 4px;
  right: 4px;
  padding: 0;
}

/* ---------- Footer band ---------- */
.form-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 even columns */
  gap: 8px;
  border: 2px solid var(--grid-border);
  border-top: none;
  padding: 10px;
  align-items: start;   /* top align instead of center */
  text-align: center;   /* center all content */
  width: var(--page-width);
  margin: 0 auto;
  box-sizing: border-box;
}

.fitem {
  display: flex;
  flex-direction: column;   /* stack label above input */
  gap: 4px;
  align-items: center;
}

.flabel {
  font-weight: bold;
  font-size: 12px;
}

.finput {
  min-height: auto;
  border: 1px solid #bfbfbf;
  background: #fff;
  padding: 2px 6px;
  display: inline-block;
}

/* ---------- Mobile (<= 480px) ---------- */
@media (max-width: 480px) {
  :root {
    --hour-height: 48px;
    --page-width: calc(100vw - 32px);

    /* squeeze columns further */
    --col-hours:  40px;
    --col-rest:   30px;
    --col-work:   30px;
    --col-rego:   50px;
    --col-hubbo:  55px;

    --col-remarks: calc(
      var(--page-width)
      - (var(--col-hours) + var(--col-rest) + var(--col-work) + var(--col-rego) + var(--col-hubbo))
    );
  }

  .heading, .hour-label, .marker, .cell { font-size: 11px; }

  .marker {
    padding: 2px 4px;
  }
  .cell { padding: 2px 4px; }

  .topbar { gap: 6px; }
  .btn { padding: 4px 8px; }
  .date-input { padding: 4px 6px; }

  /* extra-tight Rego/Hubbo on phones */
  .col-rego .cell,
  .col-hubbo .cell { left: 1px; right: 1px; padding: 0 3px; }
  .col-rego .heading,
  .col-hubbo .heading { left: 3px; right: 3px; }
}
/* Back-to-top button */
#backToTop.btt{
  position: fixed;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 160px);
  z-index: 1000;
  min-width: 44px;             /* touch target */
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  background: #111;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  cursor: pointer;

  opacity: 0;                  /* hidden by default */
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
#backToTop.btt.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#backToTop.btt:focus-visible{
  outline: 3px solid #4da3ff;
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #backToTop.btt{ transition: none; }
  html { scroll-behavior: auto; }
}

@media print {
  body {
    padding: 0;
  }

  .topbar,
  #backToTop,
  #bottombar {
    display: none !important;
  }

  .wrap {
    max-width: var(--page-width);
    margin: 0 auto;
  }

  .page {
    break-inside: avoid;
  }
}