*, body {
    margin: 0
}

.btn-primary:hover, .danger-card:hover, .delete-btn:hover, .warning-btn:hover {
    transform: translateY(-1px)
}

.theme-dark .danger-zone-container, [data-bs-theme=dark] .danger-zone-container, body[data-theme=dark] .danger-zone-container, html[class*=dark] .danger-zone-container {
    --danger-zone-bg: #2d3748;
    --danger-zone-border: #4a5568;
    --danger-zone-text: #e2e8f0;
    --danger-text-muted: #a0aec0;
    --danger-card-bg: #1a202c;
    --danger-card-border: #4a5568;
    --danger-card-shadow: rgba(0, 0, 0, .2);
    --danger-card-shadow-hover: rgba(0, 0, 0, .3)
}

.danger-btn, .edit-link, a {
    text-decoration: none
}

.card-cahrt .header-card .icon, .chart .header-card .icon, .danger-btn, .introjs-skipbutton, .sortable, .tab, a {
    cursor: pointer
}

* {
    padding: 0;
    box-sizing: border-box
}

body, html {
    height: 100%;
    margin: 0
}

body {
    background-color: #0e1016;
    color: #fff;
    overflow-x: hidden
}

.introjs-tooltip {
    background-color: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
    border-radius: 8px;
    max-width: 600px;
    width: auto !important;
    white-space: normal
}

.introjs-tooltip .introjs-tooltip-title, .tab.active {
    color: #fff
}

.introjs-helperLayer {
    background: rgba(0, 0, 0, .7);
    border: none
}

.introjs-arrow {
    border-color: #1e293b
}

.introjs-button {
    background-color: #2563eb;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px
}

.introjs-progress {
    background-color: #334155
}

.introjs-progressbar {
    background-color: #2563eb
}

.intro-highlight {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .5);
    border-radius: 4px
}

.introjs-skipbutton {
    position: absolute;
    top: 6px;
    right: 10px;
    background: 0 0;
    border: none;
    color: #fff;
    font-weight: 600
}

.introjs-tooltiptext {
    min-width: 500px !important;
    max-width: 600px !important;
    white-space: normal !important
}

.introjs-helperNumberLayer {
    display: flex;
    align-items: center;
    justify-content: center
}

.introjs-disabled.introjs-prevbutton, .sidebar-item:hover .sidebar-item__tooltip, .sidebar-item__tooltip {
    display: none !important
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 20px
}

html[data-bs-theme=dark] ::-webkit-scrollbar-track {
    background: #141923;
    border-radius: 8px
}

html[data-bs-theme=light] ::-webkit-scrollbar-track {
    border-radius: 8px
}

html[data-bs-theme=dark] ::-webkit-scrollbar-thumb {
    background: rgba(21, 19, 33, .83);
    border-radius: 8px
}

html[data-bs-theme=light] ::-webkit-scrollbar-thumb {
    border-radius: 8px
}

html[data-bs-theme=dark] ::-webkit-scrollbar-thumb:hover {
    background: rgba(21, 19, 33, .83)
}



#termsModal, #termsModal .modal-backdrop {
    pointer-events: all !important
}

.login-page, .reactivation-request-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #4f46e5, #0ea5e9)
}

.login-wrapper {
    max-width: 520px;
    width: 100%;
    background: rgba(17, 24, 39, .85);
    border-radius: .75rem;
    padding: 3rem 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .2)
}

.login-logo {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
    padding: 1.25rem;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .2)
}

.reactivation-request-wrapper {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
    background: rgba(17, 24, 39, .85);
    border-radius: .75rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(55, 65, 81, .3);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)
}

.reactivation-request-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem
}

.form-control {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    border-radius: .5rem;
    padding: .75rem 1rem
}

.btn-outline-light, .btn-primary {
    padding: .75rem 1.5rem;
    transition: .3s
}

.form-control:focus {
    background: rgba(255, 255, 255, .15);
    border-color: #4f46e5;
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .25)
}

.form-control::placeholder {
    color: rgba(255, 255, 255, .7)
}

.form-label {
    color: #e5e7eb;
    font-weight: 500;
    margin-bottom: .5rem
}

