/*
 * Trykkfort look for the admin and account pages, on top of Bootstrap 5.3.
 * Scoped to .tf-admin and .tf-account so the big screen keeps its own themes (css/themes.css).
 * Colours come from the answer colours: red ▲, blue ◆, yellow ●, green ■.
 */

.tf-admin,
.tf-account {
    --tf-ink: #0B0B1A;
    --tf-ink-2: #1D1D3A;
    --tf-text: #1C1E2E;
    --tf-muted: #61647C;
    --tf-bg: #F4F5FA;
    --tf-surface: #FFFFFF;
    --tf-surface-2: #EEF0F7;
    --tf-line: rgba(20, 20, 43, .09);
    --tf-line-strong: rgba(20, 20, 43, .16);
    --tf-red: #D7263D;
    --tf-blue: #1B6EC2;
    --tf-yellow: #FFC93C;
    --tf-green: #2E8B3E;
    --tf-shadow: 0 1px 2px rgba(16, 16, 40, .05), 0 10px 30px -14px rgba(16, 16, 40, .18);
    --tf-shadow-lift: 0 2px 4px rgba(16, 16, 40, .06), 0 22px 44px -16px rgba(16, 16, 40, .28);
    --tf-focus: 0 0 0 .25rem rgba(27, 110, 194, .22);

    --bs-body-color: var(--tf-text);
    --bs-body-bg: var(--tf-bg);
    --bs-emphasis-color: var(--tf-ink);
    --bs-secondary-color: var(--tf-muted);
    --bs-border-color: var(--tf-line-strong);
    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-link-color-rgb: 27, 110, 194;
    --bs-link-hover-color-rgb: 19, 82, 146;
    --bs-primary-rgb: 11, 11, 26;
    --bs-success-rgb: 46, 139, 62;
    --bs-danger-rgb: 215, 38, 61;
    --bs-warning-rgb: 255, 201, 60;
    --bs-info-rgb: 186, 216, 246;
    --bs-secondary-rgb: 97, 100, 124;
    --bs-light-rgb: 238, 240, 247;
    --bs-focus-ring-color: rgba(27, 110, 194, .25);

    color: var(--tf-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.tf-admin {
    background:
        radial-gradient(60rem 22rem at 0% 0%, rgba(215, 38, 61, .07), transparent 70%),
        radial-gradient(60rem 24rem at 100% 0%, rgba(27, 110, 194, .08), transparent 70%),
        var(--tf-bg);
}

/* ---- Typography ---- */

.tf-admin h1,
.tf-admin .h1,
.tf-account-card h1,
.tf-account-card .h3 {
    font-weight: 850;
    letter-spacing: -.025em;
    color: var(--tf-ink);
}

.tf-admin h1,
.tf-admin .h1 {
    font-size: clamp(1.75rem, 3vw, 2.4rem);
}

.tf-admin h2,
.tf-admin .h4,
.tf-admin .h5 {
    font-weight: 750;
    letter-spacing: -.01em;
    color: var(--tf-ink);
}

.tf-page-lead {
    margin: .35rem 0 0;
    color: var(--tf-muted);
    font-size: 1.05rem;
}

/* ---- Buttons: pill shaped, brand colours ---- */

.tf-admin .btn,
.tf-account .btn {
    --bs-btn-font-weight: 650;
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-padding-y: .55rem;
    --bs-btn-border-radius: 999px;
    --bs-btn-focus-box-shadow: var(--tf-focus);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tf-admin .btn-sm {
    --bs-btn-padding-x: .85rem;
    --bs-btn-padding-y: .32rem;
    --bs-btn-font-size: .85rem;
    --bs-btn-border-radius: 999px;
}

.tf-admin .btn-lg,
.tf-account .btn-lg {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .75rem;
    --bs-btn-border-radius: 999px;
}

.tf-admin .btn:not(:disabled):not(.btn-link):hover {
    transform: translateY(-1px);
}

.tf-admin .btn-primary,
.tf-account .btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--tf-ink);
    --bs-btn-border-color: var(--tf-ink);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--tf-ink-2);
    --bs-btn-hover-border-color: var(--tf-ink-2);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #000000;
    --bs-btn-active-border-color: #000000;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--tf-ink);
    --bs-btn-disabled-border-color: var(--tf-ink);
    box-shadow: 0 8px 20px -10px rgba(11, 11, 26, .6);
}

