/* TouchBasePro brand skin for self-hosted AFFiNE (TKT-1192)
 * Injected via Apache mod_substitute before </head> on handbook-new.touchbasepro.com.
 * Hex + fonts taken verbatim from https://touchbasepro.com/brand.
 * AFFiNE token names verified against the live styles bundle (--affine-*).
 * Themes: AFFiNE scopes light on :root,[data-theme=light] and dark on [data-theme=dark].
 *
 * ITERATION 1: brand font (Roboto / Roboto Slab) + primary/brand/accent colour + link colour.
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Roboto+Slab:wght@400;500;700&display=swap');

/* ---- Brand palette (verbatim from touchbasepro.com/brand) ---- */
:root {
  --tbp-orange:        #EB9822; /* primary / core */
  --tbp-orange-light:  #EFAD4E; /* primary on dark */
  --tbp-orange-dark:   #BB7A1A; /* hover / pressed */
  --tbp-orange-50:     #fbecd7;
  --tbp-orange-100:    #f7d8aa;
  --tbp-blue:          #2285EB; /* secondary / links / charts */
  --tbp-charcoal:      #3F3F3F; /* body text, borders */
  --tbp-near-black:    #121212; /* dark background */
  --tbp-grey:          #BFBFBF;
}

/* ===== Typography (all themes) ===== */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --affine-font-family:      "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --affine-font-sans-family: "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Headings and doc titles in Roboto Slab (brand heading face) */
h1, h2, h3, h4,
[data-block-is-title="true"],
.doc-title-container,
.affine-doc-page-container .doc-title-container,
affine-page-root h1 {
  font-family: "Roboto Slab", "Roboto", Georgia, serif !important;
  letter-spacing: -0.01em;
}

/* ===== Primary / brand / accent -> TBP orange (light) ===== */
:root,
[data-theme="light"] {
  --affine-primary-color:  #EB9822;
  --affine-brand-color:    #EB9822;
  --affine-blue:           #EB9822;
  --affine-blue-600:       #EB9822;
  --affine-blue-700:       #BB7A1A;
  --affine-link-color:     #2285EB; /* links stay brand blue per brand page */
}

/* ===== Primary / brand / accent -> TBP orange (dark, lighter tint) ===== */
[data-theme="dark"] {
  --affine-primary-color:  #EFAD4E;
  --affine-brand-color:    #EFAD4E;
  --affine-blue:           #EFAD4E;
  --affine-blue-600:       #EFAD4E;
  --affine-blue-700:       #EB9822;
  --affine-link-color:     #6CB6FF;
}

/* ============================================================
 * ITERATION 1 (continued): sign-in page full treatment + v2 tokens
 * AFFiNE shipped a second token layer (--affine-v2-*) that the legacy
 * --affine-* overrides above do not reach, so primary buttons stayed
 * AFFiNE blue (#1e96eb). Re-point the interactive v2 tokens to TBP orange.
 * Primary buttons also hardcode the blue in a compiled class, so they get
 * an explicit rule keyed on the stable data-variant="primary" attribute.
 * The sign-in page is the only public, unauthenticated surface, so it gets
 * the TBP wordmark, orange buttons, and AFFiNE marketing links removed.
 * ============================================================ */

/* ---- interactive v2 tokens -> TBP orange (light) ---- */
:root,
[data-theme="light"] {
  --affine-v2-button-primary:          #EB9822;
  --affine-v2-button-checkBox:         #EB9822;
  --affine-v2-icon-activated:          #EB9822;
  --affine-v2-input-border-active:     #EB9822;
  --affine-v2-radio-active-chekced:    #EB9822;
  --affine-v2-toggle-background:       #EB9822;
  --affine-v2-loading-foreground:      #EB9822;
  --affine-v2-tab-divider-indicator:   #EB9822;
  --affine-v2-table-focusBorder:       #EB9822;
  --affine-v2-table-indicator-activated:#EB9822;
}
[data-theme="dark"] {
  --affine-v2-button-primary:      #EFAD4E;
  --affine-v2-icon-activated:      #EFAD4E;
  --affine-v2-toggle-background:   #EFAD4E;
  --affine-v2-loading-foreground:  #EFAD4E;
  --affine-v2-radio-active-chekced:#EFAD4E;
}

