:root{
      --bg:#fff;
      --text:#111;
      --muted:#666;
      --line:#eee;
      --line2:#ddd;
      --btn:#111;
      --btnText:#fff;
      --radius:14px;
    }

    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 18px; color:var(--text); background:var(--bg); }
    h1 { font-size: 22px; margin: 0; }
    .muted { color:var(--muted); font-size:0.92rem; }
    .small { color:var(--muted); font-size:0.82rem; }
    code { background:#f6f6f6; padding:2px 6px; border-radius:8px; }

    /* Fixed canvas for paper-like layout (used for BOTH header and form) */
    .form-canvas{
      max-width: 1024px;
      margin: 0 auto;
    }
	/* responsive max-width with breakpoints */
	@media (max-width: 1200px){
	.form-canvas{ max-width: 1040px; }
	}

	@media (max-width: 1100px){
	.form-canvas{ max-width: 100%; }
	}


    /* --- HEADER ALIGNMENT FIXES --- */
    header.topbar {
      display:flex;
      align-items:flex-start;
      gap:12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
      width:100%;
    }
    .topbar-right {
      margin-left: auto;                 /* << push buttons to far right */
      display:flex;
      align-items:flex-start;
      gap:12px;
      flex-wrap: wrap;
      justify-content:flex-end;
      flex-direction: column;            /* buttons on top, optional block below */
    }
    .topbar-actions{
      display:flex;
      align-items:flex-start;
      gap:8px;                           /* spacing between buttons */
      flex-wrap: wrap;
      justify-content:flex-end;
    }
    .topbar-actions a { display:inline-block; margin-left:0; }

    /* Stats block shown on index page header (right side, below buttons) */
    .topbar-stats{
      display:grid;
      grid-template-columns: repeat(4, minmax(78px, auto));
      gap:10px;
      align-items:end;
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:#fff;
    }
    .topbar-stats .stat{ min-width: 78px; }
    .topbar-stats input{ text-align:center; }
    .topbar-stats .with-suffix{ display:flex; gap:6px; align-items:flex-end; }
    .topbar-stats .suffix{ font-size:0.82rem; color:var(--muted); padding-bottom:6px; }

    .btn { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line2); border-radius:12px; text-decoration:none; color:var(--text); background:#fff; cursor:pointer; font-size: 0.92rem; }
    .btn.primary { background:var(--btn); color:var(--btnText); border-color:var(--btn); }
    .btn.danger { border-color:#f2b8b5; }

    .card { border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin-top:12px; background:#fff; }
    .divider { border-top:1px solid var(--line); margin:10px 0; }

    label { display:block; font-size:0.92rem; color:#333; margin-bottom:6px; line-height:1.1; }
    input, select, textarea {
      width:100%;
      padding:6px 7px;
      border:1px solid var(--line2);
      border-radius:10px;
      font:inherit;
      font-size: 0.92rem;
      box-sizing: border-box;
    }
    textarea { min-height: 90px; resize: vertical; }

    /* Radios/checkboxes must NOT inherit width:100% */
    input[type="radio"],
    input[type="checkbox"]{
      width: 16px !important;
      min-width: 16px !important;
      max-width: 16px !important;

      height: 16px !important;
      min-height: 16px !important;
      max-height: 16px !important;

      padding: 0 !important;
      flex: 0 0 16px;
      box-sizing: border-box;
    }

    /* Default strip = flex (used for button rows at bottom) */
    .strip { display:flex; gap:10px; align-items:flex-end; flex-wrap: wrap; }
   /*   
	.f { min-width: 120px; } 
	AYTO MALLON DE XREIAZETAI

    /* ===== GRID ROWS (paper-layout foundation) ===== */
    .strip.row1,
    .strip.row2,
    .strip.row4,
    .strip.row5,
    .strip.row6,
    .strip.row8,
    .strip.row9,
    .strip.row10,
    .strip.row11,
    .strip.row12,
    .strip.row13,
    .strip.row14,
    .strip.row15,
    .strip.row16,
    .strip.row17,
    .strip.row18,
    .strip.row19{
      display: grid;
      align-items: start;
      column-gap: 20px;
	  row-gap: 10px;
    }
  /* Rows below: keep groups as max-content columns */
    .strip.row11,
    .strip.row14,
    .strip.row16,
    .strip.row17{
      grid-auto-flow: column;
      grid-auto-columns: max-content;
    }
    /* Drop the control 1–2px to align better with label text */
    input[type="radio"]{
	   position: relative;
      top: 1px;   /* use 1px or 2px */
    }

    input[type="checkbox"]{
      position: relative;
      top: 1px;   /* use 1px or 2px */
    }

    /* Row 1: Dive#, Location, Site, Date, Day/Night 
    .strip.row1{
      display:grid;
      grid-template-columns: 80px 210px 210px 150px 150px;
      column-gap:30px;
      align-items:start; /* <-- IMPORTANT: fixes Day/Night sitting lower 
    }
	*/
    
	/* Row 2: Max, Avg, SS, ADT, Time in, Time out 
    .strip.row2{
      grid-template-columns: 120px 120px 240px 120px 100px 120px;
      align-items: end;
      column-gap:20px;
    }
	*/
    /* Row 4: Suit, mm, Gear line */
    .strip.row4{
      grid-template-columns: 250px 140px 510px;
      align-items: start;
      column-gap:20px;
	  padding-bottom: 4px;
    }
    .strip.row4 #gear_other{ width:280px !important; max-width:280px !important; }

    /* Row 5: Weight kg, Weight feel, Cylinder, Size */
    .strip.row5{
      grid-template-columns: 96px 280px 400px 112px;
      column-gap:20px;
	  padding-bottom: 4px;
    }

    /* Row 6: Gas mixture block + Cylinder pressure (3 boxes) */
    .strip.row6{
      grid-template-columns: 210px 260px 60px 60px 110px 90px 80px;
      column-gap:10px;
	  padding-bottom: 4px;
    }

    /* Row 8: Water access, Water type, Water body, */
    .strip.row8{
      grid-template-columns: 350px 150px 300px ;
      column-gap:30px;
	  padding-bottom: 4px;
    }

    /* Row 9:   Weather & Temperature*/
    .strip.row9{
      grid-template-columns: 630px 100px 100px 90px ;
      column-gap:10px;
	  padding-bottom: 4px;
    }
    /* Row 10: Waves  Current Surge*/
    .strip.row10{
      grid-template-columns: 350px 360px 200px ;
      column-gap:10px;
	  padding-bottom: 12px;
    }
    /* Row 12:  */
    .strip.row12{
      grid-template-columns: 50px 80px 90px 80px 70px 90px 70px 110px 74px 14px 74px 14px 100px;;
      column-gap: 8px;
	  align-items: end;
	  padding-bottom: 4px;
    }
    /* Row 13:  */
    .strip.row13{
      grid-template-columns: 100px 100px 100px 68px 10px 70px 10px 100px;
      column-gap:10px;
      align-items: end;
    }
    /* Row 19:  */
    .strip.row19{
      display: grid;
      grid-template-columns: 80px 80px 80px 80px;
      column-gap: 12px;
      align-items: start;
    }

  
   /*
    /* ---------- Row 1 sizing ---------- 
    .f.dive { width: 80px; min-width: 80px; justify-self: start; }
    .f.loc  { width: 210px; min-width: 210px; }
    .f.site { width: 210px; min-width: 210px; }
    .f.dateblock { width: 150px; min-width: 150px; }
    .f.dnblock { width: 150px; min-width: 150px; }

    .f.dive input { width: 50px; max-width: 50px; margin-left: 24px; } /*     short Dive# box transform: translateX(28px);
    .f.loc  input { width: 210px; max-width: 210px; margin-left: 0px; } /*     short Dive# box transform: translateX(28px);

    /* ---------- Row 2 sizing ---------- */
*/

    .strip.row2 { align-items: end; } /* keep */

    .f.max { width: 120px; min-width: 120px; }
    .f.avg { width: 120px; min-width: 120px; }
    .f.ss  { width: 240px; min-width: 240px;  }
    .f.adt { width: 100px; min-width: 120px; }
    .f.tin { width: 100px; min-width: 100px; }
    .f.tout{ width: 120px; min-width: 120px; }



    /* SS tiny boxes */
    .f.ss #ss_time_min { width: 44px; max-width: 44px; margin-left: 7px;}
    .f.ss #ss_depth_m  { width: 44px; max-width: 44px; margin-left: 7px;}

    /* label + icon */
    .lbl-ico{
      display:flex;
      align-items:center;
      gap:6px;
    }
    /* ----------------- ico --------------------------------*/
    .ico{
      width:28px;
      height:28px;
      display:inline-block;
    }

    /* ---- Day/Night (Row 1) ---- */
    .dn-head{
      display:flex;
      align-items:center;
      gap:8px;
      white-space:nowrap;
      flex-wrap:nowrap;   /* keep icons on same line */
      margin-bottom:6px;
    }
    .dn-title{
      font-size:0.92rem;
      color:#333;
      line-height:1.1;
      margin:0;
    }
    .dn-head-icons{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    /* ----------------- dn-hico --------------------------------*/
    .dn-hico{
      width:24px;
      height:24px;
      display:block;
    }

    .dn-radio-line{
      display:flex;
      align-items:center;
      gap:18px;
      white-space:nowrap;
      min-height: 28px;  /* keeps block height comparable to inputs */
    }
    .dn-choice{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin:0;
      font-size:0.88rem;
      color:#111;
      white-space:nowrap;
    }
    .dn-choice input[type="radio"]{ width:auto; }

    /* Small numeric/time boxes */
    .mini input { width: 86px; }  /* AXRISTO */
    .mini.time input { width: 92px; }
    .mini.temp input { width: 86px; }

    .unit-inline { display:flex; align-items:center; gap:8px; }
    .unit-inline input { width: 44px; min-width: 4px; }
    .unit-inline .unit { font-size:0.92rem; color:#333; padding-bottom: 2px; }

    /* ----------------- Row 2: allow Max/Avg to control unit-inline input width --------------------------------
    .strip.row2 .f.max .unit-inline input { width: 50px; min-width: 50px; margin-left: 0px;}
    .strip.row2 .f.avg .unit-inline input { width: 50px; min-width: 50px; margin-left: 26px;}
    .strip.row2 .f.ss .unit-inline input { width: 55px; min-width: 55px; }
    .strip.row2 .f.adt .unit-inline input { width: 50px; max-width: 50px; }
    .f.ss #ss_done  { margin-left: 4px; margin-right: 7px; }
	-*/

    /* SS inline -*/
    .ss-inline{
      display:flex;
      align-items:flex-end;
      gap:2px;
      padding:0;
      border:none;
      background:transparent;
    }
    .ss-inline .sschk{
      display:flex; align-items:center; gap:6px;
      padding:0;
      border:none;
      background:transparent;
      font-size:0.90rem;
      line-height:1;
      white-space: nowrap;
      margin:0;
    }
    .ss-inline .ssmini input{ width: 44px; }
    .ss-inline .ssmini label{ font-size:0.72rem; margin-bottom:3px; }

    /* Gear/Substrate lines */
    .gearline{
      display:flex;
      align-items:center;
      gap:20px;
      flex-wrap:nowrap;
      white-space:nowrap;
      overflow:visible;
    }
    .gearitem{
      display:inline-flex;
      align-items:center;
      gap:5px;
      font-size:0.88rem;
      color:#111;
      margin:0;
      white-space:nowrap;
    }
    .gearitem input[type="checkbox"]{ width:auto; }

    #gear_other{
      width: 150px;
      min-width: 120px;
      padding: 5px 7px;
      font-size: 0.88rem;
    }

    /* Weight feel & Cylinder choices */
    .wchoices,
    .cchoices{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:nowrap;
      white-space:nowrap;
      padding-top: 2px;
      justify-content:flex-start;
    }
    .wchoices{ padding-top: 8px; }

    .witem, .citem{
      display:inline-flex;
      align-items:center;
      gap:5px;
      font-size:0.88rem;
      color:#111;
      margin:0;
      white-space:nowrap;
    }
    .witem input[type="radio"],
    .citem input[type="radio"]{ width:auto; }

    #cylinder_other{
      width: 120px;
      min-width: 120px;
      padding: 5px 7px;
      font-size: 0.88rem;
    }

    .f.cylsize .unit-inline input{
      width: 44px;
      min-width: 44px;
    }

    /* Gas Mixture grid */
    .mixgrid{
      display:grid;
      grid-template-columns: auto auto auto auto;
      grid-template-rows: auto auto;
      column-gap: 10px;
      row-gap: 4px;
      align-items: start;
      white-space: nowrap;
    }
    .mixlbl{
      font-size:0.74rem;
      line-height:1.05;
      color:#333;
    }
    .mixradios{
      grid-column:1;
      grid-row:2;
      display:flex;
      align-items: center;
      gap:10px;
      white-space: nowrap;
    }
    .mixitem{
      display:inline-flex;
      align-items:center;
      gap:5px;
      font-size:0.88rem;
      margin:0;
      white-space:nowrap;
    }
    .mixitem input[type="radio"]{ width:auto; }

    .mixval{
      display:flex;
      align-items:center;
      gap:6px;
    }
    .mixval input{
      width:64px;
      min-width:64px;
      padding:5px 7px;
      font-size: 0.90rem;
    }
    .mixval .unit{
      font-size:0.90rem;
      color:#333;
      padding-bottom:2px;
    }

    /* Conditions shared */
    .condline{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:nowrap;
      white-space:nowrap;
      padding-top: 6px;
      justify-content:flex-start;
    }
    .conditem{
      display:inline-flex;
      align-items:center;
      gap:5px;
      font-size:0.88rem;
      color:#111;
      margin:0;
      white-space:nowrap;
    }
    .conditem input[type="radio"]{ width:auto; }

    /*--------------- Row 6: Oxygen/Nitrogen/Helium block = 3 columns × 2 rows */
    .mix3{
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
      column-gap: 2px;
      row-gap: 4px;
      align-items: start;
      white-space: nowrap;
      margin-top:-10px;
      padding-right: 34px;
    }

    .mix3 .mixlbl{
      font-size: 0.74rem;
      line-height: 1.05;
      color: #333;
      text-align: start;
      padding-bottom: 4px;
      padding-left: 4px;
    }

    .mix3 .mixval{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
    }

    .mix3 .mixval input{
      width: 40px;
      min-width: 40px;
    }
    /*------------------------------------- Gas mixture radios (Air / EANx / Trimix) */
    .mixradios{
      display:flex;
      align-items:center;
      gap:20px;
      white-space:nowrap;
    }

    /* One radio + its label */
    .mixitem{
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-size:0.88rem;
      margin-top:6px;
      white-space:nowrap;
    }

    /* Don’t let global input width rules stretch radios */
    .mixitem input[type="radio"]{
      width:auto !important;
      min-width:0 !important;
      max-width:none !important;
    }

    #water_access_other, #body_of_water_other{
      width: 100px;
      min-width: 100px;
      padding: 5px 7px;
      font-size: 0.88rem;
    }

    /* image-5 row (pg boxes) */
    .f.pgbox { width: 110px; min-width: 110px; }
    .f.pgbox input { width: 40px; min-width: 40px; }
    .lblunits { display:flex; align-items:baseline; gap:6px; }
    .lblunits .u { font-style: italic; }

    /* image-6 row (calc boxes) */
    .f.calcbox { width: 140px; min-width: 140px; }
    .f.calcbox input { width: 40px; min-width: 40px; }
    .calcop{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 14px;
      min-width: 14px;
      font-size: 1.15rem;
      line-height: 1;
      color: #111;
      padding-bottom: 8px;
    }

    /* Dive type other input
    #dive_type_other{
      width: 180px;
      min-width: 180px;
      padding: 5px 7px;
      font-size: 0.90rem;
    }
 */
    /* image-8 sections */
    .sec-line{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:nowrap;
      white-space:nowrap;
    }
    .chk{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:0.90rem;
      margin:0;
      white-space:nowrap;
    }
    .chk input[type="checkbox"]{ width:auto; }
    .sec-line input[type="text"]{
      width: 260px;
      min-width: 220px;
      padding: 6px 7px;
      font-size:0.90rem;
    }
    .cam-mini{
      display:grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto;
      column-gap: 16px;
      row-gap: 2px;
      align-items:center;
      padding-left: 8px;
      margin-top: -16px;
    }
    .cam-mini .mlbl{
      font-size:0.78rem;
      color:#333;
      line-height:1.1;
      text-align:center;
      margin-bottom:0;
    }
    .cam-mini .mchk{
      display:flex;
      justify-content:center;
      align-items:center;
      margin:0;
    }
    .cam-mini input[type="checkbox"]{ width:auto; }

    /* Substrate other input */
    #substrate_other{
      width: 180px;
      min-width: 140px;
      padding: 5px 7px;
      font-size: 0.88rem;
    }

    /* Verification line */
    #verification_text{ width: 210px; min-width: 210px; padding: 6px 7px; font-size: 0.92rem; }
    .vline{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; white-space:nowrap; padding-top:0px; }
    .vitem{ display:inline-flex; align-items:center; gap:5px; font-size:0.88rem; margin:0; white-space:nowrap; }
    .vitem input[type="radio"]{ width:auto; }

    /* Bottom time grid */
    .btgrid{
      display:grid;
      grid-template-columns:  60px 60px 90px;
      gap: 10px;
      align-items:center;
	  padding-top: 4px ;
    }
    .btcell input{
      width: 52px;
      min-width: 52px;
      padding: 6px 7px;
      font-size: 0.92rem;
    }

    /* Table styles */
    table { width:100%; border-collapse: collapse; font-size: 0.93rem; }
    th, td { text-align:left; padding:8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
    th { font-size: 0.82rem; color:#444; }
    .nowrap { white-space: nowrap; }
    .right { text-align:right; }

    /* ===== ONE BREAKPOINT ===== */
    @media (max-width: 1100px){
      .strip.row1,
      .strip.row2,
      .strip.row4,
      .strip.row5,
      .strip.row6,
      .strip.row8,
      .strip.row9,
      .strip.row10,
      .strip.row11,
      .strip.row12,
      .strip.row13,
      .strip.row14,
      .strip.row15,
      .strip.row16,
      .strip.row17,
      .strip.row18,
      .strip.row19{
        grid-template-columns: 1fr !important;
        grid-auto-flow: row !important;
        grid-auto-columns: 1fr !important;
      }

      .unit-inline input { width: 100%; min-width: 0; }
      #gear_other, #substrate_other{ width: 170px; min-width: 140px; }
      #cylinder_other{ width: 130px; min-width: 110px; }
      #water_access_other, #body_of_water_other{ width: 40px; min-width: 40px; }

      .mixgrid{ white-space: normal; }
      .mixval input{ width: 100%; min-width: 0; }

      .condline{ flex-wrap: wrap; white-space: normal; }

      .f.pgbox input, .f.calcbox input{ width: 100%; min-width: 0; }
      .calcop{ display:none; }

      #dive_type_other{ width: 100%; min-width: 0; }

      .sec-line{ flex-wrap: wrap; white-space: normal; }
      .sec-line input[type="text"]{ width: 100%; min-width: 0; }
      .cam-mini{ padding-left:0; }

      .vline{ flex-wrap: wrap; white-space: normal; }
      #verification_text{ width: 100%; min-width: 0; }

      .btgrid{ grid-template-columns: 1fr; }
      .btcell input{ width: 100%; min-width: 0; }
    }

    /* ===== Custom radio + checkbox (no default blue) ===== */
    :root{
      --ctrl-border: #999;
      --ctrl-fill: #111;     /* the dot/check color */
      --ctrl-bg: #fff;
      --ctrl-focus: #111;
    }

    input[type="radio"],
    input[type="checkbox"]{
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      margin: 0;
      border: 1.5px solid var(--ctrl-border);
      background: var(--ctrl-bg);
      display: inline-grid;
      place-content: center;
      vertical-align: middle;
    }

    /* Radios: round + dot */
    input[type="radio"]{
      border-radius: 50%;
    }
    input[type="radio"]::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      transform: scale(0);
      transition: transform 120ms ease-in-out;
      background: var(--ctrl-fill);
    }
    input[type="radio"]:checked::before{
      transform: scale(1);
    }

    /* Checkboxes: square + tick */
    input[type="checkbox"]{
      border-radius: 4px;
    }
    input[type="checkbox"]::before{
      content: "";
      width: 7px;
      height: 3px;
      border-left: 2px solid var(--ctrl-fill);
      border-bottom: 2px solid var(--ctrl-fill);
      transform: rotate(-45deg) scale(0);
      transition: transform 120ms ease-in-out;
      margin-top: -1px;
    }
    input[type="checkbox"]:checked::before{
      transform: rotate(-45deg) scale(1);
    }

    /* Focus ring (keyboard accessibility) */
    input[type="radio"]:focus-visible,
    input[type="checkbox"]:focus-visible{
      outline: 2px solid var(--ctrl-focus);
      outline-offset: 2px;
    }
    /* Radio: size  */
    input[type="radio"]{
      width: 16px !important;
      height: 16px !important;
      min-width: 16px !important;
      min-height: 16px !important;
      max-width: 16px !important;
      max-height: 16px !important;
    }
    /* Checkbox: size - not DISABLED FOR NOW */
    input[type="checkbox"]{
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
      max-width: 18px !important;
      max-height: 18px !important;
    }
    /* UNIT LABELS */
    .unit-inline .unit,
    .mixval .unit{
      font-style: italic;
      font-size: 0.182rem;  /* smaller */
      color:#333;
      line-height: 1;
    }
    /* Force unit labels smaller everywhere */
    .unit-inline .unit,
    .mixval .unit{
      font-style: italic;
      font-size: 0.82rem !important;  /* change this */
      line-height: 1;
    }
    /* Force ALL unit labels (mm, m, min, %, bar, etc.) to be small + italic */
    .unit-inline .unit,
    .mixval .unit{
      font-style: italic !important;
      font-size: 0.88rem !important;  /* adjust */
      line-height: 1 !important;
    }

    /* Row 2: stop SS content from bottom-sinking */
    .strip.row2 .ss-inline{
      align-items: center;   /* was flex-end */
    }

    /* Remove number input spinners (Chrome/Edge/Safari) */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button{
      -webkit-appearance: none;
      margin: 0;
    }

    /* Remove number input spinners (Firefox) */
    input[type="number"]{
      -moz-appearance: textfield;
    }
    /* Row 4: suit thickness box length (override unit-inline defaults) */
    .strip.row4 .f.mm .unit-inline input[name="suit_thickness_mm"]{
      width: 55px !important;
      min-width: 40px !important;
      max-width: 40px !important;
    }

    /* Right-align numbers inside numeric inputs */
    input[type="number"]{
      text-align: right;
    }
    /* Row 5 should NOT bottom-align (it makes Weight feel sit lower than Cylinder) */
    .strip.row5{
      align-items: start;
    }
    .strip.row8 .f.cond2 .condline{ gap:14px; padding-top: 14px}
    .strip.row8 .f.cond2 .conditem{ gap:6px; font-size:0.88rem;  }
    .strip.row8 .f.cond2 input[type="radio"]{ top:1px;  }

    .strip.row12 label{ padding-left: 4px ; }
    .strip.row13 label{ padding-left: 4px ; }

    .strip.row15{ grid-template-columns: 230px 410px 180px; grid-auto-columns: unset; padding-bottom: 4px;}

    /* Row 15: allow these text inputs to have explicit widths */
    .strip.row15 #dc_text{ width: 180px !important; max-width: 180px !important; min-width: 180px !important; }
    .strip.row15 #cam_text{ width: 240px !important; max-width: 240px !important; min-width: 240px !important; }


    /* Row 19: force grid columns to be respected */
    .strip.row19{
      display:grid;
      grid-auto-flow: unset;
      grid-auto-columns: unset;
      grid-template-columns: 340px ;
      column-gap: 12px;
      align-items: end;
    }

    .strip.row19 > .f{
      width: auto !important;
      min-width: 0 !important;
      justify-self: stretch;
    }

    /* Row 19: control the box width (override global width:100%) */
    .strip.row19 #bt_to_date,
    .strip.row19 #bt_this_dive,
    .strip.row19 #bt_total{
      width:60px !important;
      min-width:60px !important;
      max-width:60px !important;
    }
    .strip.row18{
      grid-template-columns: 220px 320px 100px;
      grid-auto-columns: unset;
      grid-auto-flow: unset;
      column-gap: 12px;
      align-items: start;
    }

    .strip.row18 input[name="dive_center"]{
      width: 200px !important;
      max-width: 200px !important;
    }

    /* Row 2: center the HH:MM text in Time In/Out */
    .strip.row2 #time_in,
    .strip.row2 #time_out{
      text-align: center !important;
    }
    /* Header logo (independent sizing from universal .ico) */
    .brand{
      display:flex;
      align-items:flex-start;
      gap:12px;
    }

    .brand-logo{
      height:96px;
      width:auto;
      flex:0 0 auto;
    }

    .brand-text{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    /* ---------- Consistent "mini" numeric widths ---------- */
    :root{
      --mini-num-w: 44px;
    }

    /* numeric minis */
    .f.mini input[type="number"]{
      width: var(--mini-num-w) !important;
      min-width: var(--mini-num-w) !important;
      max-width: var(--mini-num-w) !important;
    }
	
	.form-card{
  border: none !important;
}
.strip.row1{ grid-template-columns: 80px 200px 240px 160px 140px; padding-bottom: 4px; column-gap:30px; }
 /* ----------
 .f.dive input { width: 50px;  margin-left: 0px;  }
 ---------- */
.strip.row2{ grid-template-columns: 90px 120px 210px 80px 110px 100px 100px; padding-bottom: 4px;}
 .strip.row2 .f.max .unit-inline input { width: 50px; min-width: 50px; margin-left: 0px; align-self: flex-start;}
 
 /* Gear wrap into 2 lines like the paper */
.f.gear .gearline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:14px;
  margin-left: 4px;
  margin-top: 6px;
  row-gap:8px;
}

/* This forces the next items to start on a new line */
.f.gear .gear-break{
  flex-basis:100%;
  height:0;
}


/* Make Gear label sit left, controls right */
.f.gear{
  display:grid;
  grid-template-columns: 70px 1fr; /* label col, controls col */
  column-gap: 12px;
  align-items:start;
}

.f.gear .side-label .lbl-ico{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* Wrap checkboxes into 2 lines */
.f.gear .gearline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:14px;
  row-gap:8px;
  }

/* Force next items to new line after Knife */
.f.gear .gear-break{
  flex-basis:100%;
  height:0;
}

/* Keep Other input on same row, allow it to grow */
.f.gear #gear_other{
  flex: 1 1 220px;
  min-width: 160px;
  max-width: 320px; /* optional */
}


