/**
 * Ikiruska ops brand overlay — injected on support / crm / billing.
 * Scoped per app (Zammad #app, Twenty html.light, UniBee #root).
 * Palette: commercial/brand/ikiruska-palette.md
 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
  --ik-bg: #f4efe5;
  --ik-bg-sidebar: #ece4d6;
  --ik-bg-muted: #f2ece1;
  --ik-surface: #ffffff;
  --ik-text: #2a2117;
  --ik-text-strong: #1f1810;
  --ik-text-muted: #9a8a72;
  --ik-accent: #a8472a;
  --ik-accent-dark: #863518;
  --ik-accent-soft: #c2683a;
  --ik-accent-highlight: rgba(168, 71, 42, 0.14);
  --ik-border: #e7dece;
  --ik-success: #4f6b2c;
  --ik-nav-active-text: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Zammad — support.ikiruska.com                                      */
/* ------------------------------------------------------------------ */

html:has(#app) {
  --highlight: var(--ik-accent);
  --button-primary-background: var(--ik-accent);
  --button-primary-background-active: var(--ik-accent-dark);
  --text-link: var(--ik-accent);
  --text-inverted: #ffffff;
  --text-active: #ffffff;
  --text-nav: #d4c8b4;
  --background-primary: var(--ik-bg);
  --background-primary-alt: var(--ik-bg-sidebar);
  --background-secondary: var(--ik-surface);
  --background-secondary-hover: var(--ik-bg-muted);
  --background-tertiary: #3a3024;
  --background-quaternary: #2a2117;
  --background-quaternary-alt: var(--ik-bg-sidebar);
  --background-highlight: var(--ik-accent-highlight);
  --border: var(--ik-border);
  --border-highlight: var(--ik-accent-soft);
  --text-normal: var(--ik-text);
  --text-muted: var(--ik-text-muted);
  --header-primary: var(--ik-text-strong);
  --menu-text: #c4b8a4;
  --menu-text-active: var(--ik-nav-active-text);
  --menu-background-active: var(--ik-accent);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

html:has(#app) body {
  background: var(--ik-bg);
  color: var(--ik-text);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

html:has(#app) .main .sidebar,
html:has(#app) .navigation,
html:has(#app) .page-sidebar {
  background: var(--ik-bg-sidebar);
}

/* Content links only — not sidebar / tab navigation */
html:has(#app) .main a,
html:has(#app) .article-content a,
html:has(#app) .richtext-content a,
html:has(#app) .ticket-article a {
  color: var(--ik-accent);
}

html:has(#app) .main a:hover,
html:has(#app) .article-content a:hover {
  color: var(--ik-accent-dark);
}

/* Active sidebar + tab items: white text on accent background */
html:has(#app) .menu-item.is-active,
html:has(#app) .menu-item.is-hovered,
html:has(#app) .nav-tab.is-active {
  color: var(--ik-nav-active-text) !important;
  background: var(--ik-accent) !important;
}

html:has(#app) .menu-item.is-active a,
html:has(#app) .menu-item.is-hovered a,
html:has(#app) .nav-tab.is-active a {
  color: var(--ik-nav-active-text) !important;
}

html:has(#app) .menu-item.is-active .icon,
html:has(#app) .menu-item.is-hovered .icon,
html:has(#app) .nav-tab.is-active .icon,
html:has(#app) .nav-tab.is-active .nav-tab-icon .icon {
  fill: currentColor !important;
}

html:has(#app) .btn--primary,
html:has(#app) button.btn--primary {
  background: var(--ik-accent);
  border-color: var(--ik-accent);
  color: var(--ik-nav-active-text);
}

html:has(#app) .btn--primary:hover,
html:has(#app) button.btn--primary:hover {
  background: var(--ik-accent-dark);
  border-color: var(--ik-accent-dark);
}

/* ------------------------------------------------------------------ */
/* Twenty CRM — crm.ikiruska.com                                      */
/* ------------------------------------------------------------------ */

html.light,
html.light body,
html.light #root {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

html.light body {
  background-color: var(--ik-bg);
  color: var(--ik-text);
}

html.light [data-testid="page-title"],
html.light h1,
html.light h2,
html.light h3 {
  color: var(--ik-text-strong);
}

/* Main content links — exclude navigation drawer */
html.light .main-content a[href],
html.light [data-testid="page-body"] a[href] {
  color: var(--ik-accent);
}

html.light button[type="submit"],
html.light [role="button"][aria-label*="Continue"],
html.light [role="button"][aria-label*="Save"] {
  background-color: var(--ik-accent);
  border-color: var(--ik-accent);
  color: var(--ik-nav-active-text);
}

/* Navigation drawer active item: dark text on subtle highlight (not accent-on-accent) */
html.light .navigation-drawer-item[aria-selected="true"],
html.light .navigation-drawer-item.active {
  background-color: var(--ik-accent-highlight) !important;
  color: var(--ik-text-strong) !important;
}

html.light .navigation-drawer-item[aria-selected="true"] a,
html.light .navigation-drawer-item.active a,
html.light .navigation-drawer-item[aria-selected="true"] span,
html.light .navigation-drawer-item.active span {
  color: var(--ik-text-strong) !important;
}

html.light .navigation-drawer-item[aria-selected="true"] svg,
html.light .navigation-drawer-item.active svg {
  color: var(--ik-accent) !important;
  fill: currentColor;
}

html.light [data-active]:not(.navigation-drawer-item) {
  color: var(--ik-accent-dark) !important;
}

html.light [data-selected] {
  color: var(--ik-accent-dark) !important;
}

/* ------------------------------------------------------------------ */
/* UniBee — billing.ikiruska.com (Ant Design)                         */
/* ------------------------------------------------------------------ */

html:not(.light):has(#root) {
  --ant-primary-color: var(--ik-accent);
  --ant-color-primary: var(--ik-accent);
  --ant-color-link: var(--ik-accent);
  --ant-color-link-hover: var(--ik-accent-dark);
}

html:not(.light):has(#root) body,
html:not(.light):has(#root) #root,
html:not(.light):has(#root) .ant-layout {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: var(--ik-bg);
  color: var(--ik-text);
}

html:not(.light):has(#root) .ant-layout-sider,
html:not(.light):has(#root) .ant-menu-dark {
  background: #3a3024 !important;
}

/* Dark sidebar: white label on accent fill */
html:not(.light):has(#root) .ant-menu-dark .ant-menu-item-selected,
html:not(.light):has(#root) .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
  background-color: var(--ik-accent) !important;
  color: var(--ik-nav-active-text) !important;
}

html:not(.light):has(#root) .ant-menu-dark .ant-menu-item-selected .ant-menu-title-content,
html:not(.light):has(#root) .ant-menu-dark .ant-menu-item-selected .anticon,
html:not(.light):has(#root) .ant-menu-dark .ant-menu-item-selected a,
html:not(.light):has(#root) .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title .ant-menu-title-content,
html:not(.light):has(#root) .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title .anticon {
  color: var(--ik-nav-active-text) !important;
}

/* Light inline menus (if any): accent text on tinted row */
html:not(.light):has(#root) .ant-menu-light .ant-menu-item-selected {
  background-color: var(--ik-accent-highlight) !important;
  color: var(--ik-accent-dark) !important;
}

html:not(.light):has(#root) .ant-menu-light .ant-menu-item-selected .ant-menu-title-content,
html:not(.light):has(#root) .ant-menu-light .ant-menu-item-selected .anticon {
  color: var(--ik-accent-dark) !important;
}

html:not(.light):has(#root) .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--ik-accent) !important;
}

html:not(.light):has(#root) .ant-btn-primary:not(:disabled) {
  background: var(--ik-accent);
  border-color: var(--ik-accent);
  color: var(--ik-nav-active-text);
}

html:not(.light):has(#root) .ant-btn-primary:not(:disabled):hover {
  background: var(--ik-accent-dark);
  border-color: var(--ik-accent-dark);
}

html:not(.light):has(#root) .ant-checkbox-checked .ant-checkbox-inner,
html:not(.light):has(#root) .ant-radio-checked .ant-radio-inner {
  background-color: var(--ik-accent);
  border-color: var(--ik-accent);
}

html:not(.light):has(#root) .ant-layout-content a,
html:not(.light):has(#root) .ant-card a,
html:not(.light):has(#root) .ant-table a,
html:not(.light):has(#root) .ant-typography a {
  color: var(--ik-accent);
}

html:not(.light):has(#root) .ant-layout-content a:hover,
html:not(.light):has(#root) .ant-card a:hover,
html:not(.light):has(#root) .ant-typography a:hover {
  color: var(--ik-accent-dark);
}

html:not(.light):has(#root) .ant-layout-header,
html:not(.light):has(#root) .ant-card,
html:not(.light):has(#root) .ant-table,
html:not(.light):has(#root) .ant-input,
html:not(.light):has(#root) .ant-select-selector {
  border-color: var(--ik-border);
}

html:not(.light):has(#root) .ant-card {
  background: var(--ik-surface);
}

/* ------------------------------------------------------------------ */
/* Shared login / auth styling                                        */
/* ------------------------------------------------------------------ */

/* Zammad — login, signup, password reset */
html:has(#app) {
  --fullscreen-background: var(--ik-bg);
  --fullscreen-text: var(--ik-text);
  --fullscreen-text-link: var(--ik-accent);
  --fullscreen-text-muted: var(--ik-text-muted);
}

html:has(#app) .login,
html:has(#app) .signup,
html:has(#app) .reset_password,
html:has(#app) .request_admin_password_auth,
html:has(#app) .getstarted {
  background: var(--ik-bg);
  color: var(--ik-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html:has(#app) .login .hero-unit,
html:has(#app) .login .wizard-slide,
html:has(#app) .signup .hero-unit,
html:has(#app) .reset_password .hero-unit,
html:has(#app) .request_admin_password_auth .hero-unit {
  background: var(--ik-surface);
  border: 1px solid var(--ik-border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(42, 33, 23, 0.08);
  color: var(--ik-text);
}

html:has(#app) .login .hero-unit h1,
html:has(#app) .login .hero-unit h2,
html:has(#app) .signup .hero-unit h1,
html:has(#app) .reset_password .hero-unit h1 {
  color: var(--ik-text-strong);
}

html:has(#app) .login a,
html:has(#app) .signup a,
html:has(#app) .reset_password a {
  color: var(--ik-accent);
}

html:has(#app) .login a:hover,
html:has(#app) .signup a:hover,
html:has(#app) .reset_password a:hover {
  color: var(--ik-accent-dark);
}

html:has(#app) .login .company-logo,
html:has(#app) .signup .company-logo {
  content: url("/_brand/ikiruska-mark.svg");
  max-height: 72px;
  max-width: 72px;
  object-fit: contain;
  margin-bottom: 4px !important;
}

html:has(#app) .login .company-logo + *::before,
html:has(#app) .signup .company-logo + *::before,
html:has(#app) .reset_password .company-logo + *::before {
  content: "Support";
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ik-text-muted);
  margin-bottom: 18px;
}

html:has(#app) .login .form-controls .btn--primary,
html:has(#app) .signup .form-controls .btn--primary,
html:has(#app) .reset_password .form-controls .btn--primary {
  background: var(--ik-accent);
  border-color: var(--ik-accent);
  color: var(--ik-nav-active-text);
}

html:has(#app) .login .form-controls .btn--primary:hover,
html:has(#app) .signup .form-controls .btn--primary:hover,
html:has(#app) .reset_password .form-controls .btn--primary:hover {
  background: var(--ik-accent-dark);
  border-color: var(--ik-accent-dark);
}

html:has(#app) .login input[type="text"],
html:has(#app) .login input[type="password"],
html:has(#app) .login input[type="email"],
html:has(#app) .signup input[type="text"],
html:has(#app) .signup input[type="password"],
html:has(#app) .signup input[type="email"],
html:has(#app) .reset_password input[type="text"],
html:has(#app) .reset_password input[type="password"],
html:has(#app) .reset_password input[type="email"] {
  background: var(--ik-bg);
  border-color: var(--ik-border);
  color: var(--ik-text);
  border-radius: 9px;
}

/* Twenty — sign-in / sign-up / verify (no nav drawer when logged out) */
html.light #root:not(:has(.navigation-drawer)) {
  background: var(--ik-bg) !important;
}

html.light #root:not(:has(.navigation-drawer)) [class*="s1hnzxgi"],
html.light #root:not(:has(.navigation-drawer)) [class*="s17x7iyq"] {
  background: var(--ik-bg) !important;
}

html.light #root:not(:has(.navigation-drawer)) h1,
html.light #root:not(:has(.navigation-drawer)) h2 {
  color: var(--ik-text-strong) !important;
}

html.light #root:not(:has(.navigation-drawer)) p,
html.light #root:not(:has(.navigation-drawer)) label {
  color: var(--ik-text) !important;
}

html.light #root:not(:has(.navigation-drawer)) input,
html.light #root:not(:has(.navigation-drawer)) textarea {
  background: var(--ik-surface) !important;
  border-color: var(--ik-border) !important;
  color: var(--ik-text) !important;
  border-radius: 9px !important;
}

html.light #root:not(:has(.navigation-drawer)) button[type="submit"],
html.light #root:not(:has(.navigation-drawer)) button[data-variant="primary"] {
  background-color: var(--ik-accent) !important;
  border-color: var(--ik-accent) !important;
  color: var(--ik-nav-active-text) !important;
}

html.light #root:not(:has(.navigation-drawer)) button[type="submit"]:hover,
html.light #root:not(:has(.navigation-drawer)) button[data-variant="primary"]:hover {
  background-color: var(--ik-accent-dark) !important;
  border-color: var(--ik-accent-dark) !important;
}

html.light #root:not(:has(.navigation-drawer)) a[href] {
  color: var(--ik-accent) !important;
}

html.light #root:not(:has(.navigation-drawer)) a[href]:hover {
  color: var(--ik-accent-dark) !important;
}

/* Replace Twenty logo on auth screens */
html.light #root:not(:has(.navigation-drawer)) div[style*="background-image"] {
  background-image: url("/_brand/ikiruska-mark.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

html.light #root:not(:has(.navigation-drawer)) [class*="s7zlktd"] {
  background-image: url("/_brand/ikiruska-mark.svg") !important;
  opacity: 1 !important;
  height: 40px !important;
  width: 40px !important;
}

/* Subtitle under logo on auth screens */
html.light #root:not(:has(.navigation-drawer)) div:has(> div[style*="background-image"])::after {
  content: "CRM";
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ik-text-muted);
  margin-top: 6px;
}

/* Auth card panels */
html.light #root:not(:has(.navigation-drawer)) [class*="sgm6g22"],
html.light #root:not(:has(.navigation-drawer)) form {
  background: var(--ik-surface);
  border: 1px solid var(--ik-border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(42, 33, 23, 0.06);
}

/* UniBee — login / signup / forgot-password */
html:not(.light):has(#root) div[style*="334b61"] {
  background: linear-gradient(135deg, var(--ik-accent-dark), #3a3024) !important;
  color: var(--ik-nav-active-text) !important;
}

html:not(.light):has(#root) img[src*="UniBeeLogo"] {
  content: url("/_brand/ikiruska-logo.svg");
  height: 36px !important;
  width: auto !important;
}

html:not(.light):has(#root) img[src*="UniBeeLogo"] + span {
  display: none !important;
}

/* Subtitle under logo in auth header */
html:not(.light):has(#root) div[style*="top:0"][style*="64px"][style*="334b61"] > div::after {
  content: "Billing";
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 2px;
}

/* Hide UniBee auth footer (GitHub links etc.) */
html:not(.light):has(#root) div[style*="bottom:0"][style*="164px"][style*="334b61"] {
  display: none !important;
}

html:not(.light):has(#root) div[style*="calc(100vh - 142px)"] {
  background: var(--ik-bg) !important;
  height: calc(100vh - 64px) !important;
  min-height: calc(100vh - 64px) !important;
}

html:not(.light):has(#root) div[style*="f0f2f5"] {
  background: var(--ik-bg) !important;
}

html:not(.light):has(#root) div[style*="box-shadow: 0 2px 8px"] {
  border: 1px solid var(--ik-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 28px rgba(42, 33, 23, 0.08) !important;
}

html:not(.light):has(#root) div[style*="f0f2f5"] h1,
html:not(.light):has(#root) div[style*="calc(100vh - 142px)"] h1 {
  color: var(--ik-text-strong) !important;
  font-weight: 600 !important;
}

html:not(.light):has(#root) div[style*="f0f2f5"] .ant-input,
html:not(.light):has(#root) div[style*="calc(100vh - 142px)"] .ant-input,
html:not(.light):has(#root) div[style*="f0f2f5"] .ant-input-password,
html:not(.light):has(#root) div[style*="calc(100vh - 142px)"] .ant-input-password {
  background: var(--ik-bg) !important;
  border-color: var(--ik-border) !important;
  border-radius: 9px !important;
}

html:not(.light):has(#root) div[style*="f0f2f5"] button[style*="1890ff"],
html:not(.light):has(#root) div[style*="calc(100vh - 142px)"] button[style*="1890ff"],
html:not(.light):has(#root) div[style*="f0f2f5"] .ant-btn-primary,
html:not(.light):has(#root) div[style*="calc(100vh - 142px)"] .ant-btn-primary {
  background-color: var(--ik-accent) !important;
  border-color: var(--ik-accent) !important;
  color: var(--ik-nav-active-text) !important;
}

html:not(.light):has(#root) div[style*="334b61"] a {
  color: rgba(255, 255, 255, 0.85) !important;
}

html:not(.light):has(#root) div[style*="334b61"] a:hover {
  color: #ffffff !important;
}