/* =============================================================
   AMQEE - Global Responsive Overrides
   Ensures the application looks great on all screen sizes:
   Mobile (< 576px), Tablet (576px-991px), Desktop (992px+)
   ============================================================= */

/* ---- Responsive Tables ---- */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- Auth Card (Login/Register) Mobile Fixes ---- */
@media (max-width: 767px) {
    .auth-card .form-side {
        padding: 25px 20px !important;
    }
    .auth-card .image-side {
        padding: 30px 20px !important;
        min-height: 120px;
    }
    /* Wizard step titles: make them smaller on mobile */
    .auth-card .card-header li a {
        font-size: 0.75rem;
        padding: 8px 6px;
    }
    .auth-card .card-header li a small {
        font-size: 0.65rem;
    }
    /* Wizard buttons */
    .auth-card .custom-toolbar {
        flex-direction: column;
        gap: 8px;
    }
    .auth-card .custom-toolbar .btn {
        width: 100%;
        margin: 0 !important;
    }
}

@media (max-width: 575px) {
    .auth-card .form-side {
        padding: 20px 15px !important;
    }
    .auth-card .image-side {
        display: none !important;
    }
}

/* ---- Upload Zones: Stack vertically on mobile ---- */
@media (max-width: 575px) {
    .upload-zone {
        flex-direction: column !important;
        text-align: center !important;
        padding: 14px !important;
        gap: 10px !important;
    }
    .upload-zone .upload-body {
        text-align: center !important;
    }
    .upload-zone .upload-icon-wrap {
        width: 44px !important;
        height: 44px !important;
    }
    .upload-zone .upload-icon-wrap i {
        font-size: 20px !important;
    }
    .upload-zone .upload-title {
        font-size: 13px !important;
    }
    .upload-zone .upload-hint {
        font-size: 11px !important;
    }
}

/* ---- Action Bars (Profile / Admin): Stack on mobile ---- */
@media (max-width: 767px) {
    .action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center;
        padding: 15px !important;
    }
    .action-bar .d-flex.align-items-center {
        flex-direction: column;
        text-align: center;
    }
    .action-bar .profile-img-lg {
        margin: 0 auto 12px auto !important;
        width: 80px !important;
        height: 80px !important;
    }
    .action-bar h2 {
        font-size: 1.3rem;
    }
    .action-bar p {
        font-size: 0.85rem;
        word-break: break-all;
    }
    .action-bar .d-flex.mt-3,
    .action-bar .d-flex.mt-md-0 {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .action-bar .btn {
        width: 100%;
        margin: 0 !important;
    }
}

/* ---- Details Cards ---- */
@media (max-width: 575px) {
    .details-card .card-body {
        padding: 15px !important;
    }
    .details-card .section-title {
        font-size: 1rem;
    }
    .details-card .info-label {
        font-size: 0.8rem;
    }
    .details-card .info-value {
        font-size: 0.95rem;
        word-break: break-word;
    }
}

/* ---- Navbar: Mobile fixes ---- */
@media (max-width: 767px) {
    .navbar .navbar-right .user .name {
        display: none;
    }
    .navbar .navbar-right .header-icons {
        margin-right: 0;
        margin-left: 0;
    }
    .navbar .navbar-right .header-icons .position-relative {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    /* Language selector: compact on mobile */
    .navbar .navbar-right .header-icons .position-relative .d-flex {
        padding: 3px 8px !important;
    }
    .navbar .navbar-right .header-icons .position-relative .d-flex select {
        min-width: 45px !important;
        font-size: 0.75rem !important;
    }
    /* Profile photo in navbar: smaller on mobile */
    .profile-photo-wrapper img {
        width: 40px !important;
        height: 40px !important;
    }
    .profile-photo-overlay {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ---- Admin Dashboard: Stat cards ---- */
@media (max-width: 575px) {
    .premium-card .card-body {
        padding: 15px !important;
    }
    .premium-card .value-text {
        font-size: 1.8rem !important;
    }
    .premium-card .label-text {
        font-size: 0.85rem !important;
    }
    .premium-card .card-icon {
        font-size: 2.5rem !important;
    }
}

/* ---- Chart Container: reduce height on mobile ---- */
@media (max-width: 767px) {
    .chart-container {
        height: 250px !important;
    }
}
@media (max-width: 575px) {
    .chart-container {
        height: 200px !important;
    }
}

/* ---- DataTables: Responsive action buttons ---- */
@media (max-width: 767px) {
    #usersTable td[style*="min-width: 300px"] {
        min-width: auto !important;
    }
    .data-tables-hide-filter .card-body {
        padding: 10px !important;
        overflow-x: auto;
    }
    table.dataTable {
        font-size: 0.85rem;
    }
    table.dataTable td .btn {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        margin-bottom: 4px !important;
    }
    table.dataTable td .d-flex {
        flex-wrap: wrap;
    }
}

/* ---- Advanced Search Filters: Stack on mobile ---- */
@media (max-width: 575px) {
    #advancedSearchSection .col-md-3 {
        margin-bottom: 10px;
    }
    #advancedSearchSection .d-flex.align-items-end {
        flex-direction: column;
        gap: 8px !important;
    }
    #advancedSearchSection .d-flex.align-items-end .btn {
        width: 100% !important;
    }
}

