/* ValleyKeep Books (2026-10-26): ValleyKeep's look over Bigcapital, injected by the brand layer (brand.conf); Bigcapital
   itself is unchanged. Blue #1663D6 (white on it 5.5:1, WCAG AA), hover #124FB0, ink navy #0F2A4A, ground #F6F8FB. */
:root { --vk-blue: #1663D6; --vk-blue-hover: #124FB0; --vk-ink: #0F2A4A; --vk-ground: #F6F8FB; --vk-line: #DCE3EC; }

/* Bigcapital's own colour variables (packages/webapp/src/style/_variables.scss, v0.25.45): the sturdiest way to theme
   it, since they are meant to be set and survive its updates. Light theme only (bp4-dark is never set: brand.conf). */
:root, body {
  --color-primary: var(--vk-blue);
  --color-ui-menu-select-item-active-background: var(--vk-blue);
  --color-sidebar-background: var(--vk-ink);
  --color-sidebar-menu-item-focus-background: #0B2140;
  --color-sidebar-menu-item-hover-background: rgba(127, 176, 255, .16);
  --color-sidebar-menu-item-active-background: rgba(127, 176, 255, .22);
  --color-sidebar-overlay-item-text: var(--vk-ink);
  --color-sidebar-overlay-item-hover-text: var(--vk-blue);
  --color-dashboard-topbar-title-text: var(--vk-ink);
}

/* Primary actions and links in the ValleyKeep blue. */
.bp4-button.bp4-intent-primary:not(.bp4-minimal):not(.bp4-outlined) { background-color: var(--vk-blue) !important; box-shadow: none !important; }
.bp4-button.bp4-intent-primary:not(.bp4-minimal):not(.bp4-outlined):hover { background-color: var(--vk-blue-hover) !important; }
.bp4-button.bp4-intent-primary.bp4-minimal, .bp4-button.bp4-intent-primary.bp4-outlined { color: var(--vk-blue) !important; }
a, a:hover { color: var(--vk-blue); }
.bp4-input:focus, .bp4-input.bp4-active { box-shadow: 0 0 0 1px var(--vk-blue), 0 0 0 3px rgba(22, 99, 214, .25) !important; }
.bp4-control input:checked ~ .bp4-control-indicator { background-color: var(--vk-blue) !important; }
#nprogress .bar { background: var(--vk-blue) !important; }

/* Bigcapital's marks out, the ValleyKeep wordmark in (its logo is an icon span in the light theme, an svg in the dark). */
svg[data-icon^="bigcapital"] { display: none !important; }
.bp4-icon-bigcapital, div:has(> svg[data-icon="bigcapital-alt"]) {
  display: inline-block !important; width: 240px; height: 44px;
  background: url(/vk-brand/wordmark.svg) center / contain no-repeat; }
/* (The sign-in pages' second mark, under the links, goes.) */
div:has(form) ~ div .bp4-icon-bigcapital { display: none !important; }

/* The sign-in pages: clear and light. (Bigcapital keeps its bp4-dark theme class on the page: its in-app menus and popovers
   are drawn for it. Only these pages are turned light, here.) */
body.authentication { background: var(--vk-ground) !important; color: var(--vk-ink) !important; }
body.authentication div:has(> form) { background: #FFFFFF !important; border: 1px solid var(--vk-line) !important; box-shadow: 0 1px 2px rgba(15, 42, 74, .06) !important; }
body.authentication .bp4-label, body.authentication .bp4-control, body.authentication p { color: var(--vk-ink) !important; }
body.authentication .bp4-input { background: #FFFFFF !important; color: var(--vk-ink) !important; box-shadow: inset 0 0 0 1px var(--vk-line) !important; }
body.authentication .bp4-control-indicator { background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #9AA7B8 !important; }
body.authentication .bp4-input-action .bp4-button { color: #5C6B80 !important; }
body.authentication a { color: var(--vk-blue) !important; }
body.authentication div:has(> .bp4-icon-bigcapital) { text-align: center; }

/* Team only: no sign-up offer (sign-up is also closed at the door and in Bigcapital). */
p:has(> a[href="/auth/register"]), a[href="/auth/register"] { display: none !important; }

/* Phones: Bigcapital's sign-in pages are laid out 1100px wide; here they fit the screen, with a 16px side margin. */
@media (max-width: 760px) {
  body.authentication .App, body.authentication .App > div { min-width: 0 !important; width: 100% !important; }
  body.authentication .App > div > div { margin: 0 auto !important; width: calc(100% - 32px) !important; max-width: 384px; }
  body.authentication .bp4-icon-bigcapital { width: 200px; height: 38px; }
}

/* Inside the app: ValleyKeep's navy sidebar, its white wordmark where Bigcapital's small mark was. */
.sidebar::after { content: ""; position: absolute; left: 20px; bottom: 18px; width: 150px; height: 28px; pointer-events: none;
  background: url(/vk-brand/wordmark-white.svg) left center / contain no-repeat; }
body.has-mini-sidebar .sidebar::after { width: 30px; left: 10px; background-size: cover; }
svg[data-icon="mini-bigcapital"] { display: none !important; }
:has(> svg[data-icon="mini-bigcapital"]) {
  display: block !important; width: 150px; height: 28px; margin: 12px 20px;
  background: url(/vk-brand/wordmark-white.svg) left center / contain no-repeat; }
body.has-mini-sidebar :has(> svg[data-icon="mini-bigcapital"]) { width: 30px; margin: 12px 10px; background-size: cover; }

/* Phones (up to 760px): the whole app fits the screen. */
@media (max-width: 760px) {
  .App, .dashboard-content { min-width: 0 !important; }
  /* The sidebar is hidden; the menu button brings it over the page (and hides it again). */
  .SplitPane > .Pane1 { position: fixed !important; inset: 0 auto 0 0; z-index: 30; width: 0 !important; overflow: hidden; }
  .SplitPane > .Resizer { display: none !important; }
  .SplitPane > .Pane2 { width: 100% !important; flex: 1 1 100% !important; }
  body.has-mini-sidebar .SplitPane > .Pane1 { width: 260px !important; box-shadow: 0 0 0 100vmax rgba(15, 42, 74, .45); }
  body.has-mini-sidebar .sidebar, body.has-mini-sidebar .sidebar__scroll-wrapper, body.has-mini-sidebar .sidebar__inner { width: 260px !important; }
  /* The top bar: icons only, nothing pushed off the edge. */
  .dashboard__topbar { flex-wrap: wrap; min-width: 0; }
  .dashboard__topbar-navbar .bp4-button-text, .dashboard__breadcrumbs, .dashboard__back-link { display: none !important; }
  .dashboard__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
  /* Toolbars, lists, reports and forms scroll sideways inside the page, never the page itself. */
  .dashboard__actions-bar, .navbar--dashboard-actions-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .navbar--dashboard-actions-bar .bp4-navbar-group { flex-wrap: nowrap; }
  .dashboard__page, .dashboard__insider { min-width: 0 !important; max-width: 100vw; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Dialogs and side drawers fit the screen. */
  .sidebar-overlay { left: 0 !important; width: 100vw !important; max-width: 100vw !important; z-index: 40; }
  body.has-mini-sidebar .sidebar::after { width: 150px; left: 20px; background-size: contain; }
  .bp4-dialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; margin: 12px !important; }
  .bp4-drawer { width: 100vw !important; max-width: 100vw !important; }
  .bp4-popover2-content, .bp4-popover-content { max-width: calc(100vw - 24px); }
  .bp4-input, input, select, textarea { font-size: 16px !important; }   /* (no zoom-in on focus in iOS Safari) */
}