/* =======================================================================
   BISD GPT – Global Styles (no CSS variables)
   Palette: #264f9c (blue) | #b19455 (gold) | #efd297 (lt gold) | #fff | #000
   Font: Montserrat (load via <link> in the page head)
   ======================================================================= */

/* Reset & base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #000000;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: #264f9c; text-decoration: none; transition: color .15s ease; }
a:hover { color: #b19455; }

/* Layout */
.container { max-width: 1080px; margin: 0 auto; padding: 24px; }
.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  padding: 24px;
  margin-bottom: 24px;
}

/* Typography */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: .2px; color: #000000; }
h1 { font-size: 1.8rem; margin-bottom: 16px; }
h2 { font-size: 1.4rem; margin: 16px 0 8px; }
h3 { font-size: 1.1rem; margin: 12px 0 8px; font-weight: 600; }
p { line-height: 1.6; margin-bottom: 12px; }
small { color: #6b7280; }
pre.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#fafafa; border:1px solid #e5e7eb; border-radius:12px; padding:12px; white-space:pre-wrap;
}

/* Header */
.header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:24px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.2rem; color:#264f9c; }
.brand .dot { width:12px; height:12px; border-radius:50%; background:#264f9c; }
.helper { color:#6b7280; font-size:.9rem; }

/* Forms */
label { display:block; font-weight:600; margin:12px 0 6px; }
select, textarea, input[type="text"], input[type="number"], input[type="email"]{
  width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px;
  font: inherit; background:#ffffff; transition: border-color .15s, box-shadow .15s;
}
textarea { min-height:160px; line-height:1.5; resize:vertical; }
select:focus, textarea:focus, input:focus{
  border-color:#264f9c; box-shadow:0 0 0 4px rgba(38,79,156,.3); outline:0;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:10px; font-weight:700; cursor:pointer;
  padding:10px 18px; font-size:.95rem; transition: transform .05s, filter .15s, background .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.btn:active{ transform: translateY(1px); }

.btn-primary{ background:#264f9c; color:#ffffff; }
.btn-primary:hover{ filter:brightness(1.08); }

.btn-gold{ background:#b19455; color:#ffffff; }
.btn-gold:hover{ filter:brightness(1.08); }

.btn-outline{ background:transparent; border:1px solid #264f9c; color:#264f9c; }
.btn-outline:hover{ background:#264f9c; color:#ffffff; }

/* Tables */
.table-wrap{ overflow-x:auto; border-radius:12px; border:1px solid #e5e7eb; margin-top:12px; background:#ffffff; }
table{ width:100%; border-collapse:collapse; }
th, td{ border-bottom:1px solid #e5e7eb; padding:12px 14px; vertical-align:top; text-align:left; font-size:.9rem; }
th{ background:#f8fafc; font-weight:700; }
tr:last-child td{ border-bottom:none; }

/* Badges & misc */
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.8rem;
  background:#efd297; color:#5f470f; border:1px solid #e9d19c;
}
.badge.ok{ background:#e8f5e9; color:#0b6b0b; border-color:#cde7cf; }
.status{ margin-left:10px; color:#6b7280; font-size:.9rem; }

/* Collapsibles */
details{ border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; background:#ffffff; margin-top:12px; }
details>summary{ cursor:pointer; font-weight:600; color:#264f9c; outline:none; }
details[open]{ box-shadow: 0 1px 2px rgba(0,0,0,.05); }

/* Footer */
footer{ text-align:center; font-size:.85rem; color:#6b7280; margin:40px 0 20px; }

/* Responsive */
@media (max-width: 720px){
  .container{ padding:16px; }
  .card{ padding:16px; }
  h1{ font-size:1.5rem; }
  h2{ font-size:1.2rem; }
  .btn{ width:100%; justify-content:center; }
}

/* ---------- Tooltip styling ---------- */
.tooltip {
  position: relative;
  cursor: help;
}

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #264f9c;            /* brand blue */
  color: #ffffff;
  font-size: 0.8rem;
  line-height: 1.3;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: normal;
  width: 220px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #264f9c transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tooltip:hover::before {
  opacity: 1;
}