/* ==========================================================================
   WONDER APP — VENDOR SECURITY
   File: /vendor_app/assets/css/security.css

   Scope:
   - Security dashboard
   - Change password
   - Two-factor authentication
   - Sessions
   - Devices
   - Login history
   - Security events
   - Trusted devices

   Depends on:
   - variables.css
   - reset.css
   - base.css
   - forms.css
   - buttons.css
   - cards.css
   - tables.css
   - modal.css
   - alerts.css
   - responsive.css

   IMPORTANT:
   This file intentionally avoids global element styling.
   ========================================================================== */


/* ==========================================================================
   1. SECURITY DESIGN TOKENS
   ========================================================================== */

.security-page {
    --security-primary: var(--primary-color, #2563eb);
    --security-primary-hover: var(--primary-hover, #1d4ed8);
    --security-primary-soft: var(--primary-soft, #eff6ff);

    --security-text: var(--text-primary, #111827);
    --security-text-secondary: var(--text-secondary, #4b5563);
    --security-text-muted: var(--text-muted, #6b7280);

    --security-bg: var(--bg-color, #f6f7fb);
    --security-surface: var(--surface-color, #ffffff);
    --security-card: var(--card-bg, #ffffff);

    --security-border: var(--border-color, #e5e7eb);
    --security-border-strong: var(--border-color-strong, #d1d5db);

    --security-success: var(--success-color, #16a34a);
    --security-success-soft: #ecfdf3;

    --security-warning: var(--warning-color, #d97706);
    --security-warning-soft: #fffbeb;

    --security-danger: var(--danger-color, #dc2626);
    --security-danger-soft: #fef2f2;

    --security-info: var(--info-color, #0284c7);
    --security-info-soft: #eff6ff;

    --security-purple: #7c3aed;
    --security-purple-soft: #f5f3ff;

    --security-radius-xs: var(--radius-xs, 4px);
    --security-radius-sm: var(--radius-sm, 6px);
    --security-radius-md: var(--radius-md, 10px);
    --security-radius-lg: var(--radius-lg, 14px);
    --security-radius-xl: var(--radius-xl, 18px);

    --security-shadow-sm:
        var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.05));

    --security-shadow-md:
        var(--shadow-md, 0 6px 20px rgba(15, 23, 42, 0.08));

    --security-shadow-lg:
        var(--shadow-lg, 0 14px 35px rgba(15, 23, 42, 0.12));

    --security-transition:
        var(--transition-normal, 180ms ease);

    --security-content-width: 1240px;

    min-width: 0;
}


/* ==========================================================================
   2. SECURITY PAGE SHELL
   ========================================================================== */

.security-page {
    width: 100%;
    min-height: 100%;
    color: var(--security-text);
}

.security-page *,
.security-page *::before,
.security-page *::after {
    box-sizing: border-box;
}

.security-container {
    width: min(100%, var(--security-content-width));
    margin: 0 auto;
    padding: 24px;
}

.security-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.security-header-content {
    min-width: 0;
}

.security-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--security-text);
}

.security-subtitle {
    margin: 7px 0 0;
    max-width: 720px;
    color: var(--security-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.security-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}


/* ==========================================================================
   3. SECURITY LAYOUT
   ========================================================================== */

.security-layout {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.security-sidebar {
    position: sticky;
    top: 20px;
    min-width: 0;
}

.security-nav {
    padding: 8px;
    background: var(--security-surface);
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-lg);
    box-shadow: var(--security-shadow-sm);
}

.security-nav-title {
    padding: 10px 12px 8px;
    color: var(--security-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.security-nav-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.security-nav-item {
    min-width: 0;
}

.security-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 11px;
    color: var(--security-text-secondary);
    text-decoration: none;
    border-radius: var(--security-radius-sm);
    transition:
        background-color var(--security-transition),
        color var(--security-transition);
}

.security-nav-link:hover {
    color: var(--security-text);
    background: var(--security-bg);
}

.security-nav-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: 2px;
}

.security-nav-item.is-active .security-nav-link {
    color: var(--security-primary);
    background: var(--security-primary-soft);
    font-weight: 600;
}

.security-nav-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.security-nav-icon svg,
.security-nav-icon img {
    width: 18px;
    height: 18px;
}

.security-nav-label {
    min-width: 0;
    flex: 1;
}

.security-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--security-danger-soft);
    color: var(--security-danger);
    font-size: 10px;
    font-weight: 700;
}

.security-main {
    min-width: 0;
}


/* ==========================================================================
   4. SECURITY SECTION
   ========================================================================== */

.security-section {
    min-width: 0;
    margin-bottom: 24px;
}

.security-section:last-child {
    margin-bottom: 0;
}

.security-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.security-section-heading {
    min-width: 0;
}

.security-section-title {
    margin: 0;
    color: var(--security-text);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
}

.security-section-description {
    margin: 5px 0 0;
    color: var(--security-text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.security-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* ==========================================================================
   5. SECURITY CARDS
   ========================================================================== */

.security-card {
    min-width: 0;
    background: var(--security-card);
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-lg);
    box-shadow: var(--security-shadow-sm);
}

.security-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--security-border);
}

.security-card-heading {
    min-width: 0;
}

.security-card-title {
    margin: 0;
    color: var(--security-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.security-card-description {
    margin: 5px 0 0;
    color: var(--security-text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.security-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.security-card-body {
    padding: 20px;
}

.security-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--security-border);
}


/* ==========================================================================
   6. SECURITY OVERVIEW
   ========================================================================== */

.security-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 20px;
    margin-bottom: 24px;
}

.security-overview-card {
    min-width: 0;
}


/* ==========================================================================
   7. SECURITY SCORE
   ========================================================================== */

.security-score-card {
    position: relative;
    overflow: hidden;
}

.security-score {
    display: flex;
    align-items: center;
    gap: 24px;
}

.security-score-ring {
    --security-score-percent: 82%;

    position: relative;
    flex: 0 0 104px;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--security-success) var(--security-score-percent),
            var(--security-border) 0
        );
}

.security-score-ring::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--security-card);
}

.security-score-value {
    position: relative;
    z-index: 1;
    color: var(--security-text);
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
}

.security-score-content {
    min-width: 0;
}

.security-score-title {
    margin: 0;
    color: var(--security-text);
    font-size: 16px;
    font-weight: 700;
}

.security-score-label {
    margin-top: 5px;
    color: var(--security-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.security-score-meta {
    margin-top: 10px;
    color: var(--security-text-muted);
    font-size: 12px;
}


/* ==========================================================================
   8. SECURITY STATUS
   ========================================================================== */

.security-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
}

.security-status::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}

.security-status.is-secure,
.security-status.is-success {
    color: var(--security-success);
    background: var(--security-success-soft);
}

.security-status.is-warning {
    color: var(--security-warning);
    background: var(--security-warning-soft);
}

.security-status.is-danger {
    color: var(--security-danger);
    background: var(--security-danger-soft);
}

.security-status.is-info {
    color: var(--security-info);
    background: var(--security-info-soft);
}

.security-status.is-neutral,
.security-status.is-muted {
    color: var(--security-text-muted);
    background: var(--security-bg);
}


/* ==========================================================================
   9. SECURITY CHECKLIST
   ========================================================================== */

.security-checklist {
    display: grid;
    gap: 10px;
}

.security-check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-md);
    background: var(--security-surface);
}

.security-check-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--security-bg);
    color: var(--security-text-muted);
}

.security-check.is-complete .security-check-icon {
    color: var(--security-success);
    background: var(--security-success-soft);
}

.security-check.is-warning .security-check-icon {
    color: var(--security-warning);
    background: var(--security-warning-soft);
}

.security-check-content {
    min-width: 0;
    flex: 1;
}

.security-check-title {
    margin: 0;
    color: var(--security-text);
    font-size: 13px;
    font-weight: 600;
}

.security-check-description {
    margin: 3px 0 0;
    color: var(--security-text-muted);
    font-size: 11px;
    line-height: 1.45;
}


/* ==========================================================================
   10. SECURITY ITEM LIST
   ========================================================================== */

.security-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.security-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--security-border);
}

