html {
    background: #1b1b1d !important;
    /* Dark base color */
    background: linear-gradient(36deg, #1b1b1d 40%, #2d2d30 100%) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    /* This property fixes the background */
    color: #f0f0f0 !important;
    /* Light text color for contrast */
    font-family: 'Roboto', sans-serif !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

.subsidian-body {
    /* Dark base color */
    background: transparent !important;
    color: #f0f0f0 !important;
}

.subsidian-page-body {
    background: none !important;
}

.subsidian-header {
    /* background-color: #2d2d30 !important; */
    background-color: transparent !important;
    border-bottom: 0 0 0 0 #ffffff !important;
    box-shadow: 0 0 0 0 #ffffff !important;
}

.subsidian-grag-header-text {
    background: linear-gradient(to right, #ff6000, #ff9500) !important;
    background-clip: text !important;
    color: transparent !important;
}


/* Optional: Dashboard container to give a similar layout */

.subsidian-dashboard {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 20px !important;
    gap: 20px !important;
}


/* Example panel styling */

.subsidian-panel {
    background-color: #252529 !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0) !important;
    padding: 20px !important;
    color: #f5f5f5 !important;
    flex: 1 1 calc(33.333% - 40px) !important;
}

.subsidian-panel-2 {
    background-color: #252529 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0) !important;
    padding: 20px !important;
    color: #f5f5f5 !important;
    flex: 1 1 calc(33.333% - 40px) !important;
}


/* Add some glowing orange highlights */

.subsidian-panel .subsidian-highlight {
    color: #ff9500 !important;
}

.subsidian-panel-2 .grid-header {
    background-color: transparent !important;
    color: #f5f5f5 !important;
}

.subsidian-panel table {
    background-color: #2d2d30 !important;
    background-color: transparent !important;
    /* Slightly different shade for the table background */
    color: #f0f0f0 !important;
    /* Ensure table text is visible */
    border-radius: 8px;
    overflow: hidden;
    /* Ensure radius applies properly */
}

.subsidian-panel table thead {
    background: none !important;
}

.subsidian-panel table thead tr th {
    background: none !important;
    background-color: transparent !important;
    color: #ff9500 !important;
}

.subsidian-panel table thead th {
    vertical-align: bottom !important;
    border-bottom: 0px solid transparent !important;
}

.subsidian-panel table tbody tr td {
    color: #f0f0f0 !important;
}

.subsidian-panel table tbody tr:hover {
    background-color: #2d2d30 !important;
}


/* GLASS MORPHISM */

.subsidian-gm-base {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.subsidian-gm-glass {
    backdrop-filter: blur(10px) !important;
}


/* COLOR MANAGEMENT */

.subsidian-highlight,
.text-grey .subsidian-highlight,
.text-grey>.subsidian-highlight {
    color: #ff9500 !important;
}

.text-primary {
    color: #ff9500 !important;
}

.text-success {
    color: #13bd2f !important;
}

.text-grey {
    color: #ffffff !important;
}

.text-danger {
    color: #ff0000 !important;
}

.text-black {
    color: #f5f5f5 !important;
}

.card-title {
    color: #f5f5f5 !important;
}

.nav {
    background: linear-gradient(-225deg, rgba(45, 45, 48, 0.8) 0%, rgba(45, 45, 48, 0.8) 100%) !important;
    backdrop-filter: blur(5px) !important;
}

.nav__subtitle {
    color: #a2a2a2 !important;
}

.nav__link {
    color: #f5f5f5 !important;
}

.nav__link:hover {
    color: #ff9500 !important;
}

.mat-paginator {
    background-color: #2d2d30 !important;
    color: #f5f5f5 !important;
}

.form-control,
.floating__input {
    background-color: #2d2d30 !important;
    color: #f5f5f5 !important;
}

.subsidian-search .search__input {
    background-color: #2d2d30 !important;
    color: #f5f5f5 !important;
}

.dropdown-menu {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #1b1b1d !important;
    border-radius: 8px !important;
}

.dropdown-menu:before {
    border: 1px solid #1b1b1d !important;
}

.dropdown-menu,
.navbar-dropdown .dropdown-header {
    background: #2d2d30 !important;
    color: #f5f5f5 !important;
}

.navbar-dropdown .dropdown-header {
    border-radius: 8px 8px 0 0 !important;
}

.navbar-dropdown .dropdown-body .dropdown-grid,
.navbar-dropdown .dropdown-footer {
    background: transparent !important;
    color: #f5f5f5 !important;
}

.navbar-dropdown .dropdown-header,
.navbar-dropdown .dropdown-footer {
    border-top: 0px solid #f2f4f9 !important;
    border-bottom: 0px solid #f2f4f9 !important;
}

.border-top {
    border-top: 0px solid #f2f4f9 !important;
}

.app-modal-full {
    background: transparent !important;
}

.app-modal-full .app-modal-full-body {
    background: linear-gradient(135deg, #1b1b1d, #2d2d30 100%) !important;
}

.app-modal-popup {
    background: transparent !important;
}

.app-modal-popup .app-modal-popup-body {
    background: linear-gradient(135deg, #1b1b1d, #2d2d30 100%) !important;
}

.app-modal-popup .file-upload-container {
    background-color: transparent !important;
}

.app-modal-popup .grid,
.app-modal-popup .grid-body,
.app-modal-popup .grid-header-alt {
    background-color: transparent !important;
}

.popup-header,
.popup-footer {
    background-color: transparent !important;
    color: #f5f5f5 !important;
}

.popup-header {
    background: transparent !important;
    border-bottom: 0px solid #2d2d30 !important;
}

.popup-footer {
    background: transparent !important;
    border-top: 0px solid #2d2d30 !important;
}

.app-modal-side {
    background: linear-gradient(135deg, #1b1b1d, #2d2d30 100%) !important;
}

.app-modal-side-body {
    background-color: transparent !important;
}

.fixed-header,
.fixed-footer {
    background-color: #2d2d30 !important;
    color: #f5f5f5 !important;
}

.fixed-header {
    background: #2d2d30 !important;
    border-bottom: 0px solid #2d2d30 !important;
}

.fixed-footer {
    background: #2d2d30 !important;
    border-top: 0px solid #2d2d30 !important;
}

.apexcharts-text,
.apexcharts-xaxis-label .apexcharts-xaxis-label,
.apexcharts-yaxis-label,
.apexcharts-title-text {
    color: #ffffff !important;
    fill: #ffffff !important;
}


/* ANIMATION - SHIMMER */

.shimmer {
    background-image: linear-gradient( 90deg, #EEEEEE 0%, #EEEEEE 40%, #DDDDDD 50%, #DDDDDD 55%, #EEEEEE 65%, #EEEEEE 100%, );
    background-size: 400%;
    animation: shimmer 1500ms infinite;
}

@keyframes shimmer {
    from {
        background-position: 100% 100%;
    }
    to {
        background-position: 0 0;
    }
}


/* ANIMATION - BORDER */

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.dynamic-border {
    /* background-color: #2d2d30 !important; */
    display: block;
}

.dynamic-border::after,
.dynamic-border::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(from var(--angle), #ff9500, #2d2d2d, #ff9500, #2d2d2d);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    padding: 3px;
    border-radius: 10px;
    animation: 3s spin linear infinite;
}

.dynamic-border::before {
    filter: blur(1.5rem);
    opacity: 0.5;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}