/* ═══════════════════════════════════════════════════════════════════════
   Controls — one shape and one behaviour for buttons, fields and panels
   on every page.

   Loaded after theme.css and dark-theme.css, so a plain-class rule here
   wins a specificity tie against them. Where those files reach further
   (`.dark-theme .btn.btn-outline-primary`, say), the selector below
   matches their weight rather than reaching for !important.

   Colours come from --cf-accent in tokens.css: the brand blue on most of
   the site, the chat's indigo inside the chat, so the same rules dress
   both without either page changing its identity.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--cf-radius-control);
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--cf-focus-ring); outline: none; }

/* The action of the page. */
.btn-primary,
.dark-theme .btn-primary {
    background-color: var(--cf-accent);
    border-color: var(--cf-accent);
    color: var(--cf-accent-contrast);
}
.btn-primary:hover,
.btn-primary:focus,
.dark-theme .btn-primary:hover,
.dark-theme .btn-primary:focus {
    background-color: var(--cf-accent-hover);
    border-color: var(--cf-accent-hover);
    color: var(--cf-accent-contrast);
}

/* A way out, not a second action: no fill, so one thing per view reads as
   the thing to press. */
.btn-secondary,
.dark-theme .btn-secondary {
    background-color: transparent;
    border-color: var(--chat-border);
    color: var(--chat-text-secondary);
}
.btn-secondary:hover,
.btn-secondary:focus,
.dark-theme .btn-secondary:hover,
.dark-theme .btn-secondary:focus {
    background-color: var(--chat-surface);
    border-color: var(--chat-input-border);
    color: var(--chat-text);
}

/* Outline variants, in the accent rather than in white. */
.btn-outline-primary,
.dark-theme .btn.btn-outline-primary {
    background-color: transparent;
    border-color: var(--cf-accent);
    color: var(--cf-accent);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.dark-theme .btn.btn-outline-primary:hover,
.dark-theme .btn.btn-outline-primary:focus {
    background-color: var(--cf-accent);
    border-color: var(--cf-accent);
    color: var(--cf-accent-contrast);
}
/* Dark: the accent is too dark to use as label colour on a dark panel
   (#0066cc on #001020 fails contrast, and it is what turned "New Chat" and
   "Continue in Chat" deep blue). The label stays white, as it was before, and
   the accent moves to the border. Background is unchanged: still transparent. */
.dark-theme .btn.btn-outline-primary { color: #ffffff; }

.btn-outline-secondary,
.dark-theme .btn-outline-secondary {
    background-color: transparent;
    border-color: var(--chat-border);
    color: var(--chat-text-secondary);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.dark-theme .btn-outline-secondary:hover,
.dark-theme .btn-outline-secondary:focus {
    background-color: var(--chat-surface);
    border-color: var(--chat-input-border);
    color: var(--chat-text);
}

/* ── Fields ─────────────────────────────────────────────────────────── */
/* Bootstrap zeroes the inner corners of .input-group and .btn-group
   children with a heavier selector, so grouped controls still join up. */
.form-control,
.form-select {
    border-radius: var(--cf-radius-control);
    border-color: var(--chat-input-border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--cf-accent);
    box-shadow: var(--cf-focus-ring);
}
.form-check-input:focus {
    border-color: var(--cf-accent);
    box-shadow: var(--cf-focus-ring);
}
.form-check-input:checked {
    background-color: var(--cf-accent);
    border-color: var(--cf-accent);
}

/* ── Panels ─────────────────────────────────────────────────────────── */
.card { border-radius: var(--cf-radius-panel); }
.card > .card-header:first-child {
    border-top-left-radius: calc(var(--cf-radius-panel) - 1px);
    border-top-right-radius: calc(var(--cf-radius-panel) - 1px);
}
.card > .card-footer:last-child {
    border-bottom-left-radius: calc(var(--cf-radius-panel) - 1px);
    border-bottom-right-radius: calc(var(--cf-radius-panel) - 1px);
}
.alert { border-radius: var(--cf-radius-panel); }
.dropdown-menu { border-radius: var(--cf-radius-menu); }
.badge { border-radius: 6px; }
.list-group { border-radius: var(--cf-radius-panel); }
.modal-content { border-radius: var(--cf-radius-panel); }
.nav-pills .nav-link { border-radius: var(--cf-radius-control); }