/* =============================================================
   RESPONSIVE.CSS — Mobile-first overrides for DoableFinal
   Breakpoints: xs <576  sm 576  md 768  lg 992  xl 1200
   ============================================================= */

/* ------------------------------------------------------------------
   1. GLOBAL RESETS
   ------------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Prevent any element from ever causing horizontal scroll */
.wrapper, #content, .content-wrapper, .container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

/* ------------------------------------------------------------------
   2. SIDEBAR — mobile overlay behaviour (works with sidebar.css)
   ------------------------------------------------------------------ */
/* Close btn always visible when sidebar is open on mobile */
#sidebarCollapse {
    display: none;
}

@media (max-width: 768px) {
    #sidebarCollapse {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,0.85);
        font-size: 1.3rem;
        padding: 0;
        background: transparent;
        border: none;
        margin-left: auto;
    }

    /* Tap on overlay = close sidebar */
    #content.active::before {
        cursor: pointer;
    }

    /* Hamburger button in topbar */
    #sidebarCollapseShow {
        font-size: 1.3rem;
        color: #1a3060;
        padding: 4px 8px;
    }
}

/* ------------------------------------------------------------------
   3. TOPBAR NAVBAR
   ------------------------------------------------------------------ */
#content .navbar {
    padding: 8px 12px;
}

@media (max-width: 576px) {
    #content .navbar .navbar-text {
        font-size: 13px;
        max-width: calc(100vw - 140px);
    }
}

/* ------------------------------------------------------------------
   4. CARDS — full width, smaller padding on mobile
   ------------------------------------------------------------------ */
@media (max-width: 576px) {
    .card {
        border-radius: 8px;
    }

    .card-body {
        padding: 12px;
    }

    .card-header {
        padding: 10px 12px;
    }
}

/* ------------------------------------------------------------------
   5. STAT CARDS
   ------------------------------------------------------------------ */
@media (max-width: 576px) {
    .stat-card {
        padding: 1rem;
        min-height: 130px;
    }

    .stat-card .stat-value {
        font-size: 1.6rem;
    }

    .stat-card .stat-icon {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
}

/* ------------------------------------------------------------------
   6. TABLES — fit entirely within the screen, no horizontal scroll
   ------------------------------------------------------------------ */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* table-fit-screen: columns shrink proportionally so the whole table
   — including the Actions column — stays visible without needing to
   scroll right. Used on task tables where Actions was previously the
   last column and got pushed off-screen. */
.table-fit-screen {
    table-layout: fixed;
    width: 100%;
}

.table-fit-screen td,
.table-fit-screen th {
    white-space: normal;       /* allow wrapping instead of forcing overflow */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    vertical-align: middle;
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
}

.table-fit-screen .actions-col {
    width: 88px;
    text-align: center;
    white-space: nowrap;
}

.table-fit-screen .actions-col .btn,
.table-fit-screen .actions-col a {
    padding: 0.2rem 0.4rem;
    font-size: 0.78rem;
}

/* On narrow screens, drop to icon-only action buttons so the column
   stays compact and never forces a scrollbar */
@media (max-width: 1024px) {
    .table-fit-screen .actions-col .btn-text {
        display: none;
    }
}

/* Non-essential columns disappear before Actions ever needs to shrink
   below a usable width — keeps Title/Status/Priority/Actions visible
   at all times, this matches col-hide-sm/col-hide-xs used elsewhere */
@media (max-width: 768px) {
    .table-fit-screen { table-layout: auto; } /* mobile uses the card layout instead */
}

@media (max-width: 768px) {
    /* Slightly smaller font inside tables on mobile */
    .table.table-sm td,
    .table.table-sm th {
        font-size: 0.78rem;
        padding: 6px 8px;
    }

    .dashboard-td {
        height: 40px !important;
    }

    /* Hide lower-priority columns on small screens */
    .col-hide-sm {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .col-hide-xs {
        display: none !important;
    }
}

/* ------------------------------------------------------------------
   6b. TABLES — mobile card layout (labels from data-label via JS)
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Hide header row — labels injected via JS + data-label attr */
    .table thead {
        display: none;
    }

    /* Each row = its own card */
    .table tbody tr {
        display: block;
        border: 1px solid rgba(52, 125, 235, 0.10);
        border-radius: 12px;
        margin-bottom: 0.75rem;
        padding: 0.15rem 0;
        box-shadow: 0 1px 8px rgba(52, 125, 235, 0.06);
        background: #fff;
    }

    /* Each cell = label on left, value on right */
    .table tbody td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 0.55rem 1rem;
        border-bottom: 1px solid rgba(52, 125, 235, 0.06);
        font-size: 0.85rem;
        height: auto !important;  /* override dashboard-td fixed height on mobile */
        white-space: normal !important;
    }

    .table tbody td:last-child {
        border-bottom: none;
    }

    /* The column label (from data-label attribute set by JS) */
    .table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b84b0;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        text-align: left;
        flex-shrink: 0;
        margin-right: 0.75rem;
        max-width: 45%;
    }

    /* Don't apply card style to thead rows that may still render */
    .table thead tr {
        display: none;
    }

    /* Remove table-responsive horizontal scroll — card layout doesn't need it */
    .table-responsive {
        overflow-x: visible;
    }

    /* Pagination wrapper stays below the cards */
    .table-pagination-wrapper {
        border-radius: 12px;
        margin-bottom: 0.5rem;
    }
}

