h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]), .valid.modified:not([type=radio]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================
   ANB Build Estimator - Base CSS
   Shared styles and CSS custom properties
   ============================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ----- Typography ----- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem 0;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-heading);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin: 0 0 1rem 0;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* ----- Layout Components ----- */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 260px;
    min-width: 260px;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;
    transition: all 0.3s ease;
}

.sidebar.minimized {
    width: 70px;
    min-width: 70px;
}

.sidebar.minimized .sidebar-brand,
.sidebar.minimized .nav-item span,
.sidebar.minimized .nav-section-title,
.sidebar.minimized .user-info {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

.sidebar.minimized .sidebar-header {
    justify-content: center;
    padding: 1.5rem 0.5rem;
}

.sidebar.minimized .nav-item {
    justify-content: center;
    padding: 0.875rem 0.5rem;
}

.sidebar.minimized .user-menu {
    justify-content: center;
    padding: 0.5rem;
}

.sidebar.minimized .sidebar-footer {
    display: flex;
    justify-content: center;
    padding: 1rem 0.5rem;
}

.sidebar.minimized .theme-toggle {
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    width: fit-content;
    padding: 0.25rem;
    margin: 0 auto;
}

.sidebar.minimized .theme-toggle-btn {
    width: 36px;
    height: 36px;
}

.sidebar.minimized .theme-toggle-btn svg {
    width: 18px;
    height: 18px;
}

.sidebar-hint {
    position: relative;
}

.sidebar.minimized .sidebar-hint::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: calc(100% + 0.75rem);
    transform: translateY(-50%);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1100;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sidebar.minimized .sidebar-hint:hover::after,
.sidebar.minimized .sidebar-hint:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-logo {
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo-full {
    width: 200px;
    max-width: 100%;
}

.sidebar-logo-mark {
    display: none;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--primary-color);
    white-space: nowrap;
}

.sidebar.minimized .sidebar-logo-full {
    display: none;
}

.sidebar.minimized .sidebar-logo-mark {
    display: block;
}

.sidebar-brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-heading);
}

.sidebar-nav {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 1rem;
}

.nav-section-title {
    display: none;
}

