/*
 * Backend responsive polish.
 * This file intentionally wins over scattered view-level styles with scoped
 * breakpoint rules, because most backend screens register their own CSS.
 */

@media (max-width: 1199px) {
    .content-header {
        padding: 24px 24px 12px !important;
    }

    .content {
        padding: 0 24px 24px !important;
    }

    .pms-info-grid,
    .info-grid,
    .room-view-grid,
    .view-grid-pms,
    .debt-details-grid,
    .pos-grid,
    .pms-row-flex {
        gap: 20px !important;
    }

    .pos-side-panel,
    .summary-sidebar {
        position: static !important;
        top: auto !important;
    }
}

.grid-wrapper-pms .summary,
.grid-view-wrapper .summary,
.pms-table-container .summary,
.audit-grid-container .summary {
    padding: 14px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid #f1f5f9;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.grid-wrapper-pms .grid-view {
    overflow: visible;
}

.grid-view .action-column,
.grid-view td:last-child {
    white-space: nowrap;
}

.grid-view td:last-child .btn {
    margin: 0 3px !important;
    vertical-align: middle;
}

.grid-view .btn-xs.rounded-circle,
.grid-view .btn-sm.rounded-circle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 991px) {
    .content-header > .d-flex,
    .index-header-pms,
    .company-update-header,
    .branch-update-header,
    .customer-update-header,
    .pms-update-header,
    .update-header,
    .update-header-pms,
    .create-header,
    .view-header,
    .view-header-pms,
    .view-header-card,
    .company-header-pms,
    .branch-header-pms,
    .customer-header-pms,
    .user-header-pms,
    .pms-header,
    .pos-header-bar,
    .pms-report-header,
    .pms-bulk-header,
    .refund-header,
    .debt-summary-header,
    .calendar-nav,
    .import-header-pms,
    .pms-post-header,
    .profile-card-pms {
        align-items: flex-start !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
    }

    .header-title-box,
    .header-content,
    .header-content-pms,
    .header-content-left,
    .profile-main-info,
    .brand-identity,
    .branch-info-box,
    .pms-customer-header {
        min-width: 0 !important;
        flex: 1 1 320px !important;
    }

    .header-actions,
    .header-actions-pms,
    .header-buttons,
    .profile-actions,
    .action-group,
    .btn-nav-group,
    .pms-nav-group,
    .nav-btn-group-pms,
    .d-flex.gap-2 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    .pms-info-grid,
    .info-grid,
    .room-view-grid,
    .view-grid-pms,
    .pms-summary-grid,
    .debt-details-grid,
    .pos-grid,
    .pms-row-flex {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .pos-main-panel,
    .pos-side-panel,
    .summary-sidebar,
    .detail-card,
    .detail-card-pms,
    .profile-card-pms,
    .pms-card-box,
    .map-box-pms,
    .calendar-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .grid-view,
    .table-responsive,
    .table-responsive-custom,
    .pms-table-container,
    .pms-debt-grid-wrapper,
    .grid-wrapper-pms,
    .grid-view-wrapper,
    .multiple-input {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .grid-view table,
    .grid-wrapper-pms .table,
    .grid-view-wrapper .table,
    .pms-table-container .table,
    .pms-debt-grid-wrapper .table,
    .audit-grid-container .table {
        min-width: 760px;
    }
}

@media (max-width: 767px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        background: #f8fafc !important;
        font-size: 14px;
    }

    body.fixed .content-wrapper,
    body.fixed .right-side {
        padding-top: 60px !important;
    }

    .wrapper {
        min-height: 100vh !important;
        overflow-x: hidden !important;
    }

    /* Compact single-row topbar */
    .main-header {
        position: fixed !important;
        inset: 0 0 auto 0;
        z-index: 1030;
        width: 100% !important;
        height: 60px !important;
        max-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        background: #ffffff !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    }

    .main-header .logo {
        display: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        line-height: 0 !important;
        padding: 0 !important;
        font-size: 18px !important;
        text-align: center !important;
        background: #ffffff !important;
        color: #003580 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .main-header .logo .logo-lg {
        display: none !important;
    }

    .main-header .logo .logo-mini {
        display: none !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 900 !important;
    }

    .main-header .navbar {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 60px !important;
        min-height: 60px !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: transparent !important;
        border: 0 !important;
    }

    .main-header .sidebar-toggle {
        width: 44px !important;
        height: 44px !important;
        line-height: normal !important;
        padding: 0 !important;
        margin-left: 14px !important;
        flex: 0 0 44px !important;
        text-align: center !important;
        background: #ffffff !important;
        color: #475569 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        border-radius: 10px !important;
    }

    .navbar-custom-menu {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        height: 60px !important;
        margin-left: auto !important;
        overflow: visible !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-right: 10px !important;
    }

    .navbar-custom-menu > .navbar-nav {
        width: 100% !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .navbar-custom-menu > .navbar-nav > li {
        float: none !important;
    }

    .navbar-custom-menu > .navbar-nav > li.hidden-xs {
        display: flex !important;
        align-items: center !important;
    }

    .lang-item-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 4px !important;
        border-radius: 12px !important;
        background: #f1f5f9 !important;
    }

    .lang-link {
        min-width: 32px !important;
        padding: 6px 9px !important;
        border-radius: 9px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    .lang-item-wrapper .lang-link:nth-child(n+4) {
        display: none !important;
    }

    .user-menu .dropdown-toggle {
        width: 44px !important;
        height: 60px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .user-menu .dropdown-toggle .fa-angle-down,
    .user-name-label {
        display: none !important;
    }

    .user-image {
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        object-fit: cover !important;
    }

    .navbar-nav > .user-menu > .dropdown-menu {
        position: fixed !important;
        top: 66px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px !important;
        border-radius: 14px !important;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
    }

    .navbar-nav > .user-menu > .dropdown-menu .user-header {
        padding: 18px !important;
        border-radius: 12px !important;
    }

    .navbar-nav > .user-menu > .dropdown-menu .user-footer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Mobile sidebar works as an overlay, so content keeps its width. */
    .main-sidebar {
        width: min(82vw, 280px) !important;
        padding-top: 60px !important;
        transform: translateX(-100%) !important;
        box-shadow: 18px 0 40px rgba(15, 23, 42, 0.28) !important;
    }

    .sidebar-open .main-sidebar {
        transform: translateX(0) !important;
    }

    .sidebar-open .content-wrapper,
    .sidebar-open .main-footer {
        transform: none !important;
    }

    .main-sidebar .sidebar {
        height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 18px !important;
    }

    .user-panel {
        min-height: auto !important;
        padding: 16px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .user-panel .image,
    .user-panel .info {
        float: none !important;
        position: static !important;
        left: auto !important;
        padding: 0 !important;
    }

    .user-panel .info {
        min-width: 0 !important;
    }

    .user-panel .info p {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-form {
        margin: 10px 14px 14px !important;
    }

    .sidebar-menu > li.header {
        padding: 18px 18px 8px !important;
    }

    .sidebar-menu > li > a {
        min-height: 46px !important;
        padding: 12px 18px !important;
    }

    /* Page shell */
    .content-wrapper,
    .right-side,
    .main-footer {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .content-header {
        padding: 16px 12px 8px !important;
    }

    .content-header > .d-flex {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .content-header h1 {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        letter-spacing: 0 !important;
        word-break: break-word;
    }

    .content-header h1 small {
        display: block;
        margin: 6px 0 0 !important;
        font-size: 11px !important;
        letter-spacing: 0.4px !important;
        line-height: 1.35 !important;
    }

    .breadcrumb {
        width: 100%;
        max-width: 100%;
        padding: 8px 10px !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px;
        line-height: 1.4;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    .breadcrumb > li + li:before {
        padding: 0 6px !important;
    }

    .content {
        padding: 0 8px 16px !important;
    }

    .alert-container {
        margin-bottom: 12px !important;
    }

    .main-card-wrapper,
    .box,
    .panel,
    .pms-card,
    .premium-card,
    .table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px !important;
        overflow: visible !important;
    }

    .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    [class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .container,
    .container-fluid {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .company-index,
    .branch-index,
    .customer-index,
    .room-index,
    .outdor-bed-index,
    .admin-index,
    .order-index,
    .action-index,
    .spent-index,
    .log-index {
        padding-bottom: 20px !important;
    }

    /* Headers and command areas */
    .index-header-pms,
    .pms-index-header,
    .company-update-header,
    .branch-update-header,
    .customer-update-header,
    .pms-update-header,
    .update-header,
    .update-header-pms,
    .create-header,
    .view-header,
    .view-header-pms,
    .view-header-card,
    .company-header-pms,
    .branch-header-pms,
    .customer-header-pms,
    .user-header-pms,
    .pms-header,
    .pos-header-bar,
    .pms-report-header,
    .pms-bulk-header,
    .refund-header,
    .debt-summary-header,
    .calendar-nav,
    .import-header-pms,
    .pms-post-header,
    .payment-header-pms,
    .section-title,
    .visual-section-header,
    .section-title-visual,
    .items-section-title,
    .log-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
        margin: 0 0 10px !important;
        text-align: left !important;
        align-items: start !important;
        border-radius: 14px !important;
    }

    .index-header-pms h1,
    .pms-index-header h1,
    .company-update-header h1,
    .branch-update-header h1,
    .customer-update-header h1,
    .pms-update-header h1,
    .update-header h1,
    .update-header-pms h1,
    .create-header h1,
    .view-header h1,
    .view-header-pms h1,
    .view-header-card h1,
    .company-header-pms h1,
    .branch-header-pms h1,
    .customer-header-pms h1,
    .user-header-pms h1,
    .pms-header h1,
    .pos-header-bar h1,
    .pms-report-header h1,
    .pms-bulk-header h1,
    .refund-header h1,
    .debt-summary-header h2,
    .import-header-pms h2,
    .pms-post-header h1,
    .section-title h4,
    .visual-section-header h2,
    .section-title-visual h2,
    .items-section-title h4 {
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        letter-spacing: 0 !important;
        word-break: break-word;
    }

    .header-content,
    .header-content-pms,
    .header-content-left,
    .header-title-box,
    .header-actions,
    .header-actions-pms,
    .header-buttons,
    .profile-actions,
    .action-group,
    .btn-nav-group,
    .pms-nav-group,
    .nav-btn-group-pms,
    .d-flex.gap-2 {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .index-header-pms > div,
    .pms-index-header > div,
    .company-update-header > div,
    .branch-update-header > div,
    .customer-update-header > div,
    .view-header > div,
    .view-header-pms > div,
    .pos-header-bar > div {
        width: 100% !important;
        min-width: 0 !important;
    }

    .index-header-pms p,
    .pms-index-header p,
    .company-update-header p,
    .branch-update-header p,
    .customer-update-header p,
    .view-header p,
    .view-header-pms p,
    .pos-header-bar p {
        margin-top: 4px !important;
        line-height: 1.35 !important;
        max-width: 100% !important;
    }

    .visual-section-header::after,
    .section-title-visual::after,
    .items-section-title::after {
        display: none !important;
    }

    .update-icon-box,
    .brand-icon-pms,
    .branch-icon-box,
    .payment-icon-box,
    .pms-telegram-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 14px !important;
        font-size: 20px !important;
    }

    /* Forms */
    .company-search-wrapper,
    .branch-search-wrapper,
    .admin-search-wrapper,
    .customer-search-wrapper,
    .room-search-wrapper,
    .outdor-bed-search-wrapper,
    .order-search-wrapper,
    .action-search-wrapper,
    .filter-header,
    .filter-header-pms,
    .form-container-pms,
    .form-wrapper-pms,
    .form-outer-pms,
    .form-outer-wrapper,
    .update-form-container,
    .company-form-container,
    .branch-form-container,
    .branch-form-wrapper,
    .company-form-wrapper,
    .customer-form-wrapper,
    .room-form-container,
    .order-form-wrapper,
    .action-form-wrapper,
    .outdor-bed-form,
    .user-form-wrapper,
    .payment-form-wrapper,
    .payment-terminal-wrapper,
    .post-create-wrapper,
    .excel-import-wrapper,
    .action-update-wrapper,
    .action-bulk-wrapper,
    .refund-wrapper,
    .debt-report-wrapper,
    .calendar-wrapper,
    .admin-photo-wrapper,
    .product-form,
    .action-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        margin: 0 0 10px !important;
        border-radius: 14px !important;
    }

    .form-group {
        margin-bottom: 12px !important;
    }

    label,
    .control-label {
        display: block !important;
        margin-bottom: 6px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    .form-control,
    .select2-container,
    .select2-selection,
    .kv-plugin-loading,
    textarea,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="password"],
    input[type="file"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .form-control,
    .select2-selection {
        min-height: 44px !important;
    }

    textarea.form-control {
        min-height: 96px !important;
        height: auto !important;
    }

    .input-group,
    .input-daterange {
        width: 100% !important;
        display: flex !important;
    }

    .input-daterange {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .input-daterange .input-group-addon {
        width: 100% !important;
        border-radius: 10px !important;
        border: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
    }

    .select2-container--krajee,
    .select2-container--bootstrap,
    .select2-container--default {
        width: 100% !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 42px !important;
        padding-right: 32px !important;
    }

    .field-orderform-room_actions,
    .field-orderform-outdor_bed_actions,
    .multiple-input,
    .kv-grid-container,
    .kv-grid-table,
    .file-input,
    .file-preview {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Buttons: full-width only where it improves touch ergonomics. */
    .btn,
    button,
    input[type="submit"] {
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .header-actions .btn,
    .header-actions-pms .btn,
    .header-buttons .btn,
    .profile-actions .btn,
    .action-group .btn,
    .btn-nav-group .btn,
    .pms-nav-group .btn,
    .nav-btn-group-pms .btn,
    .form-group > .btn,
    .btn-pms,
    .btn-pms-nav,
    .btn-pms-secondary,
    .btn-company-save,
    .btn-customer-save,
    .btn-save-pms,
    .btn-action-pms,
    .btn-pos-submit,
    .btn-collect-payment,
    .btn-upload-pms,
    .btn-send-telegram,
    .btn-template-pms,
    .btn-back-pms {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 6px !important;
    }

    .btn-xs,
    .btn-sm,
    .btn.rounded-circle,
    .grid-view .btn,
    .kv-grid-table .btn,
    .summary-card-pms .btn-number,
    .sidebar-form button {
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
    }

    .btn.rounded-circle,
    .grid-view .btn.rounded-circle {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .pull-right,
    .pull-left {
        float: none !important;
    }

    p.pull-right,
    .text-right {
        text-align: left !important;
    }

    /* Cards, grids and media */
    .col-md-5[style*="border-left"],
    .col-md-6[style*="border-left"],
    .col-md-7[style*="border-left"],
    .stats-widget[style*="border-left"],
    .summary-card-pms[style*="border-left"] {
        border-left: 0 !important;
        padding-left: 6px !important;
    }

    .pms-info-grid,
    .pms-grid-row,
    .info-grid,
    .room-view-grid,
    .view-grid-pms,
    .pms-summary-grid,
    .pms-stats-row,
    .debt-details-grid,
    .pos-grid,
    .pms-row-flex,
    .gallery-container,
    .media-grid-pms,
    .gallery-grid-pms {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .detail-card,
    .detail-card-pms,
    .profile-card-pms,
    .stat-card-pms,
    .pms-stat-card,
    .stats-widget,
    .booking-card,
    .summary-card-pms,
    .pos-main-panel,
    .pos-side-panel,
    .summary-sidebar,
    .pms-card-box,
    .terminal-header,
    .debt-item-card,
    .calendar-card,
    .map-box-pms,
    .pms-room-card,
    .outdor-bed-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        margin: 0 0 10px !important;
        border-radius: 14px !important;
    }

    .profile-main-info,
    .brand-identity,
    .branch-info-box,
    .pms-customer-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        text-align: center !important;
        justify-items: center !important;
    }

    .avatar-wrapper-pms,
    .brand-icon-pms,
    .branch-icon-box,
    .pms-avatar-circle {
        margin: 0 auto !important;
    }

    .room-card-wrapper,
    .bed-card-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .room-media-box,
    .bed-media-box,
    .main-photo-wrapper,
    .media-card-pms,
    .upload-box-premium,
    .product-image-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .room-media-box,
    .bed-media-box {
        height: auto !important;
        aspect-ratio: 16 / 10;
    }

    .room-media-box img,
    .bed-media-box img,
    .main-photo-wrapper img,
    .media-card-pms img,
    .product-image-container img,
    .room-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }

    .price-tag-overlay,
    .branch-tag {
        max-width: calc(100% - 24px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .room-name-title,
    .room-stats,
    .timeline-row,
    .data-row,
    .total-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .card-footer-actions,
    .card-actions-hover {
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .stat-card-pms {
        min-height: 132px !important;
        height: auto !important;
    }

    .stat-card-pms .stat-value,
    .total-price-value {
        font-size: clamp(22px, 8vw, 32px) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere;
    }

    /* Tables */
    .grid-view,
    .table-responsive,
    .table-responsive-custom,
    .pms-table-container,
    .pms-debt-grid-wrapper,
    .grid-wrapper-pms,
    .grid-view-wrapper,
    .audit-grid-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }

    .grid-wrapper-pms {
        margin-bottom: 18px !important;
    }

    .grid-view .summary,
    .grid-wrapper-pms .summary,
    .pms-table-container .summary {
        padding: 10px 12px !important;
    }

    .table thead th {
        padding: 12px 14px !important;
        font-size: 10px !important;
        letter-spacing: 0.6px !important;
    }

    .table tbody td {
        padding: 12px 14px !important;
    }

    .grid-view table,
    .grid-wrapper-pms .table,
    .grid-view-wrapper .table,
    .pms-table-container .table,
    .pms-debt-grid-wrapper .table,
    .audit-grid-container .table,
    .table-bordered,
    .table-striped {
        min-width: 720px;
        margin-bottom: 0 !important;
    }

    .grid-view th,
    .grid-view td,
    .table th,
    .table td {
        white-space: nowrap;
        vertical-align: middle !important;
    }

    .grid-view td[style*="max-width"],
    .table td[style*="max-width"] {
        max-width: 220px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .summary,
    .pagination,
    .grid-view .summary {
        width: 100% !important;
        text-align: left !important;
    }

    .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin: 12px 0 0 !important;
    }

    .pagination > li > a,
    .pagination > li > span {
        min-width: 36px;
        text-align: center;
        border-radius: 9px !important;
        margin: 0 !important;
    }

    .pms-calendar-table {
        min-width: 900px;
    }

    .detail-view,
    .detail-view tbody,
    .detail-view tr,
    .detail-view th,
    .detail-view td {
        display: block;
        width: 100% !important;
    }

    .detail-view {
        min-width: 0 !important;
    }

    .detail-view tr {
        padding: 10px 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .detail-view th {
        padding: 0 0 4px !important;
        border: 0 !important;
        color: #64748b !important;
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        white-space: normal !important;
    }

    .detail-view td {
        padding: 0 !important;
        border: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* POS, calendar, maps and long panels */
    #map {
        width: 100% !important;
        min-height: 260px !important;
        height: 260px !important;
        border-radius: 12px !important;
    }

    .pos-wrapper,
    .refund-wrapper {
        padding-bottom: 18px !important;
    }

    .pos-main-panel [style*="overflow-y"],
    .refund-wrapper [style*="overflow-y"],
    .pms-row-flex [style*="overflow-y"] {
        max-height: 360px !important;
        overflow-y: auto !important;
    }

    .summary-card-pms,
    .payment-terminal-wrapper {
        position: static !important;
        top: auto !important;
    }

    .receipt-container,
    .thermal-receipt {
        width: 100% !important;
        max-width: 320px !important;
        padding: 12px !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    .receipt-container table,
    .thermal-receipt table,
    .items-table {
        min-width: 0 !important;
        width: 100% !important;
    }

    .file-upload-box,
    .post-preview-hint {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100% !important;
    }

    img {
        height: auto;
    }

    .modal-dialog {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 10px auto !important;
    }

    .modal-content {
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 14px !important;
    }

    .modal-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .main-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 14px !important;
        text-align: center;
    }

    .footer-right {
        margin-top: 0;
    }

    body.login-page {
        min-height: 100vh !important;
        height: auto !important;
        padding: 24px 14px !important;
        overflow-y: auto !important;
    }

    .login-box {
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto !important;
    }

    .login-logo a {
        font-size: 26px !important;
        letter-spacing: 0 !important;
    }

    .login-box-body {
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }

    .login-footer {
        position: static !important;
        margin-top: 18px;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .main-header .logo {
        display: none !important;
        width: 0 !important;
        max-width: 0 !important;
        flex-basis: 0 !important;
        font-size: 14px !important;
    }

    .content-header h1,
    .index-header-pms h1,
    .view-header h1,
    .view-header-pms h1,
    .view-header-card h1,
    .create-header h1,
    .update-header h1,
    .pos-header-bar h1 {
        font-size: 19px !important;
    }

    .content {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .company-search-wrapper,
    .branch-search-wrapper,
    .admin-search-wrapper,
    .customer-search-wrapper,
    .room-search-wrapper,
    .outdor-bed-search-wrapper,
    .order-search-wrapper,
    .action-search-wrapper,
    .index-header-pms,
    .pms-index-header,
    .company-update-header,
    .branch-update-header,
    .customer-update-header,
    .view-header,
    .view-header-pms,
    .view-header-card,
    .company-header-pms,
    .branch-header-pms,
    .customer-header-pms,
    .form-container-pms,
    .form-wrapper-pms,
    .form-outer-pms,
    .update-form-container,
    .company-form-container,
    .branch-form-container,
    .customer-form-wrapper,
    .room-form-container,
    .order-form-wrapper,
    .action-form-wrapper,
    .detail-card,
    .detail-card-pms,
    .profile-card-pms,
    .summary-card-pms,
    .pos-main-panel,
    .pos-side-panel,
    .pms-card-box,
    .calendar-card,
    .map-box-pms {
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .grid-wrapper-pms {
        margin-bottom: 14px !important;
    }

    .gallery-grid-pms,
    .media-grid-pms,
    .gallery-container {
        grid-template-columns: 1fr !important;
    }

    .grid-view table,
    .grid-wrapper-pms .table,
    .grid-view-wrapper .table,
    .pms-table-container .table,
    .pms-debt-grid-wrapper .table,
    .audit-grid-container .table,
    .table-bordered,
    .table-striped {
        min-width: 640px;
    }

    .navbar-nav > .user-menu > .dropdown-menu .user-footer {
        grid-template-columns: 1fr !important;
    }

    .receipt-container,
    .thermal-receipt {
        max-width: 100% !important;
    }
}