.security-item:first-child {
    padding-top: 0;
}

.security-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.security-item-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--security-radius-md);
    background: var(--security-bg);
    color: var(--security-text-secondary);
}

.security-item.is-secure .security-item-icon {
    color: var(--security-success);
    background: var(--security-success-soft);
}

.security-item.is-warning .security-item-icon {
    color: var(--security-warning);
    background: var(--security-warning-soft);
}

.security-item.is-danger .security-item-icon {
    color: var(--security-danger);
    background: var(--security-danger-soft);
}

.security-item-content {
    min-width: 0;
    flex: 1;
}

.security-item-title {
    margin: 0;
    color: var(--security-text);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}

.security-item-description {
    margin: 3px 0 0;
    color: var(--security-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.security-item-action {
    flex: 0 0 auto;
}


/* ==========================================================================
   11. PASSWORD SECURITY
   ========================================================================== */

.security-password {
    max-width: 680px;
}

.security-password-strength {
    margin-top: 10px;
}

.security-password-strength-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.security-password-strength-label {
    color: var(--security-text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.security-password-strength-value {
    font-size: 11px;
    font-weight: 700;
}

.security-password-strength-value.is-weak {
    color: var(--security-danger);
}

.security-password-strength-value.is-medium {
    color: var(--security-warning);
}

.security-password-strength-value.is-strong {
    color: var(--security-success);
}

.security-password-meter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.security-password-meter span {
    height: 5px;
    border-radius: 999px;
    background: var(--security-border);
}

.security-password-meter.is-weak span:nth-child(1) {
    background: var(--security-danger);
}

.security-password-meter.is-medium span:nth-child(-n + 2) {
    background: var(--security-warning);
}

.security-password-meter.is-strong span:nth-child(-n + 4) {
    background: var(--security-success);
}

.security-password-requirements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    margin-top: 14px;
}

.security-password-requirement {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--security-text-muted);
    font-size: 11px;
}

.security-password-requirement::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.security-password-requirement.is-valid {
    color: var(--security-success);
}

.security-password-requirement.is-valid::before {
    background: currentColor;
    border-color: currentColor;
}


/* ==========================================================================
   12. TWO FACTOR AUTHENTICATION
   ========================================================================== */

.security-2fa {
    display: grid;
    gap: 20px;
}

.security-2fa-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-lg);
    background: var(--security-surface);
}

