/* ==========================================================================
   Interactive tools — visa map and deadline calendar.
   Theme: page-visa-map.php, page-deadline-calendar.php
   These two views are the React/Vue components in the stack; everything else
   stays server-rendered.
   ========================================================================== */

/* --- Shared: placeholder-data notice ------------------------------------ */
.data-notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--warn) 36%, transparent);
  background: var(--warn-soft); border-radius: var(--r-md);
  font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-base);
  margin-bottom: var(--s-5);
}
.data-notice svg { width: 15px; height: 15px; color: var(--warn); flex: none; margin-top: 1px; }
.data-notice b { color: var(--warn); }

/* --- Stat row ------------------------------------------------------------ */
.stat-row {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--s-6);
}
@media (min-width: 760px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
.stat b {
  display: block; font-size: var(--fs-2xl); line-height: 1.1;
  font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat span { font-size: var(--fs-xs); color: var(--text-muted); }
.stat--free b { color: var(--st-free); }
.stat--voa b  { color: var(--st-voa); }
.stat--evisa b{ color: var(--st-evisa); }

/* --- Map ----------------------------------------------------------------
   Status colours are semantic, not the section accent, and are picked to
   stay distinguishable for the common forms of colour blindness — the
   legend and the country table carry the same information in words.
   ------------------------------------------------------------------------ */
:root {
  --st-free:     #0E9F6E;
  --st-voa:      #3B82F6;
  --st-evisa:    #F59E0B;
  --st-required: #82958B;
  --st-home:     #7C3AED;
}
:root[data-theme="dark"] {
  --st-free:     #34D399;
  --st-voa:      #60A5FA;
  --st-evisa:    #FBBF24;
  --st-required: #46545F;
  --st-home:     #A78BFA;
}

.map-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  margin-bottom: var(--s-6);
}
.map-toolbar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.map-search {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); min-width: 220px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg);
}
.map-search:focus-within { border-color: var(--accent); }
.map-search svg { color: var(--text-faint); flex: none; }
.map-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: var(--fs-sm); }

.legend { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-inline-start: auto; }
.legend button {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); cursor: pointer;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.legend button:hover { color: var(--text); border-color: var(--border-strong); }
.legend button[aria-pressed="false"] { opacity: .42; }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend b { font-variant-numeric: tabular-nums; color: var(--text); }

.map-stage { position: relative; background: var(--bg-subtle); }
.worldmap { display: block; width: 100%; height: auto; }
.worldmap .cty {
  fill: var(--st-required);
  stroke: var(--bg-subtle); stroke-width: .7;
  transition: fill var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  cursor: pointer;
}
.worldmap .cty[data-s="visa_free"] { fill: var(--st-free); }
.worldmap .cty[data-s="visa_on_arrival"]   { fill: var(--st-voa); }
.worldmap .cty[data-s="evisa"] { fill: var(--st-evisa); }
.worldmap .cty[data-s="home"]  { fill: var(--st-home); }
.worldmap .cty[data-dim="true"] { opacity: .18; }
.worldmap .cty:hover { stroke: var(--text); stroke-width: 1.1; }
.worldmap .cty[data-selected="true"] {
  stroke: var(--text); stroke-width: 1.6;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--text) 40%, transparent));
}
.worldmap .cty:focus-visible { outline: none; stroke: var(--text); stroke-width: 1.8; }

.map-tip {
  position: absolute; z-index: 10; pointer-events: none;
  padding: var(--s-2) var(--s-3);
  background: var(--text); color: var(--bg);
  border-radius: var(--r-sm); font-size: var(--fs-xs); white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translate(-50%, -130%);
  transition: opacity var(--dur-fast) var(--ease);
}
.map-tip[data-show="true"] { opacity: 1; }
.map-tip b { display: block; font-weight: var(--fw-semi); }
.map-tip span { opacity: .75; }

