/*
 * Samraworld Admin — Modern Add/Edit Pages
 * Used by add policy/help/email/etc. Brand: #668295
 *
 * Designed to be reused: classes are page-prefixed (.page-hero, .page-form…)
 * rather than tied to a specific entity type.
 */

:root {
    --add-brand: #668295;
    --add-brand-dark: #4a6070;
    --add-bg: #e9eef2;
    --add-card: #fff;
    --add-border: #c7d2da;
    --add-border-soft: #dae1e7;
    --add-text: #2c3e50;
    --add-text-muted: #6c7a85;
    --add-text-faint: #9aa6ae;
    --add-shadow-sm: 0 1px 2px rgba(31,52,64,0.07), 0 4px 12px rgba(31,52,64,0.07);
    --add-shadow-md: 0 6px 20px rgba(31,52,64,0.11);
    --add-radius: 10px;
    --add-radius-sm: 6px;
    --add-success: #1e6636;
    --add-success-bg: #f0f7f2;
    --add-success-border: #b7dfc5;
    --add-error: #c0392b;
    --add-error-bg: #fff3f3;
    --add-error-border: #f5c6cb;
    --add-danger: #c0392b;
    --add-danger-dark: #962d22;
    --add-warning-bg: #fff8e6;
    --add-warning-border: #ffe1a8;
}

body {
    background-color: var(--add-bg);
}

* { box-sizing: border-box; }

/* ======== Page wrapper ======== */

.add-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 18px 40px;
}

/* Wide variant — for search/list pages with multi-column data tables */
.add-page--wide {
    max-width: 1480px;
}

/* Narrow variant — for single-column pages like login / password reset. */
.add-page--narrow {
    max-width: 520px;
}

/* ======== Hero ======== */

.page-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-top: 3px solid var(--add-brand);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    padding: 22px 24px;
    margin-bottom: 18px;
}

.page-hero__icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--add-brand) 0%, var(--add-brand-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.7rem;
    box-shadow: var(--add-shadow-md);
}

.page-hero__icon i { line-height: 1; }

.page-hero__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.page-hero__type {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--add-brand);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-hero__badge {
    display: inline-block;
    padding: 1px 8px;
    background: rgba(102, 130, 149, 0.12);
    color: var(--add-brand-dark);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: 4px;
}

.page-hero__title {
    margin: 2px 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--add-text);
    line-height: 1.25;
    word-break: break-word;
}

.page-hero__subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: var(--add-text-muted);
    font-weight: 500;
}

.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.78rem;
    color: var(--add-text-faint);
    margin-top: 6px;
}

.page-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.page-hero__meta i { font-size: 0.72rem; }

.page-hero__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ======== Buttons ======== */

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: var(--add-radius-sm);
    background: var(--add-brand);
    color: #fff !important;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.3;
    text-decoration: none !important;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.page-btn:hover {
    background: var(--add-brand-dark);
    color: #fff !important;
    transform: translateY(-1px);
}

.page-btn:active { transform: translateY(0); }

.page-btn--primary { background: var(--add-brand); }

.page-btn--ghost {
    background: transparent;
    color: var(--add-text) !important;
    border-color: var(--add-border);
}

.page-btn--ghost:hover {
    background: var(--add-border-soft);
    border-color: var(--add-text-muted);
    color: var(--add-text) !important;
}

.page-btn--danger {
    background: var(--add-danger);
}

.page-btn--danger:hover {
    background: var(--add-danger-dark);
}

.page-btn--icon {
    padding: 9px 11px;
}

/* ======== Tabs (e.g. adm_addTheme: Details / Image) ======== */

.page-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--add-border);
    margin: 0 0 22px 0;
}

.page-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--add-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.page-tab:hover { color: var(--add-text); }

.page-tab.is-active {
    color: var(--add-brand);
    border-bottom-color: var(--add-brand);
}

.page-panel[hidden] { display: none; }

/* Tiny inline action button (used for translate buttons next to fields) */
.page-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 10px;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    background: #fff;
    color: var(--add-brand);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    height: 38px;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.page-mini-btn:hover {
    background: var(--add-brand);
    border-color: var(--add-brand);
    color: #fff;
}

.page-mini-btn:disabled,
.page-mini-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #fff;
    color: var(--add-text-muted);
    border-color: var(--add-border);
}

/* ======== Banner alerts ======== */

.page-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--add-radius-sm);
    margin-bottom: 18px;
    border: 1px solid;
}

