/* HealthyAssets brand theme — Concept A "Vital"
   HSL tokens derived from the brand kit palette:
     Vital  #14A372 (159 78% 36%)  primary brand green
     Ink    #0C3A30 (167 66% 14%)  evergreen, text / dark UI
     Spring #5FE0AB (155 68% 63%)  light accent / success
     Mint   #E7F6EF (152 46% 94%)  tints, cards, table fills
     Sand   #F7F2E9 ( 39 47% 94%)  warm page background
     Charc. #14241F (163 28% 11%)  body copy on light
*/

:root {
    --background: 40 40% 97%;        /* soft Sand */
    --foreground: 163 28% 13%;       /* Charcoal */
    --border: 150 18% 87%;
    --card: 0 0% 100%;
    --card-foreground: 163 28% 13%;
    --card-border: 150 18% 88%;
    --sidebar: 152 40% 96%;          /* light Mint */
    --sidebar-foreground: 167 45% 17%;
    --sidebar-border: 150 20% 88%;
    --sidebar-primary: 159 78% 36%;  /* Vital */
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 152 42% 90%;
    --sidebar-accent-foreground: 167 55% 14%;
    --primary: 159 78% 36%;          /* Vital */
    --primary-foreground: 0 0% 100%;
    --secondary: 150 30% 94%;
    --secondary-foreground: 167 45% 17%;
    --muted: 150 22% 94%;
    --muted-foreground: 165 12% 40%;
    --accent: 27 70% 52%;
    --accent-foreground: 30 50% 12%;
    --destructive: 0 70% 48%;
    --destructive-foreground: 0 0% 100%;
    --input: 150 18% 85%;
    --ring: 159 78% 38%;
    --brand-gradient: linear-gradient(120deg, #2BCB8E, #0B7A56); /* app mark / hero */
    --teal-50: 152 46% 94%;          /* Mint — repointed to brand green */
    --teal-700: 159 78% 30%;
    --amber-50: 27 70% 96%;
    --amber-700: 27 70% 42%;
    --rose-50: 0 70% 96%;
    --rose-700: 0 70% 48%;
    --sky-50: 215 60% 96%;
    --sky-700: 215 50% 42%;
    --violet-50: 280 40% 96%;
    --violet-700: 280 40% 42%;
    --radius: 0.625rem;
    --shadow-sm: 0 1px 2px 0 hsl(167 25% 14% / 0.05), 0 1px 3px 0 hsl(167 25% 14% / 0.06);
    --shadow-md: 0 4px 6px -1px hsl(167 25% 14% / 0.08), 0 2px 4px -2px hsl(167 25% 14% / 0.06);
}

/* ---- Brand typeface — Hanken Grotesk (matches the logo wordmark, SIL OFL 1.1) ---- */

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('/fonts/HankenGrotesk-VF.ttf') format('truetype-variations'),
         url('/fonts/HankenGrotesk-VF.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---- Open Sans (SIL OFL 1.1) — SmartPO theme UI/button typeface, self-hosted ---- */

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans-VF.ttf') format('truetype-variations'),
         url('/fonts/OpenSans-VF.ttf') format('truetype');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

/* ---- PT Sans Narrow (SIL OFL 1.1) — SmartPO left-nav typeface, self-hosted ---- */

@font-face {
    font-family: 'PT Sans Narrow';
    src: url('/fonts/pt-sans.narrow.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { letter-spacing: -0.01em; margin: 0; }

/* Display / brand moments — heavier Hanken Grotesk, echoing the logo wordmark */
.page-header__title,
.auth-title,
.brand-title,
.modal-title,
.empty__title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }

a { color: inherit; text-decoration: none; }

/* ---- Layout shell ---- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 256px;
    flex-shrink: 0;
    background: hsl(var(--sidebar));
    border-right: 1px solid hsl(var(--sidebar-border));
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid hsl(var(--sidebar-border));
}
.sidebar__logo { display: block; width: 100%; }
.brand-lockup { display: block; width: 100%; height: auto; }

.brand-logo {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.brand-logo img,
.brand-logo svg { width: 100%; height: 100%; display: block; }
.brand-logo--sm { width: 30px; height: 30px; }
.brand-title { font-size: 14px; font-weight: 600; color: hsl(var(--sidebar-foreground)); }
.brand-sub { font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 2px; }

.sidebar__nav {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: hsl(var(--sidebar-foreground));
    transition: background 0.15s ease;
}
.nav-link:hover { background: hsl(var(--sidebar-accent) / 0.6); }
.nav-link.is-active {
    background: hsl(var(--sidebar-accent));
    color: hsl(var(--sidebar-accent-foreground));
    font-weight: 500;
}
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2; }

.sidebar__user {
    border-top: 1px solid hsl(var(--sidebar-border));
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.user-avatar {
    width: 32px; height: 32px; border-radius: 9999px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
    flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 500; color: hsl(var(--sidebar-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main-area { flex: 1; min-width: 0; }
.topbar-mobile { display: none; padding: 12px 16px; gap: 8px; align-items: center; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.main-content { padding: 32px 40px; max-width: 1400px; margin: 0 auto; }

@media (max-width: 768px) {
    .sidebar { display: none; }
    .topbar-mobile { display: flex; }
    .main-content { padding: 20px; }
}

/* ---- Page header ---- */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.page-header__title { font-size: 24px; font-weight: 600; color: hsl(var(--foreground)); }
.page-header__desc { font-size: 14px; color: hsl(var(--muted-foreground)); margin-top: 4px; }
.page-header__actions { display: flex; gap: 8px; }

/* ---- Cards ---- */

.card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card__body { padding: 20px; }
.card__header { padding: 16px 20px; border-bottom: 1px solid hsl(var(--card-border)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card__title i { width: 16px; height: 16px; color: hsl(var(--muted-foreground)); }

/* ---- Buttons ---- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn--primary:hover { background: hsl(var(--primary) / 0.9); }
.btn--secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: hsl(var(--border)); }
.btn--secondary:hover { background: hsl(var(--muted)); }
.btn--ghost { background: transparent; color: hsl(var(--foreground)); }
.btn--ghost:hover { background: hsl(var(--muted)); }
.btn--danger { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.btn--sm { padding: 4px 8px; font-size: 12px; }
.btn--icon { padding: 6px; }
.btn i { width: 14px; height: 14px; }

/* ---- Forms ---- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid--single { grid-template-columns: 1fr; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 500; color: hsl(var(--foreground)); }
.input, .select, .textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid hsl(var(--input));
    border-radius: 6px;
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    font-size: 14px;
    font-family: inherit;
}
.input:focus, .select:focus, .textarea:focus {
    outline: 2px solid hsl(var(--ring) / 0.3);
    outline-offset: 1px;
    border-color: hsl(var(--ring));
}
.textarea { min-height: 80px; resize: vertical; }

.input-icon { position: relative; display: block; }
.input-icon i,
.input-icon svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); width: 16px; height: 16px; pointer-events: none; }
.input-icon .input { padding-left: 36px; }

#search-results { transition: opacity 120ms ease; }
#search-results.is-loading { opacity: 0.55; }

/* ---- Detail / definition grid ---- */

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
@media (max-width: 640px) { .detail-grid { grid-template-columns: 1fr; } }
.detail { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail--full { grid-column: 1 / -1; }
.detail__label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--muted-foreground)); }
.detail__value { font-size: 14px; color: hsl(var(--foreground)); overflow-wrap: anywhere; }

/* ---- Section stack ---- */

.section-stack { display: flex; flex-direction: column; gap: 20px; }

/* ---- Tables ---- */

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table thead { background: hsl(var(--muted)); }
.table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 500;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.table td { padding: 12px 16px; border-top: 1px solid hsl(var(--border)); }
.table tbody tr:hover { background: hsl(var(--muted) / 0.4); }
.table .row-title { font-weight: 500; color: hsl(var(--foreground)); }
.table .row-sub { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.table .row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.table .text-right { text-align: right; }
.table .text-muted { color: hsl(var(--muted-foreground)); }

/* ---- Badges / Status ---- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    text-transform: capitalize;
}
.badge--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.badge--muted   { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.badge--success { background: hsl(152 50% 90%); color: hsl(159 70% 26%); }
.badge--warning { background: hsl(var(--amber-50)); color: hsl(var(--amber-700)); }
.badge--danger  { background: hsl(var(--rose-50));  color: hsl(var(--rose-700)); }
.badge--info    { background: hsl(var(--sky-50));   color: hsl(var(--sky-700)); }
.badge--violet  { background: hsl(var(--violet-50));color: hsl(var(--violet-700)); }

/* ---- Stat cards ---- */

.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: hsl(var(--card)); border: 1px solid hsl(var(--card-border)); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.stat-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stat-card__label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--muted-foreground)); }
.stat-card__value { font-size: 28px; font-weight: 600; margin-top: 8px; font-variant-numeric: tabular-nums; }
.stat-card__hint { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 4px; }
.stat-card__icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-card__icon i { width: 20px; height: 20px; }
.stat--teal   { background: hsl(var(--teal-50));   color: hsl(var(--teal-700)); }
.stat--amber  { background: hsl(var(--amber-50));  color: hsl(var(--amber-700)); }
.stat--rose   { background: hsl(var(--rose-50));   color: hsl(var(--rose-700)); }
.stat--sky    { background: hsl(var(--sky-50));    color: hsl(var(--sky-700)); }
.stat--violet { background: hsl(var(--violet-50)); color: hsl(var(--violet-700)); }

/* ---- Dashboard layout ---- */

.grid-2col { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 24px; }
.grid-1col-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
@media (max-width: 900px) { .grid-2col, .grid-1col-2col { grid-template-columns: 1fr; } }

.list-divided { list-style: none; margin: 0; padding: 0; }
.list-divided li { padding: 12px 0; border-top: 1px solid hsl(var(--border)); display: flex; align-items: center; gap: 12px; }
.list-divided li:first-child { border-top: 0; }
.list-divided .item-body { flex: 1; min-width: 0; }
.list-divided .item-title { font-size: 14px; font-weight: 500; }
.list-divided .item-sub { font-size: 12px; color: hsl(var(--muted-foreground)); }

.activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.activity-list li { display: flex; gap: 10px; }
.activity-dot { width: 8px; height: 8px; border-radius: 9999px; background: hsl(var(--primary)); margin-top: 8px; flex-shrink: 0; }

.bar-row { margin-bottom: 12px; }
.bar-row__head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.bar-row__track { height: 8px; background: hsl(var(--muted)); border-radius: 9999px; overflow: hidden; }
.bar-row__fill { height: 100%; background: hsl(var(--primary)); }
.bar-row__fill--accent { background: hsl(var(--accent)); }

/* ---- Clickable dashboard widgets ---- */
a.stat-card { display: block; color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
a.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: hsl(var(--primary)); }

a.bar-row { display: block; color: inherit; text-decoration: none; border-radius: 6px; padding: 4px; margin: 0 -4px 8px; transition: background .15s ease; }
a.bar-row:hover { background: hsl(var(--muted)); }

.list-divided li a.list-link { display: flex; align-items: center; gap: 12px; width: 100%; color: inherit; text-decoration: none; }
.list-divided li a.list-link:hover .item-title { color: hsl(var(--primary)); }
.list-link__chevron { width: 16px; height: 16px; flex-shrink: 0; color: hsl(var(--muted-foreground)); }

/* ---- Filter bar ---- */

.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.filter-bar .input-icon { flex: 1; min-width: 220px; }
.filter-bar .select { width: 200px; }
.filter-toggle { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 14px; color: hsl(var(--muted-foreground)); cursor: pointer; user-select: none; }
.filter-toggle input { width: 16px; height: 16px; accent-color: hsl(var(--primary)); cursor: pointer; }

/* ---- Empty state ---- */

.empty {
    text-align: center;
    padding: 48px 20px;
    color: hsl(var(--muted-foreground));
}
.empty i { width: 32px; height: 32px; opacity: 0.5; }
.empty__title { font-size: 15px; font-weight: 500; margin-top: 12px; color: hsl(var(--foreground)); }
.empty__desc { font-size: 13px; margin-top: 4px; }
.empty__action { margin-top: 16px; }

/* ---- Alerts ---- */

.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
.alert--success { background: hsl(152 50% 91%); color: hsl(159 70% 22%); border: 1px solid hsl(152 45% 78%); }
.alert--error   { background: hsl(var(--rose-50)); color: hsl(var(--rose-700)); border: 1px solid hsl(0 70% 85%); }
.alert--info    { background: hsl(214 95% 95%); color: hsl(221 60% 35%); border: 1px solid hsl(214 80% 85%); }
.alert--warning { background: hsl(var(--amber-50)); color: hsl(var(--amber-700)); border: 1px solid hsl(27 70% 82%); }
.alert ul { margin: 0; padding-left: 18px; }

/* ---- Impersonation ("view as" support session) ---- */
.impersonation-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 14px; margin-bottom: 20px;
    background: hsl(var(--amber-50)); color: hsl(var(--amber-700));
    border: 1px solid hsl(27 70% 82%); border-radius: 999px; font-size: 14px;
}
.impersonation-banner__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.impersonation-banner__label i { width: 16px; height: 16px; }
.impersonation-banner__exit {
    background: none; border: none; padding: 0; cursor: pointer;
    color: hsl(var(--amber-700)); font-weight: 700; font-size: 14px; text-decoration: underline;
}
.impersonation-banner__exit:hover { opacity: .8; }
/* In the top toolbar: fill the empty space, drop the block margin. */
.impersonation-banner--topbar { flex: 1; margin-bottom: 0; }
/* In-content copy is a mobile-only fallback (the desktop toolbar is hidden < 769px). */
.impersonation-banner--content { display: none; }
@media (max-width: 768px) {
    .impersonation-banner--content { display: flex; }
}
.link-impersonate {
    background: none; border: none; padding: 0 6px; cursor: pointer;
    color: hsl(var(--amber-700)); font-weight: 600; font-size: 13px; text-decoration: none;
}
.link-impersonate:hover { text-decoration: underline; }

