/* =========================================================
   GLOBAL
=========================================================*/
body{
  margin:0;
  font-family:'Segoe UI',Tahoma,Arial,sans-serif;
  background:#fff;
  color:#222;
  overflow-x:hidden;
}
.hidden{display:none}

/* =========================================================
   HEADER / BANNER
   – identical colour / height to original pages
=========================================================*/
.header{
  position:fixed;
  top:0;left:0;right:0;
  height:70px;
  background:#d9a9a9;       /* rose-tan banner */
  display:flex;
  align-items:center;
  padding:0 14px;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  z-index:1000;
}
.logo{height:42px;margin:0 10px}
.hamburger,#menuButton{
  font-size:30px;
  background:none;
  border:none;
  color:#fff;
  width:40px;               /* equal width avoids layout shift */
  cursor:pointer;
}
.header h1{
  flex:1;
  text-align:center;
  font-size:28px;
  margin:0;
  color:#fff;
}

/* =========================================================
   SIDEBAR
   – legacy pages may still toggle .hidden
   – new menu.js toggles .visible + overlay
=========================================================*/
.sidebar{
  position:fixed;
  top:70px;                  /* sits under banner */
  left:0;
  width:220px;
  height:100%;
  background:#f1f1f1;
  box-shadow:2px 0 5px rgba(0,0,0,.15);
  overflow-y:auto;
}
/* legacy hide */
.sidebar.hidden{display:none}
/* shown by new script */
.sidebar.visible{display:block}

.sidebar a{
  display:block;
  padding:12px 20px;
  color:#333;
  text-decoration:none;
}
.sidebar a:hover{background:#ececec}

/* =========================================================
   RIGHT-HAND DROPDOWN
   – same look & feel as sidebar entries
=========================================================*/
.menu-dropdown{
  position:absolute;
  top:70px;
  right:14px;
  min-width:150px;
  background:#fff;
  border:1px solid #ccc;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
  z-index:1001;
  font-family:inherit;
}
.menu-dropdown.hidden{display:none}

.menu-dropdown div{
  padding:12px 20px;
  color:#333;
  cursor:pointer;
  border-bottom:1px solid #eee;
}
.menu-dropdown div:hover{background:#ececec}

/* =========================================================
   SLIDE-IN DRAWERS (Options page)
=========================================================*/
.drawer{
  position:fixed;top:70px;right:-380px;width:360px;height:calc(100% - 70px);
  background:#fafafa;
  padding:22px;
  box-shadow:-2px 0 8px rgba(0,0,0,.18);
  transition:right .25s ease;
  box-sizing:border-box;          /* ← ensures 360 px includes the padding */
  z-index:970;
  overflow-y:auto;
}
.drawer.open{right:0}
.drawer h3{margin-top:0}
.drawer input,
.drawer select{
  width:100%;
  padding:6px 8px;
  margin:6px 0 10px;
  font-size:14px;
}
/* form controls align nicely */
.drawer button{margin-right:6px;margin-top:4px; font-size:14px;}

/* =========================================================
   MAIN CONTENT / TABLE
=========================================================*/
.content{
  margin-top:80px;           /* 70px banner + 10px gap */
  padding-left:20px;
}

#options-table-container{
  overflow-x:auto;
  margin-top:14px;
}

table{
  width:100%;
  border-collapse:collapse;
}
th,td{
  border:1px solid #c8c8c8;
  padding:6px 8px;
  text-align:right;
  font-size:14px;
}
th{
  background:#f2f2f2;
  text-align:center;
}
td input[type="number"]{
  width:80px;
  text-align:right;
}

/* =========================================================
   TOOLTIP for ActiveOptionsString
=========================================================*/
.tooltip{position:relative;cursor:pointer}
.tooltiptext{
  visibility:hidden;
  position:absolute;
  left:100%;
  top:0;
  width:260px;
  background:#333;
  color:#fff;
  padding:8px;
  border-radius:4px;
  white-space:pre-wrap;
  z-index:980;
}
.tooltip:hover .tooltiptext{visibility:visible}
/* Active-options cell width + left-align */
td.active-snippet{max-width:160px;text-align:left}

/* drawer tables look clean */
.drawer table td{padding:4px 6px;text-align:left}
/* ---------- compact Bottom-Line table ---------- */
table.bottom-line{
  width:auto;                     /* shrink to content */
  border-collapse:collapse;
  margin-bottom:1rem;
}
table.bottom-line th,
table.bottom-line td{
    font-size:1.05rem;          /* ← visibly larger (≈ 20 px) */
    padding:4px 8px;
  white-space:nowrap;             /* prevent wrapping */
}
table.bottom-line td:nth-child(2){text-align:right;}   /* numbers right-aligned */

table.losses-table{
  width:auto;                     /* shrink to content */
  border-collapse:collapse;
  margin-bottom:1rem;
}
table.losses-table th,
table.losses-table td{
    padding:10px 14px;
  white-space:nowrap;             /* prevent wrapping */
}
table.losses-table td:nth-child(2){text-align:right;}   /* numbers right-aligned */

/* === Options Caddy tweaks === */
#premium-label{
  font-size:1.4rem !important;
  font-weight:700;
  margin-bottom:0.6rem;
}

.caddy-th{
  font-size:1.15rem !important;
  font-weight:700;
}

/* ───────── analytics tweaks (14 Sep 2025) ───────── */
.tbl‑header  td { background:#e0e0e0; font‑weight:700; }  /* gray header row   */
.big‑btn      { padding:10px 24px; font‑weight:700; }     /* large bold button */
#row-table td { padding:2px 6px; }                        /* align row picker  */
.is-put { color: blue; }

/* Action Items layout helpers */
.section-header{
  display:flex;
  align-items:baseline;           /* aligns with H2 baseline */
  justify-content:space-between;  /* push controls to the right */
  gap:12px;
  margin:6px 0 10px;
}
.ai-controls{
  display:flex;
  align-items:center;
  gap:12px;
}