.btn-primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border: none;
    border-radius: .5rem;
    font-weight: 600
}

.btn-primary:hover {
    background: linear-gradient(135deg, #3730a3, #6d28d9);
    box-shadow: 0 4px 8px rgba(79, 70, 229, .3)
}

.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, .3);
    color: #e5e7eb;
    border-radius: .5rem;
    font-weight: 500
}

.danger-title, .faq-chat strong {
    font-weight: 600
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
    color: #fff
}

.alert-success {
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .3);
    color: #86efac;
    border-radius: .5rem
}

.text-primary {
    color: #60a5fa !important
}

.text-success {
    color: #34d399 !important
}

.text-light {
    color: #d1d5db !important
}

.dark-swal-title, .text-white {
    color: #fff !important
}

.is-invalid {
    border-color: #f87171 !important;
    background: rgba(239, 68, 68, .1)
}

.logo-container {
    margin-bottom: 1.5rem
}

.logo-image {
    width: 60px;
    height: 60px;
    object-fit: contain
}

.edit-link:hover, .faq-chat u {
    text-decoration: underline
}

.faq-chat br {
    line-height: 1.25rem
}

.custom-card {
    background: #1e1e2d;
    border: 1px solid #2d2d42;
    border-radius: 8px;
    width: 100% !important;
    padding: 0 20px
}

#n8n-chat {
    max-width: 600px;
    margin: 0 auto
}

.loading-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 50px 0;
    background: rgba(137, 137, 137, .28);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999
}

.loading-overlay .spinner-border {
    position: relative;
    z-index: 1000
}

.v1 {
    border-left: 1px solid grey;
    overflow-y: hidden;
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    top: 0
}