/* ---- Subscription Table: Responsive ---- */
@media (max-width: 767px) {
    #subscriptionsDatatable {
        font-size: 0.85rem;
    }
    #subscriptionsDatatable .d-flex.flex-row {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* ---- Login/Register: Language selector mobile fix ---- */
@media (max-width: 575px) {
    .position-fixed[style*="top: 20px"] {
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
    }
    .position-fixed[style*="top: 20px"] .d-flex {
        padding: 4px 10px !important;
    }
    .position-fixed[style*="top: 20px"] select {
        min-width: 50px !important;
        font-size: 0.8rem !important;
    }
}

/* ---- Login/Register: Button group responsive ---- */
@media (max-width: 575px) {
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .d-flex.justify-content-between.align-items-center .btn {
        width: 100%;
    }
}

/* ---- Gender Radio Buttons: Side by side on mobile ---- */
@media (max-width: 575px) {
    .form-group .btn-check + .btn {
        font-size: 0.85rem;
        padding: 6px 16px;
    }
}

/* ---- CAPTCHA Image: Scale on mobile ---- */
@media (max-width: 575px) {
    img[alt="CAPTCHA"] {
        max-width: 100%;
        height: auto;
    }
}

/* ---- Verify Email Card: Already responsive, minor tweak ---- */
@media (max-width: 575px) {
    .verify-card {
        padding: 25px 15px !important;
        width: 95% !important;
    }
    .verify-title {
        font-size: 18px !important;
    }
    .verify-message {
        font-size: 14px !important;
    }
}

/* ---- Breadcrumb: Hide on very small screens ---- */
@media (max-width: 420px) {
    .breadcrumb-container {
        display: none !important;
    }
}

/* ---- Footer: Center on mobile ---- */
@media (max-width: 575px) {
    .page-footer .footer-content {
        text-align: center;
    }
    .page-footer .footer-content p {
        font-size: 0.8rem;
    }
}

/* ---- Dropdown menu: Prevent overflow ---- */
@media (max-width: 575px) {
    .dropdown-menu {
        max-width: 90vw;
    }
}

/* ---- Notification dropdown: Responsive ---- */
@media (max-width: 575px) {
    #notificationDropdown {
        width: 280px !important;
        right: -50px !important;
    }
}

/* ---- Modal: Full width on mobile ---- */
@media (max-width: 575px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
}

/* ---- Attachment Buttons: Stack on mobile ---- */
@media (max-width: 575px) {
    .attachment-btn {
        flex-direction: column;
        text-align: center;
        gap: 6px;
        padding: 10px !important;
    }
}

/* ---- General Spacing Fixes for Mobile ---- */
@media (max-width: 767px) {
    h1 {
        font-size: 1.5rem !important;
    }
    h2 {
        font-size: 1.3rem !important;
    }
    .mb-5 {
        margin-bottom: 1.5rem !important;
    }
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ---- Password Requirements: Responsive ---- */
@media (max-width: 575px) {
    .password-requirements {
        padding: 10px !important;
    }
    .requirement-item {
        font-size: 10px !important;
    }
}

/* ---- Organization / Subscription Forms: Full-width inputs on mobile ---- */
@media (max-width: 575px) {
    .form-group,
    .has-float-label {
        margin-bottom: 12px !important;
    }
    .form-control,
    .form-select {
        font-size: 0.9rem !important;
    }
}

/* ---- Status badges: Responsive sizing ---- */
@media (max-width: 575px) {
    .status-badge {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
    }
}

/* ---- Sidebar Menu: Touch-friendly on tablet ---- */
@media (max-width: 991px) and (min-width: 576px) {
    .sub-menu ul li a {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
}

/* ---- Wizard Steps Header: Horizontal scroll on small screens ---- */
@media (max-width: 575px) {
    #smartWizardValidation > ul.card-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding: 0 !important;
    }
    #smartWizardValidation > ul.card-header li {
        flex: 0 0 auto;
        min-width: 100px;
    }
    #smartWizardValidation > ul.card-header li a {
        white-space: normal;
        text-align: center;
        padding: 10px 8px;
        font-size: 0.7rem;
    }
    #smartWizardValidation > ul.card-header li a small {
        display: block;
        font-size: 0.6rem;
    }
}

/* ---- Ensure images don't overflow ---- */
img {
    max-width: 100%;
    height: auto;
}
/* Exclude profile photos and icons from max-width override */
.profile-photo-wrapper img,
.profile-img-lg,
img[alt="Profile Picture"],
img[alt="profile"] {
    max-width: none;
}