/* ---- Utility ---- */

.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-muted { color: hsl(var(--muted-foreground)); }
.font-medium { font-weight: 500; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---- Tree (locations) ---- */

.tree { list-style: none; padding: 0; margin: 0; }
.tree li { padding: 8px 0; }
.tree .tree-children { list-style: none; padding-left: 24px; border-left: 1px dashed hsl(var(--border)); margin-top: 4px; }
.tree .tree-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px; }
.tree .tree-row:hover { background: hsl(var(--muted) / 0.6); }
.tree .tree-label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tree .tree-label i { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }

/* ---- Tabs ---- */
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 20px; }
.tab-bar a { padding: 10px 14px; font-size: 14px; color: hsl(var(--muted-foreground)); border-bottom: 2px solid transparent; }
.tab-bar a.is-active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); font-weight: 500; }

/* ---- Public asset page ---- */
.public-shell { min-height: 100vh; background: linear-gradient(135deg, hsl(152 46% 94%), hsl(var(--background)) 45%, hsl(155 68% 90%)); padding: 48px 20px; }
.public-card { max-width: 640px; margin: 0 auto; background: hsl(var(--card)); border-radius: 16px; box-shadow: var(--shadow-md); padding: 32px; }

/* ---- Modal ---- */
body.modal-open { overflow: hidden; }

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    padding: 24px;
    background: hsl(215 30% 14% / 0.55);
    backdrop-filter: blur(2px);
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
}
.modal-overlay.is-open { display: flex; }

