/* The shared ATBI Software micro-SaaS stylesheet (Account Hub plan H1.1). Phone first: base rules target 360px; wider layouts are added
   with min-width queries at 768px (tablet) and 1280px (desktop). Every value comes from tokens.css. Ported from the CGS kit
   (ContentGenerationSystem/app/Cgs.App/wwwroot/css/app.css) with the cgs- prefix renamed saas-. An app's own stylesheet adds layout
   only, never colours. */
@import url("tokens.css");

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--saas-color-bg);
    color: var(--saas-color-text);
    font-family: var(--saas-font-sans);
    font-size: var(--saas-text-md);
    line-height: var(--saas-leading);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--saas-space-3); font-weight: var(--saas-weight-bold); }
p { margin: 0 0 var(--saas-space-3); }
a { color: var(--saas-color-brand-action); text-underline-offset: 2px; }
a:hover { color: var(--saas-color-brand-action-hover); }
img, svg { max-width: 100%; }
code, pre, kbd { font-family: var(--saas-font-mono); font-size: 0.9em; }

:focus-visible { outline: 2px solid var(--saas-color-focus); outline-offset: 2px; border-radius: var(--saas-radius-sm); }
h1:focus { outline: none; }

.saas-icon { flex: none; display: inline-block; vertical-align: middle; }
.saas-muted { color: var(--saas-color-text-muted); }

.saas-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Loading ---------- */
.saas-page-loading {
    display: flex; align-items: center; justify-content: center; gap: var(--saas-space-3);
    padding: var(--saas-space-6) 0; color: var(--saas-color-text-muted);
}
.saas-spinner {
    width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid var(--saas-color-border); border-top-color: var(--saas-color-brand);
    animation: saas-spin 0.8s linear infinite;
}
@keyframes saas-spin { to { transform: rotate(360deg); } }

/* ---------- Brand ---------- */
.saas-brand {
    display: inline-flex; align-items: center; gap: var(--saas-space-2);
    color: var(--saas-color-text); font-weight: var(--saas-weight-bold); font-size: var(--saas-text-lg);
    text-decoration: none; min-height: var(--saas-tap);
}
.saas-brand:hover { color: var(--saas-color-text); }
.saas-brand__mark { width: 28px; height: 28px; display: block; }
.saas-brand__product { display: flex; flex-direction: column; line-height: 1.15; }
.saas-brand__company { font-size: var(--saas-text-xs); font-weight: var(--saas-weight-medium); color: var(--saas-color-text-muted); }

.saas-brand__stack { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.saas-brand__product-name { font-size: var(--saas-text-sm); font-weight: var(--saas-weight-medium); color: var(--saas-color-text-muted); }
.saas-brand__stack .saas-logo--shell { width: 132px; }

/* ---------- Sign-in / no-access gate ---------- */
.saas-gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--saas-space-4); }
/* Full ATBI Software logo on the gate: the light-theme (black) and dark-theme (white) artwork, switched by the same selectors as tokens.css. */
.saas-gate__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--saas-space-2); }
.saas-gate__product { font-size: var(--saas-text-sm); font-weight: var(--saas-weight-medium); color: var(--saas-color-text-muted); }
.saas-logo { display: block; width: 160px; height: auto; }
.saas-logo--on-dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .saas-logo--on-light { display: none; }
    :root:not([data-theme="light"]) .saas-logo--on-dark { display: block; }
}
:root[data-theme="dark"] .saas-logo--on-light { display: none; }
:root[data-theme="dark"] .saas-logo--on-dark { display: block; }
.saas-gate__card {
    width: 100%; max-width: 420px; background: var(--saas-color-surface);
    border: 1px solid var(--saas-color-border); border-radius: var(--saas-radius-lg);
    box-shadow: var(--saas-shadow-md); padding: var(--saas-space-6) var(--saas-space-5);
}
.saas-gate__title { font-size: var(--saas-text-xl); margin-top: var(--saas-space-5); }
.saas-gate__text { color: var(--saas-color-text-muted); margin-bottom: var(--saas-space-5); overflow-wrap: anywhere; }
.saas-gate__card .saas-btn + .saas-btn { margin-top: var(--saas-space-3); }

