/* ================================================================
 * UI-COMPONENTS.CSS — Shared design language refinements
 *
 * Loaded after assets/css/modern.css from includes/header.php on every
 * page that uses the shared header. This file is additive: it tightens
 * the existing design system, gives legacy one-off button classes a
 * consistent appearance, and adds the small set of structural classes
 * (page header, section card, toolbar, tabs, severity chips) that were
 * being re-implemented inline on individual pages.
 *
 * Conventions:
 *   - Use the design tokens from modern.css (var(--color-*), --space-*,
 *     --radius-*, --transition-*). Do not introduce new hard-coded
 *     palette colors here.
 *   - Be additive only — do not redefine selectors that already have
 *     working styles in modern.css unless explicitly improving them.
 *   - Keep specificity low so per-page CSS can still override.
 * ================================================================ */


/* ----------------------------------------------------------------
 * BUTTON RESET + ACCESSIBILITY
 *
 * Native <button> elements ignore inherited font / color, which led
 * to inconsistent typography in places like search_results.php and
 * the admin pages where buttons looked subtly different from <a>
 * elements styled with the same .btn class. Reset that.
 * ---------------------------------------------------------------- */
button.btn,
button.btn-primary,
button.btn-secondary,
button.btn-success,
button.btn-danger,
button.btn-warning,
button.btn-ghost,
button.btn-outline {
    font-family: inherit;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

/* Clear, consistent focus ring for keyboard users on every button
   variant. Replaces the browser default outline and matches the
   .nav-link focus state for visual consistency. */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-success:focus-visible,
.btn-danger:focus-visible,
.btn-warning:focus-visible,
.btn-ghost:focus-visible,
.btn-outline:focus-visible,
.btn-icon:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}

/* Disabled buttons should look unmistakably disabled — not just dim.
   modern.css already handles pointer-events; this clears the gradient
   sheen and shadow so the button doesn't still look "active". */
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-success:disabled,
.btn-danger:disabled,
.btn-warning:disabled,
.btn-ghost:disabled,
.btn-outline:disabled,
.btn[aria-disabled="true"] {
    box-shadow: none !important;
    transform: none !important;
    filter: grayscale(0.4);
    cursor: not-allowed;
}


/* ----------------------------------------------------------------
 * BUTTON LOADING STATE
 *
 * Use either .btn.is-loading or [aria-busy="true"] on any .btn. Adds
 * a spinner before the label and disables interaction. Pages can
 * trigger this from JS without per-page styling.
 * ---------------------------------------------------------------- */
.btn.is-loading,
.btn[aria-busy="true"] {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}

.btn.is-loading::after,
.btn[aria-busy="true"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: #fff;
    animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}


/* ----------------------------------------------------------------
 * LEGACY BUTTON ALIASES
 *
 * The codebase has a number of ad-hoc button classes from before the
 * design system landed. We don't rewrite those callsites (too many,
 * too risky), but we do give them a consistent appearance so the UI
 * looks uniform. Each alias maps onto a design-token-driven look.
 *
 * Found in: admin/users.php, admin/subscriptions.php,
 *           admin/subscription_plans.php, admin/searches.php,
 *           admin/crawlers.php, search_results.php, saved_results.php,
 *           assets/css/feed_items.css and others.
 * ---------------------------------------------------------------- */

/* btn-view → secondary visual, used as a "View" / "Open" affordance */
.btn-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-brand-primary);
    background: var(--color-brand-primary-light);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-base);
    cursor: pointer;
}
.btn-view:hover {
    background: rgba(59, 130, 246, 0.22);
    color: #fff;
}

/* btn-delete → danger visual for inline trash icons */
.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    font-size: var(--text-sm);
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}
.btn-delete:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fff;
    border-color: rgba(239, 68, 68, 0.4);
}

/* btn-info → informational, sits between primary and secondary */
.btn-info {
    background: linear-gradient(135deg, var(--color-accent-cyan) 0%, #0891b2 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
}
.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4);
}