/* Dive Type: label left, radios right */
.strip.row14 .f.divetype{
  display:grid;
  grid-template-columns: 110px 1fr; /* left label col, right controls col */
  column-gap: 24px;
  align-items:start;
  padding-bottom: 4px;
}

/* Make the right side wrap into 2 lines */
.strip.row14 .dtline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:34px;
   margin-top: 6px;
  row-gap:2px;
}

/* Force a hard line break after Search */
.strip.row14 .dt-break{
  flex-basis:100%;
  height:0;
}

/* Keep "Other" + input together and aligned */
.strip.row14 .dt-other{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* Size the Other input; stays next to Other label but can wrap if needed */
.strip.row14 #dive_type_other{
  flex: 0 0 auto;
  width: 240px;      /* adjust */
  max-width: 260px;  /* optional */
}


/* Row 11 Substrate: label left, checkboxes right */
.f.substrate{
  display:grid;
  grid-template-columns: 110px 1fr; /* left label col, right controls col */
  column-gap: 24px;
  align-items:start;
}

/* Wrap to 2 lines */
.strip.row11 .subline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:30px;
  row-gap:6px;
  margin-top: 6px;
}

/* Force a hard line break after Coral */
.strip.row11 .sub-break{
  flex-basis:100%;
  height:0;
}

