/* ==========================================================================
   TKeeper docs: Enterprise skin for Material for MkDocs
   Goals:
   - Calm off‑white background (less eye strain than pure white)
   - “Product docs” layout: clear hierarchy, consistent spacing, subtle borders
   - Nav + TOC that stays readable while scrolling
   - Minimal shadows, no “app store” gimmicks

   Usage:
   - Put this file at: docs/stylesheets/enterprise.css
   - In mkdocs.yml:
       extra_css:
         - stylesheets/enterprise.css
   ========================================================================== */

/* -----------------------------
   Design tokens
   ----------------------------- */
:root{
  /* Typography */
  --ent-font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ent-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Surfaces (subtle tint, not obvious “blue”) */
  --ent-page-bg: #f6f7fb;          /* page background */
  --ent-surface: #fbfcfe;          /* content surfaces */
  --ent-surface-2: #ffffff;        /* pure white only where needed */

  /* Text */
  --ent-fg: #0b1220;
  --ent-muted: rgba(11, 18, 32, 0.72);
  --ent-muted-2: rgba(11, 18, 32, 0.56);

  /* Borders */
  --ent-border: rgba(11, 18, 32, 0.10);
  --ent-border-2: rgba(11, 18, 32, 0.14);

  /* Accent */
  --ent-accent: #2563eb;
  --ent-accent-soft: rgba(37, 99, 235, 0.10);

  /* Radii */
  --ent-radius: 14px;
  --ent-radius-sm: 10px;

  /* Layout */
  --ent-header-h: 56px;


  /* Sidebars: more usable width */
  --md-sidebar-width: 18rem;
  --md-sidebar-width--wide: 20rem;
}

/* -----------------------------
   Material variable overrides
   (keep it gentle so updates don’t break you)
   ----------------------------- */
:root{
  --md-default-fg-color: var(--ent-fg);
  --md-default-fg-color--light: var(--ent-muted);
  --md-default-fg-color--lighter: var(--ent-muted-2);

  --md-accent-fg-color: var(--ent-accent);

  /* Don’t let Material “app background white” fry eyes */
  --md-default-bg-color: var(--ent-surface);
}

html, body { background: var(--ent-page-bg); }
body, .md-typeset { font-family: var(--ent-font); }
.md-typeset code, .md-typeset pre code { font-family: var(--ent-mono); }

/* Content width: docs app, not a blog */
.md-grid { max-width: 1240px; }

/* Ensure anchor jumps don’t hide under the header */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  scroll-margin-top: calc(var(--ent-header-h) + 14px);
}

/* -----------------------------
   Header / tabs
   ----------------------------- */
.md-header,
.md-tabs{
  background: rgba(251, 252, 254, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  box-shadow: none;
  border-bottom: 1px solid var(--ent-border);
  color: var(--ent-fg);
}

.md-header__inner { height: var(--ent-header-h); }

/* -----------------------------
   Sidebars
   ----------------------------- */
.md-sidebar--primary{
  border-right: 1px solid var(--ent-border);
}

.md-sidebar--secondary{
  border-left: 1px solid var(--ent-border);
}

.md-sidebar__scrollwrap{
  background: rgba(251, 252, 254, 0.72);
  padding: 0.35rem 0.35rem;
}

/* -----------------------------
   Left navigation: hierarchy + states
   ----------------------------- */
.md-nav__title{
  color: var(--ent-muted-2);
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.55rem 0.70rem;
}

.md-nav__link{
  color: var(--ent-fg);
  border-radius: 10px;
  padding: 0.34rem 0.55rem;
  font-weight: 500;
  font-size: 0.71rem;
  line-height: 1.25;
  position: relative;
}

.md-nav__link:hover{
  background: rgba(11, 18, 32, 0.04);
}

/* Active (Material uses both patterns) */
.md-nav__item--active > .md-nav__link,
.md-nav__link--active{
  background: var(--ent-accent-soft);
  color: var(--ent-fg);
  font-weight: 760;
}


/* Nested items: slight indent so the indicator doesn't collide */
.md-nav__item .md-nav__list .md-nav__link{ padding-left: 0.70rem; }

/* Integrated TOC in left sidebar: slightly smaller */
.md-nav--integrated .md-nav__link{ font-size: 0.93em; }

/* -----------------------------
   Right TOC: visible by default
   ----------------------------- */
.md-sidebar--secondary .md-nav__title{
  color: var(--ent-muted-2);
  font-weight: 700;
  padding: 0.55rem 0.70rem;
}

.md-sidebar--secondary .md-nav__link{
  color: var(--ent-muted);
  background: transparent;
  border-radius: 10px;
  padding: 0.28rem 0.45rem;
  font-size: 0.7rem;
  line-height: 1.25;
}

.md-sidebar--secondary .md-nav__link:hover{
  color: var(--ent-fg);
  background: rgba(11, 18, 32, 0.04);
}

.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__item--active > .md-nav__link{
  color: var(--ent-fg);
  background: rgba(11, 18, 32, 0.05);
  font-weight: 700;
}

/* -----------------------------
   Main content: “card” surface
   ----------------------------- */
.md-main{ background: transparent; }
.md-main__inner{ margin-top: 1rem; }

.md-content__inner{
  background: var(--ent-surface);
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius);
  padding: 1.6rem 1.8rem 3.0rem;
  box-shadow: 0 1px 0 rgba(11, 18, 32, 0.04);
}