/* primary buttons: background is hardcoded in the compiled class, so force it */
button[data-variant="primary"] {
  background-color: var(--affine-v2-button-primary, #EB9822) !important;
  border-color:     var(--affine-v2-button-primary, #EB9822) !important;
}
button[data-variant="primary"]:hover {
  background-color: #BB7A1A !important;
  border-color:     #BB7A1A !important;
}
[data-theme="dark"] button[data-variant="primary"]:hover {
  background-color: #EB9822 !important;
  border-color:     #EB9822 !important;
}

/* ---- sign-in page (public face) ---- */
/* top-left logo -> TBP wordmark */
a.gy8ffm1 {
  width: 170px !important;
  height: 40px !important;
  background: url('/tbp-assets/tbp-logo.svg') left center / contain no-repeat;
}
a.gy8ffm1 > svg { display: none !important; }

/* remove AFFiNE marketing nav links (Official website / Blog / Contact us -> affine.pro) */
a.gy8ffm5 { display: none !important; }

/* heading: drop the AFFiNE logo + wordmark, show TBP title; hide server name */
.ubmlgk1 svg.logo { display: none !important; }
.ubmlgk1 > p:first-of-type { font-size: 0 !important; line-height: 0 !important; }
.ubmlgk1 > p:first-of-type::after {
  content: "TouchBasePro Handbook";
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tbp-charcoal, #3F3F3F);
}
.ubmlgk1 > p:last-of-type { font-size: 0 !important; line-height: 0 !important; }
.ubmlgk1 > p:last-of-type::after {
  content: "Sign in to continue";
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: #8a8a8a;
}
[data-theme="dark"] .ubmlgk1 > p:first-of-type::after { color: #f5f5f5; }

/* ============================================================
 * ITERATION 2: sidebar / header / buttons / links
 * ============================================================ */

/* primary buttons also paint a blue gradient (Download App glow etc) -
 * drop the gradient so the solid TBP orange shows cleanly */
button[data-variant="primary"] { background-image: none !important; }
button[data-variant="primary"]::before,
button[data-variant="primary"]::after { background-image: none !important; }

/* active sidebar nav item: TBP orange accent bar + warm tint + orange icon */
.qkmvqy1[data-active="true"] {
  background: rgba(235, 152, 34, 0.12) !important;
  box-shadow: inset 3px 0 0 0 #EB9822;
  border-radius: 4px;
}
.qkmvqy1[data-active="true"] svg { color: #EB9822 !important; }
[data-theme="dark"] .qkmvqy1[data-active="true"] {
  background: rgba(239, 173, 78, 0.16) !important;
  box-shadow: inset 3px 0 0 0 #EFAD4E;
}
[data-theme="dark"] .qkmvqy1[data-active="true"] svg { color: #EFAD4E !important; }

/* doc links / inline references stay brand blue (already set via --affine-link-color);
 * make the v2 emphasis token match the brand blue too */
:root, [data-theme="light"] { --affine-v2-text-emphasis: #2285EB; }
[data-theme="dark"]        { --affine-v2-text-emphasis: #6CB6FF; }

/* ============================================================
 * ITERATION 3: favicon, settings/toggles, empty states, public pages
 * - favicon.svg is injected by the vhost mod_substitute (served live).
 * - checkboxes / radios / toggles pick up TBP orange from the v2 tokens
 *   set in iteration 1, so Settings and in-doc controls are already on brand.
 * - public share pages are the same backend HTML, so the same mod_substitute
 *   injection brands them too (no extra rule needed).
 * - workspace NAME + AVATAR are AFFiNE workspace data, not reachable from
 *   Apache; recommend the owner rename "Demo Workspace" -> "TouchBasePro
 *   Handbook" and set the avatar in Settings > Workspace > Preference.
 * Only real CSS here: a light brand tint on empty-state placeholders. */
.affine-empty-doc-title,
[class*="empty"] svg { opacity: 0.9; }
:root, [data-theme="light"] { --affine-v2-button-checkBox: #EB9822; }
[data-theme="dark"]        { --affine-v2-button-checkBox: #EFAD4E; }

/* ============================================================
 * ITERATION 4: polish, dark mode, contrast
 * Dark primary buttons use the lighter orange (#EFAD4E); put dark text on
 * them so the label keeps >4.5:1 contrast (white-on-#EFAD4E is too low).
 * ============================================================ */
[data-theme="dark"] button[data-variant="primary"] {
  background-color: #EFAD4E !important;
  border-color:     #EFAD4E !important;
  background-image: none !important;
  color: #1A1A1A !important;
}
[data-theme="dark"] button[data-variant="primary"] svg { color: #1A1A1A !important; }
[data-theme="dark"] button[data-variant="primary"]:hover {
  background-color: #EB9822 !important;
  border-color:     #EB9822 !important;
}
/* keep inline emphasis / links readable in dark */
[data-theme="dark"] { --affine-v2-text-emphasis: #6CB6FF; }

/* iteration 4 (contd): dark sign-in uses the dark logo (white wordmark +
 * orange accent) so the top-left mark keeps contrast on the dark background */
[data-theme="dark"] a.gy8ffm1 {
  background-image: url('/tbp-assets/tbp-logo-dark.svg') !important;
}

/* ============================================================
 * ITERATION 5 (TKT-1141): Microsoft-only sign-in
 * Hide the email/password + magic-link form so only the Microsoft
 * (OIDC) button shows on the sign-in page. CSS-only, no auth code
 * change: removing this stylesheet fully restores the email form.
 * Selectors are the stable sign-in build classes (p1amr* family)
 * + data-testid hooks. The OAuth "Continue with ..." button is a
 * generic primary button and is left untouched.
 * ============================================================ */
/* email address field on the sign-in step */
.p1amrd { display: none !important; }
/* "Continue with email" submit button */
[data-testid="continue-login-button"] { display: none !important; }
/* the "or" divider between the email form and the Microsoft button */
.p1amr6 { display: none !important; }
/* second-step password / magic-link / code controls (only reachable
 * after an email submit, which is now hidden - belt and braces) */
[data-testid="password-input"],
[data-testid="sign-in-with-password"],
[data-testid="send-magic-link-button"],
[data-testid="continue-code-button"] { display: none !important; }