/* Opt in with .ott-ui. Existing finance pages are the first consumers; isolated
   module styles retain their layout until OP#234–237 migrate those screens. */
:where(.ott-ui, .finance-page, .ott-dialog) {
    font-family: var(--ott-font);
    font-size: var(--ott-text);
    line-height: 1.5;
    color-scheme: light;
    --bs-body-color: var(--ott-ink);
    --bs-body-bg: var(--ott-surface);
    --bs-secondary-color: var(--ott-muted);
    --bs-border-color: var(--ott-line);
    --bs-link-color: var(--ott-accent);
    --bs-link-hover-color: var(--ott-accent-hover);
    --bs-danger-rgb: 167, 43, 62;
}

:where(.ott-ui, .finance-page, .ott-dialog) a { color: var(--ott-accent); }
.ott-ui { color: var(--ott-ink); background-color: var(--ott-background); }
:where(.ott-ui, .finance-page, .ott-dialog) [aria-busy="true"] { cursor: progress; }
:where(.ott-ui, .finance-page, .ott-dialog) a:hover { color: var(--ott-accent-hover); }
:where(.ott-ui, .finance-page, .ott-dialog) .btn {
    min-height: var(--ott-target);
    padding: .625rem .875rem;
    border-radius: var(--ott-radius-button);
    font-size: var(--ott-text);
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    /* Cross-fading text and background can lose contrast between valid states. */
    transition-property: box-shadow;
    transition-duration: var(--ott-motion-duration);
    transition-timing-function: var(--ott-motion-easing);
}

:where(.ott-ui, .finance-page, .ott-dialog) .ott-icon-button {
    min-width: var(--ott-target);
    flex-shrink: 0;
}