.security-2fa-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--security-radius-md);
    background: var(--security-primary-soft);
    color: var(--security-primary);
}

.security-2fa-content {
    min-width: 0;
    flex: 1;
}

.security-2fa-title {
    margin: 0;
    color: var(--security-text);
    font-size: 16px;
    font-weight: 700;
}

.security-2fa-description {
    margin: 5px 0 0;
    color: var(--security-text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.security-2fa-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.security-2fa-method {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-md);
    background: var(--security-surface);
    transition:
        border-color var(--security-transition),
        box-shadow var(--security-transition);
}

.security-2fa-method:hover {
    border-color: var(--security-border-strong);
    box-shadow: var(--security-shadow-sm);
}

.security-2fa-method.is-active {
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--security-primary-soft);
}

.security-2fa-method-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--security-radius-sm);
    background: var(--security-bg);
    color: var(--security-text-secondary);
}

.security-2fa-method-content {
    min-width: 0;
    flex: 1;
}

.security-2fa-method-title {
    margin: 0;
    color: var(--security-text);
    font-size: 13px;
    font-weight: 700;
}

.security-2fa-method-description {
    margin: 4px 0 0;
    color: var(--security-text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.security-2fa-method-status {
    margin-top: 8px;
}

.security-2fa-setup {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.security-2fa-qr {
    width: 180px;
    height: 180px;
    padding: 10px;
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-md);
}

.security-2fa-qr img,
.security-2fa-qr canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.security-2fa-code {
    max-width: 420px;
}

.security-2fa-backup {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-md);
    background: var(--security-bg);
}

.security-2fa-backup-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.security-2fa-backup-code {
    padding: 8px 10px;
    border: 1px dashed var(--security-border-strong);
    border-radius: var(--security-radius-sm);
    background: var(--security-surface);
    color: var(--security-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-align: center;
}


/* ==========================================================================
   13. SESSION MANAGEMENT
   ========================================================================== */

.security-sessions {
    display: grid;
    gap: 12px;
}

.security-session {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-md);
    background: var(--security-surface);
}

.security-session.is-current {
    border-color: rgba(22, 163, 74, 0.3);
    background: var(--security-success-soft);
}

.security-session-device {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--security-radius-md);
    background: var(--security-bg);
    color: var(--security-text-secondary);
}