.danger-zone-container {
    padding: 25px;
    border-top: 1px solid var(--danger-zone-border, #e2e8f0);
    margin-top: 2rem;
    color: var(--danger-zone-text, #4a5568)
}

.danger-icon, .danger-title {
    color: var(--danger-icon-color, #e53e3e)
}

.danger-zone-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px
}

.danger-icon {
    font-size: 24px;
    margin-right: 12px
}

.danger-title {
    font-size: 18px;
    margin: 0
}

.danger-description {
    font-size: 14px;
    color: var(--danger-text-muted, #718096);
    margin-bottom: 25px;
    line-height: 1.5
}

.danger-zone-cards {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.danger-card {
    background: var(--danger-card-bg, #fff);
    border: 1px solid var(--danger-card-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    overflow: hidden;
    transition: .2s;
    position: relative
}

.danger-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, .1)
}

.danger-card-body {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.danger-card-content {
    flex: 1
}

.danger-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px
}

.danger-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 18px
}

.warning-card .danger-card-icon {
    background: rgba(237, 137, 54, .1);
    color: #ed8936
}

.danger-card-delete .danger-card-icon {
    background: rgba(229, 62, 62, .1);
    color: #e53e3e
}

.danger-card-title {
    font-weight: 600;
    font-size: 16px;
    margin: 0;
    color: var(--danger-zone-text, #374151)
}

.danger-card-description {
    font-size: 14px;
    color: var(--text-muted, #6b7280);
    margin: 0;
    line-height: 1.5
}

.danger-card-action {
    flex-shrink: 0
}

.badge, .danger-btn {
    align-items: center
}

.danger-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    border: none;
    transition: .2s;
    display: inline-flex;
    gap: 8px
}

.warning-btn {
    background: #ed8936;
    color: #fff;
    border: 1px solid #ed8936
}

.warning-btn:hover {
    background: #dd7324;
    border-color: #dd7324;
    color: #fff
}

.delete-btn {
    background: #e53e3e;
    color: #fff;
    border: 1px solid #e53e3e
}

.delete-btn:hover {
    background: #c53030;
    border-color: #c53030;
    color: #fff
}

.theme-dark .danger-zone-container, [data-bs-theme=dark] .danger-zone-container {
    --danger-icon-color: #fc8181;
    --warning-color: #ed8936;
    --danger-color: #f56565;
    --success-color: #68d391;
    --warning-text-color: #ed8936;
    --danger-text-color: #f56565;
    --warning-btn-bg: #ed8936;
    --warning-btn-hover: #dd7324;
    --warning-btn-border: #ed8936;
    --warning-btn-border-hover: #dd7324;
    --danger-btn-bg: #f56565;
    --danger-btn-hover: #e53e3e;
    --danger-btn-border: #f56565;
    --danger-btn-border-hover: #e53e3e;
    --warning-btn-text: #fff;
    --danger-btn-text: #fff
}

@media (max-width: 768px) {
    .danger-card-body {
        flex-direction: column;
        align-items: flex-start;
        text-align: left
    }

    .alerts .left-alert, .alerts .right-alert, .card, .chart, .danger-card-action, .sidebar-item.log-out img {
        width: 100%
    }

    .danger-btn {
        width: 100%;
        justify-content: center
    }

    .danger-zone-cards {
        grid-template-columns:1fr;
        gap: 15px
    }

    .danger-zone-container {
        padding: 20px 15px
    }

    .danger-card-body {
        padding: 15px
    }

    .danger-title {
        font-size: 18px
    }

    .danger-icon {
        font-size: 24px
    }

    .header {
        flex-flow: column;
        grid-gap: 0;
        align-items: start
    }

    .header h1 {
        margin-left: 0
    }

    .header.fixed-top {
        left: 0
    }

    .cards, .charts {
        flex-flow: column;
        grid-gap: 15px
    }






    .main-content {
        overflow-x: auto;
        padding-top: 100px
    }

    .config-table td, .config-table th {
        padding: 8px
    }

    .config-table th {
        font-size: 14px
    }

    .config-table td {
        font-size: 12px
    }

    .alerts, .profile-forms {
        flex-flow: column
    }

    .profile-forms > div {
        width: 100%;
        border-right: none !important
    }

    .profile-forms .profile-info-form {
        padding: 0
    }

    .booster {
        width: 100%;
        position: unset;
        background: 0 0;
        height: 60px
    }

    .profile-header {
        flex-wrap: wrap
    }

    .main-content .header h1, .main-content .header-alert h1 {
        font-size: 28px;
        margin-bottom: 10px;
        line-height: 1.2
    }

    .profile-header .d-flex {
        flex-flow: column;
        grid-gap: 15px;
        margin-top: 15px;
        align-items: start
    }

    .profile-forms .password-change-form {
        padding-left: 0
    }
}

@media (max-width: 480px) {
    .danger-zone-container {
        padding: 15px 10px;
        margin-left: -10px;
        margin-right: -10px;
        border-radius: 8px
    }

    .danger-card-body {
        padding: 12px
    }

    .danger-btn {
        padding: 10px 16px;
        font-size: 13px
    }
}

.dashboard {
    display: block;
    min-height: 100%
}

.user-management {
    margin-top: 20px;
    padding: 20px
}

.badge {
    display: flex
}

:root {
    --primary: #4f46e5;
    --glass-bg-dark: rgba(18, 18, 18, .65);
    --glass-bg-light: rgba(255, 255, 255, .65);
    --primary: #4f46e5;
    --glass-bg-dark: rgba(18, 18, 18, .65);
    --glass-bg-light: rgba(255, 255, 255, .65)
}

html[data-bs-theme=light] {
    --bs-body-bg: #f8fafc;
    --bs-body-color: #1e293b;
    --bs-border-color: #e4e7eb;
    --bs-primary: #4f46e5;
    --light-bg: #f8fafc;
    --light-surface-1: #ffffff;
    --light-surface-2: #f1f5f9;
    --light-surface-3: #e9eef5;
    --light-border: #e4e7eb;
    --light-text: #0f172a;
    --light-text-muted: #475569;
    --light-muted: #f8fafc;
    --bs-body-bg: #f8fafc;
    --bs-body-color: #1e293b;
    --bs-border-color: #e4e7eb;
    --bs-primary: #4f46e5;
    --glass-bg: var(--glass-bg-light);
    --text-color: #1e293b
}



html[data-bs-theme=light] .sidebar-tooltip {
    background: #111827 !important;
    color: #fff !important
}

html[data-bs-theme=light] .input-group .input-group-text {
    background: var(--light-surface-2) !important;
    border: 1px solid var(--light-border) !important;
    color: var(--light-text-muted) !important
}

html[data-bs-theme=light] .sort-icon {
    color: var(--light-text-muted) !important;
    font-size: .95rem !important
}



html[data-bs-theme=light] .dashboard-header button[aria-label="Toggle Theme"]:focus-visible {
    outline: #93c5fd solid 2px;
    outline-offset: 2px;
    border-radius: 6px
}

html[data-bs-theme=light] .btn-outline-light {
    color: #334155 !important;
    border-color: #cbd5e1 !important
}

html[data-bs-theme=light] .btn-outline-light:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important
}

html[data-bs-theme=light] .statistics-row {
    background: var(--light-surface-1) !important;
    border-color: var(--light-border) !important
}

html[data-bs-theme=dark] {
    --dark-bg: #121721 !important;
    --dark-surface-1: #121721;
    --dark-surface-2: #1B1F2A;
    --dark-surface-3: #1F232E;
    --phishing-surface: #121212;
    --phishing-surface-alt: #181818;
    --dark-border: #1F232E;
    --dark-border-soft: #1F232E;
    --dark-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .35);
    --dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --dark-shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, .03);
    --dark-hover: #1B1F2A;
    --dark-active: #1F232E;
    --glass-bg: var(--glass-bg-dark);
    --text-color: #f1f5f9
}



html[data-bs-theme=dark] .card.elevated, html[data-bs-theme=dark] .dropdown-menu, html[data-bs-theme=dark] .modal-content, html[data-bs-theme=dark] .offcanvas {
    box-shadow: var(--dark-shadow)
}







html[data-bs-theme=dark] .input-group-dark .form-control, html[data-bs-theme=dark] .input-group-dark .input-group-text {
    background: var(--dark-surface-2) !important;
    border: 1px solid var(--dark-border) !important;
    color: #eee !important
}

html[data-bs-theme=dark] .phishing-scope .cards-header, html[data-bs-theme=dark] .phishing-scope .statistics-row, html[data-bs-theme=dark] .phishing-scope .threat-card {
    background: var(--phishing-surface-alt) !important
}

html[data-bs-theme=dark] .phishing-scope .threat-card {
    border-color: rgba(255, 255, 255, .07) !important
}

html[data-bs-theme=dark] .phishing-scope .cards-header, html[data-bs-theme=dark] .phishing-scope .statistics-row {
    border-color: rgba(255, 255, 255, .08) !important
}

html[data-bs-theme=dark] .phishing-scope .threat-card:hover {
    background: #1f1f1f !important
}

html[data-bs-theme=dark] #dashboardHeader.header.fixed-top, html[data-bs-theme=dark] .header, html[data-bs-theme=dark] header {
    background: var(--dark-bg) !important;
    box-shadow: none !important;
    border: none !important
}