/* On smaller screens, don’t waste space */
@media (max-width: 60em){
  .md-content__inner{
    padding: 1.15rem 1.05rem 2.4rem;
    border-radius: 12px;
  }
}

/* Typography: calm, readable */
.md-typeset{
  font-size: 0.82rem;
  line-height: 1.70;
}

.md-typeset p{ margin: 0.95em 0; }

.md-typeset h1{
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
}

.md-typeset h2{
  letter-spacing: -0.015em;
  margin-top: 2.3rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--ent-border);
}

.md-typeset h3{ margin-top: 1.55rem; }

/* Links: underline only as a hint, not “blue everywhere” */
.md-typeset a{
  color: var(--ent-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, 0.26);
}

.md-typeset a:hover{
  border-bottom-color: rgba(37, 99, 235, 0.70);
}

/* Better focus states */
:where(a, button, input, textarea, select, summary):focus-visible{
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
  border-radius: 10px;
}

/* -----------------------------
   Code: bordered, consistent
   ----------------------------- */
.md-typeset pre{
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius);
  box-shadow: none;
  overflow: hidden;
}

.md-typeset code{
  border: 1px solid rgba(11, 18, 32, 0.11);
  border-radius: 8px;
  padding: 0.10em 0.34em;
}

/* Inline code inside headings */
.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code{
  border-color: rgba(11, 18, 32, 0.14);
}

/* -----------------------------
   Tables: rounded + subtle header
   ----------------------------- */
.md-typeset table:not([class]){
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius);
  overflow: hidden;
  background: var(--ent-surface-2);
}

.md-typeset table:not([class]) th{
  background: rgba(11, 18, 32, 0.03);
  border-bottom: 1px solid var(--ent-border);
  font-weight: 720;
}

.md-typeset table:not([class]) td{
  border-top: 1px solid var(--ent-border);
}

/* -----------------------------
   Callouts: keep it “enterprise”
   ----------------------------- */
.md-typeset blockquote{
  border-left: 3px solid rgba(37, 99, 235, 0.55);
  background: rgba(37, 99, 235, 0.06);
  border-radius: var(--ent-radius-sm);
  padding: 0.9rem 1rem;
  color: var(--ent-muted);
}

.md-typeset .admonition,
.md-typeset details{
  border-radius: var(--ent-radius);
  border: 1px solid var(--ent-border);
  box-shadow: none;
  background: rgba(251, 252, 254, 0.86);
}

.md-search__form{
  border-radius: 12px;
  background: rgba(11, 18, 32, 0.03);
  overflow: hidden;
}

.md-search__input {
  border-radius: 12px;
  color: var(--ent-fg);
}

.md-search__input::placeholder {
  color: rgba(11, 18, 32, 0.42) !important;
  opacity: 1 !important;
}

.md-search__input{ font-size: 0.81rem; }

.md-search__input + label,
.md-search__input ~ label {
  color: transparent !important;
}

input.md-search__input:-webkit-autofill {
  -webkit-text-fill-color: var(--ent-fg) !important;
  transition: background-color 999999s ease-in-out 0s;
}

.md-footer,
.md-footer-meta{
  border-top: 1px solid var(--ent-border);
  box-shadow: none;
}

/* -----------------------------
   Optional: CTA buttons
   Use in Markdown with attr_list:
   [Get started](init.md){ .md-button .md-button--primary }
   ----------------------------- */
.md-typeset .md-button{
  border-radius: 999px;
  border: 1px solid var(--ent-border-2);
  padding: 0.55rem 0.95rem;
  font-weight: 720;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.md-typeset .md-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(11, 18, 32, 0.10);
}

.md-typeset .md-button--primary{
  background: var(--ent-accent);
  border-color: rgba(37, 99, 235, 0.55);
  color: #fff;
}

.md-typeset .md-button--primary:hover{
  background: #1f5fe0;
}

/* -----------------------------
   Dark scheme (if enabled later)
   ----------------------------- */
[data-md-color-scheme="slate"]{
  --ent-page-bg: #0b1020;
  --ent-surface: #0f172a;
  --ent-surface-2: #0f172a;

  --ent-fg: #e5e7eb;
  --ent-muted: rgba(229, 231, 235, 0.72);
  --ent-muted-2: rgba(229, 231, 235, 0.56);

  --ent-border: rgba(229, 231, 235, 0.10);
  --ent-border-2: rgba(229, 231, 235, 0.14);

  --ent-accent: #60a5fa;
  --ent-accent-soft: rgba(96, 165, 250, 0.14);
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs,
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap{
  background: rgba(15, 23, 42, 0.82);
}