:root{
  --bg:#f4f7fc; --card:#ffffff; --ink:#0c162c; --muted:#5c6c90; --accent:#3a7bff; --line:#d3d9e8; --maxw:1100px;
  --fs-base:16px; --fs-input:0.95rem; --fs-table:0.92rem; --fs-label:1rem; --fs-title:2rem;
  --danger:#d11; --ok:#0a6; --warn:#b8860b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--ink);
  font-size:var(--fs-base);
}
.wrap{max-width:var(--maxw); margin:16px auto; padding:8px}
.sheet{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  position:relative;
}
header{padding:8px; border-bottom:1px solid var(--line)}
.title[contenteditable]{outline:0; cursor:text}
.title{font-weight:900; font-size:var(--fs-title); line-height:1.15}
.subtitle{color:var(--muted); font-size:.95rem; margin-top:2px}
.toolbar{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:6px}
.btn{border:1px solid var(--line); background:#f0f3fb; color:var(--ink); padding:6px 10px; border-radius:6px; cursor:pointer; font-size:.95rem}
.btn.primary{background:var(--accent); color:#fff; border:none}
.btn[disabled]{opacity:.5; cursor:not-allowed}

.grid{display:grid; gap:4px}
.grid.cols-12{grid-template-columns:repeat(12,1fr)}
.field{display:flex; flex-direction:column; gap:3px}
.label{font-size:var(--fs-label); color:var(--muted)}

/* Inputs */
input[type="text"], input[type="date"], input[type="number"], select{
  background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:5px 8px; border-radius:6px; width:100%; font-size:var(--fs-input);
  text-align:center;
}
select{-webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:none;}

/* 🧩 Remove all number spinners/sliders — ALL browsers + print */
input[type=number]{
  -moz-appearance:textfield !important;   /* Firefox */
  appearance:textfield !important;        /* Chrome/Safari/Edge */
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none !important;
  margin:0 !important;
}

/* Print also clean (no spinners ever) */
@media print{
  input[type=number]{
    -moz-appearance:textfield !important;
    appearance:textfield !important;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance:none !important;
    margin:0 !important;
  }
}

.hstack{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.radiochip{display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:6px; padding:4px 8px; font-size:.95rem}

/* Table */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:4px;
  font-size:var(--fs-table);
  table-layout:fixed;
}
th,td{padding:4px 2px; text-align:center; border-bottom:1px solid var(--line)}
thead th{background:#f0f3fb; color:#5b6a8d; text-transform:uppercase; font-weight:700}
tfoot td{font-weight:700}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric:tabular-nums}
select.pos{ width:45px; }  select.height{ width:75px; }  input.dd{ width:44px; }
input.j{ width:40px; } input.totalBox, input.scoreBox{ width:80px; text-align:center; }

/* Column widths */
#divesTbl th:nth-child(1),  #divesTbl td:nth-child(1)  { width:4%;  }
#divesTbl th:nth-child(2),  #divesTbl td:nth-child(2)  { width:9%;  }  /* Dive No */
#divesTbl th:nth-child(3),  #divesTbl td:nth-child(3)  { width:7%;  }
#divesTbl th:nth-child(4),  #divesTbl td:nth-child(4)  { width:8%;  }
#divesTbl th:nth-child(5),  #divesTbl td:nth-child(5)  { width:7%;  }
#divesTbl th:nth-child(6),  #divesTbl td:nth-child(6)  { width:8.5%; }
#divesTbl th:nth-child(7),  #divesTbl td:nth-child(7)  { width:8.5%; }
#divesTbl th:nth-child(8),  #divesTbl td:nth-child(8)  { width:8.5%; }
#divesTbl th:nth-child(9),  #divesTbl td:nth-child(9)  { width:8.5%; }
#divesTbl th:nth-child(10), #divesTbl td:nth-child(10) { width:8.5%; }
#divesTbl th:nth-child(11), #divesTbl td:nth-child(11) { width:10%; }
#divesTbl th:nth-child(12), #divesTbl td:nth-child(12) { width:11%; }

/* Signatures */
.sigs{display:flex; justify-content:space-between; gap:16px; padding:12px 8px 10px}
.sigbox{position:relative; width:32%;}
.sigbox:before{content:""; display:block; border-top:1px solid var(--ink); width:180px; margin:0 0 4px 0}
.siglabel{font-weight:800; letter-spacing:.3px; font-size:1rem}
.siglabel span{display:inline-block; text-transform:uppercase}

/* Board label */
.board-selected{display:none; margin-top:6px; font-weight:700}
.board-selected .mono{font-weight:700}

/* Rules box */
.rulesbox{margin-top:8px; padding:8px; border:1px dashed var(--line); border-radius:8px; background:#fafcff; color:#334; font-size:.93rem}
.rulesbox b{font-weight:700}

/* Validation states */
.errors{margin:8px 10px 0; padding:8px; border-radius:8px; border:1px solid var(--danger); background:#fff5f5; color:#700; display:none;}
.ok-msg{margin:8px 10px 0; padding:8px; border-radius:8px; border:1px solid var(--ok); background:#f5fff8; color:#064; display:none;}
.row-invalid td{background:#fff5f5;}
.cell-invalid{outline:2px solid var(--danger); border-color:var(--danger)!important}
.note{color:var(--muted); font-size:.9rem; margin-left:8px}

/* PRINT */
@page{ size:A4 landscape; margin:6mm }
@media print{
  html,body{height:auto}
  body{background:#fff; color:#000}
  .wrap{max-width:none; margin:0; padding:0}
  .sheet{ box-shadow:none; border:none; transform:scale(0.94); transform-origin:top left; width:calc(100% / 0.94); page-break-inside:avoid; }

  /* Hide UI bits */
  .btn, .toolbar .send-status, .note{ display:none !important; }

  /* Compact top info row */
  .grid.cols-12{
    position:relative;
    column-gap:10px !important;
    row-gap:2px !important;
    align-items:end;
  }
  .field{ gap:0 !important; }
  .field .label{
    font-size:10pt !important;
    color:#333 !important;
    margin-bottom:0;
  }
  .field input, .field select{
    font-size:13pt !important;
    font-weight:700 !important;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    text-align:center !important;
  }

  /* Big board name (top-right) */
  .field:has(.board-radio) > .label{ display:none !important; }
  .board-radio{ display:none !important; }
  #boardSelectedText{
    display:block !important;
    position:absolute;
    right:8px;
    top:-4px;
    margin:0; padding:0;
    color:transparent !important;
  }
  #boardSelectedText .mono{
    color:#000 !important;
    font-size:34pt;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
  }

  /* Box below Start No. 
  .grid.cols-12 > .field:nth-of-type(6){ position:relative; }
  .grid.cols-12 > .field:nth-of-type(6)::after{
    content:"";
    position:absolute;
    left:0; right:0;
    height:22px;
    bottom:-26px;
    border:1px solid #000;
    border-radius:2px;
  }

  /* Hide rules box */
  .rulesbox{ display:none !important; }

  /* Table styling */
  table{ border-collapse:collapse; }
  th, td{ border:1px solid #000 !important; text-align:center !important; }
  #divesTbl input, #divesTbl select{
    text-align:center !important;
    font-size:12pt !important;
    font-weight:700 !important;
    background:transparent !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }

  /* Dive number emphasis */
  #divesTbl .diveNo{
    font-size:16pt !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.4px !important;
  }

  #divesTbl th{ font-size:12pt !important; }
}

/* Send status */
.send-status{font-size:.9rem; color:#0a6; display:none; align-items:center; gap:6px}
.send-status.error{color:#b00}

/* Error flyout */
.flyout{
  position:fixed;
  top:90px;
  right:16px;
  width:260px;
  max-height:65vh;
  overflow:hidden;
  background:#fff;
  border:1px solid #f5c2c7;
  border-left:5px solid #d32f2f;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
  border-radius:10px;
  z-index:1000;
  font-size:.9rem;
  transform:translateX(120%);
  opacity:0;
  pointer-events:none;
  transition:all .25s ease;
}
.flyout.show{ transform:translateX(0); opacity:1; pointer-events:auto; }
.flyout.collapsed .flyout-body{ display:none; }
.flyout-header{
  display:flex; align-items:center; justify-content:space-between; gap:4px;
  background:#fff5f5;
  padding:6px 8px;
  cursor:pointer;
  user-select:none;
}
.flyout-title{ font-weight:700; color:#d32f2f; flex:1; }
.flyout-close{
  border:none; background:transparent; color:#666;
  font-size:1.2rem; line-height:1; cursor:pointer; padding:0 6px;
  transition:color .2s;
}
.flyout-close:hover{ color:#000; }
.flyout-body{
  padding:6px 10px 10px;
  overflow-y:auto;
  max-height:45vh;
  color:#700;
}
.flyout-body ul{ margin:4px 0 0 18px; }
.flyout-body li{ margin:2px 0; line-height:1.25; }

/* Mobile flyout */
@media (max-width:900px){
  .flyout{
    right:auto; left:50%; bottom:12px; top:auto;
    width:min(360px, calc(100% - 24px));
    transform:translate(-50%, 140%);
  }
  .flyout.show{ transform:translate(-50%, 0); }
}

/* Top line alignment & compact look */
.topline{
  align-items: end;           /* align all values on the same baseline */
  column-gap: 12px;
}

.topline .field{ gap: 2px; }
.topline .label{
  font-size: .95rem;
  color: #5b6a8d;
  line-height: 1;
  margin: 0;
}

/* Make inputs/selects equal height and nicely aligned */
.topline input,
.topline select{
  height: 34px;
  line-height: 34px;
  padding: 0 8px;
  font-weight: 800;
  text-align: left;
}

/* Print: keep baseline + compact spacing */
@media print{
  .topline{ align-items: end; column-gap: 10px; }
  .topline .label{ font-size: 10pt !important; margin:0; }
  .topline input,
  .topline select{
    height: auto;            /* let text flow naturally in print */
    line-height: 1.1;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: 13pt !important;
    font-weight: 700 !important;
    text-align: left !important;
  }
}