/* Shared workspace UI. Loaded after the legacy styles during the gradual refresh. */
:root { --ui-ink: #263b59; --ui-muted: #5d6d83; --ui-line: #d8e2f0; --ui-accent: #dce7f8; --ui-accent-dark: #304f7a; --ui-accent-hover: #cbdcf5; --ui-soft: #edf2fb; --ui-hover: #f1f5fc; --ui-summary: #e1eafa; --ui-hero: #eef3fc; --ui-hero-top: #f1f6ff; --ui-page: #f8faff; --ui-focus: #8eabda; --ui-illustration-filter: none; --ui-surface: #ffffff; --bg-surface: #ffffff; --text-900: #263b59; --text-700: #455b78; --text-500: #5d6d83; --border-200: var(--ui-line); --primary-600: var(--ui-accent); --primary-700: var(--ui-accent-dark); --primary-800: var(--ui-accent-dark); --primary-100: var(--ui-soft); --accent-500: var(--ui-accent-hover); }
:root[data-theme="sage"] { --ui-line: #d5e7dc; --ui-accent: #dcefe6; --ui-accent-dark: #315d49; --ui-accent-hover: #c9e3d5; --ui-soft: #edf6f0; --ui-hover: #f2f8f4; --ui-summary: #e0efe6; --ui-hero: #eff7f1; --ui-hero-top: #f4faf5; --ui-page: #fafcf9; --ui-focus: #75a48b; --ui-illustration-filter: hue-rotate(-95deg); }
:root[data-theme="lavender"] { --ui-line: #e0dbef; --ui-accent: #e7e2f6; --ui-accent-dark: #514174; --ui-accent-hover: #d9d0f0; --ui-soft: #f2eff9; --ui-hover: #f7f5fc; --ui-summary: #e9e3f7; --ui-hero: #f4f0fb; --ui-hero-top: #f8f5fd; --ui-page: #fcfaff; --ui-focus: #a08cc8; --ui-illustration-filter: hue-rotate(55deg); }
:root[data-theme="peach"] { --ui-line: #f0dfd5; --ui-accent: #f7e6db; --ui-accent-dark: #744b35; --ui-accent-hover: #f1d8c8; --ui-soft: #fbf0e9; --ui-hover: #fcf6f1; --ui-summary: #f8e9dd; --ui-hero: #fdf3ec; --ui-hero-top: #fff8f3; --ui-page: #fffcf9; --ui-focus: #c29a7c; --ui-illustration-filter: hue-rotate(150deg); }
html { color-scheme: light; }
.ui-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 1.05rem; height: 1.05rem; display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
body { background: var(--ui-page); color: var(--ui-ink); min-height: 100vh; display: flex; flex-direction: column; }
body > .app-main { flex: 1; }
.container, .container-fluid { height: auto; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 2000; padding: .65rem 1rem; color: white; background: var(--ui-ink); border-radius: .5rem; }
.skip-link:focus { top: .5rem; }
.app-header { background: var(--ui-page); border-bottom: 1px solid var(--ui-line); box-shadow: 0 2px 12px rgba(38, 59, 89, .04); }
.app-header__inner { max-width: 1720px; margin: auto; padding: .75rem 1.5rem; gap: 1rem; }
.app-header .navbar-toggler { background: white; border: 1px solid var(--ui-line); padding: .4rem .65rem; }
.app-brand { display: flex; align-items: center; gap: .7rem; color: var(--ui-ink); text-decoration: none; line-height: 1.12; flex-shrink: 0; }
.app-brand:hover { color: var(--ui-accent-dark); }
.app-brand strong, .app-brand small { display: block; }
.app-brand strong { font-size: 1.08rem; }
.app-brand small { font-size: .72rem; color: var(--ui-muted); margin-top: .2rem; }
.app-brand__mark { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: .7rem; background: var(--ui-accent); color: var(--ui-accent-dark); }
.app-brand__mark .ui-icon { width: 1.35rem; height: 1.35rem; }
.app-header .app-account { flex-wrap: wrap; min-width: 0; flex-shrink: 1; max-width: 100%; }
.app-account__identity { display: flex; flex-direction: column; gap: .15rem; min-width: 0; max-width: 22rem; flex: 0 1 auto; text-align: left; font-size: .85rem; line-height: 1.4; overflow-wrap: anywhere; white-space: normal; }
.app-account__identity small { color: var(--ui-muted); font-size: .75rem; }
@media (max-width: 640px) { .app-account__identity { flex-basis: 100%; max-width: 100%; } }
.app-nav { gap: .1rem; margin: .7rem auto .7rem 1rem; align-items: center; }
.app-nav .nav-link { display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: .55rem; padding: .5rem .65rem; color: var(--ui-muted); font-weight: 600; background: transparent; white-space: nowrap; transition: color .18s ease, background-color .18s ease, transform .18s ease; }
.app-nav .nav-link:hover, .app-nav .nav-link.active { color: var(--ui-accent-dark); background: var(--ui-soft); }
.app-nav .nav-link:hover { transform: translateY(-1px); }
.app-nav .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.app-nav .dropdown-menu { animation: ui-fade .16s ease-out both; }
.app-account { display: flex; align-items: center; gap: .55rem; flex-wrap: nowrap; flex-shrink: 0; margin-left: auto; white-space: nowrap; }
.app-header .navbar-collapse { min-width: 0; }
@media (min-width: 992px) { .app-header .navbar-collapse { flex-wrap: wrap; } .app-nav { flex-wrap: wrap; } }
.app-account__apartment, .app-account__role { font-size: .78rem; padding: .35rem .6rem; border-radius: 99px; background: var(--ui-soft); color: var(--ui-ink); }
.app-account__role { text-transform: capitalize; }
.app-account__logout { display: inline-flex; align-items: center; gap: .4rem; color: var(--ui-accent-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.app-account__logout:hover { text-decoration: underline; }
.theme-picker { position: relative; color: var(--ui-ink); }
.theme-picker[open] { z-index: 1050; }
.theme-picker summary { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .6rem; border: 1px solid var(--ui-line); border-radius: .55rem; background: var(--ui-soft); color: var(--ui-accent-dark); font-size: .85rem; font-weight: 700; cursor: pointer; list-style: none; white-space: nowrap; }
.theme-picker summary::-webkit-details-marker { display: none; }
.theme-picker summary:hover, .theme-picker[open] summary { background: var(--ui-accent); }
.theme-picker__panel { position: absolute; right: 0; top: calc(100% + .6rem); width: min(18rem, calc(100vw - 2rem)); padding: 1rem; border: 1px solid var(--ui-line); border-radius: .85rem; background: white; box-shadow: 0 14px 36px rgba(38, 59, 89, .16); }
.theme-picker fieldset { border: 0; margin: 0; padding: 0; }
.theme-picker legend { float: none; margin: 0 0 .5rem; font-size: .92rem; font-weight: 800; }
.theme-picker__option { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .35rem .15rem; font-size: .88rem; cursor: pointer; }
.theme-picker__option input { accent-color: var(--ui-accent-dark); }
.theme-picker__swatch { width: 1.1rem; height: 1.1rem; flex: none; border: 1px solid var(--ui-line); border-radius: 50%; background: var(--swatch); }
.theme-picker__custom { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--ui-line); font-size: .85rem; font-weight: 700; }
.theme-picker__custom input { width: 2.5rem; height: 2rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.theme-picker__reset { width: 100%; margin-top: .75rem; padding: .45rem .65rem; border: 1px solid var(--ui-line); border-radius: .45rem; background: var(--ui-soft); color: var(--ui-accent-dark); font-size: .82rem; font-weight: 700; }
.theme-picker__reset:hover { background: var(--ui-accent); }
.app-main { width: 100%; max-width: none; padding: 2rem clamp(1rem, 2.5vw, 2.5rem) 4rem; }
.app-footer { border-top: 1px solid var(--ui-line); color: var(--ui-muted); padding: 1rem 0; background: white; font-size: .86rem; }
.app-footer .container { padding: 0 1.5rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .13em; color: var(--ui-accent-dark); font-size: .75rem; font-weight: 800; margin-bottom: .55rem; }
.welcome-panel { position: relative; min-height: 420px; display: flex; align-items: center; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); border-radius: 1.4rem; background: var(--ui-hero); border: 1px solid var(--ui-line); isolation: isolate; }
.welcome-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url('../images/apartment-community.svg') right bottom / auto 100% no-repeat; filter: var(--ui-illustration-filter); }
.welcome-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--ui-hero-top) 0%, var(--ui-hero-top) 31%, transparent 72%); pointer-events: none; }
.welcome-panel > div { position: relative; z-index: 2; max-width: 650px; }
.welcome-panel h1 { max-width: 680px; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.welcome-panel__intro { max-width: 620px; color: var(--ui-muted); font-size: 1.08rem; margin: 1rem 0 1.5rem; }
.workspace-section { margin-top: 2.5rem; }
.section-heading h2 { font-size: 1.5rem; font-weight: 750; margin: 0 0 1.2rem; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.quick-card { display: flex; flex-direction: column; gap: .55rem; position: relative; min-height: 180px; padding: 1.25rem; background: white; border: 1px solid var(--ui-line); border-radius: 1rem; color: var(--ui-ink); text-decoration: none; box-shadow: 0 4px 16px rgba(20,43,63,.035); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.quick-card:hover { color: var(--ui-ink); transform: translateY(-3px); box-shadow: 0 12px 25px rgba(20,43,63,.1); }
.quick-card:hover { border-color: var(--ui-focus); }
.quick-card__icon { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; color: var(--ui-accent-dark); background: var(--ui-soft); border-radius: .65rem; }
.quick-card__icon .ui-icon { width: 1.2rem; height: 1.2rem; }
.quick-card strong { font-size: 1.1rem; }
.quick-card > span:not(.quick-card__icon):not(.quick-card__arrow) { color: var(--ui-muted); font-size: .9rem; }
.quick-card__arrow { position: absolute; right: 1rem; top: 1rem; font-size: 1.25rem; color: var(--ui-accent-dark); transition: transform .2s ease; }
.quick-card:hover .quick-card__arrow { transform: translate(2px, -2px); }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-heading h1 { font-size: clamp(1.85rem, 3vw, 2.5rem); letter-spacing: -.025em; font-weight: 780; margin: 0; }
.page-heading p:last-child { color: var(--ui-muted); margin: .4rem 0 0; }
.page-heading__actions { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.btn-primary, button.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; background: var(--ui-accent); border-color: var(--ui-line); color: var(--ui-accent-dark); font-weight: 700; transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn-primary:hover, button.btn-primary:hover { background: var(--ui-accent-hover); border-color: var(--ui-line); color: var(--ui-accent-dark); }
.btn-primary:hover, button.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(48, 79, 122, .15); }
.btn-primary:active, button.btn-primary:active { transform: translateY(0); box-shadow: none; }
.app-main button:not(.btn-primary), .app-main input[type=submit] { background: var(--ui-accent); border: 1px solid var(--ui-line); color: var(--ui-accent-dark); font-weight: 700; }
.app-main button:not(.btn-primary):hover, .app-main input[type=submit]:hover { background: var(--ui-accent-hover); color: var(--ui-accent-dark); }
.list-toolbar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 1rem; }
.list-toolbar label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.list-toolbar input[type=search] { max-width: 400px; background: white; }
.form-control, .styled-dropdown { transition: border-color .18s ease, box-shadow .18s ease; }
.styled-dropdown { border-color: var(--ui-line); background-color: white; color: var(--ui-ink); }
.form-control:focus, .styled-dropdown:focus { border-color: var(--ui-focus); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ui-focus) 22%, transparent); }
.list-toolbar__count { color: var(--ui-muted); font-size: .86rem; margin-left: auto; }
.table-responsive { background: white; border: 1px solid var(--ui-line); border-radius: .85rem; overflow: auto; }
.table {
    --bs-table-bg: #ffffff;
    --bs-table-color: var(--ui-ink);
    --bs-table-hover-bg: var(--ui-hover);
    --bs-table-hover-color: var(--ui-ink);
    background: #ffffff;
    color: var(--ui-ink);
}
.table > :not(caption) > * > * { background: #ffffff; color: var(--ui-ink); box-shadow: none; }
.table > thead > tr > * { background: var(--ui-soft); color: var(--ui-ink); font-weight: 700; }
.table > tbody > tr:hover > * { background: var(--ui-hover); color: var(--ui-ink); }
.table > tbody > tr > * { transition: background-color .18s ease; }
.table > thead > tr.report-summary > * { background: var(--ui-summary); color: var(--ui-accent-dark); font-weight: 700; }
.table > :not(caption) > * > .report-value { background: var(--ui-summary); color: var(--ui-accent-dark); font-weight: 700; }
.app-table { margin: 0; min-width: 720px; }
.app-table th { background: var(--ui-soft); color: var(--ui-ink); white-space: nowrap; border-bottom: 1px solid var(--ui-line); }
.app-table td { vertical-align: middle; border-color: var(--ui-line); }
.app-table tbody tr:hover { background: var(--ui-hover); }
.app-table a { color: var(--ui-accent-dark); font-weight: 700; }
.app-table a .ui-icon { margin-right: .25rem; }
.app-table a:hover .ui-icon { transform: translateX(2px); }
.app-table a .ui-icon { transition: transform .18s ease; }
.app-table { width: 100%; }
.app-table td { white-space: nowrap; }
.app-table .table-text { min-width: 10rem; max-width: 20rem; white-space: normal; overflow-wrap: break-word; }
.app-table .table-actions { white-space: nowrap; width: 1%; }
.app-table .visitor-actions-cell { white-space: normal; width: 14rem; min-width: 8rem; }
.visitor-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 14rem; }
.app-table .visitor-row-actions .btn { text-decoration: none; font-weight: 600; }
.visitor-row-actions .btn-outline-primary { --bs-btn-color: var(--ui-accent-dark); --bs-btn-border-color: var(--ui-accent-dark); --bs-btn-hover-bg: var(--ui-accent-dark); --bs-btn-hover-border-color: var(--ui-accent-dark); --bs-btn-active-bg: var(--ui-accent-dark); --bs-btn-active-border-color: var(--ui-accent-dark); }
.app-table .visitor-row-actions .btn-outline-danger { color: var(--bs-danger, #dc3545); }
.app-table .visitor-row-actions .btn:hover, .app-table .visitor-row-actions .btn:active { color: white; }
.access-revoke-form { display: inline; margin-left: .65rem; }
.app-main button.access-revoke-button { padding: .15rem .25rem; border: 0; background: transparent; color: #9b3535; font-size: .9rem; text-decoration: underline; }
.app-main button.access-revoke-button:hover { background: transparent; color: #712121; }
.report-table { min-width: 0; margin-bottom: 1rem; }
.maintenance-table { width: 100%; min-width: 0; }
.maintenance-table th, .maintenance-table td { white-space: nowrap; }
.maintenance-table .maintenance-comment { min-width: 11rem; max-width: 18rem; white-space: normal; overflow-wrap: break-word; }
.search-empty { border: 1px dashed var(--ui-line); background: white; border-radius: .7rem; padding: 1.5rem; text-align: center; color: var(--ui-muted); }
.login-form { max-width: 440px; padding: 1.5rem; border: 1px solid var(--ui-line); border-radius: 1rem; background: white; display: grid; gap: 1rem; }
.login-form .form-group { display: grid; gap: .35rem; }
.login-form label { font-weight: 700; }
.login-form .btn { justify-self: start; }
.form-page-heading { max-width: 900px; margin-bottom: 1.25rem; }
.record-form { width: min(100%, 900px); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--ui-line); border-radius: 1rem; background: white; box-shadow: 0 8px 24px rgba(38, 59, 89, .045); }
.record-form--compact { max-width: 600px; }
.record-form .form-validation:empty { display: none; }
.record-form .form-validation:not(:empty) { margin-bottom: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.4rem; row-gap: 1.25rem; }
.record-form--compact .form-grid { grid-template-columns: 1fr; }
.form-field { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { margin: 0; color: var(--ui-ink); font-size: .9rem; font-weight: 700; }
.form-field .form-control, .form-field .form-select, .form-field .styled-dropdown { width: 100%; max-width: none; min-height: 2.7rem; margin: 0; background-color: #fff; }
.form-field .form-check { display: flex; align-items: center; gap: .65rem; min-height: 2.7rem; padding-left: 0; margin: 0; }
.form-field .form-check-input { position: static; float: none; width: 1.1rem; height: 1.1rem; margin: 0; flex: none; }
.form-field .form-check-label { font-weight: 600; }
.form-field .text-danger:empty { display: none; }
.form-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--ui-line); }
.form-actions .btn { min-width: 7rem; }
.form-cancel { color: var(--ui-accent-dark); font-weight: 700; text-decoration: none; }
.form-cancel:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
button > .ui-icon { margin-right: .35rem; }
.btn-primary > .ui-icon, .app-nav .ui-icon { margin-right: 0; }
.welcome-panel, .page-heading, .list-toolbar, .table-responsive, .login-form { animation: ui-enter .42s ease-out both; }
.page-heading, .list-toolbar { animation-delay: .05s; }
.table-responsive, .login-form { animation-delay: .1s; }
.quick-card { animation: ui-fade .42s ease-out both; }
.quick-card:nth-child(2) { animation-delay: .06s; }
.quick-card:nth-child(3) { animation-delay: .12s; }
.quick-card:nth-child(4) { animation-delay: .18s; }
@keyframes ui-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1200px) { .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-nav { margin-left: 0; } }
@media (max-width: 991px) { .app-account { flex-wrap: wrap; padding: .75rem 0; border-top: 1px solid var(--ui-line); } .app-nav { align-items: stretch; } .app-nav .nav-link { display: flex; width: 100%; text-align: left; } }
@media (max-width: 640px) { .app-main { padding: 1.25rem 1rem 3rem; } .quick-grid, .form-grid { grid-template-columns: 1fr; } .page-heading { align-items: stretch; flex-direction: column; } .page-heading .btn { align-self: flex-start; } .list-toolbar input[type=search] { max-width: none; width: 100%; } .list-toolbar__count { margin-left: 0; width: 100%; } .record-form { padding: 1.25rem; } .welcome-panel { min-height: 460px; align-items: flex-start; } .welcome-panel::before { background-size: auto 54%; } .welcome-panel::after { background: linear-gradient(180deg, var(--ui-hero-top) 0%, var(--ui-hero-top) 42%, transparent 80%); } }
@media (prefers-reduced-motion: reduce) { .welcome-panel, .page-heading, .list-toolbar, .table-responsive, .login-form, .quick-card, .app-nav .dropdown-menu { animation: none; } .quick-card, .quick-card__arrow, .app-nav .nav-link, .btn-primary, button.btn-primary, .app-table a .ui-icon, .table > tbody > tr > *, .form-control, .styled-dropdown { transition: none; } .quick-card:hover, .app-nav .nav-link:hover, .btn-primary:hover, button.btn-primary:hover, .app-table a:hover .ui-icon { transform: none; } }

/* Operations grid: distinguish settled balances from remaining contributions. */
.apartment-document-list { list-style: none; padding: 0; margin: 1rem 0; }
.apartment-document-row { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--bs-border-color, #d8e4df); }
.apartment-document-name { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.apartment-document-row form { margin: 0; }
.collection-remaining {
    display: inline-block;
    padding: .25rem .6rem;
    border: 1px solid;
    border-radius: .375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.collection-remaining--paid {
    color: #166534;
    background-color: #dcfce7;
    border-color: #86efac;
}
.collection-remaining--due {
    color: #9a3412;
    background-color: #ffedd5;
    border-color: #fdba74;
}