/*
|--------------------------------------------------------------------------
| Lease View — Design Tokens & Component Styles
|--------------------------------------------------------------------------
|
| Register this file in your Filament panel provider or custom theme.
| All values are extracted from the original inline styles so the
| rendered page is pixel-identical.
|
| HOW TO LOAD:
| Option A — Panel provider renderHook (quickest):
| FilamentView::registerRenderHook(
| PanelsRenderHook::HEAD_END,
| fn () => ''
| );
|
| Option B — Filament custom theme (preferred long-term):
| @import '../../css/lease-view.css'; in your theme.css
|
*/
/*
|--------------------------------------------------------------------------
| Lease View — V2 Design Tokens (Earth Tones)
|--------------------------------------------------------------------------
*/
/* ── Fonts ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');
/* ── Design Tokens ────────────────────────────── */
:root {
/* Typography */
--lv-font-display: 'DM Sans', -apple-system, sans-serif;
--lv-font-body: 'DM Sans', -apple-system, sans-serif;
/* Surfaces */
--lv-bg-page: #F6F5F2; /* Warm page background */
--lv-bg-card: #FFFFFF;
--lv-bg-muted: #F0EEEA;
--lv-bg-header: rgba(246, 245, 242, 0.95);
/* Borders */
--lv-border: #E2DED8;
--lv-border-light: #F0EEEA;
--lv-border-faint: #F6F5F2;
/* Text */
--lv-text-primary: #1C1B18;
--lv-text-secondary:#635E54;
--lv-text-muted: #9A9488;
--lv-text-faint: #9A9488;
--lv-text-dim: #635E54;
/* Semantic Palette (Mapped to React Prototype) */
--lv-success: #27724A;
--lv-success-light: #ECF5F0;
--lv-success-border:#B3DAC2;
--lv-success-dot: #27724A;
--lv-warning: #A67B0A;
--lv-warning-light: #FFF9EA;
--lv-warning-border:#EDD99A;
--lv-warning-dot: #A67B0A;
--lv-warning-dark: #A67B0A;
--lv-danger: #BE3A1B;
--lv-danger-light: #FEF1ED;
--lv-danger-border: #F3C1B4;
--lv-danger-dot: #BE3A1B;
--lv-info: #34689A;
--lv-info-light: #EDF3FA;
--lv-info-border: #B3CDE6;
/* Primary Accent (Forest Green) */
--lv-text-primary: #1C1B18; /* Text stays dark */
--lv-accent: #2B5A3B; /* Buttons/Tabs use this */
--lv-primary: #2B5A3B; /* Message bubbles, badges, active indicators */
--lv-neutral-light: #F0EEEA; /* Closed/archived status backgrounds */
/* Shadows */
--lv-shadow-card: 0 2px 8px rgba(28, 27, 24, 0.04);
--lv-shadow-dropdown: 0 8px 24px rgba(28, 27, 24, 0.08);
--lv-shadow-tab: 0 1px 2px rgba(28, 27, 24, 0.05);
/* Radii */
--lv-radius-sm: 6px;
--lv-radius-md: 8px;
--lv-radius-lg: 10px;
--lv-radius-xl: 12px;
--lv-radius-2xl: 16px;
--lv-radius-full: 999px;
/* Spacing */
--lv-card-padding: 20px;
--lv-page-max: 1180px; /* Matching React width */
--lv-page-px: 20px;
--lv-sidebar-width: 280px;
--lv-grid-gap: 18px;
}
/* ── Base Container ───────────────────────────── */
.lv-page {
min-height: 100vh;
background: var(--lv-bg-page);
font-family: var(--lv-font-body);
color: var(--lv-text-primary);
}
.lv-portal-page {
padding-bottom: 0;
}
.lv-portal-page .lv-header {
position: static;
}
.lv-container {
max-width: var(--lv-page-max);
margin: 0 auto;
padding-left: var(--lv-page-px);
padding-right: var(--lv-page-px);
}
/* ── Sticky Header ────────────────────────────── */
.lv-header {
position: sticky;
top: 0;
z-index: 20;
background: var(--lv-bg-header);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--lv-border);
}
.lv-header-inner {
padding-top: 12px;
padding-bottom: 0;
}
.lv-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* ── Title ────────────────────────────────────── */
.lv-title {
font-size: 19px;
font-weight: 700;
font-family: var(--lv-font-display);
margin: 0;
letter-spacing: -0.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 720px;
}
.lv-subtitle {
font-size: 11.5px;
color: var(--lv-text-faint);
margin-top: 2px;
display: flex;
align-items: center;
gap: 5px;
}
.lv-subtitle .lv-dot {
opacity: 0.4;
}
/* ── Font Display helper ──────────────────────── */
.lv-font-display {
font-family: var(--lv-font-display);
}
/* ── Status Badge ─────────────────────────────── */
.lv-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--lv-radius-full);
font-size: 11px;
font-weight: 600;
border: 1px solid;
cursor: pointer;
}
.lv-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
}
/* ── Dropdown (shared for status + actions) ───── */
.lv-dropdown {
position: absolute;
top: calc(100% + 5px);
background: var(--lv-bg-card);
border: 1px solid var(--lv-neutral-border);
border-radius: var(--lv-radius-lg);
padding: 5px;
box-shadow: var(--lv-shadow-dropdown);
z-index: 50;
display: flex;
flex-direction: column;
gap: 2px;
}
.lv-dropdown--left { left: 0; }
.lv-dropdown--right { right: 0; }
.lv-dropdown--wide { min-width: 190px; gap: 1px; }
.lv-dropdown--narrow { min-width: 120px; }
.lv-dropdown-item {
padding: 6px 10px;
border-radius: var(--lv-radius-sm);
border: none;
background: transparent;
cursor: pointer;
font-size: 12px;
font-weight: 600;
text-align: left;
color: var(--lv-text-secondary);
}
.lv-dropdown-item:hover {
background: var(--lv-bg-muted);
}
.lv-dropdown-item--action {
display: flex;
align-items: center;
padding: 7px 10px;
font-weight: 400;
text-decoration: none;
}
.lv-dropdown-item--danger {
color: var(--lv-danger);
}
.lv-dropdown-item--danger:hover {
background: var(--lv-danger-light);
}
/* ── Action Buttons ───────────────────────────── */
.lv-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.lv-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: var(--lv-radius-lg);
font-size: 12px;
font-weight: 600;
font-family: var(--lv-font-display);
text-decoration: none;
cursor: pointer;
border: 1px solid;
line-height: 1;
}
.lv-btn--primary {
background: var(--lv-text-primary);
color: #fff;
border-color: var(--lv-text-primary);
}
.lv-btn--primary:hover {
background: var(--lv-text-secondary);
}
.lv-btn--secondary {
background: var(--lv-bg-muted) !important;
color: var(--lv-text-primary) !important;
border-color: var(--lv-border) !important;
}
.lv-btn--secondary:hover {
background: var(--lv-bg-card) !important;
}
.lv-btn--icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: var(--lv-radius-lg);
background: var(--lv-bg-card);
border: 1px solid var(--lv-neutral-border);
cursor: pointer;
}
.lv-btn--icon:hover {
background: var(--lv-bg-muted);
}
/* ── Chip Row ─────────────────────────────────── */
.lv-chip-row {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.lv-chips {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.lv-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--lv-radius-full);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
border: 1px solid;
}
.lv-chip-label {
opacity: 0.7;
}
.lv-portal-row {
display: flex;
gap: 12px;
font-size: 11px;
color: var(--lv-text-muted);
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
}
.lv-portal-item {
display: flex;
align-items: center;
gap: 4px;
}
.lv-portal-status-row {
padding: 2px 0;
}
.lv-portal-label {
font-weight: 600;
}
.lv-portal-label--ok { color: var(--lv-text-muted); }
.lv-portal-label--warn { color: var(--lv-warning); }
.lv-portal-value--ok { color: var(--lv-text-dim); }
.lv-portal-value--warn { color: var(--lv-warning); }
/* ── Tab Bar ──────────────────────────────────── */
.lv-tabs {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: -1px;
}
.lv-tab {
padding: 8px 16px;
border-radius: var(--lv-radius-lg);
font-size: 12.5px;
border: 1px solid;
cursor: pointer;
transition: all 0.15s ease;
line-height: 1;
white-space: nowrap;
}
.lv-tab--active {
background: var(--lv-text-primary);
color: #fff;
border-color: var(--lv-text-primary);
font-weight: 700;
box-shadow: var(--lv-shadow-tab);
}
.lv-tab--inactive {
background: var(--lv-bg-card);
color: var(--lv-text-dim);
border-color: var(--lv-neutral-border);
font-weight: 600;
}
.lv-tab--inactive:hover {
background: var(--lv-bg-muted);
}
.lv-lease-view-page .lv-tabs {
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
border-bottom: 1px solid var(--lv-border);
margin-bottom: 18px;
scrollbar-width: none;
}
.lv-lease-view-page .lv-tabs::-webkit-scrollbar {
display: none;
}
.lv-lease-view-page .lv-tab {
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--lv-text-muted);
display: inline-flex;
align-items: center;
padding: 11px 12px 10px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.lv-lease-view-page .lv-tab--active {
background: transparent;
border-bottom-color: var(--lv-primary);
box-shadow: none;
color: var(--lv-primary);
font-weight: 700;
}
.lv-lease-view-page .lv-tab--inactive {
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
color: var(--lv-text-muted);
}
.lv-lease-view-page .lv-tab--inactive:hover {
background: transparent;
color: var(--lv-text-primary);
}
.lv-portal-bottom-nav {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
align-items: stretch;
justify-content: space-around;
gap: 4px;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
background: rgba(247, 243, 236, 0.94);
backdrop-filter: blur(14px);
border-top: 1px solid var(--lv-border);
box-shadow: 0 -10px 30px rgba(30, 24, 16, 0.08);
}
.lv-portal-bottom-nav__item {
flex: 1;
min-width: 0;
border-radius: 16px;
padding: 8px 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--lv-text-dim);
border: 1px solid transparent;
transition: all 0.15s ease;
}
.lv-portal-bottom-nav__item:hover {
background: var(--lv-bg-card);
}
.lv-portal-bottom-nav__item--active {
background: var(--lv-text-primary);
color: #fff;
border-color: var(--lv-text-primary);
box-shadow: var(--lv-shadow-tab);
}
.lv-portal-bottom-nav__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.lv-portal-bottom-nav__label {
font-size: 10px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* ── Main Layout ──────────────────────────────── */
.lv-body {
padding: var(--lv-grid-gap) var(--lv-page-px) 80px;
}
.lv-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--lv-grid-gap);
align-items: start;
}
@media (min-width: 1024px) {
.lv-grid {
grid-template-columns: minmax(0, 1fr) var(--lv-sidebar-width);
}
}
.lv-tab-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.lv-tab-content--sm {
gap: 14px;
}
/* ── Cards ────────────────────────────────────── */
.lv-card {
background: var(--lv-bg-card);
border-radius: var(--lv-radius-2xl);
border: 1px solid var(--lv-border);
box-shadow: var(--lv-shadow-card);
overflow: hidden;
}
.lv-card-body {
padding: var(--lv-card-padding);
}
.lv-card-title {
font-size: 13.5px;
font-weight: 700;
font-family: var(--lv-font-display);
margin-bottom: 12px;
}
.lv-section-title {
font-size: 15px;
font-weight: 700;
font-family: var(--lv-font-display);
}
.lv-section-subtitle {
font-size: 12px;
color: var(--lv-text-faint);
margin-top: 2px;
}
/* ── KPI Cards ────────────────────────────────── */
.lv-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.lv-kpi {
padding: 14px;
border-radius: var(--lv-radius-xl);
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
}
.lv-kpi-label {
font-size: 10px;
color: var(--lv-text-faint);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.lv-kpi-value {
margin-top: 4px;
font-size: 17px;
font-weight: 700;
font-family: var(--lv-font-display);
}
.lv-kpi-sub {
margin-top: 3px;
font-size: 11px;
color: var(--lv-text-faint);
}
.lv-kpis--compact {
gap: 8px;
}
.lv-kpi--compact {
padding: 12px;
}
.lv-kpi--compact .lv-kpi-value {
margin-top: 3px;
font-size: 16px;
}
.lv-kpi-value--success { color: var(--lv-success); }
.lv-kpi-value--danger { color: var(--lv-danger); }
.lv-kpi-value--warning { color: var(--lv-warning); }
/* ── Alert Banner ─────────────────────────────── */
.lv-alert-banner {
background: var(--lv-warning-light);
border: 1px solid var(--lv-warning-border);
border-radius: var(--lv-radius-xl);
padding: 10px 14px;
}
.lv-alert-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.lv-alert-title {
font-size: 12.5px;
font-weight: 600;
color: var(--lv-warning-dark);
}
.lv-alert-arrow {
font-size: 12px;
color: var(--lv-warning);
}
.lv-alert-list {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.lv-alert-item {
padding: 8px 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--lv-warning-border);
}
.lv-alert-item-title {
font-size: 12.5px;
font-weight: 600;
color: var(--lv-warning-dark);
}
.lv-alert-item-detail {
font-size: 11.5px;
color: var(--lv-warning);
margin-top: 2px;
}
/* ── Accounting Context Banner ────────────────── */
.lv-accounting-banner {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: var(--lv-radius-lg);
background: var(--lv-orange-light);
border: 1px solid var(--lv-orange-border);
color: var(--lv-orange);
font-size: 12px;
font-weight: 700;
width: fit-content;
}
/* ── Two-Column Grid ──────────────────────────── */
.lv-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
/* ── Inner Box (muted background rows) ────────── */
.lv-inner-box {
padding: 12px;
border-radius: var(--lv-radius-lg);
border: 1px solid var(--lv-border-light);
background: var(--lv-bg-muted);
}
/* ── Tenant Row ───────────────────────────────── */
.lv-tenant-name {
font-size: 13px;
font-weight: 600;
}
.lv-tenant-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 1px 7px;
border-radius: var(--lv-radius-full);
font-size: 10px;
font-weight: 600;
background: var(--lv-info-light);
color: var(--lv-info);
border: 1px solid var(--lv-info-border);
}
.lv-tenant-meta {
margin-top: 7px;
display: flex;
gap: 14px;
font-size: 11.5px;
color: var(--lv-text-muted);
flex-wrap: wrap;
}
/* ── Notes Card ───────────────────────────────── */
.lv-notes-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.lv-notes-toggle {
font-size: 11px;
color: var(--lv-text-muted);
background: none;
border: none;
cursor: pointer;
font-weight: 600;
}
.lv-notes-body {
padding: 12px;
border-radius: var(--lv-radius-lg);
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
font-size: 12.5px;
line-height: 1.65;
color: var(--lv-text-dim);
}
/* ── "Do This Next" Card ──────────────────────── */
.lv-next-card {
background: #fffdf7;
border-radius: var(--lv-radius-2xl);
border: 1px solid var(--lv-warning-border);
box-shadow: var(--lv-shadow-card);
overflow: hidden;
}
.lv-next-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lv-warning);
margin-bottom: 10px;
}
.lv-next-title {
font-size: 13.5px;
font-weight: 700;
font-family: var(--lv-font-display);
}
.lv-next-meta {
font-size: 11.5px;
color: var(--lv-text-muted);
margin-top: 3px;
}
/* ── Activity Row ─────────────────────────────── */
.lv-activity-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: var(--lv-radius-md);
border: 1px solid var(--lv-border-light);
}
.lv-activity-icon {
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--lv-neutral-light);
display: flex;
align-items: center;
justify-content: center;
}
.lv-activity-title {
font-size: 12.5px;
font-weight: 600;
}
.lv-activity-meta {
font-size: 11px;
color: var(--lv-text-faint);
}
/* ── Tenant Avatar ────────────────────────────── */
.lv-tenant-avatar {
width: 36px;
height: 36px;
border-radius: var(--lv-radius-full);
background: var(--lv-info-light);
border: 1px solid var(--lv-info-border);
color: var(--lv-info);
font-size: 12px;
font-weight: 700;
font-family: var(--lv-font-display);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── Payment Streak ───────────────────────────── */
.lv-streak-banner {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--lv-radius-full);
background: var(--lv-success-light);
border: 1px solid var(--lv-success-border);
width: fit-content;
}
.lv-streak-icon {
font-size: 13px;
}
.lv-streak-text {
font-size: 11.5px;
font-weight: 600;
color: var(--lv-success);
}
/* ── Document Download ────────────────────────── */
.lv-doc-download {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--lv-radius-sm);
color: var(--lv-text-faint);
flex-shrink: 0;
transition: all 0.12s ease;
}
.lv-doc-download:hover {
background: var(--lv-bg-muted);
color: var(--lv-text-secondary);
}
.lv-doc-download svg {
width: 16px;
height: 16px;
}
.lv-doc-missing {
width: 32px;
text-align: center;
color: var(--lv-text-faint);
font-size: 12px;
}
/* ── Empty States ─────────────────────────────── */
.lv-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 16px;
gap: 8px;
}
.lv-empty-state-icon {
width: 36px;
height: 36px;
border-radius: var(--lv-radius-full);
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--lv-text-faint);
}
.lv-empty-state-icon svg {
width: 18px;
height: 18px;
}
.lv-empty-state-text {
font-size: 12px;
color: var(--lv-text-faint);
font-weight: 500;
}
/* ── Table (Ledger, Tasks) ────────────────────── */
.lv-table-header {
display: grid;
padding: 10px 16px;
border-bottom: 1px solid var(--lv-border-light);
background: var(--lv-bg-muted);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lv-text-faint);
}
.lv-table-row {
display: grid;
padding: 12px 16px;
border-bottom: 1px solid var(--lv-border-faint);
align-items: center;
font-size: 12.5px;
}
.lv-table-cols-ledger {
grid-template-columns: 110px 1fr 120px;
}
.lv-table-cols-tasks {
grid-template-columns: 1fr 110px 100px;
}
.lv-table-date {
color: var(--lv-text-muted);
font-size: 11.5px;
}
.lv-table-memo {
font-weight: 600;
}
.lv-table-ref {
font-size: 10.5px;
color: var(--lv-text-faint);
margin-top: 1px;
}
.lv-table-amount {
text-align: right;
font-weight: 700;
font-family: var(--lv-font-display);
color: var(--lv-success);
}
.lv-table-empty {
padding: 14px 16px;
color: var(--lv-text-muted);
font-size: 12px;
}
.lv-ledger-table-wrap {
overflow-x: auto;
border: 1px solid var(--lv-border-light);
border-radius: var(--lv-radius-lg);
background: var(--lv-bg-card);
}
.lv-ledger-table {
width: 100%;
min-width: 620px;
border-collapse: collapse;
}
.lv-ledger-table thead th {
padding: 11px 16px;
border-bottom: 1px solid var(--lv-border-light);
background: var(--lv-bg-muted);
text-align: left;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lv-text-faint);
white-space: nowrap;
}
.lv-ledger-table tbody td {
padding: 13px 16px;
border-bottom: 1px solid var(--lv-border-faint);
font-size: 12.5px;
color: var(--lv-text-secondary);
vertical-align: top;
}
.lv-ledger-table tbody tr:last-child td {
border-bottom: none;
}
.lv-ledger-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
flex-wrap: wrap;
}
.lv-ledger-pagination__meta {
font-size: 11px;
color: var(--lv-text-faint);
}
.lv-ledger-pagination__actions {
display: flex;
align-items: center;
gap: 8px;
}
.lv-ledger-mobile-list {
display: none;
}
.lv-ledger-mobile-item {
padding: 14px 16px;
border: 1px solid var(--lv-border-light);
border-radius: var(--lv-radius-lg);
background: var(--lv-bg-card);
}
.lv-ledger-mobile-item + .lv-ledger-mobile-item {
margin-top: 10px;
}
.lv-ledger-mobile-item__title {
font-size: 13px;
font-weight: 700;
color: var(--lv-text-primary);
line-height: 1.3;
}
.lv-ledger-mobile-item__meta {
margin-top: 2px;
font-size: 11px;
color: var(--lv-text-faint);
}
.lv-ledger-mobile-item__amount {
font-size: 13px;
font-weight: 700;
font-family: var(--lv-font-display);
color: var(--lv-success);
white-space: nowrap;
}
@media (max-width: 767px) {
.lv-ledger-table-wrap {
display: none;
}
.lv-ledger-mobile-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 14px;
}
.lv-ledger-pagination {
align-items: stretch;
}
.lv-ledger-pagination__actions {
width: 100%;
}
.lv-ledger-pagination__actions .lv-btn {
flex: 1 1 0%;
justify-content: center;
}
}
/* ── Inline Badge ─────────────────────────────── */
.lv-badge {
display: inline-flex;
padding: 1px 7px;
border-radius: var(--lv-radius-full);
font-size: 10px;
font-weight: 600;
border: 1px solid var(--lv-neutral-border);
background: var(--lv-neutral-light);
color: var(--lv-text-dim);
}
/* ── Document Checklist ───────────────────────── */
.lv-checklist {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 10px 14px;
border-radius: var(--lv-radius-xl);
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
}
.lv-checklist-item {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--lv-radius-full);
font-size: 11px;
font-weight: 600;
border: 1px solid;
}
.lv-checklist-item--done {
border-color: var(--lv-success-border);
background: var(--lv-success-light);
color: var(--lv-success);
}
.lv-checklist-item--pending {
border-color: var(--lv-warning-border);
background: var(--lv-warning-light);
color: var(--lv-warning);
}
/* ── Document Grid ────────────────────────────── */
.lv-doc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.lv-doc-card {
background: var(--lv-bg-card);
border-radius: var(--lv-radius-2xl);
border: 1px solid var(--lv-border);
}
.lv-doc-inner {
padding: 14px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.lv-doc-name {
font-size: 12.5px;
font-weight: 600;
}
.lv-doc-meta {
font-size: 11px;
color: var(--lv-text-faint);
margin-top: 3px;
}
/* ── Message Card ─────────────────────────────── */
.lv-msg-header {
display: flex;
align-items: center;
gap: 7px;
}
.lv-msg-dot {
width: 7px;
height: 7px;
border-radius: 50%;
}
.lv-msg-dot--good { background: var(--lv-success-dot); }
.lv-msg-dot--neutral { background: var(--lv-neutral-dark); }
.lv-msg-who {
font-size: 12.5px;
font-weight: 700;
}
.lv-msg-when {
font-size: 11px;
color: var(--lv-text-faint);
}
.lv-msg-body {
margin-top: 8px;
font-size: 12.5px;
line-height: 1.6;
color: var(--lv-text-dim);
}
.lv-dropdown-item[disabled] {
opacity: 0.5;
pointer-events: none;
}
.lv-lease-view-page .lv-header-main {
min-width: 0;
}
.lv-lease-view-page .lv-mobile-header-summary,
.lv-lease-view-page .lv-mobile-stat-chips,
.lv-lease-view-page .lv-mobile-overview-accordions,
.lv-lease-view-page .lv-mobile-menu-item {
display: none;
}
.lv-lease-view-page .lv-actions-menu {
position: relative;
}
.lv-lease-view-page .lv-actions-menu > .lv-btn--icon:not(.lv-actions-trigger) {
display: none;
}
.lv-lease-view-page .lv-actions-trigger__icon {
width: 18px;
height: 18px;
}
.lv-lease-view-page .lv-actions-trigger__label {
display: none;
}
.lv-lease-view-page .lv-overview-kpis--legacy {
display: none !important;
}
.lv-lease-view-page .lv-file-cabinet-row {
gap: 10px;
}
.lv-lease-view-page .lv-file-cabinet-file {
min-width: 0;
flex: 1 1 auto;
}
.lv-lease-view-page .lv-file-cabinet-icon {
width: 30px;
height: 30px;
padding: 5px !important;
border-radius: 7px;
}
.lv-lease-view-page .lv-file-cabinet-icon svg {
width: 16px;
height: 16px;
}
.lv-lease-view-page .lv-file-cabinet-copy {
min-width: 0;
}
.lv-lease-view-page .lv-file-cabinet-title {
max-width: 100%;
line-height: 1.25;
}
.lv-lease-view-page .lv-file-cabinet-meta {
line-height: 1.2;
}
.lv-lease-view-page .lv-file-cabinet-actions {
flex: 0 0 auto;
margin-left: 6px !important;
}
.lv-lease-view-page .lv-file-cabinet-remove {
width: 30px;
height: 30px;
padding: 5px !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lv-lease-view-page .lv-file-cabinet-remove svg {
width: 16px;
height: 16px;
}
.lv-lease-view-page .lv-compliance-document-row {
gap: 12px;
}
.lv-lease-view-page .lv-compliance-document-file {
min-width: 0;
flex: 1 1 auto;
}
.lv-lease-view-page .lv-compliance-document-icon {
width: 32px;
height: 32px;
border-radius: 8px;
}
.lv-lease-view-page .lv-compliance-document-icon svg {
width: 18px;
height: 18px;
}
.lv-lease-view-page .lv-compliance-document-copy {
min-width: 0;
}
.lv-lease-view-page .lv-compliance-document-copy p:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.25;
}
.lv-lease-view-page .lv-compliance-document-copy p:last-child {
line-height: 1.2;
}
.lv-lease-view-page .lv-compliance-document-actions {
flex: 0 0 auto;
margin-left: 8px;
}
.lv-lease-view-page .lv-compliance-document-actions > a,
.lv-lease-view-page .lv-compliance-document-upload {
min-height: 30px;
}
/* ── Sidebar ──────────────────────────────────── */
.lv-sidebar {
display: flex;
flex-direction: column;
gap: 18px;
}
@media (min-width: 1024px) {
.lv-sidebar {
position: sticky;
top: 160px;
}
}
.lv-sidebar-title {
font-size: 13px;
font-weight: 700;
font-family: var(--lv-font-display);
margin-bottom: 12px;
}
/* ── Sidebar List Items (icon + label + value + arrow) ── */
.lv-sidebar-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--lv-radius-lg);
border: 1px solid var(--lv-border-light);
background: var(--lv-bg-card);
text-decoration: none;
color: var(--lv-text-primary);
transition: background 0.12s ease;
}
.lv-sidebar-item:hover {
background: var(--lv-bg-muted);
}
.lv-sidebar-item-icon {
width: 40px;
height: 40px;
border-radius: var(--lv-radius-lg);
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--lv-text-faint);
}
.lv-sidebar-item-icon svg {
width: 18px;
height: 18px;
}
.lv-sidebar-item-text {
flex: 1;
min-width: 0;
}
.lv-sidebar-item-label {
font-size: 13px;
font-weight: 600;
color: var(--lv-text-primary);
}
.lv-sidebar-item-value {
font-size: 12px;
color: var(--lv-text-faint);
margin-top: 1px;
}
.lv-sidebar-item-arrow {
flex-shrink: 0;
color: var(--lv-text-faint);
opacity: 0.4;
}
.lv-sidebar-item-arrow svg {
width: 14px;
height: 14px;
}
/* ── Lease Health ─────────────────────────────── */
.lv-health-box {
padding: 14px;
border-radius: var(--lv-radius-lg);
border: 1px solid var(--lv-border-light);
background: var(--lv-bg-muted);
margin-bottom: 14px;
}
.lv-health-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.lv-health-label {
font-size: 11px;
color: var(--lv-text-faint);
font-weight: 600;
}
.lv-health-status {
font-size: 11px;
font-weight: 600;
}
.lv-health-message {
margin-top: 6px;
font-size: 15px;
font-weight: 700;
font-family: var(--lv-font-display);
}
.lv-risk-badge {
margin-left: 6px;
display: inline-flex;
padding: 1px 6px;
border-radius: var(--lv-radius-full);
background: var(--lv-danger-light);
border: 1px solid var(--lv-danger-border);
color: var(--lv-danger);
font-size: 10px;
font-weight: 700;
}
/* ── Milestones ───────────────────────────────── */
.lv-milestones-label {
font-size: 11px;
font-weight: 700;
color: var(--lv-text-faint);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.lv-milestone {
padding: 9px 11px;
border-radius: var(--lv-radius-md);
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
}
.lv-milestone-label {
font-size: 11.5px;
font-weight: 600;
color: var(--lv-text-secondary);
}
.lv-milestone-value {
font-size: 11px;
color: var(--lv-text-faint);
margin-top: 1px;
}
/* ── Linked Records ───────────────────────────── */
.lv-linked-record {
padding: 8px 10px;
border-radius: var(--lv-radius-md);
border: 1px solid var(--lv-border-light);
background: var(--lv-bg-card);
font-size: 11.5px;
}
/* ── Backdrop ─────────────────────────────────── */
.lv-backdrop {
position: fixed;
inset: 0;
z-index: 30;
}
/* ── Utility ──────────────────────────────────── */
.lv-empty { font-size: 12px; color: var(--lv-text-muted); }
.lv-flex-col { display: flex; flex-direction: column; }
.lv-gap-sm { gap: 5px; }
.lv-gap-md { gap: 6px; }
.lv-gap-lg { gap: 8px; }
.lv-gap-xl { gap: 14px; }
.lv-w-fit { width: fit-content; }
/*
|--------------------------------------------------------------------------
| Filament Table — Global Density & Style Overrides
|--------------------------------------------------------------------------
|
| Append to the bottom of lease-view.css.
| All selectors verified against Filament v3.3.49 rendered DOM.
|
*/
/* ══════════════════════════════════════════════════
HEADING ROW ("Financial Ledger" + buttons)
Actual: div.fi-ta-header → p-4 sm:px-6
══════════════════════════════════════════════════ */
.fi-ta-header {
padding: 8px 14px !important;
gap: 8px !important;
flex-direction: row !important;
align-items: center !important;
}
.fi-ta-header-heading {
font-size: 13px !important;
font-weight: 700 !important;
font-family: var(--lv-font-display) !important;
line-height: 1.3 !important;
}
/* Header action buttons: fi-btn with px-3 py-2 text-sm */
.fi-ta-header .fi-btn,
.fi-ta-header-ctn .fi-btn {
padding: 5px 12px !important;
font-size: 11.5px !important;
font-weight: 600 !important;
border-radius: var(--lv-radius-md) !important;
gap: 5px !important;
line-height: 1.2 !important;
}
.fi-ta-header .fi-btn-icon,
.fi-ta-header-ctn .fi-btn-icon {
width: 14px !important;
height: 14px !important;
}
.fi-ta-header .fi-btn-label,
.fi-ta-header-ctn .fi-btn-label {
font-size: 11.5px !important;
}
/* ══════════════════════════════════════════════════
FILTER TOOLBAR (Billing Period, Ascending selects)
Actual: div.fi-ta-header-toolbar → px-4 py-3 sm:px-6
══════════════════════════════════════════════════ */
.fi-ta-header-toolbar {
padding: 6px 14px !important;
gap: 8px !important;
}
/* Select inputs: fi-select-input with py-1.5 pe-8 */
.fi-ta-header-toolbar .fi-select-input {
font-size: 12px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
line-height: 1.3 !important;
}
/* Input wrappers */
.fi-ta-header-toolbar .fi-input-wrp {
min-height: unset !important;
}
/* Filter icon button */
.fi-ta-header-toolbar .fi-icon-btn {
width: 32px !important;
height: 32px !important;
}
/* ══════════════════════════════════════════════════
ACTIVE FILTERS BAR — hide entirely
Actual: div.fi-ta-filter-indicators
══════════════════════════════════════════════════ */
.fi-ta-filter-indicators {
display: none !important;
}
/* ══════════════════════════════════════════════════
TABLE HEADER CELLS
Actual: th.fi-ta-header-cell → px-3 py-3.5
Label: span.fi-ta-header-cell-label → text-sm font-semibold
══════════════════════════════════════════════════ */
.fi-ta-header-cell {
padding: 8px 10px !important;
background: var(--lv-bg-muted) !important;
border-bottom: 1px solid var(--lv-border-light) !important;
}
.fi-ta-header-cell > span {
gap: 4px !important;
}
.fi-ta-header-cell-label {
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: var(--lv-text-faint) !important;
line-height: 1.3 !important;
}
/* ══════════════════════════════════════════════════
ROW DENSITY
Actual: div.fi-ta-text → px-3 py-4 gap-y-1
Label: span.fi-ta-text-item-label → text-sm leading-6
Actions: div (bare) → px-3 py-4
══════════════════════════════════════════════════ */
.fi-ta-cell .fi-ta-text {
padding: 6px 10px !important;
gap: 0 !important;
}
.fi-ta-cell .fi-ta-text-item-label {
font-size: 12.5px !important;
line-height: 1.4 !important;
}
/* Actions cell: div.whitespace-nowrap.px-3.py-4 */
.fi-ta-actions-cell > div {
padding: 6px 10px !important;
}
.fi-ta-actions .fi-link .font-semibold {
font-size: 11.5px !important;
}
.fi-ta-actions .fi-link svg,
.fi-ta-actions .fi-link .fi-link-icon {
width: 14px !important;
height: 14px !important;
}
/* Row border */
.fi-ta-row {
border-bottom: 1px solid var(--lv-border-faint) !important;
}
/* Badge columns (Entry type pills) */
.fi-ta-cell .fi-badge {
padding: 2px 8px !important;
font-size: 11px !important;
min-width: unset !important;
gap: 4px !important;
}
.fi-ta-cell .fi-badge span {
font-size: 11px !important;
}
/* ══════════════════════════════════════════════════
GROUP HEADERS (Jan 2, 2026 collapsible rows)
Actual: div.fi-ta-group-header → px-3 py-2
══════════════════════════════════════════════════ */
.fi-ta-group-header {
padding: 5px 12px !important;
gap: 6px !important;
}
.fi-ta-group-header h4 {
font-size: 12px !important;
font-weight: 600 !important;
}
.fi-ta-group-header .fi-icon-btn {
width: 24px !important;
height: 24px !important;
}
.fi-ta-group-header .fi-icon-btn-icon {
width: 14px !important;
height: 14px !important;
}
/* ══════════════════════════════════════════════════
TABLE CONTAINER — strip Filament card chrome
══════════════════════════════════════════════════ */
.fi-ta-ctn {
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
.fi-ta-content {
gap: 0 !important;
}
/* ══════════════════════════════════════════════════
EMPTY STATE
══════════════════════════════════════════════════ */
.fi-ta-empty-state {
padding: 20px 14px !important;
}
.fi-ta-empty-state-heading {
font-size: 12px !important;
}
/* ══════════════════════════════════════════════════
PAGINATION
Actual: nav.fi-pagination / fi-ta-pagination
Has duplicate per-page selectors (compact + full).
══════════════════════════════════════════════════ */
.fi-ta-pagination {
padding: 6px 14px !important;
border-top: 1px solid var(--lv-border-light) !important;
background: var(--lv-bg-muted) !important;
}
.fi-pagination-overview {
font-size: 11px !important;
color: var(--lv-text-faint) !important;
}
/* Per-page select — tighten */
.fi-ta-pagination .fi-select-input {
font-size: 11px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.fi-ta-pagination .fi-input-wrp {
min-height: unset !important;
}
/* "Per page" label text */
.fi-ta-pagination .fi-input-wrp-label {
font-size: 11px !important;
}
/* Hide the full-size per-page selector (keep compact only) */
.fi-pagination-records-per-page-select:not(.fi-compact) {
display: none !important;
}
/* ══════════════════════════════════════════════════
PAGE CHROME — breadcrumbs, header, spacing
Tighten the area between Filament's page wrapper
and the custom .lv-page lease view.
══════════════════════════════════════════════════ */
/* The outer section wrapper has py-8 (32px) — crush it */
.fi-page > section {
padding-top: 12px !important;
padding-bottom: 0 !important;
gap: 8px !important;
}
/* The fi-header (breadcrumbs + empty h1) has gap-4 */
.fi-page > section > header.fi-header {
gap: 4px !important;
margin-bottom: 0 !important;
}
/* Breadcrumbs: reduce bottom margin */
.fi-breadcrumbs {
margin-bottom: 0 !important;
}
/* Kill the sm:mt-7 spacer on the header actions div */
.fi-header > div:last-child {
margin-top: 0 !important;
}
/* Tab bar: reduce inline margin-top from 20px */
.lv-tabs {
margin-top: 10px !important;
}
/* Reduce gap between header bottom and body content */
.lv-header-inner {
padding-bottom: 8px !important;
}
/* ══════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 639px) {
.lv-portal-page {
padding-bottom: 118px;
}
.lv-lease-view-page {
--lv-page-px: 12px;
}
.lv-lease-view-page .lv-header {
top: 0;
}
.lv-lease-view-page .lv-header-inner {
padding-top: 8px;
padding-bottom: 0 !important;
}
.lv-lease-view-page .lv-header-row {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.lv-lease-view-page .lv-header-summary-desktop {
display: none !important;
}
.lv-lease-view-page .lv-mobile-header-summary {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.lv-lease-view-page .lv-mobile-header-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
}
.lv-lease-view-page .lv-mobile-title {
font-size: 16px;
line-height: 1.15;
max-width: none;
letter-spacing: 0;
}
.lv-lease-view-page .lv-mobile-header-meta-row {
display: flex;
align-items: center;
gap: 7px;
overflow-x: auto;
padding-bottom: 1px;
color: var(--lv-text-muted);
font-size: 11px;
white-space: nowrap;
scrollbar-width: none;
}
.lv-lease-view-page .lv-mobile-header-meta-row::-webkit-scrollbar {
display: none;
}
.lv-lease-view-page .lv-mobile-header-meta-row span {
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
}
.lv-lease-view-page .lv-mobile-header-meta-row span:not(:last-child)::after {
content: "";
width: 3px;
height: 3px;
border-radius: 999px;
background: var(--lv-text-faint);
opacity: 0.6;
}
.lv-lease-view-page .lv-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
width: 100%;
gap: 8px;
}
.lv-lease-view-page .lv-actions .lv-btn--primary {
width: 100%;
justify-content: center;
min-height: 36px;
}
.lv-lease-view-page .lv-desktop-action {
display: none !important;
}
.lv-lease-view-page .lv-actions-trigger {
width: auto;
min-width: 94px;
height: 36px;
gap: 6px;
padding: 0 12px;
font-size: 12px;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-lease-view-page .lv-actions-trigger__label {
display: inline;
}
.lv-lease-view-page .lv-mobile-menu-item {
display: flex;
}
.lv-lease-view-page .lv-dropdown {
position: fixed;
left: 12px;
right: 12px;
top: 112px;
max-height: calc(100vh - 132px);
overflow-y: auto;
min-width: 0;
}
.lv-lease-view-page .lv-tabs {
position: sticky;
top: 109px;
z-index: 18;
margin: 0 -12px -1px;
padding: 0 12px;
overflow-x: auto;
flex-wrap: nowrap;
gap: 0;
background: var(--lv-bg-header);
border-top: 1px solid var(--lv-border-light);
border-bottom: 1px solid var(--lv-border-light);
scrollbar-width: none;
}
.lv-lease-view-page .lv-tabs::-webkit-scrollbar {
display: none;
}
.lv-lease-view-page .lv-tab {
flex: 0 0 auto;
position: relative;
padding: 11px 12px 10px;
border-radius: 0;
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
box-shadow: none;
color: var(--lv-text-muted);
font-size: 12px;
font-weight: 650;
line-height: 1;
transition: color 0.15s ease, border-color 0.15s ease;
}
.lv-lease-view-page .lv-tab--active {
background: transparent;
color: var(--lv-primary);
border-color: var(--lv-primary);
box-shadow: none;
font-weight: 800;
}
.lv-lease-view-page .lv-tab--inactive {
background: transparent;
border-color: transparent;
color: var(--lv-text-muted);
box-shadow: none;
}
.lv-lease-view-page .lv-tab--inactive:hover {
background: transparent;
color: var(--lv-text-primary);
}
.lv-lease-view-page .lv-body {
padding-top: 12px;
}
.lv-lease-view-page .lv-mobile-stat-chips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
order: 1;
}
.lv-lease-view-page .lv-mobile-stat-chip {
min-width: 0;
padding: 10px 11px;
border-radius: 10px;
border: 1px solid var(--lv-border-light);
background: var(--lv-bg-card);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.lv-lease-view-page .lv-mobile-stat-chip span {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: var(--lv-text-faint);
}
.lv-lease-view-page .lv-mobile-stat-chip strong {
min-width: 0;
font-size: 13px;
font-weight: 800;
color: var(--lv-text-primary);
white-space: nowrap;
}
.lv-lease-view-page .lv-overview-kpis {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
order: 4;
}
.lv-lease-view-page .lv-overview-kpis .lv-kpi {
display: block;
padding: 10px 11px;
border-radius: 10px;
background: var(--lv-bg-card);
}
.lv-lease-view-page .lv-overview-kpis .lv-kpi-label {
display: block;
font-size: 9px;
line-height: 1.1;
letter-spacing: 0.04em;
}
.lv-lease-view-page .lv-overview-kpis .lv-kpi-value {
display: block;
margin-top: 4px;
font-size: 14px;
line-height: 1.15;
text-align: left;
}
.lv-lease-view-page .lv-overview-kpis .lv-kpi-sub {
display: block;
margin-top: 3px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
line-height: 1.2;
}
.lv-lease-view-page .lv-ledger-kpis {
display: flex !important;
grid-template-columns: none !important;
gap: 7px;
margin: 0 -12px 10px !important;
padding: 0 12px 2px;
overflow-x: auto;
scrollbar-width: none;
}
.lv-lease-view-page .lv-ledger-kpis::-webkit-scrollbar {
display: none;
}
.lv-lease-view-page .lv-ledger-kpis .lv-kpi {
flex: 0 0 auto;
min-width: 116px;
display: block;
padding: 8px 10px;
border-radius: 10px;
background: var(--lv-bg-card);
}
.lv-lease-view-page .lv-ledger-kpis .lv-kpi-label {
display: block;
font-size: 9px;
line-height: 1.1;
letter-spacing: 0.04em;
}
.lv-lease-view-page .lv-ledger-kpis .lv-kpi-value {
display: block;
margin-top: 3px;
font-size: 13px;
line-height: 1.15;
text-align: left;
}
.lv-lease-view-page .lv-ledger-kpis .lv-kpi-sub {
display: block;
margin-top: 2px;
max-width: 96px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
line-height: 1.2;
}
.lv-lease-view-page .lv-overview-alerts {
order: 1;
}
.lv-lease-view-page .lv-mobile-overview-accordions {
display: flex;
flex-direction: column;
gap: 8px;
order: 2;
}
.lv-lease-view-page .lv-mobile-accordion {
border: 1px solid var(--lv-border-light);
border-radius: 10px;
background: var(--lv-bg-card);
overflow: hidden;
}
.lv-lease-view-page .lv-mobile-accordion summary {
cursor: pointer;
padding: 11px 12px;
font-size: 12px;
font-weight: 800;
color: var(--lv-text-primary);
list-style: none;
}
.lv-lease-view-page .lv-mobile-accordion summary::-webkit-details-marker {
display: none;
}
.lv-lease-view-page .lv-mobile-accordion summary::after {
content: "+";
float: right;
color: var(--lv-text-faint);
font-weight: 700;
}
.lv-lease-view-page .lv-mobile-accordion[open] summary::after {
content: "-";
}
.lv-lease-view-page .lv-mobile-accordion-body {
display: flex;
flex-direction: column;
gap: 0;
padding: 0 12px 10px;
}
.lv-lease-view-page .lv-mobile-detail-row,
.lv-lease-view-page .lv-mobile-link-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 8px 0;
border-top: 1px solid var(--lv-border-light);
font-size: 12px;
text-align: left;
text-decoration: none;
}
.lv-lease-view-page .lv-mobile-link-row {
cursor: pointer;
}
.lv-lease-view-page .lv-mobile-detail-row span,
.lv-lease-view-page .lv-mobile-link-row span {
color: var(--lv-text-muted);
}
.lv-lease-view-page .lv-mobile-detail-row strong,
.lv-lease-view-page .lv-mobile-link-row strong {
min-width: 0;
color: var(--lv-text-primary);
font-weight: 700;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lv-lease-view-page .lv-mobile-detail-row--danger strong {
color: var(--lv-danger);
}
.lv-lease-view-page .lv-two-col {
grid-template-columns: 1fr;
order: 3;
}
.lv-lease-view-page .lv-recurring-charges-card {
order: 5;
}
.lv-lease-view-page .lv-sidebar {
display: none;
}
.lv-lease-view-page .lv-card {
border-radius: 10px;
}
.lv-lease-view-page .lv-card-body {
padding: 14px;
}
.lv-lease-view-page .lv-documents-tab .lv-card,
.lv-lease-view-page .lv-messages-tab .lv-card,
.lv-lease-view-page .lv-tasks-tab .lv-card,
.lv-lease-view-page .lv-activity-tab .lv-card {
box-shadow: none;
}
.lv-lease-view-page .lv-ledger-table-card {
background: transparent;
border: 0;
box-shadow: none;
}
.lv-lease-view-page .lv-ledger-table-card .lv-card-body,
.lv-lease-view-page .lv-ledger-table-card .lv-embedded-table {
padding: 0 !important;
background: transparent;
}
.lv-lease-view-page .lv-ledger-table-card .fi-ta-header {
padding: 8px 10px !important;
border-radius: 10px 10px 0 0;
background: var(--lv-bg-card);
}
.lv-lease-view-page .lv-ledger-table-card .fi-ta-header-heading {
font-size: 12px !important;
}
.lv-lease-view-page .lv-ledger-table-card .fi-ta-header .fi-btn-label,
.lv-lease-view-page .lv-ledger-table-card .fi-ta-header-ctn .fi-btn-label {
display: none !important;
}
.lv-lease-view-page .lv-ledger-table-card .fi-ta-header .fi-btn,
.lv-lease-view-page .lv-ledger-table-card .fi-ta-header-ctn .fi-btn {
min-height: 30px !important;
padding: 6px 8px !important;
}
.lv-lease-view-page .lv-ledger-table-card .fi-ta-header-toolbar {
padding: 6px 10px !important;
background: var(--lv-bg-card);
}
.lv-lease-view-page .lv-ledger-table-card .fi-ta-table {
border-collapse: separate !important;
border-spacing: 0 2px !important;
}
.lv-lease-view-page .lv-ledger-table-card .fi-ta-header-cell {
display: none !important;
}
.lv-lease-view-page .lv-ledger-table-card .fi-ta-row {
border-bottom: 0 !important;
}
.lv-lease-view-page .lv-ledger-table-card .lv-lease-ledger-mobile-card-cell {
padding: 0 !important;
width: auto !important;
min-width: 0 !important;
}
.lv-lease-view-page .lv-ledger-table-card .lv-lease-ledger-mobile-card-cell > div {
padding: 0 !important;
}
.lv-lease-view-page .lv-ledger-table-card .fi-ta-actions-cell {
width: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
padding: 0 !important;
}
.lv-lease-view-page .lv-ledger-table-card .fi-ta-actions-cell > div {
padding: 0 4px 0 0 !important;
}
.lv-lease-view-page .lv-ledger-mobile-card {
width: 100%;
min-width: 0;
padding: 8px 8px 8px;
border-radius: 0;
border: 0;
background: transparent;
}
.lv-lease-view-page .lv-ledger-mobile-card--muted {
opacity: 0.62;
}
.lv-lease-view-page .lv-ledger-mobile-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
min-width: 0;
}
.lv-lease-view-page .lv-ledger-mobile-card__main {
min-width: 0;
flex: 1 1 auto;
}
.lv-lease-view-page .lv-ledger-mobile-card__title {
color: var(--lv-text-primary);
font-size: 13px;
font-weight: 700;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lv-lease-view-page .lv-ledger-mobile-card__meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 3px;
overflow: hidden;
color: var(--lv-text-muted);
font-size: 10.5px;
line-height: 1.2;
white-space: nowrap;
}
.lv-lease-view-page .lv-ledger-mobile-card__meta span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.lv-lease-view-page .lv-ledger-mobile-card__badge {
flex: 0 0 auto;
max-width: 96px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 6px;
padding: 4px 6px;
border: 1px solid var(--lv-danger-border);
background: var(--lv-danger-light);
color: var(--lv-danger);
font-size: 10px;
font-weight: 600;
text-transform: none;
}
.lv-lease-view-page .lv-ledger-mobile-card__badge--credit {
border-color: var(--lv-success-border);
background: var(--lv-success-light);
color: var(--lv-success);
}
.lv-lease-view-page .lv-ledger-mobile-card__badge--muted {
border-color: var(--lv-border-light);
background: var(--lv-bg-muted);
color: var(--lv-text-muted);
}
.lv-lease-view-page .lv-ledger-mobile-card__amounts {
display: flex;
align-items: center;
gap: 4px;
margin-top: 7px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
.lv-lease-view-page .lv-ledger-mobile-card__amount {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
flex: 0 0 auto;
min-width: 0;
max-width: 48%;
padding: 4px 7px;
border-radius: 6px;
background: var(--lv-bg-muted);
color: var(--lv-text-secondary);
}
.lv-lease-view-page .lv-ledger-mobile-card__amount span {
color: var(--lv-text-faint);
font-size: 10px;
font-weight: 500;
text-transform: none;
}
.lv-lease-view-page .lv-ledger-mobile-card__amount strong {
color: var(--lv-text-primary);
font-size: 11.5px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lv-lease-view-page .lv-ledger-mobile-card__amount--payment strong {
color: var(--lv-success);
}
.lv-lease-view-page .lv-document-row {
flex-direction: column;
align-items: stretch !important;
gap: 12px;
padding: 14px !important;
}
.lv-lease-view-page .lv-document-actions {
align-self: stretch;
justify-content: flex-end;
flex-wrap: wrap;
}
.lv-lease-view-page .lv-documents-tab {
gap: 12px;
}
.lv-lease-view-page .lv-documents-tab > .mb-6 {
margin-bottom: 0 !important;
}
.lv-lease-view-page .lv-file-cabinet-header {
padding: 11px 12px !important;
}
.lv-lease-view-page .lv-file-cabinet-row {
flex-direction: row;
align-items: center !important;
gap: 8px;
padding: 10px 12px !important;
}
.lv-lease-view-page .lv-file-cabinet-file {
gap: 8px !important;
min-width: 0;
}
.lv-lease-view-page .lv-file-cabinet-icon {
width: 28px;
height: 28px;
padding: 5px !important;
}
.lv-lease-view-page .lv-file-cabinet-title {
font-size: 12.5px !important;
line-height: 1.2;
}
.lv-lease-view-page .lv-file-cabinet-meta {
margin-top: 2px !important;
font-size: 10.5px !important;
}
.lv-lease-view-page .lv-file-cabinet-actions {
align-self: center;
justify-content: flex-end;
flex-wrap: nowrap;
margin-left: 4px !important;
}
.lv-lease-view-page .lv-file-cabinet-remove {
width: 28px;
height: 28px;
padding: 4px !important;
}
.lv-lease-view-page .lv-compliance-documents-header {
padding: 11px 12px !important;
}
.lv-lease-view-page .lv-compliance-documents-header h3 {
font-size: 12.5px !important;
}
.lv-lease-view-page .lv-compliance-documents-header svg {
width: 16px !important;
height: 16px !important;
}
.lv-lease-view-page .lv-compliance-document-row {
flex-direction: row;
align-items: center !important;
gap: 8px;
padding: 10px 12px !important;
}
.lv-lease-view-page .lv-compliance-document-file {
gap: 8px !important;
min-width: 0;
}
.lv-lease-view-page .lv-compliance-document-icon {
width: 28px !important;
height: 28px !important;
}
.lv-lease-view-page .lv-compliance-document-icon svg {
width: 16px !important;
height: 16px !important;
}
.lv-lease-view-page .lv-compliance-document-copy p:first-child {
font-size: 12.5px !important;
}
.lv-lease-view-page .lv-compliance-document-copy p:last-child {
margin-top: 2px !important;
font-size: 10.5px !important;
}
.lv-lease-view-page .lv-compliance-document-actions {
align-self: center;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 6px !important;
margin-left: 4px !important;
}
.lv-lease-view-page .lv-compliance-document-actions > a {
width: 28px;
height: 28px;
padding: 4px !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lv-lease-view-page .lv-compliance-document-actions > a svg {
width: 15px !important;
height: 15px !important;
}
.lv-lease-view-page .lv-compliance-document-upload {
min-height: 28px;
padding: 5px 8px !important;
font-size: 11px !important;
white-space: nowrap;
}
.lv-request-wizard-header .lv-header-inner {
padding-top: 8px;
padding-bottom: 6px !important;
}
.lv-header-row {
flex-direction: row;
align-items: center;
gap: 10px;
}
.lv-request-wizard-header__content .lv-title {
font-size: 15px;
line-height: 1.1;
white-space: nowrap;
max-width: 100%;
}
.lv-actions {
width: auto;
flex-wrap: nowrap;
}
.lv-request-wizard-header__back {
padding: 5px 10px;
font-size: 10.5px;
white-space: nowrap;
}
.lv-request-wizard-header__actions .lv-btn {
flex: 0 0 auto;
}
.lv-actions .lv-btn {
flex: 1 1 0;
justify-content: center;
}
.lv-request-wizard-header__title {
display: flex;
align-items: baseline;
gap: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.lv-request-wizard-header__tenant,
.lv-request-wizard-header__page {
overflow: hidden;
text-overflow: ellipsis;
}
.lv-request-wizard-header__tenant {
font-size: 14px;
font-weight: 500;
color: var(--lv-text-faint);
max-width: 42vw;
}
.lv-request-wizard-header__dash {
font-size: 14px;
font-weight: 500;
color: var(--lv-text-faint);
flex: 0 0 auto;
}
.lv-request-wizard-header__page {
font-size: 15px;
font-weight: 700;
color: var(--lv-text-primary);
max-width: 50vw;
}
.lv-subtitle {
display: block;
line-height: 1.35;
}
.lv-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lv-kpi {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px;
}
.lv-kpi-label {
flex: 1 1 auto;
min-width: 0;
}
.lv-kpi-value {
margin-top: 0;
font-size: 16px;
flex: 0 0 auto;
text-align: right;
}
.lv-kpi-sub {
display: none;
}
.lv-portal-bottom-nav {
display: flex;
gap: 2px;
padding: 7px 8px calc(8px + env(safe-area-inset-bottom));
}
.lv-portal-bottom-nav__item {
padding: 7px 4px;
}
.lv-portal-bottom-nav__icon {
width: 17px;
height: 17px;
}
.lv-portal-bottom-nav__label {
font-size: 8.5px;
letter-spacing: 0.01em;
}
.fi-ta-cell .fi-ta-text {
padding: 5px 8px !important;
}
.fi-ta-cell .fi-ta-text-item-label {
font-size: 11.5px !important;
}
.fi-ta-actions-cell > div {
padding: 5px 8px !important;
}
.fi-ta-header .fi-btn,
.fi-ta-header-ctn .fi-btn {
padding: 4px 10px !important;
font-size: 11px !important;
}
}
/*
|--------------------------------------------------------------------------
| Sidebar & Topbar — Dark Nav + Ultra-Compact Overrides
|--------------------------------------------------------------------------
|
| Replaces the sidebar/topbar section in your lease-view.css.
| Remove the old "Global Topbar & Sidebar Header Override" and
| "Global Sidebar Overrides" blocks and use this instead.
|
| Key changes from the old version:
| 1. Dark sidebar background with light text
| 2. Collapse fix: no more width !important locking
| 3. Compact spacing matching the React prototype
|
*/
/* ══════════════════════════════════════════════════
SIDEBAR — Dark Background + Light Text
Uses your existing earth-tone design tokens
══════════════════════════════════════════════════ */
/* Core dark surface */
.fi-sidebar {
background: #1C1B18 !important;
border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* The inner nav scroll area */
.fi-sidebar-nav {
background: #1C1B18 !important;
padding: 16px 12px !important;
scrollbar-gutter: auto !important;
}
/* ── Width: set the variable, DON'T lock with !important ── */
/* This lets Filament's collapse JS still work */
:root {
--sidebar-width: 210px;
}
/* ── Ultra-Thin Scrollbar (Mac-style) ────────── */
.fi-sidebar-nav::-webkit-scrollbar {
width: 4px !important;
}
.fi-sidebar-nav::-webkit-scrollbar-track {
background: transparent !important;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2) !important;
}
/* ── Group Layout ────────────────────────────── */
.fi-sidebar-nav-groups {
margin-left: 0 !important;
margin-right: 0 !important;
gap: 16px !important;
}
.fi-sidebar-group,
.fi-sidebar-group-items {
gap: 2px !important;
}
/* ── Group Headers (PROPERTIES, OPERATIONS, etc.) ── */
.fi-sidebar-group-button {
padding: 2px 8px !important;
}
.fi-sidebar-group-label {
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
line-height: 1.2 !important;
color: rgba(255, 255, 255, 0.35) !important;
}
/* Group collapse chevron */
.fi-sidebar-group-button svg {
color: rgba(255, 255, 255, 0.2) !important;
width: 14px !important;
height: 14px !important;
}
/* ── Main Filament Sidebar Navigation Links ────────────────────────── */
/* Scope these to .fi-sidebar so they do NOT affect page sub-navigation */
.fi-sidebar .fi-sidebar-item-button {
padding: 6px 10px !important;
min-height: 32px !important;
gap: 8px !important;
border-radius: 6px !important;
transition: background 0.1s ease !important;
}
/* Default inactive text */
.fi-sidebar .fi-sidebar-item-label {
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
color: rgba(255, 255, 255, 0.6) !important;
}
/* Default inactive icon */
.fi-sidebar .fi-sidebar-item-icon {
width: 16px !important;
height: 16px !important;
color: rgba(255, 255, 255, 0.3) !important;
}
/* Hover state */
.fi-sidebar .fi-sidebar-item-button:hover {
background: rgba(255, 255, 255, 0.06) !important;
}
.fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-label {
color: rgba(255, 255, 255, 0.85) !important;
}
.fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
color: rgba(255, 255, 255, 0.5) !important;
}
/* Active state */
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button {
background: rgba(255, 255, 255, 0.08) !important;
}
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label {
color: #FFFFFF !important;
font-weight: 600 !important;
}
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon {
color: var(--lv-accent) !important;
}
/* Active indicator bar (Filament renders a colored left border) */
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-button::before {
background: var(--lv-accent) !important;
}
.fi-sidebar .fi-sidebar-item-badge {
font-size: 10px !important;
}
.fi-sidebar .fi-sidebar-item-badge .fi-badge {
background: rgba(255, 255, 255, 0.1) !important;
color: rgba(255, 255, 255, 0.6) !important;
border: none !important;
--tw-ring-opacity: 0 !important;
}
/* ══════════════════════════════════════════════════
SIDEBAR HEADER (Logo area at top)
══════════════════════════════════════════════════ */
.fi-sidebar-header {
background: #1C1B18 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
height: 48px !important;
}
/* Logo text if using text-based branding */
.fi-sidebar-header a,
.fi-sidebar-header span {
color: #FFFFFF !important;
}
/* ══════════════════════════════════════════════════
SIDEBAR FOOTER (if present)
══════════════════════════════════════════════════ */
.fi-sidebar-footer {
background: #1C1B18 !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* ══════════════════════════════════════════════════
TOPBAR — compact height
══════════════════════════════════════════════════ */
.fi-topbar nav {
height: 48px !important;
}
/* Ensure user menu alignment */
.fi-topbar .fi-user-menu {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ══════════════════════════════════════════════════
SIDEBAR COLLAPSE BUTTON (hamburger)
Make it visible against dark background
══════════════════════════════════════════════════ */
.fi-sidebar-close-btn,
.fi-sidebar-open-btn {
color: rgba(255, 255, 255, 0.5) !important;
}
.fi-sidebar-close-btn:hover,
.fi-sidebar-open-btn:hover {
color: rgba(255, 255, 255, 0.8) !important;
background: rgba(255, 255, 255, 0.06) !important;
}
/* ══════════════════════════════════════════════════
COLLAPSED STATE — icon-only mode
Override icon colors for dark bg when collapsed
══════════════════════════════════════════════════ */
/* When sidebar collapses to icons, the tooltip needs contrast */
.fi-sidebar-item-button[x-tooltip] .fi-sidebar-item-icon {
color: rgba(255, 255, 255, 0.5) !important;
}
/* ══════════════════════════════════════════════════
MOBILE OVERLAY — dark backdrop for sidebar
══════════════════════════════════════════════════ */
.fi-sidebar-close-overlay {
background: rgba(0, 0, 0, 0.6) !important;
}
/*
|--------------------------------------------------------------------------
| Internal Notes Custom Scrollbar
|--------------------------------------------------------------------------
*/
.lv-notes-scroll::-webkit-scrollbar {
width: 5px; /* Ultra-thin Mac style */
}
.lv-notes-scroll::-webkit-scrollbar-track {
background: transparent;
}
.lv-notes-scroll::-webkit-scrollbar-thumb {
background-color: var(--lv-border);
border-radius: 10px;
}
.lv-notes-scroll::-webkit-scrollbar-thumb:hover {
background-color: var(--lv-text-muted);
}
/*
|--------------------------------------------------------------------------
| Move-In Wizard — Form Styles
|--------------------------------------------------------------------------
|
| Append to the bottom of lease-view.css.
| Provides .lv-wizard-* classes for the wizard forms.
|
*/
/* ── Wizard Input ─────────────────────────────── */
.lv-wizard-input {
width: 100%;
padding: 8px 10px;
border-radius: var(--lv-radius-md);
border: 1px solid var(--lv-border);
background: var(--lv-bg-card);
font-family: var(--lv-font-body);
font-size: 12.5px;
color: var(--lv-text-primary);
line-height: 1.4;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
-webkit-appearance: none;
appearance: none;
}
.lv-wizard-input:focus {
border-color: var(--lv-accent);
box-shadow: 0 0 0 2px rgba(43, 90, 59, 0.1);
}
.lv-wizard-input::placeholder {
color: var(--lv-text-faint);
}
/* Selects need a caret */
select.lv-wizard-input {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239A9488' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 8px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 28px;
}
/* Textarea */
textarea.lv-wizard-input {
resize: vertical;
min-height: 60px;
}
/* ── Wizard Label ─────────────────────────────── */
.lv-wizard-label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--lv-text-secondary);
margin-bottom: 4px;
letter-spacing: 0.01em;
}
/* ── Validation Error ─────────────────────────── */
.lv-wizard-error {
display: block;
font-size: 11px;
color: var(--lv-danger);
font-weight: 500;
margin-top: 3px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ══════════════════════════════════════════════════════════════
EVICTION ACTION MODAL OVERRIDES
Double-class specificity to beat Tailwind utilities
══════════════════════════════════════════════════════════════ */
/* Modal shell — already working per your report */
.fi-modal-window {
border-radius: var(--lv-radius-2xl) !important;
border: 1px solid var(--lv-border) !important;
overflow: hidden !important;
}
/* Header */
.fi-modal-window.fi-modal-window .fi-modal-header {
padding: 16px 20px !important;
}
/* Content */
.fi-modal-window.fi-modal-window .fi-modal-content {
padding: 16px 20px !important;
gap: 14px !important;
}
/* Footer */
.fi-modal-window.fi-modal-window .fi-modal-footer {
padding: 12px 20px !important;
border-top: 1px solid var(--lv-border-faint) !important;
}
/* Heading */
.fi-modal-window.fi-modal-window .fi-modal-heading {
font-family: var(--lv-font-display) !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
color: var(--lv-text-primary) !important;
}
/* Description */
.fi-modal-window.fi-modal-window .fi-modal-header p {
font-size: 12px !important;
color: var(--lv-text-muted) !important;
margin-top: 4px !important;
}
/* ── Sections ── */
.fi-modal-window.fi-modal-window .fi-section {
border-radius: var(--lv-radius-lg) !important;
box-shadow: none !important;
/* override ring-1 ring-gray-950/5 */
--tw-ring-shadow: none !important;
--tw-shadow: none !important;
}
.fi-modal-window.fi-modal-window .fi-section-header {
padding: 10px 14px !important;
}
.fi-modal-window.fi-modal-window .fi-section-header-heading {
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: var(--lv-text-faint) !important;
/* override text-base */
line-height: 1.2 !important;
}
.fi-modal-window.fi-modal-window .fi-section-content {
padding: 12px 14px !important;
}
/* ── Form gaps ── */
.fi-modal-window.fi-modal-window .fi-fo-component-ctn {
gap: 12px !important;
}
/* ── Labels ──
Actual element:
No fi- class on the span, so we target the label wrapper + span */
.fi-modal-window.fi-modal-window .fi-fo-field-wrp-label span {
font-size: 11px !important;
font-weight: 600 !important;
color: var(--lv-text-secondary) !important;
/* override leading-6 */
line-height: 1.3 !important;
}
/* ── Helper text ──
Actual: class="fi-fo-field-wrp-helper-text break-words text-sm text-gray-500" */
.fi-modal-window.fi-modal-window .fi-fo-field-wrp-helper-text {
font-size: 11px !important;
color: var(--lv-text-muted) !important;
}
/* ── Input wrappers ── */
.fi-modal-window.fi-modal-window .fi-input-wrp {
border-radius: var(--lv-radius-md) !important;
/* override shadow-sm */
--tw-shadow: none !important;
box-shadow: 0 0 0 1px var(--lv-border) !important;
}
/* ── Text inputs ──
Actual: class="fi-input block w-full border-none py-1.5 ... sm:text-sm sm:leading-6" */
.fi-modal-window.fi-modal-window .fi-input {
font-size: 13px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
line-height: 1.4 !important;
}
/* ── Placeholder fields (read-only display values) ──
Actual: class="fi-fo-placeholder text-sm leading-6" */
.fi-modal-window.fi-modal-window .fi-fo-placeholder {
font-size: 12.5px !important;
color: var(--lv-text-secondary) !important;
font-weight: 600 !important;
line-height: 1.4 !important;
}
/* ── Choices.js select wrapper ──
Actual: div.choices > div.choices__inner */
.fi-modal-window.fi-modal-window .choices__inner {
border-radius: var(--lv-radius-md) !important;
font-size: 13px !important;
min-height: 38px !important;
padding: 4px 8px !important;
}
.fi-modal-window.fi-modal-window .choices__item--selectable {
font-size: 13px !important;
}
/* ── Date picker display input ──
Actual: class="fi-fo-date-time-picker-display-text-input w-full border-none ... sm:text-sm" */
.fi-modal-window.fi-modal-window .fi-fo-date-time-picker-display-text-input {
font-size: 13px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
/* ── Footer buttons ──
Submit: class="fi-btn ... fi-btn-color-primary fi-color-primary ... bg-custom-600"
Cancel: class="fi-btn ... fi-btn-color-gray fi-color-gray ... bg-white" */
.fi-modal-window.fi-modal-window .fi-modal-footer .fi-btn {
font-size: 12.5px !important;
padding: 7px 16px !important;
border-radius: var(--lv-radius-md) !important;
line-height: 1.3 !important;
}
/* Primary button — override bg-custom-600 via the custom property it uses */
.fi-modal-window.fi-modal-window .fi-btn-color-primary {
--c-400: var(--primary-400);
--c-500: 43, 90, 59; /* lv-accent as RGB for Tailwind opacity utilities */
--c-600: 43, 90, 59;
background-color: var(--lv-accent) !important;
}
.fi-modal-window.fi-modal-window .fi-btn-color-primary:hover {
background-color: #224a30 !important;
}
/* ==========================================================================
Notice Workflow Page
========================================================================== */
[x-cloak] { display: none !important; }
.lv-notice-workflow-page {
padding-bottom: 40px;
}
.lv-notice-workflow-shell {
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 18px;
}
.lv-notice-workflow-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.lv-header-main {
min-width: 0;
}
.lv-subtitle {
margin-top: 6px;
font-size: 12px;
color: var(--lv-text-muted);
}
/* Steps */
.lv-workflow-steps {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 0 18px;
border-bottom: 1px solid var(--lv-border-light);
flex-wrap: wrap;
}
.lv-workflow-step {
display: inline-flex;
align-items: center;
gap: 12px;
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
text-align: left;
}
.lv-workflow-step__num {
width: 34px;
height: 34px;
border-radius: 999px;
background: var(--lv-bg-muted);
color: var(--lv-text-faint);
border: 1px solid var(--lv-border);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.lv-workflow-step__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.lv-workflow-step__title {
font-size: 15px;
font-weight: 700;
color: var(--lv-text-secondary);
}
.lv-workflow-step__sub {
font-size: 12px;
color: var(--lv-text-faint);
}
.lv-workflow-step__divider {
width: 80px;
height: 2px;
background: var(--lv-border-light);
border-radius: 999px;
}
.lv-workflow-step.is-active .lv-workflow-step__num {
background: var(--lv-text-primary);
color: #fff;
border-color: var(--lv-text-primary);
}
.lv-workflow-step.is-active .lv-workflow-step__title {
color: var(--lv-text-primary);
}
/* Panels */
.lv-workflow-panel {
display: flex;
flex-direction: column;
gap: 18px;
}
.lv-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.lv-section-eyebrow {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lv-text-faint);
margin-bottom: 4px;
}
.lv-section-title {
font-size: 22px;
font-weight: 700;
font-family: var(--lv-font-display);
color: var(--lv-text-primary);
line-height: 1.2;
}
.lv-section-copy {
font-size: 13px;
color: var(--lv-text-muted);
line-height: 1.55;
}
/* KPI strip */
.lv-notices-kpi-strip {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.lv-notices-kpi {
flex: 1 1 140px;
background: var(--lv-bg-card);
border: 1px solid var(--lv-border);
border-radius: var(--lv-radius-2xl);
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 2px;
}
.lv-notices-kpi--warning {
border-left: 3px solid var(--lv-warning);
}
.lv-notices-kpi-value {
font-size: 22px;
font-weight: 800;
font-family: var(--lv-font-display);
color: var(--lv-text-primary);
line-height: 1;
}
.lv-notices-kpi-label {
font-size: 11px;
font-weight: 600;
color: var(--lv-text-faint);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Notices Hub - shared Filament table polish */
.lv-notices-page .fi-ta {
border-radius: 18px;
overflow: hidden;
background: var(--lv-bg-card);
box-shadow: none;
}
.lv-notices-page .fi-ta-filters {
padding: 0;
border: 0;
background: transparent;
}
.lv-notices-page .fi-ta-header-description,
.lv-notices-page .fi-ta-header p[class*='description'] {
display: none;
}
.lv-notices-page .fi-ta-text {
gap: 1px;
}
.lv-notices-page .fi-ta-text p {
margin: 0;
font-size: 10.5px;
line-height: 1.15;
color: var(--lv-text-faint);
}
.lv-notices-page .fi-ta-selection-indicator {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 40;
min-width: 520px;
max-width: calc(100vw - 96px);
padding: 10px 16px !important;
border-radius: 999px !important;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(28, 27, 24, 0.94) !important;
color: #fff;
box-shadow: 0 18px 40px rgba(28, 27, 24, 0.22) !important;
backdrop-filter: blur(12px);
}
.lv-notices-page .fi-ta-selection-indicator .fi-ac {
width: 100%;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.lv-notices-page .fi-ta-selection-indicator .fi-ac-btn-action .fi-btn {
min-height: 38px;
border-radius: 999px;
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.86);
}
.lv-notices-page .fi-ta-selection-indicator .fi-ac > .fi-ac-btn-action:first-child .fi-btn {
border-color: transparent;
background: var(--lv-success);
color: #fff;
box-shadow: none;
}
.lv-notices-page .fi-ta-selection-indicator .fi-ac-link-action {
color: rgba(255, 255, 255, 0.76) !important;
font-size: 11px;
}
.lv-notices-page .fi-ta-group-header {
padding: 8px 14px !important;
border-bottom: 1px solid var(--lv-border-faint) !important;
background: color-mix(in srgb, var(--lv-bg-muted) 70%, white 30%) !important;
}
.lv-notices-page .fi-ta-group-header h4 {
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
.lv-notices-page .fi-ta-group-header p {
font-size: 10.5px !important;
line-height: 1.2 !important;
color: var(--lv-text-muted) !important;
}
.lv-notices-page .lv-delivery-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 9px;
border-radius: 999px;
margin-right: 6px;
font-size: 11px;
font-weight: 700;
border: 1px solid transparent;
white-space: nowrap;
}
.lv-notices-page .lv-delivery-chip--info {
background: var(--lv-info-light);
border-color: var(--lv-info-border);
color: var(--lv-info);
}
.lv-notices-page .lv-delivery-chip--warning {
background: var(--lv-warning-light);
border-color: var(--lv-warning-border);
color: var(--lv-warning-dark);
}
.lv-notices-page .lv-delivery-chip--danger {
background: var(--lv-danger-light);
border-color: var(--lv-danger-border);
color: var(--lv-danger);
}
.lv-notices-page .lv-delivery-chip--violet {
background: #f5f3ff;
border-color: #ddd6fe;
color: #6d28d9;
}
.lv-notices-page .lv-delivery-chip--neutral {
background: var(--lv-bg-muted);
border-color: var(--lv-border-light);
color: var(--lv-text-muted);
}
/* Toolbar */
.lv-step-toolbar {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
/* Shared wizard stepper */
.lv-stepper {
display: flex;
align-items: flex-start;
gap: 0;
}
.lv-stepper__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
border: 0;
background: transparent;
text-align: center;
font: inherit;
color: inherit;
}
.lv-stepper__item.is-clickable {
cursor: pointer;
}
.lv-stepper__circle {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
font-family: var(--lv-font-display);
transition: all 0.2s ease;
}
.lv-stepper__circle--done {
background: var(--lv-success);
color: #fff;
}
.lv-stepper__circle--active {
background: var(--lv-text-primary);
color: #fff;
box-shadow: 0 0 0 3px rgba(28, 27, 24, 0.15);
}
.lv-stepper__circle--inactive {
background: var(--lv-bg-muted);
color: var(--lv-text-muted);
border: 1px solid var(--lv-border);
}
.lv-stepper__label {
margin-top: 6px;
text-align: center;
font-size: 11.5px;
font-weight: 600;
}
.lv-stepper__label--done {
color: var(--lv-success);
}
.lv-stepper__label--active {
color: var(--lv-text-primary);
}
.lv-stepper__label--inactive {
color: var(--lv-text-muted);
}
.lv-stepper__desc {
font-size: 10px;
color: var(--lv-text-faint);
margin-top: 1px;
}
.lv-stepper__connector {
flex: 0.6;
height: 2px;
margin-top: 17px;
background: var(--lv-border);
border-radius: 1px;
transition: background 0.3s ease;
}
.lv-stepper__connector--done {
background: var(--lv-success);
}
/* Shared modal */
.lv-modal {
position: fixed;
inset: 0;
z-index: 9999;
}
.lv-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.55);
}
.lv-modal__viewport {
position: absolute;
inset: 0;
overflow-y: auto;
padding: 16px;
}
.lv-modal__shell {
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.lv-modal__panel {
width: 100%;
max-width: 720px;
background: var(--lv-bg-card);
border: 1px solid var(--lv-border);
border-radius: 24px;
box-shadow: 0 24px 64px rgba(28, 27, 24, 0.22);
overflow: hidden;
}
.lv-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px 20px 16px;
border-bottom: 1px solid var(--lv-border-light);
}
.lv-modal__body {
padding: 20px;
}
@media (max-width: 640px) {
.lv-stepper__label {
font-size: 10.5px;
}
.lv-stepper__desc {
line-height: 1.2;
}
.lv-modal__viewport {
padding: 10px;
}
.lv-modal__panel {
border-radius: 20px;
}
.lv-modal__header,
.lv-modal__body {
padding-left: 16px;
padding-right: 16px;
}
}
.lv-workflow-table-wrap {
overflow: auto;
border: 1px solid var(--lv-border-light);
border-radius: var(--lv-radius-xl);
}
.lv-workflow-table {
width: 100%;
min-width: 980px;
border-collapse: collapse;
}
.lv-workflow-table thead th {
background: var(--lv-bg-muted);
border-bottom: 1px solid var(--lv-border-light);
padding: 12px;
text-align: left;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lv-text-faint);
}
.lv-workflow-table tbody td {
padding: 12px;
border-bottom: 1px solid var(--lv-border-faint);
vertical-align: middle;
font-size: 13px;
}
.lv-workflow-table tbody tr:hover {
background: var(--lv-bg-muted);
}
.lv-workflow-table tbody tr.is-selected {
background: rgba(0,0,0,0.03);
}
.lv-row-title {
font-size: 13px;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-row-sub {
margin-top: 2px;
font-size: 11px;
color: var(--lv-text-faint);
}
.lv-type-pill {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
border: 1px solid transparent;
}
.lv-type-pill.is-red {
background: #fef2f2;
color: #b91c1c;
border-color: #fecaca;
}
.lv-type-pill.is-amber {
background: #fffbeb;
color: #b45309;
border-color: #fde68a;
}
.lv-type-pill.is-blue {
background: #eff6ff;
color: #1d4ed8;
border-color: #bfdbfe;
}
.lv-flag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
.lv-flag--warning {
background: #fff7ed;
color: #c2410c;
}
.lv-flag--ok {
background: #f0fdf4;
color: #15803d;
}
.lv-delivery-select {
min-width: 190px;
}
.fi-input-wrp:has(.lv-delivery-select) {
min-height: 38px !important;
border-radius: 16px !important;
}
.fi-select-input.lv-delivery-select {
min-height: 38px;
padding-top: 4px !important;
padding-bottom: 4px !important;
padding-left: 12px !important;
padding-right: 34px !important;
font-size: 13px !important;
line-height: 1.2 !important;
}
.lv-notices-page .lv-delivery-select {
min-width: 126px;
width: 126px;
max-width: 126px;
}
.lv-notices-page .lv-delivery-select,
.lv-notices-page .lv-delivery-select + .fi-input-wrp-icon {
flex: 0 0 auto;
}
.is-clickable {
cursor: pointer;
}
/* Bulk bar */
.lv-bulk-bar {
position: sticky;
bottom: 18px;
z-index: 40;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 14px 18px;
border-radius: var(--lv-radius-2xl);
background: #111827;
color: #fff;
box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
.lv-bulk-bar__count {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
}
.lv-bulk-bar__bubble {
width: 32px;
height: 32px;
border-radius: 999px;
background: #22c55e;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
}
.lv-bulk-bar__controls {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* Review step */
.lv-review-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 18px;
}
.lv-review-col {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.lv-review-stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 18px;
}
.lv-review-stat {
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
border-radius: var(--lv-radius-lg);
padding: 14px;
}
.lv-review-stat__label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--lv-text-faint);
margin-bottom: 4px;
}
.lv-review-stat__value {
font-size: 24px;
font-weight: 800;
color: var(--lv-text-primary);
font-family: var(--lv-font-display);
}
.lv-preview-toggle-row {
margin-top: 18px;
}
.lv-batch-preview {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 10px;
max-height: 340px;
overflow: auto;
border-top: 1px solid var(--lv-border-light);
padding-top: 14px;
}
.lv-batch-preview__item {
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
border-radius: var(--lv-radius-lg);
padding: 12px 14px;
}
.lv-batch-preview__head {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 12px;
color: var(--lv-text-secondary);
margin-bottom: 6px;
}
.lv-batch-preview__body {
font-size: 12px;
color: var(--lv-text-muted);
line-height: 1.55;
}
.lv-batch-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.lv-batch-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--lv-border-light);
border-radius: var(--lv-radius-lg);
background: var(--lv-bg-muted);
}
.lv-batch-item__title {
font-size: 14px;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-batch-item__meta {
font-size: 12px;
color: var(--lv-text-muted);
margin-top: 2px;
}
.lv-batch-item__count {
font-size: 22px;
font-weight: 800;
color: var(--lv-text-primary);
font-family: var(--lv-font-display);
}
.lv-execute-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.lv-empty-lite {
color: var(--lv-text-muted);
font-size: 13px;
padding: 8px 0;
}
.lv-request-page {
background:
radial-gradient(circle at top left, rgba(52, 104, 154, 0.08), transparent 28%),
radial-gradient(circle at top right, rgba(39, 114, 74, 0.08), transparent 26%),
var(--lv-bg-page);
}
.lv-request-shell {
padding-top: 20px;
padding-bottom: 40px;
}
.lv-request-hero {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.7fr);
gap: 18px;
align-items: stretch;
margin-bottom: 18px;
}
.lv-request-hero__copy,
.lv-request-hero__aside {
border: 1px solid var(--lv-border);
border-radius: 24px;
box-shadow: var(--lv-shadow-card);
}
.lv-request-hero__copy {
padding: 28px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 238, 234, 0.9)),
var(--lv-bg-card);
}
.lv-request-hero__aside {
padding: 18px;
background:
linear-gradient(180deg, rgba(43, 90, 59, 0.08), rgba(43, 90, 59, 0.02)),
var(--lv-bg-card);
}
.lv-request-hero__eyebrow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.lv-request-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(43, 90, 59, 0.16);
background: rgba(43, 90, 59, 0.08);
color: var(--lv-accent);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.lv-request-pill--muted {
border-color: var(--lv-border);
background: rgba(255, 255, 255, 0.8);
color: var(--lv-text-secondary);
}
.lv-request-hero__title {
margin: 0;
max-width: 760px;
font-family: var(--lv-font-display);
font-size: 34px;
line-height: 1.02;
letter-spacing: -0.05em;
color: var(--lv-text-primary);
}
.lv-request-hero__body {
margin: 14px 0 0;
max-width: 660px;
font-size: 14px;
line-height: 1.65;
color: var(--lv-text-secondary);
}
.lv-request-progress-card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
border-radius: 20px;
border: 1px solid rgba(43, 90, 59, 0.12);
background: rgba(255, 255, 255, 0.78);
padding: 18px;
}
.lv-request-progress-card__label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--lv-text-faint);
}
.lv-request-progress-card__value {
font-family: var(--lv-font-display);
font-size: 28px;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--lv-text-primary);
}
.lv-request-progress-card__meta {
font-size: 13px;
line-height: 1.55;
color: var(--lv-text-secondary);
}
.lv-request-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.lv-request-step {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
border: 1px solid var(--lv-border);
border-radius: 20px;
background: rgba(255, 255, 255, 0.88);
padding: 14px 16px;
text-align: left;
box-shadow: var(--lv-shadow-card);
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.lv-request-step:hover {
transform: translateY(-1px);
}
.lv-request-step--active {
border-color: rgba(43, 90, 59, 0.22);
background: linear-gradient(135deg, rgba(43, 90, 59, 0.96), rgba(28, 27, 24, 0.96));
}
.lv-request-step__number {
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(28, 27, 24, 0.07);
color: var(--lv-text-primary);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
}
.lv-request-step--active .lv-request-step__number {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.lv-request-step__text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.lv-request-step__title {
font-size: 14px;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-request-step__meta {
font-size: 12px;
color: var(--lv-text-faint);
}
.lv-request-step--active .lv-request-step__title,
.lv-request-step--active .lv-request-step__meta {
color: #fff;
}
.lv-request-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.lv-request-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 18px;
align-items: start;
}
.lv-request-main,
.lv-request-sidebar {
min-width: 0;
}
.lv-request-main {
display: flex;
flex-direction: column;
gap: 18px;
}
.lv-request-sidebar {
display: flex;
flex-direction: column;
gap: 14px;
position: sticky;
top: 16px;
}
.lv-request-panel {
border: 1px solid var(--lv-border);
border-radius: 24px;
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--lv-shadow-card);
padding: 22px;
}
.lv-request-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding-bottom: 16px;
margin-bottom: 18px;
border-bottom: 1px solid var(--lv-border-light);
}
.lv-request-section-head__eyebrow {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--lv-text-faint);
margin-bottom: 6px;
}
.lv-request-section-head__title {
margin: 0;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.04em;
font-family: var(--lv-font-display);
color: var(--lv-text-primary);
}
.lv-request-section-head__body {
margin: 8px 0 0;
max-width: 620px;
font-size: 13px;
line-height: 1.6;
color: var(--lv-text-secondary);
}
.lv-request-context-card {
border: 1px solid var(--lv-border);
border-radius: 22px;
background: linear-gradient(180deg, rgba(240, 238, 234, 0.92), rgba(255, 255, 255, 0.92));
padding: 18px;
}
.lv-request-context-grid,
.lv-request-field-grid {
display: grid;
gap: 16px;
}
.lv-request-field-grid--two,
.lv-request-context-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lv-request-context-grid > :last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.lv-request-context-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--lv-text-faint);
}
.lv-request-context-value {
margin-top: 6px;
font-size: 14px;
font-weight: 600;
color: var(--lv-text-primary);
}
.lv-request-field {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 18px;
}
.lv-request-label {
font-size: 13px;
font-weight: 700;
color: var(--lv-text-secondary);
}
.lv-request-input {
width: 100%;
border: 1px solid var(--lv-border);
border-radius: 18px;
background: rgba(255, 255, 255, 0.96);
padding: 13px 15px;
font-size: 14px;
color: var(--lv-text-primary);
box-shadow: 0 1px 1px rgba(28, 27, 24, 0.03);
}
.lv-request-input:focus {
outline: none;
border-color: rgba(43, 90, 59, 0.35);
box-shadow: 0 0 0 4px rgba(43, 90, 59, 0.08);
}
.lv-request-input--textarea {
resize: vertical;
min-height: 138px;
line-height: 1.55;
}
.lv-request-help {
font-size: 12px;
color: var(--lv-text-faint);
}
.lv-request-choice-grid {
display: grid;
gap: 10px;
}
.lv-request-choice-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lv-request-choice {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
padding: 16px;
text-align: left;
border-radius: 18px;
border: 1px solid var(--lv-border);
background: rgba(255, 255, 255, 0.96);
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.lv-request-choice:hover {
transform: translateY(-1px);
}
.lv-request-choice--active {
border-color: rgba(166, 123, 10, 0.34);
background: rgba(255, 249, 234, 0.95);
}
.lv-request-choice--success {
border-color: rgba(39, 114, 74, 0.28);
background: rgba(236, 245, 240, 0.95);
}
.lv-request-choice--warning {
border-color: rgba(166, 123, 10, 0.28);
background: rgba(255, 249, 234, 0.95);
}
.lv-request-choice--danger {
border-color: rgba(190, 58, 27, 0.26);
background: rgba(254, 241, 237, 0.96);
}
.lv-request-choice__title {
font-size: 14px;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-request-choice__body {
font-size: 12px;
line-height: 1.5;
color: var(--lv-text-faint);
}
.lv-request-alert {
border-radius: 22px;
padding: 18px;
border: 1px solid;
}
.lv-request-alert--warning {
border-color: var(--lv-warning-border);
background: linear-gradient(180deg, rgba(255, 249, 234, 0.94), rgba(255, 255, 255, 0.94));
}
.lv-request-alert--danger {
border-color: var(--lv-danger-border);
background: rgba(254, 241, 237, 0.94);
}
.lv-request-alert__title {
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--lv-warning-dark);
}
.lv-request-alert--danger .lv-request-alert__title {
color: var(--lv-danger);
}
.lv-request-alert__body {
margin-top: 4px;
font-size: 13px;
color: var(--lv-text-secondary);
}
.lv-request-alert__stack {
margin-top: 14px;
display: grid;
gap: 10px;
}
.lv-request-alert__tile,
.lv-request-alert__footer {
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.05);
background: rgba(255, 255, 255, 0.72);
padding: 12px 14px;
font-size: 13px;
line-height: 1.55;
color: var(--lv-text-primary);
}
.lv-request-alert__footer {
margin-top: 14px;
color: var(--lv-danger);
}
.lv-request-window-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.lv-request-window {
display: flex;
align-items: center;
gap: 10px;
border-radius: 18px;
border: 1px solid var(--lv-border);
background: rgba(240, 238, 234, 0.82);
padding: 14px 16px;
font-size: 13px;
font-weight: 600;
color: var(--lv-text-secondary);
}
.lv-request-window--active {
border-color: rgba(43, 90, 59, 0.26);
background: rgba(236, 245, 240, 0.96);
color: var(--lv-text-primary);
}
.lv-request-window--disabled {
background: rgba(255, 255, 255, 0.7);
color: var(--lv-text-faint);
}
.lv-request-upload-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 2px dashed var(--lv-border);
border-radius: 24px;
background:
linear-gradient(180deg, rgba(240, 238, 234, 0.72), rgba(255, 255, 255, 0.88));
padding: 30px 22px;
}
.lv-request-upload-card__icon {
width: 58px;
height: 58px;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--lv-text-faint);
box-shadow: var(--lv-shadow-card);
}
.lv-request-upload-card__title {
margin-top: 14px;
font-size: 18px;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-request-upload-card__body {
margin-top: 8px;
max-width: 420px;
font-size: 13px;
line-height: 1.6;
color: var(--lv-text-secondary);
}
.lv-request-upload-card__button {
margin-top: 18px;
}
.lv-request-upload-list {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.lv-request-upload-list__item {
border: 1px solid var(--lv-border);
border-radius: 18px;
background: rgba(255, 255, 255, 0.95);
padding: 14px;
}
.lv-request-upload-list__title {
font-size: 13px;
font-weight: 700;
color: var(--lv-text-primary);
word-break: break-word;
}
.lv-request-upload-list__meta {
margin-top: 4px;
font-size: 11px;
color: var(--lv-text-faint);
}
.lv-request-review-grid {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.lv-request-review-card {
border: 1px solid var(--lv-border);
border-radius: 18px;
background: rgba(240, 238, 234, 0.72);
padding: 14px;
}
.lv-request-review-card__label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--lv-text-faint);
}
.lv-request-review-card__value {
margin-top: 6px;
font-size: 14px;
font-weight: 700;
line-height: 1.45;
color: var(--lv-text-primary);
}
.lv-request-summary-card,
.lv-request-next-card,
.lv-request-note-card {
border: 1px solid var(--lv-border);
border-radius: 22px;
box-shadow: var(--lv-shadow-card);
}
.lv-request-summary-card {
background: linear-gradient(180deg, rgba(28, 27, 24, 0.96), rgba(43, 90, 59, 0.94));
padding: 20px;
}
.lv-request-summary-card__eyebrow,
.lv-request-next-card__eyebrow,
.lv-request-note-card__eyebrow {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.lv-request-summary-card__eyebrow {
color: rgba(255, 255, 255, 0.66);
}
.lv-request-summary-card__title {
margin-top: 10px;
font-size: 20px;
line-height: 1.15;
letter-spacing: -0.04em;
font-family: var(--lv-font-display);
color: #fff;
}
.lv-request-summary-card__grid {
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.lv-request-summary-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 12px;
}
.lv-request-summary-row span {
color: rgba(255, 255, 255, 0.68);
}
.lv-request-summary-row strong {
text-align: right;
font-size: 12px;
color: #fff;
}
.lv-request-summary-row__accent {
color: #F4D57F !important;
}
.lv-request-next-card {
background: rgba(255, 255, 255, 0.92);
padding: 18px;
}
.lv-request-next-card__eyebrow {
color: var(--lv-text-faint);
}
.lv-request-next-card__stack {
margin-top: 14px;
display: grid;
gap: 10px;
}
.lv-request-next-card__item {
border-radius: 16px;
border: 1px solid var(--lv-border);
background: rgba(240, 238, 234, 0.72);
padding: 12px 13px;
font-size: 13px;
line-height: 1.55;
color: var(--lv-text-secondary);
}
.lv-request-note-card {
background: linear-gradient(180deg, rgba(255, 249, 234, 0.96), rgba(255, 255, 255, 0.96));
padding: 18px;
}
.lv-request-note-card__eyebrow {
color: var(--lv-warning);
}
.lv-request-note-card__body {
margin-top: 10px;
font-size: 13px;
line-height: 1.55;
color: var(--lv-text-primary);
}
.lv-request-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--lv-border);
border-radius: 22px;
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--lv-shadow-card);
padding: 14px 16px;
}
.lv-request-footer__meta {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lv-text-faint);
}
.lv-request-footer__actions {
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 1120px) {
.lv-request-layout {
grid-template-columns: minmax(0, 1fr);
}
.lv-request-sidebar {
position: static;
order: -1;
}
.lv-request-hero {
grid-template-columns: minmax(0, 1fr);
}
.lv-request-upload-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.lv-request-shell {
padding-top: 16px;
padding-bottom: 28px;
}
.lv-request-hero__copy,
.lv-request-hero__aside,
.lv-request-panel,
.lv-request-summary-card,
.lv-request-next-card,
.lv-request-note-card,
.lv-request-footer {
border-radius: 20px;
}
.lv-request-hero__copy,
.lv-request-panel,
.lv-request-summary-card,
.lv-request-next-card,
.lv-request-note-card {
padding: 18px;
}
.lv-request-hero__title {
font-size: 28px;
}
.lv-request-steps,
.lv-request-field-grid--two,
.lv-request-choice-grid--two,
.lv-request-window-grid,
.lv-request-review-grid,
.lv-request-context-grid,
.lv-request-upload-list {
grid-template-columns: minmax(0, 1fr);
}
.lv-request-step {
padding: 13px 14px;
}
.lv-request-step__number {
width: 36px;
height: 36px;
border-radius: 12px;
}
.lv-request-section-head__title {
font-size: 22px;
}
.lv-request-choice,
.lv-request-window {
padding: 14px;
}
.lv-request-footer {
flex-direction: column;
align-items: stretch;
}
.lv-request-footer__meta {
text-align: center;
order: -1;
}
.lv-request-footer__actions {
width: 100%;
}
.lv-request-footer__actions .lv-btn,
.lv-request-footer > .lv-btn {
width: 100%;
justify-content: center;
}
}
.lv-request-stepbar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 14px;
}
.lv-request-stepbar__item {
border: 1px solid var(--lv-border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.92);
padding: 10px 12px;
font-size: 12px;
font-weight: 700;
color: var(--lv-text-secondary);
text-align: left;
}
.lv-request-stepbar__item--active {
border-color: rgba(43, 90, 59, 0.22);
color: var(--lv-accent);
background: rgba(236, 245, 240, 0.92);
}
.lv-request-panel {
border-radius: 16px;
box-shadow: none;
background: rgba(255, 255, 255, 0.96);
padding: 18px;
}
.lv-request-section-head {
padding-bottom: 12px;
margin-bottom: 14px;
}
.lv-request-section-head__title {
font-size: 22px;
}
.lv-request-context-card {
padding: 14px;
border-radius: 16px;
background: rgba(240, 238, 234, 0.65);
}
.lv-request-input {
border-radius: 14px;
padding: 12px 13px;
}
.lv-request-choice,
.lv-request-window,
.lv-request-alert,
.lv-request-upload-card,
.lv-request-review-card,
.lv-request-summary-card,
.lv-request-next-card,
.lv-request-note-card,
.lv-request-footer {
border-radius: 16px;
box-shadow: none;
}
.lv-request-choice,
.lv-request-window {
padding: 12px 13px;
}
.lv-request-choice__title,
.lv-request-window,
.lv-request-review-card__value,
.lv-request-summary-card__title {
font-size: 13px;
}
.lv-request-upload-card {
padding: 22px 18px;
}
.lv-request-summary-card {
background: rgba(255, 255, 255, 0.96);
padding: 16px;
}
.lv-request-summary-card__eyebrow,
.lv-request-next-card__eyebrow,
.lv-request-note-card__eyebrow {
color: var(--lv-text-faint);
}
.lv-request-summary-card__title {
color: var(--lv-text-primary);
font-size: 17px;
}
.lv-request-summary-row {
border-top-color: var(--lv-border-light);
}
.lv-request-summary-row span {
color: var(--lv-text-faint);
}
.lv-request-summary-row strong {
color: var(--lv-text-primary);
}
.lv-request-summary-row__accent {
color: var(--lv-warning) !important;
}
.lv-request-next-card,
.lv-request-note-card {
background: rgba(255, 255, 255, 0.96);
padding: 16px;
}
.lv-request-review-card {
background: rgba(255, 255, 255, 0.96);
border: 1px solid var(--lv-border-light);
padding: 12px;
}
.lv-request-footer {
padding: 12px 14px;
}
@media (max-width: 767px) {
.lv-request-stepbar {
grid-template-columns: 1fr;
}
.lv-request-summary-card__title {
font-size: 16px;
}
}
/* Print & deliver */
.lv-run-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.lv-run-card {
border-radius: var(--lv-radius-2xl);
border: 1px solid var(--lv-border);
background: var(--lv-bg-card);
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
.lv-run-card.is-print {
border-left: 4px solid var(--lv-warning);
}
.lv-run-card.is-certified {
border-left: 4px solid var(--lv-danger);
}
.lv-run-card__title {
font-size: 18px;
font-weight: 700;
color: var(--lv-text-primary);
font-family: var(--lv-font-display);
}
.lv-run-card__meta {
font-size: 12px;
color: var(--lv-text-muted);
margin-top: 4px;
}
.lv-run-card__body {
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
border-radius: var(--lv-radius-lg);
padding: 14px;
}
.lv-run-card__property {
font-size: 13px;
color: var(--lv-text-secondary);
margin-bottom: 8px;
}
.lv-run-card__copy {
font-size: 13px;
color: var(--lv-text-muted);
line-height: 1.55;
}
.lv-run-card__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.lv-empty-state {
min-height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.lv-empty-state__icon {
width: 48px;
height: 48px;
color: var(--lv-text-faint);
opacity: 0.35;
}
.lv-empty-state__title {
font-size: 16px;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-empty-state__copy {
font-size: 13px;
color: var(--lv-text-muted);
}
/* Completed runs */
.lv-ops-run-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.lv-ops-table__title {
font-size: 13px;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-ops-table__meta {
margin-top: 2px;
font-size: 11px;
color: var(--lv-text-faint);
}
/* Modal */
.lv-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(17, 24, 39, 0.46);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 1000;
}
.lv-modal {
width: 100%;
max-width: 760px;
background: var(--lv-bg-card);
border: 1px solid var(--lv-border);
border-radius: var(--lv-radius-2xl);
box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}
.lv-modal__head,
.lv-modal__foot {
padding: 20px 22px;
}
.lv-modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--lv-border-light);
}
.lv-modal__body {
padding: 20px 22px;
}
.lv-modal__foot {
display: flex;
justify-content: flex-end;
gap: 10px;
border-top: 1px solid var(--lv-border-light);
}
.lv-modal__close {
border: 0;
background: transparent;
font-size: 24px;
line-height: 1;
cursor: pointer;
color: var(--lv-text-muted);
}
.lv-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.lv-form-grid__full {
grid-column: 1 / -1;
}
/* Responsive */
@media (max-width: 1100px) {
.lv-review-grid,
.lv-run-grid,
.lv-ops-run-grid,
.lv-form-grid {
grid-template-columns: 1fr;
}
.lv-workflow-step__divider {
display: none;
}
}
@media (max-width: 767px) {
.lv-messages-layout {
grid-template-columns: 1fr !important;
}
}
/* ══════════════════════════════════════════════════════════════
FILAMENT FORM OVERRIDES — lv- design language
Applies to Create/Edit resource pages and action modals
══════════════════════════════════════════════════════════════ */
/* ── Page chrome ────────────────────────────────────────────── */
/* Page heading */
.fi-header-heading {
font-family: var(--lv-font-display) !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}
/* Subheading / breadcrumbs */
.fi-header-subheading {
font-size: 12px !important;
color: var(--lv-text-muted) !important;
}
/* ── Sections ───────────────────────────────────────────────── */
/* Section card — flat, subtle border */
.fi-section {
box-shadow: none !important;
border: 1px solid var(--lv-border-light) !important;
border-radius: var(--lv-radius-lg) !important;
background: var(--lv-bg-card) !important;
}
.fi-section-content-ctn {
border-color: var(--lv-border-faint) !important;
}
/* Section header — uppercase label style */
.fi-section-header {
padding: 12px 16px !important;
}
.fi-section-header-heading {
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: var(--lv-text-faint) !important;
}
.fi-section-header-description {
font-size: 11px !important;
color: var(--lv-text-muted) !important;
}
/* Section content — tighter */
.fi-section-content {
padding: 14px 16px !important;
}
/* ── Form fields ────────────────────────────────────────────── */
/* Field labels */
.fi-fo-field-wrp-label span {
font-size: 11px !important;
font-weight: 600 !important;
color: var(--lv-text-secondary) !important;
letter-spacing: 0.01em !important;
}
/* Required asterisk */
.fi-fo-field-wrp-label sup {
color: var(--lv-danger) !important;
}
/* Helper text */
.fi-fo-field-wrp-helper-text {
font-size: 11px !important;
color: var(--lv-text-muted) !important;
}
/* Input wrapper — border radius + ring color */
.fi-input-wrp {
border-radius: var(--lv-radius-md) !important;
}
.fi-input-wrp:focus-within {
--tw-ring-color: var(--lv-accent) !important;
}
/* Text input — tighter */
.fi-input {
font-size: 13px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
font-family: var(--lv-font-body) !important;
}
/* Input prefix ($ signs etc) */
.fi-input-wrp-prefix span {
font-size: 12px !important;
color: var(--lv-text-faint) !important;
}
/* Placeholder values */
.fi-fo-placeholder {
font-size: 13px !important;
color: var(--lv-text-secondary) !important;
font-weight: 600 !important;
}
/* Textarea */
.fi-fo-textarea textarea {
font-size: 13px !important;
font-family: var(--lv-font-body) !important;
}
/* Grid gap — tighter */
.fi-fo-component-ctn {
gap: 14px !important;
}
/* ── Selects / Choices.js ───────────────────────────────────── */
.choices__inner {
min-height: 36px !important;
padding: 4px 10px !important;
border-radius: var(--lv-radius-md) !important;
font-size: 13px !important;
border: none !important;
background: transparent !important;
}
.choices__item--selectable,
.choices__item--choice {
font-size: 13px !important;
}
.choices__list--dropdown {
border-radius: var(--lv-radius-lg) !important;
border: 1px solid var(--lv-border) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
background: var(--lv-bg-muted) !important;
color: var(--lv-text-primary) !important;
}
/* ── Date picker ────────────────────────────────────────────── */
.fi-fo-date-time-picker-display-text-input {
font-size: 13px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
font-family: var(--lv-font-body) !important;
}
.fi-fo-date-time-picker-panel {
border-radius: var(--lv-radius-lg) !important;
border: 1px solid var(--lv-border) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
/* ── Toggles ────────────────────────────────────────────────── */
.fi-toggle-input:checked {
background-color: var(--lv-accent) !important;
}
.fi-toggle-input:checked:focus {
--tw-ring-color: var(--lv-accent) !important;
}
/* ── File upload ────────────────────────────────────────────── */
.fi-fo-file-upload .filepond--root {
font-family: var(--lv-font-body) !important;
font-size: 12px !important;
}
.fi-fo-file-upload .filepond--panel-root {
border-radius: var(--lv-radius-lg) !important;
border: 1px dashed var(--lv-border) !important;
background: var(--lv-bg-muted) !important;
}
/* ── Buttons ────────────────────────────────────────────────── */
/* Primary action buttons (Submit, Save) */
.fi-btn-color-primary {
background: var(--lv-accent) !important;
border-radius: var(--lv-radius-md) !important;
font-size: 12.5px !important;
padding: 8px 18px !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
}
.fi-btn-color-primary:hover {
background: var(--lv-accent-hover, #a33218) !important;
}
.fi-btn-color-primary:focus-visible {
--tw-ring-color: var(--lv-accent) !important;
}
/* Gray / cancel buttons */
.fi-btn-color-gray {
border-radius: var(--lv-radius-md) !important;
font-size: 12.5px !important;
padding: 8px 18px !important;
font-weight: 600 !important;
}
/* Danger buttons */
.fi-btn-color-danger {
border-radius: var(--lv-radius-md) !important;
font-size: 12.5px !important;
}
/* ── Modals (same rules, scoped) ────────────────────────────── */
.fi-modal-window {
border-radius: var(--lv-radius-2xl, 16px) !important;
border: 1px solid var(--lv-border) !important;
}
.fi-modal-content {
padding: 16px 20px !important;
gap: 14px !important;
}
.fi-modal-header {
padding: 16px 20px !important;
}
.fi-modal-footer {
padding: 12px 20px !important;
}
.lv-portal-page .fi-modal-footer .fi-btn-color-primary {
background: var(--lv-accent) !important;
border-color: var(--lv-accent) !important;
color: #fff !important;
min-width: 120px;
}
.lv-portal-page .fi-modal-footer .fi-btn-color-primary:hover {
background: var(--lv-text-secondary) !important;
}
.lv-portal-page .fi-modal-footer .fi-btn-label,
.lv-portal-page .fi-modal-footer .fi-icon {
color: #fff !important;
}
.fi-modal-heading {
font-family: var(--lv-font-display) !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
.fi-modal-description {
font-size: 12px !important;
color: var(--lv-text-muted) !important;
}
/* ── Tables inside forms (relation managers etc) ────────────── */
.fi-ta-header-toolbar {
padding: 10px 14px !important;
}
/* ── Tabs (if used in create forms) ─────────────────────────── */
.fi-tabs-item-button {
font-size: 12px !important;
font-weight: 600 !important;
}
.fi-tabs-item-button[aria-selected="true"] {
color: var(--lv-accent) !important;
border-color: var(--lv-accent) !important;
}
/* ── Notifications — match accent ───────────────────────────── */
.fi-notification {
border-radius: var(--lv-radius-lg) !important;
}
/* Constrain form width — no field needs 1200px */
.fi-form {
max-width: 960px !important;
}
/* fix */
/* Page sub-navigation sidebar should stay light, not inherit dark main sidebar styles */
.fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item-label {
color: var(--lv-text-secondary) !important;
}
.fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item-active .fi-sidebar-item-label {
color: var(--lv-accent) !important;
font-weight: 700 !important;
}
.fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item-icon {
color: var(--lv-text-muted) !important;
}
.fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item-active .fi-sidebar-item-icon {
color: var(--lv-accent) !important;
}
.fi-page-sub-navigation-sidebar-ctn .fi-sidebar-item-button:hover {
background: var(--lv-bg-muted) !important;
}
/* Filament tables: keep the bulk-select gutter compact. */
.fi-ta-table .fi-ta-selection-cell,
.fi-ta-table .fi-ta-group-selection-cell {
width: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.fi-ta-table .fi-ta-selection-cell > div,
.fi-ta-table .fi-ta-group-selection-cell > div {
padding-left: 6px !important;
padding-right: 4px !important;
}
.fi-ta-table .fi-ta-selection-cell label,
.fi-ta-table .fi-ta-group-selection-cell label {
justify-content: center !important;
}
.fi-ta-table .fi-ta-header-cell {
padding-top: 9px !important;
padding-bottom: 9px !important;
}
.fi-ta-table .fi-ta-header-cell > span {
min-height: 0 !important;
gap: 6px !important;
line-height: 1.1 !important;
}
.fi-ta-table .fi-ta-header-cell-label {
line-height: 1.1 !important;
}
.fi-ta-table th.fi-ta-selection-cell > div,
.fi-ta-table .fi-ta-actions-header-cell {
padding-top: 9px !important;
padding-bottom: 9px !important;
}
@media (max-width: 639px) {
.lv-resource-list-page .fi-header {
position: relative !important;
padding-right: 104px !important;
min-height: 42px !important;
}
.lv-resource-list-page .fi-header > div:last-child {
position: absolute !important;
top: 0 !important;
right: 0 !important;
margin-top: 0 !important;
gap: 0 !important;
}
.lv-resource-list-page .fi-header .fi-ac {
gap: 0 !important;
}
.lv-resource-list-page .fi-header .fi-btn {
min-height: 34px !important;
padding: 7px 10px !important;
font-size: 12px !important;
line-height: 1 !important;
}
}
@media (max-width: 767px) {
.fi-ta-table .fi-ta-selection-cell,
.fi-ta-table .fi-ta-group-selection-cell {
width: 24px !important;
min-width: 24px !important;
max-width: 24px !important;
}
.fi-ta-table .fi-ta-selection-cell > div,
.fi-ta-table .fi-ta-group-selection-cell > div {
padding-left: 4px !important;
padding-right: 2px !important;
}
.fi-ta-table:has(.lv-resource-mobile-card-cell) .lv-resource-mobile-card-cell {
width: auto !important;
min-width: 0 !important;
}
.fi-ta-table:has(.lv-resource-mobile-card-cell) .fi-ta-actions-cell {
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.fi-ta-table:has(.lv-resource-mobile-card-cell) .fi-ta-actions-cell > div {
padding-left: 2px !important;
padding-right: 4px !important;
}
.fi-ta-table:has(.lv-resource-mobile-card-cell) .fi-ta-actions {
gap: 2px !important;
}
.fi-ta-table:has(.lv-leases-mobile-card-cell) .fi-ta-actions-cell {
width: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
}
}
/* ── Eviction Case Page ─────────────────────────────── */
.lv-eviction-page-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 20px;
align-items: start;
}
.lv-eyebrow {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lv-text-faint);
}
.lv-snapshot-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.lv-action-card-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.lv-eviction-page-grid.is-resolved .lv-eviction-rail .step-future {
opacity: 0.35;
}
@media (max-width: 639px) {
.lv-action-card-buttons button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 767px) {
.lv-eviction-page-grid.is-resolved .lv-eviction-rail {
display: none;
}
}
@media (max-width: 639px) {
.lv-snapshot-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.lv-eviction-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.lv-page-header--static {
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--lv-border);
}
.lv-eviction-rail {
position: sticky;
top: 16px;
align-self: start;
}
@media (max-width: 767px) {
.lv-eviction-page-grid {
grid-template-columns: 1fr;
}
.lv-eviction-rail {
position: static;
order: 2; /* push rail below action card on mobile */
}
.lv-eviction-content {
order: 1;
}
}
/* ==========================================================================
Communications Page (.lv-comm-*)
Three-column inbox: list | thread | context rail
========================================================================== */
/* ── Shell ──────────────────────────────────────────────────────────────── */
.lv-comm-shell {
display: grid;
grid-template-columns: 320px 1fr 300px;
gap: 0;
height: calc(100vh - 130px);
min-height: 600px;
border: 1px solid var(--lv-border);
border-radius: 12px;
overflow: hidden;
background: var(--lv-bg-card);
position: relative;
}
/* ── Left column — conversation list ───────────────────────────────────── */
.lv-comm-list {
display: flex;
flex-direction: column;
border-right: 1px solid var(--lv-border-light);
overflow: hidden;
background: var(--lv-bg-page);
}
.lv-comm-search-wrap {
padding: 10px 10px 0;
flex-shrink: 0;
}
.lv-comm-search-row {
display: flex;
align-items: center;
gap: 6px;
}
.lv-comm-search-inner {
position: relative;
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.lv-comm-search-icon {
position: absolute;
left: 9px;
width: 14px;
height: 14px;
color: var(--lv-text-muted);
pointer-events: none;
}
.lv-comm-search-input {
width: 100%;
padding: 7px 10px 7px 30px;
border: 1px solid var(--lv-border-light);
border-radius: 7px;
font-size: 13px;
font-family: var(--lv-font-body);
background: var(--lv-bg-card);
color: var(--lv-text-primary);
outline: none;
box-sizing: border-box;
}
.lv-comm-search-input:focus {
border-color: var(--lv-primary);
}
.lv-comm-new-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
border: 1px solid var(--lv-primary);
border-radius: 7px;
background: var(--lv-primary);
color: #fff;
cursor: pointer;
}
.lv-comm-new-icon-btn:hover {
filter: brightness(0.96);
}
/* Filter tabs */
.lv-comm-filter-tabs {
display: flex;
gap: 0;
padding: 8px 10px 0;
flex-shrink: 0;
border-bottom: 1px solid var(--lv-border-faint);
overflow-x: auto;
/* Hide scrollbar chrome — tabs still scroll on small widths */
scrollbar-width: none;
}
.lv-comm-filter-tabs::-webkit-scrollbar {
display: none;
}
.lv-comm-filter-tab {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
font-size: 12px;
font-family: var(--lv-font-body);
font-weight: 500;
color: var(--lv-text-muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
margin-bottom: -1px;
}
.lv-comm-filter-tab--active {
color: var(--lv-primary);
border-bottom-color: var(--lv-primary);
font-weight: 600;
}
.lv-comm-tab-badge {
background: var(--lv-primary);
color: #fff;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
padding: 1px 5px;
line-height: 1.5;
}
/* Secondary filters */
.lv-comm-secondary-filters {
display: flex;
gap: 6px;
padding: 8px 10px 0;
flex-shrink: 0;
}
.lv-comm-filter-select {
/* flex: 1 lives in the sidebar context below, not on the base rule,
so the same class can be reused in the thread header without stretching */
padding: 5px 26px 5px 8px; /* right pad makes room for custom chevron */
border: 1px solid var(--lv-border-light);
border-radius: 6px;
font-size: 12px;
font-family: var(--lv-font-body);
background-color: var(--lv-bg-card);
/* Suppress native browser arrow and replace with a single clean SVG chevron */
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A9488' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
color: var(--lv-text-secondary);
outline: none;
cursor: pointer;
}
.lv-comm-filter-select:focus {
border-color: var(--lv-border);
}
/* In the sidebar secondary-filters row both selects should share the space equally */
.lv-comm-secondary-filters .lv-comm-filter-select {
flex: 1;
}
/* Conversation rows */
.lv-comm-rows {
flex: 1;
overflow-y: auto;
}
.lv-comm-row {
display: flex;
gap: 7px;
width: 100%;
text-align: left;
background: transparent;
border: none;
border-left: 3px solid transparent;
border-bottom: 1px solid var(--lv-border-faint);
padding: 8px 11px 8px 8px;
cursor: pointer;
transition: background 0.1s;
}
.lv-comm-row:hover {
background: var(--lv-bg-muted);
}
.lv-comm-row--active {
background: var(--lv-bg-muted);
border-left-color: var(--lv-primary);
}
.lv-comm-row--needs-reply {
border-left-color: var(--lv-warning);
}
.lv-comm-row--active.lv-comm-row--needs-reply {
border-left-color: var(--lv-primary);
}
.lv-comm-row-dot-col {
width: 7px;
flex-shrink: 0;
padding-top: 5px;
}
.lv-comm-unread-dot {
display: block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--lv-primary);
}
.lv-comm-row-body {
flex: 1;
min-width: 0;
}
.lv-comm-row-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 6px;
}
.lv-comm-row-tenant {
font-size: 13px;
color: var(--lv-text-primary);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lv-comm-row-tenant--bold {
font-weight: 700;
}
.lv-comm-row-time {
font-size: 10.5px;
color: var(--lv-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.lv-comm-row-subject {
flex-shrink: 0;
font-size: 12px;
color: var(--lv-text-primary);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 48%;
}
.lv-comm-row-preview {
min-width: 0;
font-size: 12px;
color: var(--lv-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lv-comm-row-summary {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
margin-top: 1px;
}
.lv-comm-row-summary .lv-comm-row-preview::before {
content: "•";
margin-right: 6px;
color: var(--lv-text-muted);
}
.lv-comm-row-meta {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
align-items: center;
}
.lv-comm-needs-reply-chip {
font-size: 10px;
padding: 1px 5px;
border-radius: 4px;
background: var(--lv-warning-light, #FFF8E0);
color: var(--lv-warning);
border: 1px solid var(--lv-warning-border, #FFE082);
font-weight: 600;
}
.lv-comm-row-property {
display: none;
font-size: 10.5px;
color: var(--lv-text-muted);
margin-left: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}
/* Assignee chip in conversation list rows */
.lv-comm-row-assignee {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10.5px;
color: var(--lv-text-secondary);
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
border-radius: 10px;
padding: 1px 6px 1px 4px;
white-space: nowrap;
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Assignment dropdown wrapper in thread header */
/* Assignment control — icon + select presented as a single pill */
.lv-comm-assign-wrap {
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--lv-border-light);
border-radius: 6px;
background: var(--lv-bg-card);
overflow: hidden; /* clip icon bg flush with the border-radius */
}
.lv-comm-assign-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
color: var(--lv-text-muted);
margin-left: 7px;
}
/* The select inside the pill — remove its own border since the wrap provides it */
.lv-comm-assign-wrap .lv-comm-filter-select {
border: none;
border-radius: 0;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A9488' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
padding-left: 5px;
}
.lv-comm-assign-wrap .lv-comm-filter-select:focus {
border-color: transparent;
outline: none;
}
.lv-comm-assign-wrap:focus-within {
border-color: var(--lv-border);
box-shadow: 0 0 0 2px var(--lv-bg-muted);
}
/* Max-width so long names don't blow out the header */
.lv-comm-assign-select {
max-width: 140px;
}
/* ── Middle column — thread ─────────────────────────────────────────────── */
.lv-comm-thread {
display: flex;
flex-direction: column;
overflow: hidden;
border-right: 1px solid var(--lv-border-light);
}
/* Thread header */
.lv-comm-thread-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--lv-border-light);
background: var(--lv-bg-card);
flex-shrink: 0;
flex-wrap: wrap;
}
.lv-comm-thread-header-main {
flex: 1;
min-width: 0;
}
.lv-comm-thread-subject {
font-size: 13.5px;
font-weight: 700;
color: var(--lv-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lv-comm-thread-meta {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
margin-top: 3px;
font-size: 12px;
}
.lv-comm-thread-header-actions {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
flex-wrap: wrap;
}
/* Message scroll area */
.lv-comm-messages {
flex: 1;
overflow-y: auto;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 7px;
}
/* Bubbles */
.lv-comm-bubble-row {
display: flex;
flex-direction: column;
}
.lv-comm-bubble-row--outbound {
align-items: flex-end;
}
.lv-comm-bubble-row--inbound {
align-items: flex-start;
}
.lv-comm-bubble {
max-width: 76%;
padding: 6px 10px;
font-size: 12.75px;
line-height: 1.35;
word-break: break-word;
white-space: pre-line;
}
.lv-comm-bubble--outbound {
background: var(--lv-primary);
color: #fff;
border-radius: 9px 9px 3px 9px;
}
.lv-comm-bubble--inbound {
background: var(--lv-bg-muted);
color: var(--lv-text-primary);
border-radius: 9px 9px 9px 3px;
}
.lv-comm-bubble--failed {
opacity: 0.7;
outline: 2px dashed var(--lv-danger);
}
.lv-comm-bubble-meta {
font-size: 10px;
line-height: 1.2;
color: var(--lv-text-muted);
margin-top: 2px;
padding: 0 2px;
}
/* Internal notes */
.lv-comm-internal-note {
display: flex;
gap: 6px;
align-items: flex-start;
background: #FFFCF0;
border-left: 2px solid #F59E0B;
border-radius: 6px;
padding: 6px 9px;
color: #92400E;
align-self: stretch;
}
.lv-comm-internal-note-body {
font-size: 12.5px;
line-height: 1.35;
white-space: pre-line;
word-break: break-word;
}
.lv-comm-internal-note-meta {
font-size: 10px;
line-height: 1.2;
color: #B45309;
margin-top: 2px;
}
/* Composer */
.lv-comm-composer {
border-top: 1px solid var(--lv-border-light);
background: var(--lv-bg-card);
flex-shrink: 0;
}
.lv-comm-composer-tabs {
display: flex;
border-bottom: 1px solid var(--lv-border-faint);
padding: 0 12px;
}
.lv-comm-composer-tab {
display: flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
font-size: 12px;
font-family: var(--lv-font-body);
font-weight: 500;
color: var(--lv-text-muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.lv-comm-composer-tab--active {
color: var(--lv-primary);
border-bottom-color: var(--lv-primary);
font-weight: 600;
}
.lv-comm-composer-body {
padding: 8px 12px 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.lv-comm-textarea {
width: 100%;
resize: vertical;
border: 1px solid var(--lv-border-light);
border-radius: 7px;
padding: 7px 10px;
font-size: 13px;
line-height: 1.35;
font-family: var(--lv-font-body);
background: var(--lv-bg-page);
color: var(--lv-text-primary);
outline: none;
min-height: 58px;
box-sizing: border-box;
}
.lv-comm-textarea:focus {
border-color: var(--lv-primary);
}
.lv-comm-textarea--note {
background: #FFFBEB;
border-color: #F59E0B;
}
.lv-comm-composer-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.lv-comm-thread-closed {
padding: 12px 14px;
border-top: 1px solid var(--lv-border-light);
text-align: center;
font-size: 13px;
color: var(--lv-text-muted);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.lv-comm-thread-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
color: var(--lv-text-muted);
}
/* Mobile back + context buttons */
.lv-comm-mobile-back {
display: none;
align-items: center;
gap: 6px;
background: none;
border: none;
cursor: pointer;
font-size: 13px;
font-family: var(--lv-font-body);
color: var(--lv-primary);
padding: 0;
flex-shrink: 0;
}
.lv-comm-context-btn {
display: none;
align-items: center;
gap: 5px;
padding: 5px 10px;
font-size: 12px;
font-family: var(--lv-font-body);
color: var(--lv-text-secondary);
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
border-radius: 6px;
cursor: pointer;
}
/* ── Right column — context rail ─────────────────────────────────────────── */
.lv-comm-rail {
display: flex;
flex-direction: column;
gap: 0;
overflow-y: auto;
background: var(--lv-bg-page);
padding: 12px;
}
.lv-comm-rail-card {
background: var(--lv-bg-card);
border: 1px solid var(--lv-border-light);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.lv-comm-rail-card-title {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--lv-text-muted);
margin-bottom: 2px;
}
.lv-comm-rail-tenant-name {
font-size: 14px;
font-weight: 700;
color: var(--lv-text-primary);
}
.lv-comm-rail-contact {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--lv-primary);
text-decoration: none;
}
.lv-comm-rail-contact:hover {
text-decoration: underline;
}
.lv-comm-rail-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.lv-comm-rail-label {
font-size: 11.5px;
color: var(--lv-text-muted);
flex-shrink: 0;
}
.lv-comm-rail-value {
font-size: 12.5px;
color: var(--lv-text-primary);
text-align: right;
}
.lv-comm-rail-value--danger {
color: var(--lv-danger);
font-weight: 600;
}
.lv-comm-rail-value--credit {
color: var(--lv-success);
font-weight: 600;
}
.lv-comm-rail-action-link {
font-size: 12px;
color: var(--lv-primary);
text-decoration: none;
margin-top: 2px;
}
.lv-comm-rail-action-link:hover {
text-decoration: underline;
}
.lv-comm-rail-ticket {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 5px 0;
border-bottom: 1px solid var(--lv-border-faint);
font-size: 12.5px;
color: var(--lv-text-primary);
text-decoration: none;
}
.lv-comm-rail-ticket:last-child {
border-bottom: none;
padding-bottom: 0;
}
.lv-comm-rail-ticket-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.lv-comm-rail-actions {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
.lv-comm-rail-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 16px;
color: var(--lv-text-muted);
}
.lv-comm-rail-back {
margin-bottom: 8px;
}
/* ── New conversation panel ─────────────────────────────────────────────── */
.lv-comm-new-conv-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
z-index: 49;
}
.lv-comm-new-conv-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(560px, 95vw);
background: var(--lv-bg-card);
border-radius: 12px;
border: 1px solid var(--lv-border);
box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
z-index: 50;
display: flex;
flex-direction: column;
max-height: 88vh;
overflow: hidden;
}
.lv-comm-new-conv-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 18px 12px;
border-bottom: 1px solid var(--lv-border-light);
flex-shrink: 0;
}
.lv-comm-new-conv-body {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 14px;
overflow-y: auto;
}
.lv-comm-new-conv-footer {
padding: 12px 18px;
border-top: 1px solid var(--lv-border-light);
display: flex;
justify-content: flex-end;
gap: 8px;
flex-shrink: 0;
}
.lv-comm-label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--lv-text-faint);
margin-bottom: 4px;
}
.lv-comm-input {
width: 100%;
border: 1px solid var(--lv-border-light);
border-radius: 6px;
padding: 7px 10px;
font-size: 13px;
font-family: var(--lv-font-body);
background: var(--lv-bg-page);
color: var(--lv-text-primary);
outline: none;
box-sizing: border-box;
}
.lv-comm-input:focus {
border-color: var(--lv-primary);
}
/* Suppress native select arrow and replace with consistent SVG chevron */
select.lv-comm-input {
appearance: none;
-webkit-appearance: none;
padding-right: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A9488' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
}
.lv-comm-field-error {
color: var(--lv-danger);
font-size: 12px;
margin-top: 3px;
}
/* Linked-lease hint shown after a tenant is selected in New Conversation form */
.lv-comm-lease-hint {
display: flex;
align-items: flex-start;
gap: 5px;
margin-top: 5px;
padding: 5px 8px;
background: var(--lv-bg-muted);
border: 1px solid var(--lv-border-light);
border-radius: 6px;
color: var(--lv-text-secondary);
font-size: 12px;
line-height: 1.4;
}
/* Delivery warnings shown after tenant select */
.lv-comm-tenant-warning {
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 5px;
padding: 8px 10px;
border-radius: 6px;
font-size: 12px;
line-height: 1.5;
}
.lv-comm-tenant-warning--amber {
background: var(--lv-warning-light);
border: 1px solid var(--lv-warning-border);
color: var(--lv-warning);
}
.lv-comm-tenant-warning--info {
background: var(--lv-info-light);
border: 1px solid var(--lv-info-border);
color: var(--lv-info);
}
.lv-comm-tenant-warning-link {
color: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.lv-comm-tenant-warning-link:hover {
opacity: 0.8;
}
/* ── Mobile breakpoints ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.lv-comm-shell {
grid-template-columns: 280px 1fr 0px;
}
.lv-comm-rail {
display: none;
}
}
@media (max-width: 768px) {
.lv-comm-shell {
grid-template-columns: 1fr;
height: calc(100vh - 80px);
border-radius: 0;
border-left: none;
border-right: none;
}
.lv-comm-list--hidden-mobile {
display: none;
}
.lv-comm-thread--hidden-mobile {
display: none;
}
.lv-comm-rail--hidden-mobile {
display: none;
}
/* On mobile, show the rail as a full-column overlay */
.lv-comm-rail:not(.lv-comm-rail--hidden-mobile) {
display: flex;
border-left: none;
position: absolute;
inset: 0;
z-index: 10;
}
.lv-comm-mobile-back {
display: flex;
}
.lv-comm-context-btn {
display: flex;
}
.lv-comm-bubble {
max-width: 88%;
}
}