.security-session-content {
    min-width: 0;
    flex: 1;
}

.security-session-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    color: var(--security-text);
    font-size: 13px;
    font-weight: 700;
}

.security-session-current {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--security-success-soft);
    color: var(--security-success);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.security-session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 5px;
    color: var(--security-text-muted);
    font-size: 11px;
}

.security-session-location {
    color: var(--security-text-secondary);
}

.security-session-time {
    color: var(--security-text-muted);
}

.security-session-action {
    flex: 0 0 auto;
}


/* ==========================================================================
   14. DEVICE MANAGEMENT
   ========================================================================== */

.security-devices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.security-device {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-md);
    background: var(--security-surface);
    transition:
        border-color var(--security-transition),
        box-shadow var(--security-transition);
}

.security-device:hover {
    border-color: var(--security-border-strong);
    box-shadow: var(--security-shadow-sm);
}

.security-device-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--security-radius-md);
    background: var(--security-bg);
    color: var(--security-text-secondary);
}

.security-device-content {
    min-width: 0;
    flex: 1;
}

.security-device-title {
    margin: 0;
    color: var(--security-text);
    font-size: 13px;
    font-weight: 700;
}

.security-device-meta {
    margin-top: 4px;
    color: var(--security-text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.security-device-status {
    margin-top: 8px;
}

.security-device-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}


/* ==========================================================================
   15. LOGIN HISTORY
   ========================================================================== */

.security-login-history {
    overflow: hidden;
}

.security-login-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.security-login-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.security-login-table th,
.security-login-table td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--security-border);
    text-align: left;
    vertical-align: middle;
}

.security-login-table th {
    color: var(--security-text-muted);
    background: var(--security-bg);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.security-login-table td {
    color: var(--security-text-secondary);
    font-size: 12px;
}

.security-login-table tbody tr:last-child td {
    border-bottom: 0;
}

.security-login-table tbody tr:hover {
    background: rgba(15, 23, 42, 0.015);
}

.security-login-device {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.security-login-device-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--security-radius-sm);
    background: var(--security-bg);
}

.security-login-device-info {
    min-width: 0;
}

.security-login-device-name {
    color: var(--security-text);
    font-weight: 600;
}

.security-login-device-detail {
    margin-top: 2px;
    color: var(--security-text-muted);
    font-size: 10px;
}


/* ==========================================================================
   16. SECURITY EVENTS
   ========================================================================== */

.security-events {
    display: grid;
    gap: 0;
}

.security-event {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 17px 0;
    border-bottom: 1px solid var(--security-border);
}

.security-event:first-child {
    padding-top: 0;
}

.security-event:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.security-event-icon {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--security-bg);
    color: var(--security-text-secondary);
}

.security-event.is-success .security-event-icon {
    color: var(--security-success);
    background: var(--security-success-soft);
}

.security-event.is-warning .security-event-icon {
    color: var(--security-warning);
    background: var(--security-warning-soft);
}

.security-event.is-danger .security-event-icon {
    color: var(--security-danger);
    background: var(--security-danger-soft);
}

.security-event-content {
    min-width: 0;
    flex: 1;
}

.security-event-title {
    margin: 0;
    color: var(--security-text);
    font-size: 13px;
    font-weight: 600;
}

.security-event-description {
    margin: 4px 0 0;
    color: var(--security-text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.security-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 7px;
    color: var(--security-text-muted);
    font-size: 10px;
}

.security-event-time {
    white-space: nowrap;
}


/* ==========================================================================
   17. TRUSTED DEVICES
   ========================================================================== */

.security-trusted-devices {
    display: grid;
    gap: 12px;
}

.security-trusted-device {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-md);
    background: var(--security-surface);
}

