html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--cadlab-blue);
}

html {
    position: relative;
    min-height: 100%;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 🔥 NO SCROLLBAR */
}

body {
    margin-bottom: 60px;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 🔥 NO SCROLLBAR */
    background: var(--cadlab-bg);
    color: var(--cadlab-ink);
    font-family: var(--cadlab-font-body);
}

/* Root layout */
.app-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Fixed-height header */
.app-header {
    flex: 0 0 56px; /* Bootstrap navbar height */
}

/* Main content fills remaining height */
.app-main {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden; /*  Prevent scroll inside */
}

/* =====================================================================
   CADLab brand — "Broadsheet" editorial refresh (2026): paper
   background, a serif display face, teal + magenta accents. Replaces
   the earlier blue SaaS-tech palette (--cadlab-blue was #2f7fe0)
   site-wide. Shared here so _Layout.cshtml's navbar/footer, Home/
   Index.cshtml's landing page, and every other view's plain Bootstrap
   buttons/links all draw from the same palette instead of each guessing
   its own blue — see the Bootstrap override block below for how that
   reaches pages that never reference these variables directly.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    --cadlab-blue: #0088b0;
    --cadlab-blue-dark: #006786;
    --cadlab-accent-2: #d6006c;
    --cadlab-ink: #201e1d;
    --cadlab-bg: #f3f2f2;
    --cadlab-surface: #eae9e9;
    --cadlab-muted: #605d5d;
    --cadlab-border: color-mix(in srgb, #201e1d 16%, transparent);
    --cadlab-font-heading: "Source Serif 4", Georgia, serif;
    --cadlab-font-body: "Source Serif 4", Georgia, serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cadlab-font-heading);
}

.navbar-brand.cadlab-brand {
    display: inline-flex;
    align-items: center;
    padding: 0;
}

.navbar-brand.cadlab-brand img {
    height: 30px;
    width: auto;
    display: block;
}

/* Shared navbar — paper background + ink text, replacing the old
   bg-white/text-dark combo so it reads consistently with the new
   editorial palette instead of plain Bootstrap gray-on-white. */
.cadlab-navbar {
    background: var(--cadlab-bg) !important;
    border-bottom-color: var(--cadlab-border) !important;
}
.cadlab-navbar .nav-link,
.cadlab-navbar .text-dark,
.cadlab-navbar .text-muted {
    color: var(--cadlab-ink) !important;
}
.cadlab-navbar .nav-link:hover,
.cadlab-navbar .nav-link:focus {
    color: var(--cadlab-blue) !important;
}

/* ---------------------------------------------------------------------
   Bootstrap color overrides — this is what makes the rebrand reach
   EVERY page that just uses plain Bootstrap classes (Login, Register,
   Projects, Create, and the non-canvas chrome buttons in the CAD
   editor) without editing each view individually. This Bootstrap build
   hardcodes its colors (no --bs-btn-* custom properties to hook), so
   these rules re-declare the same selectors Bootstrap does and win on
   load order (site.css loads after bootstrap.min.css in _Layout.cshtml).
   The 3D editor's own canvas/toolbar RENDERING is unaffected either way
   — that's driven by CadTheme in JS, not CSS.
   --------------------------------------------------------------------- */
a {
    color: var(--cadlab-blue);
}
a:hover {
    color: var(--cadlab-blue-dark);
}

.btn-primary {
    background-color: var(--cadlab-blue);
    border-color: var(--cadlab-blue);
}
.btn-primary:hover {
    background-color: var(--cadlab-blue-dark);
    border-color: var(--cadlab-blue-dark);
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
    background-color: var(--cadlab-blue-dark);
    border-color: var(--cadlab-blue-dark);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cadlab-blue) 50%, transparent);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    background-color: var(--cadlab-blue-dark);
    border-color: var(--cadlab-blue-dark);
}
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--cadlab-blue);
    border-color: var(--cadlab-blue);
}

.btn-outline-secondary {
    color: var(--cadlab-ink);
    border-color: var(--cadlab-border);
}
.btn-outline-secondary:hover {
    color: var(--cadlab-ink);
    background-color: var(--cadlab-surface);
    border-color: var(--cadlab-ink);
}
.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cadlab-ink) 25%, transparent);
}
.btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
    color: var(--cadlab-ink);
    background-color: var(--cadlab-surface);
    border-color: var(--cadlab-ink);
}