/* Keep "Other" + input together */
.strip.row11 .sub-other{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* Size the Other input */
.strip.row11 #substrate_other{
  flex: 0 0 auto;
  width: 240px;     /* adjust */
  max-width: 240px; /* optional */
}
.strip.row11{
  grid-template-columns: 90px 260px 1fr;
  column-gap: 14px;
  align-items:start;
  column-gap:20px;
  padding-bottom: 4px;
}
.strip.row11 .f.vis_rate .condline{ gap:24px; padding-top: 18px }


/* Row 14 */
.strip.row14{
  grid-template-columns: 630px 160px; /* Dive Type + Wreck */
  column-gap: 14px;
  align-items:start;
}

/* Wreck box should behave like other .sec blocks */
.strip.row14 .f.wreck .sec-line{
  display:flex;
  align-items:left;
  gap:10px;
}

.strip.row14 #wreck_text{ width: 300px !important; max-width: 300px !important; min-width: 300px !important; }

.strip.row6 .f.calcbox{
margin-top: 4px;
}
.strip.row6 .f.calcbox .unit-inline input{
margin-top: 4px;
width: 48px; 
}
.strip.row6 .f.calcbox label{
align-items: start;
padding-left: 4px;
}

.strip.row17{ grid-template-columns: 290px 450px 180px ; padding-bottom: 6px;   column-gap: 30px; }