.security-trusted-device-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--security-radius-sm);
    background: var(--security-success-soft);
    color: var(--security-success);
}

.security-trusted-device-content {
    min-width: 0;
    flex: 1;
}

.security-trusted-device-title {
    margin: 0;
    color: var(--security-text);
    font-size: 12px;
    font-weight: 700;
}

.security-trusted-device-meta {
    margin-top: 3px;
    color: var(--security-text-muted);
    font-size: 10px;
}

.security-trusted-device-action {
    flex: 0 0 auto;
}


/* ==========================================================================
   18. SECURITY ALERT / NOTICE
   ========================================================================== */

.security-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-md);
    background: var(--security-bg);
}

.security-notice-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.security-notice-content {
    min-width: 0;
    flex: 1;
}

.security-notice-title {
    margin: 0;
    color: var(--security-text);
    font-size: 12px;
    font-weight: 700;
}

.security-notice-description {
    margin: 4px 0 0;
    color: var(--security-text-secondary);
    font-size: 11px;
    line-height: 1.55;
}

.security-notice.is-info {
    border-color: rgba(2, 132, 199, 0.2);
    background: var(--security-info-soft);
    color: var(--security-info);
}

.security-notice.is-success {
    border-color: rgba(22, 163, 74, 0.2);
    background: var(--security-success-soft);
    color: var(--security-success);
}

.security-notice.is-warning {
    border-color: rgba(217, 119, 6, 0.2);
    background: var(--security-warning-soft);
    color: var(--security-warning);
}

.security-notice.is-danger {
    border-color: rgba(220, 38, 38, 0.2);
    background: var(--security-danger-soft);
    color: var(--security-danger);
}


/* ==========================================================================
   19. RISK / THREAT CARD
   ========================================================================== */

.security-risk-card {
    border-left: 4px solid var(--security-warning);
}

.security-risk-card.is-low {
    border-left-color: var(--security-success);
}

.security-risk-card.is-medium {
    border-left-color: var(--security-warning);
}

.security-risk-card.is-high,
.security-risk-card.is-critical {
    border-left-color: var(--security-danger);
}

.security-risk {
    display: flex;
    align-items: center;
    gap: 14px;
}

.security-risk-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--security-warning-soft);
    color: var(--security-warning);
}

.security-risk-card.is-low .security-risk-icon {
    color: var(--security-success);
    background: var(--security-success-soft);
}

.security-risk-card.is-high .security-risk-icon,
.security-risk-card.is-critical .security-risk-icon {
    color: var(--security-danger);
    background: var(--security-danger-soft);
}

.security-risk-content {
    min-width: 0;
    flex: 1;
}

.security-risk-title {
    margin: 0;
    color: var(--security-text);
    font-size: 14px;
    font-weight: 700;
}

.security-risk-description {
    margin: 4px 0 0;
    color: var(--security-text-muted);
    font-size: 11px;
    line-height: 1.5;
}


/* ==========================================================================
   20. SECURITY ACTION GRID
   ========================================================================== */

.security-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.security-action {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 15px;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-md);
    background: var(--security-surface);
    transition:
        transform var(--security-transition),
        border-color var(--security-transition),
        box-shadow var(--security-transition);
}

.security-action:hover {
    color: inherit;
    transform: translateY(-1px);
    border-color: var(--security-border-strong);
    box-shadow: var(--security-shadow-sm);
}

.security-action:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: 2px;
}

.security-action-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--security-radius-sm);
    background: var(--security-primary-soft);
    color: var(--security-primary);
}

.security-action-content {
    min-width: 0;
}

.security-action-title {
    margin: 0;
    color: var(--security-text);
    font-size: 12px;
    font-weight: 700;
}

.security-action-description {
    margin: 4px 0 0;
    color: var(--security-text-muted);
    font-size: 10px;
    line-height: 1.5;
}


/* ==========================================================================
   21. SECURITY FORM SECTIONS
   ========================================================================== */

.security-form-section {
    max-width: 760px;
}

.security-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

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

.security-field-group {
    min-width: 0;
}

