/* Import global styles */
@import url('../main.css');

body {
    background-color: var(--color-background-dark);
}

button, a{
    font-family: var(--font-family-base);
    cursor: pointer;
}

@media (min-width: 1920px) {
    .dashboard-main-container{
        max-width: 1920px;
        margin: 0 auto;
        transition: var(--transition-duration);
        width: auto;
    }
}

.accent-border {
    border: 1px solid var(--color-accent);
}

/* Main Layout Structure */
.parametres-side-menu {
    flex: 0 1 20%; /* 0: don't grow, 1: can shrink, 20%: base width */
    min-width: 360px;
    height: 100vh;
    min-height: 100vh;
}

.settings {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
}

.settings.banking .custom-select,
.settings.address .custom-select,
.settings.birthdate .custom-select,
.settings.preferences .custom-select {
    height: auto;
    overflow-y: visible;
}

/* Sidebar Container */
.parametres-side-menu {
    border-right: 1px solid var(--color-accent);
    padding: 0 var(--navbar-padding-x) 0 var(--navbar-padding-x);
    transition: var(--transition-duration);
}

.parametres-side-menu.close {
    width: 80px;
    flex: none;
    min-width: 80px;
    padding: 0 var(--spacing-md);
}

/* Hide the logo when the sidebar is close and show the small one */
.parametres-side-menu.close .parametres-side-menu__logo{
    justify-content: center;
}

.parametres-side-menu.close .parametres-side-menu__logo-small-gallery {
    display: block;
}

/* Hide elements when menu is closed */
.parametres-side-menu.close .parametres-side-menu__logo-big-gallery,
.parametres-side-menu.close .parametres-side-menu__text {
    display: none !important;
}

.parametres-side-menu.close .parametres-side-menu__link{
    padding: 0;
    justify-content: center !important;
}

.parametres-side-menu.close .parametres-side-menu__link > span {
    display: none !important;
}

/* Adjust SVG icons */
.parametres-side-menu.close .parametres-side-menu__logo-text-container svg {
    width: 50px;
    height: 50px;
}

.menu-parametres-toggle{
    border: 1px solid var(--color-accent);
    width: 60px;
    height: 43px;
    position: absolute;
    top: 90%;
    right: -30px;
}

.parametres-side-menu.close .menu-parametres-toggle svg {
    transition: var(--transition-duration);
    transform: rotate(180deg);
}

/* Logo Section */
.parametres-side-menu__logo {
    height: var(--navbar-height);
}

.parametres-side-menu__logo-big-gallery {
    width: var(--logo-width);
    height: var(--logo-height);
}

.parametres-side-menu__logo-small-gallery {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    display: none; /* hide by default */
}

.parametres-side-menu__gallery-img {
    object-fit: contain;
}

/* Link Styling */
.parametres-side-menu__link {
    padding: var(--spacing-md) var(--spacing-xl);
    transition: var(--transition-duration);
}

.parametres-side-menu__link--active {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

.parametres-side-menu__link--active .parametres-side-menu__text {
    color: var(--color-primary) !important;
}

.parametres-side-menu__link--active svg path {
    fill: var(--color-primary) !important;
}

/* Main Content Area */
.settings__main {
    width: 1024px;
    margin: auto;
}

/* Line separator */
.settings-separator {
    width: 100%;
    height: 1px;
    background: var(--color-accent);
    flex-shrink: 0;
}

/* Settings Box */
.settings-box-pb30{
    padding: var(--spacing-3xl) var(--spacing-3xl) 0;
}

/* General or for many element Files */
.settings-back-button{
    width: 30px;
    height: 30px;
}

/* Social media icons */
.security__accounts-platform{
    width: 21.094%;
    min-width: 84px;
}

.security__accounts-icon{
    width: 19px;
    height: 19px;
}

.current-status{
    flex: 1;
}

/* Table Layouts */
.sessions-table-cell.location{
    width: 18.262%;
    min-width: 130px;
}

.sessions-table-cell.device-browserInfo{
    flex: 1;
}

.sessions-table-cell.date{
    width: 41%;
    text-align: right;
}

.settings-table.personal-settings-table td:first-child {
    width: 19.398%;
    min-width: 170px;
}

.settings-table.personal-settings-table td:nth-child(2) {
    flex: 1;
}

/* Theme Option */
.preferences__theme-option {
    width: 100%;
    max-width: 335px;
/*     border: 1px solid var(--color-accent); */
    transition: all 0.3s ease;
}

.preferences__theme-option img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.preferences__theme-indicator {
    transition: var(--transition-duration);
    border: 3px solid var(--color-accent);
}

/* Modified Checked State */
.preferences__theme-input:checked + .preferences__theme-indicator {
    border-color: var(--color-primary);
    background: var(--color-secondary-alt);
}

[data-theme="light"] .preferences__theme-input:checked + .preferences__theme-indicator {
    background: transparent;
}

/* Toggle switches */
.preferences__toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    margin: var(--spacing-xs);
}

.preferences__toggle .preferences__toggle-input {
    display: none;
}

.preferences__toggle .preferences__toggle-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 39px;
    height: 22px;
    background-color: var(--color-accent);
    border-radius: 34px;
    cursor: pointer;
    transition: var(--transition-duration);
}

.preferences__toggle .preferences__toggle-label::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    background-color: var(--color-secondary);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    transition: var(--transition-duration);
}

/* Change styles when the input is checked */
.preferences__toggle .preferences__toggle-input:checked + .preferences__toggle-label {
    background-color: var(--color-primary);
}

.preferences__toggle .preferences__toggle-input:checked + .preferences__toggle-label::before {
    transform: translateX(16px);
    background: var(--color-secondary-alt);
}

