/*
 * FlatOrbit application styles (Bootstrap 5.3 base).
 * Brand colours are taken from the logo: orbit orange and house blue.
 */
:root {
    --fo-blue: #1565d8;
    --fo-blue-dark: #0b4fb3;
    --fo-blue-soft: rgba(21, 101, 216, 0.1);
    --fo-orange: #f37a0f;
    --fo-orange-soft: rgba(243, 122, 15, 0.12);
    --fo-topbar-height: 3.75rem;
    --fo-sidebar-width: 16rem;
    --fo-sidebar-rail: 4.5rem;
    --fo-sidebar-bg: #ffffff;
    --fo-sidebar-border: rgba(15, 23, 42, 0.08);
    --fo-nav-color: #334155;
    --fo-nav-muted: #64748b;
    --fo-nav-hover: #f1f5f9;
    --bs-primary: var(--fo-blue);
    --bs-primary-rgb: 21, 101, 216;
    --bs-link-color: var(--fo-blue);
    --bs-link-color-rgb: 21, 101, 216;
    --bs-link-hover-color: var(--fo-blue-dark);
}

body {
    min-height: 100%;
}

/* Bootstrap primary buttons follow the brand blue. */
.btn-primary {
    --bs-btn-bg: var(--fo-blue);
    --bs-btn-border-color: var(--fo-blue);
    --bs-btn-hover-bg: var(--fo-blue-dark);
    --bs-btn-hover-border-color: var(--fo-blue-dark);
    --bs-btn-active-bg: var(--fo-blue-dark);
    --bs-btn-active-border-color: var(--fo-blue-dark);
    --bs-btn-disabled-bg: var(--fo-blue);
    --bs-btn-disabled-border-color: var(--fo-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--fo-blue);
    --bs-btn-border-color: var(--fo-blue);
    --bs-btn-hover-bg: var(--fo-blue);
    --bs-btn-hover-border-color: var(--fo-blue);
    --bs-btn-active-bg: var(--fo-blue-dark);
    --bs-btn-active-border-color: var(--fo-blue-dark);
}

/* ---------------------------------------------------------------- Brand */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
}

.brand-logo {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
}

.brand-wordmark {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--fo-blue);
    white-space: nowrap;
}

.brand-wordmark span {
    color: var(--fo-orange);
}

.brand-tag {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- Top bar */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--fo-topbar-height);
    background: #ffffff;
    border-bottom: 1px solid var(--fo-sidebar-border);
}

.app-topbar .btn-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0.6rem;
    color: var(--fo-nav-color);
}

.app-topbar .btn-icon:hover,
.app-topbar .btn-icon:focus-visible {
    background: var(--fo-nav-hover);
}

.notification-dot {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--fo-orange);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}

.org-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 16rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--fo-blue-soft);
    color: var(--fo-blue-dark);
    font-size: 0.8rem;
    font-weight: 600;
}

.org-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-chip-button {
    border: 0;
    cursor: pointer;
}

.org-chip-button:hover,
.org-chip-button:focus-visible {
    background: rgba(21, 101, 216, 0.16);
}

.org-switcher-menu {
    width: 18rem;
    max-width: calc(100vw - 2rem);
    max-height: 70vh;
    overflow-y: auto;
}

.org-switcher-menu .dropdown-item {
    white-space: normal;
}

.avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fo-blue), #3b8cff);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
}

/* --------------------------------------------------------------- Sidebar */
.app-shell {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--fo-topbar-height));
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
}

.app-sidebar {
    --bs-offcanvas-width: 17.5rem;
    background: var(--fo-sidebar-bg);
}

.sidenav {
    padding: 0.75rem 0.75rem 1.25rem;
}

.sidenav-group {
    margin: 1rem 0.65rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fo-nav-muted);
    white-space: nowrap;
}

.sidenav-section:first-child > .sidenav-group {
    margin-top: 0.25rem;
}

