/* Reusable components. Everything here replaces a Bootstrap class one-for-one. */

/* --- Buttons -------------------------------------------------------------
   .c-button is the base; the modifiers set colour only. Anchors and buttons
   both use it, so the anchor's underline is reset here. */
.c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-2);
    padding: 0.45rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--app-radius-pill);
    font-size: var(--app-text-sm);
    font-weight: 650;
    line-height: 1.5;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.c-button--sm {
    padding: 0.3rem 0.75rem;
    font-size: var(--app-text-xs);
}

.c-button--primary {
    border-color: var(--app-accent-from);
    color: var(--app-accent-ink);
    background: linear-gradient(135deg, var(--app-accent-from), var(--app-accent-to));
    box-shadow: 0 12px 34px rgba(124, 45, 18, 0.42);
}

.c-button--primary:hover,
.c-button--primary:focus-visible {
    border-color: var(--app-primary);
    color: var(--app-accent-ink);
    /* Reversed rather than lightened: white ink is the constraint, and any
       orange bright enough to read as a hover state is too bright to carry it.
       Base runs light-to-dark, hover dark-to-light -- a visible shift with no
       pairing below AA. */
    background: linear-gradient(135deg, var(--app-accent-hover), var(--app-accent-from));
}

.c-button--outline,
.c-button--ghost {
    border-color: var(--app-border);
    color: var(--app-text);
    background: rgba(28, 17, 13, 0.55);
}

.c-button--outline:hover,
.c-button--ghost:hover,
.c-button--outline:focus-visible,
.c-button--ghost:focus-visible {
    border-color: rgba(253, 186, 116, 0.72);
    color: var(--app-text-strong);
    background: rgba(249, 115, 22, 0.16);
}

.c-button--danger {
    border-color: var(--app-error);
    color: var(--app-error);
    background: rgba(248, 113, 113, 0.12);
}

.c-button--danger:hover,
.c-button--danger:focus-visible {
    color: var(--app-text-strong);
    background: rgba(248, 113, 113, 0.24);
}

/* --- Cards and heroes ---------------------------------------------------- */
.c-card,
.c-hero {
    padding: var(--app-space-5);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(18px);
}

.c-hero {
    padding: var(--app-space-6);
}

/* --- Page headers -------------------------------------------------------- */
.c-page-header {
    margin-block-end: var(--app-space-5);
}

.c-page-header__kicker {
    margin-block-end: var(--app-space-3);
    color: var(--app-primary);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.c-page-header__title {
    font-size: var(--app-text-2xl);
}

.c-page-header__lead {
    margin-block-start: var(--app-space-3);
    color: var(--app-muted);
    font-size: var(--app-text-lg);
}

.c-page-header__back {
    display: inline-block;
    margin-block-end: var(--app-space-3);
    color: var(--app-muted);
    font-size: var(--app-text-sm);
    text-decoration: none;
}

.c-page-header__back:hover {
    color: var(--app-text-strong);
}

/* --- Alerts --------------------------------------------------------------
   Modifiers are named after Django message tags (debug, info, success,
   warning, error) so the template can interpolate message.tags directly.
   Bootstrap needed a "danger" alias; we do not. */
.c-alert {
    padding: var(--app-space-3) var(--app-space-4);
    border: 1px solid var(--app-border);
    border-left-width: 3px;
    border-radius: var(--app-radius-sm);
    color: var(--app-text);
    background: var(--app-surface-raised);
    box-shadow: var(--app-shadow-sm);
}

.c-alert + .c-alert {
    margin-block-start: var(--app-space-2);
}

.c-alert--info,
.c-alert--debug {
    border-left-color: var(--app-info);
}

.c-alert--success {
    border-left-color: var(--app-success);
}

.c-alert--warning {
    border-left-color: var(--app-warning);
}

.c-alert--error {
    border-left-color: var(--app-error);
}

/* --- Forms ---------------------------------------------------------------
   allauth renders its fields through the Django form framework rather than
   through its own element system, so inputs are themed by element selector
   instead of a per-field class. Admin pages do not load this stylesheet. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="color"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--app-border);
    border-radius: 0.9rem;
    line-height: 1.5;
    color: var(--app-text);
    background-color: rgba(12, 7, 5, 0.34);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
    border-color: var(--app-primary);
    outline: none;
    color: var(--app-text);
    background-color: rgba(12, 7, 5, 0.48);
    box-shadow: 0 0 0 0.22rem rgba(249, 115, 22, 0.18);
}

.c-field {
    margin-block-end: var(--app-space-4);
}

.c-field label {
    display: block;
    margin-block-end: var(--app-space-1);
    color: var(--app-muted);
    font-size: var(--app-text-sm);
    font-weight: 650;
}

.c-field__error {
    margin-block-start: var(--app-space-1);
    color: var(--app-error);
    font-size: var(--app-text-sm);
}

/* --- Pagination ---------------------------------------------------------- */
.c-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-space-1);
    margin-block-start: var(--app-space-4);
}