/* ------------------------------------------------------------------
   7. FORMS — full width inputs, stacked rows on mobile
   ------------------------------------------------------------------ */
@media (max-width: 576px) {
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"] {
        /* let Bootstrap's col-12 default take over on xs */
    }

    .form-control,
    .form-select {
        font-size: 0.9rem;
    }

    /* Stack form action buttons */
    .d-grid.gap-2 .btn {
        font-size: 0.9rem;
    }

    /* Ensure select2 doesn't overflow */
    .select2-container {
        width: 100% !important;
    }
}

/* ------------------------------------------------------------------
   8. BUTTONS — touch-friendly tap targets
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .btn {
        min-height: 38px;
    }

    .btn-sm {
        min-height: 32px;
        font-size: 0.8rem;
    }

    /* Action button groups in card headers */
    .card-header .btn-sm {
        padding: 4px 10px;
    }
}

/* ------------------------------------------------------------------
   9. BADGES — readable on mobile
   ------------------------------------------------------------------ */
@media (max-width: 576px) {
    .badge {
        font-size: 0.7rem;
        padding: 3px 6px;
    }
}

/* ------------------------------------------------------------------
   10. PAGINATION WRAPPER
   ------------------------------------------------------------------ */
@media (max-width: 576px) {
    .table-pagination-wrapper {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
        font-size: 0.75rem;
    }

    .table-pagination-wrapper .table-page-size {
        width: 55px;
    }
}

/* ------------------------------------------------------------------
   11. MODALS — full screen on mobile
   ------------------------------------------------------------------ */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
    }

    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }
}

/* ------------------------------------------------------------------
   12. DETAIL / INFO PANELS (task details, project details)
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Stack two-column info grids */
    .info-grid {
        grid-template-columns: 1fr !important;
    }

    /* Meta info rows in cards */
    .detail-meta {
        flex-direction: column;
        gap: 8px;
    }
}

/* ------------------------------------------------------------------
   13. PAGE HEADERS — compact on mobile
   ------------------------------------------------------------------ */
@media (max-width: 576px) {
    h1.h3 {
        font-size: 1.2rem;
    }

    .page-header-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Stack header row if needed */
    .row.mb-3 > .col,
    .row.mb-4 > .col {
        min-width: 0;
    }
}

/* ------------------------------------------------------------------
   14. DASHBOARD CHART — don't let canvas overflow
   ------------------------------------------------------------------ */
#taskStatusChart {
    max-width: 100% !important;
}

@media (max-width: 576px) {
    #taskStatusChart {
        max-height: 180px !important;
    }
}