/* The main call to action, like "Ny quiz": yellow as on the landing page. */
.tf-admin .btn-brand {
    --bs-btn-color: #1C1E21;
    --bs-btn-bg: var(--tf-yellow);
    --bs-btn-border-color: var(--tf-yellow);
    --bs-btn-hover-color: #1C1E21;
    --bs-btn-hover-bg: #FFD45F;
    --bs-btn-hover-border-color: #FFD45F;
    --bs-btn-active-color: #1C1E21;
    --bs-btn-active-bg: #F2B91F;
    --bs-btn-active-border-color: #F2B91F;
    --bs-btn-disabled-color: #1C1E21;
    --bs-btn-disabled-bg: var(--tf-yellow);
    --bs-btn-disabled-border-color: var(--tf-yellow);
    --bs-btn-font-weight: 800;
    box-shadow: 0 10px 24px -10px rgba(224, 161, 0, .7);
}

/* "Lag quiz med AI": the answer colours as a gradient. */
.tf-admin .btn-ai {
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-font-weight: 800;
    background-image: linear-gradient(120deg, var(--tf-red), #8B3FD1 45%, var(--tf-blue));
    box-shadow: 0 10px 24px -10px rgba(139, 63, 209, .7);
}

    .tf-admin .btn-ai:hover {
        filter: brightness(1.08);
    }

.tf-admin .btn-success {
    --bs-btn-bg: var(--tf-green);
    --bs-btn-border-color: var(--tf-green);
    --bs-btn-hover-bg: #26763A;
    --bs-btn-hover-border-color: #26763A;
    --bs-btn-active-bg: #1F6430;
    --bs-btn-active-border-color: #1F6430;
    --bs-btn-disabled-bg: var(--tf-green);
    --bs-btn-disabled-border-color: var(--tf-green);
    box-shadow: 0 8px 20px -10px rgba(46, 139, 62, .7);
}

.tf-admin .btn-danger {
    --bs-btn-bg: var(--tf-red);
    --bs-btn-border-color: var(--tf-red);
    --bs-btn-hover-bg: #BC1F33;
    --bs-btn-hover-border-color: #BC1F33;
    --bs-btn-active-bg: #A01B2C;
    --bs-btn-active-border-color: #A01B2C;
    --bs-btn-disabled-bg: var(--tf-red);
    --bs-btn-disabled-border-color: var(--tf-red);
}

.tf-admin .btn-warning {
    --bs-btn-color: #1C1E21;
    --bs-btn-bg: var(--tf-yellow);
    --bs-btn-border-color: var(--tf-yellow);
    --bs-btn-hover-color: #1C1E21;
    --bs-btn-hover-bg: #FFD45F;
    --bs-btn-hover-border-color: #FFD45F;
}

.tf-admin .btn-secondary,
.tf-admin .btn-light {
    --bs-btn-color: var(--tf-text);
    --bs-btn-bg: var(--tf-surface-2);
    --bs-btn-border-color: var(--tf-surface-2);
    --bs-btn-hover-color: var(--tf-ink);
    --bs-btn-hover-bg: #E2E5F0;
    --bs-btn-hover-border-color: #E2E5F0;
    --bs-btn-active-color: var(--tf-ink);
    --bs-btn-active-bg: #D8DCEA;
    --bs-btn-active-border-color: #D8DCEA;
    --bs-btn-disabled-color: var(--tf-muted);
    --bs-btn-disabled-bg: var(--tf-surface-2);
    --bs-btn-disabled-border-color: var(--tf-surface-2);
}

.tf-admin [class*="btn-outline-"] {
    --bs-btn-bg: var(--tf-surface);
    --bs-btn-border-color: var(--tf-line-strong);
    --bs-btn-disabled-bg: var(--tf-surface);
    --bs-btn-disabled-border-color: var(--tf-line);
}

.tf-admin .btn-outline-primary {
    --bs-btn-color: var(--tf-ink);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--tf-ink);
    --bs-btn-hover-border-color: var(--tf-ink);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--tf-ink);
    --bs-btn-active-border-color: var(--tf-ink);
    --bs-btn-disabled-color: var(--tf-muted);
}

.tf-admin .btn-outline-secondary {
    --bs-btn-color: var(--tf-text);
    --bs-btn-hover-color: var(--tf-ink);
    --bs-btn-hover-bg: var(--tf-surface-2);
    --bs-btn-hover-border-color: var(--tf-line-strong);
    --bs-btn-active-color: var(--tf-ink);
    --bs-btn-active-bg: #E2E5F0;
    --bs-btn-active-border-color: var(--tf-line-strong);
    --bs-btn-disabled-color: var(--tf-muted);
}

