/*
    Compact "app" styling for the back office: the account area (/my, /Account/Manage) and the
    admin pages (/admin, /posts, /categories). PublicLayout puts .app-ui on <main> for those URLs.

    Why: NewsTemplate's style.css restyles Bootstrap for the public news pages and its rules apply
    site-wide: every .btn gets 12px×30px padding and a red hover, .form-control a 50px minimum
    height and square corners, every checkbox (switches included) square corners and switches a
    15px side margin. That made the back office's buttons and inputs oversized and its switches
    look like red slabs. This file puts Bootstrap's proportions back inside .app-ui only, so the
    public pages keep the NewsTemplate look. Loaded after style.css; some of its rules use
    !important, so a few overrides here must too.

    Bootstrap here is 5.0.2 (no --bs-btn-* variables), so button hover colours are restated per
    variant. Colours come from the theme tokens in themes.css (light and dark).
*/

/* ── Headings: the serif display sizes are for articles, not admin screens ── */
.app-ui h1 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.85rem); line-height: 1.25; }
.app-ui h2 { font-size: 1.3rem; }
.app-ui h3 { font-size: 1.12rem; }
.app-ui .card h2, .app-ui .card h3, .app-ui .card .card-title { font-size: 1.12rem; }

/* ── Buttons ─────────────────────────────────────────────────── */
.app-ui .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .4rem .85rem;
    border-radius: .5rem;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.4;
    overflow: visible;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.app-ui .btn i { line-height: 1; }
.app-ui .btn span, .app-ui .btn small { font-size: inherit; text-transform: none; z-index: auto; }
.app-ui .btn:hover span, .app-ui .btn:hover small { color: inherit; }

.app-ui .btn-sm, .app-ui .btn-group-sm > .btn { padding: .22rem .55rem; border-radius: .4rem; font-size: .8rem; }
.app-ui .btn-lg, .app-ui .btn-group-lg > .btn { padding: .55rem 1.1rem; border-radius: .6rem; font-size: 1rem; }

.app-ui .btn:focus { box-shadow: 0 0 0 .2rem rgba(var(--theme-primary-rgb, 37, 99, 235), .25); }

