/* =========================================================
   DAREF SECURITY CENTER + AUDIT INVESTIGATION
   Phase 11 / Phase 12
   ========================================================= */

:root {
    --soc-navy: #0B1623;
    --soc-navy-2: #12283A;
    --soc-blue: #0A5DAA;
    --soc-blue-soft: #E9F2FA;
    --soc-red: #8B1E2D;
    --soc-red-soft: #FAECEE;
    --soc-amber: #9B6811;
    --soc-amber-soft: #FFF2D8;
    --soc-green: #316B46;
    --soc-green-soft: #E9F3EC;
    --soc-border: #DCE3E9;
    --soc-muted: #687583;
    --soc-bg: #F4F6F9;
}


/* =========================================================
   SHARED
   ========================================================= */

.section-support-text {
    margin:
        5px 0 0;

    color:
        var(--soc-muted);

    font-size: 12px;

    line-height: 1.5;
}


.audit-filter-actions,
.soc-filter-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}


/* =========================================================
   SOC HERO
   ========================================================= */

.soc-hero {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 26px;

    margin-bottom: 14px;

    padding: 26px 28px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--soc-navy),
            var(--soc-navy-2)
        );

    color: #FFFFFF;

    box-shadow:
        0 8px 24px
        rgba(
            11,
            22,
            35,
            0.12
        );
}


.soc-hero-copy {
    min-width: 0;

    max-width: 720px;
}


.soc-eyebrow {
    margin: 0 0 7px;

    color: #8EC3F0;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.13em;
}


.soc-hero h2 {
    margin: 0 0 8px;

    color: #FFFFFF;

    font-size: 25px;

    line-height: 1.2;
}


.soc-hero p {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 13px;

    line-height: 1.6;
}


.soc-state-block {
    min-width: 165px;

    padding: 17px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 12px;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    text-align: center;
}


.soc-state-block span {
    display: block;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.soc-state-block strong {
    display: block;

    margin-top: 5px;

    color: #FFFFFF;

    font-size: 21px;
}


.soc-state-critical {
    border-left:
        5px solid
        var(--soc-red);
}


.soc-state-elevated {
    border-left:
        5px solid
        #B74831;
}


.soc-state-watch {
    border-left:
        5px solid
        #D1992F;
}


.soc-state-normal {
    border-left:
        5px solid
        var(--soc-blue);
}


.soc-boundary-note {
    margin-bottom: 17px;

    padding: 12px 15px;

    border:
        1px solid
        #D7E6F3;

    border-left:
        4px solid
        var(--soc-blue);

    border-radius: 10px;

    background:
        var(--soc-blue-soft);

    color: #405A70;

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   SOC KPI
   ========================================================= */

.soc-kpi-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 12px;

    margin-bottom: 18px;
}


.soc-kpi-card {
    min-width: 0;

    padding: 17px;

    border:
        1px solid
        var(--soc-border);

    border-top:
        3px solid
        var(--soc-blue);

    border-radius: 12px;

    background: #FFFFFF;
}


.soc-kpi-card.critical {
    border-top-color:
        var(--soc-red);
}


.soc-kpi-card.high {
    border-top-color:
        #B74831;
}


.soc-kpi-card.medium {
    border-top-color:
        #D1992F;
}


.soc-kpi-card span {
    display: block;

    color:
        var(--soc-muted);

    font-size: 11px;

    font-weight: 700;

    line-height: 1.35;
}


.soc-kpi-card strong {
    display: block;

    margin-top: 8px;

    color:
        var(--soc-navy);

    font-size: 25px;
}


/* =========================================================
   SOC TOOL NAV
   ========================================================= */

.soc-tool-nav {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 15px;

    padding: 8px;

    border:
        1px solid
        var(--soc-border);

    border-radius: 11px;

    background: #FFFFFF;
}


.soc-tool-link {
    display: inline-flex;

    align-items: center;

    min-height: 35px;

    padding:
        7px 12px;

    border-radius: 8px;

    color:
        #526170;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;
}


.soc-tool-link:hover,
.soc-tool-link.active {
    background:
        var(--soc-blue);

    color: #FFFFFF;
}


/* =========================================================
   FILTERS
   ========================================================= */

.soc-filter-card,
.audit-filter-card {
    margin-bottom: 18px;

    padding: 16px;

    border:
        1px solid
        var(--soc-border);

    border-radius: 13px;

    background: #FFFFFF;
}


.soc-filter-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 10px;
}


.soc-search-wide {
    grid-column:
        span 2;
}


.audit-filter-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 10px;
}


.audit-search-wide {
    grid-column:
        span 2;
}


/* =========================================================
   SOC TABLE
   ========================================================= */

.soc-alert-table td {
    vertical-align: middle;
}


.soc-incident-cell {
    min-width: 230px;
}


.soc-incident-cell strong {
    display: block;

    color:
        var(--soc-navy);

    font-size: 12px;

    line-height: 1.4;
}