/* Notes + BottomTime row */
.strip.rowNotesBT{
  display:grid;
  grid-template-columns: 1fr 240px;  /* left Notes, right Bottom Time */
  column-gap: 30px;
  align-items:start;
}

/* Make notes textarea not too tall vs bt */
.strip.rowNotesBT .f.notes textarea{
  min-height: 130px; /* adjust */
}

/* Ensure btgroup doesn't stretch weirdly */
.strip.rowNotesBT .f.btgroup{
  min-width: 0; /* important in grid */
}

.f.pbar .lbl-ico .ico{
  width: 24px;
  height: 24px;
  flex: 0 0 20px;
  object-fit: contain;
  padding-bottom:2px;
}

.strip.row10 .condline{ gap:20px; }
.strip.row9 .condline{ gap:30px; }
.strip.row8 .condline{ gap:20px; }
.strip.row5 .wchoices{ gap:20px; }
.strip.row5 .cchoices{ gap:20px; }


/* Suit radios */
.f.suit .suitline{
  display:flex;
  flex-wrap:wrap;      /* allows wrap if not enough space */
  align-items:center;
  column-gap:14px;
  padding-top: 10px;
  row-gap:8px;
}

.f.suit .suititem{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
/* ------------------ Index page --------------- */
/* Index page should be full-width */
.index-wide{
  width: 100%;
  max-width: none;
}

/* Make the table usable and wide */
.table-wrap{ overflow: auto; }

/* Header icons */
.th-ico{
  width: 28px;
  height: 28px;
  vertical-align: -8px;
  margin-right: 6px;
}


/* Tooltips (header icons) - rendered in a single fixed popover so it's not clipped by the table scroller. */
.th-ico-wrap{
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.tooltip-pop{
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-9999px, -9999px);
  opacity: 0;
  pointer-events: none;
  z-index: 5000;

  padding: 6px 8px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;

  transition: opacity .12s ease;
}

.tooltip-pop.show{
  opacity: 1;
}

/* Optional: denser table */
table.dense th, table.dense td{
  padding: 8px 8px;
}
/* Full-width canvas for index page (header + content) */
.index-canvas{
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 16px;
  padding-right: 16px;
}

/* Index table header font size */
.index-canvas table.dense thead th{
  font-size: 16px;      /* change */
  font-weight: 600;     /* optional */
  line-height: 1.1;     /* optional */
}

/* Index table column widths (match your column order) */
.index-canvas table.dense{
  table-layout: fixed;     /* makes width rules actually respected */
  width: 100%;
}

.index-canvas table.dense th,
.index-canvas table.dense td{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 1 Dive # */
.index-canvas table.dense th:nth-child(1),
.index-canvas table.dense td:nth-child(1){ width: 20px; }

/* 2 Date */
.index-canvas table.dense th:nth-child(2),
.index-canvas table.dense td:nth-child(2){ width: 50px; }

/* 3 Label */
.index-canvas table.dense th:nth-child(3),
.index-canvas table.dense td:nth-child(3){ width: 80px; }

/* 4 Location */
.index-canvas table.dense th:nth-child(4),
.index-canvas table.dense td:nth-child(4){ width: 60px; }

/* 5 Max depth */
.index-canvas table.dense th:nth-child(5),
.index-canvas table.dense td:nth-child(5){ width: 20px; }

/* 6 ADT */
.index-canvas table.dense th:nth-child(6),
.index-canvas table.dense td:nth-child(6){ width: 20px; }

/* 7 Weight */
.index-canvas table.dense th:nth-child(7),
.index-canvas table.dense td:nth-child(7){ width: 20px; }

/* 8 Cylinder size */
.index-canvas table.dense th:nth-child(8),
.index-canvas table.dense td:nth-child(8){ width: 20px; }

/* 9 Gas */
.index-canvas table.dense th:nth-child(9),
.index-canvas table.dense td:nth-child(9){ width: 10px; }

/* 10 Used */
.index-canvas table.dense th:nth-child(10),
.index-canvas table.dense td:nth-child(10){ width: 20px; }

/* 11 RMV */
.index-canvas table.dense th:nth-child(11),
.index-canvas table.dense td:nth-child(11){ width: 20px; }

/* 12 Bottom temp */
.index-canvas table.dense th:nth-child(12),
.index-canvas table.dense td:nth-child(12){ width: 20px; }

/* 13 Dive Type */
.index-canvas table.dense th:nth-child(13),
.index-canvas table.dense td:nth-child(13){ width: 20px; }

/* 14 Action */
.index-canvas table.dense th:nth-child(14),
.index-canvas table.dense td:nth-child(14){ width: 240px; }

.stat input{
      width: 60px !important;
      max-width: 60px !important;
    }
.stat label {
padding-left: 12px; !important;
    }

/* Right-align numeric columns in the index table */
table.dense th.num,
table.dense td.num {
  text-align: center;
  padding-right: 10px; /* small breathing room so it's not glued to the edge */

}

/* Optional: makes numbers line up nicer */
table.dense td.num {
  font-variant-numeric: tabular-nums;
}

.index-canvas table.dense {
  table-layout: fixed;
  width: 100%;
}

.index-canvas table.dense th,
.index-canvas table.dense td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}