.page-banner--success {
    background: var(--add-success-bg);
    border-color: var(--add-success-border);
    color: var(--add-success);
}

.page-banner--error {
    background: var(--add-error-bg);
    border-color: var(--add-error-border);
    color: var(--add-error);
}

.page-banner--info {
    background: rgba(102, 130, 149, 0.08);
    border-color: rgba(102, 130, 149, 0.25);
    color: var(--add-brand-dark);
}

.page-banner__icon {
    font-size: 1.3rem;
    line-height: 1;
    margin-top: 2px;
}

.page-banner__body { flex: 1; min-width: 0; }

.page-banner__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.page-banner__list {
    margin: 6px 0 0 18px;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 500;
}

.page-banner__list li { margin: 3px 0; }

/* ======== Main form card ======== */

.page-form {
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    padding: 28px 28px 24px;
    margin-bottom: 18px;
}

.page-form__intro {
    margin: 0 0 22px;
    font-size: 0.88rem;
    color: var(--add-text-muted);
    line-height: 1.55;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--add-border-soft);
}

/* ======== Form grid ======== */

.page-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
}

/* Spacing when two .page-form__grid sections appear back-to-back (e.g., profile + password). */
.page-form__grid + .page-form__grid {
    margin-top: 28px;
}

/* ======== Form fields ======== */

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.form-field--full {
    grid-column: 1 / -1;
}

.form-field__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--add-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Required-field marker — renders the <span class="form-field__required">*
   as a small red dot. The asterisk text inside is hidden (font-size 0)
   but kept in the DOM as a fallback. */
.form-field__required {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--add-error);
    margin-left: 6px;
    vertical-align: 1px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.form-field__input,
.form-field__select,
.form-field__textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #b8c2c9;
    border-radius: var(--add-radius-sm);
    background: #fff;
    color: var(--add-text);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s;
    margin-left: 0 !important;
}

.form-field__input::placeholder,
.form-field__textarea::placeholder {
    color: #8a99a3;
    opacity: 1;
}

.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
    outline: none;
    border-color: var(--add-brand);
    box-shadow: 0 0 0 3px rgba(102, 130, 149, 0.18);
}

.form-field__input:disabled,
.form-field__select:disabled,
.form-field__textarea:disabled {
    background: #f4f7f9;
    color: var(--add-text);
    cursor: default;
    border-color: var(--add-border-soft);
    -webkit-text-fill-color: var(--add-text); /* Safari override */
    opacity: 1;                                /* Safari/iOS dim by default */
}

.form-field__select,
.form-field select {
    width: 100%;
    padding: 10px 32px 10px 12px;
    border: 1.5px solid #b8c2c9;
    border-radius: var(--add-radius-sm);
    background: #fff;
    color: var(--add-text);
    font-size: 0.92rem;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23668295'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s;
    margin-left: 0 !important;
}

.form-field select:focus {
    outline: none;
    border-color: var(--add-brand);
    box-shadow: 0 0 0 3px rgba(102, 130, 149, 0.18);
}

.form-field select:disabled {
    background-color: #f4f7f9;
    color: var(--add-text);
    cursor: default;
    border-color: var(--add-border-soft);
    -webkit-text-fill-color: var(--add-text);
    opacity: 1;
}

.form-field__textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.55;
}

/* Read-only output (used by encryption utility pages) */
.form-field__input.page-output[readonly],
.form-field__input.page-output {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.9rem;
    background: #f0f3f5;
    color: var(--add-text);
    border-color: var(--add-border-soft);
    cursor: text;
}

/* Field with adjacent action button (e.g. translate) */
.form-field__row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.form-field__row .form-field__input {
    flex: 1;
    min-width: 0;
}

/* TinyMCE fields */
.form-field__tinymce {
    border: 1.5px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    overflow: hidden;
}

.form-field__tinymce .tox-tinymce {
    border: none !important;
    border-radius: 0 !important;
}

.form-field__tinymce-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

/* ======== Action bar (bottom of form) ======== */

.page-actions {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--add-border-soft);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

/* Top action bar: same buttons as the bottom bar, mirrored above the form so
   Save/Cancel are reachable without scrolling. Flips the divider to the bottom. */
.page-actions--top {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--add-border-soft);
}

/* Center an action bar's button group (vs the default right-aligned). */
.page-actions--center {
    justify-content: center;
}

/* On single-column narrow pages (login, password reset, etc.) a single
   primary button looks orphaned hugging the right edge. Center it. */