.security-field-label {
    display: block;
    margin-bottom: 7px;
    color: var(--security-text);
    font-size: 12px;
    font-weight: 600;
}

.security-field-help {
    margin-top: 5px;
    color: var(--security-text-muted);
    font-size: 10px;
    line-height: 1.5;
}

.security-field-error {
    margin-top: 5px;
    color: var(--security-danger);
    font-size: 10px;
    line-height: 1.4;
}

.security-required {
    color: var(--security-danger);
}


/* ==========================================================================
   22. INLINE VERIFICATION
   ========================================================================== */

.security-verification {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.security-verification-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.security-verification-text {
    min-width: 0;
    color: var(--security-text-muted);
    font-size: 11px;
}

.security-verification.is-verified {
    color: var(--security-success);
}

.security-verification.is-verified .security-verification-text {
    color: var(--security-success);
}

.security-verification.is-pending {
    color: var(--security-warning);
}

.security-verification.is-pending .security-verification-text {
    color: var(--security-warning);
}


/* ==========================================================================
   23. SECURITY TOGGLE
   ========================================================================== */

.security-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 44px;
    height: 24px;
    flex: 0 0 44px;
}

.security-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.security-toggle-slider {
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    border-radius: 999px;
    background: var(--security-border-strong);
    transition: background-color var(--security-transition);
}

.security-toggle-slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
    transition: transform var(--security-transition);
}

.security-toggle input:checked + .security-toggle-slider {
    background: var(--security-primary);
}

.security-toggle input:checked + .security-toggle-slider::after {
    transform: translateX(20px);
}

.security-toggle input:focus-visible + .security-toggle-slider {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: 2px;
}

.security-toggle input:disabled + .security-toggle-slider {
    cursor: not-allowed;
    opacity: 0.55;
}


/* ==========================================================================
   24. SECURITY CONFIRMATION
   ========================================================================== */

.security-confirm {
    text-align: center;
    padding: 10px 0;
}

.security-confirm-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--security-danger-soft);
    color: var(--security-danger);
}

.security-confirm-title {
    margin: 0;
    color: var(--security-text);
    font-size: 17px;
    font-weight: 700;
}

.security-confirm-description {
    max-width: 450px;
    margin: 7px auto 0;
    color: var(--security-text-secondary);
    font-size: 12px;
    line-height: 1.6;
}

.security-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
}


/* ==========================================================================
   25. DANGER ZONE
   ========================================================================== */

.security-danger-zone {
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: var(--security-radius-lg);
    background: var(--security-danger-soft);
}

.security-danger-zone-header {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(220, 38, 38, 0.15);
}

.security-danger-zone-title {
    margin: 0;
    color: var(--security-danger);
    font-size: 14px;
    font-weight: 700;
}

.security-danger-zone-description {
    margin: 4px 0 0;
    color: var(--security-text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

.security-danger-zone-body {
    padding: 18px;
}

.security-danger-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.security-danger-action + .security-danger-action {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(220, 38, 38, 0.15);
}

.security-danger-action-content {
    min-width: 0;
}

.security-danger-action-title {
    margin: 0;
    color: var(--security-text);
    font-size: 12px;
    font-weight: 700;
}

.security-danger-action-description {
    margin: 4px 0 0;
    color: var(--security-text-muted);
    font-size: 10px;
    line-height: 1.5;
}


/* ==========================================================================
   26. SECURITY FILTERS
   ========================================================================== */

.security-filters {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.security-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.security-filter-label {
    color: var(--security-text-muted);
    font-size: 10px;
    font-weight: 600;
}


/* ==========================================================================
   27. SECURITY EMPTY STATE
   ========================================================================== */

.security-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: 30px 20px;
    text-align: center;
}

.security-empty-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--security-success-soft);
    color: var(--security-success);
}

.security-empty-title {
    margin: 0;
    color: var(--security-text);
    font-size: 14px;
    font-weight: 700;
}

.security-empty-description {
    max-width: 430px;
    margin: 5px auto 0;
    color: var(--security-text-muted);
    font-size: 11px;
    line-height: 1.55;
}


/* ==========================================================================
   28. SECURITY LOADING / SKELETON
   ========================================================================== */

