/* ==========================================================================
   Dashboard — superadmin stats, sidebar, and activity feed
   ========================================================================== */

/* Stats Grid
   -------------------------------------------------------------------------- */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 20px;
}

.dashboard-stat-card {
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition:
        border-color 0.2s,
        transform 0.2s;
    display: block;
}

.dashboard-stat-card--clickable {
    cursor: pointer;
}

.dashboard-stat-card--clickable:hover {
    border-color: var(--bs-yellow);
    transform: translateY(-2px);
}

.dashboard-stat-card__icon {
    font-size: 1.5rem;
    color: var(--bs-yellow);
    margin-bottom: 0.5rem;
}

.dashboard-stat-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bs-yellow);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dashboard-stat-card__value--zero {
    color: #6c757d;
}

.dashboard-stat-card__label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

.dashboard-stat-card__extra {
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.dashboard-stat-card__extra a {
    color: var(--bs-yellow);
    text-decoration: none;
    display: inline-block;
    margin: 0 0.25rem;
}

.dashboard-stat-card__extra a:hover {
    text-decoration: underline;
}

.alert-info {
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 12px;
    color: #fff;
}

.table-warning {
    background-color: rgba(255, 193, 7, 0.08) !important;
    border-color: rgba(255, 193, 7, 0.2) !important;
    color: rgba(255, 193, 7, 0.9) !important;
}

/* ==========================================================================
   Sites Editor — Table + Offcanvas Detail Panel
   ========================================================================== */

/* Table corners — straight, no rounding */
.table-rounded {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid #333;
}

.table-rounded thead th:first-child {
    border-top-left-radius: 0;
}

.table-rounded thead th:last-child {
    border-top-right-radius: 0;
}

.table-rounded tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0;
}

.table-rounded tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0;
}

/* Clickable rows */
.sites-table .site-row,
.users-table .user-row {
    cursor: pointer;
    transition:
        background 0.15s,
        opacity 0.15s;
}

/* Table overflow guard (replaces ad-hoc inline overflow styles). */
.table-clip {
    overflow-x: clip;
}

/* ==========================================================================
   Component: app-drawer (shared right-hand offcanvas drawer)
   The single shell behind every side drawer: admin detail panels, the cart,
   search, and messages. Bootstrap supplies the mechanics (.offcanvas-end);
   this component owns the surface, header, and body behaviour.

   Markup:
     <div class="offcanvas offcanvas-end app-drawer" id="..." aria-labelledby="...">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="...">Title</h5>
         <button class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
       </div>
       <div class="offcanvas-body app-drawer__body">...</div>
     </div>

   Body variants:
     .app-drawer__body        padded, scrolls its own content (default)
     .app-drawer__body--flush edge-to-edge, lays out its own scrolling regions
                              (used by the message thread)
   The footer is content-level: .detail-footer (+ .detail-actions for buttons).
   ========================================================================== */
.app-drawer {
    width: min(480px, 92vw);
    background: #1a1a1a !important;
    border-left: 1px solid #333;
}

/* Bootstrap moves focus into the drawer when it opens. The drawer is a
   container, not a control, so it must not take the global :focus-visible
   ring (foundation.css) — that renders as a 2px accent outline tracing the
   whole panel, which reads as an "accent left border" and made drawers look
   inconsistent between pages depending on how focus arrived. Interactive
   children (buttons, inputs, links) keep their own rings. */
.app-drawer:focus,
.app-drawer:focus-visible {
    outline: none;
}

.app-drawer .offcanvas-header {
    border-bottom: 1px solid #333;
    padding: 1rem 1.25rem;
}

.app-drawer .offcanvas-title {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.1rem;
    color: #ffc107;
}

.app-drawer__body {
    padding: 1.25rem;
    overflow-y: auto;
}