/* Light theme variations */
.preferences__toggle.light .preferences__toggle-label {
    background-color: #BEBEBE;
}

.preferences__toggle.light .preferences__toggle-input:checked + .preferences__toggle-label {
    background-color: #9B9B9B;
}

.preferences__toggle.light .preferences__toggle-input:checked + .preferences__toggle-label::before {
    transform: translateX(6px);
}

/* Dark theme variations */
.preferences__toggle.dark .preferences__toggle-label {
    background-color: #4B4B4B;
}

.preferences__toggle.dark .preferences__toggle-input:checked + .preferences__toggle-label {
    background-color: #717171;
}

.preferences__toggle.dark .preferences__toggle-input:checked + .preferences__toggle-label::before {
    transform: translateX(16px);
}

/* Miscellaneous */
.blue-oval {
    width: 12px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 10px;
    flex-shrink: 0;
}

/* Artwork section */
.delete-account__header.h-50px {
    height: 50px !important;
}

.delete-account__profile-section,
.delete-account__artwork-section {
    margin: 0 0 var(--spacing-md) var(--spacing-4xl);
    margin-left: 39px; /*  */
}

.delete-account__art-image {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-xs);
    flex-shrink: 0;
}

/* Profile section */
.delete-account__profile-image {
    width: 30px;
    height: 30px;
}

/* Hide navbar elements in settings */
.settings__header .navbar .navbar__logo .navbar__hamburger-menu-image,
.settings__header .navbar .navbar__logo .navbar__logo-image {
    display: none !important;
}

/* ================================= */
/*      Responsive Breakpoints       */
/* ================================= */

/* Large Desktop */
@media (max-width: 1470px) {
    .settings__main{
        width: 100%;
        padding: 0 var(--spacing-6xl) !important;
    }

    .main-container{
        min-height: 100vh;
    }
}

/* Small Desktop */
@media (max-width: 1100px) {
    .settings__main {
        width: 100%;
        padding-inline: var(--spacing-4xl) !important;
    }
}

/* Tablet */
@media (max-width: 1000px) {
    /* Sidebar settings */
    .parametres-side-menu {
        position: fixed !important;
        left: -150%;
        height: 100vh;
        z-index: 5;
        transition: left var(--transition-duration);
    }

    .parametres-side-menu.position-relative {
        position: fixed !important;
    }

    /* When sidebar is open */
    .parametres-side-menu.close {
        left: 0;
        top: var(--navbar-height);
        width: 100vw;
        padding: 0 var(--spacing-3xl);
    }

    .parametres-side-menu.close .parametres-side-menu__logo{
        display: none !important;
    }

    .menu-parametres-toggle {
        display: none !important;
        position: fixed !important;
        left: 0;
        z-index: 6;
        border-bottom-left-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-left: none;
        background: var(--color-secondary) !important;
    }

    .parametres-side-menu.close .menu-parametres-toggle {
        background: var(--color-black) !important;
    }

    /* Adjust navbar position when sidebar is open */
    .parametres-side-menu.close ~ .settings .settings__header .navbar {
        position: fixed;
        left: 0;
        top: 0;
        justify-content: space-between !important;
        /* background-color: var(--color-black) !important; */
        transition: var(--transition-duration);
    }

    /* Navbar adjustments */
    .parametres-side-menu.close ~ .settings .settings__header .navbar .navbar__logo .navbar__logo-image{
        display: none;
    }

    .parametres-side-menu.close ~ .settings .settings__header .navbar .navbar__logo,
    .parametres-side-menu ~ .settings .settings__header .navbar .navbar__hamburger-menu-image,
    .parametres-side-menu.close ~ .settings .settings__header .navbar .navbar__hamburger-menu-image {
        display: flex !important;
    }

    .parametres-side-menu.close ~ .settings .settings__main {
        margin-top: 81px; /* navbar-height - 9px */
    }

    /* Ensure text and icons are visible when sidebar is open */
    .parametres-side-menu.close .parametres-side-menu__text {
        display: flex !important;
    }

    .parametres-side-menu.close .parametres-side-menu__link > span {
        display: none !important;
    }

    .parametres-side-menu.close .parametres-side-menu__link{
        padding: 0 var(--spacing-md);
        justify-content: space-between !important;
    }
}

/* Small Tablet */
@media (max-width: 768px) {
    .settings-table-icon svg {
        width: 7px;
        height: 12px;
    }

    .security__accounts-icon svg {
        width: 19px;
        height: 19px;
    }
}

/* Mobile Large */
@media (max-width: 590px) {

    .sessions-table-cell.location,
    .settings-table.personal-settings-table td:first-child {
        min-width: 130px;
    }

    .sessions-table-cell.device-browserInfo {
        display: none;
    }

    .sessions-table-cell.date {
        width: auto;
        flex: 1;
    }

    .privacy-data {
        flex-direction: column;
    }

    .preferences__theme-indicator{
        width: 17px !important;
        height: 17px !important;
        border-width: 2px;
    }

/*     .parametres-side-menu.close,
    .settings__header .navbar {
        padding: 0 var(--spacing-xxl);
    } */

    .settings-table.personal-settings-table td:nth-child(2) {
        display: none;
    }

    /*  */
    .text-justify {
        text-align: start !important;
    }
}

/* Mobile Small */
@media (max-width: 414px) {
    .parametres-side-menu.close ~ .settings .settings__main {
        margin-top: var(--navbar-height);
    }

    .parametres-side-menu.close {
        top: var(--navbar-height);
    }

    .settings__main,
    .parametres-side-menu__links-container {
        padding-top: var(--spacing-md) !important;
    }
}