/* DASFADS Surveys Nig. Ltd — portal theme.
   Loaded after app.css and /brand.css. Matches the corporate website and the company logo: deep forest-green
   bands, logo green (from the "Primary brand color" setting) and gold accents.
   Brand fonts load from assets/fonts/ when present; otherwise a system stack is used. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("IBM Plex Sans"), local("IBMPlexSans"), url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: local("IBM Plex Sans Medium"), local("IBMPlexSans-Medium"), url("../fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"), url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: local("Archivo"), url("../fonts/Archivo-Variable.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("IBM Plex Mono"), url("../fonts/IBMPlexMono-Regular.ttf") format("truetype"); }

:root {
  --navy: #0b2416;
  --navy-2: #12341f;
  --navy-line: rgba(178, 199, 182, .2);
  --navy-ink: #f1f6ef;
  --navy-muted: #b2c7b6;
  --sky: #f6d47e;
  --accent: #f2c14e;
  --ink: #0f1f14;
  --ink-soft: #55685a;
  --line: #d9e2d5;
  --canvas: #f4f6f1;
  --radius: .55rem;
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
}

body { -webkit-font-smoothing: antialiased; }
h1, .h1, h2, .h2, h3, .h3 { font-family: var(--f-display); letter-spacing: -.01em; color: var(--ink); }
h1, .h1 { font-weight: 700; }
.mono, .ref, .pay-ref, .code-grid, .pin-input { font-family: var(--f-mono); }
.btn { font-weight: 600; border-radius: .5rem; }
.btn-sm { border-radius: .4rem; }
.card { border-radius: .7rem; }
.table thead th { background: #f6f8f4; letter-spacing: .06em; }

/* Brand mark: the DASFADS benchmark triangle replaces the generic shield until a logo is uploaded. */
/* Company logo (round badge). Shown until a logo is uploaded in Settings → Branding, and sized so it stays legible. */
.brand-mark { background: #ffffff url("../img/dasfads-logo-320.png") center / 92% auto no-repeat; border-radius: 50%; width: 3.25rem; height: 3.25rem; box-shadow: 0 0 0 1px var(--line); }
.brand-logo-portal { max-height: 3.25rem; max-width: 3.25rem; }
.sidebar-brand .brand-mark { width: 3.25rem; height: 3.25rem; box-shadow: none; }
.brand-logo-chip { border-radius: 50%; padding: .2rem; }
.brand-logo-chip .brand-logo { max-height: 2.9rem; }
/* Sign-in pages: logo large enough to read every line of the badge */
.guest-brand { flex-direction: column; text-align: center; gap: .75rem; }
.guest-brand .brand-mark { width: 10rem; height: 10rem; box-shadow: none; }
.guest-brand .brand-logo-guest, .guest-brand-logo-only .brand-logo-guest { max-height: 10rem; max-width: 10rem; }
.brand-mark > i { display: none; }

/* Thin navy strip above the portal header linking back to the website */
.site-strip { background: var(--navy); color: var(--navy-muted); font-size: .78rem; }
.portal-header .navbar { padding: .45rem 0; }
.site-strip .container-xl { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.1rem; }
.site-strip a { color: var(--navy-ink); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.site-strip a:hover { text-decoration: underline; color: #fff; }
.site-strip .strip-tag { font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; display: inline-flex; align-items: center; gap: .45rem; }
.site-strip .strip-tag::before, .eyebrow-tick::before { content: ""; width: .55rem; height: .55rem; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); display: inline-block; }
@media (max-width: 575.98px) { .site-strip .strip-tag { display: none; } }

/* ---------- Client portal ---------- */
.portal-body { background: var(--canvas); }
.portal-header { box-shadow: 0 1px 0 var(--line); border-bottom: 0; }
.portal-brand { font-family: var(--f-display); font-weight: 700; letter-spacing: .01em; }
.portal-header .nav-link { font-weight: 500; }
.portal-header .nav-link.active { background: transparent; color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }
.portal-footer { background: var(--navy); color: var(--navy-muted); border-top: 0; }
.portal-footer a { color: var(--navy-ink); }
.welcome {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy);
  border-radius: .8rem; padding: 1.6rem 1.75rem;
}
.welcome::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--navy-line) 1px, transparent 1px), linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%); mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
}
.welcome::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 100% 0%, transparent 0 70px, var(--navy-line) 71px 72px, transparent 73px 120px, var(--navy-line) 121px 122px, transparent 123px 170px, var(--navy-line) 171px 172px, transparent 173px); }
.welcome h1, .welcome .h1 { color: #fff; }
.welcome .profile-number { background: rgba(242, 193, 78, .16); color: var(--navy-ink); font-family: var(--f-mono); }
.stat .stat-value { font-family: var(--f-display); }
.callout { border-left-color: var(--brand); }

/* ---------- Guest pages (sign-in, activation, reset) ---------- */
.guest-body {
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at 88% 12%, transparent 0 120px, var(--navy-line) 121px 122px, transparent 123px 190px, var(--navy-line) 191px 192px, transparent 193px 260px, var(--navy-line) 261px 262px, transparent 263px),
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.guest-card { border: 0; border-radius: .9rem; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); border-top: 4px solid var(--brand); }
.guest-brand { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.guest-foot { color: var(--navy-muted); }
.guest-foot a { color: var(--navy-ink); }
.guest-site { margin-top: .5rem; }
.guest-site a { text-decoration: none; display: inline-flex; gap: .35rem; align-items: center; }
.guest-site a:hover { text-decoration: underline; }
.error-code { color: rgba(var(--brand-rgb), .3); font-family: var(--f-display); }

/* ---------- Staff console ---------- */
.admin-sidebar, .admin-sidebar.offcanvas-lg { background-color: var(--navy) !important; }
@media (max-width: 991.98px) { .admin-sidebar { --bs-offcanvas-bg: var(--navy); } }
@media (min-width: 992px) { .admin-shell { background: linear-gradient(to right, var(--navy) 264px, transparent 264px); } }
.sidebar-brand .brand-name { font-family: var(--f-display); letter-spacing: .02em; }
.sidebar-brand .brand-sub { font-family: var(--f-mono); letter-spacing: .1em; text-transform: uppercase; font-size: .66rem; color: var(--navy-muted); }
.admin-body { background: var(--canvas); }

/* ---------- Language switcher (client pages) ---------- */
.lang-switch { position: relative; }
.lang-switch > summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; padding: .2rem .5rem; border-radius: .4rem;
  font: 600 .72rem var(--f-mono); letter-spacing: .06em; border: 1px solid var(--line); color: var(--ink); background: #fff; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary .bi { font-size: .7rem; transition: transform .2s; }
.lang-switch[open] > summary .bi { transform: rotate(180deg); }
.lang-switch.on-dark > summary { color: var(--navy-ink); background: transparent; border-color: var(--navy-line); }
.lang-switch.on-dark > summary:hover { border-color: var(--navy-muted); }
.lang-switch .flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); display: block; flex: none; overflow: hidden; }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + 6px); min-width: 215px; margin: 0; padding: 6px; list-style: none; z-index: 1060;
  background: #fff; border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 12px 30px rgba(15, 31, 20, .18); }
