:root { color: #17212b; background: #f7f8fa; font-family: Inter, ui-sans-serif, system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; } .brand { color: #123b35; font-size: 1.35rem; font-weight: 750; letter-spacing: -.04em; text-decoration: none; } .muted { color: #5e6874; line-height: 1.55; } .eyebrow { color: #327268; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.auth-layout { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 1.5rem; } .auth-card { background: #fff; border: 1px solid #dce1e5; border-radius: 16px; box-shadow: 0 12px 32px rgb(23 33 43 / 8%); max-width: 28rem; padding: 2rem; width: 100%; } .auth-card h1 { font-size: 2rem; letter-spacing: -.04em; margin: .6rem 0; } .stack { display: grid; gap: .55rem; margin-top: 1.75rem; } label { font-size: .92rem; font-weight: 650; margin-top: .55rem; } input { border: 1px solid #aeb8c2; border-radius: 8px; font: inherit; min-height: 2.75rem; padding: .65rem .75rem; } input:focus { border-color: #327268; box-shadow: 0 0 0 3px rgb(50 114 104 / 18%); outline: 0; } button { background: #123b35; border: 1px solid #123b35; border-radius: 8px; color: #fff; cursor: pointer; font: inherit; font-weight: 700; min-height: 2.75rem; padding: .55rem 1rem; } .button-secondary { background: #fff; color: #123b35; } .alert { border-radius: 8px; margin: 1rem 0; padding: .8rem .9rem; } .alert-error { background: #fff1f0; border: 1px solid #efb8b2; color: #8d241c; }
.app-shell { min-height: 100vh; } .app-header { align-items: center; background: #fff; border-bottom: 1px solid #dce1e5; display: flex; gap: 1rem; justify-content: space-between; min-height: 4.25rem; padding: 0 2rem; } .workspace-label { display: grid; margin-right: auto; } .workspace-label span { font-size: .92rem; font-weight: 650; } .workspace-label small, .app-nav small { color: #77818b; font-size: .75rem; } .app-body { display: grid; grid-template-columns: 14rem minmax(0, 1fr); min-height: calc(100vh - 4.25rem); } .app-nav { align-content: start; background: #fff; border-right: 1px solid #dce1e5; display: grid; gap: .3rem; padding: 1.25rem; } .app-nav a, .app-nav span { border-radius: 7px; color: #48535e; padding: .7rem .75rem; text-decoration: none; } .app-nav a[aria-current="page"] { background: #e5f2ef; color: #123b35; font-weight: 700; } .app-nav span { color: #8a939c; display: grid; } .content { margin: 0 auto; max-width: 58rem; padding: 3rem 2rem; width: 100%; } .content h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.05em; margin: .35rem 0 .8rem; } .empty-state { background: #fff; border: 1px dashed #aeb8c2; border-radius: 12px; margin-top: 2rem; padding: 1.5rem; } .empty-state h2 { font-size: 1.1rem; margin-top: 0; } .empty-state p { color: #5e6874; margin-bottom: 0; }
@media (max-width: 640px) { .app-header { padding: 0 1rem; } .app-body { display: block; } .app-nav { border-bottom: 1px solid #dce1e5; border-right: 0; display: flex; overflow-x: auto; padding: .65rem 1rem; white-space: nowrap; } .content { padding: 2rem 1rem; } }
.page-heading { align-items: end; display: flex; gap: 1.5rem; justify-content: space-between; margin-bottom: 2rem; } .page-heading h1 { margin-bottom: .45rem; } .page-heading .muted { margin-bottom: 0; max-width: 42rem; } .month-picker { color: #48535e; display: grid; flex: 0 0 auto; font-size: .78rem; gap: .25rem; letter-spacing: .04em; text-transform: uppercase; } .month-picker input { background: #fff; font-size: .95rem; letter-spacing: normal; min-width: 10rem; text-transform: none; } .notice { align-items: baseline; background: #e5f2ef; border: 1px solid #bfddd7; border-radius: 10px; color: #1e4f47; display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-bottom: 1.25rem; padding: .85rem 1rem; } .notice span { color: #37665f; }
.planning-grid, .catalog-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .planning-wide { grid-column: 1 / -1; } .surface { background: #fff; border: 1px solid #dce1e5; border-radius: 12px; padding: 1.25rem; } .section-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; } .section-heading h2 { font-size: 1.1rem; letter-spacing: -.02em; margin: 0; } .section-heading p { color: #5e6874; font-size: .92rem; line-height: 1.5; margin: .35rem 0 0; } .empty-inline { border-top: 1px solid #edf0f2; margin-top: 1rem; padding-top: 1rem; } .empty-inline h3 { font-size: .96rem; margin: 0 0 .25rem; } .empty-inline p { color: #5e6874; line-height: 1.5; margin: 0; }
.inline-form { background: #f7f8fa; border-radius: 9px; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; padding: 1rem; } .inline-form label, .catalog-form label { display: grid; gap: .35rem; } select { background: #fff; border: 1px solid #aeb8c2; border-radius: 8px; font: inherit; min-height: 2.75rem; padding: .65rem .75rem; } select:focus { border-color: #327268; box-shadow: 0 0 0 3px rgb(50 114 104 / 18%); outline: 0; } .inline-form-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-actions { align-items: end; display: flex; gap: .5rem; grid-column: 1 / -1; justify-content: end; } .catalog-form { display: grid; gap: .45rem; margin: 1.25rem 0 0; } .catalog-form > div { display: flex; gap: .5rem; } .catalog-form input { min-width: 0; width: 100%; } .catalog-list { display: grid; gap: .5rem; list-style: none; margin: 1rem 0 0; padding: 0; } .catalog-list:not(:empty) + .empty-inline { display: none; }
.calendar-month { background: #e5f2ef; border-radius: 99px; color: #1e4f47; font-size: .9rem; font-weight: 700; padding: .55rem .8rem; white-space: nowrap; } .calendar-surface { padding: 0; overflow: hidden; } .calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .calendar-weekdays { background: #f7f8fa; border-bottom: 1px solid #dce1e5; color: #77818b; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase; } .calendar-weekdays span { padding: .7rem .2rem; } .calendar-day { border-bottom: 1px solid #edf0f2; border-right: 1px solid #edf0f2; min-height: 5.5rem; padding: .5rem; } .calendar-day:nth-child(7n) { border-right: 0; } .calendar-day span { color: #48535e; font-size: .85rem; font-weight: 650; } .calendar-day-empty { background: #fbfcfd; } .calendar-empty { border: 0; margin: 0; padding: 1.25rem; }
@media (max-width: 760px) { .page-heading { align-items: start; flex-direction: column; } .planning-grid, .catalog-grid { grid-template-columns: 1fr; } .inline-form, .inline-form-wide { grid-template-columns: 1fr; } .calendar-day { min-height: 4rem; } } @media (max-width: 440px) { .section-heading { flex-direction: column; } .section-heading .button-secondary { width: 100%; } .catalog-form > div { flex-direction: column; } .calendar-weekdays { font-size: .61rem; } .calendar-day { min-height: 3.25rem; } }
.content-planning, .content-catalogs, .content-calendar { max-width: none; } .page-heading { margin-bottom: 1.5rem; } .page-toolbar { align-items: center; background: #fff; border: 1px solid #dce1e5; border-radius: 12px; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.25rem; padding: .75rem; } .toolbar-actions, .month-navigation { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; } .toolbar-copy { color: #5e6874; font-size: .92rem; } .month-picker { align-items: center; display: flex; gap: .55rem; } .table-wrap { margin: 1rem -1.25rem -1.25rem; overflow-x: auto; } table { border-collapse: collapse; min-width: 100%; text-align: left; width: 100%; } th { background: #f7f8fa; color: #5e6874; font-size: .72rem; font-weight: 750; letter-spacing: .05em; padding: .7rem 1.25rem; text-transform: uppercase; } td { border-top: 1px solid #edf0f2; color: #34414c; padding: .85rem 1.25rem; } .empty-row td { padding: 1.25rem; } .empty-row h3, .empty-list h3 { font-size: .96rem; margin: 0 0 .25rem; } .empty-row p, .empty-list p { color: #5e6874; line-height: 1.5; margin: 0; } .record-list { display: grid; gap: .5rem; list-style: none; margin: 1rem 0 0; padding: 0; } .empty-list { border: 1px dashed #c4ccd2; border-radius: 9px; padding: 1rem; } .selection-label { color: #77818b; font-size: .82rem; font-weight: 650; white-space: nowrap; } .action-modal { border: 0; border-radius: 14px; box-shadow: 0 18px 48px rgb(23 33 43 / 24%); max-width: min(32rem, calc(100vw - 2rem)); padding: 0; width: 100%; } .action-modal::backdrop { background: rgb(23 33 43 / 42%); } .modal-header { align-items: center; border-bottom: 1px solid #edf0f2; display: flex; justify-content: space-between; padding: 1rem 1.25rem; } .modal-header h2 { font-size: 1.15rem; margin: 0; } .icon-button { align-items: center; background: transparent; border-color: transparent; color: #48535e; display: inline-flex; font-size: 1.35rem; justify-content: center; min-height: 2.25rem; min-width: 2.25rem; padding: 0; } .icon-button:hover { background: #edf0f2; } .modal-form { display: grid; gap: .85rem; padding: 1.25rem; } .modal-form label { display: grid; font-size: .92rem; gap: .35rem; } .form-actions { justify-content: end; margin-top: .5rem; } .calendar-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) 18rem; } .calendar-day { min-height: 6rem; } .upcoming-panel { align-self: start; } .sr-only { clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; }
.form-hint { color: #5e6874; font-size: .86rem; line-height: 1.45; margin: 0; }
.bag-total-row th, .bag-total-row td { background: #e5f2ef; border-top: 1px solid #bfddd7; color: #1e4f47; font-size: .84rem; font-weight: 750; letter-spacing: normal; text-transform: none; } .bag-total-row td:last-child { color: #37665f; font-size: .78rem; font-weight: 500; } .row-actions { white-space: nowrap; } .button-link { background: transparent; border: 0; color: #1e665c; font-size: .82rem; min-height: 2rem; padding: .25rem .35rem; } .button-link:hover { text-decoration: underline; } button:disabled { cursor: not-allowed; opacity: .5; }
.page-feedback:empty { display: none; } .page-feedback { margin-bottom: 1.25rem; } .page-feedback .alert { margin: 0; } .record-item { align-items: center; border: 1px solid #dce1e5; border-radius: 9px; display: flex; gap: .75rem; justify-content: space-between; padding: .7rem .8rem; } .record-item[data-selected="true"] { background: #e5f2ef; border-color: #83b9ae; } .record-item-name { background: transparent; border: 0; color: #17212b; flex: 1; font-weight: 700; min-height: 2rem; padding: 0; text-align: left; } .record-item-name:hover { color: #1e665c; } .record-item-meta { color: #77818b; font-size: .82rem; } .record-item .icon-button { flex: 0 0 auto; font-size: 1rem; } .form-error { color: #8d241c; font-size: .86rem; line-height: 1.4; margin: 0; } .is-loading { opacity: .65; pointer-events: none; }
@media (max-width: 760px) { .page-toolbar { align-items: stretch; flex-direction: column; } .toolbar-actions { justify-content: stretch; } .toolbar-actions button { flex: 1; } .calendar-layout { grid-template-columns: 1fr; } } @media (max-width: 440px) { .toolbar-actions { flex-direction: column; } .toolbar-actions button { width: 100%; } .month-picker { align-items: start; flex-direction: column; } }
.content-planning .planning-grid { grid-template-columns: minmax(17rem, .8fr) minmax(0, 1.7fr); align-items: start; }
.plan-topline { align-items: stretch; background: #fff; border: 1px solid #dce1e5; border-radius: 12px; display: grid; margin-bottom: 1.25rem; min-width: 0; }
.plan-topline-current { background: #f1f8f5; border-color: #bfded2; }
.plan-topline-current .plan-status[data-plan-status="active"] { background: #fde9e9; color: #a1262e; }
.plan-topline-current .plan-status[data-plan-status="active"]::before { animation: live-pulse 2.8s ease-in-out infinite; background: #c62d39; border-radius: 50%; content: ''; display: inline-block; height: .48rem; margin-right: .45rem; width: .48rem; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .plan-topline-current .plan-status[data-plan-status="active"]::before { animation: none; } }
.plan-topline-next { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); }
.plan-topline-main { align-items: center; display: flex; gap: 1rem; justify-content: space-between; min-width: 0; padding: .8rem 1rem; }
.plan-identity { flex: 0 0 auto; }
.plan-identity .eyebrow { font-size: .7rem; margin: 0 0 .15rem; }
.content-planning .plan-identity h1 { font-size: 1.5rem; line-height: 1.15; margin: 0; white-space: nowrap; }
.plan-status { align-items: center; background: #e5f2ef; border-radius: 999px; color: #1e4f47; display: inline-flex; font-size: .78rem; padding: .4rem .7rem; white-space: nowrap; }
.plan-topline-actions { align-items: center; display: flex; gap: .5rem; justify-content: end; }
.plan-topline-actions button { font-size: .8rem; min-height: 2.25rem; padding: .4rem .65rem; white-space: nowrap; }
.plan-topline-actions [data-correction-toggle] { align-items: center; display: inline-flex; gap: .4rem; justify-content: center; }
.plan-topline-actions .toolbar-actions { flex-wrap: nowrap; }
.current-overview { align-items: stretch; display: grid; gap: 1.25rem; grid-template-columns: minmax(16rem, 3fr) minmax(0, 9fr); margin-bottom: 1.25rem; }
.current-overview .plan-topline, .current-overview .current-position { margin-bottom: 0; }
.plan-topline-current .plan-topline-main { align-items: start; flex-direction: column; justify-content: space-between; }
.plan-topline-current .plan-status { order: -1; }
.plan-topline-current .plan-topline-actions, .plan-topline-current [data-correction-toggle] { width: 100%; }
.bag-share { border-left: 1px solid #dce1e5; min-width: 0; padding: .7rem 1rem; }
.bag-share-heading { align-items: baseline; display: flex; gap: .75rem; justify-content: space-between; }
.bag-share-heading h2 { font-size: .83rem; margin: 0; }
.bag-share-heading strong { color: #173d36; font-size: .88rem; font-variant-numeric: tabular-nums; }
.bag-share .muted { font-size: .78rem; margin: .5rem 0 0; }
.bag-share-track { background: #edf0f2; border-radius: 999px; display: flex; height: .7rem; margin-top: .5rem; overflow: hidden; }
.bag-share-track span { display: block; height: 100%; }
.bag-share-color-0 { background: #173d36; } .bag-share-color-1 { background: #3c8a7c; } .bag-share-color-2 { background: #79b8a9; } .bag-share-color-3 { background: #a1a8d3; } .bag-share-color-4 { background: #d2a36d; } .bag-share-color-5 { background: #a67493; }
.bag-share-legend { display: grid; gap: .2rem; list-style: none; margin: .45rem 0 0; max-height: 4.5rem; overflow-y: auto; padding: 0; }
.bag-share-legend li { align-items: center; display: grid; font-size: .72rem; gap: .35rem; grid-template-columns: .55rem minmax(0, 1fr) auto; }
.bag-share-legend i { border-radius: 2px; height: .55rem; width: .55rem; }
.bag-share-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bag-share-legend strong { font-variant-numeric: tabular-nums; }
@media (max-width: 1320px) { .plan-topline-next { grid-template-columns: 1fr; } .bag-share { border-left: 0; border-top: 1px solid #dce1e5; } }
@media (max-width: 1100px) { .current-overview { grid-template-columns: 1fr; } .plan-topline-current .plan-topline-main { align-items: center; flex-direction: row; } .plan-topline-current .plan-topline-actions, .plan-topline-current [data-correction-toggle] { width: auto; } }
@media (max-width: 900px) { .plan-topline-main { align-items: start; flex-wrap: wrap; } .plan-topline-actions { justify-content: start; width: 100%; } }
@media (max-width: 640px) { .plan-topline-actions, .plan-topline-actions .toolbar-actions { flex-wrap: wrap; } .plan-topline-actions button { flex: 1; } }
[hidden] { display: none !important; }
.header-actions { align-items: center; display: flex; flex: 0 0 auto; gap: .5rem; }
.catalog-accounts { margin-bottom: 1.25rem; scroll-margin-top: 1rem; }
.account-record { align-items: center; }
.account-record-main { align-items: center; display: flex; gap: .75rem; min-width: 0; }
.account-icon { align-items: center; background: #e5f2ef; border-radius: 9px; color: #1e665c; display: inline-flex; flex: 0 0 auto; font-family: 'lucide-account' !important; font-size: 1.2rem; font-style: normal; height: 2.25rem; justify-content: center; width: 2.25rem; }
.account-icon-picker { align-items: center; display: flex; gap: .65rem; }
.account-icon-picker input { flex: 1; min-width: 0; }
.account-icon-field { display: grid; gap: .35rem; }
.account-icon-results { background: #fff; border: 1px solid #cbd4d9; border-radius: 9px; box-shadow: 0 8px 20px rgb(23 33 43 / 10%); max-height: min(18rem, 40vh); overflow-y: auto; padding: .25rem; }
.account-icon-result { align-items: center; background: transparent; border: 0; border-radius: 7px; color: #24343c; display: flex; gap: .65rem; min-height: 2.5rem; padding: .25rem .45rem; text-align: left; width: 100%; }
.account-icon-result:hover, .account-icon-result:focus-visible { background: #e5f2ef; }
.account-icon-result .account-icon { height: 1.9rem; width: 1.9rem; }
.account-icon-results .muted { margin: .5rem; }
.dashboard-account > span { flex: 1; }
.account-record-details, .account-record-balance { display: grid; gap: .15rem; }
.account-record-details { min-width: 0; overflow-wrap: anywhere; }
.account-record-details small, .account-record-balance small { color: #5e6874; font-size: .78rem; font-weight: 400; }
.account-record-balance { font-variant-numeric: tabular-nums; margin-left: auto; text-align: right; white-space: nowrap; }
.account-record > .icon-button { flex: 0 0 auto; }
.account-roles { border: 1px solid #dce1e5; border-radius: 9px; display: grid; gap: .35rem; margin: 0; padding: .75rem; }
.account-roles legend { font-size: .92rem; font-weight: 650; padding: 0 .25rem; }
.modal-form .account-roles label { align-items: center; cursor: pointer; display: flex; gap: .65rem; margin: 0; padding: .35rem; }
.account-roles input { accent-color: #1e665c; flex: 0 0 auto; height: 1.15rem; min-height: 0; width: 1.15rem; }
.account-roles label span { display: grid; gap: .1rem; }
.account-roles small { color: #5e6874; font-size: .75rem; font-weight: 400; }
.header-actions form { margin: 0; }
.header-actions button { white-space: nowrap; }
.capture-choices { display: grid; gap: .65rem; padding: 1.25rem; }
.capture-choice { align-items: start; background: #fff; border: 1px solid #cbd5d9; color: #173d36; display: grid; gap: .2rem; padding: .8rem 1rem; text-align: left; }
.capture-choice:hover:not(:disabled), .capture-choice:focus-visible { background: #e5f2ef; border-color: #83b9ae; }
.capture-choice small { color: #5e6874; font-size: .78rem; font-weight: 400; }
.capture-choices .form-hint { margin-top: .3rem; }
.capture-loading, .capture-error { padding: 1.25rem; }
.capture-error .form-error { margin-bottom: .8rem; }
.capture-toast { background: #173d36; border-radius: 9px; bottom: 1rem; box-shadow: 0 10px 30px rgb(23 33 43 / 20%); color: #fff; font-size: .9rem; padding: .8rem 1rem; position: fixed; right: 1rem; z-index: 20; }
.optional-label { color: #77818b; font-size: .8rem; font-weight: 400; }
@media (max-width: 640px) { .app-header { flex-wrap: wrap; padding-bottom: .55rem; padding-top: .55rem; } .workspace-label { margin-right: 0; } .header-actions { justify-content: flex-end; width: 100%; } .header-actions button { font-size: .82rem; min-height: 2.25rem; padding: .35rem .6rem; } }
@media (max-width: 440px) { .account-record { align-items: start; flex-direction: column; } .account-record-balance { margin-left: 0; text-align: left; } }
.expense-type { align-items: center; display: inline-flex; gap: .3rem; white-space: nowrap; }
.expense-type svg { flex: 0 0 auto; }
.expense-type-flexible { color: #247466; }
.expense-type-fixed { color: #173d36; }
.content-transactions { max-width: none; }
.history-tabs { border-bottom: 1px solid #dce1e5; display: flex; gap: .4rem; margin-bottom: 1rem; }
.history-tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: #48535e; padding: .65rem 1rem; }
.history-tabs button[aria-selected="true"] { border-bottom-color: #173d36; color: #173d36; }
.history-filters { margin-bottom: 1rem; }
.history-filters form { align-items: end; display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.history-filters label { display: grid; gap: .3rem; margin: 0; min-width: 0; }
.history-filters input, .history-filters select { min-width: 0; width: 100%; }
.history-filter-actions { align-items: center; display: flex; gap: .5rem; }
.history-results { min-height: 13rem; }
.history-table-wrap { overflow-x: auto; }
.history-table { border-collapse: collapse; margin-top: 1rem; width: 100%; }
.history-table th, .history-table td { border-bottom: 1px solid #edf0f2; padding: .7rem .55rem; text-align: left; vertical-align: top; }
.history-table th { color: #5e6874; font-size: .75rem; text-transform: uppercase; }
.history-table td { font-size: .88rem; }
.history-table td small { color: #5e6874; display: block; font-size: .78rem; margin-top: .2rem; overflow-wrap: anywhere; }
.history-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-actions { white-space: nowrap; }
.history-delete { color: #a1262e; }
.history-readonly { color: #77818b; font-size: .8rem; }
.history-pagination { align-items: center; display: flex; gap: 1rem; justify-content: flex-end; padding-top: 1rem; }
.history-pagination span { color: #48535e; font-size: .88rem; }
.history-detail { display: grid; gap: .65rem; margin: 0; padding: 1.25rem; }
.history-detail div { border-bottom: 1px solid #edf0f2; display: grid; gap: .5rem; grid-template-columns: 7rem minmax(0, 1fr); padding-bottom: .55rem; }
.history-detail dt { color: #5e6874; font-size: .84rem; }
.history-detail dd { margin: 0; overflow-wrap: anywhere; }
.history-detail-actions { padding: 0 1.25rem 1.25rem; }
@media (max-width: 1000px) { .history-filters form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .history-filters form { grid-template-columns: 1fr; } .history-filter-actions button { flex: 1; } .history-table { min-width: 42rem; } }
.expense-inactive { opacity: .65; }
.planning-icon-action { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 6px; color: #1e665c; display: inline-flex; justify-content: center; min-height: 2rem; min-width: 2rem; padding: .25rem; }
.planning-icon-action:hover:not(:disabled), .planning-icon-action:focus-visible { background: #e5f2ef; border-color: #bfddd7; }
.modal-form .correction-propagation { align-items: center; display: flex; gap: .55rem; }
.modal-form .correction-propagation input { width: auto; }
.modal-form .modal-toggle-row { align-items: center; background: #f7f8fa; border: 1px solid #dce1e5; border-radius: 9px; cursor: pointer; display: flex; justify-content: space-between; margin-top: .25rem; padding: .7rem .8rem; }
.modal-toggle-row span { display: grid; gap: .1rem; }
.modal-toggle-row small { color: #5e6874; font-size: .78rem; font-weight: 400; }
.modal-form .modal-toggle-row input { appearance: none; background: #aeb8c2; border: 1px solid #aeb8c2; border-radius: 999px; cursor: pointer; flex: 0 0 auto; height: 1.65rem; min-height: 0; padding: 0; position: relative; width: 3rem; }
.modal-toggle-row input::before { background: #fff; border-radius: 50%; content: ''; height: 1.15rem; left: .2rem; position: absolute; top: .2rem; transition: transform .2s ease; width: 1.15rem; }
.modal-toggle-row input:checked { background: #1e665c; border-color: #1e665c; }
.modal-toggle-row input:checked::before { transform: translateX(1.25rem); }
.modal-toggle-row input:focus-visible { outline: 3px solid rgb(50 114 104 / 30%); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .modal-toggle-row input::before { transition: none; } }
.current-position { margin-bottom: 1.25rem; }
.variable-concept-list { display: grid; gap: 1rem; margin-top: 1.2rem; }
.variable-concept-list .muted { margin: 0; }
.variable-concept-item { display: grid; gap: .4rem; }
.variable-concept-heading { display: flex; gap: .75rem; justify-content: space-between; }
.variable-concept-name { display: grid; gap: .1rem; min-width: 0; }
.variable-concept-name strong { overflow-wrap: anywhere; }
.variable-concept-name small { color: #77818b; font-size: .78rem; font-weight: 400; }
.variable-concept-heading span { color: #17634d; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.variable-concept-heading .over-limit { color: #a1262e; }
.variable-concept-track { background: #edf0f2; border-radius: 999px; height: .55rem; overflow: hidden; }
.variable-concept-track span { background: #4eaa88; display: block; height: 100%; }
.variable-concept-track span.over-limit { background: #c62d39; }
.variable-concept-item > small { color: #5e6874; font-variant-numeric: tabular-nums; }
.current-support-list { display: grid; gap: .55rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.current-support-list li { align-items: center; border-bottom: 1px solid #edf0f2; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr) auto auto; padding-bottom: .55rem; }
.current-support-list li:last-child { border-bottom: 0; }
.current-support-list small { color: #5e6874; display: block; margin-top: .15rem; }
.current-support-list li > strong { font-variant-numeric: tabular-nums; }
.support-status { background: #edf0f2; border-radius: 999px; color: #48535e; font-size: .7rem; padding: .3rem .5rem; text-transform: capitalize; }
.support-status-received { background: #d7eee3; color: #14533b; }
.support-status-missed, .support-status-cancelled { background: #fde9e9; color: #a1262e; }
.position-metrics { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; }
.position-metrics div { background: #f7f8fa; border-radius: 8px; display: grid; gap: .35rem; padding: .85rem; }
.position-metrics span { color: #5e6874; font-size: .78rem; }
.position-metrics strong { color: #173d36; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .position-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .position-metrics { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .plan-topline-current .plan-topline-main { align-items: start; flex-direction: column; } .current-support-list li { grid-template-columns: minmax(0, 1fr) auto; } .current-support-list .support-status { grid-column: 1 / -1; justify-self: start; } }
.row-actions .planning-icon-action + .planning-icon-action { margin-left: .15rem; }
@media (max-width: 900px) { .content-planning .planning-grid { grid-template-columns: 1fr; } }
.calendar-day-button { background: #fff; border: 0; border-bottom: 1px solid #edf0f2; border-radius: 0; border-right: 1px solid #edf0f2; color: #17212b; display: grid; gap: .3rem; min-height: 6rem; padding: .5rem; text-align: left; width: 100%; }
.calendar-day-button:hover, .calendar-day-button:focus-visible { background: #f1f8f5; }
.calendar-day-button[aria-pressed="true"] { background: #e5f2ef; box-shadow: inset 0 0 0 2px #83b9ae; }
.calendar-day-button small { align-self: start; background: #e5f2ef; border-radius: 999px; color: #1e4f47; font-size: .7rem; justify-self: start; padding: .2rem .45rem; }
.calendar-loading { color: #5e6874; grid-column: 1 / -1; margin: 1rem; }
.calendar-detail-filters { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.calendar-detail-filters button { font-size: .72rem; min-height: 1.9rem; padding: .25rem .5rem; }
.calendar-detail-filters [aria-pressed="true"] { background: #123b35; color: #fff; }
.calendar-day-button[data-calendar-is-today="true"] > span { align-items: center; background: #fde9e9; border-radius: 50%; color: #b32733; display: inline-flex; font-weight: 800; height: 1.6rem; justify-content: center; width: 1.6rem; }
.calendar-event-list { display: grid; gap: .7rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.calendar-event-list li { border: 1px solid #dce1e5; border-radius: 9px; display: grid; gap: .3rem; padding: .75rem; }
.calendar-event-list small { color: #5e6874; }
.calendar-event-type { color: #1e665c; font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.calendar-event-type-expected-support { color: #665288; }
.calendar-event-footer { align-items: center; display: flex; gap: .5rem; justify-content: space-between; margin-top: .25rem; }
.calendar-event-footer b { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .calendar-day-button { min-height: 4rem; } }
@media (max-width: 440px) { .calendar-day-button { min-height: 3.25rem; } .calendar-day-button small { font-size: .58rem; } }
.content-dashboard { max-width: none; }
.dashboard-heading { align-items: end; display: flex; gap: 1.5rem; justify-content: space-between; margin-bottom: 1.5rem; }
.dashboard-heading h1 { margin-bottom: .35rem; }
.dashboard-heading .eyebrow { margin-bottom: .25rem; }
.dashboard-heading .muted { margin: 0; }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dashboard-notifications { position: relative; }
.dashboard-notifications summary { align-items: center; background: #fff; border: 1px solid #123b35; border-radius: 8px; color: #123b35; cursor: pointer; display: inline-flex; gap: .45rem; font-size: .9rem; font-weight: 700; min-height: 2.75rem; padding: .55rem .75rem; white-space: nowrap; }
.dashboard-notifications summary::-webkit-details-marker { display: none; }
.dashboard-notifications summary::marker { content: ''; }
.dashboard-notifications summary:focus-visible { outline: 3px solid rgb(50 114 104 / 30%); outline-offset: 2px; }
.dashboard-alert-count { background: #a1262e; border-radius: 999px; color: #fff; font-size: .7rem; min-width: 1.25rem; padding: .1rem .3rem; text-align: center; }
.dashboard-notification-panel { background: #fff; border: 1px solid #dce1e5; border-radius: 12px; box-shadow: 0 12px 30px rgb(23 33 43 / 16%); max-height: 22rem; overflow-y: auto; padding: 1rem; position: absolute; right: 0; top: calc(100% + .5rem); width: min(22rem, calc(100vw - 2rem)); z-index: 5; }
.dashboard-notification-panel h2 { font-size: 1rem; margin: 0; }
.dashboard-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-wide { grid-column: 1 / -1; }
.dashboard-metrics { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; }
.dashboard-metrics > div { background: #f7f8fa; border-radius: 9px; display: grid; gap: .35rem; padding: 1rem; }
.dashboard-metrics span { color: #5e6874; font-size: .8rem; }
.dashboard-metrics strong { color: #173d36; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.dashboard-empty { margin: 1rem 0 0; }
.dashboard-empty a { color: #1e665c; }
.dashboard-list, .dashboard-concept-list, .dashboard-alert-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.dashboard-list { display: grid; gap: .65rem; }
.dashboard-list li { align-items: center; border-bottom: 1px solid #edf0f2; display: flex; gap: .75rem; justify-content: space-between; padding-bottom: .65rem; }
.dashboard-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.dashboard-list li span { display: grid; gap: .15rem; min-width: 0; }
.dashboard-list li strong { overflow-wrap: anywhere; }
.dashboard-list small, .dashboard-concept-list small { color: #5e6874; }
.dashboard-list b, .dashboard-concept-list b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard-concept-list { display: grid; gap: 1rem; }
.dashboard-concept-list li { display: grid; gap: .4rem; }
.dashboard-concept-heading { display: flex; gap: .75rem; justify-content: space-between; }
.dashboard-concept-heading > span { display: grid; gap: .1rem; min-width: 0; }
.dashboard-concept-heading strong { overflow-wrap: anywhere; }
.dashboard-concept-heading small { font-size: .78rem; font-weight: 400; }
.dashboard-concept-heading .over-limit { color: #a1262e; }
.dashboard-concept-heading b { color: #17634d; }
.dashboard-alert-list { display: grid; gap: .6rem; }
.dashboard-alert-list li { align-items: start; display: flex; gap: .55rem; }
.dashboard-alert-dot { background: #bb7338; border-radius: 50%; flex: 0 0 auto; height: .5rem; margin-top: .45rem; width: .5rem; }
@media (max-width: 960px) { .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dashboard-heading { align-items: start; flex-direction: column; } .dashboard-grid { grid-template-columns: 1fr; } .dashboard-wide { grid-column: auto; } }
@media (max-width: 440px) { .dashboard-metrics { grid-template-columns: 1fr; } .dashboard-actions { width: 100%; } }