/* ---------- App shell: top bar + drawer on phones, fixed sidebar from 768px ---------- */
.saas-shell { min-height: 100vh; min-height: 100dvh; }

.saas-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--saas-space-2);
    height: var(--saas-topbar-height); padding: 0 var(--saas-space-2);
    background: var(--saas-color-surface); border-bottom: 1px solid var(--saas-color-border);
}
.saas-topbar__spacer { flex: 1; }

.saas-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: min(85vw, var(--saas-sidebar-width));
    display: flex; flex-direction: column;
    background: var(--saas-color-sidebar); border-right: 1px solid var(--saas-color-border);
    transform: translateX(-100%); transition: transform var(--saas-motion);
    visibility: hidden;
}
.saas-shell--drawer-open .saas-sidebar { transform: none; visibility: visible; box-shadow: var(--saas-shadow-lg); }

.saas-scrim { display: none; }
.saas-shell--drawer-open .saas-scrim { display: block; position: fixed; inset: 0; z-index: 30; background: var(--saas-color-scrim); }

.saas-sidebar__head {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--saas-topbar-height); padding: 0 var(--saas-space-2) 0 var(--saas-space-4);
    border-bottom: 1px solid var(--saas-color-border);
}

.saas-nav { flex: 1; overflow-y: auto; padding: var(--saas-space-3) var(--saas-space-2); }
.saas-nav__section {
    margin: var(--saas-space-4) var(--saas-space-3) var(--saas-space-1);
    font-size: var(--saas-text-xs); font-weight: var(--saas-weight-bold);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--saas-color-text-muted);
}
.saas-nav__link {
    display: flex; align-items: center; gap: var(--saas-space-3);
    min-height: var(--saas-tap); padding: 0 var(--saas-space-3); margin-bottom: 2px;
    border-radius: var(--saas-radius-md); color: var(--saas-color-text); text-decoration: none;
    font-weight: var(--saas-weight-medium);
}
.saas-nav__link .saas-icon { color: var(--saas-color-text-muted); }
.saas-nav__link:hover { background: var(--saas-color-surface-2); color: var(--saas-color-text); }
.saas-nav__link.active, .saas-nav__link.active:hover { background: var(--saas-color-brand-action); color: var(--saas-color-on-brand); }
.saas-nav__link.active .saas-icon { color: var(--saas-color-on-brand); }

/* Product switcher: the products this user can open, at the top of the sidebar. The current product is marked, not linked. */
.saas-switcher { padding: var(--saas-space-3) var(--saas-space-2) 0; }
.saas-switcher__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.saas-switcher__item {
    display: flex; align-items: center; gap: var(--saas-space-3); min-height: var(--saas-tap);
    padding: 0 var(--saas-space-3); border-radius: var(--saas-radius-md);
    color: var(--saas-color-text); text-decoration: none; font-size: var(--saas-text-sm);
}
.saas-switcher__item:hover { background: var(--saas-color-surface-2); color: var(--saas-color-text); }
.saas-switcher__item--current { background: var(--saas-color-brand-soft); font-weight: var(--saas-weight-medium); }
.saas-switcher__item--current:hover { background: var(--saas-color-brand-soft); }