.add-page--narrow .page-actions {
    justify-content: center;
}

.page-actions__hint {
    flex: 1;
    margin: 0;
    font-size: 0.82rem;
    color: var(--add-text-muted);
    text-align: left;
}

.page-actions .page-btn {
    min-width: 130px;
}

/* ======== Radio group (hosts legacy .sw_radio markup in a wrapped row) ======== */

.page-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 12px;
    background: #f7f9fa;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
}

.page-radio-group--countries .sw_radio {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.78rem;
}

/* ======== Checkbox group (for roles, multi-select boxes) ======== */

.page-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 14px;
    padding: 14px 16px;
    background: #f7f9fa;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
}

.page-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--add-radius-sm);
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--add-text);
    transition: background 0.12s;
    user-select: none;
}

.page-checkbox:hover {
    background: rgba(102, 130, 149, 0.08);
}

.page-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--add-brand);
    cursor: pointer;
    flex-shrink: 0;
}

.page-checkbox input[type="checkbox"]:disabled {
    cursor: default;
}

.page-checkbox input[type="checkbox"]:disabled + span {
    color: var(--add-text-muted);
}

/* ======== Fieldset (containers for grouped sections inside a form) ======== */

.page-fieldset {
    margin: 22px 0 0;
    padding: 18px 20px 16px;
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius-sm);
    background: #fff;
}

.page-fieldset legend {
    padding: 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--add-brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.page-fieldset__intro {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--add-text-muted);
    line-height: 1.5;
}

/* ======== Compact filter bar (used by report pages with date ranges) ======== */

.page-filter {
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    padding: 16px 20px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 18px;
    align-items: end;
}

.page-filter__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.page-filter__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--add-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-filter__input {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid #b8c2c9;
    border-radius: var(--add-radius-sm);
    background: #fff;
    color: var(--add-text);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.page-filter__input:focus {
    outline: none;
    border-color: var(--add-brand);
    box-shadow: 0 0 0 3px rgba(102, 130, 149, 0.18);
}

.page-filter__action {
    display: flex;
    align-items: end;
}

.page-filter .page-btn {
    width: 100%;
    height: 38px;
}

/* ======== Report summary (small stat tiles above results table) ======== */

.page-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.page-summary__pill {
    background: rgba(102, 130, 149, 0.1);
    color: var(--add-brand-dark);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.page-summary__pill strong {
    color: var(--add-text);
    font-weight: 700;
    margin-left: 6px;
}

/* ======== Data table (used for pending lists, etc.) ======== */

.page-table-wrap {
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    /* overflow: hidden keeps the rounded corners clean for normal-width tables;
       overflow-x: auto then overrides so wide tables (error log, audit log)
       scroll INSIDE the wrap instead of pushing the whole page sideways. */
    overflow: hidden;
    overflow-x: auto;
    margin-bottom: 18px;
}

.page-table-wrap__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--add-border);
    background: #fafbfc;
}

.page-table-wrap__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--add-text);
    flex: 1;
}

.page-table-wrap__count {
    background: var(--add-brand);
    color: #fff;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

.page-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.page-table thead th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--add-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #e1e8ed;
    border-bottom: 2px solid var(--add-border);
}

.page-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--add-border-soft);
    color: var(--add-text);
    vertical-align: middle;
}

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

.page-table tbody tr.is-clickable {
    cursor: pointer;
    transition: background 0.12s;
}

.page-table tbody tr.is-clickable:hover { background: #f7fafb; }

.page-table__empty {
    text-align: center;
    padding: 28px 18px;
    color: var(--add-text-muted);
    font-size: 0.9rem;
}

.page-table__pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(102, 130, 149, 0.12);
    color: var(--add-brand-dark);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-table__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.82rem;
    color: var(--add-text-muted);
}

@media (max-width: 720px) {
    .page-table thead { display: none; }
    .page-table tbody tr {
        display: block;
        padding: 10px 14px;
        border-bottom: 1px solid var(--add-border-soft);
    }
    .page-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        border: none;
        width: auto !important;   /* override desktop shrink-to-fit widths (e.g. width:1% on count cells) so the cell fills the card */
        text-align: right;        /* value reads against the right edge, like the audit Note column */
    }
    .page-table tbody td::before {
        content: attr(data-label);
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--add-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;         /* keep the label left-aligned... */
        flex-shrink: 0;           /* ...and at full width so the value takes the remaining space */
    }
    /* Cancel the wide-table inline sizing (min-width / max-width), nowrap and
       ellipsis clipping that some cells carry for the desktop layout, so long
       values wrap inside the stacked card instead of running off the right edge
       (e.g. the error log's error-text cell, which floors at min-width:300px). */
    .page-table tbody td,
    .page-table tbody td > * {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
    }
}

