/* Extracted from backend view inline styles. Keep section order stable to preserve cascade. */ /* Fonts (Inter + JetBrains Mono) are preloaded once in the layout ; the render-blocking @import lines that used to live here were removed for speed. */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* === Main Layout === */ /* GLOBAL CRM OVERRIDES */ body { font-family: 'Inter', sans-serif !important; background-color: #f8fafc !important; -webkit-font-smoothing: antialiased; } .wrapper { background-color: #f8fafc !important; } /* Sidebar kengligini Booking uslubida optimallashtirish */ @media (min-width: 768px) { .main-header .logo { width: 260px !important; } .main-sidebar { width: 260px !important; } .content-wrapper, .main-footer, .main-header .navbar { margin-left: 260px !important; } .sidebar-mini.sidebar-collapse .main-header .logo { width: 64px !important; } .sidebar-mini.sidebar-collapse .main-header .navbar, .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .main-footer { margin-left: 64px !important; } .sidebar-mini.sidebar-collapse .main-sidebar { width: 64px !important; transform: translate(0, 0) !important; } } /* Scrollbar styling (Premium feel) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* AdminLTE skin override to clean white */ .skin-blue .main-header .navbar { background-color: #ffffff !important; } .skin-blue .main-header .logo { background-color: #003580 !important; } @media (max-width: 767px) { .skin-blue .main-header { background: #ffffff !important; } .skin-blue .main-header .logo { display: none !important; width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; background-color: #ffffff !important; color: #003580 !important; } .skin-blue .main-header .logo:hover { background-color: #ffffff !important; color: #003580 !important; } .skin-blue .main-header .navbar, .skin-blue .main-header .sidebar-toggle, .skin-blue .main-header .navbar-custom-menu { background-color: #ffffff !important; } } .main-header .navbar { min-height: 60px; } .main-header .sidebar-toggle:before { content: ""; } /* Mobile Table Auto-Scroll Fix */ .table-responsive-custom { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; } /* === Login Layout === */ /* LOGIN PREMIUM UI OVERRIDES */ body.login-page { background: linear-gradient(135deg, #003580 0%, #00224f 100%) !important; /* Booking Corporate Blue */ font-family: 'Inter', sans-serif !important; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; overflow: hidden; } /* Fon uchun nafis vizual effekt */ body.login-page::before { content: ""; position: absolute; width: 500px; height: 500px; background: rgba(255, 255, 255, 0.03); border-radius: 50%; top: -10%; left: -10%; z-index: 0; } body.login-page .login-shell { margin: 0 !important; z-index: 1; width: 100%; max-width: 420px; animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Login Logo */ body.login-page .login-shell-logo { margin-bottom: 18px; text-align: center; } body.login-page .login-shell-logo a { color: #ffffff !important; font-weight: 900 !important; font-size: 32px !important; letter-spacing: -1.5px; text-shadow: 0 10px 20px rgba(0,0,0,0.2); } /* Login Card (Forma joylashgan quti) */ body.login-page .login-box-body { background: #ffffff !important; padding: 40px !important; border-radius: 24px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important; border: none !important; } /* Inputlar dizayni */ body.login-page .form-control { height: 50px !important; border-radius: 12px !important; border: 1px solid #e2e8f0 !important; padding: 10px 15px !important; font-weight: 600 !important; transition: 0.3s !important; } body.login-page .form-control:focus { border-color: #003580 !important; box-shadow: 0 0 0 4px rgba(0, 53, 128, 0.1) !important; } /* Kirish tugmasi */ body.login-page .btn-primary { background-color: #003580 !important; border: none !important; height: 50px !important; border-radius: 12px !important; font-weight: 800 !important; font-size: 16px !important; text-transform: uppercase; letter-spacing: 0.5px; transition: 0.3s !important; box-shadow: 0 10px 15px -3px rgba(0, 53, 128, 0.3) !important; } body.login-page .btn-primary:hover { background-color: #00224f !important; transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(0, 53, 128, 0.4) !important; } /* Animatsiyalar */ @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Footer matni */ body.login-page .login-footer { position: absolute; bottom: 30px; color: rgba(255,255,255,0.4); font-size: 12px; font-weight: 600; } @media (max-width: 767px) { body.login-page { min-height: 100svh !important; height: auto !important; padding: 16px !important; overflow-y: auto !important; overflow-x: hidden !important; align-items: center !important; justify-content: center !important; } body.login-page::before { width: 220px; height: 220px; top: -70px; left: -80px; } body.login-page .login-shell { width: 100% !important; max-width: 360px !important; margin: 0 auto !important; } body.login-page .login-shell-logo { margin: 0 0 14px !important; } body.login-page .login-shell-logo a { font-size: 24px !important; letter-spacing: 0 !important; } body.login-page .login-box { width: 100% !important; max-width: 100% !important; margin: 0 !important; } body.login-page .login-box-body { padding: 24px 18px !important; border-radius: 20px !important; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26) !important; } body.login-page .login-logo-premium { margin-bottom: 18px !important; } body.login-page .login-logo-premium h2 { font-size: 28px !important; line-height: 1.05 !important; } body.login-page .login-box-msg { margin-bottom: 22px !important; line-height: 1.45 !important; } body.login-page .form-group.has-feedback { margin-bottom: 14px !important; } body.login-page .form-control, body.login-page .btn-primary, body.login-page .btn-login-pms { height: 48px !important; border-radius: 13px !important; } body.login-page .login-footer { position: static !important; margin-top: 14px; text-align: center; line-height: 1.4; color: rgba(255,255,255,0.65); } } /* === Content Layout === */ .content-wrapper { background-color: #f8fafc !important; /* Soft light blue grey */ font-family: 'Inter', sans-serif !important; min-height: 100vh; } .alert-container { margin-bottom: 20px; } .main-card-wrapper { animation: fadeIn 0.4s ease-out; } /* Content Header Section */ .content-header { padding: 30px 30px 15px 30px !important; background: transparent; } .content-header h1 { font-size: 28px !important; font-weight: 900 !important; color: #1e293b !important; /* Slate 800 */ letter-spacing: -1px; margin-bottom: 10px !important; } .content-header h1 small { font-size: 14px; font-weight: 600; color: #64748b; margin-left: 10px; text-transform: uppercase; letter-spacing: 1px; } /* Breadcrumbs Modern Style */ .breadcrumb { background: #ffffff !important; padding: 10px 20px !important; border-radius: 12px !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); display: inline-flex !important; font-size: 13px; font-weight: 600; } .breadcrumb > li + li:before { content: "\f105" !important; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #cbd5e1; padding: 0 10px; } .breadcrumb a { color: #3b82f6; text-decoration: none; } .breadcrumb a:hover { color: #2563eb; } /* Main Content Area */ .content { padding: 0 30px 30px 30px !important; } /* Professional Footer */ .main-footer { background: #ffffff !important; border-top: 1px solid #e2e8f0 !important; padding: 20px 30px !important; color: #64748b !important; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } .footer-brand { color: #1e293b; font-weight: 800; text-decoration: none; } .version-badge { background: #f1f5f9; color: #475569; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; border: 1px solid #e2e8f0; } /* === Content Responsive Guard === */ @media (max-width: 991px) { body.fixed .content-wrapper, body.fixed .right-side { padding-top: 60px !important; } .content-wrapper, .right-side, .main-footer { margin-left: 0 !important; width: 100% !important; } .content-header { padding: 20px 16px 10px !important; } .content { padding: 0 16px 22px !important; } .main-card-wrapper { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .main-card-wrapper > [class$="-index"], .main-card-wrapper > [class$="-create-container"], .main-card-wrapper > [class$="-update-container"], .main-card-wrapper > [class$="-view-container"], .main-card-wrapper > .salary-page-wrapper, .main-card-wrapper > .salary-update-wrapper, .main-card-wrapper > .salary-view-wrapper, .main-card-wrapper > .action-create { padding: 0 !important; margin: 0 !important; max-width: 100% !important; } } @media (max-width: 767px) { html, body, .wrapper, .content-wrapper { overflow-x: hidden !important; } .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; } .skin-blue .main-header, .skin-blue .main-header .logo, .skin-blue .main-header .navbar, .skin-blue .main-header .sidebar-toggle, .skin-blue .main-header .navbar-custom-menu { background-color: #ffffff !important; } .skin-blue .main-header .logo { color: #003580 !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; 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; } .user-menu .dropdown-toggle .fa-angle-down, .user-name-label { display: 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; background: transparent !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: 8px !important; left: 8px !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 10px !important; border-radius: 12px !important; } .main-sidebar { width: min(82vw, 280px) !important; padding-top: 60px !important; transform: translateX(-100%) !important; } .sidebar-open .main-sidebar { transform: translateX(0) !important; } .sidebar-open .content-wrapper, .sidebar-open .main-footer { transform: none !important; } .content-header { padding: 12px 8px 6px !important; } .content-header > .d-flex { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } .content-header h1 { font-size: 20px !important; line-height: 1.2 !important; margin: 0 !important; letter-spacing: 0 !important; word-break: break-word; } .content-header h1 small { display: block !important; margin: 4px 0 0 !important; font-size: 11px !important; line-height: 1.35 !important; letter-spacing: 0.2px !important; } .breadcrumb { width: 100% !important; max-width: 100% !important; padding: 7px 9px !important; margin: 0 !important; border-radius: 10px !important; box-shadow: none !important; display: flex !important; flex-wrap: wrap !important; gap: 3px !important; } .breadcrumb > li + li:before { padding: 0 5px !important; } .content { padding: 0 6px 14px !important; } .alert-container { margin-bottom: 8px !important; } .container, .container-fluid, .main-card-wrapper, .main-card-wrapper > * { max-width: 100% !important; } .container, .container-fluid { padding-left: 0 !important; padding-right: 0 !important; } .row { margin-left: -5px !important; margin-right: -5px !important; } .row > [class*="col-"], [class*="col-xl-"], [class*="col-lg-"], [class*="col-md-"], [class*="col-sm-"] { padding-left: 5px !important; padding-right: 5px !important; } .index-header-pms, .pms-index-header, .pms-report-header, .pms-bulk-header, .pms-update-header, .update-header, .update-header-pms, .create-header, .view-header, .view-header-pms, .view-header-card, .branch-header-card, .company-update-header, .branch-update-header, .customer-update-header, .company-header-pms, .branch-header-pms, .customer-header-pms, .user-header-pms, .pms-header, .action-header-pms, .pos-header-bar, .refund-header, .debt-summary-header, .calendar-nav, .import-header-pms, .pms-post-header, .payment-header-pms, .terminal-header, .photo-header-pms, .log-header, .salary-page-header, .salary-page-header-bar, .update-header-bar, .page-header-bar, .salary-history-header, .filter-header, .filter-header-pms, .section-header, .section-header-pms, .form-section-header, .form-section-title, .section-label, .bento-header, .pms-section-title, .items-section-title, .visual-section-header, .section-title-visual { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; padding: 10px !important; margin: 0 0 8px !important; border-radius: 12px !important; align-items: start !important; text-align: left !important; } .index-header-pms > *, .pms-index-header > *, .pms-report-header > *, .pms-bulk-header > *, .pms-update-header > *, .update-header > *, .update-header-pms > *, .create-header > *, .view-header > *, .view-header-pms > *, .view-header-card > *, .branch-header-card > *, .company-header-pms > *, .branch-header-pms > *, .customer-header-pms > *, .user-header-pms > *, .pms-header > *, .action-header-pms > *, .pos-header-bar > *, .calendar-nav > *, .salary-page-header > *, .salary-page-header-bar > *, .update-header-bar > *, .page-header-bar > * { min-width: 0 !important; width: 100% !important; max-width: 100% !important; } .index-header-pms h1, .pms-index-header h1, .pms-report-header h1, .pms-bulk-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, .view-header-card h2, .company-header-pms h1, .branch-header-pms h1, .customer-header-pms h1, .user-header-pms h1, .pms-header h1, .action-header-pms h1, .pos-header-bar h1, .debt-summary-header h2, .import-header-pms h2, .pms-post-header h1, .salary-page-header h1, .salary-page-header-bar h1, .page-header-bar h1 { font-size: 19px !important; line-height: 1.22 !important; margin: 0 !important; letter-spacing: 0 !important; word-break: break-word; } .index-header-pms p, .pms-index-header p, .pms-report-header p, .pms-bulk-header p, .pms-update-header p, .update-header p, .update-header-pms p, .create-header p, .view-header p, .view-header-pms p, .view-header-card p, .company-header-pms p, .branch-header-pms p, .customer-header-pms p, .user-header-pms p, .pms-header p, .action-header-pms p, .pos-header-bar p, .salary-page-header p, .salary-page-header-bar p, .page-header-bar p { margin: 3px 0 0 !important; line-height: 1.35 !important; max-width: 100% !important; } .header-actions, .header-actions-pms, .header-buttons, .action-buttons, .profile-actions, .action-group, .btn-nav-group, .pms-nav-group, .nav-btn-group-pms, .header-right-section, .view-header-right, .d-flex.justify-content-between.align-items-center { display: grid !important; grid-template-columns: 1fr !important; gap: 7px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } .grid-wrapper-pms, .grid-view-wrapper, .audit-grid-container, .pms-table-container, .pms-debt-grid-wrapper, .calendar-wrapper, .form-container-pms, .form-wrapper-pms, .form-outer-pms, .form-outer-wrapper, .form-outer-container, .form-update-container, .update-form-container, .company-form-container, .branch-form-container, .company-form-wrapper, .branch-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, .salary-form-card, .salary-search-wrapper, .user-photo-wrapper, .user-photo-form, .admin-dev-box, .panel-card, .detail-card, .detail-card-pms, .profile-card-pms, .detail-wrapper-pms, .salary-grid-box, .salary-history-section, .stat-card-pms, .pms-stat-card, .summary-card-pms, .stat-card-premium, .pms-card-box, .booking-main-card, .booking-card, .dark-table-box, .map-box-pms, .media-card-pms, .media-section-pms, .file-upload-box, .upload-box-premium, .upload-container, .customer-photo-container, .profile-cropper-container, .password-settings-box, .refund-calc-box, .pms-order-container, .debt-item-card, .user-target-card, .pms-room-card, .pms-property-card { width: 100% !important; max-width: 100% !important; padding: 10px !important; margin: 0 0 10px !important; border-radius: 12px !important; } .upload-box-premium, .upload-container { height: auto !important; min-height: 0 !important; overflow: visible !important; } .upload-box-premium .form-group, .upload-container .form-group, .fileupload-buttonbar { margin-bottom: 0 !important; position: static !important; clear: both !important; } .fileupload-buttonbar, .fileupload-buttonbar .row, .fileupload-buttonbar [class*="col-"] { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; float: none !important; position: static !important; } .fileupload-buttonbar .btn, .fileupload-buttonbar button, .fileupload-buttonbar .fileinput-button { width: 100% !important; min-height: 40px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; } .fileupload-buttonbar .fileinput-button { position: relative !important; overflow: hidden !important; } .fileupload-buttonbar .fileinput-button input[type="file"] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; cursor: pointer !important; z-index: 2 !important; font-size: 999px !important; } .fileupload-buttonbar .progress, .fileupload-progress, .files, .files table, .template-upload, .template-download { width: 100% !important; max-width: 100% !important; margin: 8px 0 0 !important; position: static !important; float: none !important; clear: both !important; } .files { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .room-form-container .gallery-upload-shell, .room-form-container .gallery-upload-shell > .form-group, .room-form-container .gallery-upload-shell .gallery-fileupload-widget, .outdor-bed-form .gallery-upload-shell, .outdor-bed-form .gallery-upload-shell > .form-group, .outdor-bed-form .gallery-upload-shell .gallery-fileupload-widget { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; position: static !important; clear: both !important; } .room-form-container .gallery-upload-shell .gallery-fileupload-widget > .row.fileupload-buttonbar, .outdor-bed-form .gallery-upload-shell .gallery-fileupload-widget > .row.fileupload-buttonbar { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 8px !important; background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 12px !important; overflow: visible !important; } .room-form-container .gallery-upload-shell .gallery-fileupload-widget > .row.fileupload-buttonbar > .col-lg-12, .outdor-bed-form .gallery-upload-shell .gallery-fileupload-widget > .row.fileupload-buttonbar > .col-lg-12 { display: grid !important; grid-template-columns: 1fr !important; gap: 7px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; } .room-form-container .gallery-upload-shell .gallery-fileupload-widget > .row.fileupload-buttonbar > .col-lg-5, .outdor-bed-form .gallery-upload-shell .gallery-fileupload-widget > .row.fileupload-buttonbar > .col-lg-5 { width: 100% !important; max-width: 100% !important; margin: 8px 0 0 !important; padding: 0 !important; float: none !important; position: static !important; clear: both !important; } .room-form-container .gallery-upload-shell .fileupload-buttonbar .btn, .room-form-container .gallery-upload-shell .fileupload-buttonbar .fileinput-button, .outdor-bed-form .gallery-upload-shell .fileupload-buttonbar .btn, .outdor-bed-form .gallery-upload-shell .fileupload-buttonbar .fileinput-button { width: 100% !important; min-height: 40px !important; margin: 0 !important; padding: 8px 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; white-space: nowrap !important; position: relative !important; overflow: hidden !important; } .room-form-container .gallery-upload-shell .fileinput-button input[type="file"], .outdor-bed-form .gallery-upload-shell .fileinput-button input[type="file"] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; cursor: pointer !important; z-index: 2 !important; font-size: 999px !important; } .room-form-container .gallery-upload-shell .fileupload-buttonbar .toggle, .outdor-bed-form .gallery-upload-shell .fileupload-buttonbar .toggle { display: none !important; } .room-form-container .gallery-upload-shell .table, .room-form-container .gallery-upload-shell .files, .outdor-bed-form .gallery-upload-shell .table, .outdor-bed-form .gallery-upload-shell .files { width: 100% !important; max-width: 100% !important; margin: 8px 0 0 !important; display: block !important; overflow-x: auto !important; position: static !important; clear: both !important; } .grid-wrapper-pms, .grid-view-wrapper, .audit-grid-container, .pms-table-container, .pms-debt-grid-wrapper, .dark-table-box, .salary-grid-box { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .grid-view .empty, .grid-wrapper-pms .empty { min-height: 118px !important; padding: 22px 12px !important; text-align: center !important; color: #64748b !important; font-weight: 700 !important; white-space: normal !important; } .grid-view .empty::before, .grid-wrapper-pms .empty::before { content: "\f07b"; display: block; margin-bottom: 8px; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 26px; color: #cbd5e1; } .empty-state-pms { width: 100% !important; margin: 0 0 10px !important; padding: 18px 12px !important; border: 1px dashed #cbd5e1 !important; border-radius: 12px !important; background: #ffffff !important; text-align: center !important; } .empty-state-pms > i { width: 44px; height: 44px; margin: 0 auto 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #eff6ff; color: #2563eb; font-size: 20px; } .empty-state-pms h4 { margin: 0 0 5px !important; color: #1e293b !important; font-size: 17px !important; font-weight: 900 !important; letter-spacing: 0 !important; } .empty-state-pms p { margin: 0 0 12px !important; color: #64748b !important; font-size: 13px !important; line-height: 1.4 !important; } .grid-view .summary, .grid-wrapper-pms .summary, .pms-table-container .summary { padding: 9px 10px !important; margin: 0 !important; } .content-wrapper table, .content-wrapper .table { margin-bottom: 0 !important; } .content-wrapper .grid-view table, .content-wrapper .grid-wrapper-pms .table, .content-wrapper .grid-view-wrapper .table, .content-wrapper .pms-table-container .table, .content-wrapper .pms-debt-grid-wrapper .table, .content-wrapper .audit-grid-container .table, .content-wrapper .dark-table-box .table { min-width: 640px; } .content-wrapper .table thead th, .content-wrapper .table tbody td, .content-wrapper .table tr th, .content-wrapper .table tr td { padding: 10px 12px !important; vertical-align: middle !important; white-space: nowrap; } .content-wrapper .table thead th { font-size: 10px !important; letter-spacing: 0.5px !important; } .detail-view, .detail-view tbody, .detail-view tr, .detail-view th, .detail-view td, .detail-view-custom, .detail-view-custom tbody, .detail-view-custom tr, .detail-view-custom th, .detail-view-custom td, .detail-view-pms, .detail-view-pms tbody, .detail-view-pms tr, .detail-view-pms th, .detail-view-pms td { display: block !important; width: 100% !important; min-width: 0 !important; white-space: normal !important; } .detail-view th, .detail-view-custom th, .detail-view-pms th { padding: 8px 10px 2px !important; border-bottom: 0 !important; font-size: 10px !important; color: #64748b !important; } .detail-view td, .detail-view-custom td, .detail-view-pms td { padding: 2px 10px 8px !important; overflow-wrap: anywhere; } .form-group { margin-bottom: 10px !important; } label, .control-label { margin-bottom: 5px !important; line-height: 1.35 !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"], select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .form-control, .select2-selection { min-height: 42px !important; } .input-group, .input-daterange { width: 100% !important; } .input-daterange { display: grid !important; grid-template-columns: 1fr !important; gap: 7px !important; } .input-daterange .input-group-addon { width: 100% !important; border-radius: 10px !important; border: 1px solid #e2e8f0 !important; background: #f8fafc !important; } .btn:not(.btn-xs):not(.btn-sm):not(.rounded-circle), .header-actions .btn, .header-actions-pms .btn, .header-buttons .btn, .action-buttons .btn, .profile-actions .btn, .action-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, .btn-search-pms, .btn-pms-search { width: 100% !important; min-height: 42px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; text-align: center !important; white-space: normal !important; } .grid-view .btn, .content-wrapper .btn-xs, .content-wrapper .btn-sm, .content-wrapper .btn.rounded-circle { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !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, .stats-grid, .pms-row-flex, .gallery-container, .media-grid-pms, .gallery-grid-pms { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; } .room-details-box, .card-content-pms, .payment-body, .pms-form-body, .card-header-pms, .pms-card-header, .map-header { padding: 10px !important; } .room-media-box, .card-media-wrapper, .bed-media-box, .main-photo-wrapper { height: auto !important; aspect-ratio: 16 / 10; overflow: hidden !important; } .room-media-box img, .card-media-wrapper img, .bed-media-box img, .main-photo-wrapper img, .room-image, img { max-width: 100% !important; } .visual-section-header::after, .section-title-visual::after, .items-section-title::after { display: none !important; } .pull-left, .pull-right { float: none !important; } .text-right, p.pull-right { text-align: left !important; } .mt-5 { margin-top: 14px !important; } .mt-4 { margin-top: 10px !important; } .mb-4 { margin-bottom: 10px !important; } .mb-3 { margin-bottom: 8px !important; } .p-4 { padding: 10px !important; } .p-3 { padding: 9px !important; } .main-footer { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; padding: 10px !important; text-align: center; } .modal-dialog { width: calc(100% - 16px) !important; max-width: calc(100% - 16px) !important; margin: 8px auto !important; } .modal-header, .modal-body, .modal-footer { padding: 10px !important; } .yii-debug-toolbar, #yii-debug-toolbar, .yii-debug-toolbar_position_bottom { display: none !important; } } @media (max-width: 575px) { .content-header { padding-left: 6px !important; padding-right: 6px !important; } .content { padding-left: 5px !important; padding-right: 5px !important; } .index-header-pms, .pms-index-header, .pms-report-header, .pms-bulk-header, .pms-update-header, .update-header, .update-header-pms, .create-header, .view-header, .view-header-pms, .view-header-card, .branch-header-card, .company-header-pms, .branch-header-pms, .customer-header-pms, .user-header-pms, .pms-header, .action-header-pms, .pos-header-bar, .refund-header, .debt-summary-header, .calendar-nav, .import-header-pms, .pms-post-header, .payment-header-pms, .grid-wrapper-pms, .grid-view-wrapper, .audit-grid-container, .pms-table-container, .pms-debt-grid-wrapper, .calendar-wrapper, .form-container-pms, .form-wrapper-pms, .form-outer-pms, .form-outer-wrapper, .form-outer-container, .form-update-container, .update-form-container, .company-form-container, .branch-form-container, .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, .salary-form-card, .detail-card, .detail-card-pms, .profile-card-pms, .summary-card-pms, .pms-card-box, .booking-main-card, .booking-card, .pms-room-card, .pms-property-card { padding: 8px !important; margin-bottom: 8px !important; border-radius: 10px !important; } .content-wrapper .grid-view table, .content-wrapper .grid-wrapper-pms .table, .content-wrapper .grid-view-wrapper .table, .content-wrapper .pms-table-container .table, .content-wrapper .pms-debt-grid-wrapper .table, .content-wrapper .audit-grid-container .table, .content-wrapper .dark-table-box .table { min-width: 600px; } .content-wrapper .table thead th, .content-wrapper .table tbody td, .content-wrapper .table tr th, .content-wrapper .table tr td { padding: 8px 10px !important; } } @media (max-width: 767px) { .content-wrapper .grid-view, .content-wrapper .grid-view-wrapper, .content-wrapper .grid-wrapper-pms, .content-wrapper .pms-table-container, .content-wrapper .pms-debt-grid-wrapper, .content-wrapper .audit-grid-container, .content-wrapper .dark-table-box { overflow: visible !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } .content-wrapper .grid-view table, .content-wrapper .grid-view .table, .content-wrapper .kv-grid-table { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; border: 0 !important; background: transparent !important; } .content-wrapper .grid-view table thead { display: none !important; } .content-wrapper .grid-view table tbody { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; } .content-wrapper .grid-view table tbody tr { display: block !important; width: 100% !important; padding: 10px !important; margin: 0 !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important; } .content-wrapper .grid-view table tbody tr.filters { display: none !important; } .content-wrapper .grid-view table tbody td, .content-wrapper .grid-view table tbody th { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 9px 4px !important; border: 0 !important; border-bottom: 1px solid #f1f5f9 !important; white-space: normal !important; text-align: right !important; overflow-wrap: anywhere !important; } .content-wrapper .grid-view table tbody td:last-child, .content-wrapper .grid-view table tbody th:last-child { border-bottom: 0 !important; } .content-wrapper .grid-view table tbody td::before, .content-wrapper .grid-view table tbody th::before { content: attr(data-label); flex: 0 0 42%; max-width: 42%; color: #64748b; font-size: 10px; font-weight: 900; letter-spacing: 0.5px; line-height: 1.35; text-align: left; text-transform: uppercase; overflow-wrap: anywhere; } .content-wrapper .grid-view table tbody td > *, .content-wrapper .grid-view table tbody th > * { max-width: 58%; } .content-wrapper .grid-view table tbody td.empty { display: flex !important; justify-content: center !important; min-height: 96px !important; text-align: center !important; color: #64748b !important; font-weight: 800 !important; } .content-wrapper .grid-view table tbody td.empty::before, .content-wrapper .grid-view table tbody td[data-label=""]::before { display: none !important; } .content-wrapper .grid-view table tbody td.action-column, .content-wrapper .grid-view table tbody td.mobile-actions-cell, .content-wrapper .grid-view table tbody td:last-child { align-items: center !important; } .content-wrapper .grid-view table tbody td.action-column > *, .content-wrapper .grid-view table tbody td.mobile-actions-cell > *, .content-wrapper .grid-view table tbody td:last-child > * { max-width: 58%; } .content-wrapper .grid-view table tbody td.action-column::before, .content-wrapper .grid-view table tbody td.mobile-actions-cell::before { display: none !important; } .content-wrapper .grid-view table tbody td.mobile-actions-cell { justify-content: flex-end !important; padding-top: 10px !important; } .content-wrapper .grid-view table tbody td img { max-width: 120px !important; height: auto !important; object-fit: cover !important; } .content-wrapper .grid-view .summary { margin: 0 0 10px !important; padding: 10px 12px !important; border-radius: 12px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; } } @media (hover: none), (max-width: 767px) { .navbar-nav > .user-menu.open > .dropdown-menu, .navbar-nav > .user-menu > .dropdown-menu { overflow: visible !important; max-height: calc(100vh - 78px) !important; } .navbar-nav > .user-menu > .dropdown-menu .user-header { height: auto !important; min-height: 0 !important; } .navbar-nav > .user-menu > .dropdown-menu .user-footer { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; padding: 10px 0 0 !important; margin: 0 !important; background: transparent !important; visibility: visible !important; opacity: 1 !important; transform: none !important; position: static !important; } .navbar-nav > .user-menu > .dropdown-menu .user-footer::before, .navbar-nav > .user-menu > .dropdown-menu .user-footer::after { display: none !important; } .navbar-nav > .user-menu > .dropdown-menu .user-footer > a, .navbar-nav > .user-menu > .dropdown-menu .btn-profile-premium, .navbar-nav > .user-menu > .dropdown-menu .btn-logout-premium { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; width: 100% !important; margin: 0 !important; border-radius: 10px !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .visual-panel-area .pms-room-card:hover, .visual-panel-area .pms-property-card:hover, .pms-room-card:hover, .pms-property-card:hover { transform: none !important; } .visual-panel-area .pms-room-card:hover .room-media-box img, .visual-panel-area .pms-property-card:hover .card-img-top, .pms-room-card:hover .room-media-box img, .pms-property-card:hover .card-img-top { transform: none !important; } .visual-panel-area .card-footer-actions, .visual-panel-area .card-actions-hover, .pms-room-card .card-footer-actions, .pms-property-card .card-actions-hover { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; margin-top: 12px !important; opacity: 1 !important; visibility: visible !important; transform: none !important; position: static !important; pointer-events: auto !important; } .visual-panel-area .card-footer-actions > *, .visual-panel-area .card-actions-hover > *, .pms-room-card .card-footer-actions > *, .pms-property-card .card-actions-hover > * { width: 100% !important; max-width: 100% !important; min-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; visibility: visible !important; transform: none !important; white-space: nowrap !important; } } @media (hover: none) and (max-width: 380px) { .navbar-nav > .user-menu > .dropdown-menu .user-footer, .visual-panel-area .card-footer-actions, .visual-panel-area .card-actions-hover, .pms-room-card .card-footer-actions, .pms-property-card .card-actions-hover { grid-template-columns: 1fr !important; } } /* === Site Index Calendar === */ .occupancy-calendar-wrapper { font-family: 'Inter', sans-serif !important; background: #fff; border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; } /* Navigation Bar */ .occupancy-calendar-wrapper .calendar-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .occupancy-calendar-wrapper .calendar-title { font-weight: 900; color: #1e293b; margin: 0; letter-spacing: -1px; } .occupancy-calendar-wrapper .btn-nav-pms { background: #f1f5f9; color: #475569; border-radius: 12px; padding: 10px 20px; font-weight: 700; border: none; transition: 0.3s; } .occupancy-calendar-wrapper .btn-nav-pms.active { background: #003580; color: #fff; } .occupancy-calendar-wrapper .btn-nav-pms:hover { background: #003580; color: #fff; transform: translateY(-2px); } .occupancy-desktop-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: -8px 0 18px; color: #64748b; font-size: 12px; font-weight: 700; } .occupancy-legend-item { display: inline-flex; align-items: center; gap: 7px; } .occupancy-legend-mark { width: 12px; height: 12px; border-radius: 4px; display: inline-flex; flex: 0 0 auto; border: 1px solid #dbe6f2; background: #f8fafc; } .occupancy-legend-mark.weekend { background: #edfbea; border-color: #c8f1d5; } .occupancy-legend-mark.booked { background: #003580; border-color: #003580; } /* Table Styling */ .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-table-scroll, .occupancy-calendar-wrapper .occupancy-table-scroll { width: 100%; max-width: 100%; display: block; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; border-radius: 18px; border: 1px solid #e2e8f0; background: #ffffff; box-shadow: inset 0 -1px 0 #eef2f7; -webkit-overflow-scrolling: touch !important; touch-action: pan-x; scrollbar-width: thin; scrollbar-color: #cbd5e1 #f8fafc; } .occupancy-calendar-wrapper .occupancy-table-scroll::-webkit-scrollbar { height: 12px; } .occupancy-calendar-wrapper .occupancy-table-scroll::-webkit-scrollbar-track { background: #f8fafc; border-radius: 999px; } .occupancy-calendar-wrapper .occupancy-table-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border: 3px solid #f8fafc; border-radius: 999px; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-table-scroll > .pms-calendar-table, .occupancy-calendar-wrapper .occupancy-table-scroll > .pms-calendar-table { display: table !important; width: var(--occupancy-calendar-min-width) !important; min-width: var(--occupancy-calendar-min-width) !important; max-width: none !important; table-layout: fixed !important; border-collapse: separate; border-spacing: 0; margin-bottom: 0; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-table-scroll > .pms-calendar-table thead { display: table-header-group !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-table-scroll > .pms-calendar-table tbody { display: table-row-group !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-table-scroll > .pms-calendar-table tr { display: table-row !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-table-scroll > .pms-calendar-table th, .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-table-scroll > .pms-calendar-table td { display: table-cell !important; white-space: nowrap !important; } .occupancy-calendar-wrapper .calendar-day-weekday { font-size: 10px; opacity: 0.6; } .occupancy-calendar-wrapper .calendar-day-date { font-size: 14px; } .occupancy-calendar-wrapper .calendar-room-name { color: #003580; } .occupancy-calendar-wrapper .calendar-bed-name { color: #059669; } .occupancy-calendar-wrapper .pms-calendar-table th, .occupancy-calendar-wrapper .pms-calendar-table td { padding: 12px 10px; text-align: center; border-right: 1px solid #edf2f7; border-bottom: 1px solid #edf2f7; min-width: 65px; font-size: 13px; font-weight: 700; } /* Sticky Name Column */ .occupancy-calendar-wrapper .pms-calendar-table th:first-child, .occupancy-calendar-wrapper .pms-calendar-table td:first-child { position: sticky; left: 0; background: #fff; z-index: 15; min-width: 180px; text-align: left; padding-left: 20px; box-shadow: 8px 0 16px rgba(15, 23, 42, 0.05); } .occupancy-calendar-wrapper .pms-calendar-table thead tr th { position: sticky; top: 0; z-index: 20; background: #f8fafc; color: #64748b; font-weight: 900; text-transform: uppercase; font-size: 11px; box-shadow: 0 1px 0 #e2e8f0; } .occupancy-calendar-wrapper .pms-calendar-table thead tr th:first-child { z-index: 30; background: #f8fafc; } /* Status Cells */ .occupancy-calendar-wrapper .cell-free { background-color: #f8fafc; color: #cbd5e1; font-weight: 400; } .occupancy-calendar-wrapper .cell-weekend { background-color: rgba(79, 239, 20, 0.08) !important; color: #059669; } .occupancy-calendar-wrapper .pms-calendar-table tbody tr:not(.row-category):hover td { background-color: #f8fbff; } .occupancy-calendar-wrapper .pms-calendar-table tbody tr:not(.row-category):hover td:first-child { color: #003580; } .occupancy-calendar-wrapper .desktop-free-dot { width: 6px; height: 6px; display: inline-flex; border-radius: 999px; background: #cbd5e1; opacity: 0.8; vertical-align: middle; } .occupancy-calendar-wrapper .cell-weekend .desktop-free-dot { background: #10b981; } .occupancy-calendar-wrapper .btn-order-indicator { width: 100%; border-radius: 6px; border: none; height: 32px; transition: 0.2s; font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .occupancy-calendar-wrapper .btn-order-indicator:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgba(0,0,0,0.1); } /* Category Header Row */ .occupancy-calendar-wrapper .row-category { background: #f1f5f9; font-weight: 900; color: #475569; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; } .occupancy-calendar-wrapper .row-category .category-label-cell, .occupancy-calendar-wrapper .row-category .category-spacer-cell { background: #f1f5f9 !important; } #myModal.occupancy-order-modal .modal-dialog { width: min(960px, calc(100vw - 32px)); max-width: 960px; margin: 24px auto; } #myModal.occupancy-order-modal .modal-content { max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; border: 0; border-radius: 18px; box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3); } #myModal.occupancy-order-modal .modal-header { flex: 0 0 auto; padding: 18px 22px; border-bottom: 1px solid #eef2f7; } #myModal.occupancy-order-modal .occupancy-modal-title { margin: 0; font-weight: 900; color: #003580; } #myModal.occupancy-order-modal .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; } #myModal.occupancy-order-modal #modalContent { padding: 22px; } @media (max-width: 767px) { .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-table-scroll, .occupancy-calendar-wrapper .occupancy-table-scroll { width: 100%; max-width: 100%; overflow-x: auto !important; overflow-y: hidden !important; border-radius: 12px; touch-action: pan-x; } } @media (max-width: 767px) { .occupancy-calendar-wrapper { padding: 12px !important; border-radius: 16px !important; } .occupancy-calendar-wrapper .calendar-nav { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 14px !important; } .occupancy-calendar-wrapper .calendar-nav h2 { font-size: 24px !important; line-height: 1.15 !important; } .occupancy-calendar-wrapper .calendar-nav .d-flex { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; } .occupancy-calendar-wrapper .btn-nav-pms { width: 100% !important; min-height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 9px 12px !important; } .occupancy-desktop-legend { font-size: 11px; gap: 8px 12px; margin: -4px 0 14px; } #myModal.occupancy-order-modal .modal-dialog { width: 100%; max-width: 100%; min-height: 100dvh; margin: 0; } #myModal.occupancy-order-modal .modal-content { max-height: 100dvh; min-height: 100dvh; border-radius: 0; } #myModal.occupancy-order-modal .modal-header { padding: 14px 16px; } #myModal.occupancy-order-modal .modal-header h4 { font-size: 17px; line-height: 1.2; } #myModal.occupancy-order-modal #modalContent { padding: 12px; } } /* === Site Index Final Overrides === */ .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper { border-radius: 22px !important; border: 1px solid #d8e3f0 !important; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-desktop-legend { display: flex !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-table-scroll { display: block !important; overflow-x: auto !important; overflow-y: hidden !important; border-radius: 18px !important; border: 1px solid #dbe6f2 !important; background: #fff !important; box-shadow: inset 0 -1px 0 #edf2f7 !important; padding: 0 !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-table-scroll > .pms-calendar-table { display: table !important; width: var(--occupancy-calendar-min-width) !important; min-width: var(--occupancy-calendar-min-width) !important; max-width: none !important; table-layout: fixed !important; border-collapse: separate !important; border-spacing: 0 !important; margin: 0 !important; background: #fff !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table thead, .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table tbody { display: table-row-group !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table thead { display: table-header-group !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table tr { display: table-row !important; border: 0 !important; box-shadow: none !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table th, .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table td { display: table-cell !important; width: 72px !important; min-width: 72px !important; max-width: 72px !important; padding: 12px 10px !important; border-right: 1px solid #edf2f7 !important; border-bottom: 1px solid #edf2f7 !important; text-align: center !important; vertical-align: middle !important; white-space: nowrap !important; background-clip: padding-box !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table th:first-child, .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table td:first-child { position: sticky !important; left: 0 !important; z-index: 15 !important; width: 180px !important; min-width: 180px !important; max-width: 180px !important; background: #fff !important; color: #003580 !important; text-align: left !important; padding-left: 20px !important; box-shadow: 8px 0 16px rgba(15, 23, 42, 0.05) !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table thead th { position: sticky !important; top: 0 !important; z-index: 20 !important; background: #f8fafc !important; color: #64748b !important; font-size: 11px !important; font-weight: 900 !important; text-transform: uppercase !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table thead th:first-child { z-index: 30 !important; background: #f8fafc !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table .row-category td { background: #f1f5f9 !important; color: #475569 !important; font-size: 11px !important; letter-spacing: 1px !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table .row-category .category-label-cell { position: sticky !important; left: 0 !important; z-index: 18 !important; width: 180px !important; min-width: 180px !important; max-width: 180px !important; background: #f1f5f9 !important; color: #003580 !important; text-align: left !important; padding-left: 20px !important; box-shadow: 8px 0 16px rgba(15, 23, 42, 0.05) !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .desktop-free-dot { width: 7px !important; height: 7px !important; display: inline-flex !important; border-radius: 999px !important; background: #cbd5e1 !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .cell-weekend { background-color: #edfbea !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .cell-weekend .desktop-free-dot { background: #10b981 !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .btn-order-indicator { height: 34px !important; border-radius: 10px !important; } #myModal.occupancy-order-modal .modal-dialog { width: min(960px, calc(100vw - 32px)) !important; max-width: 960px !important; margin: 24px auto !important; } #myModal.occupancy-order-modal .modal-content { max-height: calc(100dvh - 48px) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; border-radius: 18px !important; } #myModal.occupancy-order-modal .modal-body { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 0 !important; } #myModal.occupancy-order-modal #modalContent { padding: 22px !important; } @media (max-width: 767px) { .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .occupancy-table-scroll > .pms-calendar-table, .occupancy-calendar-wrapper .occupancy-table-scroll > .pms-calendar-table { width: calc(110px + var(--occupancy-day-count, 30) * 60px) !important; min-width: calc(110px + var(--occupancy-day-count, 30) * 60px) !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table th, .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table td, .occupancy-calendar-wrapper .pms-calendar-table th, .occupancy-calendar-wrapper .pms-calendar-table td { min-width: 60px !important; width: 60px !important; max-width: 60px !important; padding: 9px 6px !important; font-size: 12px !important; } .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table th:first-child, .content-wrapper .main-card-wrapper .occupancy-calendar-wrapper .pms-calendar-table td:first-child, .occupancy-calendar-wrapper .pms-calendar-table th:first-child, .occupancy-calendar-wrapper .pms-calendar-table td:first-child { min-width: 110px !important; width: 110px !important; max-width: 110px !important; padding-left: 12px !important; white-space: normal !important; word-break: break-word !important; } #myModal.occupancy-order-modal .modal-dialog { width: 100% !important; max-width: 100% !important; min-height: 100dvh !important; margin: 0 !important; } #myModal.occupancy-order-modal .modal-content { max-height: 100dvh !important; min-height: 100dvh !important; border-radius: 0 !important; } #myModal.occupancy-order-modal #modalContent { padding: 12px !important; } }