/* btn-arrow → small icon-only sort/reorder controls */
.btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--color-text-tertiary);
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}
.btn-arrow:hover {
    color: var(--color-text-primary);
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--color-brand-primary);
}
.btn-arrow.btn-arrow-disabled,
.btn-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* btn-inline-edit → tiny icon-only edit affordance inside tables */
.btn-inline-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: var(--space-2);
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.85em;
}
.btn-inline-edit:hover {
    color: var(--color-brand-primary);
    background: var(--color-brand-primary-light);
}

/* btn-neutral → explicit "Cancel"-style action; visually distinct from
   btn-secondary so that destructive flows can pair Delete + Cancel
   without both looking equally weighty. */
.btn-neutral {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    box-shadow: none;
}
.btn-neutral:hover {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border-focus);
    transform: none;
    box-shadow: none;
}


/* ----------------------------------------------------------------
 * PAGE HEADER — shared title block for every top-level page
 *
 * Replaces the per-page <div class="page-title"> / <h1> + button row
 * patterns in dashboards, admin, search results, etc.
 *
 *   <header class="page-header">
 *     <div>
 *       <h1 class="page-title">Saved searches</h1>
 *       <p class="page-subtitle">Recurring queries with diff alerts.</p>
 *     </div>
 *     <div class="page-actions">
 *       <button class="btn btn-primary">+ New</button>
 *     </div>
 *   </header>
 * ---------------------------------------------------------------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding: var(--space-8) 0 var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-8);
}

.page-header > div:first-child {
    min-width: 0;
    flex: 1 1 320px;
}

.page-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.01em;
}

.page-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    line-height: var(--leading-relaxed);
    margin: 0;
    max-width: 60ch;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .page-header {
        padding: var(--space-5) 0 var(--space-4);
        margin-bottom: var(--space-5);
    }
    .page-title {
        font-size: var(--text-2xl);
    }
}


/* ----------------------------------------------------------------
 * SECTION CARD — surface for forms / tables / blocks of content
 *
 * Pages were repeatedly inlining the same `background: rgba(...);
 * border: 1px solid ...; padding: 1.5rem; border-radius: 16px;`
 * pattern. Use .section-card consistently instead.
 * ---------------------------------------------------------------- */
.section-card {
    background: var(--color-bg-glass);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    transition: border-color var(--transition-base);
}

.section-card:hover {
    border-color: var(--color-border);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.section-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}


/* ----------------------------------------------------------------
 * TOOLBAR / ACTION BAR — filters + bulk actions row above tables
 * ---------------------------------------------------------------- */
.toolbar,
.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}


/* ----------------------------------------------------------------
 * TABS — shared in-page tab strip
 * ---------------------------------------------------------------- */
.tabs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-5);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-base);
}

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

.tab.active,
.tab[aria-selected="true"] {
    color: var(--color-brand-primary);
    border-bottom-color: var(--color-brand-primary);
}

.tab .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-text-tertiary);
    background: rgba(71, 85, 105, 0.3);
    border-radius: var(--radius-full);
}

.tab.active .tab-count {
    color: #fff;
    background: var(--color-brand-primary);
}


/* ----------------------------------------------------------------
 * SEVERITY / THREAT-LEVEL CHIPS
 *
 * Rows in search_results.php, feed_items.php, dashboards, alerts,
 * etc. all render severity badges. They were styled inline with
 * one-off colors per page. .sev-* gives every surface the same
 * vocabulary so a "high" alert in the dashboard reads identically
 * to a "high" alert on a feed item.
 *
 * Mapping uses the values from CLAUDE.md's glossary:
 *   threat_level: none / low / medium / high / critical
 *   max_severity: informational / low / medium / high / critical
 *   alert_level:  info / warning / high / critical
 * ---------------------------------------------------------------- */
.sev-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: 0.6875rem;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    line-height: 1.4;
}

.sev-chip.sev-critical {
    color: #fecaca;
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(220, 38, 38, 0.4);
}

.sev-chip.sev-high {
    color: #fdba74;
    background: rgba(234, 88, 12, 0.18);
    border-color: rgba(234, 88, 12, 0.4);
}

.sev-chip.sev-medium,
.sev-chip.sev-warning {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
}

.sev-chip.sev-low {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
}