/* ======================================================================
   Sortable column headers + numeric/primary cells for .page-table.
   Used by search-results tables. Backported from teachers' AddPagesModern.
   ====================================================================== */

.page-table__sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--add-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.12s;
}

.page-table__sort:hover {
    color: var(--add-brand);
}

.page-table__sort i {
    font-size: 0.7rem;
    opacity: 0.4;
    transition: opacity 0.12s, color 0.12s;
}

.page-table__sort.is-active {
    color: var(--add-brand);
}

.page-table__sort.is-active i {
    opacity: 1;
    color: var(--add-brand);
}

/* Static (non-clickable) variant — for columns that don't support sorting. */
.page-table__sort.is-static {
    cursor: default;
    color: var(--add-text-muted);
}
.page-table__sort.is-static:hover {
    color: var(--add-text-muted);
}

.page-table--sortable thead th {
    /* let the sort button drive the padding */
    padding: 10px 14px;
}

.page-table__primary {
    font-weight: 600;
    color: var(--add-text);
}

.page-table__num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* `.page-table thead th { text-align: left }` has higher specificity than
   `.page-table__num` alone, so headers stayed left-aligned even with the
   class applied. Match the specificity to center the header text. */
.page-table thead th.page-table__num {
    text-align: center;
}

/* Center the sort-button inside a numeric column header so it sits above
   the centered cell values rather than left-justified. */
.page-table thead th.page-table__num .page-table__sort {
    justify-content: center;
    width: 100%;
}

.page-table__num-icon {
    color: var(--add-text-faint);
    margin-right: 6px;
    font-size: 0.78rem;
}

.page-table__pill--success {
    background: #e6f4ec;
    color: #1e6636;
    border: 1px solid #c0e0cd;
}

.page-table__pill--muted {
    background: var(--add-border-soft);
    color: var(--add-text-muted);
    border: 1px solid var(--add-border);
}

.page-table__pill--info {
    background: #e8eaff;
    color: #3823a3;
    border: 1px solid #c8cdf3;
}

.page-table__pill--warn {
    background: #fdf3e0;
    color: #8a5a08;
    border: 1px solid #f0d8a8;
}

/* ======== Side panels (Delete, Clone, etc.) ======== */

.page-side-panel {
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    padding: 18px 22px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.page-side-panel--danger {
    border-left: 4px solid var(--add-danger);
}

.page-side-panel__icon {
    font-size: 1.3rem;
    color: var(--add-text-muted);
    flex-shrink: 0;
}

.page-side-panel--danger .page-side-panel__icon {
    color: var(--add-danger);
}

.page-side-panel__body {
    flex: 1;
    min-width: 220px;
}

.page-side-panel__title {
    margin: 0 0 3px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--add-text);
}

.page-side-panel__desc {
    margin: 0;
    font-size: 0.84rem;
    color: var(--add-text-muted);
    line-height: 1.5;
}

.page-side-panel__action {
    flex-shrink: 0;
}

/* ======== Responsive ======== */

@media (max-width: 720px) {
    .add-page { padding: 18px 12px 32px; }

    .page-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
        text-align: center;
    }
    .page-hero__icon {
        margin: 0 auto;
        width: 60px;
        height: 60px;
        font-size: 1.45rem;
    }
    .page-hero__info { align-items: center; }
    .page-hero__meta { justify-content: center; }
    .page-hero__actions { justify-content: center; flex-wrap: wrap; }

    .page-form { padding: 20px 16px; }

    .page-form__grid {
        grid-template-columns: 1fr;
    }

    .page-actions {
        justify-content: stretch;
        flex-direction: column-reverse;
    }
    .page-actions__hint {
        text-align: center;
        margin-top: 6px;
    }
    .page-actions .page-btn {
        width: 100%;
    }

    .page-side-panel {
        padding: 14px 16px;
    }
    .page-side-panel__action,
    .page-side-panel__action .page-btn {
        width: 100%;
    }
}

/* Password input + show/hide eye toggle. Without this block the toggle
   button is a plain inline element and wraps onto the next line under
   the input. Mirrors teachers' AddPagesModern.css. */