.soc-incident-cell span {
    display: block;

    margin-top: 4px;

    color:
        var(--soc-muted);

    font-size: 11px;

    line-height: 1.45;
}


.soc-type-text {
    font-size: 11px;

    font-weight: 700;
}


.soc-path-cell {
    max-width: 220px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;
}


.soc-result-count {
    display: inline-flex;

    padding:
        6px 10px;

    border-radius: 999px;

    background:
        #EFF2F5;

    color:
        #5E6C79;

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   SOC BADGES
   ========================================================= */

.soc-severity,
.soc-status,
.audit-category {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 25px;

    padding:
        4px 8px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 800;

    white-space: nowrap;
}


.soc-severity-critical {
    background:
        var(--soc-red);

    color: #FFFFFF;
}


.soc-severity-high {
    background:
        #F5DCD9;

    color:
        #9B3326;
}


.soc-severity-medium {
    background:
        var(--soc-amber-soft);

    color:
        var(--soc-amber);
}


.soc-severity-low {
    background:
        #E8EEF3;

    color:
        #4B6478;
}


.soc-status-open {
    background:
        var(--soc-red-soft);

    color:
        var(--soc-red);
}


.soc-status-acknowledged {
    background:
        var(--soc-blue-soft);

    color:
        var(--soc-blue);
}


.soc-status-closed {
    background:
        #ECEFF1;

    color:
        #5B6570;
}


.soc-occurrence-badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 31px;

    min-height: 27px;

    padding:
        3px 7px;

    border-radius: 8px;

    background:
        #EFF2F5;

    color:
        var(--soc-navy);

    font-size: 11px;

    font-weight: 800;
}


/* =========================================================
   SOC ANALYSIS CARDS
   ========================================================= */

.soc-analysis-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 17px;

    margin-bottom: 18px;
}


.soc-analysis-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--soc-border);

    border-radius: 14px;

    background: #FFFFFF;
}


.soc-analysis-card > header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    min-height: 79px;

    padding:
        17px 20px;

    border-bottom:
        1px solid
        var(--soc-border);
}


.soc-analysis-card header h3 {
    margin:
        4px 0 0;

    font-size: 17px;

    line-height: 1.3;
}


.soc-analysis-body {
    padding:
        4px 20px 10px;
}


.soc-analysis-item {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 68px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        #EDF0F2;

    color:
        inherit;

    text-decoration: none;
}


.soc-analysis-item:last-child {
    border-bottom: 0;
}


.soc-analysis-item-link:hover {
    color:
        var(--soc-blue);
}


.soc-analysis-main {
    min-width: 0;

    flex: 1 1 auto;
}


.soc-analysis-main strong {
    display: block;

    overflow-wrap: anywhere;

    color:
        var(--soc-navy);

    font-size: 13px;

    line-height: 1.4;
}


.soc-analysis-main span {
    display: block;

    margin-top: 4px;

    color:
        var(--soc-muted);

    font-size: 11px;

    line-height: 1.45;
}


.soc-analysis-number {
    flex:
        0 0 auto;

    min-width: 78px;

    text-align: right;
}


.soc-analysis-number strong {
    display: block;

    color:
        var(--soc-navy);

    font-size: 19px;
}


.soc-analysis-number span {
    display: block;

    margin-top: 2px;

    color:
        var(--soc-muted);

    font-size: 10px;
}


.soc-card-header-with-action {
    align-items: center !important;
}


/* =========================================================
   AUDIT LIST
   ========================================================= */

.audit-kpi-grid {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(
                0,
                1fr
            )
        );

    gap: 10px;

    margin-bottom: 15px;
}


.audit-kpi-card {
    padding: 14px;

    border:
        1px solid
        var(--soc-border);

    border-radius: 11px;

    background: #FFFFFF;
}


.audit-kpi-card.audit-risk {
    border-top:
        3px solid
        var(--soc-red);
}


.audit-kpi-card span {
    display: block;

    color:
        var(--soc-muted);

    font-size: 10px;

    font-weight: 700;
}


.audit-kpi-card strong {
    display: block;

    margin-top: 6px;

    color:
        var(--soc-navy);

    font-size: 20px;
}


.audit-limit-note {
    margin-bottom: 15px;

    padding:
        11px 14px;

    border-left:
        4px solid
        var(--soc-blue);

    border-radius: 9px;

    background:
        var(--soc-blue-soft);

    color:
        #405A70;

    font-size: 11px;
}


.audit-table td {
    vertical-align: middle;
}


.audit-time-cell {
    white-space: nowrap;
}


.audit-user-name {
    color:
        var(--soc-navy);

    font-size: 11px;
}


.audit-details-preview {
    max-width: 280px;

    color:
        #596877;

    font-size: 11px;

    line-height: 1.45;
}