.main-content {
    margin-left: 55px;
    width: calc(100% - 55px)
}

.main-content.content-expanded {
    margin-left: 320px !important;
    width: calc(100% - 320px) !important
}

#dashboardHeader.header.fixed-top {
    left: 55px;
    width: calc(100% - 55px);
    z-index: 1050;
    min-height: 60px;
    display: flex;
    align-items: center;
    background: var(--dark-bg, #212121) !important
}

#dashboardHeader.header-expanded {
    left: 320px !important;
    width: calc(100% - 320px) !important
}

body.sidebar-animating #dashboardHeader.header.fixed-top, body.sidebar-animating .main-content {
    transition: margin-left .28s cubic-bezier(.4, 0, .2, 1), left .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1)
}

#dashboardHeader .header-actions {
    white-space: nowrap;
    overflow: visible
}

#dashboardHeader h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%
}

.time-period {
    font-size: 14px
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px
}

.header .notification-bell i {
    font-size: 24px;
    color: #fff
}

.header .notification-bell .badge, .sort-icon {
    font-size: .75rem
}

.header .theme-icon, .header .user-icon {
    font-size: 24px;
    padding: 4px
}

.header .user-icon {
    margin-left: 4px
}

.header .header-actions {
    margin-top: 0;
    justify-content: flex-end
}

