/*
 * Nabu ERP brand layer for the Filament panel.
 * Values come from the Nabu Design System: navy #011F6B / #011B5D, ground #F0F3F1,
 * border #D7DBD8, text greys #807F7F / #939393, sage #BDCCC0, white cards with 20px
 * corners and no shadow, 10px buttons and fields, Stack Sans Notch for headings and
 * Montserrat for interface chrome. Plain CSS so it needs no build step.
 */
:root {
    --nabu-navy: #011F6B;
    --nabu-navy-deep: #011B5D;
    --nabu-ground: #F0F3F1;
    --nabu-border: #D7DBD8;
    --nabu-text: #807F7F;
    --nabu-muted: #939393;
    --nabu-sage: #BDCCC0;
    --nabu-display: "Stack Sans Notch", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --nabu-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Grounds */
.fi-body,
.fi-layout,
.fi-simple-layout {
    background-color: var(--nabu-ground);
    font-family: var(--nabu-ui);
}
.dark .fi-body,
.dark .fi-layout,
.dark .fi-simple-layout {
    background: linear-gradient(180deg, #011B5D 0%, #000 100%) fixed;
}

/* Chrome: white on light, hairline dividers, no shadows */
.fi-topbar,
.fi-topbar nav,
.fi-sidebar,
.fi-sidebar-header {
    background-color: #fff;
    box-shadow: none;
}
.fi-topbar nav { border-bottom: 1px solid var(--nabu-border); }
.fi-sidebar { border-inline-end: 1px solid var(--nabu-border); }
.dark .fi-topbar,
.dark .fi-topbar nav,
.dark .fi-sidebar,
.dark .fi-sidebar-header {
    background-color: #01050F;
    border-color: rgba(255, 255, 255, .15);
}

/* Headings: Stack Sans Notch, tight tracking, black on light */
.fi-header-heading,
.fi-simple-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    font-family: var(--nabu-display);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: #000;
}
.dark .fi-header-heading,
.dark .fi-simple-header-heading,
.dark .fi-section-header-heading,
.dark .fi-modal-heading { color: #fff; }

/* Sidebar */
.fi-sidebar-group-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--nabu-navy);
}
.dark .fi-sidebar-group-label { color: var(--nabu-muted); }
.fi-sidebar-item-btn { border-radius: 10px; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item-active > .fi-sidebar-item-btn,
.fi-sidebar-item-active > a {
    background-color: var(--nabu-navy-deep);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg,
.fi-sidebar-item-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item-active > .fi-sidebar-item-btn svg,
.fi-sidebar-item-active > a span,
.fi-sidebar-item-active > a svg {
    color: #fff;
}

/* Cards and tables: white, 20px corners, no shadow */
.fi-section,
.fi-ta-ctn,
.fi-wi-widget > *,
.fi-simple-main,
.fi-modal-window {
    border-radius: 20px;
    box-shadow: none;
}
.fi-section,
.fi-ta-ctn,
.fi-simple-main { border: 1px solid var(--nabu-border); }
.dark .fi-section,
.dark .fi-ta-ctn,
.dark .fi-simple-main {
    border-color: rgba(255, 255, 255, .15);
    background-color: rgba(255, 255, 255, .03);
}
.fi-ta-header-cell-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--nabu-navy);
}
.dark .fi-ta-header-cell-label { color: var(--nabu-sage); }

/* Buttons and fields: 10px corners */
.fi-btn,
.fi-input-wrp,
.fi-select-input,
.fi-dropdown-panel { border-radius: 10px; }
.fi-btn { font-weight: 600; }

/* Links on dark grounds turn sage, as on the websites */
.dark .fi-link:hover,
.dark a.fi-link:hover { color: var(--nabu-sage); }

/* Sign-in page logo sits a little larger */
.fi-simple-layout .fi-logo { height: 3.25rem !important; }

@media (prefers-reduced-motion: reduce) {
    .fi-body * { transition: none !important; }
}

/* ------------------------------------------------------------------ Refinements (v4) */

/* Brand: give the logo room and keep the top bar calm */
.fi-sidebar-header { padding-block: 1.1rem; }
.fi-logo { object-fit: contain; }
.fi-topbar nav { min-height: 4rem; }

/* Page header: more air above the title, muted breadcrumbs */
.fi-header { padding-block: .5rem 1rem; }
.fi-header-heading { font-size: clamp(1.75rem, 2.2vw, 2.25rem); }
.fi-breadcrumbs-item-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nabu-muted);
}

/* Sidebar: quieter items, clear active state */
.fi-sidebar-nav { padding-inline: .75rem; gap: 1.25rem; }
.fi-sidebar-item-label { font-size: .9rem; font-weight: 500; }
.fi-sidebar-item-btn:hover { background-color: rgba(1, 27, 93, .06); }
.dark .fi-sidebar-item-btn:hover { background-color: rgba(255, 255, 255, .06); }

/* Sections: consistent headings and padding */
.fi-section-header { padding: 1.25rem 1.5rem; }
.fi-section-header-heading { font-size: 1.15rem; }
.fi-section-header-description { color: var(--nabu-text); font-size: .875rem; }
.fi-section-content { padding: 1.5rem; }

/* Tables: taller rows, hairline dividers, soft hover */
.fi-ta-ctn { overflow: hidden; }
.fi-ta-header-cell { padding-block: .9rem; background-color: #FAFBFA; }
.dark .fi-ta-header-cell { background-color: transparent; }
.fi-ta-cell { padding-block: .35rem; }
.fi-ta-row { transition: background-color .18s ease; }
.fi-ta-row:hover { background-color: rgba(1, 27, 93, .03); }
.dark .fi-ta-row:hover { background-color: rgba(255, 255, 255, .04); }
.fi-ta-text-item-label { font-size: .9rem; }

/* Badges: pill shape as on the websites' tags */
.fi-badge { border-radius: 20px; font-weight: 600; letter-spacing: .01em; }

/* Dashboard figures: Notch numerals, uppercase navy labels */
.fi-wi-stats-overview-stat { border-radius: 20px; box-shadow: none; border: 1px solid var(--nabu-border); padding: 1.4rem 1.5rem; }
.dark .fi-wi-stats-overview-stat { border-color: rgba(255, 255, 255, .15); background-color: rgba(255, 255, 255, .03); }
.fi-wi-stats-overview-stat-value {
    font-family: var(--nabu-display);
    font-weight: 700;
    font-size: 2.6rem;
    letter-spacing: -.04em;
    line-height: .95;
    color: #000;
    font-variant-numeric: tabular-nums;
}
.dark .fi-wi-stats-overview-stat-value { color: #fff; }
.fi-wi-stats-overview-stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--nabu-navy);
}
.dark .fi-wi-stats-overview-stat-label { color: var(--nabu-sage); }
.fi-wi-stats-overview-stat-description { color: var(--nabu-text); font-size: .85rem; }

