/* =============================================================================
   SmartConnect — responsive layout (phone · tablet · laptop · large desktop)
   Breakpoints align with Bootstrap 5: sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400
   ============================================================================= */

/* --- Global touch & safe areas (PWA / mobile web app) --- */
@supports (padding: env(safe-area-inset-bottom)) {
    body.app-shell .main-content {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }

    body.app-shell .app-header {
        padding-top: calc(0.85rem + env(safe-area-inset-top));
    }

    .manual-mobile-entry-footer {
        padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
    }
}

/* Scrollable module tabs on narrow screens */
.sc-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    gap: 0;
}

.sc-tabs .nav-item {
    flex-shrink: 0;
}

.sc-tabs::-webkit-scrollbar {
    height: 4px;
}

.sc-tabs::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

/* Tables & DataTables — horizontal scroll / child-row collapse */
.table-card,
.table-responsive,
.matrix-register-wrap,
.manual-grid-wrap,
.payout-grid-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.dataTables_wrapper {
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child {
    margin-left: 0;
    margin-right: 0;
}

/* Scroll hint for wide report / matrix tables */
.sc-table-scroll {
    position: relative;
}

.sc-table-scroll::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1.5rem;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

.sc-table-scroll.is-scrollable::after {
    opacity: 1;
}

/* Page toolbars (headers with actions) */
.sc-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.sc-page-toolbar .sc-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

/* Report export group — wrap cleanly */
.report-export .btn-group,
.filter-bar .btn-group,
.sc-export-btns {
    flex-wrap: wrap;
}

/* DataTables Responsive child row polish */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--primary, #5b4cdb);
}

table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
    display: block;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    padding: 0.45rem 0;
}

table.dataTable > tbody > tr.child span.dtr-title {
    font-weight: 600;
    color: #64748b;
    flex: 0 1 42%;
}

table.dataTable > tbody > tr.child span.dtr-data {
    text-align: right;
    flex: 1 1 auto;
    word-break: break-word;
}

/* =============================================================================
   LARGE DESKTOP (≥1400px)
   ============================================================================= */
@media (min-width: 1400px) {
    :root {
        --sidebar-width: 280px;
    }

    body.app-shell .main-content {
        padding: 1.75rem 2rem;
    }

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

    .kpi-value {
        font-size: 1.65rem;
    }

    .portal-grid {
        max-width: 640px;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .punch-card-v2 {
        max-width: 560px;
    }
}

/* Ultra-wide — comfortable reading width for forms/settings (not matrix reports) */
@media (min-width: 1600px) {
    body.app-shell .main-content > form.table-card,
    body.app-shell .main-content > .table-card:only-child,
    body.app-shell .main-content > .sc-card.p-4:only-child {
        max-width: 1200px;
    }

    .login-page .sc-card,
    .login-page form {
        max-width: 440px;
    }
}

/* =============================================================================
   LAPTOP (992px – 1199px)
   ============================================================================= */
@media (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --sidebar-width: 250px;
    }

    .sidebar .nav-link {
        padding: 0.55rem 0.85rem;
        font-size: 0.85rem;
    }

    .sidebar-brand {
        padding: 1rem 1.15rem;
    }

    body.app-shell .main-content {
        padding: 1.25rem;
    }

    .app-header {
        padding: 0.75rem 1.25rem;
    }

    .app-header .greeting {
        font-size: 1rem;
    }

    .manual-grid-wrap,
    .payout-grid-wrap {
        max-height: calc(100dvh - 240px);
    }
}

/* =============================================================================
   TABLET (768px – 991px) — overlay sidebar, compact chrome
   ============================================================================= */