/* ------------------------------------------------------------------
   15. PROJECT / TASK CARDS IN LIST VIEWS
   ------------------------------------------------------------------ */
@media (max-width: 576px) {
    /* Full-width list items */
    .list-group-item {
        padding: 10px 12px;
    }

    .list-group-item h6 {
        font-size: 0.85rem;
    }
}

/* ------------------------------------------------------------------
   16. REPORTS
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Charts in reports */
    .apexcharts-canvas {
        max-width: 100% !important;
    }

    /* Report filter rows */
    .report-filters .row > div {
        margin-bottom: 8px;
    }
}

/* ------------------------------------------------------------------
   17. NOTIFICATIONS LIST
   ------------------------------------------------------------------ */
@media (max-width: 576px) {
    .notification-item {
        flex-direction: column;
        gap: 6px;
    }

    .notification-item .notification-time {
        font-size: 0.7rem;
    }
}

/* ------------------------------------------------------------------
   18. PROFILE PAGE
   ------------------------------------------------------------------ */
@media (max-width: 576px) {
    .profile-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ------------------------------------------------------------------
   19. TICKET & INQUIRY TABLES
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Hide less-critical ticket columns */
    .tickets-table .col-hide-md {
        display: none !important;
    }
}

/* ------------------------------------------------------------------
   20. CMS / VISUAL EDITOR
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .cms-editor-toolbar {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* ------------------------------------------------------------------
   21. PRINT — hide sidebar
   ------------------------------------------------------------------ */
@media print {
    #sidebar,
    #sidebarCollapseShow,
    .navbar,
    .btn,
    .table-pagination-wrapper {
        display: none !important;
    }

    #content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .content-wrapper {
        padding: 0 !important;
    }
}

/* ------------------------------------------------------------------
   22. TOUCH — larger tap targets for interactive elements
   ------------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
    /* Sidebar nav links */
    .sidebar ul.components li a {
        padding: 12px 14px;
    }

    /* Table sort arrows */
    .sort-asc, .sort-desc {
        padding: 6px;
    }

    /* Select dropdowns */
    select.form-select {
        min-height: 42px;
    }

    input.form-control {
        min-height: 42px;
    }
}

/* ------------------------------------------------------------------
   23. FLUID FIT-TO-SCREEN — phones & tablets only (max-width: 1024px)
   Desktop/laptop/monitor (1025px+) uses the LOCKED block further below
   instead — nothing in that range may use vw/clamp(), since any
   viewport-relative unit recalculates as zoom changes the effective
   viewport width, causing the layout to visibly shift when zoomed.
   ------------------------------------------------------------------ */

/* Never allow ANY element to force horizontal scroll on the page */
img, video, iframe, canvas, svg, table, .card, .modal-content {
    max-width: 100%;
}

@media (max-width: 1024px) {
    /* Containers scale fluidly instead of jumping at fixed breakpoints */
    .container-fluid {
        padding-left: clamp(10px, 2vw, 28px);
        padding-right: clamp(10px, 2vw, 28px);
    }

    /* content-wrapper: fluid padding instead of one fixed value */
    .content-wrapper {
        padding: clamp(10px, 2vw, 20px);
    }

    /* Stat cards: fluid internal spacing */
    .stat-card {
        padding: clamp(0.85rem, 2vw, 1.5rem);
    }

    .stat-card .stat-value {
        font-size: clamp(1.3rem, 2.4vw, 2rem);
    }

    .stat-card .stat-icon {
        font-size: clamp(1.2rem, 1.8vw, 2rem);
    }

    /* Card headers/bodies: fluid padding */
    .card-header {
        padding: clamp(0.6rem, 1.4vw, 1rem) clamp(0.75rem, 1.6vw, 1.25rem);
    }

    .card-body {
        padding: clamp(0.75rem, 2vw, 1.25rem);
    }

    /* Page headers: fluid title size, no jump from 1.2rem to full size */
    h1.h3, .h3 {
        font-size: clamp(1.15rem, 1.6vw + 0.5rem, 1.75rem);
    }

    h2, .h2 {
        font-size: clamp(1.05rem, 1.4vw + 0.5rem, 1.5rem);
    }

    /* Buttons: fluid horizontal padding so labels don't crowd on narrow tablets */
    .btn {
        padding-left: clamp(0.6rem, 1.2vw, 1rem);
        padding-right: clamp(0.6rem, 1.2vw, 1rem);
    }
}