/* Fields: clearer labels and a navy focus ring */
.fi-fo-field-label-content, .fi-fo-field-wrp-label { font-weight: 600; font-size: .85rem; color: #000; }
.dark .fi-fo-field-label-content, .dark .fi-fo-field-wrp-label { color: #fff; }
.fi-fo-field-wrp-helper-text, .fi-sc-text { color: var(--nabu-text); }
.fi-input-wrp:focus-within { box-shadow: 0 0 0 2px var(--nabu-navy-deep); }
.dark .fi-input-wrp:focus-within { box-shadow: 0 0 0 2px var(--nabu-sage); }

/* Primary buttons in dark mode: white with navy text, as on the websites' dark sections */
.dark .fi-btn.fi-color-primary:not(.fi-outlined) { background-color: #fff; color: var(--nabu-navy-deep); }
.dark .fi-btn.fi-color-primary:not(.fi-outlined):hover { background-color: var(--nabu-sage); }

/* Modals */
.fi-modal-header { padding: 1.5rem 1.5rem 1rem; }
.fi-modal-content { padding-inline: 1.5rem; }

/* Sign-in card */
.fi-simple-main { padding: 2.5rem 2.25rem; max-width: 28rem; }
.fi-simple-layout .fi-logo { height: 4rem !important; }

/* ------------------------------------------------------------------ Home and reports (v5) */

.nabu-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--nabu-navy); }
.dark .nabu-eyebrow { color: var(--nabu-sage); }

/* Home: dark hero as on the websites, then one group of cards per sidebar section */
.nabu-home-hero {
    background: linear-gradient(180deg, #011B5D 0%, #000 100%);
    border-radius: 20px;
    padding: 2.5rem 2.5rem 2.25rem;
    border-bottom: 5px solid var(--nabu-sage);
    color: rgba(255, 255, 255, .7);
}
.nabu-home-hero .nabu-eyebrow { color: var(--nabu-sage); }
.nabu-home-hero h2 {
    font-family: var(--nabu-display);
    font-weight: 700;
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    letter-spacing: -.04em;
    line-height: .95;
    color: #fff;
    margin: .6rem 0 .8rem;
}
.nabu-home-hero p { font-size: 1rem; margin: 0; }
.nabu-home-group { margin-top: 2rem; }
.nabu-home-group h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--nabu-navy);
    padding-bottom: .6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--nabu-border);
}
.dark .nabu-home-group h3 { color: var(--nabu-sage); border-color: rgba(255, 255, 255, .15); }
.nabu-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1.25rem; }
.nabu-home-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #fff;
    border: 1px solid var(--nabu-border);
    border-radius: 20px;
    padding: 1.4rem 1.5rem;
    min-height: 9.5rem;
    color: var(--nabu-text);
    text-decoration: none;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nabu-home-card:hover { transform: translateY(-3px); border-color: var(--nabu-navy-deep); box-shadow: 0 14px 30px rgba(1, 27, 93, .08); }