.main-content .header h1, .main-content .header-alert h1 {
    font-size: 32px;
    margin-bottom: 10px
}

.cards {
    display: flex;
    justify-content: space-between;
    margin-top: 40px
}

.charts {
    margin-top: 20px
}

.card {
    border: .87px solid #fff3;
    color: #fff;
    padding: 15px;
    width: 24%;
    text-align: center
}

.card .header-card, .chart .header-card, .dashboard-card .header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.dashboard-card .header-card span {
    font-size: 12px;
    color: inherit
}

.dashboard-card .header-card i {
    color: #0d6efd
}

.card .header-card h2, .chart .header-card h2, .dashboard-card .header-card h2 {
    font-size: 16px;
    margin: 0
}

.card-value .text-val, .profile-info h1 {
    font-size: 24px
}

.card-cahrt {
    padding: 20px 0
}

.card-cahrt .header-card {
    padding: 0 20px
}


.add-user-button, .cancel-button, .create-button, .save-button, .save-changes-button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer
}

.create-button {
    background-color: #4a61e0;
    border-color: #4f46e5;
    color: #fff;
    font-size: 16px
}

.cancel-button {
    background-color: #aaa
}

.add-user-button, .save-button, .save-changes-button {
    background-color: #4a61e0;
    color: #fff
}

.cancel-button:hover, .save-button:hover {
    opacity: .8
}

.configurations .config-info, .header-alert p {
    margin-bottom: 20px;
    font-size: 14px;
    color: #808389
}









.severity {
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 12px;
    color: #fff
}

.badge.info, .severity.info {
    background-color: #8596ea
}

.severity.low {
    background-color: #fde82b;
    color: #333
}

.badge.yellow, .severity.medium {
    background-color: #ffae00
}

.severity.high {
    background-color: #ff8629
}

.badge.red, .severity.critical {
    background-color: #ff0040
}

.edit-link {
    color: #4a61e0;
    font-size: 14px
}



.modal {
    background-color: rgba(0, 0, 0, .4)
}

.date-input-container {
    position: relative;
    width: 100%;
}

.date-input-container input[type=date] {
    width: 100%;
    color: #fff;
    margin: 0
}

.main-content .header-alert h1, .title-form {
    margin-bottom: 30px
}

.date-input-container .calendar-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 16px;
    color: #aaa
}

.profile-header {
    display: flex;
    width: 100%;
    align-items: center
}

.profile-header .profile-info {
    flex: 1 1 auto;
    min-width: 0
}

.profile-picture {
    border-radius: 50%;
    width: 164px;
    height: 164px;
    margin-right: 15px;
    overflow: hidden
}

.profile-picture img {
    width: 100%
}

.profile-info p {
    color: #808389
}

.booster {
    width: 103%;
    left: -20px;
    height: 150px;
    position: relative;
    top: -40px;
    z-index: -1
}

.header-profile {
    margin-top: -80px
}

.organization-profile {
    margin-top: 20px
}

.organization-profile h2 {
    font-size: 20px;
    margin-bottom: 15px
}

.organization-profile p {
    color: #808389;
    margin-bottom: 20px
}

.profile-forms {
    padding: 20px;
    display: flex;
    align-items: start;
    justify-content: space-between
}

.title-form {
    font-size: 16px
}

.password-change-form h3, .profile-info-form h3, .user-management-form h3 {
    font-size: 18px;
    margin-bottom: 20px
}

.form-group input, .form-group select {
    border: .86px solid #ffffff1a;
    background-color: var(--dark-surface-2);
    color: #fff
}

.profile-forms .d-flex {
    grid-gap: 10px
}

.profile-forms > div {
    width: 49%
}

.profile-forms .profile-info-form {
    border-right: 1px solid #ffffff33;
    padding-right: 50px
}

.profile-forms .password-change-form {
    padding-left: 50px
}

.profile-forms .hint-input {
    font-size: 14px;
    color: #fff;
    margin-top: 8px
}

.list-form li {
    color: #808389;
    list-style: none;
    margin-bottom: 10px;
    font-size: 12px
}

.user-management-form {
    margin-top: 40px
}

