/* ============================================================
   Al Hajry Overseas — Regions Portfolio Map (light themes)
   Theme variables injected from assets/js/app.js
   ============================================================ */
:root {
  --bg-solid: #f1e9e2;
  --accent: #e07a5f; --accent-2: #3d5a80;
  --text: #2b2536; --muted: #7c6f78;
  --panel: rgba(255,255,255,0.82); --panel-2: rgba(255,252,250,0.95);
  --panel-border: rgba(120,90,80,0.18);
  --marker-bg: rgba(255,255,255,0.9); --marker-border: rgba(120,90,80,0.22); --marker-name: #2b2536;
  --badge-text: #fff; --track: rgba(40,30,40,0.10); --hover-text: #1a1420;
  --chip: color-mix(in srgb, var(--text) 5%, transparent);
  --chip-hi: color-mix(in srgb, var(--accent) 12%, transparent);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
html { background: #e9eef8; }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: transparent; transition: color .6s ease; }
.bg { display: none; }

/* ---------- Live animated light-gradient background + waves ---------- */
.animbg { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(315deg, rgba(176,201,238,1) 3%, rgba(139,197,222,1) 38%, rgba(168,224,213,1) 68%, rgba(224,193,221,1) 98%);
  background-size: 400% 400%; animation: gradient 16s ease infinite; }
@keyframes gradient { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
/* Waves span a large middle band; crests are spread out and the flat bottoms run off-screen
   (so no static edge shows), and every layer animates & overlaps. */
.wave { position: fixed; left: 0; width: 200%; height: 100vh; background: rgb(255 255 255 / 55%);
  border-radius: 45% 47% 0 0; transform: translate3d(0,0,0); will-change: transform;
  top: 26vh; opacity: .42; animation: wave 13s -2s linear infinite; }
.wave:nth-of-type(2) { top: 38vh; opacity: .32; animation: wave 19s linear reverse infinite; }
.wave:nth-of-type(3) { top: 50vh; opacity: .26; animation: wave 24s -1s reverse infinite; }
@keyframes wave { 2% { transform: translateX(1px); } 25% { transform: translateX(-25%); } 50% { transform: translateX(-50%); } 75% { transform: translateX(-25%); } 100% { transform: translateX(1px); } }
#app { position: fixed; inset: 0; z-index: 1; }
canvas { display: block; }
button { font-family: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 6px; }

/* ---------- Header ---------- */
.header { position: absolute; top: 20px; left: 24px; z-index: 6; pointer-events: none; }
.header .logo { width: clamp(160px, 18vw, 220px); height: auto; display: block; filter: drop-shadow(0 4px 14px rgba(60,40,30,.15)); }

/* ---------- KPIs ---------- */
.kpis { position: absolute; top: 20px; right: 24px; z-index: 6; display: flex; gap: 10px; }
.kpi { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; padding: 10px 16px; min-width: 90px; backdrop-filter: blur(10px); text-align: right; transition: background-color .9s, border-color .9s; box-shadow: 0 8px 24px rgba(60,40,30,.08); }
.kpi .num { font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.kpi .num.accent { color: var(--accent); } .kpi .num.alt { color: var(--accent-2); }
.kpi .lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

/* ---------- Region markers ---------- */
.rmarker { transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 8px 8px 15px; border-radius: 999px; background: var(--marker-bg); border: 1px solid var(--marker-border);
  box-shadow: 0 8px 22px rgba(60,40,30,.18); backdrop-filter: blur(8px); white-space: nowrap; transition: transform .15s, box-shadow .15s, border-color .15s; }
.rmarker:hover { transform: translate(-50%, -54%) scale(1.05); border-color: var(--accent); box-shadow: 0 12px 30px rgba(60,40,30,.26); }
.rmarker.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), 0 12px 30px rgba(60,40,30,.26); }
.rmarker .rm-name { font-size: 14px; font-weight: 700; color: var(--marker-name); letter-spacing: -.2px; }
.rmarker .rm-count { font-size: 14px; font-weight: 800; color: var(--badge-text); background: var(--accent); border-radius: 999px; min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; }

/* ---------- Right overview panel (elegant light blue) ---------- */
.side {
  position: absolute; top: 20px; right: 20px; bottom: 20px; width: 424px; z-index: 6;
  background: linear-gradient(180deg, rgba(236,244,255,0.94), rgba(219,233,250,0.94));
  border: 1px solid rgba(90,130,190,0.24); border-radius: 20px;
  box-shadow: 0 22px 55px rgba(35,65,120,0.18); backdrop-filter: blur(16px);
  display: flex; flex-direction: column; overflow: hidden; color: #23344c;
}
.side-inner { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.side-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; color: #3d6ea5; }
.side-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.side-cell { background: rgba(255,255,255,0.72); border: 1px solid rgba(90,130,190,0.20); border-radius: 13px; padding: 13px 8px; text-align: center; }
.side-cell .n { font-size: 21px; font-weight: 800; color: #2f5f9e; letter-spacing: -.6px; }
.side-cell .l { font-size: 9.5px; color: #5f748f; text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.side-cell .l .tag { color: #3d6ea5; background: none; padding: 0; margin: 0; }
.side-sec h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #2f4b6e; margin: 0 0 12px; }
.side-car { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; background: #cdd8e8; box-shadow: 0 8px 20px rgba(35,65,120,.16); }
.side-car img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* crossfade layers (side + modal carousels) */
.side-car .cf, .car-slide .cf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .55s ease; will-change: opacity; }
.side-car .cf.on, .car-slide .cf.on { opacity: 1; }
.side-car .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.82); color: #2f5f9e; font-size: 20px; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.2); transition: .15s; }
.side-car .nav:hover { background: #fff; }
.side-car .nav.prev { left: 8px; } .side-car .nav.next { right: 8px; }
.side-car-ctr { position: absolute; bottom: 8px; right: 10px; background: rgba(20,40,70,0.55); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.side-svc { display: flex; flex-direction: column; gap: 13px; }
.side .svc-name { font-size: 13px; font-weight: 600; color: #24344a; margin-bottom: 6px; }
.side .bar-fill { background: linear-gradient(90deg, #5a8fcf, #2f5f9e); }
.side .svc-meta { color: #6a7d94; }
.side-foot { font-size: 10.5px; color: #6a7d94; font-style: italic; padding-top: 4px; }

@media (max-width: 860px) {
  .side { left: 12px; right: 12px; width: auto; top: auto; bottom: 74px; height: 46vh; }
}

/* ---------- Controls ---------- */
.controls { position: absolute; bottom: 20px; left: 24px; z-index: 6; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn { background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); border-radius: 10px; padding: 9px 14px; font-size: 12.5px; cursor: pointer; backdrop-filter: blur(10px); display: inline-flex; gap: 7px; align-items: center; transition: .18s; box-shadow: 0 6px 18px rgba(60,40,30,.08); }
.btn:hover { border-color: var(--accent); color: var(--hover-text); }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; overflow: hidden; backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(60,40,30,.08); }
.seg button { background: none; border: none; color: var(--muted); padding: 9px 15px; font-size: 12.5px; cursor: pointer; transition: .15s; }
.seg button.on { background: var(--chip-hi); color: var(--text); }
.hint { position: absolute; bottom: 22px; right: 24px; z-index: 6; color: var(--muted); font-size: 11.5px; text-align: right; line-height: 1.6; pointer-events: none; transition: color .9s; }

/* ---------- Overlay / modal ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(30,24,30,.42); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .2s; padding: 24px; }
.overlay.show { opacity: 1; pointer-events: auto; }
.modal { width: 560px; max-width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: 20px; backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(40,30,30,.28); transform: translateY(14px) scale(.98); transition: transform .22s; }
.overlay.show .modal { transform: none; }
.modal-wide { width: 1140px; }
.md-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--panel-border); }
.md-title { font-size: 21px; font-weight: 800; line-height: 1.15; } .md-ar { color: var(--muted); font-weight: 400; font-size: 15px; margin-left: 6px; }
.md-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.md-x { background: none; border: none; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; } .md-x:hover { color: var(--text); }
.md-body { overflow-y: auto; overflow-x: hidden; padding: 20px 24px 24px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.stat-cell { background: var(--chip); border: 1px solid var(--panel-border); border-radius: 14px; padding: 14px 16px; }
.stat-cell .sc-num { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--accent-2); }
.stat-cell .sc-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; }

.md-grid { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 30px; align-items: start; }
.md-col { min-width: 0; }
.md-col h4 { font-size: 13px; font-weight: 700; margin: 4px 0 14px; text-transform: uppercase; letter-spacing: .6px; color: var(--text); }
.md-col h4:not(:first-child) { margin-top: 24px; }
.tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); background: var(--chip-hi); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }

.svc-list { display: flex; flex-direction: column; gap: 15px; }
.svc-name { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.svc-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.svc-meta .svc-val { font-weight: 800; color: var(--accent-2); }
.bar-track { height: 8px; border-radius: 5px; background: var(--track); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; background: var(--accent); }
.bar-fill.alt { background: var(--accent-2); }

.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp { background: var(--chip); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 14px; }
.mp-num { font-size: 20px; font-weight: 800; color: var(--accent-2); } .mp-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; }
.muted-note { font-size: 11px; color: var(--muted); margin-top: 10px; font-style: italic; }

.fin-list { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 128px 1fr 46px; align-items: center; gap: 10px; font-size: 12.5px; }
.bar-row .bt { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-row .bn { text-align: right; font-weight: 700; }

/* carousel */
.car-stage { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.car-slide { position: relative; flex: 1; min-width: 0; aspect-ratio: 16/10; max-height: 58vh; border-radius: 14px; overflow: hidden; background: #e6ddd4; user-select: none; }
.car-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text); font-size: 22px; cursor: pointer; flex: none; transition: .15s; }
.car-nav:hover { border-color: var(--accent); color: var(--accent); }
.car-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.car-thumb { width: 76px; height: 48px; border-radius: 8px; overflow: hidden; cursor: pointer; flex: none; opacity: .55; border: 2px solid transparent; transition: .15s; background: #e6ddd4; }
.car-thumb img { width: 100%; height: 100%; object-fit: cover; }
.car-thumb.on { opacity: 1; border-color: var(--accent); } .car-thumb:hover { opacity: .85; }

/* ---------- Dashboard ---------- */
.dash { position: absolute; inset: 0; z-index: 15; overflow-y: auto; padding: 26px clamp(20px,5vw,70px) 40px; background: color-mix(in srgb, var(--bg-solid) 88%, transparent); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.dash.show { opacity: 1; pointer-events: auto; }
.dash h2 { font-size: 24px; font-weight: 800; margin: 0 0 4px; } .dash .dash-sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; margin-bottom: 26px; }
.dash-kpi { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px; padding: 18px 20px; box-shadow: 0 8px 24px rgba(60,40,30,.06); }
.dash-kpi .num { font-size: 28px; font-weight: 800; letter-spacing: -1px; } .dash-kpi .lbl { font-size: 12px; color: var(--muted); margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .dash-grid, .md-grid { grid-template-columns: 1fr; } .stat-row { grid-template-columns: repeat(2,1fr); } }
.card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px; padding: 18px 20px; margin-bottom: 22px; box-shadow: 0 8px 24px rgba(60,40,30,.06); }
.card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.card .bar-row { margin-bottom: 9px; }
table.dt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.dt th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; border-bottom: 1px solid var(--panel-border); }
table.dt td { padding: 9px 10px; border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 55%, transparent); }
table.dt tr { cursor: pointer; } table.dt tbody tr:hover td { background: var(--chip-hi); }
table.dt td.num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-x { position: fixed; top: 22px; right: 26px; z-index: 16; }

/* ---------- Loading ---------- */
#loading { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--bg-solid); transition: opacity .5s; font-size: 14px; color: var(--muted); }
#loading .spin { width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 14px; border: 3px solid var(--track); border-top-color: var(--accent); animation: sp .9s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

@media (max-width: 760px) { .kpis { top: auto; bottom: 74px; right: 12px; } .hint { display: none; } .modal-wide { width: 100%; } }