.audit-ip-badge {
    display: inline-flex;

    padding:
        5px 8px;

    border-radius: 8px;

    background:
        var(--soc-blue-soft);

    color:
        var(--soc-blue);

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;
}


.audit-ip-badge:hover {
    background:
        var(--soc-blue);

    color: #FFFFFF;
}


/* =========================================================
   AUDIT CATEGORY BADGES
   ========================================================= */

.audit-category-auth {
    background:
        #E7EEF4;

    color:
        #3B566C;
}


.audit-category-access,
.audit-category-security {
    background:
        var(--soc-red-soft);

    color:
        var(--soc-red);
}


.audit-category-data {
    background:
        var(--soc-blue-soft);

    color:
        var(--soc-blue);
}


.audit-category-user_admin {
    background:
        #EEE8F7;

    color:
        #64488A;
}


.audit-category-export {
    background:
        var(--soc-green-soft);

    color:
        var(--soc-green);
}


.audit-category-backup,
.audit-category-other {
    background:
        #EFF1F3;

    color:
        #59636D;
}


/* =========================================================
   AUDIT INVESTIGATION DETAIL
   ========================================================= */

.audit-investigation-hero {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 17px;

    padding: 22px;

    border:
        1px solid
        var(--soc-border);

    border-left:
        5px solid
        var(--soc-red);

    border-radius: 14px;

    background: #FFFFFF;
}


.audit-investigation-hero h2 {
    margin:
        4px 0 6px;

    color:
        var(--soc-navy);

    font-size: 22px;
}


.audit-investigation-hero p {
    margin: 0;

    color:
        var(--soc-muted);

    font-size: 12px;
}


.audit-investigation-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}


.audit-event-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 11px;

    margin-bottom: 18px;
}


.audit-event-card {
    min-width: 0;

    padding: 15px;

    border:
        1px solid
        var(--soc-border);

    border-radius: 11px;

    background: #FFFFFF;
}


.audit-event-card span {
    display: block;

    color:
        var(--soc-muted);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}


.audit-event-card strong {
    display: block;

    margin-top: 7px;

    overflow-wrap: anywhere;

    color:
        var(--soc-navy);

    font-size: 13px;
}


.audit-detail-fields {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 11px;

    padding: 18px;
}


.audit-detail-field {
    min-width: 0;

    padding: 15px;

    border:
        1px solid
        var(--soc-border);

    border-radius: 10px;

    background:
        #FAFBFC;
}


.audit-detail-label {
    display: block;

    margin-bottom: 7px;

    color:
        var(--soc-muted);

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


.audit-detail-value {
    display: block;

    overflow-wrap: anywhere;

    color:
        var(--soc-navy);

    font-size: 13px;

    line-height: 1.5;
}


.audit-value-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.audit-value-tag {
    display: inline-flex;

    padding:
        5px 8px;

    border:
        1px solid
        #CEE0EE;

    border-radius: 8px;

    background:
        var(--soc-blue-soft);

    color:
        #315D80;

    font-size: 10px;

    font-weight: 700;
}


.audit-readable-block {
    white-space: pre-wrap;

    overflow-wrap: anywhere;

    color:
        var(--soc-navy);

    font-size: 12px;

    line-height: 1.55;
}


.audit-empty-details {
    grid-column:
        1 / -1;

    padding: 18px;

    color:
        var(--soc-muted);

    text-align: center;
}


.audit-technical-details {
    overflow: hidden;

    border:
        1px solid
        var(--soc-border);

    border-radius: 11px;

    background: #FFFFFF;
}


.audit-technical-details summary {
    padding: 14px 16px;

    cursor: pointer;

    color:
        var(--soc-navy);

    font-size: 12px;

    font-weight: 800;
}


.audit-technical-note {
    padding:
        11px 16px;

    border-top:
        1px solid
        var(--soc-border);

    background:
        #F7F9FA;

    color:
        var(--soc-muted);

    font-size: 11px;

    line-height: 1.5;
}


.audit-json-block {
    margin: 0;

    padding: 17px;

    overflow-x: auto;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

    background:
        var(--soc-navy);

    color: #DBE8F1;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

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


    .audit-kpi-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .soc-filter-grid,
    .audit-filter-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


@media (max-width: 900px) {

    .soc-analysis-grid {
        grid-template-columns:
            1fr;
    }


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

}


@media (max-width: 700px) {

    .soc-hero,
    .audit-investigation-hero {
        align-items: stretch;

        flex-direction: column;
    }


    .soc-state-block {
        width: 100%;
    }


    .soc-filter-grid,
    .audit-filter-grid {
        grid-template-columns:
            1fr;
    }


    .soc-search-wide,
    .audit-search-wide {
        grid-column: auto;
    }


    .audit-kpi-grid,
    .soc-kpi-grid,
    .audit-event-grid,
    .audit-detail-fields {
        grid-template-columns:
            1fr;
    }


    .audit-filter-actions,
    .soc-filter-actions {
        flex-wrap: wrap;
    }

}