.lang-switch a { display: grid; grid-template-columns: 20px 28px minmax(0, 1fr) 16px; gap: 10px; align-items: center; padding: .5rem .6rem; border-radius: .4rem;
  color: var(--ink); text-decoration: none; font: 400 .9rem var(--bs-body-font-family); letter-spacing: 0; }
.lang-switch a:hover, .lang-switch a:focus-visible { background: var(--canvas); color: var(--ink); text-decoration: none; }
.lang-switch a[aria-current] { background: rgba(var(--brand-rgb), .09); font-weight: 600; }
.lang-switch a b { font: 500 .7rem var(--f-mono); color: var(--ink-soft); letter-spacing: .06em; }
.lang-switch a .bi { color: var(--brand); }
.guest-body { position: relative; }
.guest-topbar { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); z-index: 10; }
.site-strip .strip-right { display: inline-flex; align-items: center; gap: .9rem; }
.site-strip .container-xl { min-height: 2.6rem; }

/* Chinese: system CJK fonts (the brand fonts have no Chinese characters) */
html:lang(zh-Hans) { --bs-body-font-family: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --f-display: "Archivo", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
html:lang(zh-Hans) h1, html:lang(zh-Hans) h2, html:lang(zh-Hans) h3 { letter-spacing: 0; }
dl.kv dt, dl.kv dd, .card-header h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }