/* karavar-site/theme.css */
/* Karavar theme for core's pages (core seam F).
 *
 * Core serves this file inside GET /theme.css, which app.html, admin.html,
 * login.html, admin-login.html, the legal pages and 404.html link LAST in
 * <head>. Every rule is scoped by <html data-surface="...">, so it touches only
 * the page it is written for.
 *
 * Rules of the road, so core's fixes keep landing cleanly:
 *   - re-tint through core's own CSS variables first;
 *   - restyle with selectors core already uses, never by assuming markup that
 *     is not there; no `display` changes to core's layout;
 *   - behaviour is core's: nothing here hides a control or adds one.
 *
 * Palette: one hue. Cobalt #3366cc (the colour the clients compile in) and
 * steps of the same blue for surfaces and text; status colours stay core's.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/modules/karavar-site/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/modules/karavar-site/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html[data-surface] {
  --k-cobalt: #3366cc;
  --k-cobalt-deep: #24499a;
  --k-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ════════════════════════════════════════════════════════════════════
   User web app (/app)
   Core defaults to dark; light comes from the theme button (data-theme).
   ════════════════════════════════════════════════════════════════════ */
html[data-surface="app"]:not([data-theme="light"]) {
  --bg: #0a1124; --surface: #0f1931; --surface2: #16233f; --border: #22325a;
  --primary: #3366cc; --primary-glow: #9bb8f5; --accent: #6cc4e8;
  --text: #e6ebf7; --dim: #96a3c0;
  --gradient: linear-gradient(135deg, #3366cc, #2b59b8);
  --k-mark: #6f95e6; --k-active: rgba(51, 102, 204, .24);
  color-scheme: dark;
}
html[data-surface="app"][data-theme="light"] {
  --bg: #f3f6fc; --surface: #ffffff; --surface2: #ebf0fa; --border: #d6deef;
  --primary: #3366cc; --primary-glow: #2a55b0; --accent: #0b6e99;
  --text: #111a30; --dim: #56627d;
  --gradient: linear-gradient(135deg, #3366cc, #2a55b0);
  --k-mark: #3366cc; --k-active: rgba(51, 102, 204, .11);
  color-scheme: light;
}
/* 96% width: Archivo at full width runs wider than the system UI font core's
   tables were laid out for. */
html[data-surface="app"] body { font-family: var(--k-font); font-stretch: 96%; }
html[data-surface="app"] button, html[data-surface="app"] input,
html[data-surface="app"] select, html[data-surface="app"] textarea { font-family: inherit; }

/* Sidebar: the ring mark beside the product name. */
html[data-surface="app"] .brand-title {
  display: flex; align-items: center; gap: 9px;
  background: none; -webkit-text-fill-color: currentColor; color: var(--text);
  font-size: 17px; font-stretch: 125%; font-weight: 800; letter-spacing: -0.01em;
}
html[data-surface="app"] .brand-title::before {
  content: ""; flex: none; width: 17px; height: 17px; box-sizing: border-box;
  border-radius: 50%; border: 4.5px solid var(--k-mark);
}
html[data-surface="app"] .brand-sub { margin-left: 26px; }
html[data-surface="app"] .nav-item { border-radius: 8px; font-weight: 500; }
/* Phones: core's fixed hamburger sits over the drawer's top-left corner;
   move the brand clear of it. */
@media (max-width: 768px) {
  html[data-surface="app"] aside.app-nav .brand { padding-left: 62px; }
  html[data-surface="app"] .brand-sub { margin-left: 0; }
}
html[data-surface="app"] .nav-item.active {
  background: var(--k-active); color: var(--text); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--k-mark);
}
html[data-surface="app"] .page-title { font-stretch: 112%; font-weight: 720; letter-spacing: -0.012em; }
html[data-surface="app"] .panel h2 { font-stretch: 108%; font-weight: 680; }
html[data-surface="app"] .panel { border-radius: 12px; }
html[data-surface="app"] .btn { border-radius: 8px; }
html[data-surface="app"] .btn.primary { background: var(--primary); }
html[data-surface="app"] .btn.primary:hover { background: #2a59b8; }
html[data-surface="app"] th { letter-spacing: .03em; }
html[data-surface="app"] .credits-pill { font-variant-numeric: tabular-nums; }

/* Core's previous accent survives in a few rules and inline styles; repaint
   it in cobalt so no purple is left behind. */
html[data-surface="app"] .plg-tab.active .plg-tab-count { background: rgba(51, 102, 204, .18); }
html[data-surface="app"] .mesh-pill.client { background: rgba(108, 196, 232, .08); }
html[data-surface="app"] .share-badge.share-from { background: rgba(51, 102, 204, .12); border-color: rgba(51, 102, 204, .4); }
html[data-surface="app"] .share-existing-row.editing { background: rgba(51, 102, 204, .1); }
html[data-surface="app"] [style*="rgba(139,92,246"],
html[data-surface="app"] [style*="rgba(139, 92, 246"] { background: rgba(51, 102, 204, .14) !important; }
html[data-surface="app"] #pe-shared-note { border-color: rgba(51, 102, 204, .35) !important; }

/* ════════════════════════════════════════════════════════════════════
   Admin console (/admin) — same palette, a notch denser.
   ════════════════════════════════════════════════════════════════════ */
html[data-surface="admin"]:not([data-theme="light"]) {
  --bg: #0a1124; --panel: #0f1931; --card: #0f1931; --border: #22325a;
  --text: #e3e9f6; --dim: #8f9cbb; --accent: #8fb0f5; --iframe-bg: #0a1124;
  --k-mark: #6f95e6;
  color-scheme: dark;
}
html[data-surface="admin"][data-theme="light"] {
  --bg: #f1f4fb; --panel: #ffffff; --card: #ffffff; --border: #d3dbec;
  --text: #121b31; --dim: #56627d; --accent: #3366cc; --iframe-bg: #f1f4fb;
  --k-mark: #3366cc;
  color-scheme: light;
}
html[data-surface="admin"] body { font-family: var(--k-font); font-stretch: 96%; }
html[data-surface="admin"] button, html[data-surface="admin"] input,
html[data-surface="admin"] select, html[data-surface="admin"] textarea { font-family: inherit; }
html[data-surface="admin"] .sidebar-logo {
  color: var(--text); font-size: 16px; font-stretch: 125%; font-weight: 800; letter-spacing: -0.01em;
}
html[data-surface="admin"] .sidebar-logo::before {
  content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box;
  border-radius: 50%; border: 4px solid var(--k-mark);
}
html[data-surface="admin"] .sidebar-nav a:hover,
html[data-surface="admin"] .sidebar-group-header:hover { background: rgba(51, 102, 204, .12); }
html[data-surface="admin"] .main h1 { font-stretch: 112%; font-weight: 720; letter-spacing: -0.012em; }
html[data-surface="admin"] .panel h2 { font-stretch: 110%; letter-spacing: .04em; }

/* ════════════════════════════════════════════════════════════════════
   Sign-in pages: the cobalt field and the ring from the website, with the
   form on a card. The user sign-in follows the system's light/dark; the
   admin one follows the admin console's own switch (data-theme).
   ════════════════════════════════════════════════════════════════════ */
html[data-surface="login"], html[data-surface="admin-login"] {
  --k-card: #ffffff; --k-ink: #111a30; --k-slate: #56627d; --k-line: #d6deef;
  --k-field-2: #ebf0fa; --k-link: #2a55b0; --k-mark: #3366cc; --k-field: #3366cc;
}
@media (prefers-color-scheme: dark) {
  html[data-surface="login"] {
    --k-card: #0f1931; --k-ink: #e6ebf7; --k-slate: #96a3c0; --k-line: #24345c;
    --k-field-2: #16233f; --k-link: #9bb8f5; --k-mark: #6f95e6; --k-field: #234a9c;
  }
}
html[data-surface="admin-login"][data-theme="dark"] {
  --k-card: #0f1931; --k-ink: #e6ebf7; --k-slate: #96a3c0; --k-line: #24345c;
  --k-field-2: #16233f; --k-link: #9bb8f5; --k-mark: #6f95e6; --k-field: #234a9c;
}
html[data-surface="login"] body, html[data-surface="admin-login"] body {
  font-family: var(--k-font); font-stretch: 100%; background: var(--k-field); color: var(--k-ink);
  font-size: 15px; overflow-x: hidden;
}
/* The ring, drawn with two pseudo-elements so core's markup stays as is. */
html[data-surface="login"] .login-wrap::before, html[data-surface="admin-login"] body::before,
html[data-surface="login"] .login-wrap::after,  html[data-surface="admin-login"] body::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none; border-radius: 50%;
  width: 760px; height: 760px; right: -250px; top: -230px; box-sizing: border-box;
}
html[data-surface="login"] .login-wrap::before, html[data-surface="admin-login"] body::before {
  border: 150px solid rgba(255, 255, 255, .1);
}
html[data-surface="login"] .login-wrap::after, html[data-surface="admin-login"] body::after {
  width: 610px; height: 610px; right: -175px; top: -155px;
  border: 2px solid rgba(255, 255, 255, .85);
}
html[data-surface="login"] .login-wrap { background: none; padding: 24px 16px; position: relative; }
html[data-surface="login"] .login-card, html[data-surface="admin-login"] .login-box {
  position: relative; z-index: 1;
  background: var(--k-card); border: 0; border-radius: 22px;
  box-shadow: 0 30px 70px -20px rgba(4, 12, 36, .55);
}
html[data-surface="login"] .login-card { padding: 40px 40px 32px; max-width: 420px; }
html[data-surface="login"] .login-card h1, html[data-surface="admin-login"] .login-box h1 {
  display: flex; align-items: center; gap: 12px;
  background: none; -webkit-text-fill-color: currentColor; color: var(--k-ink);
  font-size: 26px; font-stretch: 125%; font-weight: 800; letter-spacing: -0.015em;
}
html[data-surface="admin-login"] .login-box h1 { justify-content: center; }
html[data-surface="login"] .login-card h1::before, html[data-surface="admin-login"] .login-box h1::before {
  content: ""; flex: none; width: 24px; height: 24px; box-sizing: border-box;
  border-radius: 50%; border: 6px solid var(--k-mark);
}
html[data-surface="login"] .login-card p.sub, html[data-surface="admin-login"] .login-box p.sub {
  color: var(--k-slate); font-size: 15px; line-height: 1.5;
}
html[data-surface="login"] .login-btn {
  min-height: 48px; border-radius: 999px; border: 1.5px solid var(--k-line);
  background: transparent; color: var(--k-ink); font-weight: 600; font-size: 15px;
}
html[data-surface="login"] .login-btn:hover { border-color: var(--k-cobalt); background: var(--k-field-2); }
html[data-surface="login"] .login-btn:focus-visible,
html[data-surface="admin-login"] .form-btn:focus-visible { outline: 3px solid var(--k-cobalt); outline-offset: 2px; }
html[data-surface="login"] .pwd-form { border-top-color: var(--k-line); }
html[data-surface="login"] .pwd-form input,
html[data-surface="admin-login"] .pass-wrap input, html[data-surface="admin-login"] #totpRow input {
  background: var(--k-field-2); border: 1.5px solid var(--k-line); color: var(--k-ink);
  border-radius: 12px; font-family: inherit; font-size: 15px; padding: 12px 14px;
}
html[data-surface="login"] .pwd-form input:focus,
html[data-surface="admin-login"] .pass-wrap input:focus, html[data-surface="admin-login"] #totpRow input:focus {
  border-color: var(--k-cobalt);
}
html[data-surface="login"] .pwd-submit, html[data-surface="admin-login"] .form-btn {
  background: var(--k-cobalt); border-color: var(--k-cobalt); color: #fff;
  border-radius: 999px; min-height: 48px; font-weight: 650; font-size: 15px;
}
html[data-surface="login"] .pwd-submit:hover, html[data-surface="admin-login"] .form-btn:hover {
  background: var(--k-cobalt-deep); filter: none;
}
html[data-surface="login"] .footer { color: var(--k-slate); font-size: 12.5px; }
html[data-surface="admin-login"] .login-box { padding: 40px 36px; }
html[data-surface="admin-login"] .pass-toggle { color: var(--k-slate); }

