:root {
    color-scheme: light dark;

    text-rendering: optimizeLegibility;

    font-synthesis: none;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    background-color: var(--body-bg);
    color: var(--text-color);
    display: flex;
    flex-direction: column;

    min-height: 100svh;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-duration) var(--transition-easing), color var(--transition-duration) var(--transition-easing);
}

.body-has-fixed-top-navbar {
    padding-top: calc(var(--navbar-height) + 1rem);
}

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  background: var(--body-bg);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 12px;
  border: 3px solid var(--body-bg);
}
body::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-color-secondary);
}


a {
    color: var(--link-color);
    text-decoration: none;
    position: relative; 
    transition: color var(--transition-duration) var(--transition-easing);
}
a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -3px;
    left: 0;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform var(--transition-duration) var(--transition-easing);
}
a:hover {
    color: var(--primary-color);
}
a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}


:is(a, button, input, textarea, select, .form-check-input):focus-visible {
    outline: none;
    transition: box-shadow 0.2s var(--transition-easing); 
    box-shadow: 0 0 0 3px var(--body-bg), 0 0 0 5px var(--primary-color);
    border-radius: var(--border-radius);
}

main {
  flex-grow: 1;
}
.container, .container-fluid {
    width: 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    margin-left: auto;
    margin-right: auto;
}
.container {
    max-width: var(--max-width);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    margin: 0 0 1.5rem 0;
    line-height: 1.3;
    color: var(--heading-color);
    letter-spacing: var(--heading-letter-spacing);
    text-wrap: balance;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

p {
  margin: 0 0 1.25rem 0;
  max-width: 75ch; 
}
.lead {
  font-size: 1.2rem;
  font-weight: var(--font-weight-normal);
  color: var(--text-color-secondary);
}

blockquote {
    margin: 0 0 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 5px solid var(--primary-color);
    background-color: var(--component-bg-alt);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    color: var(--text-color-secondary);
}
blockquote p:last-child {
    margin-bottom: 0;
}

hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 3rem 0;
}

code, kbd, pre {
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
}
code, kbd {
    padding: .2em .4em;
    margin: 0;
    border-radius: var(--border-radius);
    background-color: var(--component-bg-alt);
    color: var(--danger-color); 
}
pre {
    display: block;
    padding: 1rem;
    margin: 0 0 1.5rem;
    overflow: auto;
    background-color: var(--component-bg-alt);
    border-radius: var(--border-radius);
    border: var(--border);
}
pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    border-radius: 0;
}


.text-center :is(p, .lead, .small) { margin-left: auto; margin-right: auto; }
footer :is(p, .small) { margin-left: auto; margin-right: auto; }

/* Authenticated cabinet foundation. Component and page rules live elsewhere. */
body.app-shell--auth {
  --navbar-height: var(--ks-layout-topbar-height);
  --app-navbar-height: var(--ks-layout-topbar-height);
  --sidebar-width: var(--ks-layout-sidebar-width);
  --sidebar-collapsed-width: var(--ks-layout-sidebar-collapsed-width);
  min-height: 100svh;
  background: var(--ks-color-canvas);
  color: var(--ks-color-text);
  font-family: var(--ks-font-family-sans);
  font-size: var(--ks-font-size-body);
  line-height: var(--ks-line-height-body);
  font-feature-settings: "tnum", "ss01", "cv11";
}

body.app-shell--auth .app-shell__workspace {
  min-height: calc(100svh - var(--ks-layout-topbar-height));
}

body.app-shell--auth #page-content-wrapper,
body.app-shell--auth .app-shell__content--auth {
  min-width: 0;
  background: var(--ks-color-canvas);
}

body.app-shell--auth .app-shell__content--auth {
  padding: var(--ks-space-2) 0 var(--ks-space-6);
}

body.app-shell--auth .app-shell__inner {
  width: min(100%, var(--ks-layout-content-max));
  margin-inline: auto;
  padding-inline: var(--ks-layout-page-gutter);
}

body.app-shell--auth :where(
  .metric-value,
  .money-value,
  .percent-value,
  .quantity-value,
  .table td,
  .table th
) {
  font-variant-numeric: tabular-nums;
}

body.app-shell--auth :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ks-color-action);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ks-color-focus);
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell--auth *,
  body.app-shell--auth *::before,
  body.app-shell--auth *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}