.security-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--security-bg);
    border-radius: var(--security-radius-sm);
}

.security-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.55),
        transparent
    );
    animation: securitySkeletonLoading 1.4s infinite;
}

.security-skeleton-line {
    height: 10px;
    margin-bottom: 8px;
}

.security-skeleton-line:last-child {
    margin-bottom: 0;
}

.security-skeleton-line.is-short {
    width: 45%;
}

.security-skeleton-line.is-medium {
    width: 70%;
}

.security-skeleton-line.is-full {
    width: 100%;
}

@keyframes securitySkeletonLoading {
    100% {
        transform: translateX(100%);
    }
}


/* ==========================================================================
   29. SECURITY PAGINATION
   ========================================================================== */

.security-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
}

.security-pagination-info {
    color: var(--security-text-muted);
    font-size: 10px;
}

.security-pagination-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}


/* ==========================================================================
   30. SECURITY FOOTER ACTION BAR
   ========================================================================== */

.security-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--security-border);
    border-radius: var(--security-radius-lg);
    box-shadow: var(--security-shadow-lg);
    backdrop-filter: blur(10px);
}

.security-action-bar-message {
    min-width: 0;
    color: var(--security-text-secondary);
    font-size: 11px;
}

.security-action-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* ==========================================================================
   31. SECURITY MOBILE CARD TABLE
   ========================================================================== */

.security-mobile-list {
    display: none;
}

.security-mobile-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--security-border);
}

.security-mobile-row:last-child {
    border-bottom: 0;
}