.saas-sidebar__foot {
    display: flex; align-items: center; gap: var(--saas-space-2);
    padding: var(--saas-space-3) var(--saas-space-2) var(--saas-space-3) var(--saas-space-4);
    border-top: 1px solid var(--saas-color-border);
}
.saas-user { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.saas-user__name { font-size: var(--saas-text-sm); font-weight: var(--saas-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saas-user__role { font-size: var(--saas-text-xs); color: var(--saas-color-text-muted); }
.saas-sidebar__actions { display: flex; }

.saas-main {
    width: 100%; max-width: var(--saas-content-max); margin: 0 auto;
    padding: var(--saas-space-5) var(--saas-gutter) var(--saas-space-6);
    min-width: 0;
}

@media (min-width: 768px) {
    .saas-topbar, .saas-scrim, .saas-sidebar__close { display: none !important; }
    .saas-sidebar { transform: none; visibility: visible; width: var(--saas-sidebar-width); box-shadow: none !important; }
    .saas-shell { padding-left: var(--saas-sidebar-width); }
    .saas-main { padding-top: var(--saas-space-6); }
}

/* ---------- Page header ---------- */
.saas-page-header {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--saas-space-3); margin-bottom: var(--saas-space-5);
}
.saas-page-header__text { min-width: 0; }
.saas-page-title { font-size: var(--saas-text-2xl); margin: 0; }
.saas-page-subtitle { margin: var(--saas-space-1) 0 0; color: var(--saas-color-text-muted); }
.saas-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--saas-space-2); }
@media (max-width: 767px) {
    .saas-page-header__actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

/* ---------- Card ---------- */
.saas-card {
    background: var(--saas-color-surface); border: 1px solid var(--saas-color-border);
    border-radius: var(--saas-radius-lg); box-shadow: var(--saas-shadow-sm);
    padding: var(--saas-space-4); margin-bottom: var(--saas-space-4);
}
.saas-card__title { font-size: var(--saas-text-lg); margin-bottom: var(--saas-space-3); }
@media (min-width: 768px) { .saas-card { padding: var(--saas-space-5); } }

.saas-grid { display: grid; gap: var(--saas-space-4); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

/* ---------- Stat tile ---------- */
.saas-stat { display: flex; flex-direction: column; gap: var(--saas-space-1); }
.saas-stat__label { font-size: var(--saas-text-sm); color: var(--saas-color-text-muted); }
.saas-stat__value { font-size: var(--saas-text-xl); font-weight: var(--saas-weight-bold); }

/* ---------- Buttons (44px minimum tap target) ---------- */
.saas-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--saas-space-2);
    min-height: var(--saas-tap); min-width: var(--saas-tap); padding: 0 var(--saas-space-4);
    border: 1px solid transparent; border-radius: var(--saas-radius-md);
    font: inherit; font-weight: var(--saas-weight-medium); line-height: 1.2;
    text-decoration: none; cursor: pointer; transition: background var(--saas-motion), border-color var(--saas-motion);
    -webkit-tap-highlight-color: transparent;
}
.saas-btn:disabled, .saas-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.saas-btn--primary { background: var(--saas-color-brand-action); color: var(--saas-color-on-brand); }
.saas-btn--primary:hover:not(:disabled) { background: var(--saas-color-brand-action-hover); color: var(--saas-color-on-brand); }
.saas-btn--secondary { background: var(--saas-color-surface); color: var(--saas-color-text); border-color: var(--saas-color-border-strong); }
.saas-btn--secondary:hover:not(:disabled) { background: var(--saas-color-surface-2); color: var(--saas-color-text); }
.saas-btn--ghost { background: transparent; color: var(--saas-color-text-muted); }
.saas-btn--ghost:hover:not(:disabled) { background: var(--saas-color-surface-2); color: var(--saas-color-text); }
.saas-btn--danger { background: var(--saas-color-danger); color: var(--saas-color-on-brand); }
.saas-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--saas-color-danger) 85%, black); color: var(--saas-color-on-brand); }
.saas-btn--outline-danger { background: var(--saas-color-surface); color: var(--saas-color-danger); border-color: var(--saas-color-danger); }
.saas-btn--outline-danger:hover:not(:disabled) { background: var(--saas-color-danger-soft); }
.saas-btn--icon { padding: 0; width: var(--saas-tap); }
.saas-btn--block { width: 100%; }