/* Collapsible group heading (a <summary>). */
.sidenav-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    border-radius: 0.35rem;
    user-select: none;
}

.sidenav-group::-webkit-details-marker {
    display: none;
}

.sidenav-group::after {
    content: "";
    flex: 0 0 auto;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.sidenav-section[open] > .sidenav-group::after {
    transform: rotate(45deg);
}

.sidenav-group:hover,
.sidenav-group:focus-visible {
    color: var(--bs-body-color);
}

.sidenav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidenav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.15rem;
    border-radius: 0.65rem;
    color: var(--fo-nav-color);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidenav-link .bi {
    font-size: 1.1rem;
    width: 1.35rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--fo-nav-muted);
    transition: color 0.15s ease;
}

.sidenav-link:hover,
.sidenav-link:focus-visible {
    background: var(--fo-nav-hover);
    color: var(--fo-blue-dark);
}

.sidenav-link:hover .bi,
.sidenav-link:focus-visible .bi {
    color: var(--fo-blue);
}

.sidenav-link.active {
    background: var(--fo-blue-soft);
    color: var(--fo-blue-dark);
    font-weight: 600;
}

.sidenav-link.active .bi {
    color: var(--fo-blue);
}

.sidenav-link.active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 0.25rem;
    border-radius: 0 0.25rem 0.25rem 0;
    background: var(--fo-orange);
}

.sidenav-link.disabled {
    color: #94a3b8;
    pointer-events: none;
}

.sidenav-badge {
    margin-left: auto;
    font-size: 0.65rem;
}

/* A module the plan offers as "Upgrade" (organization admins only). The
   label is muted; the badge uses the darker orange so its text stays
   readable (plain brand orange on white is only 2.8:1). */
.sidenav-link-locked {
    color: var(--fo-nav-muted);
}

.sidenav-link-locked .bi {
    color: #94a3b8;
}

.sidenav-upgrade {
    background: var(--fo-orange-soft);
    color: #b35400;
    font-weight: 600;
}

.sidenav-upgrade .bi {
    color: inherit;
}

@media (min-width: 992px) {
    /* On the icon rail the badge is hidden: mark the icon with a lock dot. */
    .sidebar-collapsed .sidenav-link-locked::after {
        content: "";
        position: absolute;
        top: 0.4rem;
        right: 0.55rem;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--fo-orange);
    }
}

.sidenav-footer {
    margin: 1rem 0.75rem 0;
    padding: 0.85rem;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, var(--fo-blue-soft), var(--fo-orange-soft));
    font-size: 0.8rem;
    color: var(--fo-nav-color);
}

@media (min-width: 992px) {
    .app-sidebar {
        position: sticky;
        top: var(--fo-topbar-height);
        flex: 0 0 var(--fo-sidebar-width);
        width: var(--fo-sidebar-width);
        height: calc(100vh - var(--fo-topbar-height));
        overflow-y: auto;
        border-right: 1px solid var(--fo-sidebar-border);
        transition: width 0.2s ease, flex-basis 0.2s ease;
    }

    /* Collapsed "rail": icons only, labels available as tooltips/titles. */
    .sidebar-collapsed .app-sidebar {
        flex-basis: var(--fo-sidebar-rail);
        width: var(--fo-sidebar-rail);
    }

    .sidebar-collapsed .sidenav-badge,
    .sidebar-collapsed .sidenav-footer {
        display: none;
    }

    /* Labels stay in the accessibility tree (the link keeps its name); they
       are only hidden visually on the icon rail. */
    .sidebar-collapsed .sidenav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .sidebar-collapsed .sidenav-group::after {
        display: none;
    }

    .sidebar-collapsed .sidenav-group {
        pointer-events: none;
        height: 1px;
        margin: 0.75rem 0.5rem;
        overflow: hidden;
        color: transparent;
        background: var(--fo-sidebar-border);
    }

    .sidebar-collapsed .sidenav-link {
        justify-content: center;
        padding: 0.6rem 0;
    }
}

