/**
 * Custom CSS Fixes
 * Fixes for dark mode and other UI issues
 */

/* Page Loader - Dark Mode Support */
#overlayer {
    background-color: rgba(255, 255, 255, 0.95);
}

.layout-dark #overlayer {
    background-color: rgba(30, 33, 57, 0.95);
}

/* Loader dots - Light mode (primary blue) */
.layout-light .loader-overlay .spin-dot.dot-primary {
    background-color: #5F63F2;
}

/* Loader dots - Dark mode (lighter blue for visibility) */
.layout-dark .loader-overlay .spin-dot.dot-primary {
    background-color: #8286FF;
}

/* Dark Mode - Form Controls */
.layout-dark .form-control,
.layout-dark .form-select,
.layout-dark select.form-control,
.layout-dark select {
    background-color: #272B3C !important;
    color: #e8e9ec !important;
    border-color: #3a3f56 !important;
}

.layout-dark .form-control option,
.layout-dark .form-select option,
.layout-dark select option {
    background-color: #272B3C !important;
    color: #e8e9ec !important;
}

.layout-dark .form-control:focus,
.layout-dark .form-select:focus,
.layout-dark select:focus {
    background-color: #272B3C !important;
    color: #e8e9ec !important;
    border-color: #5F63F2 !important;
}

/* Dark Mode - Dropdown Menus */
.layout-dark .dropdown-menu {
    background-color: #272B3C !important;
    border-color: #3a3f56 !important;
}

.layout-dark .dropdown-item {
    color: #e8e9ec !important;
}

.layout-dark .dropdown-item:hover,
.layout-dark .dropdown-item:focus {
    background-color: #2d3142 !important;
    color: #5F63F2 !important;
}

/* Dark Mode - Labels */
.layout-dark label,
.layout-dark .color-dark {
    color: #e8e9ec !important;
}

/* Dark Mode - Small text / hints */
.layout-dark small.text-muted,
.layout-dark .text-muted {
    color: #9299b8 !important;
}

