/*
 * watch-bkk.css: the GUI template of digitalplan1 (BKK design system, static/bkk/bkk-theme.css) over watch's own pv2 theme
 * (css/public-theme-v2.css, css/staff-v2.css, backend css/watch-bridge.css). Loaded last by every layout.
 *  - the header (.app-header) and footer (.app-footer) are digitalplan1's, see layouts/_topbar.php and _appfooter.php
 *  - the pv2 colour tokens point at the BKK palette and the pv2 font names are served from Anuphan (watch-fonts.css),
 *    so the existing pages take on the new look without being edited
 * Same file in frontend/web/static/bkk and backend/web/static/bkk.
 */

/* ---------- pv2 tokens -> BKK tokens ---------- */
:root {
  --paper: var(--n100);
  --band: var(--p0);
  --card: var(--n0);
  --ink: var(--n900);
  --ink-soft: var(--n700);
  --ink-faint: var(--n500);
  --green: var(--p500);
  --green-deep: var(--p700);
  --green-tint: var(--p50);
  --gold: #B26B00;
  --gold-deep: #8A5300;
  --gold-tint: #FFF4E5;
  --teal: var(--blue);
  --teal-deep: #134E99;
  --teal-tint: #E8F1FC;
  --red: #D9363E;
  --red-tint: #FDECEC;
  --rule: var(--n200);
  --rule-soft: var(--n100);
  /* watch-bridge.css font variables */
  --app-font: var(--font);
  --app-font-head: var(--font);
  --app-font-num: var(--font);
  --bs-font-sans-serif: var(--font);
  --bs-body-font-family: var(--font);
  --bs-link-color: var(--p500);
  --bs-link-hover-color: var(--p700);
  --bs-primary: var(--p500);
  --bs-primary-rgb: 0, 116, 75;
}

/* ---------- base ---------- */
body.pv2 {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.65; color: var(--n900);
  background: var(--n100) linear-gradient(180deg, var(--p0) 0, var(--n100) 720px) no-repeat;
  background-size: auto;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--p100); }
.pv2 :focus-visible { outline: 2px solid var(--p200); outline-offset: 2px; }

/* big titles in the BKK display face (Sao Chingcha), like digitalplan1's page titles */
.pv2 h1.pv2-hero-title, .pv2 h1.pv2-title, .pv2 h2.pv2-section-head, .pv2 .pv2-zone h1, .pv2 .pv2-auth h1,
.pv2 .pv2-main > h1, .pv2 .pv2-main > div > h1, .pv2 .oi-summary h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: 0; color: var(--n900);
}
.pv2 h1.pv2-hero-title { font-size: 44px; line-height: 1.15; }
.pv2 h1.pv2-title { font-size: 34px; line-height: 1.2; }
.pv2 h2.pv2-section-head { font-size: 28px; line-height: 1.2; }
.pv2 h2.pv2-section-head .num { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--p700); background: var(--p50); border: 0; border-radius: 999px; padding: 1px 10px; }
.pv2 .pv2-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--p700); background: var(--p50); border-radius: 999px; padding: 4px 12px; }
.pv2 .pv2-main h1, .pv2 .pv2-main h2, .pv2 .pv2-main h3 { color: var(--n900); }
.pv2-main :where(a:not(.btn):not(.dropdown-item):not(.page-link):not(.pv2-btn)) { color: var(--p500); }
@media (max-width: 767px) {
  .pv2 h1.pv2-hero-title { font-size: 32px; } .pv2 h1.pv2-title { font-size: 26px; } .pv2 h2.pv2-section-head { font-size: 23px; }
}