:where(.ott-ui, .finance-page, .ott-dialog) .btn-primary {
    --bs-btn-color: var(--ott-on-accent);
    --bs-btn-bg: var(--ott-accent);
    --bs-btn-border-color: var(--ott-accent);
    --bs-btn-hover-color: var(--ott-on-accent);
    --bs-btn-hover-bg: var(--ott-accent-hover);
    --bs-btn-hover-border-color: var(--ott-accent-hover);
    --bs-btn-active-color: var(--ott-on-accent);
    --bs-btn-active-bg: var(--ott-accent-hover);
    --bs-btn-active-border-color: var(--ott-accent-hover);
    --bs-btn-disabled-color: var(--ott-muted);
    --bs-btn-disabled-bg: var(--ott-disabled-surface);
    --bs-btn-disabled-border-color: var(--ott-control-border);
    color: var(--bs-btn-color);
    background: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

:where(.ott-ui, .finance-page, .ott-dialog) :is(.btn-outline-primary, .btn-outline-secondary) {
    --bs-btn-color: var(--ott-ink);
    --bs-btn-border-color: var(--ott-control-border);
    --bs-btn-hover-color: var(--ott-ink);
    --bs-btn-hover-bg: var(--ott-background);
    --bs-btn-hover-border-color: var(--ott-control-border);
    --bs-btn-active-color: var(--ott-ink);
    --bs-btn-active-bg: var(--ott-line);
    --bs-btn-active-border-color: var(--ott-control-border);
    --bs-btn-disabled-color: var(--ott-muted);
    --bs-btn-disabled-border-color: var(--ott-control-border);
    background-color: var(--ott-surface);
}

:where(.ott-ui, .finance-page, .ott-dialog) .btn-success {
    --bs-btn-color: var(--ott-on-accent);
    --bs-btn-bg: var(--ott-positive);
    --bs-btn-border-color: var(--ott-positive);
    --bs-btn-hover-color: var(--ott-on-accent);
    --bs-btn-hover-bg: var(--ott-positive);
    --bs-btn-hover-border-color: var(--ott-positive);
    --bs-btn-active-bg: var(--ott-positive);
    --bs-btn-active-border-color: var(--ott-positive);
}

:where(.ott-ui, .finance-page, .ott-dialog) .btn-danger {
    --bs-btn-color: var(--ott-on-accent);
    --bs-btn-bg: var(--ott-negative);
    --bs-btn-border-color: var(--ott-negative);
    --bs-btn-hover-color: var(--ott-on-accent);
    --bs-btn-hover-bg: var(--ott-negative);
    --bs-btn-hover-border-color: var(--ott-negative);
    --bs-btn-active-bg: var(--ott-negative);
    --bs-btn-active-border-color: var(--ott-negative);
}
:where(.ott-ui, .finance-page, .ott-dialog) .btn-outline-danger {
    --bs-btn-color: var(--ott-negative);
    --bs-btn-border-color: var(--ott-negative);
    --bs-btn-hover-color: var(--ott-on-accent);
    --bs-btn-hover-bg: var(--ott-negative);
    --bs-btn-hover-border-color: var(--ott-negative);
    --bs-btn-active-color: var(--ott-on-accent);
    --bs-btn-active-bg: var(--ott-negative);
    --bs-btn-active-border-color: var(--ott-negative);
}

:where(.ott-ui, .finance-page, .ott-dialog) .btn-link { color: var(--ott-accent); }
:where(.ott-ui, .finance-page, .ott-dialog) :is(.btn, .form-control, .form-select):disabled {
    color: var(--ott-muted);
    background-color: var(--ott-disabled-surface);
    border-color: var(--ott-control-border);
    opacity: 1;
    cursor: not-allowed;
}

:where(.ott-ui, .finance-page, .ott-dialog) :is(.form-control, .form-select) {
    min-width: 0;
    max-width: 100%;
    min-height: var(--ott-target);
    border: 1px solid var(--ott-control-border);
    border-radius: var(--ott-radius-control);
    color: var(--ott-ink);
    background-color: var(--ott-surface);
    font-size: var(--ott-text);
    font-weight: 400;
    transition-duration: var(--ott-motion-duration);
}
:where(.ott-ui, .finance-page, .ott-dialog) :is(.form-control, .form-select):focus {
    color: var(--ott-ink);
    border-color: var(--ott-focus);
    background-color: var(--ott-surface);
    outline: 3px solid var(--ott-focus);
    outline-offset: 3px;
    box-shadow: none;
}
:where(.ott-ui, .finance-page, .ott-dialog) .form-control[readonly] { background-color: var(--ott-background); }
:where(.ott-ui, .finance-page, .ott-dialog) :is(input, textarea)::placeholder { color: var(--ott-muted); opacity: 1; }
:where(.ott-ui, .finance-page, .ott-dialog) :is(input, select, textarea).invalid,
:where(.ott-ui, .finance-page, .ott-dialog) [aria-invalid="true"] { border-color: var(--ott-negative); }
:where(.ott-ui, .finance-page, .ott-dialog) :is(.validation-message, .validation-errors) { color: var(--ott-negative); }
:where(.ott-ui, .finance-page, .ott-dialog) input[type="checkbox"] { accent-color: var(--ott-accent); }
:where(.ott-ui, .finance-page, .ott-dialog) .form-check-input:checked { background-color: var(--ott-accent); border-color: var(--ott-accent); }
:where(.ott-ui, .finance-page, .ott-dialog) :is(a, button, summary, input[type="checkbox"]):focus-visible {
    outline: 3px solid var(--ott-focus);
    outline-offset: 3px;
    box-shadow: none;
}

:where(.ott-ui, .finance-page, .ott-dialog) .card {
    color: var(--ott-ink);
    background-color: var(--ott-surface);
    border-color: var(--ott-line);
    border-radius: var(--ott-radius-surface);
    box-shadow: var(--ott-shadow);
}
:where(.ott-ui, .finance-page, .ott-dialog) .alert { border-radius: var(--ott-radius-control); overflow-wrap: anywhere; }
:where(.ott-ui, .finance-page, .ott-dialog) .alert-success { --bs-alert-color: var(--ott-positive); --bs-alert-bg: var(--ott-positive-surface); --bs-alert-border-color: var(--ott-positive); }
:where(.ott-ui, .finance-page, .ott-dialog) .alert-danger { --bs-alert-color: var(--ott-negative); --bs-alert-bg: var(--ott-negative-surface); --bs-alert-border-color: var(--ott-negative); }
:where(.ott-ui, .finance-page, .ott-dialog) .alert-warning { --bs-alert-color: var(--ott-warning); --bs-alert-bg: var(--ott-warning-surface); --bs-alert-border-color: var(--ott-warning); }
:where(.ott-ui, .finance-page, .ott-dialog) .alert-info { --bs-alert-color: var(--ott-info); --bs-alert-bg: var(--ott-info-surface); --bs-alert-border-color: var(--ott-info); }

:where(.ott-ui, .finance-page, .ott-dialog) .table {
    --bs-table-color: var(--ott-ink);
    --bs-table-bg: var(--ott-surface);
    --bs-table-border-color: var(--ott-line);
    font-size: var(--ott-text-small);
    vertical-align: middle;
}
:where(.ott-ui, .finance-page, .ott-dialog) .table-responsive { max-width: 100%; overflow-x: auto; }
:where(.ott-ui, .finance-page, .ott-dialog) .table th { color: var(--ott-muted); background-color: var(--ott-background); }
:where(.ott-ui, .finance-page, .ott-dialog) .page-link {
    color: var(--ott-ink);
    background-color: var(--ott-surface);
    border-color: var(--ott-control-border);
    min-width: var(--ott-target);
    min-height: var(--ott-target);
}
:where(.ott-ui, .finance-page, .ott-dialog) .active > .page-link { color: var(--ott-on-accent); background-color: var(--ott-accent); }
:where(.ott-ui, .finance-page, .ott-dialog) .disabled > .page-link { color: var(--ott-muted); background-color: var(--ott-disabled-surface); }

.ott-status { display: inline-flex; align-items: center; gap: var(--ott-space-1); padding: .25rem .5rem; border-radius: .375rem; font-size: var(--ott-text-label); font-weight: 500; color: var(--ott-muted); background: var(--ott-background); }
.ott-status[data-tone="positive"] { color: var(--ott-positive); background: var(--ott-positive-surface); }
.ott-status[data-tone="warning"] { color: var(--ott-warning); background: var(--ott-warning-surface); }
.ott-status[data-tone="negative"] { color: var(--ott-negative); background: var(--ott-negative-surface); }
.ott-status[data-tone="info"] { color: var(--ott-info); background: var(--ott-info-surface); }
.ott-status[data-tone="future"] { color: var(--ott-future); background: var(--ott-future-surface); }
.ott-status[data-tone="due"] { color: var(--ott-due); background: var(--ott-due-surface); }

/* Native top layer preserves modal semantics; each component owns its width. */
.ott-dialog {
    max-width: calc(100% - 2rem);
    max-height: calc(100dvh - 2rem);
    padding: var(--ott-space-7);
    border: 1px solid var(--ott-line);
    border-radius: var(--ott-radius-dialog);
    color: var(--ott-ink);
    background: var(--ott-surface);
    overflow-y: auto;
    overflow-wrap: anywhere;
    box-shadow: var(--ott-dialog-shadow);
}
.ott-dialog::backdrop { background: var(--ott-backdrop); }

@media (max-width: 760px) {
    :where(.ott-ui, .finance-page, .ott-dialog) :is(.form-control, .form-select) { font-size: 1rem; }
    .ott-dialog { max-width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); padding: var(--ott-space-4); }
}

