/* ============================================================================
   Matsui Marketing Platform — shared theme tokens
   ----------------------------------------------------------------------------
   Single source of truth for colour, type, radius and elevation.
   Load this BEFORE a page's own <style> block:

       <link rel="stylesheet" href="assets/theme.css">

   Pages must NOT redeclare these in their own :root — delete the local block and
   the page inherits the theme. Layout metrics (--pad, --topbar-h, …) stay here too
   so every page lines up.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&family=Spline+Sans+Mono:wght@300..600&family=Sarabun:wght@300;400;500;600;700&display=swap');

:root {
  /* ── raw palette ────────────────────────────────────────────────────────── */
  --mp-teal-900: #00445c;
  --mp-teal-700: #006990;   /* primary */
  --mp-teal-500: #05c3dd;   /* bright cyan */
  --mp-cyan-200: #b5e2ec;
  --mp-cyan-100: #cfeef5;
  --mp-cyan-50:  #e0f5f9;
  --mp-cyan-25:  #eefafc;
  --mp-cyan-10:  #f2fbfd;
  --mp-pink-600: #c93b73;
  --mp-pink-500: #e8578f;   /* accent */
  --mp-pink-50:  #fdeef4;
  --mp-slate-800:#3c4a5c;
  --mp-slate-600:#5c6b7e;
  --mp-slate-400:#8b9bb0;
  --mp-green:    #0f6b3e;
  --mp-green-50: #eaf6ef;
  --mp-amber:    #8a5a00;
  --mp-amber-50: #fbf4e4;

  /* ── typography ─────────────────────────────────────────────────────────── */
  /* Instrument Sans is Latin-only — Sarabun carries Thai, the CJK faces carry
     Japanese. Keep those fallbacks or the TH/JA UI loses its glyphs.           */
  --font-sans:  'Instrument Sans', 'Sarabun', 'Hiragino Kaku Gothic ProN', 'Yu Gothic',
                'Meiryo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', 'Sarabun', Georgia, serif;
  --font-mono:  'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── semantic tokens ────────────────────────────────────────────────────── */
  --brand:        var(--mp-teal-700);
  --brand-dark:   var(--mp-teal-900);
  --brand-light:  var(--mp-cyan-25);
  --accent:       var(--mp-pink-500);
  --accent-dark:  var(--mp-pink-600);

  --bg:           var(--mp-cyan-25);   /* page background in the reference design */
  --gray-bg:      var(--mp-cyan-10);
  --surface:      #ffffff;
  --border:       var(--mp-cyan-100);
  --border-strong:var(--mp-cyan-200);

  --text:         var(--mp-slate-800);
  --text-muted:   var(--mp-slate-600);
  --text-soft:    var(--mp-slate-400);

  --good:         var(--mp-green);
  --warn:         var(--mp-amber);
  --danger:       var(--mp-pink-600);

  /* ── shape + elevation (reference theme is crisp: 2px, very light shadows) ─ */
  --radius:            2px;
  --radius-sm:         2px;
  --radius-lg:         3px;
  --card-radius:       2px;
  --shadow-sm:         0 1px 4px rgba(0,0,0,.08);
  --shadow-md:         0 1px 4px rgba(0,0,0,.12);
  --shadow-lg:         0 2px 10px rgba(0,60,80,.14);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-border:       var(--border);

  /* ── layout metrics (unchanged — look changes, layout doesn't) ──────────── */
  --pad:       clamp(12px, 2vw, 24px);
  --space-pad: var(--pad);
  --topbar-h:  60px;
  --header-h:  60px;
  --toolbar-h: 64px;
  --tabs-h:    44px;
  --z-skip: 10000; --z-modal: 1000; --z-floating: 200;
  --z-topbar: 100; --z-header: 100; --z-toolbar: 90; --z-tabs: 80;

  /* ── aliases: other naming conventions already used in the pages ────────── */
  --primary:        var(--brand);
  --primary-dark:   var(--brand-dark);
  --primary-light:  var(--brand-light);
  --c-primary:      var(--brand);
  --c-primary-dark: var(--brand-dark);
  --c-primary-light:var(--brand-light);
  --c-bg:           var(--bg);
  --c-surface:      var(--surface);
  --c-border:       var(--border);
  --c-text:         var(--text);
  --c-text-muted:   var(--text-muted);
  --c-text-light:   var(--text-soft);
  --t1:             var(--text);
  --st-new:         var(--brand);
}