@media (max-width: 991.98px) {
    :root {
        --sidebar-width: min(88vw, 300px);
    }

    body.app-shell #wrapper {
        height: 100dvh;
    }

    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        z-index: 1050;
        transition: left 0.28s ease;
        width: var(--sidebar-width);
        height: 100dvh;
        max-height: 100dvh;
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.22);
        display: flex;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .sidebar-brand {
        padding-top: calc(1rem + env(safe-area-inset-top, 0));
    }

    .sidebar-nav {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .sidebar-profile {
        margin-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
    }

    .sidebar.show {
        left: 0;
    }

    #wrapper.sidebar-collapsed .sidebar {
        width: var(--sidebar-width);
        left: -100%;
    }

    .sidebar-backdrop.show {
        display: block;
    }

    #page-content {
        width: 100%;
    }

    .app-header .greeting {
        font-size: 1rem;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.app-shell .main-content {
        padding: 1rem;
    }

    .sc-card.p-4 {
        padding: 1.25rem !important;
    }

    .stat-card {
        padding: 1rem;
    }

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

    .kpi-card {
        padding: 0.85rem;
    }

    .kpi-value {
        font-size: 1.35rem;
    }

    .portal-grid {
        max-width: 100%;
        grid-template-columns: repeat(4, 1fr);
    }

    .manual-grid-wrap,
    .payout-grid-wrap {
        max-height: calc(100dvh - 220px);
    }

    .matrix-register-wrap {
        max-height: calc(100dvh - 160px);
    }

    .punch-clock {
        font-size: 2.15rem;
    }

    .att-cal-week {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Filter / report toolbars stack better on tablet */
    .filter-bar form.d-flex,
    .sc-card > form.d-flex.gap-2,
    .main-content > .d-flex.justify-content-between.mb-3,
    .main-content > .d-flex.justify-content-between.mb-4 {
        align-items: stretch !important;
    }

    .filter-bar .form-control,
    .filter-bar .form-select,
    .sc-card form .form-control-sm,
    .sc-card form .form-select-sm {
        min-height: 2.25rem;
    }
}

/* =============================================================================
   PHONE LANDSCAPE / LARGE PHONE (576px – 767px)
   ============================================================================= */
@media (max-width: 767.98px) {
    .portal-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .portal-tile {
        padding: 1rem 0.5rem;
    }

    .portal-tile .tile-icon {
        font-size: 1.5rem;
    }

    .emp-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .att-cal-week {
        grid-template-columns: repeat(2, 1fr);
    }

    .att-cal-cell {
        min-height: 56px;
    }

    .emp-photo-lg {
        width: 48px;
        height: 48px;
    }

    .punch-actions-grid {
        grid-template-columns: 1fr;
    }

    .punch-card-v2 {
        padding: 1.25rem 1rem;
    }

    .time-picker {
        flex-wrap: wrap;
    }

    .matrix-legend-badge {
        font-size: 0.72rem;
        padding: 0.3rem 0.5rem;
    }

    /* —— Module / report filters: full-width stack —— */
    .filter-bar form.row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .filter-bar form.d-flex,
    form.d-flex.gap-2.align-items-end,
    form.d-flex.gap-2.align-items-center,
    .sc-page-actions,
    .report-toolbar,
    .d-flex.gap-2.flex-wrap.align-items-end {
        width: 100%;
    }

    .filter-bar .form-control,
    .filter-bar .form-select,
    .filter-bar input[type="number"],
    .filter-bar input[type="date"],
    .filter-bar input[type="search"],
    .filter-bar select,
    .main-content form.d-flex .form-control,
    .main-content form.d-flex .form-select,
    .main-content form.d-flex input[style*="width"],
    .main-content form.d-flex select[style*="min-width"],
    .main-content form.d-flex select[style*="width"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 auto;
    }

    .filter-bar .btn,
    .filter-bar .btn-group,
    .sc-export-btns,
    .sc-export-btns .btn,
    .report-export .btn-group,
    .report-export .btn {
        width: 100%;
    }

    .report-export .btn-group,
    .sc-export-btns.btn-group {
        display: flex;
        flex-direction: column;
    }

    .report-export .btn-group > .btn,
    .sc-export-btns.btn-group > .btn {
        border-radius: 0.375rem !important;
        margin: 0 0 0.35rem 0 !important;
    }

    .sc-page-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .sc-page-toolbar .sc-page-actions {
        width: 100%;
    }

    .sc-page-toolbar .sc-page-actions .btn {
        flex: 1 1 auto;
        min-height: 2.5rem;
    }

    /* Page headers with many action buttons */
    .main-content > .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .main-content > .d-flex.justify-content-between > .d-flex {
        flex-wrap: wrap;
        width: 100%;
        gap: 0.5rem;
    }

    .main-content > .d-flex.justify-content-between > .d-flex > .btn,
    .main-content > .d-flex.justify-content-between > .d-flex > a.btn {
        flex: 1 1 calc(50% - 0.5rem);
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* DataTables chrome */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        width: 100%;
        margin-bottom: 0.65rem;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        display: block;
        margin-top: 0.35rem;
        min-height: 2.5rem;
    }

    .dataTables_wrapper .dataTables_length select {
        min-height: 2.25rem;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.35rem 0.65rem !important;
        min-height: 2.25rem;
    }

    .dataTables_wrapper .row {
        --bs-gutter-x: 0.5rem;
    }

    /* Report hub cards full width */
    .report-hub > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Matrix / govt wide tables — readable sticky first cols + swipe */
    .matrix-register-wrap,
    .table-card .table-responsive,
    .govt-form-wrap {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding-bottom: 0.35rem;
    }

    .matrix-register-wrap table,
    .govt-form-wrap table {
        font-size: 0.78rem;
    }

    /* Employee edit / module tabs */
    .emp-edit-tabs.sc-tabs .nav-link,
    .nav-tabs.sc-tabs .nav-link {
        white-space: nowrap;
        padding: 0.65rem 0.9rem;
    }

    /* Manual month calendar denser */
    .manual-month-grid,
    .att-month-grid {
        gap: 0.35rem;
    }
}

/* =============================================================================
   PHONE PORTRAIT (<576px)
   ============================================================================= */
@media (max-width: 575.98px) {
    body.app-shell .main-content {
        padding: 0.75rem;
    }

    .app-header {
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
    }

    .app-header .greeting {
        display: none;
    }

    .app-header .btn-outline-danger {
        font-size: 0.78rem;
        padding: 0.3rem 0.55rem;
    }

    .app-header .btn-outline-danger .bi {
        margin-right: 0 !important;
    }

    .app-header .btn-outline-danger span:not(.bi) {
        display: none;
    }

    .header-icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }

    .speech-input-group .speech-mic-btn {
        min-width: 48px;
        min-height: 48px;
        padding: 0.5rem 0.75rem;
        touch-action: manipulation;
    }

    .speech-input-group .form-control {
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    .main-content h2,
    .main-content .h2 {
        font-size: 1.28rem;
        line-height: 1.25;
    }

    .main-content h3,
    .main-content .h3 {
        font-size: 1.1rem;
    }

    .main-content .text-muted {
        font-size: 0.85rem;
    }

    .sc-tabs .nav-link {
        padding: 0.65rem 0.85rem;
        font-size: 0.82rem;
    }

    .table-card {
        padding: 0.75rem;
        border-radius: 12px;
    }

    .table-card .table,
    .dataTables_wrapper table.dataTable {
        font-size: 0.82rem;
    }

    .table-card .table th,
    .table-card .table td,
    .dataTables_wrapper table.dataTable th,
    .dataTables_wrapper table.dataTable td {
        padding: 0.55rem 0.45rem;
        vertical-align: middle;
    }

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

    .kpi-card {
        flex-direction: column;
        text-align: center;
        gap: 0.35rem;
    }

    .kpi-icon {
        margin: 0 auto;
    }

    .kpi-value {
        font-size: 1.2rem;
    }

    .kpi-sub {
        font-size: 0.7rem;
    }

    .portal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
    }

    .portal-tile .tile-label {
        font-size: 0.72rem;
    }

    .punch-clock {
        font-size: 1.85rem;
    }

    .punch-video {
        max-height: 220px;
        min-height: 180px;
    }

    .punch-pwa-banner {
        flex-wrap: wrap;
        font-size: 0.78rem;
        padding: 0.45rem 0.65rem;
    }

    .punch-offline-banner {
        flex-wrap: wrap;
        font-size: 0.75rem;
    }

    .manual-grid input[type="time"],
    .manual-grid input.manual-in,
    .manual-grid input.manual-out {
        min-width: 64px;
        max-width: 76px;
    }

    .payout-grid .payout-time-in,
    .payout-grid .payout-time-out {
        min-width: 76px;
        max-width: 84px;
    }

    .att-cal-week {
        grid-template-columns: 1fr;
    }

    .att-cal-week-cell {
        min-height: 88px;
    }

    .att-cal-legend {
        gap: 0.5rem 0.85rem;
        font-size: 0.72rem;
    }

    .login-page {
        padding: 1rem;
    }

    /* Full-bleed modals on phone */
    .modal-dialog {
        margin: 0.35rem;
        max-width: calc(100vw - 0.7rem);
    }

    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-fullscreen-sm-down {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
    }

    .modal-dialog.modal-lg .modal-content,
    .modal-dialog.modal-xl .modal-content {
        border-radius: 0;
        min-height: 100dvh;
    }

    .btn-group-vertical-sm {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .btn-group-vertical-sm .btn {
        width: 100%;
        border-radius: 0.375rem !important;
        margin-bottom: 0.35rem;
    }

    /* Touch-friendly primary controls */
    .filter-bar .btn,
    .filter-bar .form-control,
    .filter-bar .form-select,
    .main-content form .btn-primary,
    .main-content form .btn-success {
        min-height: 2.65rem;
    }

    .sidebar .nav-link {
        min-height: 2.65rem;
        display: flex;
        align-items: center;
    }

    /* Action icon rows in employee / list tables */
    .table .btn-sm,
    .table .btn-group-sm > .btn {
        min-height: 2.15rem;
        min-width: 2.15rem;
        padding: 0.35rem 0.5rem;
    }

    .table td .text-nowrap {
        white-space: normal !important;
    }

    .table td .btn-group {
        flex-wrap: wrap;
    }

    /* Forms: stack label + field comfortably */
    .main-content .form-label {
        margin-bottom: 0.25rem;
    }

    .main-content .row.g-3 > [class*="col-md-"],
    .main-content .row.g-2 > [class*="col-md-"] {
        margin-bottom: 0.15rem;
    }

    /* Salary / payout sticky footers */
    .manual-mobile-entry-footer,
    .payout-mobile-footer {
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.12);
    }
}

/* Very small phones */
@media (max-width: 380px) {
    :root {
        --sidebar-width: 92vw;
    }

    .sidebar .nav-link {
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
    }

    .portal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-content > .d-flex.justify-content-between > .d-flex > .btn,
    .main-content > .d-flex.justify-content-between > .d-flex > a.btn {
        flex: 1 1 100%;
    }
}

@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }

    .report-filter-row .form-control,
    .report-filter-row .form-select {
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .report-filter-row .form-control,
    .report-filter-row .form-select {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =============================================================================
   PRINT
   ============================================================================= */
@media print {
    body.app-shell {
        height: auto;
        overflow: visible;
    }

    body.app-shell #wrapper {
        height: auto;
        overflow: visible;
        display: block;
    }

    .sidebar,
    .sidebar-backdrop,
    .app-header {
        display: none !important;
    }

    body.app-shell .main-content {
        overflow: visible;
        padding: 0;
    }

    .table-card {
        box-shadow: none;
        border: 1px solid #e5e7eb;
    }

    .sc-table-scroll::after {
        display: none !important;
    }
}