/* Declared after __body so the flush variant wins when both are applied. */
.app-drawer__body--flush {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ==========================================================================
   Component: app-modal (shared centered dialog)
   Sibling of .app-drawer: same surface language, for dialogs that are not
   side drawers (confirmations, lightboxes). Bootstrap supplies the mechanics
   (.modal / .modal-dialog); this component owns the chrome, so callers do not
   need `bg-dark text-light` — without it Bootstrap renders a white panel.

   Markup:
     <div class="modal fade" id="...">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content app-modal">
           <div class="modal-header">
             <h5 class="modal-title">Title</h5>
             <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
           </div>
           <div class="modal-body">...</div>
           <div class="modal-footer">
             <button class="button button--ghost" data-bs-dismiss="modal">Cancel</button>
             <button class="button button--solid">Confirm</button>
           </div>
         </div>
       </div>
     </div>
   Lightboxes may omit header/body/footer and place content directly.
   ========================================================================== */
.app-modal {
    background: #1a1a1a !important;
    border: 1px solid #333;
    border-radius: 0;
    color: var(--text-primary);
}

.app-modal .modal-header {
    border-bottom: 1px solid #333;
}

.app-modal .modal-title {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.1rem;
    color: #ffc107;
}

.app-modal .modal-footer {
    border-top: 1px solid #333;
}

/* Detail sections */
.detail-section {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-section-heading {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
}

/* Site image in detail */
.detail-site-img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.detail-image-actions {
    display: flex;
    gap: 8px;
    flex-direction: column;
}

/* Gap between the media-upload preview and the Regenerate/Remove row. Scoped
   as an adjacent sibling so member_profile, which has a .form-field between
   them, is unaffected. */
.media-upload + .detail-image-actions {
    margin-top: 12px;
}

/* Single-button POST forms (suspend/delete/regenerate/remove) stay
   transparent to flex layout, so each pill keeps the exact sizing it had
   as a direct link/button child. */
.detail-actions form,
.detail-image-actions form {
    display: contents;
}

/* Detail rows (label → value) */
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.35rem 0;
    font-size: 0.85rem;
}

.detail-label {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 0.78rem;
}

.detail-value {
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}

.detail-link {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.detail-link:hover {
    text-decoration: underline;
}

/* Offcanvas footer actions */
.detail-footer {
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1.25rem;
}

.detail-actions {
    display: flex;
    gap: 0.5rem;
}

.detail-actions .button {
    flex: 1;
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
    text-align: center;
    white-space: nowrap;
}

/* Edit form within panel.
   Field styling lives on the shared .form-field/.form-field__input primitives
   (css/redesign.css); the panels no longer use Bootstrap's form-control/-select.
   Only the switch keeps a panel-specific dark skin. */
#detail-edit-form .form-check-input {
    background-color: #333;
    border-color: #555;
}

#detail-edit-form .form-check-input:checked {
    background-color: #ffc107;
    border-color: #ffc107;
}

/* Mobile adjustments */
@media (max-width: 767.98px) {
    .detail-actions {
        flex-wrap: wrap;
    }

    .detail-actions .button {
        flex: 1 1 45%;
    }
}

.offcanvas {
    color: #fff !important;
}