.modal-dialog {
    width: 100%;
    max-width: 720px;
    margin: auto;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    animation: modal-in 0.15s ease-out;
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-form { display: flex; flex-direction: column; min-height: 0; }

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 12px;
}
.modal-title { font-size: 18px; font-weight: 600; color: hsl(var(--foreground)); }
.modal-subtitle { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 4px; }
.modal-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.modal-close i { width: 18px; height: 18px; }

.modal-body { padding: 12px 24px; overflow-y: auto; }

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid hsl(var(--card-border));
}

.field label .req { color: hsl(var(--destructive)); }

@media (max-width: 640px) {
    .modal-overlay { padding: 0; }
    .modal-dialog { max-width: none; min-height: 100vh; max-height: none; border-radius: 0; border: 0; margin: 0; }
}

/* ---- Toggle switch (theme-neutral; used for the per-user look & feel) ---- */

.theme-toggle-form { margin: 0; }
.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
    position: relative;
    width: 38px; height: 22px;
    border-radius: 9999px;
    background: hsl(var(--input));
    transition: background 0.15s ease;
}
.switch__thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease;
}
.switch input:checked + .switch__track { background: hsl(var(--primary)); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2px solid hsl(var(--ring) / 0.4); outline-offset: 2px; }

/* =====================================================================
   OPTIONAL "SmartPO" look & feel — applied only when the logged-in
   user's record selects it (<html data-theme="smartpo">). This re-points
   the same design tokens the whole UI already consumes, so the default
   HealthyAssets theme is left completely untouched.
   ===================================================================== */

