/*
   Autonomycs company portal - app-specific styles only.

   The design tokens, the shared primitives (.btn, .card, .page, .signedout, .langpicker, ...) and the
   Radzen brand mapping live in Autonomycs.Ui.Web (_content/Autonomycs.Ui.Web/css/tokens.css + ui.css),
   linked BEFORE this file in index.html. What is here is this app's own chrome - shell, sidebar, top
   bar - in the MY portal's mechanics and the company canvas's details, plus the bare screens
   (welcome, no-company, auth failure). No scoped CSS: AppShellTests ties index.html to that.
*/

/* -------------------------------------------------- shell */
.shell {
    display: flex;
    height: 100vh;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
}

.shell__main {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.shell__body {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 36px 44px 64px;
}

/* -------------------------------------------------- sidebar */
.sidebar {
    width: var(--sidebar-width);
    flex: none;
    background: var(--brand);
    color: #fff;
    padding: 28px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    height: 100%;
    overflow-y: auto;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
}

.sidebar__brand img {
    width: 34px;
    height: auto;
    display: block;
    flex: none;
}

.sidebar__wordmark {
    font: 500 19px/1 var(--font);
    color: #fff;
    letter-spacing: -.01em;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.navlink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    color: #fff;
    font: 500 17px/1.2 var(--font);
    width: 100%;
}

.navlink:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.navlink--active {
    background: rgba(255, 255, 255, .16);
}

.navlink svg {
    flex: none;
    opacity: .92;
}

/* The manager, pinned to the sidebar's bottom edge above a hairline. */
.sidebar__manager {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding: 18px 8px 0;
}

.sidebar__avatar {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500 16px/1 var(--font);
}

/* min-width:0 is what lets the name ellipsize instead of widening the drawer. */
.sidebar__manager-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar__manager-name {
    font: 500 16px/1.2 var(--font);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__manager-meta {
    font: 400 13px/1.35 var(--font);
    color: rgba(255, 255, 255, .66);
}

/* -------------------------------------------------- mobile drawer
   Hidden above the breakpoint, where the sidebar is simply always there. */
.menutoggle {
    display: none;
    border: 1px solid var(--hairline-strong);
    background: transparent;
    color: var(--brand);
    border-radius: var(--radius-control);
    padding: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex: none;
}

.menutoggle:hover {
    background: var(--canvas);
}

.sidebar-backdrop {
    display: none;
}

/* -------------------------------------------------- top bar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 44px;
    background: #fff;
    border-bottom: 1px solid var(--hairline);
}

/* Which company this is: name and VAT number on one baseline, wrapping rather than truncating. */
.topbar__company {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.topbar__company-name {
    font: 500 18px/1.2 var(--font);
    color: var(--ink);
}

.topbar__company-vat {
    font: 400 15px/1.2 var(--font);
    color: var(--muted);
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    flex: none;
}

.identity__signout {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--hairline-strong);
    background: transparent;
    color: var(--brand);
    padding: 9px 14px;
    border-radius: var(--radius-control);
    font: 500 14px/1 var(--font);
    cursor: pointer;
}

/* Text on desktop, icon on mobile; the swap lives in the 560px block below. */
.identity__signout-icon {
    display: none;
}

.identity__signout:hover {
    background: var(--canvas);
}

/* -------------------------------------------------- below the drawer breakpoint */
@media (max-width: 1024px) {
    .shell {
        display: block;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        width: min(var(--sidebar-width), 84vw);
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 40px rgba(28, 26, 18, .28);
    }

    .sidebar--open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(28, 26, 18, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
    }

    .sidebar-backdrop--visible {
        opacity: 1;
        pointer-events: auto;
    }

    .menutoggle {
        display: inline-flex;
    }

    .shell__main {
        overflow: visible;
    }

    .shell__body {
        padding: 24px 20px 48px;
    }

    .topbar {
        padding: 12px 20px;
        gap: 12px;
    }
}

/* Respect a reduced-motion preference: the drawer still opens, it just does not slide. */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-backdrop {
        transition: none;
    }
}

@media (max-width: 560px) {
    .topbar {
        flex-wrap: wrap;
    }

    .identity__signout {
        padding: 8px;
    }

    .identity__signout-label {
        display: none;
    }

    .identity__signout-icon {
        display: block;
    }
}

/* -------------------------------------------------- bare screens
   A flex column so a lone card inside (signedout, welcome, no-company) can centre itself vertically
   with margin:auto. Must stay in this file, after ui.css: it wins an equal-specificity tie with
   .shell purely by loading later. */
.shell--bare {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 40px 20px;
}

.welcome {
    display: flex;
    flex-direction: column;
    gap: 18px;

    /* Fills the bare shell so the card centres vertically; the 80px is its 40px padding twice. */
    min-height: calc(100vh - 80px);
}

.welcome__lang {
    display: flex;
    justify-content: flex-end;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.welcome__help {
    margin: 8px 0 0;
    font: 400 15px/1.5 var(--font);
    color: var(--muted);
}

.welcome__help a,
.nocompany__mail {
    color: var(--green-text);
    font-weight: 500;
}

/* -------------------------------------------------- auth failure
   The identity provider's own message, shown verbatim - it carries the error code and a correlation
   id support will ask for. */
.authfailure {
    margin: 0;
    padding: 14px 16px;
    background: var(--surface-neutral);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    font: 400 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 40vh;
    overflow-y: auto;
}

/* ================================================== screens
   What the company canvas draws per screen that the design system has no family for. Shared primitives
   (.card, .table, .pill, .stattile, .field, .btn, .switchopt) come from Ui.Web's ui.css. */

/* A card heading that opens the card rather than following a list: .card__subhead's top margin is for
   a heading under a table. */
.companycard__title {
    margin-top: 0;
}

/* Billing is a form, drawn narrower as in the design. */
.page--narrow {
    max-width: 900px;
}

.companysplit {
    gap: 24px;
    align-items: start;
}

/* -------------------------------------------------- employees */
.employeerow {
    grid-template-columns: minmax(150px, 1.4fr) minmax(190px, 1.6fr) minmax(104px, .8fr) minmax(104px, .8fr) 84px;
}

.employeerow__plan {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    color: var(--deep);
}

/* The change that is coming - a switch, or a stop - in the design's rust. */
.employeerow__change {
    font: 500 15px/1.35 var(--font);
    color: var(--rust);
}

.employeerow__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* -------------------------------------------------- subscriptions */
.plangrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 20px;
}

.plantile {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--ink);
}