.c-pagination__link {
    display: inline-flex;
    min-width: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    color: var(--app-text);
    font-size: var(--app-text-sm);
    text-decoration: none;
}

.c-pagination__link:hover {
    border-color: var(--app-border-strong);
    color: var(--app-text-strong);
    background: rgba(249, 115, 22, 0.12);
}

.c-pagination__item--current .c-pagination__link {
    border-color: var(--app-primary);
    color: var(--app-primary-contrast);
    background: var(--app-primary);
}

.c-pagination__item--disabled .c-pagination__link {
    opacity: 0.4;
    pointer-events: none;
}

/* --- Notices: maintenance, under construction, error pages --------------- */
.c-notice {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

.c-notice__badge {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border-radius: var(--app-radius-pill);
    margin-block-end: var(--app-space-4);
    color: var(--app-primary-contrast);
    background: var(--app-primary);
    font-size: var(--app-text-sm);
    font-weight: 700;
}

.c-notice__code {
    color: var(--app-muted);
    font-size: var(--app-text-3xl);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
}

.c-notice__title {
    margin-block: var(--app-space-2) var(--app-space-3);
}

.c-notice__text {
    color: var(--app-muted);
    margin-block-end: var(--app-space-5);
}

/* --- Action grid --------------------------------------------------------- */
.c-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--app-space-3);
    margin-block-start: var(--app-space-5);
}

.c-action-card {
    display: block;
    min-height: 100%;
    padding: var(--app-space-4);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    color: var(--app-text);
    text-decoration: none;
    background: rgba(28, 17, 13, 0.46);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.c-action-card:hover,
.c-action-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(253, 186, 116, 0.58);
    color: var(--app-text-strong);
    background: rgba(249, 115, 22, 0.12);
}

.c-action-card small {
    display: block;
    margin-block-start: var(--app-space-2);
    color: var(--app-muted);
}

/* --- Responsive data table ----------------------------------------------
   Add class="c-table" to a <table>. Each <td> needs data-label="Column name"
   for the stacked mobile view. */
.c-table {
    width: 100%;
    border-collapse: collapse;
}

.c-table th,
.c-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--app-border);
    text-align: left;
    color: var(--app-text);
    vertical-align: middle;
}

.c-table th {
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.c-table tbody tr:last-child td {
    border-bottom: none;
}

.c-table tbody tr:hover td {
    background: rgba(249, 115, 22, 0.05);
}

@media (max-width: 575.98px) {
    .c-card,
    .c-hero {
        padding: var(--app-space-4);
    }

    .c-table thead {
        display: none;
    }

    .c-table tbody tr {
        display: block;
        border: 1px solid var(--app-border);
        border-radius: 0.9rem;
        margin-block-end: var(--app-space-3);
        padding: 0.25rem 0.5rem;
        background: var(--app-surface);
    }

    .c-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--app-space-2);
        border-bottom: 1px solid var(--app-border);
        padding: 0.45rem 0.5rem;
    }

    .c-table tbody tr:last-child td:last-child,
    .c-table td:last-child {
        border-bottom: none;
    }

    .c-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--app-muted);
        font-size: 0.78rem;
        font-weight: 750;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
}

/* Actions packed into a table cell: keep the move form inline with the links
   so the row reads as one group rather than two stacked ones. */
.c-row-actions,
.c-row-actions form {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-1);
}

.c-button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* --- Section header with an action -------------------------------------
   A heading and the action that belongs to it, on one line until the line runs
   out. The action sits beside its own section rather than above all of them,
   so an empty section still shows the way out of being empty. */
.c-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-3);
}

/* A sortable column heading. Sorting is a link, so it survives JavaScript being
   off and the resulting URL can be sent to somebody else; aria-sort marks the
   active column and drives the arrow, so the two cannot disagree. */
.c-table th a {
    color: inherit;
    text-decoration: none;
}

.c-table th a:hover,
.c-table th a:focus-visible {
    text-decoration: underline;
}

.c-table th[aria-sort]::after {
    content: " ↓";
}

.c-table th[aria-sort="ascending"]::after {
    content: " ↑";
}