/* Hover colours per variant (style.css paints every .btn:hover in the brand red). */
.app-ui .btn-primary { background-color: var(--theme-primary); border-color: var(--theme-primary); color: #fff; }
.app-ui .btn-primary:hover, .app-ui .btn-primary:focus { background: var(--theme-primary-hover, #1d4ed8); border-color: var(--theme-primary-hover, #1d4ed8) !important; color: #fff; }
.app-ui .btn-secondary:hover { background: #5c636a; border-color: #565e64 !important; color: #fff; }
.app-ui .btn-success:hover { background: #157347; border-color: #146c43 !important; color: #fff; }
.app-ui .btn-danger:hover { background: #bb2d3b; border-color: #b02a37 !important; color: #fff; }
.app-ui .btn-warning:hover { background: #ffca2c; border-color: #ffc720 !important; color: #000; }
.app-ui .btn-info:hover { background: #31d2f2; border-color: #25cff2 !important; color: #000; }
.app-ui .btn-light:hover { background: #d3d4d5; border-color: #c6c7c8 !important; color: #000; }
.app-ui .btn-dark:hover { background: #424649; border-color: #373b3e !important; color: #fff; }

.app-ui .btn-outline-primary { color: var(--theme-primary); border-color: var(--theme-primary); }
.app-ui .btn-outline-primary:hover { background: var(--theme-primary); border-color: var(--theme-primary) !important; color: #fff; }
.app-ui .btn-outline-secondary:hover { background: #6c757d; border-color: #6c757d !important; color: #fff; }
.app-ui .btn-outline-success:hover { background: #198754; border-color: #198754 !important; color: #fff; }
.app-ui .btn-outline-danger:hover { background: #dc3545; border-color: #dc3545 !important; color: #fff; }
.app-ui .btn-outline-warning:hover { background: #ffc107; border-color: #ffc107 !important; color: #000; }
.app-ui .btn-outline-info:hover { background: #0dcaf0; border-color: #0dcaf0 !important; color: #000; }
.app-ui .btn-outline-dark:hover { background: #212529; border-color: #212529 !important; color: #fff; }
.app-ui .btn-outline-light:hover { background: #f8f9fa; border-color: #f8f9fa !important; color: #000; }
.app-ui .btn-link { padding-left: .35rem; padding-right: .35rem; }
.app-ui .btn-link:hover { background: transparent; text-decoration: underline; }

/* Buttons inside tables and list rows: row actions, not calls to action. */
.app-ui .table .btn,
.app-ui .list-group .btn {
    padding: .2rem .5rem;
    border-radius: .4rem;
    font-size: .8rem;
}

/* ── Inputs ──────────────────────────────────────────────────── */
.app-ui .form-control,
.app-ui .form-select {
    min-height: 0;
    padding: .42rem .75rem;
    border-radius: .5rem;
    font-size: .92rem;
}

.app-ui .form-select { padding-right: 2.25rem; }
.app-ui textarea.form-control { min-height: 5.5rem; }
.app-ui .form-control-sm, .app-ui .form-select-sm { padding: .25rem .55rem; font-size: .82rem; border-radius: .4rem; }
.app-ui .form-control-lg, .app-ui .form-select-lg { padding: .55rem .9rem; font-size: 1rem; }

.app-ui .form-control:focus,
.app-ui .form-select:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--theme-primary-rgb, 37, 99, 235), .15);
}

.app-ui .input-group-text {
    padding: .42rem .7rem;
    border-radius: .5rem;
    font-size: .92rem;
}

.app-ui .form-label { margin-bottom: .3rem; font-size: .88rem; font-weight: 500; }
.app-ui .form-text { font-size: .8rem; }

/* ── Checkboxes and switches ─────────────────────────────────── */
.app-ui .form-check-input:checked {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.app-ui .form-check-input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--theme-primary-rgb, 37, 99, 235), .2);
}

.app-ui .form-check-input[type=checkbox] { border-radius: .3em !important; }

/* A proper pill switch: round, sized to the text, in line with its label. */
.app-ui .form-switch { padding-left: 2.75em; min-height: 1.5rem; }

.app-ui .form-switch .form-check-input,
.app-ui .form-switch .form-check-input[type=checkbox] {
    width: 2.25em !important;
    height: 1.25em;
    margin: .1em 0 0 -2.75em !important;
    border-radius: 2em !important;
    cursor: pointer;
}

.app-ui .form-switch .form-check-input:not(:checked) {
    background-color: var(--theme-border, #e2e8f0);
    border-color: var(--theme-border, #d1d5db);
}

.app-ui .form-check-label { cursor: pointer; }

/* ── Cards, tables, alerts ───────────────────────────────────── */
.app-ui .card {
    border-color: var(--theme-border, #e2e8f0);
    border-radius: .85rem;
}

.app-ui .card-body { padding: 1.1rem 1.25rem; }
.app-ui .card-header, .app-ui .card-footer { padding: .7rem 1.25rem; }

.app-ui .table { font-size: .9rem; }
.app-ui .table > :not(caption) > * > * { padding: .55rem .7rem; vertical-align: middle; }

.app-ui .table thead th {
    color: var(--theme-text-muted, #64748b);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-ui .alert { padding: .7rem 1rem; border-radius: .6rem; font-size: .9rem; }
.app-ui .badge { font-weight: 600; }

/* Button groups: square the inner corners where the buttons join. The rounded corners above would
   otherwise win over Bootstrap's group rules (same specificity, loaded later), leaving each button's
   rounded edge lapping over its neighbour's. */
.app-ui .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.app-ui .btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.app-ui .btn-group > .btn:not(:first-child),
.app-ui .btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}