.user-management-form .cancel-button, html[data-bs-theme=light] .dashboard-header {
    background: #fff
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
}

.user-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 950px
}

.user-management-header button {
    background: 0 0;
    border: 1px solid #ffffff33;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
}

.user-management-table {
    margin-top: 20px;
    width: 100%;
    max-width: 950px;
    border: 1px solid #ffffff33
}

.alert-card, .alerts .right-alert {
    border: 1px solid rgba(255, 255, 255, .2)
}

.user-management-table td, .user-management-table th {
    padding: 10px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #ffffff33;
    font-weight: 400
}

.table-nostyle td.bold, .user-management-table th {
    font-weight: 500
}

.alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.alerts .left-alert {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.badge, .status {
    align-items: center
}

.alerts .right-alert {
    padding: 20px;
    margin-top: 20px
}

.alerts .header-card {
    padding: 20px
}

.alerts .header-card h2 {
    font-size: 24px;
    margin-bottom: 5px
}

.alerts .header-card p {
    font-weight: 400;
    color: #fff;
    font-size: 14px
}

.alerts .header-card .lastp {
    text-transform: capitalize;
    margin-top: 20px
}

/*.darck-card, .dashboard.with-banner .sidebar {*/
/*    margin-top: 50px*/
/*}*/

.alerts .body-alert-card {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    border-top: 1px solid rgba(255, 255, 255, .2)
}

.alerts .body-alert-card > div {
    padding: 15px
}

.alerts .body-alert-card > div:nth-child(2) {
    border-left: 1px solid rgba(255, 255, 255, .2);
    border-right: 1px solid rgba(255, 255, 255, .2)
}

.alerts .body-alert-card .title-body {
    display: block;
    font-size: 14px;
    margin-bottom: 8px
}

.alerts .body-alert-card .tsext-p, .badge {
    font-size: 12px
}

@media (min-width: 768px) {
    .alerts .right-alert {
        margin-top: 0
    }
}

@media (max-width: 767px) {
    .alerts .body-alert-card > div:nth-child(2) {
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, .2);
        border-bottom: 1px solid rgba(255, 255, 255, .2)
    }
}

.status {
    display: flex;
    grid-gap: 5px
}

.status .cricle-ac {
    background-color: #fff;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block
}

.status .cricle-ac.green {
    background-color: #4edfa8
}

.status .cricle-ac.yellow {
    background-color: #ffba00
}

.status .cricle-ac.purple {
    background-color: #6f00ff
}

.status .cricle-ac.blue {
    background-color: #3ba0ff
}

.badge {
    padding: 2px 10px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    width: max-content
}

.badge.low {
    background-color: #fde82b
}

.alerts .right-alert .title-table-en {
    font-size: 24px;
    margin-bottom: 20px
}

.table-nostyle td {
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 400
}

.darck-card {
    background-color: #151a24;
    padding-bottom: 20px
}

.darck-card .header-card h2 {
    font-size: 18px
}

.dark-table {
    width: calc(100% - 40px);
    margin: 0 20px
}

.dark-table td, .dark-table th {
    padding: 16px 24px;
    font-size: 14px;
    text-align: start
}


.head-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #c5bcbc;
    padding-bottom: 10px
}

.head-filter .tabs {
    display: flex;
    grid-gap: 20px
}

.search {
    width: 25%
}

.search input {
    border: 1px solid rgba(255, 255, 255, .2);
    height: 31px;
    font-size: 14px;
    padding: 10px;
    width: 100%;
    max-width: 320px
}

.tab {
    background: 0 0;
    color: #808389;
    border: none;
    font-size: 16px;
    padding-bottom: 5px
}