/* ---- Intermediate breakpoint: small laptops / large tablets (769–1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Sidebar slightly narrower so content gets more room */
    .sidebar { width: 210px !important; }
    #content { margin-left: 210px !important; width: calc(100% - 210px) !important; }

    /* Dashboard KPI rows: 2-per-row instead of cramming 4 */
    .row.g-3 > .col-6.col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ---- Intermediate breakpoint: tablets in portrait (576–768px) ---- */
@media (min-width: 576px) and (max-width: 768px) {
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* 2-column KPI grid on tablets */
    .row.g-3 > .col-6.col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ------------------------------------------------------------------
   DESKTOP/LAPTOP CONSISTENCY — same layout, font/spacing scales only
   From small laptops (1025px) through 4K monitors, the grid structure
   (number of columns, card arrangement) stays IDENTICAL. Only the
   root font-size and spacing scale fluidly via clamp(), so a 1366px
   laptop and a 2560px monitor show the exact same design, just bigger.
   ------------------------------------------------------------------ */
@media (min-width: 1025px) {
    /* SEMI-FIXED DESKTOP CANVAS.
       The layout below 1025px (phones/tablets) stays responsive as before.
       At 1025px and up, the STRUCTURE is locked (sidebar width, card
       padding, font sizes, grid arrangement never change) so zoom and
       monitor size never break or reflow the design. The CANVAS WIDTH
       itself, however, is allowed to grow with the viewport between a
       floor and a ceiling, so larger monitors fill their extra space
       instead of showing dead empty margin on both sides.

       Floor:   ~1100px (fits next to the 240px sidebar on a 1366px laptop)
       Ceiling: 1600px  (keeps text lines from stretching too wide on a
                         2560px+ ultra-wide monitor)
       Between those, width simply tracks the viewport — no vw-based
       font/spacing scaling is involved, only the canvas width itself. */

    html {
        font-size: 16px; /* locked — no clamp(), no vw */
    }

    .container-fluid {
        width: calc(100% - 32px);
        min-width: 1084px;   /* floor: fits next to 240px sidebar on 1366px laptop */
        max-width: 1600px;   /* ceiling: avoids overly long text lines on ultra-wide */
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Fixed stat-card sizing — same on every desktop/monitor size */
    .stat-card {
        padding: 1.5rem;
    }

    .stat-card .stat-value {
        font-size: 2rem;
    }

    .stat-card .stat-icon {
        font-size: 1.75rem;
    }

    /* Fixed card spacing — no per-monitor scaling */
    .card-header {
        padding: 0.875rem 1.25rem;
    }

    .card-body {
        padding: 1.25rem;
    }
}

/* ---- Very small phones (< 380px) ---- */
@media (max-width: 380px) {
    .stat-card .stat-value { font-size: 1.2rem; }
    .container-fluid { padding-left: 8px; padding-right: 8px; }
    .btn { font-size: 0.78rem; }
    h1.h3, .h3 { font-size: 1.05rem; }
}

/* ---- Landscape phones: shrink vertical chrome so content fits ---- */
@media (max-height: 450px) and (orientation: landscape) {
    .card-body { padding: 0.6rem; }
    .stat-card { min-height: auto; padding: 0.6rem; }
    .navbar { padding: 4px 10px; }
}

/* Ensure flex/grid children never overflow their parent on any screen */
.row { min-width: 0; }
.row > [class*="col-"] { min-width: 0; }
.card-body, .card-header { min-width: 0; }

/* Long text inside fluid containers wraps instead of overflowing */
.text-truncate-fluid {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}