/* ============================================================
   RESPONSIVE ADDITIONS
   Append this entire block to the BOTTOM of:
   assets/css/afterlogin-responsive.css
   
   These rules only patch gaps not covered by existing CSS.
   All selectors are specific enough to not conflict.
   ============================================================ */


/* ============================================================
   TABLET (768px – 991px)
   Sidebar already hidden via existing rule.
   Fix: header crowding, notification dropdown width.
   ============================================================ */

@media screen and (min-width: 992px) {
    html,
    body.iv-backoffice-layout {
        overflow-x: hidden !important;
        scrollbar-gutter: stable;
    }

    body.iv-backoffice-layout::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    body.iv-backoffice-layout::-webkit-scrollbar-track {
        background: transparent;
    }

    body.iv-backoffice-layout::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: color-mix(in srgb, var(--role-accent, #0d5f6a) 34%, transparent);
    }

    body.iv-backoffice-layout::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--role-accent, #0d5f6a) 48%, transparent);
    }

    .sidebar-menu {
        overflow-x: hidden !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .28) transparent;
    }

    .sidebar-menu::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-menu::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(255, 255, 255, .24);
    }

    .dash-header .mobile-header-greeting.d-flex.d-lg-none {
        display: none !important;
    }
}

@media screen and (max-width: 991px) {

    /* Header: reduce padding to stop crowding */
    .dash-header {
        padding: 12px 20px;
    }

    .top-header {
        padding: 10px 20px;
    }

    /* Welcome title: already hidden by d-none d-lg-block in HTML.
       Belt-and-suspenders CSS hide in case it's rendered elsewhere */
    .wlcm-title,
    .tgl-button {
        display: none !important;
    }

    /* Header right: tighten gap on tablet */
    .header-rightside {
        gap: 16px;
    }

    /* Notification dropdown: prevent overflow on tablets */
    .notification-dropdown {
        width: 340px;
        right: -10px;
    }

    /* Profile dropdown: force it to align right */
    .header-profile .dropdown-menu {
        right: 0 !important;
        left: auto !important;
    }

    /* Main content: already margin-left:0 via existing rule.
       Ensure no horizontal overflow from inner content */
    .main-content {
        overflow-x: hidden;
    }

    /* Offcanvas sidebar: dropdown menus must be static (not absolute) */
    .mobile-menu .sidebar .dropdown-menu {
        position: static !important;
        transform: none !important;
        background: rgba(0, 0, 0, 0.15);
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin-left: 40px !important;
    }

    .mobile-menu .sidebar .dropdown-item {
        padding: 8px 15px;
        color: rgba(255, 255, 255, 0.75);
        font-size: 13px;
        border-radius: 0;
    }

    .mobile-menu .sidebar .dropdown-item:hover,
    .mobile-menu .sidebar .dropdown-item.active {
        background-color: color-mix(in srgb, var(--role-accent, #01B8B6) 25%, transparent) !important;
        color: #fff !important;
    }

    /* Offcanvas: make the inner sidebar fill height properly */
    .mobile-menu .offcanvas-body {
        padding: 0;
        overflow-y: auto;
    }

    .mobile-menu .sidebar {
        position: static;
        width: 100%;
        height: auto;
        min-height: 100%;
        background: none;
        z-index: auto;
    }

    /* sidebar-menu inside offcanvas: allow natural scroll */
    .mobile-menu .sidebar .sidebar-menu {
        height: auto;
        overflow: visible;
        padding: 15px 15px 30px;
    }

    /* Switch wrapper inside offcanvas */
    .mobile-menu .sidebar .sidebar-switch-wrapper {
        margin: 0;
        padding: 12px 15px;
    }
}


/* ============================================================
   SMALL TABLET / LARGE PHONE (576px – 767px)
   ============================================================ */

@media screen and (max-width: 767px) {

    /* Notification dropdown: wider to fit content */
    .notification-dropdown {
        width: 310px;
        right: -5px;
    }

    /* Page-head: allow buttons to wrap */
    .page-head {
        flex-wrap: wrap;
        gap: 10px;
    }

    .page-head .d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Form row: single column on tablet */
    .team-form {
        max-width: 100%;
    }

    /* Top header: wrap on smaller tablets */
    .top-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px;
        padding: 8px 16px;
    }

    .top-header p {
        font-size: 13px;
        margin: 0;
    }

    .top-header .exit {
        align-self: flex-end;
    }

    /* DataTables: make controls wrap on tablet */
    .dataTables_wrapper .dt-top {
        flex-wrap: wrap;
        gap: 10px;
    }

    .dataTables_length,
    .dataTables_filter {
        width: 100%;
    }

    .dataTables_filter input {
        width: 100%;
        max-width: 100%;
    }
}


/* ============================================================
   PHONE (max-width: 575px)
   Existing rules cover most of this — we add missing pieces.
   ============================================================ */

@media screen and (max-width: 575px) {

    /* ---- Notification dropdown: full viewport width ---- */
    .notification-dropdown {
        width: calc(100vw - 30px);
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        /* Center it relative to viewport */
        position: fixed;
        top: 70px;
        border-radius: 14px;
    }

    /* If top-header is showing, push notification dropdown down */
    .top-header ~ * .notification-dropdown,
    body:has(.top-header) .notification-dropdown {
        top: 130px;
    }

    /* ---- Header: prevent overflow ---- */
    .dash-header {
        overflow: visible; /* needed for dropdown */
        position: sticky;
        top: 0;
        z-index: 100;
    }

    /* top-header already sticky with z-index 1111 */
    /* Push dash-header below top-header when both visible */
    .top-header + * .dash-header,
    .top-header ~ div .dash-header {
        top: 0;
    }

    /* ---- Header right side: tightest gap ---- */
    .header-rightside {
        gap: 8px !important;
    }

    /* ---- Language switcher: minimal on small screens ---- */
    .notification-wrp .dropdown-toggle {
        padding: 4px 8px;
        font-size: 11px;
    }

    /* ---- User display name: hide on very small phones ---- */
    .header-profile .d-none.d-lg-block {
        display: none !important;
    }

    /* Already d-none d-lg-block in HTML, ensure consistency */

    /* ---- Notification bell icon: smaller ---- */
    #bellIcon svg {
        width: 22px;
        height: 22px;
    }

    /* ---- Profile avatar: already 40px from existing, keep consistent ---- */
    .header-profile > .rounded-circle,
    .user-initials-avatar {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
    }

    /* ---- Mobile search bar: slide in below header ---- */
    .mobile-searchbar {
        position: absolute;
        width: 100%;
        left: 0;
        top: 100%;
        padding: 12px 16px;
        background: #e5f4f4;
        z-index: 200;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-bottom: 1px solid #c8e6e7;
    }

    /* Existing CSS sets display:none — JS toggle adds .searchbar-collapse to header */
    /* The existing rule: .searchbar-collapse .mobile-searchbar { display: block } handles show */

    /* ---- Main content: no horizontal scroll ---- */
    .main-content {
        overflow-x: hidden;
    }

    /* ---- Row columns: force single column on very small phones ---- */
    .row.g-3 > [class*="col-sm-6"],
    .row.g-4 > [class*="col-sm-6"] {
        width: 100%;
    }

    /* ---- Action buttons in tables: keep small ---- */
    .action-button {
        gap: 6px;
        flex-wrap: wrap;
    }

    .action-button .action-btn {
        height: 30px;
        width: 30px;
    }

    .action-button .action-btn svg {
        width: 14px;
        height: 14px;
    }

    /* ---- DataTable: pagination wraps ---- */
    .dataTables_wrapper .dataTables_paginate {
        margin-top: 10px;
    }

    /* ---- Modal: safe margins ---- */
    .modal-dialog {
        margin: 12px;
        max-width: calc(100vw - 24px);
    }

    /* ---- SweetAlert: safe on small phones ---- */
    .swal2-popup {
        padding: 20px 16px !important;
        font-size: 14px !important;
    }

    /* ---- Top header: compact ---- */
    .top-header {
        padding: 8px 12px;
    }

    /* ---- Card head: round corners consistent ---- */
    .card-head {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    /* ---- Switch dropdown: full width ---- */
    .switch-dropdown {
        left: 8px;
        right: 8px;
    }

    /* ---- Toastr: top center on phones ---- */
    #toast-container {
        top: 12px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        transform: none !important;
    }

    #toast-container > div {
        width: 100% !important;
        border-radius: 10px !important;
        margin-bottom: 6px !important;
        position: static !important;
    }

    /* ---- Form inputs: prevent iOS zoom (font-size must be >= 16px) ---- */
    .form-control,
    .form-select,
    .select2-search__field {
        font-size: 16px !important;
    }

    /* ---- Nav pills: horizontal scroll ---- */
    .main-content .nav-pills {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 4px;
        scrollbar-width: none; /* Firefox */
    }

    .main-content .nav-pills::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .main-content .nav-pills .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
}