/* ---------- Forms ---------- */
.saas-field { display: flex; flex-direction: column; gap: var(--saas-space-1); margin-bottom: var(--saas-space-4); }
.saas-field__label { font-size: var(--saas-text-sm); font-weight: var(--saas-weight-medium); }
.saas-field__hint { font-size: var(--saas-text-xs); color: var(--saas-color-text-muted); }
.saas-input, .saas-select {
    min-height: var(--saas-tap); width: 100%; padding: 0 var(--saas-space-3);
    font: inherit; color: var(--saas-color-text); background: var(--saas-color-surface);
    border: 1px solid var(--saas-color-border-strong); border-radius: var(--saas-radius-md);
}
.saas-input:focus-visible, .saas-select:focus-visible { outline: 2px solid var(--saas-color-focus); outline-offset: 0; }
.saas-form-actions { display: flex; flex-wrap: wrap; gap: var(--saas-space-2); }
.saas-check { display: flex; align-items: center; gap: var(--saas-space-2); min-height: var(--saas-tap); }

/* ---------- Tables: scroll sideways inside their card on a phone rather than widening the page ---------- */
.saas-table-wrap { overflow-x: auto; }
.saas-table { width: 100%; border-collapse: collapse; font-size: var(--saas-text-sm); }
.saas-table th, .saas-table td { padding: var(--saas-space-3); text-align: left; border-bottom: 1px solid var(--saas-color-border); vertical-align: top; }
.saas-table th { font-weight: var(--saas-weight-bold); color: var(--saas-color-text-muted); white-space: nowrap; }
.saas-table tbody tr:hover { background: var(--saas-color-surface-2); }
.saas-table__num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Badges ---------- */
.saas-badge {
    display: inline-flex; align-items: center; gap: var(--saas-space-1);
    padding: 0 var(--saas-space-2); min-height: 1.5rem; border-radius: 999px;
    font-size: var(--saas-text-xs); font-weight: var(--saas-weight-medium);
    background: var(--saas-color-surface-2); color: var(--saas-color-text);
}
.saas-badge--success { background: var(--saas-color-success-soft); color: var(--saas-color-success); }
.saas-badge--warning { background: var(--saas-color-warning-soft); color: var(--saas-color-warning); }
.saas-badge--danger { background: var(--saas-color-danger-soft); color: var(--saas-color-danger); }
.saas-badge--info { background: var(--saas-color-info-soft); color: var(--saas-color-info); }

/* ---------- Empty state and section messages ---------- */
.saas-empty { text-align: center; padding: var(--saas-space-6) var(--saas-space-4); color: var(--saas-color-text-muted); }
.saas-empty__icon { color: var(--saas-color-text-muted); margin-bottom: var(--saas-space-3); }
.saas-empty__title { font-weight: var(--saas-weight-bold); color: var(--saas-color-text); margin-bottom: var(--saas-space-2); }

.saas-alert {
    display: flex; align-items: flex-start; gap: var(--saas-space-2);
    padding: var(--saas-space-3) var(--saas-space-4); margin-bottom: var(--saas-space-4);
    border-radius: var(--saas-radius-md); border: 1px solid transparent; overflow-wrap: anywhere;
}
.saas-alert--success { background: var(--saas-color-success-soft); color: var(--saas-color-success); border-color: color-mix(in srgb, var(--saas-color-success) 30%, transparent); }
.saas-alert--danger { background: var(--saas-color-danger-soft); color: var(--saas-color-danger); border-color: color-mix(in srgb, var(--saas-color-danger) 30%, transparent); }
.saas-alert--info { background: var(--saas-color-info-soft); color: var(--saas-color-info); border-color: color-mix(in srgb, var(--saas-color-info) 30%, transparent); }

/* ---------- Definition lists (detail pages) ---------- */
.saas-details { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--saas-space-2) var(--saas-space-4); margin: 0 0 var(--saas-space-5); }
.saas-details dt { color: var(--saas-color-text-muted); font-size: var(--saas-text-sm); }
.saas-details dd { margin: 0; overflow-wrap: anywhere; }