/* ------------------------------------------------------- Page furniture */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.empty-state {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--fo-nav-muted);
}

.empty-state .bi {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 2rem;
    color: #cbd5e1;
}

.auth-hero-logo {
    width: 4.5rem;
    height: 4.5rem;
}

.json-diff {
    max-height: 14rem;
    overflow: auto;
    margin: 0.5rem 0 0;
    padding: 0.5rem;
    border-radius: 0.4rem;
    background: #f8fafc;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Ensure status is never communicated by color alone (accessibility). */
.status-badge::before {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-right: 0.4em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar,
    .sidenav-link,
    .sidenav-link .bi {
        transition: none;
    }
}

/* Print-friendly report pages (M14 / Section 7). */
@media print {
    .navbar,
    .app-topbar,
    .app-sidebar,
    footer,
    .btn {
        display: none !important;
    }
}

/* --------------------------------------------------------- Marketing site
   Public pages (layouts/marketing). System fonts, no images above the fold
   (the hero "phone" is HTML), icons from the SVG sprite: fast LCP and no
   layout shift. Headings scale with the viewport via clamp(). */
.fo-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.marketing {
    --fo-ink: #0f172a;
    --fo-muted: #475569;
    --fo-line: rgba(15, 23, 42, 0.08);
    --fo-surface: #f8fafc;
    color: var(--fo-ink);
    background: #ffffff;
}

.marketing .text-secondary {
    color: var(--fo-muted) !important;
}

.mk-section {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.mk-section-alt {
    background: var(--fo-surface);
    border-block: 1px solid var(--fo-line);
}

.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--fo-orange-soft);
    color: #9a4a05;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.mk-title {
    font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.mk-h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.mk-lead {
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
    color: var(--fo-muted);
    max-width: 40rem;
    text-wrap: pretty;
}

.mk-narrow {
    max-width: 46rem;
}

.mk-measure {
    max-width: 52rem;
}

.mk-free {
    background: linear-gradient(transparent 62%, rgba(243, 122, 15, 0.28) 62%);
    padding-inline: 0.1em;
}

.mk-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
    background:
        radial-gradient(60rem 30rem at 85% -10%, var(--fo-blue-soft), transparent 70%),
        radial-gradient(40rem 24rem at -10% 110%, var(--fo-orange-soft), transparent 70%);
}

.mk-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--fo-muted);
    font-size: 0.95rem;
}

.mk-checks li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mk-checks .fo-icon {
    color: #15803d;
}

/* The hero "phone": a live-looking app preview made of HTML, so the
   biggest thing on screen is text (fast LCP), not an image. */
.mk-phone {
    width: min(100%, 20rem);
    margin-inline: auto;
    padding: 0.7rem;
    border-radius: 2.4rem;
    background: #0f172a;
    box-shadow: 0 2rem 4rem -1rem rgba(15, 23, 42, 0.35);
}

.mk-phone-screen {
    padding: 1.1rem 0.9rem 1.2rem;
    border-radius: 1.8rem;
    background: #f1f5f9;
    font-size: 0.82rem;
}

.mk-phone-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.mk-card {
    margin-bottom: 0.6rem;
    padding: 0.75rem 0.85rem;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.mk-card small {
    display: block;
    color: var(--fo-muted);
}

.mk-pill {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.mk-pill-ok {
    background: #dcfce7;
    color: #166534;
}

.mk-pill-due {
    background: var(--fo-orange-soft);
    color: #9a4a05;
}

.mk-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    background: var(--fo-blue-soft);
    color: var(--fo-blue);
    font-size: 1.3rem;
}

.mk-tile {
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--fo-line);
    border-radius: 1.1rem;
    background: #ffffff;
}