.security-mobile-label {
    color: var(--security-text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.security-mobile-value {
    margin-top: 4px;
    color: var(--security-text);
    font-size: 12px;
}


/* ==========================================================================
   32. SECURITY RESPONSIVE — LARGE TABLETS
   ========================================================================== */

@media (max-width: 1200px) {
    .security-container {
        padding: 20px;
    }

    .security-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 20px;
    }

    .security-overview {
        grid-template-columns: 1fr;
    }

    .security-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================================
   33. SECURITY RESPONSIVE — TABLETS
   ========================================================================== */

@media (max-width: 992px) {
    .security-container {
        padding: 18px;
    }

    .security-layout {
        grid-template-columns: 1fr;
    }

    .security-sidebar {
        position: static;
    }

    .security-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .security-nav-title {
        display: none;
    }

    .security-nav-list {
        flex-direction: row;
        min-width: max-content;
    }

    .security-nav-link {
        white-space: nowrap;
    }

    .security-2fa-methods,
    .security-devices {
        grid-template-columns: 1fr;
    }

    .security-2fa-setup {
        grid-template-columns: 1fr;
    }

    .security-2fa-qr {
        margin: 0 auto;
    }
}


/* ==========================================================================
   34. SECURITY RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .security-container {
        padding: 14px;
    }

    .security-header {
        flex-direction: column;
        margin-bottom: 18px;
    }

    .security-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .security-title {
        font-size: 22px;
    }

    .security-layout {
        gap: 16px;
    }

    .security-section {
        margin-bottom: 18px;
    }

    .security-section-header,
    .security-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .security-section-actions,
    .security-card-actions {
        justify-content: flex-start;
    }

    .security-card-body {
        padding: 16px;
    }

    .security-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .security-score {
        align-items: flex-start;
    }

    .security-password-requirements,
    .security-form-grid {
        grid-template-columns: 1fr;
    }

    .security-form-grid .is-full {
        grid-column: auto;
    }

    .security-action-grid {
        grid-template-columns: 1fr;
    }

    .security-session {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .security-session-action {
        width: 100%;
        padding-left: 59px;
    }

    .security-danger-action {
        flex-direction: column;
        align-items: stretch;
    }

    .security-action-bar {
        align-items: stretch;
        flex-direction: column;
        margin-top: 18px;
    }

    .security-action-bar-actions {
        width: 100%;
    }

    .security-action-bar-actions > * {
        flex: 1 1 auto;
    }

    .security-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================================
   35. SECURITY RESPONSIVE — SMALL MOBILE
   ========================================================================== */

@media (max-width: 576px) {
    .security-container {
        padding: 12px;
    }

    .security-title {
        font-size: 20px;
    }

    .security-subtitle {
        font-size: 12px;
    }

    .security-nav {
        margin-inline: -2px;
    }

    .security-nav-link {
        min-height: 38px;
        padding: 8px 9px;
        font-size: 11px;
    }

    .security-nav-icon {
        display: none;
    }

    .security-card {
        border-radius: var(--security-radius-md);
    }

    .security-card-header {
        padding: 15px;
    }

    .security-card-body {
        padding: 15px;
    }

    .security-score {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .security-score-content {
        width: 100%;
    }

    .security-2fa-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .security-2fa-backup-list {
        grid-template-columns: 1fr;
    }

    .security-item {
        align-items: flex-start;
    }

    .security-item-action {
        width: 100%;
        margin-top: 5px;
    }

    .security-item {
        flex-wrap: wrap;
    }

    .security-item-action {
        padding-left: 54px;
    }

    .security-session-device {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .security-session-action {
        padding-left: 52px;
    }

    .security-event {
        gap: 10px;
    }

    .security-event-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .security-trusted-device {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .security-trusted-device-action {
        width: 100%;
        padding-left: 52px;
    }
}


/* ==========================================================================
   36. DARK MODE
   ========================================================================== */

html[data-theme="dark"] .security-page,
.theme-dark .security-page,
[data-theme="dark"] .security-page {
    --security-text: #f3f4f6;
    --security-text-secondary: #d1d5db;
    --security-text-muted: #9ca3af;

    --security-bg: #111827;
    --security-surface: #182131;
    --security-card: #182131;

    --security-border: #2d3748;
    --security-border-strong: #3b475a;

    --security-primary-soft: rgba(37, 99, 235, 0.14);

    --security-success-soft: rgba(22, 163, 74, 0.13);
    --security-warning-soft: rgba(217, 119, 6, 0.13);
    --security-danger-soft: rgba(220, 38, 38, 0.13);
    --security-info-soft: rgba(2, 132, 199, 0.13);
    --security-purple-soft: rgba(124, 58, 237, 0.13);

    --security-shadow-sm:
        0 1px 2px rgba(0, 0, 0, 0.22);

    --security-shadow-md:
        0 6px 20px rgba(0, 0, 0, 0.24);

    --security-shadow-lg:
        0 14px 35px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .security-action-bar,
.theme-dark .security-action-bar,
[data-theme="dark"] .security-action-bar {
    background: rgba(24, 33, 49, 0.94);
}

html[data-theme="dark"] .security-2fa-qr,
.theme-dark .security-2fa-qr,
[data-theme="dark"] .security-2fa-qr {
    background: #ffffff;
}

html[data-theme="dark"] .security-login-table tbody tr:hover,
.theme-dark .security-login-table tbody tr:hover,
[data-theme="dark"] .security-login-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}


/* ==========================================================================
   37. HIGH CONTRAST / ACCESSIBILITY
   ========================================================================== */

@media (prefers-contrast: more) {
    .security-card,
    .security-nav,
    .security-session,
    .security-device,
    .security-action,
    .security-2fa-method {
        border-color: var(--security-text-muted);
    }

    .security-status {
        border: 1px solid currentColor;
    }

    .security-nav-item.is-active .security-nav-link {
        outline: 1px solid currentColor;
    }
}


/* ==========================================================================
   38. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .security-page *,
    .security-page *::before,
    .security-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ==========================================================================
   39. PRINT
   ========================================================================== */

@media print {
    .security-page {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .security-sidebar,
    .security-header-actions,
    .security-card-actions,
    .security-section-actions,
    .security-action-bar,
    .security-session-action,
    .security-device-actions,
    .security-trusted-device-action,
    .security-confirm-actions {
        display: none !important;
    }

    .security-layout {
        display: block;
    }

    .security-container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .security-card,
    .security-session,
    .security-device,
    .security-action,
    .security-2fa-method {
        box-shadow: none !important;
        break-inside: avoid;
    }

    .security-section {
        break-inside: avoid;
    }
}


/* ==========================================================================
   END OF security.css
   ========================================================================== */