@media (pointer: coarse) {
    :where(.ott-ui, .finance-page, .ott-dialog) .btn-link { min-height: var(--ott-target); }
}

.ott-ui .ott-message-panel { max-width: 44rem; padding: 2rem; border: 1px solid var(--ott-line); border-radius: var(--ott-radius-surface); background: var(--ott-surface); overflow-wrap: anywhere; }
.ott-ui .ott-message-panel h1 { font-size: var(--ott-text-title); font-weight: 600; }
.ott-ui .ott-message-panel p { color: var(--ott-muted); }
.ott-ui .ott-message-panel .ott-eyebrow { color: var(--ott-accent); font-size: var(--ott-text-small); font-weight: 600; }
@media (max-width: 760px) { .ott-ui .ott-message-panel { padding: 1.25rem; } }

/* Dues details must remain readable outside the locally scrolling matrix. */
.dues-detail-tooltip { position: fixed; z-index: 1100; max-width: min(22rem, calc(100vw - 16px)); padding: .625rem .75rem; border: 1px solid var(--ott-control-border); border-radius: var(--ott-radius-control); color: var(--ott-ink); background: var(--ott-surface); box-shadow: var(--ott-shadow-card); font-size: var(--ott-text-small); font-weight: 400; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
@media (hover: none) { .dues-detail-tooltip { display: none; } }