[data-theme="smartpo"] {
    --background: 214 32% 96%;        /* cool enterprise grey */
    --foreground: 214 30% 18%;
    --border: 214 22% 86%;
    --card: 0 0% 100%;
    --card-foreground: 214 30% 18%;
    --card-border: 214 22% 88%;
    --sidebar: 0 0% 100%;            /* white nav, like SmartPO */
    --sidebar-foreground: 214 45% 30%;
    --sidebar-border: 214 22% 88%;
    --sidebar-primary: 211 72% 44%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 60% 95%;
    --sidebar-accent-foreground: 214 60% 30%;
    --primary: 211 72% 44%;          /* SmartPO blue */
    --primary-foreground: 0 0% 100%;
    --secondary: 210 30% 96%;
    --secondary-foreground: 214 45% 30%;
    --muted: 210 28% 95%;
    --muted-foreground: 214 14% 42%;
    --accent: 199 78% 45%;           /* teal accent from the chart */
    --accent-foreground: 0 0% 100%;
    --destructive: 0 70% 48%;
    --destructive-foreground: 0 0% 100%;
    --input: 214 20% 82%;
    --ring: 211 72% 48%;
    --brand-gradient: linear-gradient(120deg, #2f8fd6, #1b4f91);
    --teal-50: 199 70% 95%;
    --teal-700: 199 72% 34%;
    --sky-50: 211 70% 96%;
    --sky-700: 211 72% 40%;
    --radius: 0.25rem;               /* squarer, denser enterprise feel */

    /* Open Sans — SmartPO's actual UI/button typeface (loaded in the layout
       head when this theme is active), with a system-sans fallback. */
    --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-display: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* SmartPO's signature gradient section-header bars with bold blue titles */
[data-theme="smartpo"] .card__header {
    background: linear-gradient(180deg, hsl(210 35% 97%), hsl(210 30% 93%));
    border-bottom: 1px solid hsl(var(--card-border));
}
[data-theme="smartpo"] .card__title,
[data-theme="smartpo"] .page-header__title,
[data-theme="smartpo"] .modal-title { color: hsl(214 60% 32%); font-weight: 700; }

/* Denser, bordered cards reading as panels */
[data-theme="smartpo"] .card,
[data-theme="smartpo"] .stat-card { box-shadow: none; border-color: hsl(var(--card-border)); }

/* ---- Sidebar / left menu — SmartPO denser, squarer enterprise styling ---- */

/* Brand block: SmartPO-blue header panel with the reverse (light) lockup. The
   layout serves a dedicated transparent reverse asset for this theme so the
   icon interior (white heart + EKG mark) stays visible on the blue panel. */
[data-theme="smartpo"] .sidebar__brand {
    padding: 16px 18px;
    background: hsl(var(--primary));
    border-bottom: 1px solid hsl(var(--primary));
}

/* Menu list: slim gutters, no gaps between rows (rows divide on their own) */
[data-theme="smartpo"] .sidebar__nav { padding: 6px 8px; gap: 1px; }

/* Menu items: PT Sans Narrow nav typeface, more vertical padding, square corners */
[data-theme="smartpo"] .nav-link {
    padding: 10px 14px;
    border-radius: 0;
    font-family: 'PT Sans Narrow', var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: hsl(var(--sidebar-foreground));
}
[data-theme="smartpo"] .nav-link:hover { background: hsl(210 45% 95%); border-radius: 0; }

/* Icons take the SmartPO blue and a slightly larger, lighter stroke */
[data-theme="smartpo"] .nav-icon {
    width: 18px; height: 18px;
    stroke-width: 1.75;
    color: hsl(var(--primary));
}

/* Active item: full-width light-blue highlight with the accent rule on the right */
[data-theme="smartpo"] .nav-link.is-active {
    background: hsl(var(--sidebar-accent));
    color: hsl(var(--sidebar-accent-foreground));
    box-shadow: inset -3px 0 0 hsl(var(--primary));
    border-radius: 0;
    font-weight: 700;
}
[data-theme="smartpo"] .nav-link.is-active .nav-icon { color: hsl(var(--primary)); }

/* User footer: align padding/weight with the menu rhythm */
[data-theme="smartpo"] .sidebar__user { padding: 12px 14px; }
[data-theme="smartpo"] .user-name { font-weight: 600; }

/* Solid-blue primary buttons, outlined secondary — matches SmartPO controls.
   Force the Open Sans stack explicitly so button text matches SmartPO exactly. */
[data-theme="smartpo"] .btn { border-radius: 4px; font-family: var(--font-sans); }
[data-theme="smartpo"] .btn--secondary {
    background: #fff;
    color: hsl(var(--primary));
    border-color: hsl(var(--primary) / 0.5);
}
[data-theme="smartpo"] .btn--secondary:hover { background: hsl(210 60% 97%); }

/* Tabular, banded tables with a blue-grey header row */
[data-theme="smartpo"] .table thead { background: hsl(210 32% 94%); }
[data-theme="smartpo"] .table th { color: hsl(214 40% 38%); }
[data-theme="smartpo"] .table tbody tr:nth-child(even) { background: hsl(210 60% 98%); }
[data-theme="smartpo"] .table tbody tr:hover { background: hsl(206 60% 95%); }

/* Primary badges adopt the SmartPO blue automatically via tokens */
[data-theme="smartpo"] .badge--primary { background: hsl(var(--primary)); color: #fff; }

/* Inputs square up to match the rest of the chrome */
[data-theme="smartpo"] .input,
[data-theme="smartpo"] .select,
[data-theme="smartpo"] .textarea { border-radius: 4px; }

/* =============================================================================
   Kanban board (work orders) — themed via design tokens so HealthyAssets and
   SmartPO both work without overrides.
   ============================================================================= */
/* The board page makes its content region a full-height flex column so the
   board can fill 100% of the available space (see .board-page in board view). */
.kanban-board {
    display: flex;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    /* Fill the remaining height of the board page's flex column. */
    flex: 1 1 auto;
    min-height: 0;
    /* Scroll horizontally past the last column; vertical scroll lives in columns. */
    overflow-x: auto;
    overflow-y: hidden;
}
.kanban-column {
    flex: 0 0 280px;
    width: 280px;
    background: hsl(var(--muted) / 0.5);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.kanban-column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-weight: 600;
    border-bottom: 1px solid hsl(var(--border));
    flex: 0 0 auto;
}
.kanban-column__name { font-size: 0.9rem; }
.kanban-column__count {
    font-size: 0.75rem;
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border-radius: 999px;
    padding: 1px 8px;
}
.kanban-column__list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 60px;
    flex: 1;
}
.kanban-card {
    display: block;
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--card-border));
    border-radius: calc(var(--radius) - 0.2rem);
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    cursor: grab;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.kanban-card[hidden], .kanban-column[hidden] { display: none !important; }
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card.is-dragging { opacity: 0.5; }
.kanban-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.kanban-card__number { font-size: 0.72rem; font-weight: 600; color: hsl(var(--muted-foreground)); }
.kanban-card__title { font-size: 0.88rem; font-weight: 500; line-height: 1.25; }
.kanban-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: hsl(var(--muted-foreground));
}
.kanban-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.kanban-card__meta i { width: 13px; height: 13px; }