.nav-section-title--admin {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.5rem;
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.nav-section-title--admin .nav-section-title-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nav-item:hover {
    background-color: var(--nav-hover-bg);
    color: var(--text-primary);
    text-decoration: none;
}

.nav-item.active {
    background-color: var(--nav-active-bg);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.nav-item-icon {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.nav-item.active .nav-item-icon {
    opacity: 1;
}

.nav-submenu {
    background-color: var(--submenu-bg);
}

.nav-submenu .nav-item {
    padding-left: 3.5rem;
    font-size: 0.875rem;
}

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Main Content Area */
.main-content {
    flex: 1;
    /* A flex item defaults to min-width: auto, which refuses to shrink below its content's
       min-content width — one wide table or filter rail then stretches the shell past the
       viewport and the whole page scrolls sideways. Pinning it to 0 keeps the shell at
       viewport width so the inner scroll containers (.table-container, .tabs) do the
       scrolling instead. */
    min-width: 0;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

/* Same reasoning one level down: .page-content is a column-flex item whose block children
   (tables, grids) must not be able to widen it. */
.page-content {
    min-width: 0;
    max-width: 100%;
}

.sidebar.minimized ~ .main-content {
    margin-left: 70px;
}

/* Top Header Bar */
.top-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 1rem;
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.menu-toggle:hover {
    background-color: var(--nav-hover-bg);
}

.sidebar-toggle {
    position: absolute;
    top: 1.5rem;
    right: -15px;
    width: 30px;
    height: 30px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar-toggle:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.sidebar-toggle i {
    transition: transform 0.3s ease;
}

.sidebar.minimized .sidebar-toggle i {
    transform: rotate(180deg);
}

.page-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-heading);
}

.header-right {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

/* The login CTA is a flex item next to the search box; letting it shrink breaks its
   label onto two lines long before the header actually runs out of room. */
.header-right > .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.search-box {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.search-input {
    /* Matches the height of a .btn: 0.75rem vertical padding + a 0.9375rem
       1.6 line-height, all in rem so both scale together at smaller roots. */
    height: 3rem;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-alpha);
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    width: 18px;
    height: 18px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}

.icon-btn:hover {
    background-color: var(--nav-hover-bg);
    color: var(--text-primary);
}

.icon-btn .badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: var(--danger-color);
    border-radius: 50%;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.user-menu:hover {
    background-color: var(--nav-hover-bg);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.user-avatar--xs {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.user-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Page Content */
.page-content {
    flex: 1;
    padding: 1.5rem;
    background-color: var(--bg-primary);
}

/* ----- Cards ----- */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--card-shadow);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-heading);
}

.card-actions {
    display: flex;
    gap: 0.5rem;
}

.card-body {
    color: var(--text-primary);
}

.card-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Stat Cards */
.stat-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.stat-card-icon.blue { background-color: var(--primary-color-light); color: var(--primary-color); }
.stat-card-icon.green { background-color: var(--success-color-light); color: var(--success-color); }
.stat-card-icon.orange { background-color: var(--warning-color-light); color: var(--warning-color); }
.stat-card-icon.red { background-color: var(--danger-color-light); color: var(--danger-color); }

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.2;
}

.stat-change {
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-change.positive { color: var(--success-color); }
.stat-change.negative { color: var(--danger-color); }

/* ----- Grid System ----- */
.grid {
    display: grid;
    gap: 1.5rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ----- Buttons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn:hover {
    text-decoration: none;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 1.75rem;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--secondary-hover);
}

.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-success:hover {
    background-color: var(--success-hover);
}

.btn-warning {
    background-color: var(--warning-color);
    color: white;
}

.btn-warning:hover {
    background-color: var(--warning-hover);
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background-color: var(--danger-hover);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

.btn-outline:hover {
    background-color: var(--nav-hover-bg);
}

.btn-outline-primary {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: white;
}

.btn-ghost {
    background-color: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background-color: var(--nav-hover-bg);
    color: var(--text-primary);
}

/* ----- Forms ----- */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.form-label .required {
    color: var(--danger-color);
    margin-left: 0.25rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-alpha);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: var(--danger-color);
}

.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
    box-shadow: 0 0 0 3px var(--danger-color-alpha);
}

.form-helper {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

.autocomplete-suggestions {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 4px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.autocomplete-suggestion {
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.autocomplete-suggestion:last-child {
    border-bottom: 0;
}

.autocomplete-suggestion:hover {
    background-color: var(--secondary-color-light);
}

.form-error {
    font-size: 0.8125rem;
    color: var(--danger-color);
    margin-top: 0.375rem;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

/* type="search" carries WebKit's searchfield appearance, which draws its own box and clear
   button and disregards the author padding a field reserves for an overlaid icon — the
   magnifying glass then sits outside the control instead of inside it. Desktop engines honour
   the padding, so this only shows up on mobile Safari. Reset it everywhere rather than per
   page: every search field in the app overlays its own icon. */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Checkbox & Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
}

.form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid var(--input-border);
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-label {
    font-size: 0.9375rem;
    color: var(--text-primary);
    cursor: pointer;
}

/* Input Group */
.input-group {
    display: flex;
}

.input-group .form-input {
    flex: 1;
}

.input-group-prepend,
.input-group-append {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background-color: var(--input-addon-bg);
    border: 2px solid var(--input-border);
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.input-group-prepend {
    border-right: none;
    border-radius: 8px 0 0 8px;
}

.input-group-append {
    border-left: none;
    border-radius: 0 8px 8px 0;
}

.input-group .form-input:first-child {
    border-radius: 8px 0 0 8px;
}

.input-group .form-input:last-child {
    border-radius: 0 8px 8px 0;
}

/* ----- Tables ----- */
.table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--table-border);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.table th,
.table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--table-border);
}

.table th {
    background-color: var(--table-header-bg);
    font-weight: 600;
    color: var(--text-heading);
    white-space: nowrap;
}

.table tr:last-child td {
    border-bottom: none;
}

.table tbody tr {
    background-color: var(--table-row-bg);
    transition: background-color 0.15s ease;
}

.table tbody tr:hover {
    background-color: var(--table-row-hover);
}

.table tbody tr:nth-child(even) {
    background-color: var(--table-row-alt);
}

.table tbody tr:nth-child(even):hover {
    background-color: var(--table-row-hover);
}

.table-actions {
    display: flex;
    gap: 0.5rem;
}

/* ----- Row actions -----
   A bar of bare icon buttons makes every row guess what a pencil or a receipt does, and three
   of them repeated down the table reads as clutter. Instead one named button carries the action
   the row is actually for, and the rest fold into a labelled overflow menu.

   Naming the action costs contrast, so the button sits in muted type until the row is hovered
   or something inside takes focus — present enough to find, quiet enough to scan past. */
.row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.row-actions__primary {
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
}

tr:hover .row-actions__primary,
.row-actions__primary:hover,
.row-actions__primary:focus-visible {
    border-color: var(--primary-color);
    background-color: var(--primary-color-light);
    color: var(--primary-color);
}

.row-actions__more {
    padding: 0.375rem;
    color: var(--text-muted);
}

tr:hover .row-actions__more,
.row-actions__more:hover,
.row-actions__more:focus-visible,
.dropdown.active .row-actions__more {
    color: var(--text-primary);
}

/* Without hover there is no second state to reveal, so the action leads in colour from the
   start rather than staying permanently muted. */
@media (hover: none) {
    .row-actions__primary {
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .row-actions__more {
        color: var(--text-secondary);
    }
}

/* ----- Badges & Tags ----- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
}

.material-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.material-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--primary-color);
    border-radius: 999px;
    background-color: var(--primary-color-light);
    color: var(--primary-color);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.material-filter-pill:hover {
    background-color: var(--primary-color-alpha);
}

.material-filter-pill:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.badge-primary { background-color: var(--primary-color-light); color: var(--primary-color); }
.badge-success { background-color: var(--success-color-light); color: var(--success-color); }
.badge-warning { background-color: var(--warning-color-light); color: var(--warning-color); }
.badge-danger { background-color: var(--danger-color-light); color: var(--danger-color); }
.badge-secondary { background-color: var(--secondary-color-light); color: var(--text-secondary); }

/* Status badges */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
}

.status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-draft { background-color: var(--secondary-color-light); color: var(--text-secondary); }
.status-draft::before { background-color: var(--text-muted); }

.status-pending { background-color: var(--warning-color-light); color: var(--warning-color); }
.status-pending::before { background-color: var(--warning-color); }

.status-sent { background-color: var(--primary-color-light); color: var(--primary-color); }
.status-sent::before { background-color: var(--primary-color); }

.status-approved { background-color: var(--success-color-light); color: var(--success-color); }
.status-approved::before { background-color: var(--success-color); }

.status-rejected { background-color: var(--danger-color-light); color: var(--danger-color); }
.status-rejected::before { background-color: var(--danger-color); }

/* ----- Alerts ----- */
.alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.alert-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.alert-message {
    font-size: 0.9375rem;
}

.alert-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.alert-close:hover {
    opacity: 1;
}

.alert-info {
    background-color: var(--primary-color-light);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.alert-success {
    background-color: var(--success-color-light);
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

.alert-warning {
    background-color: var(--warning-color-light);
    border: 1px solid var(--warning-color);
    color: var(--warning-color);
}

.alert-danger {
    background-color: var(--danger-color-light);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

/* ----- Modals ----- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background-color: var(--modal-bg);
    border-radius: 16px;
    max-width: 560px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--modal-shadow);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

/* Width tiers, set by Modal.Size. */
.modal-small { max-width: 420px; }
.modal-medium { max-width: 560px; }
.modal-large { max-width: 760px; }
.modal-extralarge { max-width: 1040px; }

.modal-overlay.active .modal {
    transform: scale(1);
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-heading);
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    color: var(--text-muted);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
    background-color: var(--nav-hover-bg);
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-header,
.modal-footer {
    flex-shrink: 0;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ----- Pagination ----- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    max-width: 100%;
}

.pagination-btn {
    min-width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--nav-hover-bg);
    border-color: var(--primary-color);
}

.pagination-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.pagination-btn.active:hover {
    color: var(--primary-color);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ----- Breadcrumbs ----- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.breadcrumb-item {
    color: var(--text-muted);
}

.breadcrumb-item a {
    color: var(--text-muted);
}

.breadcrumb-item a:hover {
    color: var(--primary-color);
}

.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--text-muted);
}

/* ----- Tabs ----- */
/* The strip and its active panel share one card shell so they read as a single control
   rather than a floating row of labels above an unrelated card. */
.tab-group {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    margin-bottom: 1.5rem;
    /* the shell and every box inside it must be allowed to shrink, or a wide table would
       widen the shell instead of scrolling inside its own .table-container */
    min-width: 0;
}

.tabs {
    display: flex;
    flex-wrap: nowrap;
    /* A tab strip that outgrows its container scrolls itself rather than widening the page.
       overflow-y must be hidden explicitly: setting only overflow-x resolves the other axis
       to auto, which would add a stray vertical scrollbar. */
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    /* The rule is an inset shadow rather than a border because the active tab's underline sits
       in the same 2px band; as a border on the scrolling box it would be clipped away. */
    box-shadow: inset 0 -2px 0 var(--border-color);
    margin-bottom: 1.5rem;
    /* the tabs are visibly cut off at the edge, which is the scroll affordance */
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 1rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.tab:hover {
    color: var(--text-primary);
}

.tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* A disabled tab stays in the strip so the section is still discoverable, but it reads as
   unavailable and cannot be selected. */
.tab.disabled,
.tab.disabled:hover {
    color: var(--text-muted);
    opacity: 0.5;
    cursor: not-allowed;
}

/* Inside the shell the strip becomes the component's own header band: it loses the outer
   gap, gains a tint to separate it from the panel, and inherits the shell's corners. */
.tab-group > .tabs {
    background-color: var(--table-header-bg);
    padding: 0 0.5rem;
    margin-bottom: 0;
    box-shadow: inset 0 -2px 0 var(--card-border);
    /* the strip rounds itself instead of the shell clipping it, so panel content stays free
       to overflow the shell (dropdowns, popovers) */
    border-radius: 11px 11px 0 0;
}

.tab-panel,
.tab-panel-body {
    min-width: 0;
}

.tab-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.tab-panel-body {
    padding: 1.5rem;
    color: var(--text-primary);
}

/* A panel whose body is its last child should not double the shell's bottom inset with a
   trailing margin from whatever it renders. */
.tab-panel-body > :last-child {
    margin-bottom: 0;
}

/* ----- Empty States ----- */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    opacity: 0.4;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-heading);
}

.empty-state-message {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* ----- Loading States ----- */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.skeleton {
    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ----- Tooltips ----- */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.75rem;
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    font-size: 0.8125rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    margin-bottom: 0.5rem;
    z-index: 1000;
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ----- Dropdown ----- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--dropdown-shadow);
    padding: 0.5rem 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* dropdownManager lifts an open menu into the top layer so table containers cannot clip it.
   The UA popover styles centre the element in the viewport; these hand positioning back to
   the inline coordinates the manager sets. */
.dropdown-menu:popover-open {
    /* Fixed, not absolute: a top-layer element resolves absolute offsets against the document
       origin, so the viewport coordinates the manager measures would be off by the scroll. */
    position: fixed;
    inset: auto;
    margin: 0;
    width: auto;
    height: auto;
    overflow: visible;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    /* menu entries are <button> as often as <a>, so neutralise the button defaults */
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
}

a.dropdown-item {
    text-decoration: none;
}

.dropdown-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dropdown-item:hover {
    background-color: var(--nav-hover-bg);
}

.dropdown-item--danger {
    color: var(--danger-color);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 0.5rem 0;
}

/* ----- Material Cards ----- */
.material-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.material-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
}

.material-card-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background-color: var(--skeleton-base);
}

.material-card-body {
    padding: 1rem;
}

.material-card-category {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.material-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 0.5rem;
}

.material-card-vendor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.material-card-vendor-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    background-color: var(--skeleton-base);
    flex-shrink: 0;
}

.material-card-vendor-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.material-card-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.material-card-unit {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 400;
}

.material-card-media {
    position: relative;
}

.material-card-promo-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}