/* Pagination bar */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.pagination-bar .page-indicator {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Component: sun-editor (dark theme override)
   The vendored SunEditor 2.41.3 stylesheet is loaded after the site
   stylesheets in news_admin.php, so it outranks these selectors on equal
   specificity; the
   declarations below therefore carry !important. Icons use fill:currentColor,
   so button colour drives them. Radius stays 0 to match the site.
   Light -> token map:
     #fff                      -> --panel      (editor + surfaces)
     #fafafa                   -> --panel-2    (toolbar, resizer, more-layer)
     #f3f3f3                   -> --code-bg    (default/disabled fills)
     #e1e1e1/#dadada/#ccc/
     #bababa/#e5e5e5           -> --line       (borders)
     #000/#111/#333            -> --text
     #666/#999/#b1b1b1/#bdbdbd -> --muted / --faint
     #004cff/#0093ff/#4592ff/
     #80bdff/#3f9dff           -> --accent / --accent-hover
   ========================================================================== */

/* Container */
.sun-editor {
    border: 1px solid var(--line) !important;
    background-color: var(--panel) !important;
    color: var(--text) !important;
    border-radius: 0 !important;
}

.sun-editor button {
    color: var(--text) !important;
}

/* Type. SunEditor hardcodes Helvetica Neue/13px; align the chrome with the
   site sans and the content with .article-body. Code view and pre keep mono;
   form controls inherit so dialog inputs pick up the sans too. */
.sun-editor {
    font-family: var(--sans) !important;
}

.sun-editor-editable {
    font-family: var(--sans) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.sun-editor .se-wrapper .se-wrapper-code,
.sun-editor .se-wrapper .se-wrapper-code-mirror,
.sun-editor-editable pre {
    font-family: var(--mono) !important;
}

.sun-editor input,
.sun-editor select,
.sun-editor textarea {
    font-family: inherit !important;
}

/* Toolbar */
.sun-editor .se-toolbar {
    background-color: var(--panel-2) !important;
    outline: 1px solid var(--line) !important;
    border-radius: 0 !important;
}

.sun-editor .se-toolbar-cover {
    background-color: var(--panel-2) !important;
}

.sun-editor .se-toolbar-more-layer {
    background-color: var(--panel-2) !important;
}

.sun-editor .se-toolbar-more-layer .se-more-layer {
    border-top: 1px solid var(--line) !important;
}

/* Separators. SunEditor 2.41.3 renders tool-group dividers via
   .se-btn-module-border; .se-toolbar-separator-vertical is a 0x0 inline box,
   so its colour is set for forward-compatibility only. */
.sun-editor .se-btn-module-border {
    border-color: var(--line) !important;
    border-radius: 0 !important;
}

.sun-editor .se-toolbar-separator-vertical {
    border-color: var(--line) !important;
    background-color: var(--line) !important;
}

/* Toolbar buttons */
.sun-editor .se-btn,
.sun-editor .se-btn-select {
    color: var(--text) !important;
    border-radius: 0 !important;
}

.sun-editor .se-btn:enabled:focus,
.sun-editor .se-btn:enabled:hover {
    color: var(--text) !important;
    background-color: var(--line) !important;
    border-color: var(--line-strong) !important;
}

.sun-editor .se-btn:enabled:active,
.sun-editor .se-btn:enabled.on:active {
    background-color: var(--line-strong) !important;
    border-color: var(--line-strong) !important;
    box-shadow: none !important;
}

.sun-editor .se-btn:enabled.on {
    background-color: var(--line) !important;
    border-color: var(--line-strong) !important;
}

.sun-editor .se-btn:enabled.active {
    color: var(--accent) !important;
}

.sun-editor .se-btn:enabled.active:focus,
.sun-editor .se-btn:enabled.active:hover {
    background-color: var(--line) !important;
    border-color: var(--line-strong) !important;
}

.sun-editor .se-btn:disabled,
.sun-editor .se-btn-list:disabled {
    color: var(--faint) !important;
}

.sun-editor .se-btn-module .se-btn-more:focus,
.sun-editor .se-btn-module .se-btn-more:hover,
.sun-editor .se-btn-module .se-btn-more.on {
    color: var(--text) !important;
    background-color: var(--line) !important;
    border-color: var(--line-strong) !important;
}

.sun-editor .se-btn-module .se-btn-more.on:hover {
    background-color: var(--line-strong) !important;
}

/* Editing surface */
.sun-editor .se-wrapper .se-wrapper-inner {
    background-color: var(--panel) !important;
    color: var(--text) !important;
}

.sun-editor-editable {
    background-color: var(--panel) !important;
    color: var(--text) !important;
    border-radius: 0 !important;
}

.sun-editor-editable a {
    color: var(--accent) !important;
}

.sun-editor-editable a:focus,
.sun-editor-editable a:hover {
    color: var(--accent-hover) !important;
}

.sun-editor-editable a.on {
    color: var(--accent) !important;
    background-color: var(--panel-2) !important;
}

.sun-editor-editable blockquote {
    color: var(--muted) !important;
    border-color: var(--line) !important;
}

.sun-editor-editable pre {
    color: var(--muted) !important;
    background-color: var(--code-bg) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
}

.sun-editor .se-wrapper .se-placeholder {
    color: var(--faint) !important;
}

/* Code view */
.sun-editor .se-wrapper .se-wrapper-code {
    background-color: var(--code-bg) !important;
    color: var(--text) !important;
    border-radius: 0 !important;
}

/* Resizing bar / character counter */
.sun-editor .se-resizing-bar {
    background-color: var(--panel-2) !important;
    border-top: 1px solid var(--line) !important;
}

.sun-editor .se-resizing-bar .se-navigation,
.sun-editor .se-resizing-bar .se-char-counter-wrapper {
    color: var(--muted) !important;
}

.sun-editor .se-resizing-bar .se-char-counter-wrapper.se-blink {
    color: var(--accent) !important;
}

/* Dialogs */
.sun-editor .se-dialog .se-dialog-back {
    background-color: var(--bg) !important;
}

.sun-editor .se-dialog .se-dialog-inner .se-dialog-content {
    background-color: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
}

.sun-editor .se-dialog button:not(.se-btn-primary),
.sun-editor .se-dialog input,
.sun-editor .se-dialog select,
.sun-editor .se-dialog label {
    color: var(--text) !important;
}

.sun-editor .se-dialog .se-dialog-inner .se-dialog-header {
    border-bottom: 1px solid var(--line) !important;
}

.sun-editor .se-dialog .se-dialog-inner .se-dialog-footer {
    border-top: 1px solid var(--line) !important;
}

.sun-editor .se-dialog-tabs {
    border-bottom: 1px solid var(--line) !important;
}

.sun-editor .se-dialog-tabs button {
    background-color: var(--panel-2) !important;
    border-right: 1px solid var(--line) !important;
    border-radius: 0 !important;
    color: var(--text) !important;
}

.sun-editor .se-dialog-tabs button:hover,
.sun-editor .se-dialog-tabs button.active {
    background-color: var(--panel) !important;
}

.sun-editor .se-dialog .se-dialog-inner .se-dialog-form a {
    color: var(--accent) !important;
}

.sun-editor .se-dialog .se-dialog-inner .se-link-preview {
    color: var(--muted) !important;
    background-color: transparent !important;
}

/* Inputs (covers .se-input-form, .se-input-select and .se-input-url) */
.sun-editor input,
.sun-editor select,
.sun-editor textarea {
    background-color: var(--code-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
}

.sun-editor input:focus,
.sun-editor select:focus,
.sun-editor textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: none !important;
}

.sun-editor .se-dialog .se-dialog-inner input:disabled,
.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-input-form.se-input-url:disabled {
    background-color: var(--panel-2) !important;
    color: var(--muted) !important;
}

.sun-editor .se-dialog .se-dialog-inner .se-dialog-btn-revert {
    border-color: var(--line) !important;
    border-radius: 0 !important;
}

/* Primary dialog button. Scoped one class deeper than the dialog text rule
   above so the accent fill and contrast label win. */
.sun-editor .se-dialog .se-btn-primary {
    color: var(--accent-contrast) !important;
    background-color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 0 !important;
}

.sun-editor .se-btn-primary:focus,
.sun-editor .se-btn-primary:hover {
    color: var(--accent-contrast) !important;
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

.sun-editor .se-btn-primary:active {
    color: var(--accent-contrast) !important;
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    box-shadow: none !important;
}

/* Dropdowns: menu bar and list layers */
.sun-editor .se-menu-list,
.sun-editor .se-menu-list li {
    color: var(--text) !important;
}

.sun-editor .se-list-layer {
    background-color: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
}

.sun-editor .se-list-layer button {
    color: var(--text) !important;
}

.sun-editor .se-btn-list:focus,
.sun-editor .se-btn-list:hover {
    background-color: var(--line) !important;
    border-color: var(--line-strong) !important;
}

.sun-editor .se-btn-list:active {
    background-color: var(--line-strong) !important;
    border-color: var(--line-strong) !important;
    box-shadow: none !important;
}

.sun-editor .se-btn-list.default_value {
    background-color: var(--code-bg) !important;
    border-top: 1px dotted var(--line) !important;
    border-bottom: 1px dotted var(--line) !important;
}

.sun-editor .se-list-inner .se-list-basic li button.active {
    color: var(--accent-contrast) !important;
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.sun-editor .se-list-inner .se-list-checked li button.se-checked {
    color: var(--accent) !important;
}

/* Controller and link preview */
.sun-editor .se-controller {
    background-color: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
}

.sun-editor .se-controller .se-btn-group button:focus:enabled,
.sun-editor .se-controller .se-btn-group button:hover:enabled {
    background-color: var(--line) !important;
    border-color: var(--line-strong) !important;
}

.sun-editor .se-controller .se-btn-group button:active:enabled {
    background-color: var(--line-strong) !important;
    border-color: var(--line-strong) !important;
    box-shadow: none !important;
}

.sun-editor .se-controller .se-btn-group button:enabled.on {
    background-color: var(--line) !important;
    border-color: var(--line-strong) !important;
}

.sun-editor .se-controller .se-btn-group button:enabled.active {
    color: var(--accent) !important;
}

.sun-editor .se-controller-link .link-content a {
    color: var(--accent) !important;
}

/* Tooltips and arrows */
.sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text {
    background-color: var(--panel-2) !important;
    color: var(--text) !important;
    border-radius: 0 !important;
}

.sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text:after {
    border-bottom-color: var(--panel-2) !important;
}

.sun-editor .se-arrow.se-arrow-up {
    border-bottom-color: var(--line) !important;
}

.sun-editor .se-arrow.se-arrow-up:after {
    border-bottom-color: var(--panel) !important;
}

.sun-editor .se-arrow.se-arrow-down {
    border-top-color: var(--line) !important;
}

.sun-editor .se-arrow.se-arrow-down:after {
    border-top-color: var(--panel) !important;
}

.sun-editor .se-toolbar .se-arrow.se-arrow-up:after {
    border-bottom-color: var(--panel-2) !important;
}

.sun-editor .se-toolbar .se-arrow.se-arrow-down:after {
    border-top-color: var(--panel-2) !important;
}

.sun-editor .se-controller .se-arrow.se-arrow-up {
    border-bottom-color: var(--line) !important;
}