/* Toast notifications — slide in/out from the lower-right. */
.toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    min-width: 240px;
    max-width: 360px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    box-shadow: var(--shadow-md);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
}
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast--error   { background: hsl(var(--rose-50)); color: hsl(var(--rose-700)); border-color: hsl(0 70% 85%); }
.toast--success { background: hsl(152 50% 91%); color: hsl(159 70% 22%); border-color: hsl(152 45% 78%); }
.toast__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.toast__body { line-height: 1.35; }

/* Button styled as disabled but still clickable (so we can surface a reason). */
.btn--pseudo-disabled { opacity: 0.5; cursor: not-allowed; }

/* =============================================================================
   Top bar — hosts the sidebar-collapse and dark-mode toggles (upper right).
   Works identically under the default and SmartPO looks via design tokens.
   ============================================================================= */

.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 40px;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card));
}
.topbar__spacer { flex: 1; }
.topbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.topbar__btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.topbar__icon { width: 18px; height: 18px; }

/* Icon swap — each toggle carries both glyphs; CSS reveals the one matching state. */
.topbar__icon--collapsed,
.topbar__icon--dark { display: none; }
[data-sidebar="collapsed"] .topbar__icon--expanded { display: none; }
[data-sidebar="collapsed"] .topbar__icon--collapsed { display: inline-flex; }
[data-mode="dark"] .topbar__icon--light { display: none; }
[data-mode="dark"] .topbar__icon--dark { display: inline-flex; }

