/* ============================================
   PM Intelligence — MASTER RESPONSIVE CSS
   Fixes 13 Issues: Mobile-First, Force-Override
   ============================================ */

/* ============================================
   FIX 0: GLOBAL RESET & BOX-SIZING
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Force all containers to respect viewport */
div, section, aside, main, header, footer, nav, article, form, fieldset {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* ============================================
   FIX 1: FORM "ADD PROJECT" RESPONSIVE
   Form inputs stack vertically on mobile
   ============================================ */

/* Filter form in projects.php */
@media (max-width: 767px) {
    /* Force filter form to single column */
    form.grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Filter buttons: full width */
    form.grid .flex.items-end {
        flex-direction: column !important;
        gap: 8px !important;
    }

    form.grid .flex.items-end > button,
    form.grid .flex.items-end > a {
        width: 100% !important;
        text-align: center;
        padding: 12px 16px !important;
        min-height: 44px;
    }

    /* Labels: larger, more readable */
    form label,
    form.grid label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
        display: block;
    }

    /* Inputs: full width, 16px to prevent iOS zoom */
    form.grid input[type="text"],
    form.grid input[type="number"],
    form.grid input[type="search"],
    form.grid input[type="date"],
    form.grid input[type="month"],
    form.grid select,
    form.grid textarea {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
        min-height: 44px;
        border-radius: 10px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    /* Tablet: 2 columns for filter form */
    form.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* Add Project Modal Form — responsive grid */
@media (max-width: 767px) {
    #projectForm .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #projectForm .grid > div {
        grid-column: span 1 !important;
    }

    #projectForm label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        display: block;
        font-weight: 700;
    }

    #projectForm input,
    #projectForm select,
    #projectForm textarea {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
        min-height: 44px;
        border-radius: 10px;
    }

    /* Submit/Cancel buttons: full width, stacked */
    #projectForm .flex.items-center.gap-3 {
        flex-direction: column !important;
        gap: 8px !important;
    }

    #projectForm .flex.items-center.gap-3 > button,
    #projectForm .flex.items-center.gap-3 > a {
        width: 100% !important;
        text-align: center;
        padding: 14px 20px !important;
        min-height: 48px;
        font-size: 15px !important;
    }
}


/* ============================================ */
/* FIX: Freeze Kolom Pertama (Header + Data)   */
/* Target: .table-wrapper th:first-child        */
/*         .table-wrapper td:first-child        */
/* ============================================ */

/* --- Container: pastikan sticky bisa bekerja --- */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* --- Fix border-collapse agar box-shadow muncul --- */
.table-wrapper table {
    border-collapse: separate;
    border-spacing: 0;
}

/* ============================================ */
/* 1. Semua elemen kolom pertama: sticky left  */
/* ============================================ */
.table-wrapper th:first-child,
.table-wrapper td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    border-right: 2px solid #94a3b8;
    -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
}

/* ============================================ */
/* 2. HEADER kolom pertama: z-index paling atas */
/* ============================================ */
.table-wrapper th:first-child {
    z-index: 10;
    background: #f1f5f9;
}

/* ============================================ */
/* 3. DATA kolom pertama: z-index menengah      */
/* ============================================ */
.table-wrapper td:first-child {
    z-index: 5;
    background: #ffffff;
}

/* ============================================ */
/* 4. HEADER kolom LAINNYA: z-index di bawah   */
/*    (supaya tidak menutupi th:first-child)   */
/* ============================================ */
.table-wrapper th:not(:first-child) {
    z-index: 3;
    background: #f8fafc;
}

/* ============================================ */
/* 5. DATA kolom LAINNYA: z-index paling bawah */
/* ============================================ */
.table-wrapper td:not(:first-child) {
    z-index: 1;
}

/* ============================================ */
/* 6. Hover: efek highlight pada kolom beku    */
/* ============================================ */
.table-wrapper tbody tr:hover td:first-child {
    background: #eff6ff;
}