@media (max-width: 768px) {
    .header {
        flex-flow: column;
        grid-gap: 0;
        align-items: start
    }

    .header h1 {
        margin-left: 0
    }

    .header.fixed-top {
        left: 0
    }

    .cards, .charts {
        flex-flow: column;
        grid-gap: 15px
    }

    .alerts .left-alert, .alerts .right-alert, .card, .chart, .sidebar-item.log-out img {
        width: 100%
    }




    .sidebar-item.log-out {
        width: 35px;
        padding: 0
    }

    .config-table td, .config-table th {
        padding: 8px
    }

    .config-table th {
        font-size: 14px
    }

    .config-table td {
        font-size: 12px
    }

    .alerts, .profile-forms {
        flex-flow: column
    }

    .profile-forms > div {
        width: 100%;
        border-right: none !important
    }

    .profile-forms .profile-info-form {
        padding: 0
    }

    .main-content {
        overflow-x: auto;
        padding-top: 100px
    }

    .booster {
        width: 100%;
        position: unset;
        background: 0 0;
        height: 60px
    }

    .profile-header {
        flex-wrap: wrap
    }

    .main-content .header h1, .main-content .header-alert h1 {
        font-size: 28px;
        margin-bottom: 10px;
        line-height: 1.2
    }

    .profile-header .d-flex {
        flex-flow: column;
        grid-gap: 15px;
        margin-top: 15px;
        align-items: start
    }

    .profile-forms .password-change-form {
        padding-left: 0
    }
}

.dark-swal-popup {
    background-color: var(--dark-surface-2) !important;
    color: #fff !important
}

.dark-swal-content {
    color: #ccc !important
}

.dark-swal-button {
    background-color: #37751c !important;
    color: #fff !important;
    border: none !important
}

::placeholder {
    color: #8e8e8e !important
}

.btn-outline-secondary, .text-secondary {
    color: #6c757d !important
}

option {
    background-color: var(--dark-surface-2);
    color: #fff
}

.btn-secondary {
    background-color: #6c757d !important
}

.btn-outline-secondary {
    border: 1px solid #6c757d !important
}

.form-check-success .form-check-input {
    background-color: #56b22c;
    border: none
}

.form-check-warning .form-check-input {
    background-color: #f0ad4e;
    border: none
}

.form-check-secondary .form-check-input {
    background-color: #6c757d;
    border: none
}

.form-check-danger .form-check-input {
    background-color: #dc3545;
    border: none
}




html[data-bs-theme=light] .alert-card {
    border: 1px solid #e4e7eb
}

html[data-bs-theme=light] .btn-dark {
    background: #343a40
}

html[data-bs-theme=light] .btn-dark:hover {
    background: #23272b
}


.profile-banner.glass-banner {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    animation: .4s ease-out slideDown
}

.profile-banner {
    position: absolute;
    left: 0;
    width: 100%;
    top: 82px;
    z-index: 99999;
}

.latest-reports {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 320px;
    overflow-y: auto
}

.latest-reports li {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px
}

.latest-reports li:last-child {
    border-bottom: none
}

.latest-reports i {
    font-size: 18px;
    margin-right: 6px
}

.latest-reports li .flex-grow-1 {
    display: flex;
    flex-direction: column
}

body.theme-transition {
    transition: background-color .3s, color .3s
}