@media (max-width: 768px) {
    .topbar { display: none; }
}

/* =============================================================================
   Collapsible sidebar — icons-only rail driven by <html data-sidebar="collapsed">.
   ============================================================================= */

.brand-icon { display: none; width: 34px; height: 34px; }

[data-sidebar="collapsed"] .sidebar { width: 68px; }
[data-sidebar="collapsed"] .sidebar__brand { padding: 16px 0; justify-content: center; }
[data-sidebar="collapsed"] .brand-lockup { display: none; }
[data-sidebar="collapsed"] .brand-icon { display: block; }
[data-sidebar="collapsed"] .sidebar__nav { padding: 12px 10px; overflow: visible; }
[data-sidebar="collapsed"] .nav-link { justify-content: center; gap: 0; padding: 10px 0; }
[data-sidebar="collapsed"] .nav-link > span { display: none; }
[data-sidebar="collapsed"] .sidebar__user { flex-direction: column; padding: 12px 8px; gap: 8px; }
[data-sidebar="collapsed"] .sidebar__user .user-info { display: none; }

/* Hover tooltip revealing the button text while collapsed. */
[data-sidebar="collapsed"] .nav-link { position: relative; }
[data-sidebar="collapsed"] .nav-link::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: hsl(var(--foreground));
    color: hsl(var(--background));
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    z-index: 50;
    transition: opacity 0.12s ease;
}
[data-sidebar="collapsed"] .nav-link:hover::after { opacity: 1; }

