/* =========================================================
   File: assets/css/theme-responsive.css
   Purpose: Enterprise Theme Responsive Layer
   Stack: AdminLTE + Bootstrap 5
   Depends on: theme-core.css, theme-components.css
   ========================================================= */

/* =========================================================
   LARGE DEVICES
   ========================================================= */
@media (max-width: 1399.98px) {
    :root {
        --sidebar-width: 230px;
    }

    .theme-datatable-wrapper .dataTables_filter input.form-control,
    .theme-datatable-wrapper .dataTables_filter input.theme-dt-filter-input {
        width: 190px !important;
    }
}

/* =========================================================
   DESKTOP / SMALL LAPTOP
   ========================================================= */
@media (max-width: 1199.98px) {
    :root {
        --topbar-height: 46px;
        --sidebar-width: 220px;
        --control-height: 31px;
        --control-height-sm: 27px;
        --control-height-lg: 35px;
    }

    .content-header {
        padding: var(--space-3) var(--space-4);
    }

    .content {
        padding: 0 var(--space-4) var(--space-4) var(--space-4);
    }

    .theme-mini-stat {
        min-height: 72px;
        padding: var(--space-4);
    }

    .theme-mini-stat-value {
        font-size: 1.05rem;
    }

    .theme-filter-item-lg {
        min-width: 220px;
    }
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 991.98px) {
    :root {
        --topbar-height: 44px;
        --control-height: 30px;
        --control-height-sm: 26px;
        --control-height-lg: 34px;
    }

    body,
    .layout-fixed .wrapper .sidebar {
        font-size: 0.84rem;
    }

    .content-header {
        padding: var(--space-3);
    }

    .content {
        padding: 0 var(--space-3) var(--space-3) var(--space-3);
    }

    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .card-header,
    .card-body,
    .card-footer {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .theme-section-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .theme-section-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .theme-filter-bar {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .theme-filter-item,
    .theme-filter-item-sm,
    .theme-filter-item-md,
    .theme-filter-item-lg {
        flex: 1 1 calc(50% - var(--space-3));
        min-width: calc(50% - var(--space-3));
    }

    .theme-mini-stat {
        min-height: 68px;
    }

    .theme-datatable-wrapper .dt-length-wrap,
    .theme-datatable-wrapper .dt-filter-wrap,
    .theme-datatable-wrapper .dt-buttons-wrap {
        justify-content: flex-start !important;
    }

    .theme-datatable-wrapper .dataTables_filter {
        justify-content: flex-start;
    }

    .theme-datatable-wrapper .dataTables_filter label {
        justify-content: flex-start;
    }

    .theme-datatable-wrapper .dataTables_filter input.form-control,
    .theme-datatable-wrapper .dataTables_filter input.theme-dt-filter-input {
        width: 100% !important;
        min-width: 100%;
    }

    .theme-datatable-wrapper .dataTables_paginate {
        justify-content: flex-start;
    }

    .theme-datatable-wrapper .dataTables_info {
        text-align: left;
    }

    .theme-action-group {
        gap: var(--space-2);
    }

    .theme-action-btn {
        min-height: 27px;
        height: 27px;
    }

    .main-footer {
        padding: var(--space-3);
    }
}

/* =========================================================
   MOBILE LARGE
   ========================================================= */
@media (max-width: 767.98px) {
    :root {
        --font-size-base: 0.8125rem;
        --font-size-sm: 0.73rem;
        --font-size-xs: 0.66rem;

        --topbar-height: 42px;
        --control-height: 29px;
        --control-height-sm: 25px;
        --control-height-lg: 32px;
    }

    h1 { font-size: 1.25rem; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1.05rem; }
    h4 { font-size: 0.95rem; }
    h5 { font-size: 0.875rem; }
    h6 { font-size: 0.8rem; }

    .content-header {
        padding: var(--space-3);
    }

    .content {
        padding: 0 var(--space-2) var(--space-3) var(--space-2);
    }

    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .card {
        margin-bottom: var(--space-3);
    }

    .card-header {
        padding: var(--space-3) var(--space-3);
    }

    .card-body,
    .card-footer {
        padding: var(--space-3);
    }

    .card-title {
        font-size: 0.875rem;
    }

    .btn {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .btn-lg {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .theme-section-bar {
        margin-bottom: var(--space-3);
    }

    .theme-section-actions {
        gap: var(--space-2);
    }

    .theme-filter-bar {
        padding: var(--space-3);
        margin-bottom: var(--space-3);
    }

    .theme-filter-item,
    .theme-filter-item-sm,
    .theme-filter-item-md,
    .theme-filter-item-lg {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .theme-mini-stat {
        min-height: auto;
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .theme-mini-stat-icon {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }

    .theme-mini-stat-value {
        font-size: 1rem;
    }

    .theme-action-group {
        display: flex;
        width: 100%;
        justify-content: flex-start;
    }

    .theme-action-btn {
        min-height: 26px;
        height: 26px;
        padding: 0 0.45rem;
        font-size: 0.64rem;
    }

    .theme-action-menu {
        min-width: 160px;
    }

    .theme-status {
        min-height: 22px;
        padding: 0.08rem 0.42rem;
    }

    .theme-code {
        font-size: 0.64rem;
    }

    .theme-empty-state {
        padding: 1rem 0.75rem;
    }

    .theme-empty-state-icon {
        width: 42px;
        height: 42px;
    }

    .main-header {
        min-height: var(--topbar-height);
    }

    .nav-sidebar .nav-link {
        padding: 0.42rem 0.58rem;
        margin: 2px 5px;
    }

    .brand-link {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    .main-footer {
        padding: var(--space-3) var(--space-2);
        text-align: center;
    }

    /* DataTable mobile layout */
    .theme-datatable-wrapper .row {
        row-gap: var(--space-2);
    }

    .theme-datatable-wrapper .dataTables_length,
    .theme-datatable-wrapper .dataTables_filter,
    .theme-datatable-wrapper .dataTables_info,
    .theme-datatable-wrapper .dataTables_paginate,
    .theme-datatable-wrapper .dt-buttons {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .theme-datatable-wrapper .dataTables_length label,
    .theme-datatable-wrapper .dataTables_filter label {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .theme-datatable-wrapper .dataTables_length select.form-select,
    .theme-datatable-wrapper .dataTables_length select.theme-dt-length-select,
    .theme-datatable-wrapper .dataTables_filter input.form-control,
    .theme-datatable-wrapper .dataTables_filter input.theme-dt-filter-input {
        width: 100% !important;
        min-width: 100%;
    }

    .theme-datatable-wrapper .dt-buttons {
        width: 100%;
    }

    .theme-datatable-wrapper .dt-buttons .btn {
        flex: 0 0 auto;
    }

    .theme-datatable-wrapper .pagination {
        justify-content: flex-start;
    }

    .table-responsive {
        border-radius: var(--radius-sm);
    }

    .table > :not(caption) > * > * {
        padding: 0.4rem 0.45rem;
    }

    table.dataTable > tbody > tr.child span.dtr-title {
        min-width: 95px;
    }

    #toast-container > .toast,
    #toast-container > .toast-success,
    #toast-container > .toast-error,
    #toast-container > .toast-info,
    #toast-container > .toast-warning {
        width: calc(100vw - 1rem);
    }
}

/* =========================================================
   MOBILE SMALL
   ========================================================= */
@media (max-width: 575.98px) {
    :root {
        --font-size-base: 0.79rem;
        --font-size-sm: 0.71rem;
        --font-size-xs: 0.64rem;

        --topbar-height: 40px;
        --control-height: 28px;
        --control-height-sm: 24px;
        --control-height-lg: 31px;
    }

    .content-header {
        padding: var(--space-2);
    }

    .content {
        padding: 0 var(--space-2) var(--space-2) var(--space-2);
    }

    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .card-header,
    .card-body,
    .card-footer {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .card-header {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .card-body,
    .card-footer {
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }

    .btn,
    .btn-sm,
    .btn-lg {
        min-height: var(--control-height);
        height: var(--control-height);
        line-height: calc(var(--control-height) - 2px);
    }

    .theme-card-tools {
        gap: var(--space-1);
    }

    .theme-card-tool-btn {
        width: 26px;
        height: 26px;
    }

    .theme-section-title {
        font-size: 0.92rem;
    }

    .theme-section-subtitle {
        font-size: 0.64rem;
    }

    .theme-mini-stat {
        padding: var(--space-2);
    }

    .theme-mini-stat-label {
        font-size: 0.62rem;
    }

    .theme-mini-stat-value {
        font-size: 0.92rem;
    }

    .theme-action-group {
        gap: var(--space-1);
    }

    .theme-action-btn {
        min-height: 24px;
        height: 24px;
        padding: 0 0.4rem;
        border-radius: var(--radius-xs);
    }

    .theme-status {
        min-height: 20px;
        font-size: 0.62rem;
    }

    .theme-chip {
        min-height: 22px;
        padding: 0 0.38rem;
        font-size: 0.62rem;
    }

    .swal2-popup {
        width: calc(100% - 1rem) !important;
        padding: 0.85rem !important;
    }

    .swal2-title {
        font-size: 0.96rem !important;
    }

    .swal2-styled {
        min-width: 96px;
    }

    .dropdown-menu {
        min-width: 150px;
    }

    .theme-action-menu {
        min-width: 150px;
    }

    .nav-tabs .nav-link {
        padding: 0.45rem 0.55rem;
    }

    .table > :not(caption) > * > * {
        padding: 0.35rem 0.4rem;
    }

    .theme-datatable-wrapper .page-item .page-link {
        min-width: 28px;
        height: 28px;
        padding: 0 var(--space-2);
    }

    .main-footer {
        font-size: var(--font-size-xs);
    }
}

/* =========================================================
   EXTRA SMALL / VERY NARROW DEVICES
   ========================================================= */
@media (max-width: 399.98px) {
    :root {
        --font-size-base: 0.77rem;
        --font-size-sm: 0.69rem;
        --font-size-xs: 0.62rem;
    }

    .theme-section-actions,
    .theme-action-group {
        width: 100%;
    }

    .theme-section-actions .btn,
    .theme-action-group .btn,
    .theme-action-btn {
        max-width: 100%;
    }

    .theme-mini-stat {
        gap: var(--space-2);
    }

    .theme-mini-stat-icon {
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
    }

    .theme-empty-state {
        padding: 0.85rem 0.6rem;
    }

    table.dataTable > tbody > tr.child span.dtr-title {
        display: block;
        min-width: 100%;
        margin-bottom: 0.15rem;
    }

    table.dataTable > tbody > tr.child span.dtr-data {
        display: block;
    }
}

/* =========================================================
   LANDSCAPE SHORT HEIGHT DEVICES
   ========================================================= */
@media (max-height: 600px) and (orientation: landscape) {
    .main-sidebar .nav-link {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .content-header {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .card {
        margin-bottom: var(--space-3);
    }

    .modal-body {
        max-height: 52vh;
        overflow-y: auto;
    }
}

/* =========================================================
   PRINT SAFETY
   ========================================================= */
@media print {
    .main-sidebar,
    .main-header,
    .main-footer,
    .theme-section-actions,
    .theme-card-tools,
    .dt-buttons,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .toast,
    #toast-container {
        display: none !important;
    }

    .content-wrapper,
    .content,
    .card,
    .card-body {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: #fff !important;
    }

    .table,
    .table th,
    .table td {
        font-size: 11px !important;
    }
}

/* =========================================================
   END
   ========================================================= */