/* ============================================ */
/* 7. Touch device: active state bukan hover   */
/* ============================================ */
@media (hover: none) and (pointer: coarse) {
    .table-wrapper tbody tr:active td:first-child {
        background: #f1f5f9;
    }
}

/* ============================================ */
/* BACKWARD COMPAT: .tbl-scroll / .tbl-freeze-* */
/* Untuk PHP files yang sudah pakai class lama  */
/* ============================================ */

/* Container lama */
.tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.tbl-scroll table {
    border-collapse: separate;
    border-spacing: 0;
}

/* Frozen HEADER lama */
.tbl-freeze-head,
th.tbl-freeze-head {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important;
    background: #f1f5f9 !important;
    border-right: 2px solid #94a3b8 !important;
    -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
}

/* Frozen DATA lama */
.tbl-freeze-col,
td.tbl-freeze-col {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background: #ffffff !important;
    border-right: 2px solid #94a3b8 !important;
    -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
}

/* Hover state for frozen data cells */
.tbl-scroll tbody tr:hover .tbl-freeze-col {
    background: #eff6ff !important;
}

@media (hover: none) and (pointer: coarse) {
    .tbl-scroll tbody tr:active .tbl-freeze-col {
        background: #f1f5f9 !important;
    }
}

/* ============================================ */
/* DataTables wrapper: izinkan sticky columns   */
/* ============================================ */
.dataTables_wrapper .dataTables_scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper table {
    border-collapse: separate;
    border-spacing: 0;
}

.dataTables_wrapper .tbl-freeze-head,
.dataTables_wrapper th.tbl-freeze-head {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important;
    background: #f1f5f9 !important;
    border-right: 2px solid #94a3b8 !important;
    -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
}

.dataTables_wrapper .tbl-freeze-col,
.dataTables_wrapper td.tbl-freeze-col {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background: #ffffff !important;
    border-right: 2px solid #94a3b8 !important;
    -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
}


/* ============================================
   FIX 3: FILTER SECTION — WRAP, NO OVERLAP
   Flexbox wrap with proper gaps
   ============================================ */