/* =============================================================================
   Dark mode — repoints the same design tokens the whole UI consumes, so both
   the default HealthyAssets look and the SmartPO look get a dark variant.
   Applied when <html data-mode="dark"> is set (persisted in localStorage).
   ============================================================================= */

[data-mode="dark"] {
    --background: 165 33% 7%;
    --foreground: 150 14% 90%;
    --border: 165 14% 20%;
    --card: 166 28% 10%;
    --card-foreground: 150 14% 90%;
    --card-border: 165 14% 18%;
    --sidebar: 167 34% 8%;
    --sidebar-foreground: 150 14% 84%;
    --sidebar-border: 165 14% 17%;
    --sidebar-primary: 159 70% 44%;
    --sidebar-primary-foreground: 165 40% 8%;
    --sidebar-accent: 165 24% 15%;
    --sidebar-accent-foreground: 150 30% 92%;
    --primary: 159 68% 45%;
    --primary-foreground: 165 45% 7%;
    --secondary: 165 18% 16%;
    --secondary-foreground: 150 14% 88%;
    --muted: 165 16% 15%;
    --muted-foreground: 150 9% 62%;
    --accent: 27 68% 55%;
    --accent-foreground: 30 40% 10%;
    --destructive: 0 62% 52%;
    --destructive-foreground: 0 0% 100%;
    --input: 165 14% 24%;
    --ring: 159 68% 46%;
    /* Tint pairs flip to deep backgrounds with bright text for badges / stat chips. */
    --teal-50: 159 40% 16%;   --teal-700: 155 60% 66%;
    --amber-50: 27 45% 16%;   --amber-700: 33 82% 66%;
    --rose-50: 0 42% 18%;     --rose-700: 0 78% 74%;
    --sky-50: 215 42% 18%;    --sky-700: 210 78% 74%;
    --violet-50: 280 35% 20%; --violet-700: 280 68% 80%;
    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.4), 0 1px 3px 0 hsl(0 0% 0% / 0.3);
    --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.45), 0 2px 4px -2px hsl(0 0% 0% / 0.35);
}