.nabu-home-card:focus-visible { outline: 2px solid var(--nabu-navy-deep); outline-offset: 3px; }
.nabu-home-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nabu-home-card-head strong { font-family: var(--nabu-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.1; color: #000; }
.nabu-home-card-head svg { width: 18px; height: 18px; color: var(--nabu-navy); flex: none; transition: transform .3s ease; }
.nabu-home-card:hover .nabu-home-card-head svg { transform: translateX(4px); }
.nabu-home-card p { font-size: .9rem; line-height: 1.45; margin: 0; }
.nabu-home-card-figure { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--nabu-border); display: flex; align-items: baseline; gap: .6rem; }
.nabu-home-card-figure b { font-family: var(--nabu-display); font-weight: 700; font-size: 2.1rem; letter-spacing: -.04em; line-height: .9; color: #000; font-variant-numeric: tabular-nums; }
.nabu-home-card-figure span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--nabu-navy); }
.nabu-home-card.is-alert .nabu-home-card-figure b { color: var(--nabu-navy); }
.dark .nabu-home-card { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .7); }
.dark .nabu-home-card:hover { border-color: #fff; box-shadow: none; }
.dark .nabu-home-card-head strong, .dark .nabu-home-card-figure b, .dark .nabu-home-card.is-alert .nabu-home-card-figure b { color: #fff; }
.dark .nabu-home-card-head svg, .dark .nabu-home-card-figure span { color: var(--nabu-sage); }
.dark .nabu-home-card-figure { border-color: rgba(255, 255, 255, .15); }

/* Reports */
.nabu-report h2 { font-family: var(--nabu-display); font-weight: 700; font-size: 1.75rem; letter-spacing: -.03em; color: #000; margin: 2rem 0 .4rem; }
.nabu-report h3 { font-family: var(--nabu-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; color: #000; margin: 0 0 .8rem; }
.dark .nabu-report h2, .dark .nabu-report h3 { color: #fff; }
.nabu-report-note { font-size: .875rem; color: var(--nabu-text); margin: 0 0 1rem; max-width: 46rem; }
.nabu-report-bar { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; font-size: .875rem; color: var(--nabu-text); }
.nabu-report-bar label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--nabu-navy); }
.nabu-report-bar select { border: 1px solid var(--nabu-border); border-radius: 10px; padding: .5rem 2rem .5rem .8rem; background-color: #fff; font: inherit; color: #000; }
.dark .nabu-report-bar select { background-color: transparent; color: #fff; border-color: rgba(255, 255, 255, .2); }
.nabu-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; }
.nabu-tile { background: #fff; border: 1px solid var(--nabu-border); border-radius: 20px; padding: 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.nabu-tile span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--nabu-navy); }
.nabu-tile b { font-family: var(--nabu-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.03em; line-height: 1.05; color: #000; font-variant-numeric: tabular-nums; word-break: break-word; }
.nabu-tile small { font-size: .82rem; color: var(--nabu-text); }
.dark .nabu-tile, .dark .nabu-report-card { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .15); }
.dark .nabu-tile b { color: #fff; }
.dark .nabu-tile span, .dark .nabu-report-bar label { color: var(--nabu-sage); }
.nabu-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.nabu-report-card { background: #fff; border: 1px solid var(--nabu-border); border-radius: 20px; padding: 1.5rem; }
.nabu-report-card table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.nabu-report-card th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--nabu-navy); padding: .5rem .25rem; border-bottom: 2px solid var(--nabu-navy); }
.nabu-report-card td { padding: .6rem .25rem; border-bottom: 1px solid var(--nabu-border); }
.nabu-report-card td:first-child { color: #000; font-weight: 600; }
.nabu-report-card .num { text-align: right; font-variant-numeric: tabular-nums; }
.dark .nabu-report-card th { color: var(--nabu-sage); border-color: var(--nabu-sage); }
.dark .nabu-report-card td { border-color: rgba(255, 255, 255, .15); }
.dark .nabu-report-card td:first-child { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .nabu-home-card, .nabu-home-card-head svg { transition: none; }
}

/* ------------------------------------------------------------------ App launcher home and team (v6) */

.nabu-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nabu-pre { white-space: pre-line; }

/* Home: a centred grid of app tiles, as in Odoo, drawn in the Nabu palette */
.nabu-launch { max-width: 62rem; margin: 0 auto; padding: 1rem 0 3rem; }
.nabu-launch-head { text-align: center; margin-bottom: 2.75rem; }
.nabu-launch-head h2 { font-family: var(--nabu-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.75rem); letter-spacing: -.04em; line-height: 1; color: #000; margin: 0; }
.nabu-launch-head p { margin: .6rem 0 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nabu-muted); }
.dark .nabu-launch-head h2 { color: #fff; }
.nabu-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: 2.25rem 1rem; justify-items: center; }
.nabu-app { display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 8.75rem; padding: .5rem .25rem; text-decoration: none; border-radius: 20px; }
.nabu-app:focus-visible { outline: 2px solid var(--nabu-navy-deep); outline-offset: 4px; }
.nabu-app-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    margin-bottom: .7rem;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(160deg, #0A2F8F 0%, #011B5D 100%);
    box-shadow: 0 10px 22px rgba(1, 27, 93, .18);
    transition: transform .3s ease, box-shadow .3s ease;
}
.nabu-app:hover .nabu-app-icon { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(1, 27, 93, .26); }
.nabu-app-icon svg { width: 2.4rem; height: 2.4rem; stroke-width: 1.5; }
.nabu-app-icon b {
    position: absolute;
    top: -.45rem;
    right: -.45rem;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #fff;
    color: var(--nabu-navy-deep);
    border: 2px solid var(--nabu-ground);
    font: 700 .78rem/1 var(--nabu-ui);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.nabu-app-icon b.is-alert { background: var(--nabu-sage); }
.nabu-app-name { font-weight: 600; font-size: .92rem; line-height: 1.2; color: #000; text-align: center; }
.nabu-app-group { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nabu-muted); text-align: center; }
.dark .nabu-app-name { color: #fff; }

/* Tile tints by area, all from the design system */
.nabu-app.is-clients .nabu-app-icon { background: linear-gradient(160deg, #011F6B 0%, #04143C 100%); }
.nabu-app.is-delivery .nabu-app-icon { background: linear-gradient(160deg, #011B5D 0%, #000 100%); }
.nabu-app.is-team .nabu-app-icon { background: var(--nabu-sage); color: var(--nabu-navy-deep); box-shadow: 0 10px 22px rgba(1, 27, 93, .10); }
.nabu-app.is-finance .nabu-app-icon { background: #B9C3DA; color: var(--nabu-navy-deep); box-shadow: 0 10px 22px rgba(1, 27, 93, .10); }
.nabu-app.is-reports .nabu-app-icon { background: #fff; color: var(--nabu-navy-deep); border: 1px solid var(--nabu-border); box-shadow: 0 10px 22px rgba(1, 27, 93, .08); }
.nabu-app.is-organisation .nabu-app-icon { background: linear-gradient(160deg, #939393 0%, #5c5c5c 100%); box-shadow: 0 10px 22px rgba(0, 0, 0, .14); }
.nabu-app.is-access-and-security .nabu-app-icon { background: linear-gradient(160deg, #04143C 0%, #000 100%); }
.nabu-app.is-account .nabu-app-icon { background: var(--nabu-ground); color: var(--nabu-navy-deep); border: 1px solid var(--nabu-border); box-shadow: none; }
.dark .nabu-app-icon { box-shadow: none; border: 1px solid rgba(255, 255, 255, .15); }
.dark .nabu-app-icon b { border-color: #000; }

/* Team directory */
.nabu-team-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.nabu-tabs { display: inline-flex; background: #fff; border: 1px solid var(--nabu-border); border-radius: 12px; padding: 4px; gap: 4px; }
.nabu-tabs button { font: 600 .875rem var(--nabu-ui); color: var(--nabu-text); padding: .55rem 1.1rem; border-radius: 9px; border: 0; background: transparent; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.nabu-tabs button[aria-selected="true"] { background: var(--nabu-navy-deep); color: #fff; }
.nabu-tabs button:focus-visible { outline: 2px solid var(--nabu-navy-deep); outline-offset: 2px; }
.nabu-team-filters { display: flex; gap: .75rem; flex-wrap: wrap; }
.nabu-team-filters input, .nabu-team-filters select { border: 1px solid var(--nabu-border); border-radius: 10px; padding: .6rem .9rem; background: #fff; font: inherit; font-size: .9rem; color: #000; min-width: 15rem; }
.nabu-team-filters select { min-width: 11rem; padding-right: 2rem; }
.nabu-team-filters input:focus, .nabu-team-filters select:focus { outline: 2px solid var(--nabu-navy-deep); outline-offset: 1px; }
.nabu-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.25rem; }
.nabu-person { background: #fff; border: 1px solid var(--nabu-border); border-radius: 20px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.nabu-person header { display: flex; align-items: center; gap: 1rem; }
.nabu-person h3 { font-family: var(--nabu-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.1; color: #000; margin: 0; }
.nabu-person header p { margin: .25rem 0 0; font-size: .875rem; color: var(--nabu-navy); font-weight: 600; }
.nabu-avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; flex: none; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #0A2F8F 0%, #011B5D 100%); color: #fff; font: 700 1.05rem var(--nabu-display); letter-spacing: -.02em; }
.nabu-avatar.is-small { width: 2.75rem; height: 2.75rem; font-size: .9rem; }
.nabu-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.nabu-chips span { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--nabu-navy); border: 1px solid rgba(1, 31, 107, .18); border-radius: 20px; padding: .3rem .65rem; }
.nabu-person dl { margin: 0; border-top: 1px solid var(--nabu-border); }
.nabu-person dl div { display: grid; grid-template-columns: 6rem 1fr; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--nabu-border); font-size: .875rem; }
.nabu-person dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--nabu-muted); padding-top: .15rem; }
.nabu-person dd { margin: 0; color: #000; word-break: break-word; }
.nabu-person dd a { color: var(--nabu-navy); text-decoration: none; }
.nabu-person dd a:hover { text-decoration: underline; }
.nabu-person-edit { margin-top: auto; align-self: flex-start; font-size: .82rem; font-weight: 600; color: var(--nabu-navy); text-decoration: underline; }
.dark .nabu-tabs, .dark .nabu-person, .dark .nabu-org-card { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .15); }
.dark .nabu-person h3, .dark .nabu-person dd, .dark .nabu-org-card strong { color: #fff; }
.dark .nabu-person header p, .dark .nabu-person dd a, .dark .nabu-person-edit, .dark .nabu-chips span { color: var(--nabu-sage); }
.dark .nabu-person dl, .dark .nabu-person dl div { border-color: rgba(255, 255, 255, .15); }
.dark .nabu-team-filters input, .dark .nabu-team-filters select { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .2); }

/* Organisation chart: a top-down tree with hairline connectors */
.nabu-org-scroll { overflow-x: auto; padding: 1rem 0 2rem; }
.nabu-org, .nabu-org ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; position: relative; }
.nabu-org { min-width: max-content; margin: 0 auto; }
.nabu-org ul { padding-top: 1.75rem; }
.nabu-org li { position: relative; padding: 1.75rem .6rem 0; display: flex; flex-direction: column; align-items: center; }
.nabu-org > li { padding-top: 0; }
.nabu-org ul > li::before, .nabu-org ul > li::after { content: ""; position: absolute; top: 0; width: 50%; height: 1.75rem; border-top: 1px solid #9aa3b8; }
.nabu-org ul > li::before { right: 50%; }
.nabu-org ul > li::after { left: 50%; border-left: 1px solid #9aa3b8; }
.nabu-org ul > li:first-child::before, .nabu-org ul > li:last-child::after { border-top: 0; }
.nabu-org ul > li:only-child::before { display: none; }
.nabu-org ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 1.75rem; border-left: 1px solid #9aa3b8; }
.nabu-org-card { background: #fff; border: 1px solid var(--nabu-border); border-radius: 16px; padding: 1rem 1.1rem; min-width: 11.5rem; max-width: 14rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; }
.nabu-org-card .nabu-avatar { margin-bottom: .45rem; }
.nabu-org-card strong { font-family: var(--nabu-display); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; line-height: 1.15; color: #000; }
.nabu-org-card span { font-size: .8rem; font-weight: 600; color: var(--nabu-navy); }
.nabu-org-card em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nabu-muted); margin-top: .2rem; }
.dark .nabu-org-card span { color: var(--nabu-sage); }

@media (prefers-reduced-motion: reduce) {
    .nabu-app-icon, .nabu-tabs button { transition: none; }
}
.nabu-org-card .nabu-avatar { color: #fff; font-weight: 700; }

/* ------------------------------------------------------------------ Presence, calendar, user menu (v7) */

[x-cloak] { display: none !important; }

/* The home screen needs no page title above the greeting */
.fi-dashboard-page .fi-header { display: none; }

/* Top bar: live clock, status pill and its panel */
.nabu-presence { position: relative; display: flex; align-items: center; gap: .9rem; margin-inline-end: .5rem; }
.nabu-presence-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.nabu-presence-clock b { font-family: var(--nabu-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; color: #000; font-variant-numeric: tabular-nums; }
.nabu-presence-clock span { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nabu-muted); }
.dark .nabu-presence-clock b { color: #fff; }
.nabu-presence-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem .45rem .65rem; border: 1px solid var(--nabu-border); border-radius: 20px; background: #fff; font: 600 .82rem var(--nabu-ui); color: #000; cursor: pointer; white-space: nowrap; transition: border-color .18s ease; }
.nabu-presence-pill:hover { border-color: var(--nabu-navy-deep); }
.nabu-presence-pill:focus-visible { outline: 2px solid var(--nabu-navy-deep); outline-offset: 2px; }
.nabu-presence-pill i, .nabu-presence-panel li i, .nabu-status i { width: .6rem; height: .6rem; border-radius: 50%; flex: none; display: inline-block; }
.nabu-presence-pill svg { width: 1rem; height: 1rem; color: var(--nabu-muted); }
.dark .nabu-presence-pill { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .2); }
.nabu-presence-panel { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 50; width: 19rem; background: #fff; border: 1px solid var(--nabu-border); border-radius: 16px; box-shadow: 0 18px 40px rgba(1, 27, 93, .14); padding: .5rem; }
.dark .nabu-presence-panel { background: #01050F; border-color: rgba(255, 255, 255, .15); }
.nabu-presence-summary { background: linear-gradient(180deg, #011B5D 0%, #000 100%); border-radius: 12px; padding: 1rem 1.1rem; color: rgba(255, 255, 255, .7); display: flex; flex-direction: column; gap: .2rem; }
.nabu-presence-summary span { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nabu-sage); }
.nabu-presence-summary b { font-family: var(--nabu-display); font-weight: 700; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.nabu-presence-summary small { font-size: .76rem; line-height: 1.35; }
.nabu-presence-label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nabu-muted); padding: .8rem .6rem .35rem; }
.nabu-presence-panel ul { list-style: none; margin: 0; padding: 0; }
.nabu-presence-panel li button { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border: 0; border-radius: 10px; background: transparent; font: 500 .875rem var(--nabu-ui); color: #000; cursor: pointer; text-align: left; }
.nabu-presence-panel li button:hover { background: rgba(1, 27, 93, .06); }
.nabu-presence-panel li button.is-current { background: rgba(1, 27, 93, .08); font-weight: 700; }
.nabu-presence-panel li em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--nabu-muted); }
.dark .nabu-presence-panel li button { color: #fff; }
.dark .nabu-presence-panel li button:hover, .dark .nabu-presence-panel li button.is-current { background: rgba(255, 255, 255, .08); }
.nabu-presence-action { width: 100%; margin-top: .5rem; padding: .7rem; border-radius: 10px; border: 1px solid var(--nabu-navy-deep); background: var(--nabu-navy-deep); color: #fff; font: 600 .9rem var(--nabu-ui); cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.nabu-presence-action:hover { background: #fff; color: var(--nabu-navy-deep); }
.nabu-presence-action.is-out { background: #fff; color: var(--nabu-navy-deep); }
.nabu-presence-action.is-out:hover { background: var(--nabu-navy-deep); color: #fff; }
.nabu-presence-link { display: block; text-align: center; padding: .7rem 0 .3rem; font-size: .8rem; font-weight: 600; color: var(--nabu-navy); text-decoration: underline; }
.dark .nabu-presence-link { color: var(--nabu-sage); }
@media (max-width: 900px) { .nabu-presence-clock span, .nabu-presence-pill span { display: none; } }
@media (max-width: 560px) { .nabu-presence-clock { display: none; } }

.nabu-status { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: #000; }
.nabu-person header .nabu-status { margin-top: .35rem; font-size: .76rem; color: var(--nabu-text); }
.dark .nabu-status { color: #fff; }
.nabu-flag { font-style: normal; font-size: .76rem; font-weight: 600; color: #C2410C; margin-left: .4rem; }

/* Week and month steppers */
.nabu-stepper { display: inline-flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 600; color: #000; }
.nabu-stepper button { width: 2.25rem; height: 2.25rem; border-radius: 10px; border: 1px solid var(--nabu-border); background: #fff; font-size: 1.2rem; line-height: 1; color: var(--nabu-navy-deep); cursor: pointer; }
.nabu-stepper button:hover:not(:disabled) { border-color: var(--nabu-navy-deep); }
.nabu-stepper button:disabled { opacity: .4; cursor: default; }
.nabu-stepper button.is-text { width: auto; padding: 0 .9rem; font: 600 .82rem var(--nabu-ui); }
.dark .nabu-stepper { color: #fff; }
.dark .nabu-stepper button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .2); }

/* Calendar */
.nabu-cal-title { font-family: var(--nabu-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.03em; min-width: 11rem; text-align: center; }
.nabu-cal-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .76rem; color: var(--nabu-text); }
.nabu-cal-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.nabu-cal-legend i { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.nabu-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--nabu-border); gap: 1px; border: 1px solid var(--nabu-border); border-radius: 20px; overflow: hidden; }
.nabu-cal-dow { background: #FAFBFA; padding: .7rem .8rem; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nabu-navy); }
.nabu-cal-day { background: #fff; min-height: 7.5rem; padding: .5rem .5rem .6rem; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.nabu-cal-day.is-out { background: #F7F8F7; }
.nabu-cal-day.is-out .nabu-cal-num { color: var(--nabu-muted); }
.nabu-cal-num { font-family: var(--nabu-display); font-weight: 700; font-size: .95rem; color: #000; width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.nabu-cal-day.is-today .nabu-cal-num { background: var(--nabu-navy-deep); color: #fff; }
.nabu-cal-event { display: block; font-size: .74rem; line-height: 1.25; padding: .25rem .4rem; border-radius: 6px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(1, 27, 93, .08); color: var(--nabu-navy-deep); }
.nabu-cal-event b { font-weight: 700; margin-right: .3rem; font-variant-numeric: tabular-nums; }
.nabu-cal-event:hover { filter: brightness(.95); }
.nabu-cal-event.is-meeting, .nabu-cal-legend i.is-meeting { background: #011B5D; color: #fff; }
.nabu-cal-event.is-external, .nabu-cal-legend i.is-external { background: #6B4FBB; color: #fff; }
.nabu-cal-event.is-task, .nabu-cal-legend i.is-task { background: #BDCCC0; color: #011B5D; }
.nabu-cal-event.is-overdue, .nabu-cal-legend i.is-overdue { background: #FBE4DC; color: #9A3412; }
.nabu-cal-legend i.is-overdue { background: #C2410C; }
.nabu-cal-event.is-lead, .nabu-cal-legend i.is-lead { background: #B9C3DA; color: #011B5D; }
.nabu-cal-more { font-size: .72rem; color: var(--nabu-muted); padding-left: .4rem; }
.dark .nabu-cal-grid { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .15); }
.dark .nabu-cal-day, .dark .nabu-cal-dow { background: #050B1F; }
.dark .nabu-cal-day.is-out { background: #02050F; }
.dark .nabu-cal-num, .dark .nabu-cal-title { color: #fff; }
.dark .nabu-cal-dow { color: var(--nabu-sage); }
@media (max-width: 767px) { .nabu-cal-day { min-height: 5rem; } .nabu-cal-event b { display: none; } }

/* User menu: links, then the theme switcher between two rules, then sign out last.
   The lists are flattened so the switcher can sit directly above sign out. */
.fi-dropdown-panel:has(.fi-theme-switcher) { min-width: 18rem; display: flex; flex-direction: column; gap: .3rem; padding: .7rem; border-radius: 16px; border: 1px solid var(--nabu-border); box-shadow: 0 18px 40px rgba(1, 27, 93, .14); }
.fi-dropdown-panel:has(.fi-theme-switcher) > *, .fi-dropdown-panel:has(.fi-theme-switcher) .fi-dropdown-list { display: contents; border: 0; }
.fi-dropdown-panel:has(.fi-theme-switcher) .fi-dropdown-header,
.fi-dropdown-panel:has(.fi-theme-switcher) .fi-dropdown-list-item { order: 1; border-radius: 10px; font-weight: 500; padding: .7rem .75rem; gap: .75rem; }
.fi-dropdown-panel:has(.fi-theme-switcher) .fi-dropdown-list-item:hover { background-color: rgba(1, 27, 93, .06); }
.fi-dropdown-panel:has(.fi-theme-switcher) .fi-dropdown-list-item svg,
.fi-dropdown-panel:has(.fi-theme-switcher) .fi-dropdown-list-item .fi-icon { color: var(--nabu-navy-deep); }
.dark .fi-dropdown-panel:has(.fi-theme-switcher) .fi-dropdown-list-item svg,
.dark .fi-dropdown-panel:has(.fi-theme-switcher) .fi-dropdown-list-item .fi-icon { color: var(--nabu-sage); }
/* Sign out: the last item of the last list of links, or the sign-out form. */
.fi-dropdown-panel:has(.fi-theme-switcher) .fi-dropdown-list:nth-last-child(1 of :not(:has(.fi-theme-switcher))) > :last-child,
.fi-dropdown-panel:has(.fi-theme-switcher) form[action*="logout"] { order: 9; }
.fi-dropdown-panel:has(.fi-theme-switcher) .fi-theme-switcher { order: 8; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .55rem 0; padding: .85rem 0; border-block: 1px solid var(--nabu-border); }
.fi-theme-switcher-btn { border: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; padding: .55rem; background: var(--nabu-ground); color: var(--nabu-navy-deep); transition: background-color .15s ease, color .15s ease; }
.fi-theme-switcher-btn svg, .fi-theme-switcher-btn .fi-icon { color: inherit !important; }
.fi-theme-switcher-btn:hover { background: #B9C3DA; }
.fi-theme-switcher-btn.fi-active, .fi-theme-switcher-btn[aria-pressed="true"] { background: var(--nabu-navy-deep); color: #fff; }
.dark .fi-dropdown-panel:has(.fi-theme-switcher), .dark .fi-dropdown-panel:has(.fi-theme-switcher) .fi-theme-switcher { border-color: rgba(255, 255, 255, .15); }
.dark .fi-theme-switcher-btn { background: rgba(255, 255, 255, .06); color: var(--nabu-sage); }
.dark .fi-theme-switcher-btn:hover { background: rgba(255, 255, 255, .14); }
.dark .fi-theme-switcher-btn.fi-active, .dark .fi-theme-switcher-btn[aria-pressed="true"] { background: var(--nabu-sage); color: var(--nabu-navy-deep); }

/* Tables: cells wrap instead of forcing a sideways scroller. Less important columns drop out on smaller screens. */
.fi-ta-table { width: 100%; }
.fi-ta-cell, .fi-ta-text, .fi-ta-text-item, .fi-ta-text-item-label, .fi-ta-col { white-space: normal !important; }
/* Words break only when a single word is longer than its column, so email addresses no longer split letter by letter. */
.fi-ta-cell { overflow-wrap: break-word; word-break: normal; }
/* Row buttons wrap onto a second line inside their own column instead of spilling over the status badges beside them. */
.fi-ta-actions { flex-wrap: wrap !important; justify-content: flex-end; column-gap: .75rem; row-gap: .3rem; min-width: 0; }
.fi-ta-actions > *, .fi-ta-actions .fi-ac-action, .fi-ta-actions .fi-link { white-space: nowrap !important; }
/* On wide screens the buttons stay on one row; text columns wrap a little more instead. */
@media (min-width: 1500px) { .fi-ta-actions { flex-wrap: nowrap !important; } }
.fi-ta-cell .fi-badge { max-width: none; }
/* Several badges in one cell (roles, divisions) go onto more lines instead of widening the table past its box. */
.fi-ta-text-has-badges { flex-wrap: wrap !important; row-gap: .3rem; }
/* Small laptop screens: the least important column of the widest lists steps aside so nothing is cut off. */
@media (max-width: 1365px) {
    .fi-ta-header-cell-origin, .fi-ta-cell-origin,
    .fi-ta-header-cell-two-factor, .fi-ta-cell-two-factor { display: none; }
}
.fi-ta-header-cell, .fi-badge { white-space: nowrap; overflow-wrap: normal; }
.fi-ta-content { scrollbar-width: thin; scrollbar-color: var(--nabu-border) transparent; }
.fi-ta-content::-webkit-scrollbar { height: 6px; }
.fi-ta-content::-webkit-scrollbar-thumb { background: var(--nabu-border); border-radius: 999px; }
.fi-ta-content::-webkit-scrollbar-track { background: transparent; }

/* Attendance: status split, manager controls */
.nabu-split { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 1.25rem; font-size: .82rem; color: var(--nabu-text); }
.nabu-split span { display: inline-flex; align-items: center; gap: .45rem; }
.nabu-split i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.nabu-split b { color: #000; font-variant-numeric: tabular-nums; }
.nabu-flag.is-quiet { color: var(--nabu-muted); }
.nabu-select, .nabu-correct input { font: 500 .82rem var(--nabu-ui); color: var(--nabu-navy-deep); background: #fff; border: 1px solid var(--nabu-border); border-radius: 8px; padding: .35rem .5rem; }
.nabu-select { padding-right: 1.75rem; }
.nabu-correct { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .15rem 0; }
.nabu-correct button, .nabu-link { font: 600 .8rem var(--nabu-ui); color: var(--nabu-navy-deep); background: transparent; border: 1px solid var(--nabu-border); border-radius: 8px; padding: .35rem .7rem; cursor: pointer; white-space: nowrap; }
.nabu-correct button:hover, .nabu-link:hover { background: var(--nabu-navy-deep); color: #fff; border-color: var(--nabu-navy-deep); }
.nabu-report-card { overflow-x: auto; }
.nabu-app.is-careers .nabu-app-icon { background: #E7DFF6; color: #4B3794; box-shadow: 0 10px 22px rgba(75, 55, 148, .12); }
.dark .nabu-split b { color: #fff; }
.dark .nabu-select, .dark .nabu-correct input { background: #0A1330; color: #fff; border-color: rgba(255, 255, 255, .15); }
.dark .nabu-correct button, .dark .nabu-link { color: var(--nabu-sage); border-color: rgba(255, 255, 255, .15); }

/* Calendar: leave */
.nabu-cal-event.is-leave, .nabu-cal-legend i.is-leave { background: #FDF1CF; color: #7A5200; }
.nabu-cal-legend i.is-leave { background: #E0A100; }

/* Pipeline board */
.nabu-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--nabu-navy-deep); cursor: pointer; }
.nabu-check input { accent-color: var(--nabu-navy-deep); width: 1rem; height: 1rem; }
/* Stages wrap onto further rows rather than scrolling sideways. */
.nabu-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .85rem; padding-bottom: 1rem; align-items: start; }
.nabu-board-col { background: #fff; border: 1px solid var(--nabu-border); border-radius: 20px; padding: .9rem .75rem .75rem; min-height: 12rem; display: flex; flex-direction: column; gap: .55rem; border-top: 4px solid var(--nabu-pale-navy, #B9C3DA); transition: background-color .12s, border-color .12s; }
.nabu-board-col.is-won { border-top-color: #2E7D5B; }
.nabu-board-col.is-lost { border-top-color: #C2410C; }
.nabu-board-col.is-new { border-top-color: var(--nabu-navy-deep); }
.nabu-board-col.is-over { background: rgba(1, 27, 93, .05); border-color: var(--nabu-navy-deep); }
.nabu-board-col header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .25rem; }
.nabu-board-col h3 { font-family: var(--nabu-display); font-weight: 700; font-size: .95rem; color: #000; margin: 0; letter-spacing: -.01em; }
.nabu-board-col header span { font-size: .72rem; font-weight: 700; background: var(--nabu-ground, #F0F3F1); color: var(--nabu-navy-deep); border-radius: 999px; padding: .15rem .55rem; }
.nabu-board-sum { font-size: .74rem; color: var(--nabu-muted); padding: 0 .25rem .25rem; font-variant-numeric: tabular-nums; }
.nabu-board-card { position: relative; background: #FAFBFA; border: 1px solid var(--nabu-border); border-radius: 12px; padding: .7rem .75rem; display: flex; flex-direction: column; gap: .3rem; }
.nabu-board-card[draggable="true"] { cursor: grab; }
.nabu-board-card[draggable="true"]:active { cursor: grabbing; }
.nabu-board-card:hover { border-color: var(--nabu-navy-deep); }
.nabu-board-card a { font-weight: 600; font-size: .86rem; line-height: 1.3; color: #000; text-decoration: none; padding-right: 3rem; }
.nabu-board-card a:hover { color: var(--nabu-navy-deep); text-decoration: underline; }
.nabu-board-meta { font-size: .78rem; color: var(--nabu-text); }
.nabu-board-foot { display: flex; justify-content: space-between; gap: .5rem; font-size: .74rem; color: var(--nabu-muted); }
.nabu-board-foot b { color: var(--nabu-navy-deep); font-variant-numeric: tabular-nums; }
.nabu-board-arrows { position: absolute; top: .45rem; right: .45rem; display: flex; gap: .2rem; }
.nabu-board-arrows button { width: 1.35rem; height: 1.35rem; border-radius: 6px; border: 1px solid var(--nabu-border); background: #fff; color: var(--nabu-navy-deep); font-size: .9rem; line-height: 1; cursor: pointer; }
.nabu-board-arrows button:hover:not(:disabled) { background: var(--nabu-navy-deep); color: #fff; border-color: var(--nabu-navy-deep); }
.nabu-board-arrows button:disabled { opacity: .3; cursor: default; }
.nabu-board-empty { font-size: .78rem; color: var(--nabu-muted); padding: .5rem .25rem; margin: 0; }
.dark .nabu-board-col { background: #050B1F; border-color: rgba(255, 255, 255, .15); }
.dark .nabu-board-card { background: #0A1330; border-color: rgba(255, 255, 255, .15); }
.dark .nabu-board-col h3, .dark .nabu-board-card a { color: #fff; }
.dark .nabu-board-foot b, .dark .nabu-check { color: var(--nabu-sage); }

/* Access rights */
.nabu-rights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1rem; align-items: start; }
.nabu-rights-grid h3 { font-family: var(--nabu-display); font-weight: 700; font-size: 1rem; color: #000; margin: 0 0 .75rem; }
.nabu-right { display: flex; align-items: flex-start; gap: .65rem; padding: .5rem .25rem; border-top: 1px solid var(--nabu-border); font-size: .875rem; color: #000; cursor: pointer; }
.nabu-right:first-of-type { border-top: 0; }
.nabu-right input { accent-color: var(--nabu-navy-deep); width: 1.05rem; height: 1.05rem; margin-top: .15rem; flex: none; }
.nabu-right span { flex: 1; }
.nabu-tag { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nabu-navy-deep); background: #B9C3DA; border-radius: 999px; padding: .12rem .5rem; white-space: nowrap; }
.nabu-rights-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; position: sticky; bottom: 1rem; background: #fff; border: 1px solid var(--nabu-border); border-radius: 14px; padding: .75rem; box-shadow: 0 12px 30px rgba(1, 27, 93, .10); }
.nabu-btn { font: 600 .875rem var(--nabu-ui); color: #fff; background: var(--nabu-navy-deep); border: 0; border-radius: 10px; padding: .65rem 1.2rem; cursor: pointer; }
.nabu-btn:hover { background: var(--nabu-navy); }
.nabu-btn[disabled] { opacity: .6; }
.dark .nabu-rights-grid h3, .dark .nabu-right { color: #fff; }
.dark .nabu-right { border-color: rgba(255, 255, 255, .15); }
.dark .nabu-rights-actions { background: #050B1F; border-color: rgba(255, 255, 255, .15); }

/* Task discussion */
.nabu-thread { display: flex; flex-direction: column; gap: .6rem; font-size: .875rem; color: var(--nabu-text); }
.nabu-thread h4 { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nabu-navy); margin: .6rem 0 0; }
.nabu-thread-desc, .nabu-thread-comment p { white-space: pre-line; margin: 0; color: #000; }
.nabu-thread-list, .nabu-thread-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.nabu-thread-list li { padding-left: 1.4rem; position: relative; color: #000; }
.nabu-thread-list li::before { content: ""; position: absolute; left: 0; top: .2rem; width: .85rem; height: .85rem; border: 1.5px solid var(--nabu-border); border-radius: 4px; }
.nabu-thread-list li.is-done { color: var(--nabu-muted); text-decoration: line-through; }
.nabu-thread-list li.is-done::before { background: var(--nabu-navy-deep); border-color: var(--nabu-navy-deep); }
.nabu-thread-list span, .nabu-thread-files span, .nabu-thread-comment header span { font-size: .76rem; color: var(--nabu-muted); margin-left: .5rem; text-decoration: none; }
.nabu-thread-files a { color: var(--nabu-navy-deep); font-weight: 600; text-decoration: underline; }
.nabu-thread-comment { background: var(--nabu-ground); border-radius: 12px; padding: .7rem .85rem; }
.nabu-thread-comment header { margin-bottom: .25rem; color: #000; }
.nabu-thread-empty { margin: 0; color: var(--nabu-muted); }
.dark .nabu-thread-desc, .dark .nabu-thread-comment p, .dark .nabu-thread-list li, .dark .nabu-thread-comment header { color: #fff; }
.dark .nabu-thread-comment { background: rgba(255, 255, 255, .05); }
.dark .nabu-thread-files a { color: var(--nabu-sage); }

/* Printing a report or list: content only */
a.nabu-link { text-decoration: none; display: inline-block; }
@media print {
    .fi-sidebar, .fi-topbar, .fi-sidebar-close-overlay, .nabu-no-print, .nabu-report-bar select, .nabu-report-bar label { display: none !important; }
    .fi-main, .fi-main-ctn, .fi-layout { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    body, .fi-body { background: #fff !important; }
    .nabu-tile, .nabu-report-card { break-inside: avoid; }
}

/* Backups: destructive controls */
.nabu-btn.is-danger { background: #B4320A; }
.nabu-btn.is-danger:hover { background: #8F2707; }
.nabu-link.is-danger { color: #B4320A; border-color: #F0C7B8; }
.nabu-link.is-danger:hover { background: #B4320A; color: #fff; border-color: #B4320A; }
.nabu-link[disabled] { opacity: .45; cursor: not-allowed; }
.nabu-link[disabled]:hover { background: transparent; color: var(--nabu-navy-deep); border-color: var(--nabu-border); }
.nabu-danger { background: #FFF6F2; border: 1px solid #F0C7B8; border-radius: 20px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; color: #5A1E0A; font-size: .9rem; }
.nabu-danger h3 { font-family: var(--nabu-display); font-weight: 700; font-size: 1.05rem; color: #7A2408; margin: 0 0 .5rem; }
.nabu-danger p { margin: 0 0 .6rem; max-width: 52rem; }
.nabu-danger label { display: block; font-weight: 600; margin: .4rem 0 .35rem; }
.nabu-danger input { font: 600 .95rem var(--nabu-ui); letter-spacing: .04em; border: 1px solid #E0A58F; border-radius: 10px; padding: .55rem .75rem; width: 14rem; max-width: 100%; background: #fff; color: #000; }
.dark .nabu-danger { background: rgba(180, 50, 10, .12); border-color: rgba(240, 199, 184, .3); color: #F7D9CE; }
.dark .nabu-danger h3 { color: #FFC9B5; }

/* Calendar: public holidays */
.nabu-cal-event.is-holiday, .nabu-cal-legend i.is-holiday { background: #E7DFF6; color: #4B3794; }
.nabu-cal-legend i.is-holiday { background: #8B6FD6; }

/* Dashboards and charts. Series colours are validated for colour-blind separation in both modes. */
.nabu-dash { --viz-1: #2A4FA8; --viz-2: #EB6834; --viz-3: #1BAF7A; --viz-4: #EDA100; --viz-5: #6250D6; --viz-6: #E87BA4;
    --viz-ink: #000; --viz-ink-2: var(--nabu-text); --viz-grid: #E6E9E7; --viz-surface: #fff; display: flex; flex-direction: column; gap: 1.25rem; }
.dark .nabu-dash { --viz-1: #4C7BE0; --viz-2: #D95926; --viz-3: #199E70; --viz-4: #C98500; --viz-5: #9085E9; --viz-6: #D55181;
    --viz-ink: #fff; --viz-ink-2: rgba(255, 255, 255, .7); --viz-grid: rgba(255, 255, 255, .12); --viz-surface: #050B1F; }
.nabu-dash-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nabu-dash-bar .nabu-report-bar { margin: 0; }
.nabu-dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 1rem; }
.nabu-kpi { background: var(--viz-surface); border: 1px solid var(--nabu-border); border-radius: 20px; padding: 1.15rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.nabu-kpi span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--nabu-navy); }
.nabu-kpi b { font-family: var(--nabu-display); font-weight: 700; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.1; color: var(--viz-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nabu-kpi small { font-size: .8rem; color: var(--viz-ink-2); }
.nabu-kpi small.is-up::before { content: "▲ "; font-size: .65rem; }
.nabu-kpi small.is-down::before { content: "▼ "; font-size: .65rem; }
.nabu-dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.nabu-panel { grid-column: span 6; background: var(--viz-surface); border: 1px solid var(--nabu-border); border-radius: 20px; padding: 1.3rem 1.4rem; min-width: 0; display: flex; flex-direction: column; gap: .9rem; }
.nabu-panel.is-wide { grid-column: span 8; }
.nabu-panel.is-narrow { grid-column: span 4; }
.nabu-panel.is-full { grid-column: span 12; }
.nabu-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.nabu-panel h3 { font-family: var(--nabu-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; color: var(--viz-ink); margin: 0; }
.nabu-panel > header a { font-size: .8rem; font-weight: 600; color: var(--nabu-navy-deep); text-decoration: none; white-space: nowrap; }
.nabu-panel > header a:hover { text-decoration: underline; }
.nabu-panel > p { margin: 0; font-size: .8rem; color: var(--viz-ink-2); }
@media (max-width: 1100px) { .nabu-panel, .nabu-panel.is-wide, .nabu-panel.is-narrow { grid-column: span 12; } }

.nabu-viz { margin: 0; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.nabu-viz-plot { position: relative; }
.nabu-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.nabu-viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.nabu-viz-base { stroke: var(--nabu-border); stroke-width: 1; }
.nabu-viz-axis { font: 500 11px var(--nabu-ui); fill: var(--viz-ink-2); font-variant-numeric: tabular-nums; }
.nabu-viz-bar { stroke: var(--viz-surface); stroke-width: 0; }
.nabu-viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nabu-viz-dot { stroke: var(--viz-surface); stroke-width: 2; }
.nabu-viz-hit { fill: transparent; cursor: default; outline: none; }
.nabu-viz-hit:hover, .nabu-viz-hit:focus-visible { fill: rgba(1, 27, 93, .05); }
.dark .nabu-viz-hit:hover, .dark .nabu-viz-hit:focus-visible { fill: rgba(255, 255, 255, .06); }
.nabu-viz-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--viz-ink-2); }
.nabu-viz-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.nabu-viz-legend i, .nabu-viz-tip i, .nabu-donut-legend i { width: .65rem; height: .65rem; border-radius: 3px; display: inline-block; flex: none; }
.nabu-viz-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--viz-surface); border: 1px solid var(--nabu-border); border-radius: 10px; box-shadow: 0 10px 26px rgba(1, 27, 93, .14); padding: .5rem .65rem; font-size: .76rem; color: var(--viz-ink-2); pointer-events: none; white-space: nowrap; z-index: 5; display: flex; flex-direction: column; gap: .2rem; }
.nabu-viz-tip > b { color: var(--viz-ink); }
.nabu-viz-tip span { display: flex; align-items: center; gap: .4rem; }
.nabu-viz-tip em { font-style: normal; flex: 1; }
.nabu-viz-tip strong { color: var(--viz-ink); font-variant-numeric: tabular-nums; margin-left: .75rem; }
[x-cloak] { display: none !important; }
.nabu-viz-table { font-size: .78rem; color: var(--viz-ink-2); }
.nabu-viz-table summary { cursor: pointer; width: fit-content; }
.nabu-viz-table table { border-collapse: collapse; margin-top: .5rem; width: 100%; }
.nabu-viz-table th, .nabu-viz-table td { text-align: right; padding: .25rem .5rem; border-bottom: 1px solid var(--viz-grid); font-variant-numeric: tabular-nums; }
.nabu-viz-table th:first-child { text-align: left; }
.nabu-viz-empty { margin: 0; padding: 2rem 0; text-align: center; font-size: .85rem; color: var(--nabu-muted); }

.nabu-donut { flex-direction: row; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.nabu-donut svg { width: 9.5rem; flex: none; }
.nabu-viz-track { fill: none; stroke: var(--viz-grid); stroke-width: 4.2; }
.nabu-viz-ring { fill: none; stroke-width: 4.2; }
.nabu-donut-total { font: 700 6.4px var(--nabu-display); fill: var(--viz-ink); letter-spacing: -.02em; }
.nabu-donut-label { font: 500 2.5px var(--nabu-ui); fill: var(--viz-ink-2); }
.nabu-donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 11rem; display: flex; flex-direction: column; gap: .4rem; font-size: .82rem; color: var(--viz-ink-2); }
.nabu-donut-legend li { display: flex; align-items: center; gap: .5rem; }
.nabu-donut-legend span { flex: 1; min-width: 0; }
.nabu-donut-legend b { color: var(--viz-ink); font-variant-numeric: tabular-nums; }
.nabu-donut-legend em { font-style: normal; width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }

.nabu-ranked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .82rem; color: var(--viz-ink-2); }
.nabu-ranked li { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr 2.5rem; align-items: center; gap: .75rem; }
.nabu-ranked span { color: var(--viz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nabu-ranked div { background: var(--viz-grid); border-radius: 0 4px 4px 0; height: .7rem; }
.nabu-ranked i { display: block; height: 100%; background: var(--viz-1); border-radius: 0 4px 4px 0; min-width: 2px; }
.nabu-ranked b { color: var(--viz-ink); text-align: right; font-variant-numeric: tabular-nums; }

.nabu-stages { display: flex; height: .8rem; gap: 2px; border-radius: 6px; overflow: hidden; }
.nabu-stages i { display: block; min-width: 3px; }
.nabu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: .85rem; }
.nabu-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--viz-grid); min-width: 0; }
.nabu-list li:first-child { border-top: 0; }
.nabu-list a, .nabu-list strong { color: var(--viz-ink); font-weight: 600; text-decoration: none; }
.nabu-list a:hover { color: var(--nabu-navy-deep); text-decoration: underline; }
.nabu-list div { min-width: 0; }
.nabu-list small { display: block; font-size: .76rem; color: var(--viz-ink-2); }
.nabu-list .num { text-align: right; white-space: nowrap; color: var(--viz-ink); font-variant-numeric: tabular-nums; }
.nabu-pill { font-size: .7rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; background: var(--nabu-ground); color: var(--nabu-navy-deep); }
.nabu-pill.is-good { background: #DFF3EA; color: #0E6B45; }
.nabu-pill.is-warn { background: #FDF1CF; color: #7A5200; }
.nabu-pill.is-bad { background: #FBE4DC; color: #9A3412; }
.dark .nabu-kpi span, .dark .nabu-panel > header a { color: var(--nabu-sage); }
.dark .nabu-kpi, .dark .nabu-panel, .dark .nabu-viz-tip { border-color: rgba(255, 255, 255, .15); }
.dark .nabu-pill { background: rgba(255, 255, 255, .1); color: #fff; }
.dark .nabu-pill.is-good { background: rgba(25, 158, 112, .22); color: #8FE3C3; }
.dark .nabu-pill.is-warn { background: rgba(201, 133, 0, .24); color: #F5D58A; }
.dark .nabu-pill.is-bad { background: rgba(217, 89, 38, .24); color: #FFC0A6; }
.nabu-app.is-dashboards .nabu-app-icon { background: var(--nabu-navy-deep); color: #fff; box-shadow: 0 10px 22px rgba(1, 27, 93, .18); }

/* Sidebar, tightened: less space between groups and rows, icons in small tiles, a calmer active state. */
.fi-sidebar-nav { padding: .5rem .6rem 1rem; gap: .5rem; }
/* Filament pulls the groups out by -0.5rem to sit inside its own 1.5rem padding. With the tighter padding above that
   left the items 2px from the window edge and clipped the active marker, so the offset is removed. */
.fi-sidebar-nav-groups { gap: .45rem !important; row-gap: .45rem !important; margin-inline: 0 !important; }
.fi-sidebar-group { gap: .1rem !important; row-gap: .1rem !important; }
.fi-sidebar-group-items { gap: 1px !important; row-gap: 1px !important; }
.fi-sidebar-group-btn { padding: .45rem .55rem .2rem; }
.fi-sidebar-group-label { font-size: 10.5px; letter-spacing: .09em; }
.fi-sidebar-item-btn { padding: .22rem .5rem !important; gap: .65rem; border-radius: 10px; min-height: 0; line-height: 1.2; }
.fi-sidebar-item-label { font-size: .86rem; font-weight: 500; color: #1A2233; line-height: 1.2; }
.fi-sidebar-item-btn > .fi-icon, .fi-sidebar-item-btn > svg, .fi-sidebar-item-icon {
    box-sizing: content-box; width: 1.02rem; height: 1.02rem; padding: .28rem; border-radius: 8px; flex: none;
    background: #EEF1F8; color: var(--nabu-navy-deep); transition: background-color .15s ease, color .15s ease;
}
.fi-sidebar-item-btn:hover { background-color: #F3F5FA; }
.fi-sidebar-item-btn:hover > .fi-icon, .fi-sidebar-item-btn:hover > svg, .fi-sidebar-item-btn:hover .fi-sidebar-item-icon { background: #DDE3F1; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item-active > .fi-sidebar-item-btn,
.fi-sidebar-item-active > a { background-color: #E8ECF6 !important; box-shadow: inset 3px 0 0 var(--nabu-navy-deep); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item-active > a span { color: var(--nabu-navy-deep) !important; font-weight: 700; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon, .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > svg,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item-active > .fi-sidebar-item-btn svg, .fi-sidebar-item-active > a svg { background: var(--nabu-navy-deep) !important; color: #fff !important; }
.fi-sidebar-item-btn .fi-badge { font-size: .68rem; padding: .05rem .4rem; min-width: 1.3rem; }
.dark .fi-sidebar-item-label { color: rgba(255, 255, 255, .82); }
.dark .fi-sidebar-item-btn > .fi-icon, .dark .fi-sidebar-item-btn > svg, .dark .fi-sidebar-item-icon { background: rgba(255, 255, 255, .07); color: var(--nabu-sage); }
.dark .fi-sidebar-item-btn:hover { background-color: rgba(255, 255, 255, .05); }
.dark .fi-sidebar-item-btn:hover > .fi-icon, .dark .fi-sidebar-item-btn:hover > svg, .dark .fi-sidebar-item-btn:hover .fi-sidebar-item-icon { background: rgba(255, 255, 255, .14); }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn, .dark .fi-sidebar-item-active > .fi-sidebar-item-btn, .dark .fi-sidebar-item-active > a { background-color: rgba(189, 204, 192, .12) !important; box-shadow: inset 3px 0 0 var(--nabu-sage); }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label, .dark .fi-sidebar-item-active > .fi-sidebar-item-btn .fi-sidebar-item-label, .dark .fi-sidebar-item-active > a span { color: #fff !important; }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon, .dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > svg, .dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.dark .fi-sidebar-item-active > .fi-sidebar-item-btn svg, .dark .fi-sidebar-item-active > a svg { background: var(--nabu-sage) !important; color: var(--nabu-navy-deep) !important; }

.dark .nabu-btn { background: var(--nabu-sage); color: var(--nabu-navy-deep); }
.dark .nabu-btn:hover { background: #fff; }
.dark .nabu-btn.is-danger { background: #D95926; color: #fff; }

/* Home: my tasks, today, shortcuts, then every area by group */
.nabu-home-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.nabu-home .nabu-panel { grid-column: auto; }
@media (max-width: 1100px) { .nabu-home-top { grid-template-columns: 1fr; } }
.nabu-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.nabu-shortcuts a { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .8rem .3rem .7rem; border: 1px solid var(--nabu-border); border-radius: 14px; text-decoration: none; min-width: 0; transition: border-color .15s ease, background-color .15s ease; }
.nabu-shortcuts a:hover { border-color: var(--nabu-navy-deep); background: #F3F5FA; }
.nabu-shortcuts a:focus-visible { outline: 2px solid var(--nabu-navy-deep); outline-offset: 2px; }
.nabu-shortcut-icon { width: 2.3rem; height: 2.3rem; border-radius: 10px; background: #EEF1F8; color: var(--nabu-navy-deep); display: flex; align-items: center; justify-content: center; }
.nabu-shortcut-icon svg { width: 1.25rem; height: 1.25rem; }
.nabu-shortcuts b { font-size: .84rem; font-weight: 600; color: var(--viz-ink); text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.nabu-shortcuts em, .nabu-areas em { font-style: normal; font-size: .68rem; font-weight: 700; background: var(--nabu-navy-deep); color: #fff; border-radius: 999px; padding: .08rem .45rem; }
.nabu-shortcuts em { position: absolute; top: .4rem; right: .4rem; }
.nabu-areas { display: flex; flex-direction: column; gap: .7rem; }
.nabu-areas > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .75rem; align-items: baseline; }
.nabu-areas span { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nabu-muted); }
.nabu-areas p { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.nabu-areas a { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--nabu-navy-deep); background: #EEF1F8; border-radius: 999px; padding: .3rem .75rem; text-decoration: none; }
.nabu-areas a:hover { background: var(--nabu-navy-deep); color: #fff; }
.nabu-areas a:hover em { background: #fff; color: var(--nabu-navy-deep); }
@media (max-width: 700px) { .nabu-areas > div { grid-template-columns: 1fr; gap: .3rem; } }
.dark .nabu-shortcuts a { border-color: rgba(255, 255, 255, .15); }
.dark .nabu-shortcuts a:hover { border-color: var(--nabu-sage); background: rgba(255, 255, 255, .05); }
.dark .nabu-shortcut-icon { background: rgba(255, 255, 255, .07); color: var(--nabu-sage); }
.dark .nabu-shortcuts em, .dark .nabu-areas em { background: var(--nabu-sage); color: var(--nabu-navy-deep); }
.dark .nabu-areas a { background: rgba(255, 255, 255, .07); color: #fff; }
.dark .nabu-areas a:hover { background: var(--nabu-sage); color: var(--nabu-navy-deep); }