* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; -webkit-text-size-adjust: 100%; }
body {
background: var(--fb-color-bg);
color: var(--fb-color-text);
font-family: var(--fb-font-family-base);
font-size: var(--fb-font-size-md);
line-height: var(--fb-line-height-base);
}
a { color: var(--fb-color-primary); text-decoration: none; }
a:hover { color: var(--fb-color-primary-dark); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
/* ── Brand mark (SVG) ── */
.brand-mark {
width: 36px; height: 36px;
flex: 0 0 auto; display: block;
}
/* On ink sidebar: lighten the container rect so the F reads */
.admin-sidebar .brand-mark .mark-bg { fill: rgba(255, 255, 255, 0.13); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: var(--fb-font-weight-semibold); color: var(--fb-color-text); text-decoration: none; }
.brand-copy strong { display: block; font-size: 17px; line-height: 1.1; letter-spacing: -0.3px; }
.brand-copy span { display: block; font-size: 13px; color: var(--fb-color-text-muted); }
/* ── Layout shells ── */
.app-shell { min-height: 100vh; }
.container { width: min(var(--fb-container-width), calc(100% - 32px)); margin: 0 auto; }
/* ── Public header ── */
.public-page { padding: 0 0 56px; }
.public-header {
position: sticky; top: 0; z-index: 20;
backdrop-filter: saturate(120%) blur(6px);
background: rgba(245, 244, 240, 0.92);
border-bottom: 1px solid var(--fb-color-border);
}
.public-header-inner {
width: min(var(--fb-container-width), calc(100% - 32px));
margin: 0 auto;
min-height: 72px;
display: flex; align-items: center; gap: 18px;
}
.public-nav { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.public-nav-link { font-size: 14px; font-weight: 500; color: var(--fb-color-text-muted); text-decoration: none; padding: 6px 4px; }
.public-nav-link:hover { color: var(--fb-color-text); }
.phone-link { font-size: 13px; font-weight: 600; color: var(--fb-color-text-muted); text-decoration: none; white-space: nowrap; }
.phone-link:hover { color: var(--fb-color-primary); }
/* ── Admin area overrides ── */
.area-admin { background: linear-gradient(180deg, #F0F0F5 0%, #F5F4F0 100%); }
.area-admin .sidebar { background: #141A2E; border-right-color: rgba(255,255,255,.08); color: var(--fb-color-text-inverse); }
.area-admin .sidebar-head { border-bottom-color: rgba(255,255,255,.08); }
.area-admin .sidebar .brand,
.area-admin .sidebar .brand-copy strong { color: var(--fb-color-text-inverse); }
.area-admin .sidebar .brand-copy span,
.area-admin .sidebar .sidebar-label { color: rgba(245,244,240,.65); }
.area-admin .sidebar .nav-link { color: rgba(245,244,240,.90); }
.area-admin .sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.area-admin .sidebar .nav-link.active {
background: rgba(59,75,208,.22);
color: #fff;
border-color: rgba(59,75,208,.35);
box-shadow: inset 0 0 0 1px rgba(59,75,208,.25);
}
.area-admin .sidebar .sidebar-footer { border-top-color: rgba(255,255,255,.08); }
.area-admin .sidebar .user-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.area-admin .sidebar .user-chip span { color: rgba(245,244,240,.65); }
.area-admin .sidebar .button.ghost {
background: rgba(255,255,255,.04);
color: var(--fb-color-text-inverse);
border-color: rgba(255,255,255,.16);
}
.area-admin .sidebar .button.ghost:hover { background: rgba(255,255,255,.08); }
.area-admin .sidebar .button.secondary {
background: rgba(255,255,255,.07);
color: var(--fb-color-text-inverse);
border-color: rgba(255,255,255,.16);
}
.area-admin .sidebar .button.secondary:hover { background: rgba(255,255,255,.13); }
.area-admin .content-area { background: transparent; }
.area-admin .app-topbar { background: rgba(255,255,255,.88); }
/* ── Material Symbols ── */
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
font-size: 20px; line-height: 1; display: inline-block;
flex: 0 0 auto; user-select: none; vertical-align: middle;
}
/* ── App sidebar & nav ── */
.app-layout { display: grid; grid-template-columns: var(--fb-sidebar-width) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .18s ease; }
.app-layout[data-collapsed] { grid-template-columns: 68px minmax(0, 1fr); }
.sidebar {
background: var(--fb-color-surface);
border-right: 1px solid var(--fb-color-border);
padding: 20px 14px;
position: sticky; top: 0; height: 100vh; overflow: auto;
transition: width .18s ease, padding .18s ease;
width: var(--fb-sidebar-width);
}
.sidebar.admin-sidebar { background: #141A2E; color: var(--fb-color-text-inverse); }
.sidebar-head { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.sidebar-head .brand { flex: 1; min-width: 0; overflow: hidden; }
.sidebar-title { font-size: 13px; color: var(--fb-color-text-muted); margin-top: 8px; }
.sidebar-section { margin-bottom: 20px; }
.sidebar-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fb-color-text-muted); margin-bottom: 6px; padding: 0 4px; }
.sidebar-nav { display: grid; gap: 2px; }
/* Nav link structure */
.nav-link {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 9px 10px; border-radius: 10px; color: var(--fb-color-text);
border: 1px solid transparent; text-decoration: none;
}
.nav-link:hover { background: var(--fb-color-hover-overlay); color: var(--fb-color-text); }
.nav-link.active {
background: rgba(59, 75, 208, 0.08);
color: var(--fb-color-primary-dark);
font-weight: var(--fb-font-weight-semibold);
border-color: rgba(59, 75, 208, 0.14);
}
.nav-link.active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.nav-link.muted { color: var(--fb-color-text-muted); }
.nav-link-inner { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.nav-link-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.nav-meta { font-size: 12px; color: var(--fb-color-text-muted); }
/* Settings submenu */
.nav-group { display: grid; gap: 2px; }
.nav-submenu-toggle {
width: 100%; text-align: left; cursor: pointer;
background: none; border: 1px solid transparent; border-radius: 10px;
color: var(--fb-color-text); display: flex; align-items: center;
justify-content: space-between; padding: 9px 10px; font-size: inherit; gap: 8px;
}
.nav-submenu-toggle:hover { background: var(--fb-color-hover-overlay); }
.nav-submenu-toggle.active {
background: rgba(59,75,208,.08); color: var(--fb-color-primary-dark);
font-weight: var(--fb-font-weight-semibold); border-color: rgba(59,75,208,.14);
}
.nav-submenu-toggle.active .material-symbols-outlined:not(.nav-chevron) { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.nav-chevron { font-size: 18px !important; transition: transform .18s ease; opacity: .55; }
.nav-group.open .nav-chevron { transform: rotate(180deg); }
.nav-submenu { display: none; padding-left: 6px; padding-top: 2px; }
.nav-group.open .nav-submenu { display: grid; gap: 1px; }
.nav-link.sub { padding: 7px 10px; }
.nav-link.sub .material-symbols-outlined { font-size: 18px; }
/* Admin sidebar submenu/nav overrides */
.area-admin .nav-submenu-toggle { color: rgba(245,244,240,.90); }
.area-admin .nav-submenu-toggle:hover { background: rgba(255,255,255,.07); color: #fff; }
.area-admin .nav-submenu-toggle.active { background: rgba(59,75,208,.22); color: #fff; border-color: rgba(59,75,208,.35); box-shadow: inset 0 0 0 1px rgba(59,75,208,.25); }
/* Sidebar toggle button */
.sidebar-toggle-btn {
background: none; border: 1px solid transparent; border-radius: 8px;
padding: 5px; cursor: pointer; color: inherit; flex: 0 0 auto;
display: flex; align-items: center; opacity: .7;
}
.sidebar-toggle-btn:hover { background: var(--fb-color-hover-overlay); opacity: 1; }
.sidebar-toggle-btn .material-symbols-outlined { font-size: 20px; }
.area-admin .sidebar-toggle-btn:hover { background: rgba(255,255,255,.07); }
/* Collapsed sidebar */
.sidebar[data-collapsed] { width: 68px; padding: 20px 8px; overflow: hidden; }
.sidebar[data-collapsed] .brand-copy { display: none; }
.sidebar[data-collapsed] .sidebar-label { display: none; }
.sidebar[data-collapsed] .nav-link-label { display: none; }
.sidebar[data-collapsed] .nav-chevron { display: none; }
.sidebar[data-collapsed] .nav-group.open .nav-submenu { display: none; }
.sidebar[data-collapsed] .nav-link,
.sidebar[data-collapsed] .nav-submenu-toggle { justify-content: center; padding: 9px; }
.sidebar[data-collapsed] .nav-link-inner { justify-content: center; gap: 0; }
.sidebar[data-collapsed] .user-chip { display: none; }
.sidebar[data-collapsed] .btn-label { display: none; }
.sidebar[data-collapsed] .sidebar-footer .button { padding: 9px; min-height: 38px; justify-content: center; }
.sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--fb-color-border); display: grid; gap: 8px; }
.user-chip {
display: flex; flex-direction: column; gap: 4px;
padding: 12px; border-radius: 12px; background: var(--fb-color-surface-alt);
border: 1px solid var(--fb-color-border);
}
.user-chip strong { font-size: 14px; }
.user-chip span { color: var(--fb-color-text-muted); font-size: 13px; }
.content-area { min-width: 0; }
.app-topbar {
display: flex; align-items: center; gap: 16px;
padding: 18px 24px; border-bottom: 1px solid var(--fb-color-border);
background: rgba(255,255,255,.85); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 15;
}
.app-topbar .title { font-size: 14px; color: var(--fb-color-text-muted); }
.app-topbar .spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page { padding: 24px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-title { margin: 0; font-size: clamp(26px, 4vw, 34px); line-height: 1.05; letter-spacing: -0.5px; }
.page-subtitle { margin: 6px 0 0; color: var(--fb-color-text-muted); }
/* ── Public / landing ── */
.public-shell { display: grid; gap: 32px; }
.hero { padding: 56px 0 12px; }
.hero h1 { margin: 0 0 14px; font-size: clamp(36px, 6vw, 54px); line-height: 1.05; max-width: 880px; letter-spacing: -1px; }
.hero p { margin: 0; max-width: 760px; color: var(--fb-color-text-muted); font-size: 18px; }
.hero-kicker {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px; border-radius: 999px;
background: rgba(59, 75, 208, 0.08);
color: var(--fb-color-primary-dark);
font-size: 13px; font-weight: 600;
}
.hero-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: 24px; margin-top: 28px; }
.hero-panel { background: var(--fb-color-surface); border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-lg); padding: 28px; box-shadow: var(--fb-shadow-sm); }
.hero-panel.accent { background: linear-gradient(180deg, rgba(59,75,208,.05), rgba(255,255,255,.98)); }
.hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.hero-metric { padding: 16px; border: 1px solid var(--fb-color-border); border-radius: 14px; background: rgba(255,255,255,.72); }
.hero-metric strong { display: block; font-size: 26px; line-height: 1.05; margin-bottom: 6px; }
.hero-metric span { color: var(--fb-color-text-muted); font-size: 14px; }
.hero-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.hero-benefit { border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-md); background: rgba(255,255,255,.7); padding: 16px; }
.hero-benefit strong { display: block; margin-bottom: 6px; }
.eyebrow {
margin: 0 0 8px;
color: var(--fb-color-primary-dark);
font-size: 11px; text-transform: uppercase;
letter-spacing: .12em; font-weight: 700;
}
.section-card { padding: 24px; border: 1px solid var(--fb-color-border); border-radius: 16px; background: var(--fb-color-surface); box-shadow: var(--fb-shadow-sm); }
.public-grid-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.step-card { padding: 20px; border-radius: 16px; border: 1px solid var(--fb-color-border); background: var(--fb-color-surface-alt); }
.step-card .step-no {
display: inline-flex; width: 32px; height: 32px;
align-items: center; justify-content: center;
border-radius: 999px;
background: rgba(59, 75, 208, 0.10);
color: var(--fb-color-primary-dark);
font-weight: 700; margin-bottom: 12px;
}
.public-cta { padding: 24px; border-radius: 18px; background: linear-gradient(180deg, rgba(59,75,208,.06), rgba(255,255,255,.96)); border: 1px solid var(--fb-color-border); box-shadow: var(--fb-shadow-sm); }
.public-cta .actions { margin-top: 16px; }
/* ── Request / signup form ── */
.request-panel { display: grid; gap: 16px; }
.request-panel .request-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.request-card { border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-lg); background: var(--fb-color-surface); padding: 18px; box-shadow: var(--fb-shadow-sm); }
.request-card .meta { display: grid; gap: 6px; color: var(--fb-color-text-muted); font-size: 14px; }
.request-card .meta strong { color: var(--fb-color-text); font-size: 18px; }
.request-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.request-form-grid .wide { grid-column: 1 / -1; }
.notice-box {
border: 1px solid rgba(59, 75, 208, 0.14);
border-radius: var(--fb-radius-md);
background: rgba(59, 75, 208, 0.05);
padding: 14px;
}
/* ── Admin hero ── */
.admin-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin-bottom: 18px; }
.admin-hero-card { padding: 24px; border-radius: 18px; border: 1px solid var(--fb-color-border); background: var(--fb-color-surface); box-shadow: var(--fb-shadow-sm); }
.admin-hero-card.is-brand { background: linear-gradient(180deg, rgba(59,75,208,.05), rgba(255,255,255,.97)); }
.admin-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.admin-stat { padding: 16px; border-radius: 14px; border: 1px solid var(--fb-color-border); background: var(--fb-color-surface-alt); }
.admin-stat strong { display: block; font-size: 28px; line-height: 1.05; margin-top: 6px; }
.admin-list { display: grid; gap: 12px; }
.tenant-list-card { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(4, minmax(0,.6fr)) auto; gap: 14px; align-items: center; padding: 18px; border-radius: 16px; border: 1px solid var(--fb-color-border); background: var(--fb-color-surface); }
.tenant-meta { display: grid; gap: 4px; }
.tenant-meta strong { font-size: 18px; }
.tenant-kv { display: grid; gap: 4px; }
.tenant-kv .label { color: var(--fb-color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.admin-highlight {
border-left: 3px solid var(--fb-color-primary);
background: linear-gradient(180deg, rgba(59,75,208,.04), rgba(255,255,255,.96));
}
.assignment-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
/* ── Preview board ── */
.preview-board { display: grid; gap: 16px; }
.preview-window { border: 1px solid var(--fb-color-border); border-radius: 18px; overflow: hidden; background: var(--fb-color-surface); box-shadow: var(--fb-shadow-sm); }
.preview-window-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--fb-color-border); background: var(--fb-color-surface-alt); }
.preview-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--fb-color-border-strong); }
.preview-window-body { padding: 22px; display: grid; gap: 18px; background: var(--fb-color-bg); }
.preview-hero-card { padding: 22px; border-radius: 18px; border: 1px solid var(--fb-color-border); background: var(--fb-color-surface); }
.preview-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.preview-mini-card { padding: 16px; border-radius: 14px; border: 1px solid var(--fb-color-border); background: var(--fb-color-surface); }
/* ── Info list ── */
.info-list { display: grid; gap: 10px; }
.info-row { display: flex; gap: 12px; align-items: flex-start; }
.info-row .dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 999px; background: var(--fb-color-primary); flex: 0 0 auto; }
/* ── Cards, grids, utilities ── */
.card, .feature-card, .stat {
background: var(--fb-color-surface);
border: 1px solid var(--fb-color-border);
border-radius: var(--fb-radius-lg);
padding: 20px;
box-shadow: var(--fb-shadow-sm);
}
.card h1, .card h2, .card h3,
.feature-card h1, .feature-card h2, .feature-card h3 { margin: 0 0 12px; }
.card-muted { background: var(--fb-color-surface-alt); }
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack { display: grid; gap: 14px; }
.split { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.mt { margin-top: 18px; }
.mb { margin-bottom: 18px; }
.right { text-align: right; }
.muted { color: var(--fb-color-text-muted); }
/* ── Buttons ── */
.button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
background: var(--fb-color-primary); color: #FFFFFF;
font-weight: var(--fb-font-weight-semibold); font-size: 14px; letter-spacing: -0.1px;
}
.button:hover { background: var(--fb-color-primary-dark); color: #FFFFFF; }
.button.secondary { background: var(--fb-color-surface); color: var(--fb-color-text); border-color: var(--fb-color-border); }
.button.secondary:hover { background: var(--fb-color-surface-alt); }
.button.ghost { background: transparent; color: var(--fb-color-text); border-color: var(--fb-color-border); }
.button.ghost:hover { background: var(--fb-color-surface-alt); }
.button.danger { background: var(--fb-color-danger); color: #FFFFFF; }
.button.warn { background: var(--fb-color-warning); color: #FFFFFF; }
.button.small { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
/* ── Forms ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--fb-color-text-muted); font-weight: var(--fb-font-weight-semibold); letter-spacing: .01em; }
.field input, .field select, .field textarea {
width: 100%; min-height: 44px; padding: 10px 13px;
border: 1px solid var(--fb-color-border); border-radius: 10px;
background: var(--fb-color-surface); color: var(--fb-color-text);
transition: border-color .15s, box-shadow .15s;
}
.field input:hover, .field select:hover { border-color: var(--fb-color-border-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--fb-color-primary);
box-shadow: 0 0 0 3px var(--fb-color-focus-ring);
}
.field textarea { min-height: 118px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--fb-color-text-muted); opacity: .7; }
/* ── Flash messages ── */
.flash { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; border: 1px solid transparent; }
.flash.success { background: rgba(46,125,90,.09); color: var(--fb-color-success); border-color: rgba(46,125,90,.18); }
.flash.error { background: rgba(181,71,71,.09); color: var(--fb-color-danger); border-color: rgba(181,71,71,.18); }
.flash.info { background: rgba(62,110,142,.09); color: var(--fb-color-info); border-color: rgba(62,110,142,.18); }
/* ── Stats / KPIs ── */
.stats, .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat .label { display: block; color: var(--fb-color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.stat strong { display: block; margin-top: 8px; font-size: 30px; line-height: 1.05; letter-spacing: -1px; }
/* ── Badges ── */
.badge {
display: inline-flex; align-items: center; padding: 4px 9px; border-radius: var(--fb-radius-pill);
background: rgba(59,75,208,.08); color: var(--fb-color-primary-dark);
font-size: 12px; font-weight: 700; letter-spacing: .01em;
}
.badge.ok { background: rgba(46,125,90,.12); color: var(--fb-color-success); }
.badge.warn { background: rgba(183,121,31,.14); color: var(--fb-color-warning); }
.badge.danger { background: rgba(181,71,71,.12); color: var(--fb-color-danger); }
/* ── Code / mono ── */
.code {
font-family: var(--fb-font-family-mono);
background: var(--fb-color-surface-alt); padding: 2px 6px; border-radius: 6px;
color: var(--fb-color-text); font-size: 13px;
}
/* ── Empty state ── */
.empty {
padding: 24px; text-align: center; color: var(--fb-color-text-muted);
border: 1px dashed var(--fb-color-border-strong); border-radius: 12px;
background: rgba(255,255,255,.5);
}
/* ── Tables ── */
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 10px; border-bottom: 1px solid var(--fb-color-border); text-align: left; vertical-align: top; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fb-color-text-muted); background: var(--fb-color-surface-alt); }
.table tbody tr:hover td { background: rgba(59, 75, 208, 0.03); }
/* ── Monitor / logs ── */
.monitor-log {
background: #141A2E; color: #E8E9F0; border-radius: 12px; padding: 14px;
max-height: 260px; overflow: auto;
font-family: var(--fb-font-family-mono); font-size: 13px; white-space: pre-wrap;
}
/* ── Provider panels (mail settings) ── */
.provider-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.provider-panel.active {
border: 1px solid rgba(59,75,208,.28);
box-shadow: 0 0 0 3px rgba(59,75,208,.08);
}
.provider-test-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-top: 10px; }
.provider-test-row form { display: contents; }
/* ── PDF / invoice ── */
.pdf-preview { border: 1px solid var(--fb-color-border); border-radius: 12px; padding: 18px; background: var(--fb-color-surface); }
.invoice-item-row { display: grid; grid-template-columns: 3fr 1fr 1fr 1.2fr auto; gap: 10px; align-items: end; }
/* ── Misc ── */
.footer-note { margin-top: 10px; font-size: 14px; color: var(--fb-color-text-muted); }
.mobile-stack { display: grid; gap: 10px; }
.onboarding-banner {
background: rgba(59,75,208,.06); border: 1px solid rgba(59,75,208,.16);
border-radius: 14px; padding: 14px; color: var(--fb-color-text); margin-bottom: 16px;
}
.sidebar-toggle { display: none; }
/* ── Public footer ── */
.public-footer { border-top: 1px solid var(--fb-color-border); padding: 28px 0; background: var(--fb-color-surface); }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand strong { font-size: 15px; }
.footer-brand .muted { font-size: 13px; margin-top: 3px; }
.footer-phone {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 600; color: var(--fb-color-primary); font-size: 14px; margin-top: 8px;
text-decoration: none;
}
.footer-phone .material-symbols-outlined { font-size: 16px; }
.footer-phone:hover { color: var(--fb-color-primary-dark); }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-top: 4px; }
.footer-links a { font-size: 13px; color: var(--fb-color-text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--fb-color-text); }
/* ── Responsive ── */
@media (max-width: 1100px) {
.app-layout { grid-template-columns: 1fr; }
.sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--fb-color-border); }
.sidebar-toggle { display: inline-flex; }
}
@media (max-width: 980px) {
.grid.cols-2, .grid.cols-3, .stats, .kpis, .provider-panels,
.hero-grid, .assignment-grid, .admin-hero { grid-template-columns: 1fr; }
.invoice-item-row { grid-template-columns: 1fr 1fr; }
.invoice-item-row > *:first-child { grid-column: 1 / -1; }
.page-header, .split { flex-direction: column; align-items: flex-start; }
.admin-hero { margin-bottom: 12px; }
}
@media (max-width: 980px) {
.admin-hero, .public-grid-steps, .preview-card-grid, .hero-metrics,
.request-panel .request-grid, .hero-benefits, .request-form-grid, .provider-test-row { grid-template-columns: 1fr; }
.tenant-list-card { grid-template-columns: 1fr; }
.tenant-list-card form { width: 100%; }
}
@media (max-width: 760px) {
.public-header-inner, .container { width: min(var(--fb-container-width), calc(100% - 20px)); }
.public-header-inner { min-height: auto; padding: 14px 0; flex-wrap: wrap; }
.public-nav { width: 100%; margin-left: 0; }
.public-nav .button { flex: 1 1 auto; }
.page { padding: 18px 14px 36px; }
.app-topbar { padding: 14px; flex-wrap: wrap; }
.topbar-actions { width: 100%; }
.button, .button.small { min-height: 44px; }
.table-wrap { overflow: visible; }
.table, .table thead, .table tbody, .table tr, .table th, .table td { display: block; width: 100%; }
.table thead { display: none; }
.table tbody { display: grid; gap: 12px; }
.table tr { border: 1px solid var(--fb-color-border); border-radius: 12px; background: var(--fb-color-surface); overflow: hidden; }
.table td { border-bottom: 1px solid var(--fb-color-border); }
.table td:last-child { border-bottom: 0; }
}