/* --- Country detail panel ------------------------------------------------ */
.map-detail {
  padding: var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.map-detail__empty { font-size: var(--fs-sm); color: var(--text-faint); text-align: center; padding: var(--s-4); }
.map-detail__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.map-detail__head h3 { font-size: var(--fs-lg); }
.status-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 3px var(--s-3); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: #fff;
}
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.85); }
.status-pill[data-s="visa_free"]     { background: var(--st-free); }
.status-pill[data-s="visa_on_arrival"]      { background: var(--st-voa); }
.status-pill[data-s="evisa"]    { background: var(--st-evisa); color: #3d2a00; }
.status-pill[data-s="visa_required"] { background: var(--text-faint); }
.status-pill[data-s="home"]     { background: var(--st-home); }
.map-detail__facts { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.map-detail__facts div { font-size: var(--fs-sm); }
.map-detail__facts dt { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 2px; }
.map-detail__facts dd { margin: 0; font-weight: var(--fw-medium); }
.map-detail__note { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-muted); }

/* --- Country table (the indexable, accessible copy of the map) ---------- */
.country-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.country-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.country-table th, .country-table td {
  text-align: start; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.country-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-alt); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
}
.country-table tbody tr:hover { background: var(--surface-alt); }
.country-table tbody tr:last-child td { border-bottom: 0; }
.country-table td:first-child { font-weight: var(--fw-medium); }
.country-table a { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   Deadline calendar
   ========================================================================== */
.cal-toolbar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.cal-nav { display: flex; align-items: center; gap: var(--s-2); }
.cal-nav h2 { font-size: var(--fs-lg); min-width: 11ch; text-align: center; }
.cal-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-inline-start: auto; }
.cal-filters button {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); cursor: pointer;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted);
}
.cal-filters button[aria-pressed="false"] { opacity: .4; }
.cal-filters i { width: 9px; height: 9px; border-radius: 50%; }

.cal-layout { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1000px) { .cal-layout { grid-template-columns: minmax(0,1fr) 320px; gap: var(--s-8); } }

.cal {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface);
}
.cal__dow {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
}
.cal__dow span {
  padding: var(--s-2); text-align: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-muted);
}
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__day {
  position: relative; min-height: 96px;
  padding: var(--s-2);
  border-inline-end: 1px solid var(--border);
  border-block-end: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; overflow: hidden;
  text-align: start; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.cal__day:nth-child(7n) { border-inline-end: 0; }
.cal__day:hover { background: var(--surface-alt); }
.cal__day--out { background: var(--bg-subtle); cursor: default; }
.cal__day--out:hover { background: var(--bg-subtle); }
.cal__day[data-selected="true"] { background: var(--brand-100); box-shadow: inset 0 0 0 2px var(--brand-500); }
.cal__num {
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.cal__day--out .cal__num { opacity: .4; }
.cal__day--today .cal__num {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand-500); color: #fff;
}
.cal-ev {
  display: block; width: 100%; min-width: 0; max-width: 100%;
  padding: 2px var(--s-2); border-radius: var(--r-sm);
  font-size: 10.5px; line-height: 1.35;
  text-align: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--ev-soft); color: var(--ev);
  border-inline-start: 2px solid var(--ev);
}
.cal-ev[data-sec="scholarships"] { --ev: var(--sec-scholarships); --ev-soft: var(--sec-scholarships-soft); }
.cal-ev[data-sec="local"]        { --ev: var(--sec-local);        --ev-soft: var(--sec-local-soft); }
.cal-ev[data-sec="internships"]  { --ev: var(--sec-internships);  --ev-soft: var(--sec-internships-soft); }
.cal-ev[data-sec="overseas"]     { --ev: var(--sec-overseas);     --ev-soft: var(--sec-overseas-soft); }
.cal-ev[data-sec="visas"]        { --ev: var(--sec-visas);        --ev-soft: var(--sec-visas-soft); }
.cal__more { font-size: 10px; color: var(--text-faint); padding-inline-start: var(--s-2); }

@media (max-width: 720px) {
  .cal__day { min-height: 56px; }
  .cal-ev { font-size: 0; padding: 0; height: 5px; border-radius: 3px; border-inline-start: 0; background: var(--ev); }
  .cal__more { display: none; }
}

.day-panel { display: grid; gap: var(--s-3); }
.day-panel__head { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.day-item {
  position: relative; display: block;
  padding: var(--s-3); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  border-inline-start: 3px solid var(--accent);
}
.day-item:hover { border-color: var(--accent); }
.day-item b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.day-item span { font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Homepage map teaser -------------------------------------------------
   A static, server-coloured preview of the interactive map — the whole
   thing is one link through to /visa-map/, so the countries do not need
   their own hover/click states here. */
.map-teaser {
  display: block; aspect-ratio: 21 / 9; border-radius: var(--r-md);
  background: var(--bg-subtle); border: 1px solid var(--border);
  overflow: hidden; position: relative;
}
.map-teaser .worldmap {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: auto;
}
.map-teaser .cty { cursor: inherit; }
.map-teaser .cty:hover { stroke: var(--bg-subtle); stroke-width: .7; } /* no per-country hover on a teaser */
.map-teaser:hover { border-color: var(--border-strong); }