/* Logo Persona - Navbar */
.logo-area .navbar-brand .light,
.logo-area .navbar-brand .dark {
    height: 80px;
    width: auto;
    object-fit: contain;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* Light mode - mostra logo chiaro, nascondi logo scuro */
body.layout-light .edit-profile__logos > img.light,
body.layout-light .logo-area .navbar-brand > img.light {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.layout-light .edit-profile__logos > img.dark,
body.layout-light .logo-area .navbar-brand > img.dark {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Dark mode - mostra logo scuro, nascondi logo chiaro */
body.layout-dark .edit-profile__logos > img.light,
body.layout-dark .logo-area .navbar-brand > img.light {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

body.layout-dark .edit-profile__logos > img.dark,
body.layout-dark .logo-area .navbar-brand > img.dark {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Logo Persona - Auth pages */
.edit-profile__logos img {
    max-width: 200px;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    background-color: transparent;
}

/* Fix allineamento ricerca piante */
.support-order-search__form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.support-order-search__form img.svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.support-order-search__form input {
    flex: 1;
}

/* Plants Table - Info Row (Expandable details for mobile) */
.plant-info-row {
    background-color: #f8f9fa;
}

.layout-dark .plant-info-row {
    background-color: #1e2139;
}

.plant-info-cell {
    padding: 15px 20px !important;
    border-top: 1px solid #e3e6ef;
}

.layout-dark .plant-info-cell {
    border-top-color: #3a3f56;
}

.plant-info-details {
    font-size: 14px;
}

.plant-info-details .info-item strong {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info button styling */
.orderDatatable_actions .info {
    background-color: #00AAFF;
}

.orderDatatable_actions .info:hover {
    background-color: #0099e6;
}

/* Plants Table - Mobile Optimization */
@media (max-width: 767px) {
    /* Riduce padding per mobile */
    .plants-table-mobile td,
    .plants-table-mobile th {
        padding: 12px 8px !important;
    }

    /* Riduce dimensione font */
    .plants-table-mobile .userDatatable-content {
        font-size: 14px;
    }

    /* Riduce dimensione foto */
    .plants-table-mobile .userDatatable-content img {
        width: 40px !important;
        height: 40px !important;
    }

    .plants-table-mobile .userDatatable-content > div {
        width: 40px !important;
        height: 40px !important;
    }

    /* Ottimizza azioni */
    .plants-table-mobile .orderDatatable_actions {
        gap: 5px;
    }

    .plants-table-mobile .orderDatatable_actions li a {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ottimizza barra di ricerca mobile */
    .support-order-search {
        margin-right: 8px !important;
    }

    /* Riduce padding del container */
    .userDatatable {
        padding: 20px 15px !important;
    }

    /* Ottimizza header titolo */
    .d-flex.justify-content-between.align-items-center.mb-25 h4 {
        font-size: 18px;
    }

    /* Ottimizza riga espandibile info */
    .plant-info-cell {
        padding: 12px 15px !important;
    }

    .plant-info-details .info-item {
        margin-bottom: 10px !important;
    }

    .plant-info-details .info-item strong {
        font-size: 11px;
    }
}

@media (max-width: 575px) {
    /* Ultra piccoli - Ottimizza ulteriormente */
    .plants-table-mobile td,
    .plants-table-mobile th {
        padding: 10px 5px !important;
    }

    .plants-table-mobile .userDatatable-content {
        font-size: 13px;
    }

    /* Nascondi icone e mantieni solo nome */
    .plants-table-mobile .orderDatatable_actions li a i {
        font-size: 18px;
    }

    /* Rendi il nome della pianta più compatto */
    .plants-table-mobile .userDatatable-content strong {
        font-size: 14px;
        line-height: 1.3;
    }
}

/* === IMAGE CROP MODAL STYLES === */
.crop-container {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    position: relative;
}

.layout-dark .crop-container {
    background-color: #1e2139;
}

#crop-image {
    display: block;
    max-width: 100%;
    max-height: 500px;
}

/* Cropper.js Dark Mode Support */
.layout-dark .cropper-view-box,
.layout-dark .cropper-face {
    background-color: rgba(255, 255, 255, 0.1);
}

.layout-dark .cropper-line,
.layout-dark .cropper-point {
    background-color: #5F63F2;
}

.layout-dark .cropper-dashed {
    border-color: rgba(95, 99, 242, 0.5);
}

.layout-dark .cropper-center {
    background-color: #5F63F2;
}

/* Crop Controls */
.crop-control-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.crop-control-btn i {
    font-size: 18px;
    line-height: 1;
    margin: 0;
}

/* Ruota icone per coerenza visiva */
.rotate-right-icon {
    transform: scaleX(-1);
}

/* Bottoni upload foto */
.dm-upload__button .d-flex.gap-2 {
    gap: 10px;
}

/* Anteprima foto croppata */
#cropped-photo-preview {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e3e6ef;
}

.layout-dark #cropped-photo-preview {
    background-color: #1e2139;
    border-color: #3a3f56;
}

#cropped-photo-preview img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for crop modal */
@media (max-width: 991px) {
    .crop-container {
        max-height: 400px !important;
    }
}

@media (max-width: 575px) {
    .crop-container {
        max-height: 300px !important;
        padding: 5px;
    }

    .crop-control-btn {
        width: 36px;
        height: 36px;
    }

    .crop-control-btn i {
        font-size: 16px;
    }

    .dm-upload__button .d-flex.gap-2 {
        flex-direction: column;
    }

    .dm-upload__button .d-flex.gap-2 .btn {
        width: 100%;
    }
}

/* ===== LOGO THEME SWITCHING - MASSIMA PRIORITA ===== */
/* Sovrascrive le regole errate in style.css */

/* LIGHT MODE - Mostra logo chiaro, nascondi logo scuro */
body.layout-light .navbar-left .navbar-brand img.light,
body.layout-light .logo-area .navbar-brand img.light,
body.layout-light .edit-profile__logos img.light {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.layout-light .navbar-left .navbar-brand img.dark,
body.layout-light .logo-area .navbar-brand img.dark,
body.layout-light .edit-profile__logos img.dark {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* DARK MODE - Mostra logo scuro, nascondi logo chiaro */
body.layout-dark .navbar-left .navbar-brand img.light,
body.layout-dark .logo-area .navbar-brand img.light,
body.layout-dark .edit-profile__logos img.light {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

body.layout-dark .navbar-left .navbar-brand img.dark,
body.layout-dark .logo-area .navbar-brand img.dark,
body.layout-dark .edit-profile__logos img.dark {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override specifico per correggere style.css riga 30535-30540 */
.layout-dark .navbar-left .navbar-brand .light {
    display: none !important;
}

.layout-dark .navbar-left .navbar-brand .dark {
    display: block !important;
}

/* Assicura che in light mode il logo light sia visibile */
.layout-light .navbar-left .navbar-brand .light,
body.layout-light .navbar-left .navbar-brand .light {
    display: block !important;
}

.layout-light .navbar-left .navbar-brand .dark,
body.layout-light .navbar-left .navbar-brand .dark {
    display: none !important;
}