@media (max-width: 767px) {
    /* Filter container header row */
    .flex.items-center.justify-between.mb-3 {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* "Add Project" button */
    .flex.items-center.justify-between.mb-3 > button,
    .flex.items-center.justify-between.mb-3 > a {
        min-height: 44px;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    /* Filter badge pills (e.g., "Filter: 2024-01") */
    .inline-flex.items-center.gap-1.text-\[11px\] {
        font-size: 12px !important;
        padding: 6px 12px !important;
        min-height: 36px;
    }
}

/* Desktop filter form: ensure flex-wrap works */
form.grid {
    display: grid !important;
}


/* ============================================
   FIX 4: SIDEBAR MENU — ALIGN ICONS
   Consistent icon width and vertical alignment
   ============================================ */
.sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.sidebar-link i,
.sidebar-link .bi {
    width: 24px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    font-size: 16px;
}

/* Mobile: slightly smaller sidebar items */
@media (max-width: 767px) {
    .sidebar-link {
        padding: 12px 14px !important;
        min-height: 44px;
        font-size: 14px !important;
    }

    .sidebar-link i,
    .sidebar-link .bi {
        width: 22px !important;
        font-size: 15px;
    }

    /* Section labels in sidebar */
    .sidebar-link + div.text-\[11px\],
    nav > div.text-\[11px\] {
        font-size: 11px !important;
        padding: 8px 14px 4px !important;
    }
}


/* ============================================
   FIX 5: TABLES — SMALLER FONT & PADDING
   Mobile-first table sizing
   ============================================ */
@media (max-width: 767px) {
    /* All tables: smaller font, tighter padding */
    table td,
    table th {
        font-size: 13px !important;
        padding: 6px 8px !important;
    }

    /* Project table specific */
    #projectTable td,
    #projectTable th {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }

    #projectTable th.th-project {
        min-width: 160px !important;
        font-size: 12px !important;
    }

    #projectTable td.td-project-name {
        font-size: 12px !important;
    }

    #projectTable td.td-meta {
        font-size: 11px !important;
    }

    /* DataTables default table */
    table.dataTable tbody td {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    table.dataTable thead th {
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    /* Milestone icons in table */
    #projectTable span[style*="width:22px"] {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
    }

    /* Ranking buttons */
    .ranking-btn {
        width: 28px !important;
        height: 22px !important;
        font-size: 9px !important;
    }

    /* Edit button */
    .edit-btn {
        width: 34px !important;
        height: 34px !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    table td,
    table th {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    table.dataTable tbody td {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
}


/* ============================================
   FIX 6: SKELETON LOADING & MIN-HEIGHT
   Prevent layout shift during data fetch
   ============================================ */

/* Skeleton shimmer animation */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

/* Minimum heights for layout stability */
.stat-card {
    min-height: 80px;
}

.grid .stat-card,
.grid-cols-4 > *,
.grid-cols-3 > *,
.grid-cols-2 > * {
    min-height: 80px;
}

/* Table container min-height */
.tbl-scroll,
.table-responsive,
div.dataTables_wrapper {
    min-height: 200px;
}

/* Chart container min-height */
canvas {
    min-height: 150px;
}

/* Filter form container */
.bg-white.rounded-2xl.border {
    min-height: 60px;
}

/* Empty state placeholder */
.bg-white.rounded-2xl.border .p-8.text-center {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================
   FIX 7: SCROLL-TO-TOP BUTTON
   Fixed position, proper size, smooth show/hide
   ============================================ */
#scrollTopBtn {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 999 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

#scrollTopBtn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 767px) {
    #scrollTopBtn {
        width: 48px !important;
        height: 48px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
}


/* ============================================
   FIX 8 & 9: MOBILE-FIRST GLOBAL ENHANCEMENTS
   Touch targets, responsive everywhere
   ============================================ */

/* Minimum touch target for ALL interactive elements */
button,
a,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select,
textarea,
.tab-btn,
.sidebar-link {
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Override any tiny buttons */
@media (max-width: 767px) {
    button,
    [role="button"],
    input[type="button"],
    input[type="submit"] {
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        min-height: 44px;
    }

    /* All links that act as buttons */
    a.inline-flex,
    a.flex,
    a[href]:not([href^="#"]):not([href^="javascript"]) {
        min-height: 44px;
    }

    /* Tab buttons (personnel page) */
    .tab-btn,
    [class*="px-6"][class*="py-3"] {
        min-height: 48px !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    /* Filter buttons in personnel page */
    .inline-flex.items-center.gap-1[class*="px-3"][class*="py-1"] {
        min-height: 40px;
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    /* Pagination buttons */
    .paginate_button a,
    .page-link {
        min-height: 40px;
        min-width: 40px;
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
}

/* Touch feedback */
@media (hover: none) and (pointer: coarse) {
    button:active,
    a:active,
    [role="button"]:active,
    .sidebar-link:active {
        opacity: 0.7;
        transform: scale(0.97);
        transition: all 0.1s;
    }

    .stat-card:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}


/* ============================================
   FIX 10: MODAL "ADD PROJECT" RESPONSIVE
   Near-fullscreen on mobile, proper scroll
   ============================================ */
@media (max-width: 767px) {
    #projectModal .absolute.top-1\/2 {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        border-radius: 16px !important;
    }

    /* Modal header */
    #projectModal .px-5.py-4 {
        padding: 14px 16px !important;
        min-height: 52px;
    }

    #projectModal .px-5.py-4 .text-sm {
        font-size: 15px !important;
    }

    /* Modal body scroll */
    #projectModal .overflow-y-auto {
        padding: 16px !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Close button in modal */
    #projectModal .w-9.h-9 {
        width: 44px !important;
        height: 44px !important;
    }

    /* Analysis table inside modal: scrollable */
    #projectModal .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    #projectModal .overflow-x-auto table {
        min-width: 600px;
    }
}

/* Detail modal also responsive */
@media (max-width: 767px) {
    #detailModal .absolute {
        inset: 8px !important;
        border-radius: 16px !important;
    }

    #detailModal .px-4,
    #detailModal .px-5 {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #detailModal .py-3,
    #detailModal .py-4 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    #detailModal .w-10.h-10 {
        width: 44px !important;
        height: 44px !important;
    }

    #detailModal .p-3,
    #detailModal .p-5 {
        padding: 14px !important;
    }
}

