/* Opt-in primitives. Page CSS owns layout; these classes own the shared appearance.
   No substring selectors: scoreboard, monitor and broadcast controls are excluded. */
.tt-app { color: var(--tt-text); font-family: var(--tt-font); }
body.tt-app { background: var(--tt-background); }
.tt-app .tt-page { margin-top: var(--tt-page-gap); }
.tt-app .tt-card {
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-card);
    background: var(--tt-surface);
    box-shadow: var(--tt-shadow);
}
.tt-app .tt-section-header {
    padding: var(--tt-card-padding);
    color: var(--tt-on-dark);
    background: var(--tt-header);
    box-shadow: none;
}
.tt-app .tt-section-header.tt-section-header-danger { background: var(--tt-danger); }
.tt-app .tt-section-body { padding: var(--tt-card-padding); }
.tt-app .tt-button {
    border-radius: var(--tt-radius-control);
    font-weight: 700;
    text-shadow: none;
    box-shadow: none;
    background-image: none;
    transition: background-color .18s, border-color .18s;
}
.tt-app .btn { border-radius: var(--tt-radius-control); text-shadow: none; box-shadow: none; background-image: none; }
.tt-app .btn-primary, .tt-app .btn-success, .tt-app .tt-button-primary {
    color: var(--tt-on-dark); border-color: var(--tt-brand); background: var(--tt-brand);
}
.tt-app .btn-primary:hover, .tt-app .btn-primary:focus,
.tt-app .btn-success:hover, .tt-app .btn-success:focus,
.tt-app .tt-button-primary:hover, .tt-app .tt-button-primary:focus {
    color: var(--tt-on-dark); border-color: var(--tt-brand-hover); background: var(--tt-brand-hover);
}
.tt-app .btn-default, .tt-app .tt-button-secondary { color: var(--tt-text-secondary); border-color: var(--tt-input-border); background: var(--tt-surface); }
.tt-app .btn-default:hover, .tt-app .tt-button-secondary:hover { color: var(--tt-brand); border-color: var(--tt-brand); background: var(--tt-brand-soft); }
.tt-app .btn-danger, .tt-app .tt-button-danger { color: var(--tt-on-dark); border-color: var(--tt-danger); background: var(--tt-danger); }
.tt-app .btn-danger:hover, .tt-app .tt-button-danger:hover { border-color: var(--tt-danger-hover); background: var(--tt-danger-hover); }
.tt-app .btn-warning { color: var(--tt-warning); border-color: var(--tt-warning-border); background: var(--tt-warning-soft); }
.tt-app .btn-info { color: var(--tt-info); border-color: var(--tt-info-border); background: var(--tt-info-soft); }
.tt-app .btn-warning:hover, .tt-app .btn-warning:focus { color: var(--tt-warning); border-color: var(--tt-warning); }
.tt-app .btn-info:hover, .tt-app .btn-info:focus { color: var(--tt-info); border-color: var(--tt-info); }
.tt-app .btn[disabled], .tt-app .btn.disabled { opacity: .55; box-shadow: none; cursor: not-allowed; }
.tt-app .form-control { color: var(--tt-text); border-color: var(--tt-input-border); border-radius: var(--tt-radius-control); background-color: var(--tt-surface); box-shadow: none; }
.tt-app .form-control:focus { border-color: var(--tt-brand); box-shadow: var(--tt-focus-ring); }
.tt-app .form-control[disabled], .tt-app .form-control[readonly], .tt-app fieldset[disabled] .form-control { background: var(--tt-surface-soft); }
.tt-app .has-error .form-control, .tt-app .input-validation-error { border-color: var(--tt-danger); }
.tt-app .field-validation-error, .tt-app .validation-summary-errors { color: var(--tt-danger); }
.tt-app a:focus-visible, .tt-app button:focus-visible, .tt-app input:focus-visible, .tt-app select:focus-visible {
    outline: 3px solid var(--tt-brand); outline-offset: 3px;
}
.tt-app .tt-table { color: var(--tt-text); }
.tt-app .tt-table > thead > tr > th { padding: 12px; color: var(--tt-text-secondary); background: var(--tt-surface-soft); border-color: var(--tt-border); font-weight: 700; }
.tt-app .tt-table > tbody > tr > td { border-color: var(--tt-border); }
.tt-app .tt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tt-app .pagination > li > a, .tt-app .pagination > li > span { color: var(--tt-brand); border-color: var(--tt-border); }
.tt-app .pagination > .active > a, .tt-app .pagination > .active > span { color: var(--tt-on-dark); background: var(--tt-brand); border-color: var(--tt-brand); }
.tt-app .pagination > .disabled > a, .tt-app .pagination > .disabled > span { color: var(--tt-muted); background: var(--tt-surface-soft); }
.tt-app .modal-content { border: 1px solid var(--tt-border); border-radius: var(--tt-radius-card); box-shadow: var(--tt-shadow); }
.tt-app .modal-header, .tt-app .modal-footer { border-color: var(--tt-border); }
.tt-app .alert-success { color: var(--tt-success); background: var(--tt-success-soft); border-color: var(--tt-success-border); }
.tt-app .alert-warning { color: var(--tt-warning); background: var(--tt-warning-soft); border-color: var(--tt-warning-border); }
.tt-app .alert-danger { color: var(--tt-danger); background: var(--tt-danger-soft); border-color: var(--tt-danger-border); }
.tt-app .alert-info { color: var(--tt-info); background: var(--tt-info-soft); border-color: var(--tt-info-border); }
.tt-app .text-primary, .tt-app .text-success { color: var(--tt-brand); }
.tt-app .text-danger { color: var(--tt-danger); }
.tt-app .text-warning { color: var(--tt-warning); }
.tt-app .text-info { color: var(--tt-info); }
@media (prefers-reduced-motion: reduce) { .tt-app a, .tt-app button, .tt-app .btn { transition: none; } }