@media (max-width: 768px) {
    .mgmt-page {
        padding: 14px 12px !important;
    }

    .mgmt-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .mgmt-header > div:first-child {
        min-width: 0 !important;
    }

    .mgmt-header h4 {
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    .header-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .header-actions > *,
    .header-actions .form-control,
    .header-actions .date-input,
    .header-actions .search-input,
    .header-actions .filter-select,
    .header-actions select,
    .header-actions input,
    .header-actions button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 38px !important;
        box-sizing: border-box !important;
    }

    .header-actions .date-sep {
        display: none !important;
    }

    .header-actions .btn-add,
    .header-actions .btn-excel,
    .header-actions .btn-print,
    .header-actions .btn-delete-multi {
        justify-content: center !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
    }

    .vsf-wrap,
    .isf-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 38px auto !important;
        gap: 6px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .vsf-input,
    .isf-input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 38px !important;
    }

    .vsf-btn,
    .isf-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
    }

    .summary-strip {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .summary-strip .strip-card {
        min-width: 0 !important;
        padding: 10px 12px !important;
    }

    .summary-strip .strip-value {
        font-size: 18px !important;
        line-height: 1.25 !important;
        word-break: keep-all !important;
    }

    .modal-panel,
    .modal-panel.modal-sm,
    .modal-panel.modal-lg,
    .modal-panel.modal-xl,
    .modal-panel.notice-modal,
    .modal-panel.receipt-modal {
        width: min(96vw, 720px) !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
        border-radius: 12px !important;
    }

    .modal-body-content {
        padding: 16px !important;
    }

    .field-grid,
    .form-field-grid,
    .form-field-grid-2,
    .detail-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .field-item,
    .detail-item {
        min-width: 0 !important;
    }

    .field-item.full-span,
    .detail-item.full-span {
        grid-column: 1 / -1 !important;
    }

    .field-item .form-control,
    .field-item .form-select,
    .detail-item .form-control,
    .detail-item .form-select,
    .modal-body-content .form-control,
    .modal-body-content .form-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .mgmt-table-wrap {
        overflow-x: visible !important;
        border-radius: 10px !important;
        background: transparent !important;
        border: 0 !important;
    }

    .mgmt-table {
        min-width: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: transparent !important;
    }

    .mgmt-table thead {
        display: none !important;
    }

    .mgmt-table tbody {
        display: grid !important;
        gap: 10px !important;
    }

    .mgmt-table tbody tr {
        display: grid !important;
        gap: 0 !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        background: var(--bg-surface) !important;
        overflow: hidden !important;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
    }

    .mgmt-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(92px, 36%) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 38px !important;
        padding: 9px 12px !important;
        border-bottom: 1px solid var(--border-color-light) !important;
        text-align: right !important;
        background: transparent !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .mgmt-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .mgmt-table tbody td[data-label]::before {
        content: attr(data-label) !important;
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: var(--text-muted) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: left !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        white-space: normal !important;
    }

    .mgmt-table tbody td.mobile-no-label,
    .mgmt-table tbody td:not([data-label]) {
        grid-template-columns: 1fr !important;
    }

    .mgmt-table tbody td.mobile-no-label::before,
    .mgmt-table tbody td:not([data-label])::before {
        content: none !important;
    }

    .mgmt-table tbody td .action-btns {
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
    }

    .mgmt-table tbody td > .project-name-cell,
    .mgmt-table tbody td > .progress-cell,
    .mgmt-table tbody td > .action-btns {
        justify-self: end !important;
        width: min(100%, 180px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mgmt-table tbody td > .project-name-cell {
        justify-content: flex-end !important;
        text-align: right !important;
    }

    .mgmt-table tbody td > .project-name-cell .project-name {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .mgmt-table tbody td > .progress-cell {
        margin: 0 !important;
        justify-content: flex-end !important;
    }

    .mgmt-table tbody td > .progress-cell .progress-bar-wrap {
        flex: 1 1 auto !important;
        min-width: 72px !important;
        max-width: 120px !important;
    }

    .mgmt-table tbody td > .progress-cell .progress-text {
        flex: 0 0 auto !important;
        min-width: 28px !important;
        text-align: right !important;
    }

    .mgmt-table tbody td > .type-badge,
    .mgmt-table tbody td > .status-badge,
    .mgmt-table tbody td > .active-badge,
    .mgmt-table tbody td > .grade-badge,
    .mgmt-table tbody td > .level-badge,
    .mgmt-table tbody td > .priority-badge,
    .mgmt-table tbody td > .approval-badge,
    .mgmt-table tbody td > .badge,
    .mgmt-table tbody td > span[class*="badge"] {
        justify-self: end !important;
        width: max-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        white-space: nowrap !important;
    }

    .mgmt-table tfoot {
        display: grid !important;
        margin-top: 10px !important;
    }

    .mgmt-table tfoot tr {
        display: grid !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 10px !important;
        background: var(--bg-main) !important;
        overflow: hidden !important;
    }

    .mgmt-table tfoot td {
        display: grid !important;
        grid-template-columns: minmax(92px, 36%) minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 9px 12px !important;
        text-align: right !important;
        border-bottom: 1px solid var(--border-color-light) !important;
    }

    .mgmt-table tfoot td[data-label]::before {
        content: attr(data-label) !important;
        color: var(--text-muted) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-align: left !important;
    }
}

@media (max-width: 480px) {
    .mgmt-page {
        padding: 12px 10px !important;
    }

    .header-actions {
        grid-template-columns: 1fr !important;
    }

    .summary-strip {
        grid-template-columns: 1fr !important;
    }

    .modal-panel,
    .modal-panel.modal-sm,
    .modal-panel.modal-lg,
    .modal-panel.modal-xl,
    .modal-panel.notice-modal,
    .modal-panel.receipt-modal {
        width: 96vw !important;
        max-height: 94vh !important;
    }

    .modal-head,
    .modal-foot {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}