.form-field__pw {
    position: relative;
    display: block;
}

.form-field__pw .form-field__input {
    padding-right: 40px;
}

.form-field__pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--add-text-muted);
    padding: 4px 6px;
    font-size: 0.95rem;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.form-field__pw-toggle:hover {
    color: var(--add-brand);
    background: rgba(102, 130, 149, 0.10);
}

/* Policy / help link list (used by selc_viewPolicy.php). One row per link with
   leading icon, label, and a trailing chevron. Click target is the whole row. */
.policy-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.policy-link-list li + li {
    border-top: 1px solid var(--add-border-soft);
}
.policy-link-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 6px;
    color: var(--add-text);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.15s, background 0.15s;
}
.policy-link-list a:hover {
    color: var(--add-brand);
    background: var(--add-border-soft);
}
.policy-link-list a > i:first-child {
    font-size: 1.15rem;
    color: var(--add-brand);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.policy-link-list a > span {
    flex: 1;
    min-width: 0;
}
.policy-link-list__chev {
    color: var(--add-text-faint);
    font-size: 0.85rem;
    transition: transform 0.15s;
}
.policy-link-list a:hover .policy-link-list__chev {
    transform: translateX(2px);
    color: var(--add-brand);
}

/* ── Site Settings — setting rows + toggle switches ─────────────────────────
   Boolean flags render as an iOS-style switch (a styled checkbox). ── */
.setting-list { padding: 4px 20px 12px; }
.setting-row {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 14px 2px; border-bottom: 1px solid var(--add-border-soft);
}
.setting-row:last-child { border-bottom: 0; }
.setting-row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setting-row__label { font-weight: 700; color: var(--add-text); }
.setting-row__desc { font-size: 0.85rem; color: var(--add-text-faint); line-height: 1.4; }
.setting-row__input { flex: 0 1 260px; }

.switch { position: relative; display: inline-block; width: 48px; height: 27px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__slider {
    position: absolute; inset: 0; cursor: pointer; background: #c3ccd6;
    border-radius: 999px; transition: background .18s ease;
}
.switch__slider::before {
    content: ""; position: absolute; height: 21px; width: 21px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: transform .18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.switch input:checked + .switch__slider { background: var(--add-brand); }
.switch input:checked + .switch__slider::before { transform: translateX(21px); }
.switch input:focus-visible + .switch__slider { outline: 2px solid var(--add-brand); outline-offset: 2px; }

/* ===========================================================================
 * Tool-card — a section card with an icon + heading row (used by the report
 * pages: Security & Access, Error Analysis). Ported from the teachers sheet;
 * the grid header keeps the icon and heading on one line.
 * ======================================================================== */
.tool-card {
    margin-top: 18px;
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    overflow: hidden;
}
.tool-card__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
}
.tool-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 130, 149, 0.12);
    color: var(--add-brand);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.tool-card__body { min-width: 0; }
.tool-card__title {
    margin: 0 0 2px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--add-text);
}
.tool-card__desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--add-text-muted);
    line-height: 1.5;
}
.tool-card .page-table-wrap {
    margin: 0;
    border: none;
    border-top: 1px solid var(--add-border);
    border-radius: 0;
    box-shadow: none;
}
@media (max-width: 600px) {
    .tool-card__header { grid-template-columns: 1fr; text-align: center; }
    .tool-card__icon { margin: 0 auto; }
}

/* ============================================================
   Poll module (ported from teachers): detail-layout grid,
   sidecard, mini-list, danger-card — so the admin poll pages
   render correctly. Copied from teachers AddPagesModern.css.
   ============================================================ */

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 880px) {
    .detail-layout { grid-template-columns: 1fr; }
}

/* List + inline editor on one page (grammar/idiom category managers): the form
   lives in the side column, so give it much more room than the 300px sidebar.
   Desktop only — mobile still stacks via the rule above. */
@media (min-width: 881px) {
    .detail-layout--editor { grid-template-columns: minmax(0, 1fr) minmax(420px, 560px); }
}

.detail-layout__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Side cards (panels in the right column) */
.sidecard {
    background: var(--add-card);
    border: 1px solid var(--add-border);
    border-radius: var(--add-radius);
    box-shadow: var(--add-shadow-sm);
    overflow: hidden;
}

.sidecard__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--add-brand) 0%, var(--add-brand-dark) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
}