.mk-tile h3 {
    margin: 1rem 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.mk-tile p {
    margin: 0;
    color: var(--fo-muted);
}

.mk-tile-link {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mk-tile-link:hover,
.mk-tile-link:focus-visible {
    border-color: var(--fo-blue);
    box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(21, 101, 216, 0.35);
}

.mk-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    color: var(--fo-blue);
    font-weight: 600;
}

.mk-list {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mk-list li {
    display: flex;
    gap: 0.75rem;
}

.mk-list .fo-icon {
    margin-top: 0.2rem;
    color: var(--fo-blue);
    font-size: 1.15rem;
}

.mk-step {
    counter-increment: mk-step;
}

.mk-steps {
    counter-reset: mk-step;
}

.mk-step::before {
    content: counter(mk-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: var(--fo-blue);
    color: #ffffff;
    font-weight: 700;
}

.mk-price {
    font-size: clamp(2.6rem, 2rem + 2vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.mk-price-card {
    height: 100%;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 2px solid var(--fo-blue);
    border-radius: 1.4rem;
    background: #ffffff;
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(21, 101, 216, 0.4);
}

.mk-price-card-quiet {
    border-color: var(--fo-line);
    box-shadow: none;
}

.mk-compare {
    font-size: 0.95rem;
}

.mk-compare th,
.mk-compare td {
    padding: 0.85rem 0.75rem;
    vertical-align: top;
}

.mk-compare thead th {
    font-size: 0.85rem;
    color: var(--fo-muted);
    font-weight: 600;
}

.mk-compare .mk-us {
    background: var(--fo-blue-soft);
    font-weight: 600;
}

.mk-faq details {
    border-bottom: 1px solid var(--fo-line);
}

.mk-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    font-weight: 650;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
}

.mk-faq summary::-webkit-details-marker {
    display: none;
}

.mk-faq summary .fo-icon {
    transition: transform 0.2s ease;
}

.mk-faq details[open] summary .fo-icon {
    transform: rotate(180deg);
}

.mk-faq details p {
    margin: 0 0 1.1rem;
    color: var(--fo-muted);
    max-width: 48rem;
}

.mk-cta {
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: 1.6rem;
    background: linear-gradient(135deg, var(--fo-blue), #0a3f91);
    color: #ffffff;
}

.mk-cta .mk-lead {
    color: rgba(255, 255, 255, 0.85);
}

.mk-cta .btn-light {
    color: var(--fo-blue-dark);
    font-weight: 600;
}

.mk-anchor {
    scroll-margin-top: 5rem;
}

.mk-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mk-toc a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--fo-line);
    border-radius: 999px;
    background: #ffffff;
    color: inherit;
    font-size: 0.92rem;
    text-decoration: none;
}

.mk-toc a:hover {
    border-color: var(--fo-blue);
    color: var(--fo-blue);
}

.marketing .navbar .btn-primary,
.mk-hero .btn-lg,
.mk-cta .btn-lg {
    font-weight: 600;
}

/* Below-the-fold sections render lazily (Chrome/Edge/Firefox), cutting
   first-paint work on long pages; the size hint avoids scroll jumps. */
.mk-lazy {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

.site-footer {
    background: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .mk-tile-link,
    .mk-faq summary .fo-icon {
        transition: none;
    }
}

@media print {
    .mk-hero,
    .mk-cta,
    .mk-phone {
        background: none !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
}

/* ---- Indian languages -------------------------------------------------
   System fonts only (no web-font download): Android, iOS, macOS and
   Windows (Nirmala UI) ship the Indic scripts; Noto is listed for Linux and
   ChromeOS. Indic scripts have tall marks above and below the line, so the
   line height is a little looser than for English. */
:root {
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Gujarati", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Nirmala UI", Arial, sans-serif;
}

html:not([lang="en"]) body {
    line-height: 1.65;
}

html:not([lang="en"]) .btn,
html:not([lang="en"]) .form-label,
html:not([lang="en"]) .nav-link {
    line-height: 1.5;
}

.language-picker .form-select {
    min-width: 7.5rem;
}