/* ── base ─────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
}

/* Numeric/tabular data reads better in the mono face */
.mono, code, kbd, pre, samp { font-family: var(--font-mono); }

/* Display headings use the serif companion, matching the reference look */
.display, .page-title { font-family: var(--font-serif); font-weight: 400; letter-spacing: .1px; }

/* Links + focus follow the brand */
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 2px solid var(--mp-teal-500); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   App shell — teal sidebar + content column. Shared by every page.
   Markup: sidebar.php  →  <div class="app"><aside class="side">…</aside>
                            <div class="app-main"> page content </div></div>
   ════════════════════════════════════════════════════════════════════════ */
.app { display: flex; align-items: flex-start; min-height: 100vh; }

.side {
  position: sticky; top: 0; align-self: stretch;
  flex: 0 0 196px; width: 196px; min-height: 100vh;
  background: var(--brand); color: var(--bg);
  display: flex; flex-direction: column; padding: 20px 0;
  transition: flex-basis .18s ease, width .18s ease;
}
.side-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 12px 22px 16px;
}
.side-brand {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  font-size: 15px; font-weight: 700; letter-spacing: 2.7px;
  color: var(--bg); text-decoration: none;
}
.side-brand:hover { color: #fff; text-decoration: none; }
.side-mark { width: 11px; height: 11px; background: var(--accent); flex: none; }

.side-toggle {
  flex: none; width: 26px; height: 26px; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--radius); color: #d4eef5; padding: 0;
}
.side-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.side-toggle svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius);
  font-size: 13px; font-weight: 400; color: #d4eef5; text-decoration: none;
  border-left: 3px solid transparent;
}
.side-ico { flex: none; width: 16px; height: 16px; }
.side-ico svg {
  width: 16px; height: 16px; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.side-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }
.side-link.active { background: #0a7fa8; color: #fff; font-weight: 600; border-left-color: var(--accent); }

/* children of the open section — shown so you can see where you are inside it */
.side-sub { display: flex; flex-direction: column; margin: 2px 0 6px; }
.side-sublink {
  padding: 6px 10px 6px 26px; border-left: 3px solid transparent;
  font-size: 12px; color: #a9d8e6; text-decoration: none;
}
.side-sublink:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.side-sublink.active { color: #fff; font-weight: 600; border-left-color: rgba(232,87,143,.55); }
.side-foot { margin-top: auto; padding: 18px 16px 0; border-top: 1px solid rgba(255,255,255,.16); }
.side-user { font-size: 13px; font-weight: 600; color: #fff; }
.side-role { font-size: 11px; color: var(--mp-cyan-200); margin-top: 1px; }
.side-out {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius);
  font-size: 12px; font-weight: 600; color: #fff; text-decoration: none;
}
.side-out:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.side-out-ico {
  width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Collapsed rail ────────────────────────────────────────────────────────
   Set on <html> by sidebar.php before the rail is parsed, so a collapsed rail
   never flashes open. Icons stay, labels go — every link keeps a title so the
   name is still one hover away, and the active bar still marks where you are. */
:root[data-nav="collapsed"] .side { flex-basis: 56px; width: 56px; }
:root[data-nav="collapsed"] .side-head { justify-content: center; padding: 0 0 22px; }
:root[data-nav="collapsed"] .side-wordmark,
:root[data-nav="collapsed"] .side-label,
:root[data-nav="collapsed"] .side-sub,
:root[data-nav="collapsed"] .side-user,
:root[data-nav="collapsed"] .side-role,
:root[data-nav="collapsed"] .side-out-label { display: none; }
:root[data-nav="collapsed"] .side-brand { display: none; }
:root[data-nav="collapsed"] .side-toggle svg { transform: rotate(180deg); }
:root[data-nav="collapsed"] .side-nav { padding: 0 8px; }
:root[data-nav="collapsed"] .side-link { justify-content: center; gap: 0; padding: 9px 0; }
:root[data-nav="collapsed"] .side-foot { padding: 14px 8px 0; }
:root[data-nav="collapsed"] .side-out { justify-content: center; padding: 7px 0; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .side, .side-toggle svg { transition: none; }
}

.app-main { flex: 1 1 auto; min-width: 0; padding: 18px 22px 40px; }

/* Page heading: the strapline sits beside the title, sharing its baseline, so the
   masthead is one line instead of two. Covers both header shapes in the app. */
.app-header .header-left > div,
.page-head > div:first-child {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.app-header .strap, .page-head .strap { margin-top: 0; }

/* Page hero — teal card at the top of a content column */
.page-hero {
  background: var(--brand); border-radius: 3px; padding: 26px 28px; color: var(--bg);
}
.page-hero .kicker { font-size: 13px; font-weight: 600; letter-spacing: 1.04px; color: #8fdeed; }
.page-hero h1 {
  font-family: var(--font-serif); font-size: 34px; font-weight: 400;
  line-height: 1.1; color: var(--bg); margin-top: 6px;
}
.page-hero .strap { font-family: var(--font-mono); font-size: 13px; color: #b3e8f2; margin-top: 12px; }

/* A page's existing .topbar, once inside the shell, becomes the hero card.
   It already holds the page title and the TH/EN/JA switcher — the same pieces
   the reference puts in its hero — so it only needs restyling, not rebuilding.
   Primary nav, the user chip and Sign out are dropped: the sidebar carries them. */
.app-main > .topbar {
  position: static; background: var(--brand); color: var(--bg);
  border-radius: 3px; box-shadow: none; margin-bottom: 14px;
  padding: 26px 28px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.app-main > .topbar .name,
.app-main > .topbar .brand > div > div:first-child {
  font-family: var(--font-serif); font-size: 34px; font-weight: 400;
  line-height: 1.1; letter-spacing: normal;
}
.app-main > .topbar .sub,
.app-main > .topbar .brand > div > div:nth-child(2) {
  font-family: var(--font-mono); font-size: 13px; color: #b3e8f2; opacity: 1; margin-top: 10px;
}
.app-main > .topbar .logo, .app-main > .topbar .icon { display: none; }
.app-main > .topbar .brand { align-items: flex-start; gap: 0; }
.app-main > .topbar .nav-link,
.app-main > .topbar .nav-btn,
.app-main > .topbar .me-chip { display: none; }
.app-main > .topbar .ubar { background: transparent; border: none; border-radius: 0; }
.app-main > .topbar .lang-switcher { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }
.app-main > .topbar .lang-btn { border-radius: var(--radius); font-weight: 600; }
.app-main > .topbar .lang-btn.active { background: var(--mp-teal-500); color: #fff; }

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .side { position: static; width: 100%; flex: none; min-height: 0; padding: 14px 0; }
  /* The rail is a horizontal strip here, so collapsing it has nothing to do.
     These need the same specificity as the collapsed rules to win — a media
     query adds none of its own. */
  :root[data-nav="collapsed"] .side { flex-basis: auto; width: 100%; }
  :root[data-nav="collapsed"] .side-head { justify-content: space-between; padding: 0 16px 14px; }
  :root[data-nav="collapsed"] .side-brand,
  :root[data-nav="collapsed"] .side-wordmark,
  :root[data-nav="collapsed"] .side-label,
  :root[data-nav="collapsed"] .side-user,
  :root[data-nav="collapsed"] .side-role,
  :root[data-nav="collapsed"] .side-out-label { display: revert; }
  :root[data-nav="collapsed"] .side-brand { display: flex; }
  :root[data-nav="collapsed"] .side-link { justify-content: flex-start; gap: 10px; padding: 8px 10px; }
  :root[data-nav="collapsed"] .side-out { width: auto; padding: 7px 14px; }
  .side-toggle { display: none; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-foot { margin-top: 14px; }
  .app-main { padding: 14px; width: 100%; }
  .page-hero, .app-main > .topbar { padding: 20px 18px; }
  .page-hero h1, .app-main > .topbar .name { font-size: 26px; }
}