.glass-header {
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.profile-banner i {
    font-size: 1.25rem;
    vertical-align: middle;
    color: var(--primary)
}

.profile-banner a {
    color: var(--primary);
    font-weight: 600
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

.cookie-banner {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1050;
    background: var(--glass-bg);
    backdrop-filter: blur(10px)
}

body.sidebar-expanded #dashboardHeader.header.fixed-top {
    left: var(--sidebar-width) !important;
    width: calc(100% - var(--sidebar-width)) !important
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .submenu {
        transition: none !important
    }
}

.modal.show .modal-dialog {
    display: flex;
    align-items: center;
    height: 100vh;
}

body.sidebar-animating .sidebar {
    transition: width 0.28s cubic-bezier(.4, 0, .2, 1), background 0.3s;
}

.sidebar.no-transition {
    transition: none !important;
}


.sidebar.expanded {
    overflow-y: auto;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}


/* Hide brand text when collapsed */
/*.sidebar:not(.expanded) .site-name {*/
/*    opacity: 0;*/
/*    width: 0;*/
/*    padding: 0;*/
/*    margin: 0;*/
/*    overflow: hidden;*/
/*}*/

/*.sidebar:not(.expanded) .logo {*/
/*    justify-content: center;*/
/*    border-bottom: none;*/
/*    margin-bottom: 8px;*/
/*}*/

/* Toggle button */
/* Toggle button (now inside bottom list) */
.sidebar-toggle {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #1d1d1d;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-start;
    cursor: pointer;
    transition: background .25s;
    padding: 12px 16px;
}

.sidebar-toggle:hover {
    background: #242424;
}

.sidebar-toggle i {
    font-size: 20px;
}

/* Center icons when collapsed */
/*.sidebar:not(.expanded) .sidebar-item a,*/
/*.sidebar:not(.expanded) .sidebar-item button {*/
/*    justify-content: center;*/
/*    padding: 12px 10px;*/
/*}*/

/*.sidebar:not(.expanded) .sidebar-item.has-submenu .arrow-icon {*/
/*    display: none;*/
/*}*/

/*!* Hide text when collapsed *!*/
/*.sidebar:not(.expanded) .sidebar-text {*/
/*    opacity: 0;*/
/*    width: 0;*/
/*    overflow: hidden;*/
/*    padding: 0;*/
/*    margin: 0;*/
/*}*/

/*!* Submenu visibility *!*/
/*.sidebar:not(.expanded) .submenu {*/
/*    display: none !important;*/
/*}*/

.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.sidebar-item {
    margin-bottom: 6px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


.sidebar-item i {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: inherit;
    transition: all 0.3s ease;
}

.arrow-icon {
    margin-left: auto;
    font-size: 14px;
    color: inherit;
    transition: transform 0.3s ease;
}

.sidebar-item.has-submenu.open .arrow-icon {
    transform: rotate(-180deg);
}


.sidebar-item.active a {
    color: white;
}




.submenu-item:hover {
    transform: none; /* keep submenu items fixed */
}

.submenu-item:hover a {
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
}



#dashboardHeader.header.fixed-top {
    left: var(--sidebar-expanded) !important;
    width: calc(100% - var(--sidebar-expanded)) !important;
}


/* Toggle button visual tweaks */
.sidebar-toggle {
    background: #1c1c1c;
}

.sidebar-toggle:hover {
    background: #252525;
}

/*.sidebar:not(.expanded) .sidebar-toggle i {*/
/*    transform: none;*/
/*}*/

/* Tooltip helper (optional future) */
.sidebar-tooltip {
    position: fixed;
    left: 58px;
    background: #2a2a2a;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .15s, transform .15s;
    z-index: 1000000;
    white-space: nowrap;
}

.sidebar-tooltip.show {
    opacity: 1;
    transform: translateY(-50%) translateX(2px);
}

/* Spacer pushes bottom items */
.sidebar-spacer {
    flex: 1 1 auto;
}

/* Logout item distinct? keep same styling as others */
.logout-item button {
    color: inherit;
}


/* إخفاء النص والعناصر عند الطي - مربوط بحالة الجسم فقط */
body.sidebar-collapsed #sidebar .site-name {
    display: none;
    opacity: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

body.sidebar-collapsed #sidebar .logo {
    justify-content: center;
    border-bottom: none;
    margin-bottom: 8px;
}

body.sidebar-collapsed #sidebar .sidebar-item a,
body.sidebar-collapsed #sidebar .sidebar-item button {
    justify-content: center;
    padding: 12px 10px;
}

body.sidebar-collapsed #sidebar .sidebar-item.has-submenu .arrow-icon {
    display: none;
}

body.sidebar-collapsed #sidebar .sidebar-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}


/* أي تحسينات خاصة بوضع الأيقونات فقط */
body.sidebar-collapsed #sidebar .sidebar-item {
    margin: 6px 0;
}


body.sidebar-collapsed #sidebar .sidebar-item a i,
body.sidebar-collapsed #sidebar .sidebar-item button i {
    font-size: 20px;
}

body.sidebar-collapsed #sidebar > .sidebar-item:hover a,
body.sidebar-collapsed #sidebar .sidebar-item:hover button {
    background: var(--brand-primary-600);
    color: #fff !important;
}


body.sidebar-collapsed #sidebar .logout-item button {
    justify-content: center;
}

#sidebar .sidebar-text {
    display: inline-block !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    white-space: nowrap;
}