.tf-admin .btn-outline-success {
    --bs-btn-color: var(--tf-green);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--tf-green);
    --bs-btn-hover-border-color: var(--tf-green);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #26763A;
    --bs-btn-active-border-color: #26763A;
    --bs-btn-disabled-color: var(--tf-green);
}

.tf-admin .btn-outline-danger {
    --bs-btn-color: var(--tf-red);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--tf-red);
    --bs-btn-hover-border-color: var(--tf-red);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #BC1F33;
    --bs-btn-active-border-color: #BC1F33;
    --bs-btn-disabled-color: var(--tf-red);
}

.tf-admin .btn-outline-warning {
    --bs-btn-color: #8A5A00;
    --bs-btn-hover-color: #1C1E21;
    --bs-btn-hover-bg: var(--tf-yellow);
    --bs-btn-hover-border-color: var(--tf-yellow);
    --bs-btn-active-color: #1C1E21;
    --bs-btn-active-bg: #F2B91F;
    --bs-btn-active-border-color: #F2B91F;
    --bs-btn-disabled-color: #8A5A00;
}

/* ---- Cards, list groups, modals ---- */

.tf-admin .card {
    --bs-card-border-color: var(--tf-line);
    --bs-card-border-radius: 1.25rem;
    --bs-card-inner-border-radius: 1.25rem;
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.1rem;
    overflow: hidden;
    box-shadow: var(--tf-shadow);
}

.tf-admin .card-footer {
    border-top-color: var(--tf-line);
}

.tf-admin .list-group {
    --bs-list-group-border-color: var(--tf-line);
    --bs-list-group-border-radius: 1rem;
    --bs-list-group-item-padding-x: 1.1rem;
    --bs-list-group-item-padding-y: .8rem;
    --bs-list-group-active-bg: var(--tf-ink);
    --bs-list-group-active-border-color: var(--tf-ink);
    box-shadow: var(--tf-shadow);
}

.tf-admin .modal {
    --bs-modal-border-radius: 1.25rem;
    --bs-modal-inner-border-radius: 1.25rem;
    --bs-modal-border-color: transparent;
    --bs-modal-header-border-color: var(--tf-line);
    --bs-modal-footer-border-color: var(--tf-line);
    --bs-modal-box-shadow: 0 30px 80px -20px rgba(11, 11, 26, .45);
}

.tf-admin .modal-content {
    box-shadow: var(--bs-modal-box-shadow);
}

.tf-admin .modal-backdrop {
    --bs-backdrop-bg: #0B0B1A;
    --bs-backdrop-opacity: .55;
    backdrop-filter: blur(3px);
}

/* A white panel for forms and lists on the settings pages. */
.tf-panel {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--tf-line);
    border-radius: 1.25rem;
    background: var(--tf-surface);
    box-shadow: var(--tf-shadow);
}

/* ---- Forms ---- */

.tf-admin .form-control,
.tf-admin .form-select,
.tf-account .form-control {
    padding: .6rem .9rem;
    border-color: var(--tf-line-strong);
    border-radius: .75rem;
    background-color: var(--tf-surface);
}

.tf-admin .form-control-lg {
    padding: .75rem 1rem;
    border-radius: 1rem;
    font-weight: 700;
}

.tf-admin .form-select {
    padding-right: 2.25rem;
}

.tf-admin .form-control:focus,
.tf-admin .form-select:focus,
.tf-admin .form-check-input:focus,
.tf-account .form-control:focus,
.tf-account .form-check-input:focus {
    border-color: var(--tf-blue);
    box-shadow: var(--tf-focus);
}

.tf-admin .form-check-input:checked,
.tf-account .form-check-input:checked {
    border-color: var(--tf-ink);
    background-color: var(--tf-ink);
}

.tf-admin .form-label,
.tf-account .form-label {
    font-weight: 600;
    font-size: .925rem;
}

/* ---- Badges and alerts ---- */

.tf-admin .badge {
    --bs-badge-font-weight: 700;
    --bs-badge-padding-x: .65em;
    --bs-badge-padding-y: .4em;
    border-radius: 999px;
    letter-spacing: .01em;
}

.tf-admin .alert,
.tf-account .alert {
    --bs-alert-border-radius: 1rem;
    border-width: 0;
    box-shadow: var(--tf-shadow);
}

/* ---- Account card (sign-in pages) ---- */

.tf-account-card a:not(.btn) {
    color: var(--tf-blue);
    font-weight: 600;
    text-decoration: none;
}

    .tf-account-card a:not(.btn):hover {
        text-decoration: underline;
    }