/* ============================================================
   EXTRA SMALL PHONE (max-width: 400px)
   Already has avatar fix in existing CSS. We add missing pieces.
   ============================================================ */

@media screen and (max-width: 400px) {

    /* Header: minimum viable layout */
    .dash-header {
        padding: 8px 10px;
    }

    .header-rightside {
        gap: 6px !important;
    }

    /* Language toggle: icon only */
    .notification-wrp .dropdown-toggle {
        padding: 4px 6px;
    }

    #current-lang {
        font-size: 11px;
    }

    /* Chevron beside language: hide */
    .notification-wrp .dropdown-toggle .fa-angle-down {
        display: none;
    }

    /* Logo: smaller */
    .dash-header .main-logo img {
        height: 40px !important;
    }

    /* Mobile toggle button */
    .mobile-toggle {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    .mobile-toggle svg {
        width: 13px;
    }

    /* Avatar: smallest */
    .header-profile > .rounded-circle,
    .user-initials-avatar,
    .header-profile img,
    .profile-picture {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 12px !important;
    }

    /* Dropdown button in profile */
    .header-profile .dropdown button {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    /* Notification count badge: tiny */
    .ntf-count {
        width: 14px;
        height: 14px;
        font-size: 9px;
        right: -6px;
        top: -6px;
    }

    /* Top header */
    .top-header {
        padding: 6px 10px;
        font-size: 12px;
    }

    .top-header p {
        font-size: 12px;
    }

    .top-header .exit {
        font-size: 12px;
    }

    .top-header .exit svg {
        width: 18px;
        height: 18px;
    }

    /* Main content */
    .main-content {
        padding: 20px 10px;
    }

    /* Cards */
    .dash-box,
    .inner-card,
    .card-body {
        padding: 12px;
    }
}


/* ============================================================
   LANDSCAPE PHONE (height < 500px, width > 500px)
   Prevents layout from collapsing when phone is rotated.
   ============================================================ */

@media screen and (max-height: 500px) and (orientation: landscape) {

    .sidebar {
        overflow-y: auto;
    }

    .sidebar-menu {
        height: auto;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        padding-bottom: 20px;
    }

    .dash-header {
        position: relative;  
    }

    .top-header {
        position: relative;
    }

    .notification-dropdown {
        top: 50px;
        max-height: 60vh;
    }

    .notification-all {
        max-height: 45vh;
    }
}


/* ============================================================
   PRINT MEDIA
   ============================================================ */

@media print {
    .sidebar,
    .dash-header,
    .top-header,
    .mobile-toggle,
    .mobile-menu,
    .notification-dropdown,
    .header-rightside,
    .sidebar-switch-wrapper {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
}