/* The formula most employees are on, in the brand colour. */
.plantile--highlight {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.plantile__name {
    margin: 0;
    font: 500 24px/1.2 var(--font);
}

.plantile__count {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.plantile__number {
    font: 500 34px/1 var(--font);
}

.plantile__unit,
.plantile__line {
    font: 400 16px/1.35 var(--font);
    color: var(--muted);
}

.plantile__unit {
    padding-bottom: 5px;
}

.plantile__line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
}

.plantile__line--rule {
    padding-top: 14px;
    border-top: 1px solid var(--card-border);
}

.plantile__amount {
    font-weight: 500;
    white-space: nowrap;
    color: var(--ink);
}

.plantile--highlight .plantile__unit,
.plantile--highlight .plantile__line {
    color: rgba(255, 255, 255, .78);
}

.plantile--highlight .plantile__amount {
    color: #fff;
}

.plantile--highlight .plantile__line--rule {
    border-top-color: rgba(255, 255, 255, .22);
}

.plantotal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    align-items: center;
    justify-content: space-between;
}

.plantotal__text {
    flex: 1 1 320px;
    min-width: 0;
}

.plantotal__amount {
    font: 500 26px/1 var(--font);
}

/* -------------------------------------------------- insights */
.privacynote {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--chart-grey);
    border-radius: var(--radius-card-sm);
    padding: 20px 24px;
    color: var(--deep);
}

.privacynote svg {
    flex: none;
    margin-top: 2px;
}

.privacynote p {
    margin: 0;
    font: 400 17px/1.55 var(--font);
    color: var(--ink);
    text-wrap: pretty;
}

.summarycard {
    background: var(--brand);
    border-radius: var(--radius-card);
    padding: 28px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.summarycard__title {
    margin: 0 0 6px;
    font: 500 24px/1.2 var(--font);
}

.summarycard__note {
    margin: 0;
    font: 400 16px/1.5 var(--font);
    color: rgba(255, 255, 255, .82);
}

.summarycard__facts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.summarycard__fact {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    font: 400 17px/1.3 var(--font);
    color: rgba(255, 255, 255, .85);
}

.summarycard__fact:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.summarycard__fact span:last-child {
    color: #fff;
    font-weight: 500;
}

/* -------------------------------------------------- billing */
.billingcard {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 32px;
}

.billingcard__notice {
    background: var(--surface-orange);
    border: 1px solid var(--accent);
    border-radius: var(--radius-card-sm);
    padding: 16px 20px;
}

.billingcard__notice p {
    margin: 0;
    font: 400 16px/1.5 var(--font);
    color: var(--deep);
}

/* A fieldset only for its disabled attribute: no border, no legend, the design's two-column grid. */
.billingform {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 22px;
}

.billingform__wide {
    grid-column: 1 / -1;
}

.billingcard__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    justify-content: space-between;
    align-items: center;
    padding-top: 22px;
    border-top: 1px solid var(--card-border);
}

.billingcard__foot .footnote {
    margin: 0;
}

.contactscard {
    padding: 8px 28px 22px;
}

.contactscard__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-end;
    justify-content: space-between;
    margin: 24px 0 8px;
}

.contactscard__head > div {
    flex: 1 1 300px;
    min-width: 0;
}

.contactrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding: 20px 0;
    border-top: 1px solid var(--hairline);
}

.contactrow__who {
    flex: 1 1 220px;
    min-width: 200px;
}

.contactrow__name {
    margin: 0;
    font: 500 18px/1.3 var(--font);
}

.contactrow__mail {
    margin: 3px 0 0;
    font: 400 16px/1.4 var(--font);
    color: var(--muted);
}

.contactrow__you {
    font: 400 15px/1.3 var(--font);
    color: var(--muted);
}

/* The design's olive call to action ("Contactpersoon toevoegen"), beside the orange primary. */
.btn--brand {
    border: 0;
    background: var(--brand);
    color: #fff;
    padding: 14px 22px;
    border-radius: var(--radius-control);
    font-size: 16px;
}

.btn--brand:hover:not(:disabled) {
    background: #585116;
}

@media (max-width: 700px) {
    .employeerow__actions {
        grid-column: 1 / -1;
    }
}