.material-card-was {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 0.375rem;
}

.material-card-promo-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- Estimate Card ----- */
.estimate-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: box-shadow 0.2s ease;
}

.estimate-card:hover {
    box-shadow: var(--card-hover-shadow);
}

.estimate-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: var(--primary-color-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.estimate-card-content {
    flex: 1;
    min-width: 0;
}

.estimate-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 0.25rem;
}

.estimate-card-client {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.estimate-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.estimate-card-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-heading);
    text-align: right;
}

/* ----- Category Grid ----- */
.category-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--primary-color);
}

.category-card-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background-color: var(--primary-color-light);
    color: var(--primary-color);
}

.category-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 0.25rem;
}

.category-card-count {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ----- Theme Toggle ----- */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    background-color: var(--toggle-bg);
}

.theme-toggle-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.theme-toggle-btn.active {
    background-color: var(--primary-color);
    color: white;
}

.theme-toggle-btn:hover:not(.active) {
    background-color: var(--nav-hover-bg);
    color: var(--text-primary);
}

/* ----- Settings Shell (sub-navigation + body) ----- */
.settings-shell {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.settings-nav .nav-item {
    border-left: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.settings-nav .nav-item.active {
    border-left-color: transparent;
}

.settings-body {
    min-width: 0;
}

@media (max-width: 992px) {
    .settings-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    /* the rail becomes a horizontally scrolling tab strip */
    .settings-nav .card {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .settings-nav .card::-webkit-scrollbar {
        display: none;
    }

    .settings-nav .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ============================================
   Responsive

   The breakpoint scale for the whole application. Use only these four values,
   always as max-width (the design system is desktop-first):

     1200px  xl  - wide desktop
      992px  lg  - small desktop / landscape tablet
      768px  md  - tablet; the sidebar becomes an off-canvas drawer here
      576px  sm  - phone; tables card-stack and modals become full-screen sheets

   Page-level <style> blocks and scoped .razor.css must reuse these values
   rather than introducing new ones.
   ============================================ */

@media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

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

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        /* the sidebar is overlaid rather than in flow here */
        margin-left: 0;
    }

    .sidebar.minimized ~ .main-content {
        margin-left: 0;
    }

    .menu-toggle {
        display: flex;
    }

    /* Minimizing is meaningless once the sidebar is an off-canvas drawer, and the button
       hangs 15px past the sidebar's right edge — with the drawer translated off-screen
       that half-circle still pokes into the viewport. */
    .sidebar-toggle {
        display: none;
    }

    /* Everything shares a single row: the menu toggle, the search box and the
       login CTA. The page title is hidden to make room, and the search input
       grows into the leftover space while actions and the CTA keep their
       intrinsic width. */
    .top-header {
        gap: 0.5rem;
    }

    .header-left {
        flex-shrink: 0;
    }

    .page-title {
        display: none;
    }

    .header-right {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0.5rem;
    }

    /* Grows into the leftover row space; min-width: 0 lets it shrink past the input's
       default intrinsic width instead of pushing its neighbours out. */
    .search-box {
        flex: 1 1 auto;
        min-width: 0;
    }

    .search-input {
        width: 100%;
    }

    .user-menu {
        padding: 0.25rem;
    }

    .user-info {
        display: none;
    }

    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    .nav-section-title--admin {
        justify-content: center;
        padding: 0 0.5rem;
    }

    .nav-section-title--admin .nav-section-title-text {
        display: none;
    }
}

@media (max-width: 576px) {
    html {
        font-size: 14px;
    }

    .page-content {
        padding: 1rem;
    }

    .card {
        padding: 1rem;
    }

    .header-right {
        gap: 0.25rem;
    }

    .grid-4 { grid-template-columns: 1fr; }

    .table-container {
        font-size: 0.875rem;
    }

    .table th,
    .table td {
        padding: 0.75rem;
    }

    /* Modals become full-screen sheets: a centred 90%-wide card wastes the little
       space a phone has, and long forms need the whole viewport to scroll in. */
    .modal-overlay {
        align-items: stretch;
        justify-content: stretch;
    }

    .modal,
    .modal-small,
    .modal-medium,
    .modal-large,
    .modal-extralarge {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }

    /* stacked, full-width footer buttons — side-by-side they get too narrow to hit */
    .modal-footer {
        display: flex;
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* ----- Utility Classes ----- */
.text-primary { color: var(--primary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-primary { background-color: var(--primary-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }

.mr-1 { margin-right: 0.5rem !important; }
.mr-2 { margin-right: 1rem !important; }
.ml-1 { margin-left: 0.5rem !important; }
.ml-2 { margin-left: 1rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.5rem !important; }
.p-2 { padding: 1rem !important; }
.p-3 { padding: 1.5rem !important; }
.p-4 { padding: 2rem !important; }

.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }

.align-center { align-items: center !important; }
.align-start { align-items: start !important; }
.align-end { align-items: end !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }

.gap-1 { gap: 0.5rem !important; }
.gap-2 { gap: 1rem !important; }
.gap-3 { gap: 1.5rem !important; }
.gap-4 { gap: 2rem !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }

.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

.fs-sm { font-size: 0.875rem !important; }
.fs-md { font-size: 1rem !important; }
.fs-lg { font-size: 1.125rem !important; }

.rounded { border-radius: 8px !important; }
.rounded-lg { border-radius: 12px !important; }
.rounded-full { border-radius: 9999px !important; }

.d-block { display: block !important; }
.position-relative { position: relative !important; }

.max-h-400px { max-height: 400px !important; }
.overflow-auto { overflow: auto !important; }

.flex-1 { flex: 1 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-grow-2 { flex-grow: 2 !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }

.cursor-pointer { cursor: pointer !important; }

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* EditEstimatePage specific classes */
.budget-summary-card {
    text-align: center;
    padding: 1.5rem;
    background-color: var(--bg-primary);
    border-radius: 12px;
}

.budget-summary-label {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.budget-summary-value {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.budget-summary-value-success {
    color: var(--success-color);
}

.budget-summary-value-heading {
    color: var(--text-heading);
}

.progress-container {
    margin-top: 1.5rem;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.progress-label {
    font-size: 0.875rem;
    font-weight: 600;
}

.progress-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--success-color);
}

.progress-bar-container {
    height: 12px;
    background-color: var(--bg-primary);
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: calc(var(--utilization) * 1%);
    background-color: var(--progress-color, var(--success-color));
    border-radius: 6px;
}

.additional-cost-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.additional-cost-label {
    font-size: 0.9375rem;
}

.additional-cost-value {
    font-size: 0.9375rem;
    font-weight: 600;
}

.additional-cost-label-success {
    color: var(--success-color);
}

.additional-cost-value-success {
    color: var(--success-color);
}

.total-estimate-row {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.total-estimate-label {
    font-size: 1.25rem;
}

.total-estimate-value {
    color: var(--primary-color);
}

.client-info-label {
    margin-bottom: 0.25rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.client-info-value {
    margin-bottom: 1rem;
    font-weight: 600;
}

.client-info-value-secondary {
    margin-bottom: 1rem;
}

.client-info-value-no-margin {
    margin-bottom: 0;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.25rem;
}

.attachment-icon-container {
    width: 40px;
    height: 40px;
    background-color: var(--danger-color-light);
    color: var(--danger-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.attachment-icon-container-primary {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
}

.attachment-icon-container-success {
    background-color: var(--success-color-light);
    color: var(--success-color);
}

.attachment-info {
    flex: 1;
    min-width: 0;
}

.attachment-name {
    margin: 0;
    font-weight: 600;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.message-container {
    margin-bottom: 1rem;
}

.message-header {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.message-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.message-content-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.message-sender {
    font-size: 0.875rem;
    font-weight: 600;
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.message-bubble {
    background-color: var(--bg-primary);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.message-bubble-primary {
    background-color: var(--primary-color-light);
}

.message-input-container {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.message-textarea {
    min-height: 80px;
    margin-bottom: 0.5rem;
}

.activity-log-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.activity-log-icon {
    width: 32px;
    height: 32px;
    background-color: var(--success-color-light);
    color: var(--success-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-log-icon-primary {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
}

.activity-log-icon-secondary {
    background-color: var(--secondary-color-light);
    color: var(--text-secondary);
}

.activity-log-content {
    flex: 1;
}

.activity-log-title {
    font-weight: 600;
}

.activity-log-time {
    margin: 0.125rem 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.modal-section {
    margin-bottom: 1rem;
}

.modal-section-label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.modal-input-group {
    display: flex;
}

.modal-input-group input {
    flex: 1;
}

.modal-copy-button {
    padding: 0.75rem 1rem;
}

.print-header-section {
    display: flex;
}

.print-company-section {
    flex: 1;
}

.print-logo-section {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-heading);
}

.print-company-details-section p {
    margin: 0;
    color: var(--text-primary);
}

.print-estimate-info-section {
    text-align: right;
}

.print-title-section {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-heading);
}

.print-subtitle-section p {
    margin: 0;
    color: var(--text-primary);
}

.print-info-section {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.print-info-box {
    flex: 1;
}

.print-info-box h3 {
    margin-bottom: 0.5rem;
    color: var(--text-heading);
}

.print-info-box p {
    margin: 0;
    color: var(--text-primary);
}

.print-info-label {
    font-weight: 600;
}

.print-budget-summary {
    margin-bottom: 1.5rem;
}

.print-budget-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.print-budget-row-total {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

.print-notes-section h4 {
    margin-bottom: 0.5rem;
}

.print-notes-section p {
    margin-bottom: 1rem;
}

.print-signature-section {
    margin-top: 2rem;
}

.signature-area {
    display: flex;
    gap: 2rem;
}

.signature-box {
    flex: 1;
}

.signature-line {
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
}

.print-items-header {
    display: flex;
}

.print-items-title {
    margin-bottom: 1rem;
    color: #000;
    font-size: 16pt;
}

.print-table-header th {
    width: 40px;
}

.print-table-header-description {
    text-align: left;
}

.print-table-header-category {
    width: 100px;
}

.print-table-header-quantity {
    width: 80px;
}

.print-table-header-unit-price {
    width: 100px;
}

.print-table-header-total {
    width: 120px;
}

.print-table-footer-total {
    border-top: 3px double #000;
    font-size: 13pt;
}

/* Wizard Styles */
.wizard {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0 2rem;
}

.wizard-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--border-color);
    z-index: 0;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.wizard-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.wizard-step-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    transition: color 0.3s ease;
}

.wizard-step.active .wizard-step-number {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.wizard-step.active .wizard-step-label {
    color: var(--primary-color);
}

.wizard-step.completed .wizard-step-number {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.wizard-content {
    min-height: 400px;
    padding: 1rem 0;
}

/*.wizard-pane {
    display: none;
}*/

.wizard-pane.active {
    display: block !important;
    animation: fadeIn 0.3s ease;
}

.wizard-navigation {
    display: flex;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .wizard-steps {
        padding: 0 1rem;
    }

    .wizard-step-label {
        font-size: 0.75rem;
    }

    .wizard-step-number {
        width: 35px;
        height: 35px;
        font-size: 0.875rem;
    }
}

/* Mobile nav overlay */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

/* Browsers without <dialog> support (Samsung Internet < 21) have no UA rule hiding a
   closed dialog, which otherwise leaves an invisible full-width block swallowing taps. */
#components-reconnect-modal:not([open]) {
    display: none;
}

#components-reconnect-modal.components-reconnect-dialog-fallback[open] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 3000;
    height: fit-content;
}

#components-reconnect-modal,
.components-startup-error {
    width: min(22rem, calc(100% - 2rem));
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background-color: var(--card-bg);
    color: var(--text-primary);
    box-shadow: var(--modal-shadow);
}

#components-reconnect-modal {
    opacity: 0;
    animation: components-reconnect-fade-out 0.3s both;
}

#components-reconnect-modal[open] {
    animation: components-reconnect-slide-up 0.4s ease-out, components-reconnect-fade-in 0.3s ease-out;
    animation-fill-mode: both;
}

#components-reconnect-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.components-startup-error {
    position: fixed;
    inset: 0;
    z-index: 3000;
    height: fit-content;
}

.components-startup-error[hidden] {
    display: none;
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.components-reconnect-container p {
    margin: 0;
    text-align: center;
}

.components-reconnect-container button {
    border: 0;
    border-radius: 6px;
    padding: 0.625rem 1.5rem;
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
}

.components-rejoining-animation {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div {
    position: absolute;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    opacity: 1;
    animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes components-reconnect-slide-up {
    from { transform: translateY(30px) scale(0.95); }
    to { transform: translateY(0); }
}

@keyframes components-reconnect-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes components-reconnect-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes components-rejoining-animation {
    0%, 4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* Print styles */
@media print {
    .sidebar,
    .top-header,
    .no-print {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .page-content {
        padding: 0 !important;
    }
}

/* Category tree hover effects */
.category-tree-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.category-tree-item:hover {
    background-color: var(--nav-hover-bg);
}

.category-tree-subitem {
    padding: 0.5rem 0.75rem;
}

.category-tree-subitem:hover {
    background-color: var(--nav-hover-bg);
}
.category-item:hover > div {
    background-color: var(--nav-hover-bg);
}

.category-item.active {
    background-color: var(--nav-active-bg);
    border-left: 3px solid var(--primary-color);
}

.category-item.active .category-tree-item {
    background-color: var(--nav-active-bg);
    color: var(--primary-color);
}

.category-item:hover .subcategories > div {
    background-color: transparent;
}

/* Category tree expand/collapse */
.subcategories[data-expanded="false"] {
    display: none;
}

.subcategories[data-expanded="true"] {
    display: block;
}

.toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.toggle-button:hover {
    background-color: var(--nav-hover-bg);
}

.property-item {
    background-color: var(--secondary-color-light);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.25rem;
}

.list-items .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Browse.razor specific classes */
.search-filter-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.search-filter-group {
    flex: 1;
    min-width: 250px;
}

.search-input-container {
    position: relative;
}

.search-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.search-input-field {
    padding-left: 40px;
}

.filter-group {
    min-width: 180px;
}

.price-range-filter {
    min-width: 150px;
}

.sort-filter {
    min-width: 150px;
}

.search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.results-info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.results-info-text {
    margin: 0;
    color: var(--text-muted);
}

.view-toggle-container {
    display: flex;
    gap: 0.5rem;
}

.view-toggle-button {
    min-width: 40px;
    height: 40px;
}

.grid-view-button {
    background-color: var(--primary-color);
    color: white;
}

.list-view-button {
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

.materials-grid {
    margin-bottom: 1.5rem;
}

.pagination-container {
    margin-top: 1.5rem;
}
/* Vendor Associations Card Styles */
.vendor-associations-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accordion-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.accordion-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.accordion-card-body {
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    background-color: var(--body-bg);
}

.accordion-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    background-color: var(--card-bg);
    transition: background-color 0.2s ease;
}

.accordion-card-header:hover {
    background-color: var(--nav-hover-bg);
}

.vendor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.vendor-card-actions {
    display: flex;
    gap: 0.25rem;
}



.vendor-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.vendor-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vendor-detail-item label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.vendor-detail-item span:not(label) {
    font-size: 1rem;
    font-weight: 500;
}

.vendor-price {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.125rem !important;
}

.vendor-properties-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
}

.vendor-properties-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    /*color: var(--text-muted);*/
    margin-bottom: 0.75rem;
}

.vendor-properties-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.vendor-property-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.vendor-property-label {
    font-size: 0.875rem;
    /*color: var(--text-muted);*/
}

.vendor-property-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.property-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: var(--secondary-color-light);
    color: var(--primary-color);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.accordion-chevron {
    color: var(--text-muted);
}

.accordion-card-body.expanded .accordion-chevron {
    transform: rotate(180deg);
}
.filter-sidebar {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.filter-section {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.filter-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.filter-header:hover {
    color: var(--primary-color);
}

.filter-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-heading);
}

.filter-toggle-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
    color: var(--text-muted);
}

.filter-content {
    display: block;
}

.filter-count {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

.form-check {
    align-items: flex-start;
}

.form-check-input {
    margin-top: 0.25rem;
}

/* ----- Utility Classes ----- */
.text-primary { color: var(--primary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-primary { background-color: var(--primary-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }

/* Icon Sizes */
.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }
.icon-2xl { width: 32px; height: 32px; }
.icon-3xl { width: 40px; height: 40px; }

/* Flex Layout Utilities */
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }

/* Gap Utilities */
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 0.75rem; }
.gap-lg { gap: 1rem; }
.gap-xl { gap: 1.5rem; }
.gap-2xl { gap: 2rem; }

/* Position Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Positioning Helpers */
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

.top-1 { top: 0.25rem; }
.right-1 { right: 0.25rem; }
.bottom-1 { bottom: 0.25rem; }
.left-1 { left: 0.25rem; }

.top-2 { top: 0.5rem; }
.right-2 { right: 0.5rem; }
.bottom-2 { bottom: 0.5rem; }
.left-2 { left: 0.5rem; }

.top-3 { top: 0.75rem; }
.right-3 { right: 0.75rem; }
.bottom-3 { bottom: 0.75rem; }
.left-3 { left: 0.75rem; }

.top-4 { top: 1rem; }
.right-4 { right: 1rem; }
.bottom-4 { bottom: 1rem; }
.left-4 { left: 1rem; }

/* Transform Utilities */
.translate-x-50 { transform: translateX(-50%); }
.translate-y-50 { transform: translateY(-50%); }
.translate-y-100 { transform: translateY(-100%); }

/* Text Utilities */
.text-strikethrough { text-decoration: line-through; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Width and Height Utilities */
.min-w-0 { min-width: 0; }
.w-4 { width: 1rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-32 { width: 8rem; }
.w-40 { width: 10rem; }
.w-48 { width: 12rem; }
.w-56 { width: 14rem; }
.w-64 { width: 16rem; }

.h-4 { height: 1rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.h-40 { height: 10rem; }
.h-48 { height: 12rem; }
.h-56 { height: 14rem; }
.h-64 { height: 16rem; }

/* Border Utilities */
.border-none { border: none; }
.border-t-none { border-top: none; }
.border-r-none { border-right: none; }
.border-b-none { border-bottom: none; }
.border-l-none { border-left: none; }

/* Overflow Utilities */
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

/* Cursor Utilities */
.cursor-default { cursor: default; }
.cursor-auto { cursor: auto; }

/* Opacity Utilities */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Z-index Utilities */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Print-specific Utilities */
.print-only { display: none; }
@media print {
    .print-only { display: block !important; }
    .no-print { display: none !important; }
}

/* ============================================
   Responsive primitives

   Shared building blocks for making desktop-first pages work on phones. Prefer these
   over per-page media queries so behaviour stays consistent across the app.
   ============================================ */

/* ----- Toolbar: wrapping header/action rows ----- */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.toolbar__spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* ----- Checkbox / radio rows ----- */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.375rem 0;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.checkbox-label input {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-heading);
    margin: 1.25rem 0 0.75rem;
}

.form-section-title:first-child {
    margin-top: 0;
}

/* ----- Split shell: filter rail + body ----- */
.split-shell {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.split-shell__body {
    flex: 1;
    min-width: 0;
}

.filter-sidebar--drawer {
    width: 260px;
    flex-shrink: 0;
}

/* ----- Detail shell: main column + secondary rail ----- */
.detail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 992px) {
    .detail-shell {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The trigger button and the drawer's own close button only exist below the breakpoint
   where the rail collapses. */
.filter-sidebar__trigger-row,
.filter-sidebar__close {
    display: none;
}

.table-group-header td {
    background-color: var(--table-header-bg);
    font-weight: 600;
    color: var(--text-heading);
}

@media (max-width: 992px) {
    /* The rail becomes an off-canvas drawer, reusing the sidebar's overlay treatment. */
    .split-shell {
        display: block;
    }

    .filter-sidebar--drawer {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1500;
        width: min(320px, 85vw);
        max-height: none;
        height: 100%;
        overflow-y: auto;
        background-color: var(--card-bg);
        border-right: 1px solid var(--border-color);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .filter-sidebar--drawer.open {
        transform: translateX(0);
    }

    .filter-overlay {
        z-index: 1400;
    }

    .filter-sidebar__trigger-row,
    .filter-sidebar__close {
        display: flex;
    }
}

/* ----- Card-stack tables -----
   Below md a wide table becomes one card per row, each cell labelled from its
   data-label attribute. Scoped to `screen` so printed output keeps real tables. */
@media screen and (max-width: 768px) {
    .table-stack thead {
        display: none;
    }

    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td {
        display: block;
    }

    .table-stack tbody tr {
        border: 1px solid var(--table-border);
        border-radius: 10px;
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.75rem;
        background-color: var(--table-row-bg);
    }

    /* the nth-child striping reads as noise once rows are cards */
    .table-stack tbody tr:nth-child(even) {
        background-color: var(--table-row-bg);
    }

    .table-stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        /* neutralises the fixed px widths the desktop layout sets on <th>/<td> */
        width: auto !important;
        text-align: left !important;
        border-bottom: 1px solid var(--table-border);
        padding: 0.625rem 0;
    }

    .table-stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.8125rem;
        flex-shrink: 0;
    }

    /* cells with no label (checkboxes, action menus) get the full width */
    .table-stack tbody td:not([data-label])::before,
    .table-stack tbody td[data-label=""]::before {
        content: none;
    }

    .table-stack tbody td:not([data-label]),
    .table-stack tbody td[data-label=""] {
        justify-content: flex-end;
    }

    .table-stack tbody tr td:last-child {
        border-bottom: none;
    }

    .table-stack .table-group-header td {
        justify-content: flex-start;
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
    }

    .table-stack .table-group-header {
        border: none;
        padding: 0;
        background: none;
    }

    /* the container no longer needs to scroll once rows stack */
    .table-container {
        overflow-x: visible;
        border: none;
    }
}

/* ----- Expense card-stack -----
   Expense and expenditure rows carry more columns than a label-per-cell card can
   hold, so below md `.table-stack--cards` lays them out as a two-column grid with
   no labels at all: name and total lead the card, the unit maths sits under them,
   and the wording inside each cell ("each", "spent", "remaining") says what the
   figure is. Columns worth only a word or two — stage, category, vendor, sku —
   fold into the name cell's meta line and their own cell is dropped. Each table
   then names its own row shape via grid-template-areas. */
.expense-cell-meta {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.expense-cell-qty,
.expense-cell-unit {
    white-space: nowrap;
}

.expense-stack-only {
    display: none;
}

.expense-desktop-only {
    display: inline;
}

.expense-cell-percentage {
    margin-top: 0.125rem;
    font-weight: 600;
}

.expense-cell-percentage--over {
    color: var(--danger-color);
}

@media screen and (max-width: 768px) {
    .table-stack--cards tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 1rem;
        row-gap: 0.5rem;
        padding: 0.75rem;
    }

    .table-stack--expense tbody tr {
        grid-template-areas:
            "name   total"
            "qty    unit"
            "select actions";
    }

    .table-stack--expense-summary tbody tr {
        grid-template-areas:
            "name total"
            "qty  qty";
    }

    .table-stack--expenditure tbody tr {
        grid-template-areas:
            "name total"
            "qty  qty";
    }

    .table-stack--cards tbody td {
        display: block;
        min-width: 0;
        padding: 0;
        border-bottom: none;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .table-stack--cards tbody td::before {
        content: none;
    }

    .expense-stack-only {
        display: inline;
    }

    .expense-desktop-only {
        display: none;
    }

    p.expense-stack-only {
        display: block;
    }

    .table-stack tbody td.expense-cell-folded {
        display: none;
    }

    .expense-cell-name { grid-area: name; }
    .expense-cell-total { grid-area: total; }
    .expense-cell-qty { grid-area: qty; }
    .expense-cell-unit { grid-area: unit; }
    .expense-cell-note { grid-area: note; }
    .expense-cell-select { grid-area: select; }
    .expense-cell-actions { grid-area: actions; }

    .table-stack tbody td.expense-cell-total,
    .table-stack tbody td.expense-cell-unit {
        text-align: right !important;
    }

    .expense-cell-total strong {
        font-size: 1.0625rem;
    }

    .table-stack--expense .expense-quantity-needed {
        color: var(--text-heading);
        font-size: 1.0625rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .table-stack--expenditure .expense-cell-name > strong,
    .table-stack--expenditure .expenditure-quantity {
        color: var(--text-heading);
        font-weight: 600;
    }

    .table-stack--expenditure .expense-cell-name > strong {
        font-size: 1.0625rem;
        line-height: 1.25;
    }

    .expense-cell-select,
    .expense-cell-actions {
        align-self: center;
    }

    .expense-cell-actions .table-actions {
        justify-content: flex-end;
    }

    /* The stacked card gives the action row its own line, so the named action can spread out
       instead of being squeezed against the overflow menu. */
    .expense-cell-actions .row-actions__primary {
        padding-inline: 1rem;
        font-size: 0.875rem;
    }
}

/* ----- Estimate card-stack -----
   Below md an estimate row becomes a label-free card. Rank and type do the work
   the column headers did: the label and the amount lead the card in heading
   type, the last-modified date and status sit beneath them, and the reference
   closes it out in muted small type. Sent has no value yet, so its cell drops
   rather than showing a bare dash.

   The reference and the action bar span both columns. Four 44px touch targets
   in the right-hand track would size it to ~176px and leave the label about a
   third of the card, so they get a row of their own. The bulk-select checkbox
   is a desktop affordance and drops rather than spend a gutter. */
.estimate-stack-only {
    display: none;
}

/* Title/subtitle cells (label + client, last-modified date + editor) read top-down
   in both the desktop table and the mobile card, so every row aligns to its start. */
.table-stack--estimate tbody td {
    vertical-align: top;
}

.estimate-cell-title {
    display: block;
    font-weight: 600;
    color: var(--text-heading);
    text-decoration: none;
}

.estimate-cell-title:hover {
    text-decoration: underline;
}

.estimate-cell-subtitle {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-muted);
}

@media screen and (max-width: 768px) {
    .table-stack--estimate tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name     amount"
            "modified status"
            "ref      ref"
            "actions  actions";
        column-gap: 0.75rem;
        row-gap: 0.375rem;
        align-items: start;
    }

    .estimate-cell-name { grid-area: name; }
    .estimate-cell-amount { grid-area: amount; }
    .estimate-cell-modified { grid-area: modified; }
    .estimate-cell-status { grid-area: status; }
    .estimate-cell-ref { grid-area: ref; }
    .estimate-cell-actions { grid-area: actions; }

    .table-stack tbody td.estimate-cell-select {
        display: none;
    }

    .estimate-stack-only {
        display: inline;
    }

    /* The label carries the weight the "Project Name" header used to carry. */
    .estimate-cell-name .estimate-cell-title {
        font-size: 1.0625rem;
        font-weight: 700;
        line-height: 1.25;
    }

    /* Right-aligned lining figures read as money without a header to say so. */
    .table-stack tbody td.estimate-cell-amount {
        text-align: right !important;
        font-size: 1.0625rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--text-heading);
        white-space: nowrap;
    }

    .table-stack tbody td.estimate-cell-status {
        text-align: right !important;
    }

    .estimate-cell-status .status {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Tracked, muted small type marks the reference as an identifier. */
    .estimate-cell-ref,
    .estimate-cell-ref a,
    .estimate-cell-ref strong {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        text-decoration: none;
    }

    .estimate-cell-ref .estimate-stack-only {
        font-weight: 400;
        letter-spacing: 0;
    }

    /* A hairline keeps the controls from reading as another data point. */
    .estimate-cell-actions {
        border-top: 1px solid var(--table-border);
        margin-top: 0.25rem;
        padding-top: 0.25rem;
    }

    .estimate-cell-actions .table-actions {
        justify-content: flex-end;
    }
}

/* ----- Touch targets ----- */
@media (max-width: 768px) {
    .icon-btn,
    .dropdown-item,
    .table-actions .btn,
    .row-actions .btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ----- Blank Centered Layout ----- */
.blank-centered-layout {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    background-color: var(--bg-primary);
    box-sizing: border-box;
}