.sev-chip.sev-info,
.sev-chip.sev-informational,
.sev-chip.sev-none {
    color: var(--color-text-tertiary);
    background: rgba(100, 116, 139, 0.15);
    border-color: rgba(100, 116, 139, 0.3);
}


/* ----------------------------------------------------------------
 * FORM POLISH
 *
 * Tighter spacing for inline form rows + consistent help/error text.
 * ---------------------------------------------------------------- */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-help {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

.form-error {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: #fca5a5;
}

.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) {
    border-color: rgba(239, 68, 68, 0.5);
}

/* Input-prefixed controls (search bar, etc.) */
.input-group {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--color-border);
    background: rgba(30, 41, 59, 0.5);
    transition: all var(--transition-base);
}

.input-group:focus-within {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px var(--color-brand-primary-light);
}

.input-group > .form-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.input-group-prefix,
.input-group-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    color: var(--color-text-tertiary);
    background: rgba(15, 23, 42, 0.5);
    font-size: var(--text-sm);
}


/* ----------------------------------------------------------------
 * MODAL POLISH (additive — most modals already define their own
 * structure inline; this gives backdrop / shell / header / footer
 * a fallback when a page just uses the generic class names).
 * ---------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    /* The token --z-modal evaluates to 300 (modern.css) / 1000
       (shared/variables.css) depending on which file loads last, but
       includes/header.php and includes/navigation.php use 9999+ inline
       for the sticky header and dropdowns. Without an explicit override
       here, modal-backdrop sits BEHIND the nav — visible on events.php
       and reported by users. Pin the modal layer above the highest
       inline nav z-index. Tooltips bumped to match in modern.css if
       needed; see ordering convention in shared/variables.css. */
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal-shell {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: min(640px, 100%);
    width: 100%;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-shell .modal-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.modal-shell .modal-body {
    padding: var(--space-6);
    overflow-y: auto;
}

.modal-shell .modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    background: rgba(15, 23, 42, 0.4);
}


/* ----------------------------------------------------------------
 * DROPDOWN — shared row-level actions menu
 * ---------------------------------------------------------------- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: rgba(22, 30, 46, 0.98);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.dropdown.open > .dropdown-menu,
.dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--color-brand-primary-light);
    color: var(--color-text-primary);
}

.dropdown-item.danger {
    color: #fca5a5;
}

.dropdown-item.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fff;
}

.dropdown-divider {
    height: 1px;
    margin: var(--space-1) 0;
    background: var(--color-border-light);
}


/* ----------------------------------------------------------------
 * EMPTY-STATE — used on Reports / Saved / Watchlists when the user
 * has no data yet. Was being inlined per-page.
 * ---------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-tertiary);
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    background: var(--color-brand-primary-light);
    color: var(--color-brand-primary);
    border-radius: var(--radius-full);
}

.empty-state-title {
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.empty-state-message {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    max-width: 48ch;
    margin: 0 auto var(--space-5);
    line-height: var(--leading-relaxed);
}


/* ----------------------------------------------------------------
 * KEYBOARD-NAV FOCUS POLISH
 *
 * Stronger focus-visible ring for interactive surfaces that don't
 * fall under .btn (links inside the mega menu, action buttons on
 * dashboard cards, etc.).
 * ---------------------------------------------------------------- */
a:focus-visible,
.nav-link:focus-visible,
.mega-link:focus-visible,
.mobile-nav-link:focus-visible,
.tab:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ----------------------------------------------------------------
 * RESPONSIVE TWEAKS for the new shared classes
 * ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .section-card {
        padding: var(--space-4);
        border-radius: var(--radius-md);
    }

    .toolbar,
    .action-bar {
        padding: var(--space-3);
    }

    .modal-shell .modal-header,
    .modal-shell .modal-body {
        padding: var(--space-4);
    }
}

/* Reduced-motion: drop the shimmer / hover-lift effects entirely. */
@media (prefers-reduced-motion: reduce) {
    .btn::before,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-success:hover,
    .btn-danger:hover,
    .btn-warning:hover,
    .btn-info:hover,
    .stat-card:hover,
    .auth-link.register:hover {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}