/* Hardcoded light accents that tokens don't reach. */
[data-mode="dark"] .alert--error { border-color: hsl(0 40% 34%); }
[data-mode="dark"] .alert--warning { border-color: hsl(27 45% 32%); }
[data-mode="dark"] .toast--error { border-color: hsl(0 40% 34%); }
[data-mode="dark"] .toast--success {
    background: hsl(159 40% 14%);
    color: hsl(155 60% 70%);
    border-color: hsl(159 40% 28%);
}

/* ---- SmartPO dark variant — its own token set plus fixes for the SmartPO
   look's hardcoded light chrome (gradient headers, banded tables, etc.). ---- */

[data-theme="smartpo"][data-mode="dark"] {
    --background: 214 30% 9%;
    --foreground: 210 16% 88%;
    --border: 214 18% 22%;
    --card: 214 28% 12%;
    --card-foreground: 210 16% 88%;
    --card-border: 214 18% 20%;
    --sidebar: 214 30% 11%;
    --sidebar-foreground: 210 20% 82%;
    --sidebar-border: 214 18% 20%;
    --sidebar-primary: 211 70% 52%;
    --sidebar-accent: 214 30% 18%;
    --sidebar-accent-foreground: 210 40% 90%;
    --primary: 211 70% 54%;
    --primary-foreground: 214 40% 8%;
    --secondary: 214 22% 18%;
    --secondary-foreground: 210 16% 86%;
    --muted: 214 20% 17%;
    --muted-foreground: 214 12% 60%;
    --accent: 199 70% 50%;
    --input: 214 18% 26%;
    --ring: 211 70% 55%;
    --teal-50: 199 45% 18%;  --teal-700: 199 72% 70%;
    --sky-50: 211 45% 20%;   --sky-700: 211 78% 74%;
}
[data-theme="smartpo"][data-mode="dark"] .card__header {
    background: linear-gradient(180deg, hsl(214 26% 15%), hsl(214 28% 12%));
}
[data-theme="smartpo"][data-mode="dark"] .card__title,
[data-theme="smartpo"][data-mode="dark"] .page-header__title,
[data-theme="smartpo"][data-mode="dark"] .modal-title { color: hsl(211 72% 68%); }
[data-theme="smartpo"][data-mode="dark"] .nav-link:hover { background: hsl(214 30% 16%); }
[data-theme="smartpo"][data-mode="dark"] .btn--secondary {
    background: hsl(214 26% 14%);
    color: hsl(211 72% 68%);
}
[data-theme="smartpo"][data-mode="dark"] .btn--secondary:hover { background: hsl(214 26% 18%); }
[data-theme="smartpo"][data-mode="dark"] .table thead { background: hsl(214 26% 15%); }
[data-theme="smartpo"][data-mode="dark"] .table th { color: hsl(210 30% 68%); }
[data-theme="smartpo"][data-mode="dark"] .table tbody tr:nth-child(even) { background: hsl(214 26% 12%); }
[data-theme="smartpo"][data-mode="dark"] .table tbody tr:hover { background: hsl(214 30% 17%); }