/* ════════════════════════════════════════════════════════════════════
   Legal pages: privacy, terms, contact, delete account.
   ════════════════════════════════════════════════════════════════════ */
html[data-surface="legal"] {
  --k-paper: #f5f7fc; --k-card: #ffffff; --k-ink: #111a30; --k-body: #2f3a52; --k-slate: #56627d;
  --k-line: #d6deef; --k-link: #2a55b0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html[data-surface="legal"] {
    --k-paper: #0a1124; --k-card: #0f1931; --k-ink: #e9eef9; --k-body: #c4cde2; --k-slate: #96a3c0;
    --k-line: #24345c; --k-link: #9bb8f5;
    color-scheme: dark;
  }
}
html[data-surface="legal"] body {
  background: var(--k-paper); color: var(--k-body);
  font-family: var(--k-font); font-stretch: 100%; line-height: 1.7;
  border-top: 6px solid var(--k-cobalt);
}
html[data-surface="legal"] h1 {
  color: var(--k-ink); font-size: clamp(30px, 5vw, 42px); line-height: 1.08;
  font-stretch: 118%; font-weight: 780; letter-spacing: -0.02em; margin-bottom: 12px;
}
html[data-surface="legal"] h2 { color: var(--k-ink); font-size: 20px; font-stretch: 110%; font-weight: 700; margin-top: 36px; }
html[data-surface="legal"] h3 { color: var(--k-ink); font-stretch: 105%; font-weight: 650; }
html[data-surface="legal"] strong { color: var(--k-ink); }
html[data-surface="legal"] p, html[data-surface="legal"] li { font-size: 16px; }
html[data-surface="legal"] a { color: var(--k-link); text-underline-offset: .18em; }
html[data-surface="legal"] .date { color: var(--k-slate); }
html[data-surface="legal"] .back { font-weight: 600; font-size: 14px; }
html[data-surface="legal"] .card { background: var(--k-card); border-color: var(--k-line); border-radius: 16px; }
/* contact.html: a centred card of buttons */
html[data-surface="legal"] .container > p { color: var(--k-slate); }
html[data-surface="legal"] a.btn { border-radius: 999px; }
html[data-surface="legal"] a.btn:hover { transform: none; }
html[data-surface="legal"] a.email { background: var(--k-cobalt); color: #fff; }
html[data-surface="legal"] a.email:hover { background: var(--k-cobalt-deep); }
html[data-surface="legal"] a.tg { background: transparent; color: var(--k-link); border: 1.5px solid var(--k-line); }
html[data-surface="legal"] a.tg:hover { background: rgba(51, 102, 204, .08); }
html[data-surface="legal"] a.back { color: var(--k-link); }

/* ════════════════════════════════════════════════════════════════════
   404
   ════════════════════════════════════════════════════════════════════ */
/* Core uses --bg for the page AND for the path box and the plain button, so
   --bg stays a light/dark surface and the cobalt field is set on body only. */
html[data-surface="error"] {
  --k-field: #3366cc;
  --bg: #ebf0fa; --panel: #ffffff; --border: #d6deef; --text: #111a30; --dim: #56627d; --accent: #3366cc;
}
@media (prefers-color-scheme: dark) {
  html[data-surface="error"] { --k-field: #234a9c; --bg: #16233f; --panel: #0f1931; --border: #24345c; --text: #e6ebf7; --dim: #96a3c0; --accent: #9bb8f5; }
}
html[data-surface="error"] body { background: var(--k-field); font-family: var(--k-font); font-stretch: 100%; }
html[data-surface="error"] .card { border: 0; border-radius: 22px; box-shadow: 0 30px 70px -20px rgba(4, 12, 36, .55); }
html[data-surface="error"] .code { font-stretch: 125%; font-weight: 800; letter-spacing: -0.03em; }
html[data-surface="error"] h1 { font-stretch: 110%; font-weight: 700; }
html[data-surface="error"] .btn { border-radius: 999px; padding: 10px 18px; }
html[data-surface="error"] .btn-primary { background: var(--k-cobalt); border-color: var(--k-cobalt); color: #fff; }
html[data-surface="error"] .btn-primary:hover { color: #fff; background: var(--k-cobalt-deep); opacity: 1; }