/* ---------- surfaces: rounded white cards (digitalplan1 .card) ---------- */
.pv2 :where(.pv2-card, .pv2-pcard, .pv2-pillar-card, .pv2-kr-card, .pv2-metric-card, .pv2-panel, .pv2-trend, .oi-card, .oi-summary,
            .pv2-info-grid, .pv2-table-wrap, .pv2-results, .pv2-form, .pv2-filter, .pv2-auth, .pv2-kpi-row, .pv2-gantt-scroll, .pv2-photo) {
  border-radius: var(--r-xl); border-color: transparent; background-color: var(--n0);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(18,51,37,.04);
}
.pv2 :where(.pv2-pcard, .pv2-card, .oi-card, .pv2-pillar-card) { transition: transform .25s ease, box-shadow .25s ease; }
.pv2 :where(a.pv2-pcard, a.pv2-card, a.oi-card, a.pv2-pillar-card):hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pv2 :where(.pv2-info-grid, .pv2-table-wrap, .pv2-results, .pv2-kpi-row, .pv2-gantt-scroll) { overflow: hidden; }
.pv2 .pv2-stat-strip { border-radius: var(--r-xl); overflow: hidden; border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(18,51,37,.04); background: var(--n100); }
.pv2 .pv2-stat-cell .s-num, .pv2 .pv2-kpi-num, .pv2 .pv2-m-figure { font-family: var(--display); font-weight: 700; color: var(--p700); }
.pv2 :where(.pv2-chip, .oi-chip, .pv2-tag, .pv2-badge, .pv2-count, .stbox, .pv2-role) { border-radius: 999px; }
.pv2 .stbox i { border-radius: 999px; }

/* ---------- pv2 buttons and form fields (digitalplan1 .btn / .form-control) ---------- */
.pv2 .pv2-btn, .pv2 a.pv2-btn, .pv2 button.pv2-btn {
  border-radius: var(--r); font-family: var(--font); font-weight: 600; background: var(--p500); border-color: var(--p500);
  transition: background .2s, border-color .2s, color .2s;
}
.pv2 .pv2-btn:hover { background: var(--p700); border-color: var(--p700); color: var(--n0); }
.pv2 .pv2-btn.ghost { background: var(--n0); color: var(--n800); border-color: var(--n200); }
.pv2 .pv2-btn.ghost:hover { background: var(--n100); color: var(--n900); border-color: var(--n300); }
.pv2 .pv2-btn.gold { background: var(--amber); border-color: var(--amber); color: var(--n900); }
.pv2 :where(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { border-radius: var(--r); }
.pv2 :where(input, select, textarea):focus { border-color: var(--p500); box-shadow: 0 0 0 3px rgba(0,116,75,.12); outline: 0; }
.pv2 .pv2-search { border-radius: 999px; overflow: hidden; border-color: var(--n200); background: var(--n0); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pv2 .pv2-search button { background: var(--p500); font-family: var(--font); font-weight: 600; border-radius: 0 999px 999px 0; }
.pv2 .pv2-search button:hover { background: var(--p700); }
.pv2 .pv2-year-tabs, .pv2 .pv2-viewswitch { border-radius: var(--r-lg); overflow: hidden; }
.pv2 .pv2-year-tab { font-family: var(--font); }

/* Bootstrap components: watch-bridge.css squares them (".pv2 .btn { border-radius: 0 }" ...), digitalplan1 rounds them */
.pv2 .btn { border-radius: var(--r); font-family: var(--font); font-weight: 600; }
.pv2 .btn-primary, .pv2 .btn-success {
  --bs-btn-bg: var(--p500); --bs-btn-border-color: var(--p500); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--p700); --bs-btn-hover-border-color: var(--p700); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--p700); --bs-btn-active-border-color: var(--p700);
}
.pv2 .card { border: 0; border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(18,51,37,.04); }
.pv2 .card-header { background: transparent; border-bottom: 1px solid var(--n100); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.pv2 .alert { border-radius: var(--r-lg); }
.pv2 .badge { border-radius: 999px; }
.pv2 .page-item:first-child .page-link { border-radius: var(--r) 0 0 var(--r) !important; }
.pv2 .page-item:last-child .page-link { border-radius: 0 var(--r) var(--r) 0 !important; }
.pv2 .page-item.active .page-link { background: var(--p500); border-color: var(--p500); }
.pv2 ul.pagination li a, .pv2 ul.pagination li span { border-radius: var(--r); }
.pv2 ul.pagination li.active a, .pv2 ul.pagination li.active span { background: var(--p500); border-color: var(--p500); color: var(--n0); }
.pv2 .modal-content { border-radius: var(--r-xl); }
.pv2 .dropdown-menu { border-radius: var(--r-lg); }

/* ---------- flash, breadcrumb, notes ---------- */
.pv2 .pv2-flash { border-radius: var(--r-lg); border: 0; box-shadow: 0 0 0 1px rgba(18,51,37,.06); }
.pv2 .pv2-breadcrumb { font-family: var(--font); font-size: 13px; color: var(--n500); }
.pv2 .pv2-breadcrumb a { color: var(--p500); border-bottom: 0; }
.pv2 .pv2-breadcrumb a:hover { color: var(--p700); text-decoration: underline; }
.pv2 .pv2-note { border-radius: var(--r-lg); }

/* =====================================================================
 * header (digitalplan1 .app-header, from bkk-theme.css) — watch's own controls inside it
 * ===================================================================== */
.pv2 .app-header { font-family: var(--font); line-height: 1.5; }
.app-header .brand { text-decoration: none; }
.app-header .brand:hover { color: var(--p500); }
.app-header .brand-text { padding-left: 10px; border-left: 1px solid var(--n200); }
.app-header .brand-name { font-size: 18px; }
.pv2 .app-header .pill-nav a { text-decoration: none; }
.app-header .pill-nav .pill-drop > a.dropdown-toggle::after { display: none; }
.app-header .pill-drop .dropdown-menu { min-width: 300px; max-width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto; }
.app-header .pill-drop .dropdown-item { white-space: normal; font-size: 14px; line-height: 1.4; }
.app-header .pill-drop .dropdown-item.active, .app-header .pill-drop .dropdown-item:active { background: var(--p50); color: var(--p700); font-weight: 600; }
.app-header .pill-drop .dropdown-item .no { flex: none; min-width: 22px; height: 22px; border-radius: 7px; background: var(--p50); color: var(--p700); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.app-header .pill-drop .dropdown-item .ext { margin-left: auto; color: var(--n300); }
.app-header .header-tools .cta {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; margin-left: 4px; border-radius: 999px;
  border: 1px solid var(--p200); color: var(--p700); font-weight: 600; font-size: 14px; white-space: nowrap; text-decoration: none; transition: background .2s;
}
.app-header .header-tools .cta:hover { background: var(--p50); color: var(--p700); }
.app-header .header-tools .cta i { font-size: 18px; }

/* search / bell / inbox (layouts/_searchbox.php, _bell.php, _inbox.php) as digitalplan1 icon buttons */
.app-header .pv2-searchbtn, .app-header .pv2-bellbtn, .app-header .pv2-bellbtn.pv2-inboxbtn {
  position: relative; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--n700);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s;
}
.app-header .pv2-searchbtn:hover, .app-header .pv2-bellbtn:hover,
.app-header .pv2-searchbtn[aria-expanded="true"], .app-header .pv2-bellbtn[aria-expanded="true"] { background: var(--n100); color: var(--n900); border: 0; }
.app-header .pv2-searchbtn .lbl { display: none; }
.app-header .pv2-bellbadge {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #E32526; color: #fff;
  font: 700 11px/18px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--n0);
}
.app-header .pv2-bellbadge[hidden] { display: none; }
.app-header .pv2-searchpanel {
  position: absolute; top: calc(100% + 8px); left: 50%; right: auto; transform: translateX(-50%); width: min(760px, calc(100vw - 24px));
  padding: 12px; gap: 8px; border: 0; border-radius: var(--r-lg); background: var(--n0); box-shadow: var(--shadow); animation: subIn .16s ease-out;
}
.app-header .pv2-searchpanel input[type=search], .app-header .pv2-searchpanel select {
  height: 42px; padding: 0 14px; border: 1px solid var(--n200); border-radius: var(--r); background: var(--n0); font: 15px var(--font); color: var(--n900);
}
.app-header .pv2-searchpanel button[type=submit] { height: 42px; padding: 0 20px; border: 0; border-radius: var(--r); background: var(--p500); color: var(--n0); font: 600 14px var(--font); cursor: pointer; }
.app-header .pv2-searchpanel button[type=submit]:hover { background: var(--p700); }
.app-header .pv2-bellpanel { top: calc(100% + 8px); right: 12px; border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.app-header .pv2-bellpanel .bp-head { background: var(--n0); border-bottom: 1px solid var(--n100); padding: 12px 16px; }
.app-header .pv2-bellpanel .bp-head b { display: inline-flex; align-items: center; gap: 6px; color: var(--n900); }
.app-header .pv2-bellpanel .bp-head b i { color: var(--p500); font-size: 18px; }
.app-header .pv2-bellpanel .bp-head span { font-family: var(--font); }
.app-header .pv2-bellpanel .bp-item:hover { background: var(--p0); }
.app-header .pv2-bellpanel .bp-bar { border-radius: 999px; overflow: hidden; }
.app-header .pv2-bellpanel .bp-bar i { background: var(--p500); }

/* user menu (backend) in digitalplan1's .user-btn look */
.app-header .pv2-user-btn { padding: 4px 10px 4px 4px; border: 1px solid var(--n100); background: var(--n0); color: var(--n900); font-size: 14px; border-radius: 999px; }
.app-header .pv2-user-btn:hover, .app-header .pv2-user-btn[aria-expanded="true"] { border-color: var(--n200); background: var(--n0); color: var(--n900); }
.app-header .pv2-user-btn::after { content: none; }
.app-header .pv2-user-btn > .ph { font-size: 14px; color: var(--n500); }
.app-header .pv2-avatar { width: 32px; height: 32px; background: var(--p500); font-size: 14px; }
.app-header .pv2-avatar.lg { width: 42px; height: 42px; font-size: 18px; }
.app-header .pv2-user-name { font-weight: 600; max-width: 160px; }
.app-header .pv2-user-id { font-family: var(--font); }
.app-header .pv2-user-menu { padding: 0; overflow: hidden; border: 0; min-width: 260px; max-width: 320px; }
.app-header .pv2-user-card { background: var(--p0); border-bottom: 1px solid var(--n100); }
.app-header .pv2-user-meta { border-bottom: 1px solid var(--n100); }
.app-header .pv2-user-logout { padding: 6px 8px 8px; margin: 0; }
.app-header .pv2-user-logout .dropdown-item { width: 100%; color: var(--red); }
.app-header .pv2-user-logout .dropdown-item:hover { background: var(--red-tint); color: var(--red); }

/* small screens: the pills fold into a panel opened by the menu button (digitalplan1 shows its sidebar there) */
.app-header .nav-burger { display: none; }
@media (max-width: 1099px) {
  .app-header .header-tools .cta span { display: none; }
  .app-header .header-tools .cta { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 767px) {
  .app-header .nav-burger { display: inline-flex; }
  .app-header .brand-text { display: none; }
  .app-header .pill-nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    padding: 10px 12px 14px; max-height: calc(100vh - var(--header-h)); overflow-y: auto; background: var(--n0); box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
  .app-header .pill-nav.open a { padding: 10px 14px; }
  .app-header .pill-nav.open a span { display: inline; }
  .app-header .pill-nav.open .pill-drop .dropdown-menu { position: static !important; transform: none !important; box-shadow: none; margin: 0 0 6px 18px; max-width: none; }
  .app-header .pv2-user-name { display: none; }
}

/* ---------- footer (digitalplan1 .app-footer) ---------- */
.pv2 .app-footer { margin-top: 48px; font-family: var(--font); }
.pv2 .app-footer .home-wrap { max-width: 1180px; padding: 0 24px; }
.pv2 .app-footer a { color: rgba(255,255,255,.8); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.4); }
.pv2 .app-footer a:hover { color: var(--n0); border-bottom-color: var(--n0); }
.pv2 .app-footer .footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.pv2 .app-footer .footer-meta { flex-basis: 100%; }
@media (min-width: 900px) { .pv2 .app-footer .footer-meta { flex-basis: auto; } }