/* Add User Modal responsive */
@media (max-width: 767px) {
    #addUserModal .max-w-sm {
        width: calc(100% - 32px) !important;
        max-height: 85vh;
    }

    #addUserModal .-translate-x-1\/2.-translate-y-1\/2 {
        transform: translate(-50%, -50%) !important;
    }

    #addUserModal .p-5 {
        padding: 16px !important;
    }

    #addUserModal .flex.items-center.gap-3 {
        flex-direction: column;
        gap: 8px;
    }

    #addUserModal .flex.items-center.gap-3 > button,
    #addUserModal .flex.items-center.gap-3 > a {
        width: 100%;
        text-align: center;
    }
}


/* ============================================
   FIX 11: DROPDOWN NOT CUT BY OVERFLOW
   Ensure cbx-list dropdowns are visible
   ============================================ */

/* Remove overflow:hidden from containers that have dropdowns */
.cbx-wrap {
    position: relative;
    overflow: visible !important;
}

/* Ensure dropdown list is never clipped */
.cbx-list {
    position: absolute !important;
    z-index: 50 !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
}

/* On mobile, make dropdown larger for easier tapping */
@media (max-width: 767px) {
    .cbx-list {
        max-height: 280px;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .cbx-list .cbx-item,
    .cbx-list div[class*="cursor-pointer"],
    .cbx-list label,
    .cbx-list > div > div {
        padding: 12px 14px !important;
        font-size: 15px !important;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Fix: any container with overflow:hidden that wraps a cbx-wrap */
.bg-white.rounded-2xl.border:has(.cbx-wrap) {
    overflow: visible !important;
}

/* Explicit fix for filter container */
.bg-white.rounded-2xl.border.border-slate-100.shadow-sm.p-4,
.bg-white.rounded-2xl.border.border-slate-100.shadow-sm.p-5 {
    overflow: visible !important;
}


/* ============================================
   FIX 12: PAGINATION — RESPONSIVE
   Flex wrap, smaller on mobile
   ============================================ */
@media (max-width: 767px) {
    /* DataTables pagination container */
    div.dataTables_wrapper div.dataTables_paginate {
        padding-top: 12px !important;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item {
        margin: 0 !important;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item a {
        font-size: 13px !important;
        padding: 6px 10px !important;
        min-height: 36px;
        min-width: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px !important;
    }

    /* DataTables info text */
    div.dataTables_wrapper div.dataTables_info {
        font-size: 12px !important;
        padding-top: 8px !important;
        text-align: center;
    }

    /* Search input in DataTables */
    div.dataTables_wrapper div.dataTables_filter input {
        width: 140px !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
        min-height: 44px;
    }

    /* Length menu select */
    div.dataTables_wrapper div.dataTables_length select {
        font-size: 16px !important;
        padding: 10px 12px !important;
        min-height: 44px;
    }
}


/* ============================================
   FIX 13: LAYOUT SHIFT PREVENTION
   Min-heights for all major sections
   ============================================ */

/* Dashboard metric cards */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4,
.grid.grid-cols-3,
.grid.grid-cols-2 {
    min-height: 100px;
}

/* Chart containers */
.bg-white.rounded-2xl.border.border-slate-100.shadow-sm.overflow-hidden {
    min-height: 120px;
}

/* Table containers */
.bg-white.rounded-2xl.border.border-slate-200,
.bg-white.rounded-2xl.border.border-slate-100.shadow-sm {
    min-height: 100px;
}

/* Specific sections */
.mb-6 {
    min-height: 0;
}

/* Canvas charts */
canvas {
    min-height: 180px;
}

/* Stat card with minimum height */
.stat-card {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ensure skeleton class works */
.skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-circle {
    border-radius: 50%;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}


/* ============================================
   TYPOGRAPHY — TOUCH-FRIENDLY MINIMUMS
   ============================================ */
@media (max-width: 767px) {
    body {
        line-height: 1.6;
    }

    /* Enforce minimum readable font sizes */
    p, span, div, li, td, th, label, a, strong, em, small {
        font-size: max(var(--tw-text-base, 1rem), 15px);
    }

    /* Override Tailwind's tiny text utilities */
    .text-\[9px\]  { font-size: 11px !important; }
    .text-\[10px\] { font-size: 12px !important; }
    .text-\[11px\] { font-size: 12px !important; }
    .text-xs       { font-size: 13px !important; line-height: 1.5; }
    .text-sm       { font-size: 14px !important; line-height: 1.5; }
    .text-base     { font-size: 15px !important; line-height: 1.5; }
    .text-lg       { font-size: 17px !important; line-height: 1.4; }
    .text-xl       { font-size: 19px !important; line-height: 1.4; }
    .text-2xl      { font-size: 22px !important; line-height: 1.3; }
    .text-3xl      { font-size: 26px !important; line-height: 1.2; }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .text-\[10px\] { font-size: 11px !important; }
    .text-\[11px\] { font-size: 12px !important; }
    .text-xs       { font-size: 13px !important; }
    .text-sm       { font-size: 14px !important; }
}


/* ============================================
   FORMS & INPUTS — iOS ZOOM PREVENTION
   ============================================ */
@media (max-width: 767px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="month"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
        padding: 12px 14px !important;
        min-height: 44px;
        border-radius: 10px;
        width: 100%;
    }

    /* DataTables inputs */
    .dataTables_wrapper input,
    .dataTables_wrapper select {
        font-size: 16px !important;
        padding: 10px 12px !important;
        min-height: 44px;
    }
}


/* ============================================
   SIDEBAR — MOBILE HAMBURGER MENU
   ============================================ */
@media (max-width: 1023px) {
    #sidebar {
        width: 280px !important;
        max-width: 85vw;
        z-index: 50;
    }

    #sidebarOverlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
        transition: opacity 0.25s;
    }

    #mainContent {
        margin-left: 0 !important;
    }
}


/* ============================================
   CHART CONTAINERS
   ============================================ */
canvas {
    max-width: 100%;
    height: auto !important;
}

.chart-container,
canvas {
    width: 100% !important;
}


/* ============================================
   ACCORDION / COLLAPSIBLE
   ============================================ */
@media (max-width: 767px) {
    .accordion-button,
    [data-bs-toggle="collapse"] {
        min-height: 48px;
        padding: 14px 16px !important;
        font-size: 15px !important;
    }
}


/* ============================================
   UTILITY CLASSES
   ============================================ */
.no-overflow-x {
    overflow-x: hidden;
}

.mobile-stack {
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .mobile-stack {
        flex-direction: row;
    }
}

.mobile-full {
    width: 100%;
}

.mobile-padded {
    padding: 12px;
}


/* ============================================
   SAFARI / iOS FIXES
   ============================================ */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-overflow-scrolling: touch;
    }

    input, select, textarea {
        font-size: 16px !important;
    }
}


/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    #sidebar,
    #sidebarOverlay,
    #scrollTopBtn,
    .no-print {
        display: none !important;
    }

    #mainContent {
        margin-left: 0 !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}