/* assets/css/styles.css
   Unified styles: cards, drawer, modal theme, insight tables, selector modal
   Derived from index.php, modals.php and explore_module.php (consolidated)
*/

/* ---------- Root theme vars ---------- */
:root{
  --bottle-green: #0f4b48;
  --bottle-green-rgb: 15,75,72;
  --pastel-green: #dff5e1;
  --gold-rgb: 212,175,55;
  --radius: 12px;
  --compact-h: 110px;
  --card-font-size: 0.95rem;
  --muted-ink: rgba(15,75,72,0.72);
  --max-width: 980px;
  --shadow-elevation: 0 12px 34px rgba(11,23,22,0.06);
  --transition-fast: 120ms;
  --focus-ring: 3px;
  --base-font-size: 16px;
  --small-size: 0.78rem;
}

/* ---------- Base ---------- */
*,
*::before,*::after{box-sizing:border-box}
html{font-size:var(--base-font-size); -webkit-text-size-adjust:100%}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:linear-gradient(135deg,#eef7f6 0%,#f8fbff 100%);color:var(--bottle-green);}

/* ---------- Layout ---------- */
.universe-container{max-width:var(--max-width);margin:.5rem auto;padding:.25rem;min-height:calc(100vh - 110px)}
.grid-wrap{background:linear-gradient(180deg, rgba(223,245,225,0.95), rgba(183,224,176,0.98));border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-elevation);border:1px solid rgba(var(--bottle-green-rgb),0.06);transition:box-shadow var(--transition-fast)}

/* ---------- Card / tiles ---------- */
.card-option{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;font-weight:700;border-radius:calc(var(--radius)-2px);color:var(--bottle-green);background:linear-gradient(180deg, rgba(223,245,225,0.85), rgba(255,255,255,0.65));min-height:var(--compact-h);padding:10px;border:1px solid rgba(var(--bottle-green-rgb),0.12);box-shadow:0 6px 18px rgba(var(--gold-rgb),0.08);transition:transform var(--transition-fast),box-shadow var(--transition-fast);text-decoration:none;cursor:pointer;font-size:var(--card-font-size);line-height:1.05}
.card-option small{display:block;font-size:var(--small-size);font-weight:600;color:var(--muted-ink);margin-top:4px}
.card-option:focus-visible{outline:none;box-shadow:0 12px 30px rgba(var(--gold-rgb),0.12),0 0 0 var(--focus-ring) rgba(var(--bottle-green-rgb),0.12);transform:translateY(-3px)}
@media (hover:hover) and (pointer:fine){.card-option:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(var(--gold-rgb),0.14)}}

/* ---------- Drawer / second opinion ---------- */
.so-panel{position:fixed;left:50%;transform:translateX(-50%) translateY(8px) scale(0.99);bottom:72px;width:min(720px,calc(100vw - 28px));max-height:78vh;border-radius:14px;background:linear-gradient(180deg,#eaf9ee,#fff);border:1px solid rgba(var(--bottle-green-rgb),0.1);box-shadow:0 28px 60px rgba(7,32,30,0.22);padding:14px;opacity:0;pointer-events:none;z-index:1200;transition:transform 260ms cubic-bezier(.2,.9,.3,1),opacity 240ms ease;display:flex;flex-direction:column;gap:8px}
.so-drawer-open .so-panel{transform:translateX(-50%) translateY(0) scale(1);opacity:1;pointer-events:auto}
.so-toggle{display:inline-flex;align-items:center;gap:10px;padding:5px 10px;border-radius:999px;background:linear-gradient(90deg,var(--bottle-green),rgba(10,50,48,0.95));color:#fff;border:0;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(11,23,22,0.18)}
.so-head h3{margin:0;font-size:1.05rem;color:var(--bottle-green)}
.so-steps{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.so-steps li{background:rgba(var(--bottle-green-rgb),0.04);padding:8px;border-radius:8px;font-weight:600}

/* ---------- Modal theme (consistent) ---------- */
.modal-dialog{max-width:80vw;width:80vw}
.modal-content{display:flex;flex-direction:column;height:80vh;background:linear-gradient(180deg,var(--pastel-green),#ffffff);color:var(--bottle-green);border-radius:12px;border:1px solid rgba(var(--bottle-green-rgb),0.08);box-shadow:0 18px 46px rgba(7,32,30,0.12)}
.modal-header,.modal-footer{flex:0 0 auto;background:transparent;border-bottom:1px solid rgba(var(--bottle-green-rgb),0.04);padding:12px 16px;position:sticky;z-index:5}
.modal-footer{border-top:1px solid rgba(var(--bottle-green-rgb),0.04);display:flex;align-items:center;justify-content:space-between;gap:8px}
.modal-body{overflow-y:auto;padding:14px 16px;flex:1 1 auto;-webkit-overflow-scrolling:touch;font-size:0.95rem}

/* insight-table styling */
.insight-table{width:100%;border-collapse:collapse;margin-top:10px;background:#fff}
.insight-table th,.insight-table td{border:1px solid rgba(var(--bottle-green-rgb),0.12);padding:8px;text-align:left;vertical-align:top}
.insight-table thead th{position:sticky;top:0;background:var(--pastel-green);z-index:10}

/* selector modal (course/city) */
.course-list .list-group-item{cursor:pointer;padding:0.6rem 0.75rem;display:flex;justify-content:space-between;align-items:center}
#selected-badges .badge{font-size:0.85rem;padding:0.4rem 0.6rem;margin-right:0.4rem}
.search-small{width:100%;margin-bottom:0.5rem}
.confirm-btn{padding:0.6rem 1rem;font-weight:600}

/* data table (explore) */
.data-table{width:100%;font-size:0.95rem}
.data-table th,.data-table td{white-space:normal !important;word-wrap:break-word;vertical-align:middle;padding:0.45rem}
.data-table thead th{position:sticky;top:0;background:#343a40;color:#fff;cursor:pointer;z-index:2}

/* helper utilities */
.small-muted{color:rgba(var(--bottle-green-rgb),0.66);font-size:0.9rem}
.tiny-note{font-size:0.68rem;color:rgba(var(--bottle-green-rgb),0.64)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* responsive adjustments */
@media (max-width:680px){.modal-dialog{max-width:96vw;width:96vw}.modal-content{height:calc(100vh - 40px)}.so-panel{width:calc(100vw - 28px);bottom:84px}}