.sidecard__header i {
    font-size: 0.95rem;
    opacity: 0.95;
}

.sidecard__count {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.88;
}

.sidecard__body {
    padding: 6px 0;
    max-height: 320px;
    overflow-y: auto;
}

/* The Lesson Images sidecard packs small thumbnails so it fills up
   fast — give it 2x the default body height so the teacher doesn't
   have to scroll through every image. :has() target keeps the other
   sidecards (vocab / quiz / etc.) at their default size. */
.sidecard__body:has(.mini-thumbs) {
    max-height: 640px;
}

/* Editor sidecards (an add/edit form, e.g. the category add panel) should grow
   to fit the whole form rather than scroll inside a fixed height. Keeps the
   list-type sidecards (mini-lists / thumbs) at their scrollable default. */
.sidecard__body:has(.page-form) {
    max-height: none;
    overflow: visible;
}

/* Mini-list (members / groups) inside a sidecard */
.mini-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mini-list__item + .mini-list__item {
    border-top: 1px solid var(--add-border-soft);
}

.mini-list__link {
    display: flex;
    align-items: flex-start;          /* keep seq + pill anchored at row top while name wraps */
    gap: 9px;
    padding: 9px 14px;
    color: var(--add-text);
    text-decoration: none !important;
    transition: background 0.12s, color 0.12s;
}

.mini-list__link:hover {
    background: rgba(81, 52, 241, 0.06);
    color: var(--add-brand-dark);
}

.mini-list__link--current {
    background: rgba(81, 52, 241, 0.08);
    font-weight: 700;
    color: var(--add-brand-dark);
}

.mini-list__icon--member { color: var(--add-text-faint); font-size: 0.85rem; flex-shrink: 0; }
.mini-list__icon--leader { color: #d4ad2a;              font-size: 0.85rem; flex-shrink: 0; }
.mini-list__icon--current { color: var(--add-brand); font-size: 0.5rem; margin-left: auto; }

.mini-list__name {
    flex: 1;
    min-width: 0;
    /* Show the full name — wrap onto multiple lines instead of truncating.
       Break long unhyphenated words so they don't push the pill off-screen. */
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    font-size: 0.88rem;
}

/* Optional secondary line under a mini-list entry — e.g. shows which
   series a lesson belongs to in the Recent Lessons mini-panel. */
.mini-list__sub {
    display: block;
    margin-top: 2px;
    font-size: 0.74rem;
    font-weight: normal;
    color: var(--add-text-muted);
    line-height: 1.3;
}

/* In the "current" highlight, keep the sub-line readable but muted. */
.mini-list__link--current .mini-list__sub {
    color: var(--add-brand-dark);
    opacity: 0.7;
}

.mini-list__pill {
    flex-shrink: 0;
    white-space: nowrap;
    background: #fdf3e0;
    color: #8a5a08;
    border: 1px solid #f0d8a8;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* Nudge down a hair so the pill optically lines up with the first text line. */
    margin-top: 1px;
}

.mini-list__empty {
    margin: 0;
    padding: 14px;
    color: var(--add-text-muted);
    font-size: 0.85rem;
    text-align: center;
    font-style: italic;
}

/* Danger-zone card for delete action */
.danger-card {
    margin-top: 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
    background: #fff7f7;
    border: 1px solid #f5c4c4;
    border-radius: var(--add-radius);
}

.danger-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #f4ebec;
    color: #a83232;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.danger-card__title {
    margin: 0 0 2px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--add-text);
}

.danger-card__desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--add-text-muted);
    line-height: 1.5;
}

.danger-card__form { margin: 0; }

@media (max-width: 600px) {
    .danger-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .danger-card__icon { margin: 0 auto; }
    .danger-card__form { display: flex; justify-content: center; }
}

/* mini-list seq + in-list pill (poll question/answer panels) */
/* Mini-list: small leading sequence/badge column (used by lesson list). */
.mini-list__seq {
    flex-shrink: 0;
    min-width: 22px;
    text-align: right;
    color: var(--add-text-faint);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    /* Match the pill's nudge so seq, name, and pill share an optical baseline
       at the top of the row when the name wraps onto multiple lines. */
    margin-top: 2px;
}

/* Status-style pill variant (muted neutral, smaller text) for in-list status hints. */
.mini-list__link .mini-list__pill {
    background: var(--add-border-soft);
    color: var(--add-text-muted);
    border-color: var(--add-border);
    text-transform: none;
    letter-spacing: 0;
}