/* ========================================================================== HQC FINANCE ERP - UI MASTER 2026 Scope: SAU ĐĂNG NHẬP Login: KHÔNG ĐỤNG ========================================================================== */ :root { --hqc-primary-50: #eff6ff; --hqc-primary-100: #dbeafe; --hqc-primary-500: #3b82f6; --hqc-primary-600: #2563eb; --hqc-success-50: #ecfdf5; --hqc-success-500: #10b981; --hqc-success-600: #059669; --hqc-warning-50: #fff7ed; --hqc-warning-500: #f59e0b; --hqc-warning-600: #d97706; --hqc-danger-50: #fff1f2; --hqc-danger-500: #f43f5e; --hqc-danger-600: #e11d48; --hqc-info-50: #ecfeff; --hqc-info-500: #06b6d4; --hqc-info-600: #0891b2; --hqc-surface: #ffffff; --hqc-page: #f6f9fc; --hqc-page-soft: #f9fbfd; --hqc-border: #e7edf4; --hqc-border-strong: #d9e2ec; --hqc-text: #14213d; --hqc-muted: #64748b; --hqc-radius-sm: 10px; --hqc-radius-md: 14px; --hqc-radius-lg: 18px; --hqc-shadow-sm: 0 5px 18px rgba(15, 23, 42, .055); --hqc-shadow-md: 0 12px 32px rgba(15, 23, 42, .075); } /* ------------------------- APP SHELL ------------------------- */ body.fi-body:not(.fi-simple-layout) { background: radial-gradient(circle at 82% 0%, rgba(59,130,246,.06), transparent 26%), radial-gradient(circle at 10% 15%, rgba(16,185,129,.045), transparent 22%), var(--hqc-page) !important; color: var(--hqc-text); } body.fi-body:not(.fi-simple-layout) .fi-main { padding-top: 18px; } body.fi-body:not(.fi-simple-layout) .fi-main-ctn { background: transparent !important; } /* ------------------------- TOPBAR / SIDEBAR ------------------------- */ body.fi-body:not(.fi-simple-layout) .fi-topbar nav { background: rgba(255,255,255,.94) !important; border-bottom: 1px solid var(--hqc-border) !important; box-shadow: 0 2px 12px rgba(15,23,42,.035) !important; backdrop-filter: blur(10px); } body.fi-body:not(.fi-simple-layout) .fi-sidebar { background: #fff !important; border-right: 1px solid var(--hqc-border) !important; } body.fi-body:not(.fi-simple-layout) .fi-sidebar-item-button { border-radius: 10px !important; transition: .16s ease !important; } body.fi-body:not(.fi-simple-layout) .fi-sidebar-item.fi-active .fi-sidebar-item-button { background: linear-gradient(135deg, #eef6ff 0%, #f3f8ff 100%) !important; color: var(--hqc-primary-600) !important; } body.fi-body:not(.fi-simple-layout) .fi-sidebar-item.fi-active svg { color: var(--hqc-primary-600) !important; } /* ------------------------- PAGE HEADER ------------------------- */ body.fi-body:not(.fi-simple-layout) .fi-header-heading { color: var(--hqc-text) !important; font-weight: 800 !important; letter-spacing: -.025em; } body.fi-body:not(.fi-simple-layout) .fi-header-subheading { color: var(--hqc-muted) !important; } /* ------------------------- SECTIONS / CARDS ------------------------- */ body.fi-body:not(.fi-simple-layout) .fi-section, body.fi-body:not(.fi-simple-layout) .fi-ta-ctn, body.fi-body:not(.fi-simple-layout) .fi-wi-stats-overview-stat { background: rgba(255,255,255,.97) !important; border: 1px solid var(--hqc-border) !important; border-radius: var(--hqc-radius-lg) !important; box-shadow: var(--hqc-shadow-sm) !important; } body.fi-body:not(.fi-simple-layout) .fi-section-header { background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important; border-bottom: 1px solid var(--hqc-border) !important; padding: 16px 18px !important; } body.fi-body:not(.fi-simple-layout) .fi-section-content { padding: 18px !important; } /* KPI cards sáng */ body.fi-body:not(.fi-simple-layout) .fi-wi-stats-overview-stat { position: relative; overflow: hidden; min-height: 132px; padding: 18px !important; } body.fi-body:not(.fi-simple-layout) .fi-wi-stats-overview-stat::after { content: ""; position: absolute; width: 110px; height: 110px; right: -34px; top: -34px; border-radius: 999px; background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(16,185,129,.05)); pointer-events: none; } body.fi-body:not(.fi-simple-layout) .fi-wi-stats-overview-stat-value { color: var(--hqc-text) !important; font-weight: 800 !important; letter-spacing: -.03em; } /* ------------------------- BUTTON SYSTEM ------------------------- */ body.fi-body:not(.fi-simple-layout) .fi-btn { border-radius: 10px !important; min-height: 38px; font-weight: 700 !important; box-shadow: none !important; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important; } body.fi-body:not(.fi-simple-layout) .fi-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(15,23,42,.09) !important; } /* primary */ body.fi-body:not(.fi-simple-layout) .fi-btn.fi-color-primary { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important; color: #fff !important; border: 0 !important; } /* success */ body.fi-body:not(.fi-simple-layout) .fi-btn.fi-color-success { background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important; color: #fff !important; border: 0 !important; } /* warning */ body.fi-body:not(.fi-simple-layout) .fi-btn.fi-color-warning { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important; color: #5b3a00 !important; border: 0 !important; } /* danger */ body.fi-body:not(.fi-simple-layout) .fi-btn.fi-color-danger { background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%) !important; color: #fff !important; border: 0 !important; } /* info */ body.fi-body:not(.fi-simple-layout) .fi-btn.fi-color-info { background: linear-gradient(135deg, #67e8f9 0%, #06b6d4 100%) !important; color: #0e4f5d !important; border: 0 !important; } /* gray / neutral */ body.fi-body:not(.fi-simple-layout) .fi-btn.fi-color-gray { background: #fff !important; color: #334155 !important; border: 1px solid var(--hqc-border-strong) !important; } /* ------------------------- FORMS ------------------------- */ body.fi-body:not(.fi-simple-layout) .fi-input-wrp, body.fi-body:not(.fi-simple-layout) .fi-select-input { border: 1px solid #cbd5e1 !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035) !important; } body.fi-body:not(.fi-simple-layout) .fi-input-wrp:focus-within { border-color: #93c5fd !important; box-shadow: 0 0 0 3px rgba(59,130,246,.10) !important; } body.fi-body:not(.fi-simple-layout) .fi-fo-field-wrp-label { color: #334155 !important; font-weight: 650 !important; } /* ------------------------- MODALS ------------------------- */ body.fi-body:not(.fi-simple-layout) .fi-modal-window { width: min(540px, calc(100vw - 24px)) !important; max-width: min(540px, calc(100vw - 24px)) !important; border-radius: 18px !important; border: 1px solid var(--hqc-border) !important; box-shadow: 0 24px 70px rgba(15,23,42,.16) !important; overflow: hidden !important; } body.fi-body:not(.fi-simple-layout) .fi-modal-header { padding: 22px 22px 12px !important; border-bottom: 0 !important; background: #fff !important; } body.fi-body:not(.fi-simple-layout) .fi-modal-content { padding: 10px 22px 18px !important; background: #fff !important; } body.fi-body:not(.fi-simple-layout) .fi-modal-footer { padding: 14px 22px 20px !important; background: #fff !important; border-top: 1px solid #f1f5f9 !important; } /* ------------------------- TABLES ------------------------- */ body.fi-body:not(.fi-simple-layout) .fi-ta-header { background: #fff !important; } body.fi-body:not(.fi-simple-layout) .fi-ta-table thead { background: #f8fafc !important; } body.fi-body:not(.fi-simple-layout) .fi-ta-table th { color: #64748b !important; font-size: 12px !important; font-weight: 750 !important; letter-spacing: .015em; } body.fi-body:not(.fi-simple-layout) .fi-ta-row { border-color: #eef2f7 !important; } body.fi-body:not(.fi-simple-layout) .fi-ta-row:hover { background: #fbfdff !important; } /* ------------------------- BADGES ------------------------- */ body.fi-body:not(.fi-simple-layout) .fi-badge { border-radius: 999px !important; font-weight: 700 !important; } /* ------------------------- DASHBOARD ------------------------- */ body.fi-body:not(.fi-simple-layout) .fi-wi { gap: 16px; } body.fi-body:not(.fi-simple-layout) canvas { max-width: 100%; } /* Chart/table widgets */ body.fi-body:not(.fi-simple-layout) .fi-wi-chart, body.fi-body:not(.fi-simple-layout) .fi-wi-table { border-radius: var(--hqc-radius-lg) !important; } /* ------------------------- DESKTOP ------------------------- */ @media (min-width: 1024px) { body.fi-body:not(.fi-simple-layout) .fi-main { padding-left: 22px !important; padding-right: 22px !important; } body.fi-body:not(.fi-simple-layout) .fi-section-content { padding: 20px !important; } } /* ------------------------- TABLET ------------------------- */ @media (min-width: 641px) and (max-width: 1023px) { body.fi-body:not(.fi-simple-layout) .fi-main { padding-left: 14px !important; padding-right: 14px !important; } body.fi-body:not(.fi-simple-layout) .fi-section-content { padding: 15px !important; } } /* ------------------------- MOBILE APP ------------------------- */ @media (max-width: 640px) { body.fi-body:not(.fi-simple-layout) { background: #f7faff !important; } body.fi-body:not(.fi-simple-layout) .fi-main { width: 100% !important; max-width: none !important; padding: 12px 10px 24px !important; margin: 0 !important; } body.fi-body:not(.fi-simple-layout) .fi-header { gap: 10px !important; } body.fi-body:not(.fi-simple-layout) .fi-header-heading { font-size: clamp(22px, 7vw, 30px) !important; line-height: 1.08 !important; } body.fi-body:not(.fi-simple-layout) .fi-header-actions { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; } body.fi-body:not(.fi-simple-layout) .fi-header-actions .fi-btn { min-height: 36px !important; padding: 8px 11px !important; font-size: 13px !important; } body.fi-body:not(.fi-simple-layout) .fi-section, body.fi-body:not(.fi-simple-layout) .fi-ta-ctn { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 14px !important; } body.fi-body:not(.fi-simple-layout) .fi-section-header { padding: 13px 14px !important; } body.fi-body:not(.fi-simple-layout) .fi-section-content { padding: 14px !important; } body.fi-body:not(.fi-simple-layout) .fi-wi-stats-overview-stats-ctn { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body.fi-body:not(.fi-simple-layout) .fi-wi-stats-overview-stat { min-width: 0 !important; min-height: 112px !important; padding: 14px !important; border-radius: 14px !important; } body.fi-body:not(.fi-simple-layout) .fi-wi-stats-overview-stat-value { font-size: clamp(22px, 7vw, 30px) !important; } /* form full width */ body.fi-body:not(.fi-simple-layout) .fi-fo-grid { grid-template-columns: minmax(0,1fr) !important; } body.fi-body:not(.fi-simple-layout) .fi-fo-component-ctn { width: 100% !important; max-width: none !important; } /* table giống app: full width, cuộn ngang khi cần */ body.fi-body:not(.fi-simple-layout) .fi-ta-content { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } body.fi-body:not(.fi-simple-layout) .fi-ta-table { min-width: 680px; } body.fi-body:not(.fi-simple-layout) .fi-ta-header { padding: 12px !important; } /* Modal gần full width nhưng không dính mép */ body.fi-body:not(.fi-simple-layout) .fi-modal-window { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; margin: 10px !important; border-radius: 16px !important; } body.fi-body:not(.fi-simple-layout) .fi-modal-header { padding: 18px 16px 8px !important; } body.fi-body:not(.fi-simple-layout) .fi-modal-content { padding: 8px 16px 14px !important; } body.fi-body:not(.fi-simple-layout) .fi-modal-footer { padding: 12px 16px 16px !important; } } /* Small phone */ @media (max-width: 390px) { body.fi-body:not(.fi-simple-layout) .fi-wi-stats-overview-stats-ctn { grid-template-columns: 1fr !important; } } /* HQC_DARK_STABILITY_V32_START */ /* Dark palette riêng cho APP sau đăng nhập */ .dark body.fi-body:not(.fi-simple-layout) { --hqc-page: #0f172a; --hqc-page-soft: #111827; --hqc-surface: #172033; --hqc-border: #263247; --hqc-border-strong: #334155; --hqc-text: #eaf2ff; --hqc-muted: #9fb0c7; background: radial-gradient(circle at 82% 0%, rgba(59,130,246,.10), transparent 26%), radial-gradient(circle at 10% 15%, rgba(16,185,129,.06), transparent 22%), #0f172a !important; color: var(--hqc-text) !important; } /* Topbar */ .dark body.fi-body:not(.fi-simple-layout) .fi-topbar nav { background: rgba(15,23,42,.96) !important; border-bottom-color: #273449 !important; box-shadow: 0 4px 18px rgba(0,0,0,.18) !important; } /* Sidebar */ .dark body.fi-body:not(.fi-simple-layout) .fi-sidebar { background: #111827 !important; border-right-color: #263247 !important; } .dark body.fi-body:not(.fi-simple-layout) .fi-sidebar-item-button, .dark body.fi-body:not(.fi-simple-layout) .fi-sidebar-group-label, .dark body.fi-body:not(.fi-simple-layout) .fi-sidebar-item-label { color: #cbd5e1 !important; } .dark body.fi-body:not(.fi-simple-layout) .fi-sidebar-item.fi-active .fi-sidebar-item-button { background: linear-gradient(135deg, rgba(37,99,235,.22), rgba(14,165,233,.10)) !important; color: #8ec5ff !important; } .dark body.fi-body:not(.fi-simple-layout) .fi-sidebar-item.fi-active .fi-sidebar-item-label, .dark body.fi-body:not(.fi-simple-layout) .fi-sidebar-item.fi-active svg { color: #8ec5ff !important; } /* Main cards */ .dark body.fi-body:not(.fi-simple-layout) .fi-section, .dark body.fi-body:not(.fi-simple-layout) .fi-ta-ctn, .dark body.fi-body:not(.fi-simple-layout) .fi-wi-stats-overview-stat { background: #172033 !important; border-color: #263247 !important; box-shadow: 0 8px 24px rgba(0,0,0,.16) !important; } .dark body.fi-body:not(.fi-simple-layout) .fi-section-header { background: linear-gradient(180deg, #182236 0%, #151e30 100%) !important; border-bottom-color: #263247 !important; } /* Text */ .dark body.fi-body:not(.fi-simple-layout) .fi-header-heading, .dark body.fi-body:not(.fi-simple-layout) .fi-section-header-heading, .dark body.fi-body:not(.fi-simple-layout) .fi-wi-stats-overview-stat-value, .dark body.fi-body:not(.fi-simple-layout) .fi-ta-text, .dark body.fi-body:not(.fi-simple-layout) .fi-ta-table td { color: #edf4ff !important; } .dark body.fi-body:not(.fi-simple-layout) .fi-header-subheading, .dark body.fi-body:not(.fi-simple-layout) .fi-section-header-description, .dark body.fi-body:not(.fi-simple-layout) .fi-wi-stats-overview-stat-description, .dark body.fi-body:not(.fi-simple-layout) .fi-ta-table th { color: #9fb0c7 !important; } /* Inputs / selects */ .dark body.fi-body:not(.fi-simple-layout) .fi-input-wrp, .dark body.fi-body:not(.fi-simple-layout) .fi-select-input { background: #111a2b !important; border-color: #334155 !important; color: #e5edf8 !important; } .dark body.fi-body:not(.fi-simple-layout) input, .dark body.fi-body:not(.fi-simple-layout) select, .dark body.fi-body:not(.fi-simple-layout) textarea { color: #e5edf8 !important; } .dark body.fi-body:not(.fi-simple-layout) input::placeholder, .dark body.fi-body:not(.fi-simple-layout) textarea::placeholder { color: #74849a !important; } /* Tables */ .dark body.fi-body:not(.fi-simple-layout) .fi-ta-table thead { background: #111a2b !important; } .dark body.fi-body:not(.fi-simple-layout) .fi-ta-row { border-color: #263247 !important; } .dark body.fi-body:not(.fi-simple-layout) .fi-ta-row:hover { background: #1a263a !important; } /* Neutral button dark */ .dark body.fi-body:not(.fi-simple-layout) .fi-btn.fi-color-gray { background: #172033 !important; color: #dce7f6 !important; border-color: #334155 !important; } /* Modal dark */ .dark body.fi-body:not(.fi-simple-layout) .fi-modal-window, .dark body.fi-body:not(.fi-simple-layout) .fi-modal-header, .dark body.fi-body:not(.fi-simple-layout) .fi-modal-content, .dark body.fi-body:not(.fi-simple-layout) .fi-modal-footer { background: #172033 !important; color: #edf4ff !important; border-color: #263247 !important; } /* Dashboard chart canvases/cards không bị nền trắng gắt */ .dark body.fi-body:not(.fi-simple-layout) .fi-wi-chart, .dark body.fi-body:not(.fi-simple-layout) .fi-wi-table { background: #172033 !important; } /* Mobile dark vẫn full width, không bị bó */ @media (max-width: 640px) { .dark body.fi-body:not(.fi-simple-layout) { background: #0f172a !important; } .dark body.fi-body:not(.fi-simple-layout) .fi-section, .dark body.fi-body:not(.fi-simple-layout) .fi-ta-ctn { background: #172033 !important; } } /* HQC_DARK_STABILITY_V32_END */ /* HQC STEP 6.6J5 - MOBILE TABLE / SIDEBAR STABILITY */ @media (max-width: 1024px) { .fi-sidebar, .fi-sidebar-close-overlay, [data-sidebar], [x-data*=sidebar] { z-index: 90 !important; } .fi-main, .fi-main-ctn, .fi-page, .fi-page-content, .fi-ta, .fi-ta-ctn { min-width: 0 !important; max-width: 100% !important; } .fi-ta-ctn, .fi-ta-content, .fi-ta-table { overflow-x: auto !important; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .fi-ta-table th, .fi-ta-table td, .fi-ta-cell, .fi-ta-header-cell, .fi-ta-col-wrp { z-index: 1 !important; } .fi-ta-table th[style*=position: /* HQC_STEP66J6C_MOBILE_START */ /* ========================================================== HQC MOBILE SIDEBAR / TABLE STACKING MASTER ========================================================== */ @media (max-width: 1024px) { /* Sidebar luôn cao hơn mọi bảng / sticky header / toolbar */ .fi-sidebar { z-index: 99999 !important; isolation: isolate !important; } .fi-sidebar-close-overlay { z-index: 99990 !important; } .fi-sidebar-header, .fi-sidebar-nav, .fi-sidebar-nav-groups { position: relative !important; z-index: 100000 !important; } /* Main content tuyệt đối không tạo stacking context cao hơn menu */ .fi-main { position: relative !important; z-index: 0 !important; min-width: 0 !important; max-width: 100vw !important; } /* Hạ toàn bộ bảng và toolbar */ .fi-main .fi-ta-ctn, .fi-main .fi-ta-content, .fi-main .fi-ta-table, .fi-main .fi-ta-header, .fi-main .fi-ta-header-toolbar, .fi-main .fi-ta-header-actions, .fi-main .fi-ta-search-field, .fi-main .fi-ta-col-wrp, .fi-main .fi-ta-cell, .fi-main .fi-ta-actions { position: relative !important; z-index: 1 !important; } /* Sticky header chỉ hoạt động trong table */ .fi-main .fi-ta-table thead, .fi-main .fi-ta-table thead th, .fi-main .fi-ta-header-cell { z-index: 2 !important; } /* Không cho table bung ra ngoài viewport */ .fi-main .fi-ta-ctn, .fi-main .fi-ta-content { overflow-x: auto !important; max-width: 100% !important; width: 100% !important; } .fi-main .fi-ta-table { max-width: none !important; } /* Sidebar mở thì bảng phía sau không được bắt interaction */ body:has(.fi-sidebar-open) .fi-main, body:has(.fi-sidebar[aria-expanded="true"]) .fi-main { pointer-events: none !important; } .fi-sidebar { pointer-events: auto !important; } /* Không cho header/filter toolbar chui xuyên sidebar */ .fi-ta-header, .fi-ta-header-toolbar, .fi-ta-table thead { transform: none !important; } } /* HQC_STEP66J6C_MOBILE_END */ /* HQC_CASH_FORM_INPUT_V1_START */ /* |-------------------------------------------------------------------------- | HQC Finance ERP - Cash Transaction Form | Scoped UI only. | Không ảnh hưởng các form / modal khác. |-------------------------------------------------------------------------- */ .hqc-cash-transaction-section { --hqc-input-border: #d7e0eb; --hqc-input-border-hover: #aebed2; --hqc-input-focus: #3b82f6; --hqc-input-bg: #ffffff; --hqc-input-muted-bg: #f8fafc; } /* Label dễ đọc hơn */ .hqc-cash-transaction-section label, .hqc-cash-transaction-section .fi-fo-field-wrp-label { font-weight: 600; color: #172033; } /* * Input wrapper Filament. * Đây là lớp chính cho TextInput / Select / DatePicker. */ .hqc-cash-transaction-section .fi-input-wrp { background: var(--hqc-input-bg); border: 1px solid var(--hqc-input-border); border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025); transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } /* Bỏ cảm giác "ô trắng mất viền" */ .hqc-cash-transaction-section .fi-input-wrp:hover { border-color: var(--hqc-input-border-hover); } /* Focus */ .hqc-cash-transaction-section .fi-input-wrp:focus-within { border-color: var(--hqc-input-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10), 0 1px 2px rgba(15, 23, 42, 0.04); } /* Input text */ .hqc-cash-transaction-section input:not([type="checkbox"]):not([type="radio"]), .hqc-cash-transaction-section select { min-height: 42px; } /* Nội dung input dễ nhìn */ .hqc-cash-transaction-section input, .hqc-cash-transaction-section select, .hqc-cash-transaction-section textarea { color: #0f172a; } /* Placeholder rõ vừa đủ */ .hqc-cash-transaction-section input::placeholder, .hqc-cash-transaction-section textarea::placeholder { color: #94a3b8; opacity: 1; } /* Readonly / calculated fields */ .hqc-cash-transaction-section input[readonly], .hqc-cash-transaction-section input:disabled, .hqc-cash-transaction-section select:disabled { background: var(--hqc-input-muted-bg); color: #475569; } /* Textarea */ .hqc-cash-transaction-section textarea { min-height: 100px; border-radius: 10px; } /* * Section card: * giữ nhẹ, không thay layout hiện hữu. */ .hqc-cash-transaction-section.fi-section { border: 1px solid #e4eaf2; border-radius: 14px; overflow: hidden; } /* Header section rõ hơn một chút */ .hqc-cash-transaction-section .fi-section-header { border-bottom: 1px solid #e8edf4; } /* Helper text */ .hqc-cash-transaction-section .fi-fo-field-wrp-helper-text { color: #64748b; } /* |-------------------------------------------------------------------------- | Mobile |-------------------------------------------------------------------------- */ @media (max-width: 767px) { .hqc-cash-transaction-section .fi-input-wrp { border-radius: 9px; } .hqc-cash-transaction-section input:not([type="checkbox"]):not([type="radio"]), .hqc-cash-transaction-section select { min-height: 44px; } } /* HQC_CASH_FORM_INPUT_V1_END */ /* HQC_CASH_FORM_VISUAL_V2_START */ /* * CHỈ form Giao dịch Thu-Chi. * Không áp dụng global. */ .hqc-cash-transaction-section { margin-bottom: 4px !important; border: 1px solid #dfe7f1 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: 0 6px 18px rgba(15, 23, 42, .045) !important; overflow: hidden !important; } /* Header section */ .hqc-cash-transaction-section .fi-section-header { padding: 18px 20px 14px !important; border-bottom: 1px solid #e7edf5 !important; background: linear-gradient( 180deg, #ffffff 0%, #fbfdff 100% ) !important; } .hqc-cash-transaction-section .fi-section-header-heading { font-size: 16px !important; font-weight: 700 !important; color: #10213d !important; } .hqc-cash-transaction-section .fi-section-header-description { margin-top: 4px !important; color: #718096 !important; font-size: 13px !important; } /* Nội dung section */ .hqc-cash-transaction-section .fi-section-content-ctn, .hqc-cash-transaction-section .fi-section-content { padding: 18px 20px 20px !important; } /* Label */ .hqc-cash-transaction-section .fi-fo-field-wrp-label, .hqc-cash-transaction-section label { font-weight: 650 !important; color: #172033 !important; } /* * INPUT / SELECT / DATE * Filament đang có style cũ khá phẳng nên ép scoped tại đây. */ .hqc-cash-transaction-section .fi-input-wrp { min-height: 44px !important; border: 1px solid #cfd9e7 !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .035) !important; outline: none !important; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important; } .hqc-cash-transaction-section .fi-input-wrp:hover { border-color: #9fb2ca !important; background: #ffffff !important; } .hqc-cash-transaction-section .fi-input-wrp:focus-within { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, .11), 0 1px 2px rgba(15, 23, 42, .04) !important; } /* Một số field Filament có input thật bên trong */ .hqc-cash-transaction-section input:not([type="checkbox"]):not([type="radio"]), .hqc-cash-transaction-section select { min-height: 42px !important; color: #0f172a !important; } /* Placeholder */ .hqc-cash-transaction-section input::placeholder, .hqc-cash-transaction-section textarea::placeholder { color: #98a6ba !important; opacity: 1 !important; } /* Readonly / field tự tính */ .hqc-cash-transaction-section input[readonly], .hqc-cash-transaction-section input:disabled, .hqc-cash-transaction-section select:disabled { background: #f7f9fc !important; color: #475569 !important; } /* Textarea */ .hqc-cash-transaction-section textarea { min-height: 112px !important; border-radius: 10px !important; } /* Upload */ .hqc-cash-transaction-section .fi-fo-file-upload { border: 1px dashed #bcc9da !important; border-radius: 10px !important; background: #fbfcfe !important; } /* Helper text */ .hqc-cash-transaction-section .fi-fo-field-wrp-helper-text { margin-top: 5px !important; color: #718096 !important; font-size: 12px !important; } /* Khoảng cách field */ .hqc-cash-transaction-section .fi-fo-field-wrp { gap: 6px !important; } /* Mobile */ @media (max-width: 767px) { .hqc-cash-transaction-section { border-radius: 13px !important; } .hqc-cash-transaction-section .fi-section-header, .hqc-cash-transaction-section .fi-section-content-ctn, .hqc-cash-transaction-section .fi-section-content { padding-left: 14px !important; padding-right: 14px !important; } .hqc-cash-transaction-section .fi-input-wrp { min-height: 46px !important; } } /* HQC_CASH_FORM_VISUAL_V2_END */ /* HQC_CASH_INPUT_BORDER_V3_START */ /* |-------------------------------------------------------------------------- | HQC Cash Transaction Form - Input Border V3 |-------------------------------------------------------------------------- | CSS cũ đang ép border:0 !important. | Vì vậy V3 KHÔNG phụ thuộc border nữa. | Dùng inset box-shadow để tạo khung rõ và an toàn. |-------------------------------------------------------------------------- */ /* TextInput / Select / DatePicker */ .hqc-cash-transaction-section .fi-input-wrp, .hqc-cash-transaction-section .fi-fo-select.fi-input-wrp { border: 0 !important; border-radius: 10px !important; background-color: #ffffff !important; box-shadow: inset 0 0 0 1px #cbd6e4, 0 1px 2px rgba(15, 23, 42, .035) !important; transition: box-shadow .16s ease, background-color .16s ease !important; } /* Hover */ .hqc-cash-transaction-section .fi-input-wrp:hover, .hqc-cash-transaction-section .fi-fo-select.fi-input-wrp:hover { box-shadow: inset 0 0 0 1px #9fb2c9, 0 2px 5px rgba(15, 23, 42, .05) !important; } /* Focus */ .hqc-cash-transaction-section .fi-input-wrp:focus-within, .hqc-cash-transaction-section .fi-fo-select.fi-input-wrp:focus-within { box-shadow: inset 0 0 0 1.5px #3b82f6, 0 0 0 3px rgba(59, 130, 246, .10), 0 2px 6px rgba(15, 23, 42, .05) !important; } /* Chiều cao input */ .hqc-cash-transaction-section .fi-input-wrp { min-height: 44px !important; } /* Input text */ .hqc-cash-transaction-section .fi-input, .hqc-cash-transaction-section input:not([type="checkbox"]):not([type="radio"]), .hqc-cash-transaction-section select { min-height: 42px !important; color: #172033 !important; font-size: 14px !important; } /* Select button */ .hqc-cash-transaction-section .fi-select-input { min-height: 42px !important; } /* Readonly / disabled / auto-calculated */ .hqc-cash-transaction-section input[readonly], .hqc-cash-transaction-section input:disabled, .hqc-cash-transaction-section select:disabled { background-color: #f5f8fc !important; color: #64748b !important; } /* Label */ .hqc-cash-transaction-section .fi-fo-field-wrp-label, .hqc-cash-transaction-section label { font-weight: 650 !important; color: #172033 !important; } /* Required star */ .hqc-cash-transaction-section .fi-fo-field-wrp-label-required-mark { color: #ef4444 !important; } /* Textarea */ .hqc-cash-transaction-section textarea { min-height: 110px !important; border: 0 !important; border-radius: 10px !important; box-shadow: inset 0 0 0 1px #cbd6e4 !important; } .hqc-cash-transaction-section textarea:focus { box-shadow: inset 0 0 0 1.5px #3b82f6, 0 0 0 3px rgba(59, 130, 246, .10) !important; } /* Upload box */ .hqc-cash-transaction-section .fi-fo-file-upload { border: 0 !important; border-radius: 10px !important; background: #fbfcfe !important; box-shadow: inset 0 0 0 1px #cbd6e4 !important; } /* Khoảng cách label -> field */ .hqc-cash-transaction-section .fi-fo-field-wrp { row-gap: 7px !important; } /* Section tinh chỉnh nhẹ */ .hqc-cash-transaction-section { border: 0 !important; box-shadow: inset 0 0 0 1px #e2e8f0, 0 6px 18px rgba(15, 23, 42, .04) !important; } /* Mobile */ @media (max-width: 767px) { .hqc-cash-transaction-section .fi-input-wrp { min-height: 46px !important; } .hqc-cash-transaction-section .fi-input, .hqc-cash-transaction-section input:not([type="checkbox"]):not([type="radio"]), .hqc-cash-transaction-section select { min-height: 44px !important; font-size: 16px !important; } } /* HQC_CASH_INPUT_BORDER_V3_END */ /* HQC_GLOBAL_INPUT_BORDER_FIX_V1 */ body.fi-body:not(.fi-simple-layout) .fi-input-wrp:hover, body.fi-body:not(.fi-simple-layout) .fi-select-input:hover { border-color: #94a3b8 !important; } body.fi-body:not(.fi-simple-layout) .fi-input-wrp:focus-within, body.fi-body:not(.fi-simple-layout) .fi-select-input:focus-within { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10), 0 1px 2px rgba(15, 23, 42, 0.04) !important; } /* Readonly / disabled */ body.fi-body:not(.fi-simple-layout) .fi-input-wrp:has(input[readonly]), body.fi-body:not(.fi-simple-layout) .fi-input-wrp:has(input:disabled) { background: #f8fafc !important; border-color: #e2e8f0 !important; } /* HQC_GLOBAL_INPUT_BORDER_FIX_V1_END */ /* ========================================================= HQC_FINANCIAL_PERIOD_MASTER_V3_START ONE SOURCE OF TRUTH ========================================================= */ /* * FINANCIAL PERIOD HEADER * Title one full row. * Actions below. */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; align-items: stretch !important; gap: 14px !important; } /* * Title. */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .fi-header-heading-ctn { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 0 0 100% !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .fi-header-heading { width: 100% !important; max-width: none !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* * ACTION CONTAINER */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .fi-header-actions { display: grid !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: auto auto !important; gap: 8px 10px !important; align-items: stretch !important; } /* * BUTTON COMMON */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-action { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 40px !important; margin: 0 !important; padding-left: 10px !important; padding-right: 10px !important; justify-content: center !important; white-space: nowrap !important; border-radius: 10px !important; font-weight: 650 !important; } /* ========================================================= ROW 1 ========================================================= */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-create { grid-column: 1 !important; grid-row: 1 !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-lock-month { grid-column: 2 !important; grid-row: 1 !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-lock-quarter { grid-column: 3 !important; grid-row: 1 !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-lock-year { grid-column: 4 !important; grid-row: 1 !important; } /* ========================================================= ROW 2 ========================================================= */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-reopen-month { grid-column: 2 !important; grid-row: 2 !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-reopen-quarter { grid-column: 3 !important; grid-row: 2 !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-reopen-year { grid-column: 4 !important; grid-row: 2 !important; } /* ========================================================= LAPTOP 1025 - 1500 ========================================================= */ @media (min-width: 1025px) and (max-width: 1500px) { body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .fi-header-actions { gap: 7px 8px !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-action { min-height: 38px !important; padding-left: 8px !important; padding-right: 8px !important; font-size: .80rem !important; } } /* ========================================================= TABLET / SMALL LAPTOP 750 - 1024 ========================================================= */ @media (min-width: 750px) and (max-width: 1024px) { body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .fi-header-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-create { grid-column: 1 / -1 !important; grid-row: auto !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-lock-month, body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-lock-quarter, body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-lock-year, body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-reopen-month, body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-reopen-quarter, body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-reopen-year { grid-column: auto !important; grid-row: auto !important; } } /* ========================================================= 481 - 749 ========================================================= */ @media (min-width: 481px) and (max-width: 749px) { body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .fi-header-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-create { grid-column: 1 / -1 !important; grid-row: auto !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-lock-month, body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-lock-quarter, body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-lock-year, body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-reopen-month, body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-reopen-quarter, body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-reopen-year { grid-column: auto !important; grid-row: auto !important; } } /* ========================================================= <= 480 ========================================================= */ @media (max-width: 480px) { body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .fi-header-actions { grid-template-columns: 1fr !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-action { grid-column: 1 !important; grid-row: auto !important; } } /* ========================================================= HQC_FINANCIAL_PERIOD_MASTER_V3_END ========================================================= */ /* ========================================================= HQC_FINANCIAL_PERIOD_POLISH_V4_START Sprint 8 - Closing Control APPEND ONLY - DO NOT MODIFY MASTER_V3 ========================================================= */ /* * Action buttons: * chỉ polish giao diện, không thay layout MASTER_V3. */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-action { position: relative; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-action:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .10) !important; } body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-action:active { transform: translateY(0); } /* * Tạo kỳ: * giữ màu Filament hiện tại, * chỉ làm nút rõ và sạch hơn. */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-create { border: 1px solid rgba(37, 99, 235, .16) !important; } /* * Nhóm khóa kỳ. */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-lock { border: 1px solid rgba(220, 38, 38, .14) !important; } /* * Khóa quý: * màu warning của Filament vẫn giữ nguyên. */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-lock-quarter { border: 1px solid rgba(217, 119, 6, .16) !important; } /* * Nhóm mở lại: * tạo cảm giác thao tác phục hồi, * không thay color() trong PHP. */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-reopen { border: 1px solid rgba(5, 150, 105, .16) !important; } /* * Icon action gọn và đồng đều. */ body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-action svg { width: 18px !important; height: 18px !important; } /* * Table Financial Period: * chỉ polish table toàn trang, * không thay column/data/query. */ body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-ctn { border-radius: 14px; } body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-row { transition: background-color .15s ease, box-shadow .15s ease; } body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-row:hover { box-shadow: inset 3px 0 0 rgba(37, 99, 235, .32); } /* * Badge trạng thái: * nhỏ gọn, rõ trạng thái. */ body.fi-body:not(.fi-simple-layout) .fi-main .fi-badge { font-weight: 700; letter-spacing: .01em; } /* * Record actions: * Lịch sử / Khóa kỳ / Mở lại * rõ hơn khi hover. */ body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-actions .fi-btn, body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-actions .fi-link { transition: transform .15s ease, opacity .15s ease; } body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-actions .fi-btn:hover, body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-actions .fi-link:hover { transform: translateY(-1px); } /* * Modal Closing: * chỉ tăng độ sạch của phần content. */ body.fi-body:not(.fi-simple-layout) .fi-modal-window:has(.fi-modal-heading) { border-radius: 16px; } body.fi-body:not(.fi-simple-layout) .fi-modal-window .fi-modal-heading { font-weight: 800; } /* * Mobile: * không đổi grid MASTER_V3. * Chỉ giảm hiệu ứng để UI nhẹ hơn. */ @media (max-width: 749px) { body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-action:hover { transform: none; } body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-row:hover { box-shadow: none; } } /* * Dark mode polish. */ .dark body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-action { box-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important; } .dark body.fi-body:not(.fi-simple-layout) .fi-header:has(.hqc-period-action) .hqc-period-action:hover { box-shadow: 0 7px 18px rgba(0, 0, 0, .28) !important; } /* ========================================================= HQC_FINANCIAL_PERIOD_POLISH_V4_END ========================================================= */ /* ========================================================= HQC_MOBILE_TABLE_HEADER_GAP_FINAL_V10 Scope: mobile finance table header ONLY Row 1: File actions Row 2: Search / Filter / Columns ========================================================= */ @media (max-width: 700px) { /* * Filament table header: * remove vertical space distributed between children. */ .fi-main .fi-ta .fi-ta-header { justify-content: flex-start !important; align-content: flex-start !important; gap: 8px !important; row-gap: 8px !important; padding-top: 8px !important; padding-bottom: 8px !important; } /* * Row 1 - three Excel actions */ .fi-main .fi-ta .fi-ta-header > .fi-ta-actions.fi-align-start.fi-wrapped { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } /* * Row 2 - toolbar */ .fi-main .fi-ta .fi-ta-header-toolbar { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 42px !important; } /* * Remove accidental spacer/min-height * inherited by direct header children. */ .fi-main .fi-ta .fi-ta-header > .fi-ta-actions + .fi-ta-header-toolbar { margin-top: 0 !important; } } /* Small phones */ @media (max-width: 390px) { .fi-main .fi-ta .fi-ta-header { gap: 6px !important; row-gap: 6px !important; padding-top: 6px !important; padding-bottom: 6px !important; } } /* HQC_MOBILE_TABLE_HEADER_GAP_FINAL_V10_END */ /* ========================================================= HQC_FINANCE_MOBILE_TOOLBAR_REAL_DOM_V12 FINAL CLEAN VERSION ROW 1 = Template | Import | Export ROW 2 = Search | Filter | Columns Gap between Row 1 and Row 2 = 2px Scope = finance tables only ========================================================= */ @media (max-width: 700px) { /* * ROW 1 */ .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) { margin: 0 !important; padding-top: 8px !important; padding-right: 10px !important; padding-bottom: 0 !important; padding-left: 10px !important; min-height: 0 !important; } /* * Existing 3 buttons remain untouched. */ .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) > .fi-ta-actions.fi-align-start.fi-wrapped { margin: 0 !important; padding: 0 !important; min-height: 38px !important; } /* * ROW 2 * Actual sibling toolbar. */ .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar { width: 100% !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; margin: 2px 0 0 0 !important; padding: 0 10px 6px 10px !important; min-height: 40px !important; height: auto !important; } /* * Remove Filament inherited vertical spacing. */ .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar > * { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; } /* * Search / Filter / Columns functional container. */ .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar > :last-child { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; } /* * Search. */ .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar .fi-ta-search-field { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar .fi-ta-search-field .fi-input-wrp { height: 40px !important; min-height: 40px !important; margin: 0 !important; } /* * Filter + Columns. */ .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar .fi-icon-btn { flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 0 !important; padding: 0 !important; } } /* Samsung / narrow mobile */ @media (max-width: 390px) { .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) { padding: 6px 6px 0 6px !important; } .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar { gap: 4px !important; margin-top: 2px !important; padding: 0 6px 4px 6px !important; min-height: 38px !important; } .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar > *, .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar > :last-child { min-height: 38px !important; height: 38px !important; } .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar .fi-ta-search-field .fi-input-wrp { height: 38px !important; min-height: 38px !important; } .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar .fi-icon-btn { flex-basis: 38px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; } } /* HQC_FINANCE_MOBILE_TOOLBAR_REAL_DOM_V12_END */ /* ========================================================= HQC_FINANCE_MOBILE_FILTER_STABILITY_V18 Finance tables only. 1. Collapse the real header row around the 3 Excel actions. 2. Keep exactly 2px between action row and toolbar. 3. Keep table itself horizontally scrollable. 4. Prevent filter/dropdown controls from being trapped behind table heading/data layers. ========================================================= */ @media (max-width: 700px) { /* * ROW 1 — actual Filament header containing: * Template | Import | Export */ body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 8px 10px 0 10px !important; min-height: 46px !important; height: 46px !important; max-height: 46px !important; overflow: visible !important; } body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) > .fi-ta-actions.fi-align-start.fi-wrapped { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; min-height: 38px !important; height: 38px !important; max-height: 38px !important; overflow: visible !important; } /* * ROW 2 — Search | Filter | Columns */ body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar { margin: 2px 0 0 0 !important; padding: 0 10px 6px 10px !important; gap: 6px !important; row-gap: 0 !important; min-height: 46px !important; height: 46px !important; max-height: 46px !important; position: relative !important; z-index: 20 !important; overflow: visible !important; } /* * Keep toolbar children compact. */ body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar > * { margin-top: 0 !important; margin-bottom: 0 !important; } } /* * FILTER / COLUMN CONTROLS * * Important: * Do not globally disable horizontal scrolling of the table. * Only the header/toolbar layers are raised above the table. */ body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-ctn > .fi-ta-header { position: relative; z-index: 10; } body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-ctn > .fi-ta-header-toolbar { position: relative; z-index: 20; overflow: visible !important; } /* * Filament floating UI / dropdown layers. */ body.fi-body:not(.fi-simple-layout) .fi-dropdown-panel, body.fi-body:not(.fi-simple-layout) .fi-popover, body.fi-body:not(.fi-simple-layout) [role="menu"], body.fi-body:not(.fi-simple-layout) [role="listbox"] { z-index: 100 !important; } /* Samsung / narrow mobile */ @media (max-width: 390px) { body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) { padding: 6px 6px 0 6px !important; min-height: 44px !important; height: 44px !important; max-height: 44px !important; } body.fi-body:not(.fi-simple-layout) .fi-main .fi-ta-ctn > .fi-ta-header:has(.hqc-finance-mobile-file-action) + .fi-ta-header-toolbar { margin-top: 2px !important; padding: 0 6px 4px 6px !important; min-height: 42px !important; height: 42px !important; max-height: 42px !important; } } /* HQC_FINANCE_MOBILE_FILTER_STABILITY_V18_END */ /* ========================================================= HQC_FINANCE_RUNTIME_DOM_FINAL_V20 Runtime DOM confirmed by Chrome: .fi-ta-header-ctn > .fi-ta-header > .fi-ta-header-toolbar Scope: finance tables with .hqc-finance-mobile-file-action ========================================================= */ @media (max-width: 700px) { /* * Actual parent containing BOTH rows. */ .fi-main .fi-ta-header-ctn: has(.hqc-finance-mobile-file-action) { display: flex !important; flex-direction: column !important; gap: 2px !important; row-gap: 2px !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; } /* * ROW 1 * Template | Import | Export */ .fi-main .fi-ta-header-ctn: has(.hqc-finance-mobile-file-action) > .fi-ta-header { display: flex !important; margin: 0 !important; padding: 6px 8px 0 8px !important; gap: 0 !important; row-gap: 0 !important; min-height: 44px !important; height: 44px !important; max-height: 44px !important; box-sizing: border-box !important; } .fi-main .fi-ta-header-ctn: has(.hqc-finance-mobile-file-action) > .fi-ta-header .fi-ta-actions { margin: 0 !important; padding: 0 !important; min-height: 38px !important; height: 38px !important; align-items: center !important; } /* * ROW 2 * Search | Filter | Columns */ .fi-main .fi-ta-header-ctn: has(.hqc-finance-mobile-file-action) > .fi-ta-header-toolbar { margin: 0 !important; padding: 0 8px 6px 8px !important; min-height: 46px !important; height: 46px !important; max-height: 46px !important; gap: 6px !important; row-gap: 0 !important; box-sizing: border-box !important; position: relative !important; z-index: 20 !important; overflow: visible !important; } /* * Remove Filament vertical spacing inside Row 2. */ .fi-main .fi-ta-header-ctn: has(.hqc-finance-mobile-file-action) > .fi-ta-header-toolbar > * { margin-block: 0 !important; padding-block: 0 !important; min-height: 40px !important; height: 40px !important; align-items: center !important; } /* * Search. */ .fi-main .fi-ta-header-ctn: has(.hqc-finance-mobile-file-action) .fi-ta-search-field { margin: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; } .fi-main .fi-ta-header-ctn: has(.hqc-finance-mobile-file-action) .fi-ta-search-field .fi-input-wrp { min-height: 40px !important; height: 40px !important; margin: 0 !important; } /* * Filter / Columns icons. */ .fi-main .fi-ta-header-ctn: has(.hqc-finance-mobile-file-action) .fi-ta-header-toolbar .fi-icon-btn { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; } } /* Samsung S20 / smaller */ @media (max-width: 390px) { .fi-main .fi-ta-header-ctn: has(.hqc-finance-mobile-file-action) > .fi-ta-header { padding: 5px 6px 0 6px !important; min-height: 43px !important; height: 43px !important; max-height: 43px !important; } .fi-main .fi-ta-header-ctn: has(.hqc-finance-mobile-file-action) > .fi-ta-header-toolbar { padding: 0 6px 5px 6px !important; min-height: 43px !important; height: 43px !important; max-height: 43px !important; gap: 4px !important; } } /* ========================================================= FILTER MODAL UX ========================================================= */ /* * Keep filter modal content scrollable. */ .fi-modal-window:has(.fi-ta-filter) .fi-modal-content, .fi-modal-window:has(.fi-ta-filters) .fi-modal-content { overflow-y: auto !important; max-height: 65vh !important; } /* * Mobile modal: * use almost entire phone width. */ @media (max-width: 700px) { .fi-modal-window:has(.fi-ta-filter), .fi-modal-window:has(.fi-ta-filters) { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; margin: 10px !important; } } /* HQC_FINANCE_RUNTIME_DOM_FINAL_V20_END */ /* ========================================================= HQC_FINANCE_FILTER_SLIDEOVER_SCROLL_V25 Slide-over: - full viewport height - content scrolls - header/footer stay visible - dates and all filters reachable ========================================================= */ /* * Filament slide-over window. */ .fi-modal-window.fi-width-screen, .fi-modal-window:has(.fi-ta-filter) { max-height: 100dvh !important; } /* * Mobile finance filter slide-over. */ @media (max-width: 700px) { .fi-modal-window:has(.fi-ta-filter), .fi-modal-window:has(.fi-ta-filters) { height: 100dvh !important; max-height: 100dvh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* * Header stays at top. */ .fi-modal-window:has(.fi-ta-filter) .fi-modal-header, .fi-modal-window:has(.fi-ta-filters) .fi-modal-header { flex: 0 0 auto !important; } /* * Only the form body scrolls. */ .fi-modal-window:has(.fi-ta-filter) .fi-modal-content, .fi-modal-window:has(.fi-ta-filters) .fi-modal-content { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; padding-bottom: 24px !important; } /* * Apply / Reset / Close always visible. */ .fi-modal-window:has(.fi-ta-filter) .fi-modal-footer, .fi-modal-window:has(.fi-ta-filters) .fi-modal-footer { flex: 0 0 auto !important; position: sticky !important; bottom: 0 !important; z-index: 50 !important; } } /* * Desktop/laptop: * keep body comfortably scrollable when transaction * filter has many fields. */ @media (min-width: 701px) { .fi-modal-window:has(.fi-ta-filter) .fi-modal-content, .fi-modal-window:has(.fi-ta-filters) .fi-modal-content { overflow-y: auto !important; min-height: 0 !important; max-height: calc(100dvh - 150px) !important; } } /* HQC_FINANCE_FILTER_SLIDEOVER_SCROLL_V25_END */ /* ========================================================= HQC_FINANCE_TABLE_COMPACT_V33 Scope: Only tables containing HQC Finance Excel actions. Target: - Giao dịch Thu-Chi - Khoản phải thu - Khoản phải chi Desktop/laptop compact similar to Cash Transactions. ========================================================= */ @media (min-width: 701px) { /* * Whole finance table container. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) { --hqc-finance-cell-x: 10px; --hqc-finance-cell-y: 8px; } /* * Header cells */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-header-cell { padding-top: 7px !important; padding-bottom: 7px !important; padding-left: var(--hqc-finance-cell-x) !important; padding-right: var(--hqc-finance-cell-x) !important; min-height: 38px !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; } /* * Data cells */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-cell { padding-top: var(--hqc-finance-cell-y) !important; padding-bottom: var(--hqc-finance-cell-y) !important; padding-left: var(--hqc-finance-cell-x) !important; padding-right: var(--hqc-finance-cell-x) !important; vertical-align: middle !important; } /* * Standard TextColumn wrapper */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-text { line-height: 1.25 !important; } /* * Reduce oversized row spacing. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) tbody tr { min-height: 52px !important; } /* * Keep badges compact. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-badge { min-height: 20px !important; padding-top: 2px !important; padding-bottom: 2px !important; padding-left: 6px !important; padding-right: 6px !important; font-size: 11px !important; line-height: 1.15 !important; } /* * Checkbox/action columns don't waste horizontal space. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-selection-cell, .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-actions-cell { width: 40px !important; min-width: 40px !important; padding-left: 7px !important; padding-right: 7px !important; } /* * Table itself uses available space naturally. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) table { border-collapse: collapse !important; } } /* Small laptop: compact a little more. */ @media (min-width: 701px) and (max-width: 1366px) { .fi-ta-ctn:has(.hqc-finance-mobile-file-action) { --hqc-finance-cell-x: 8px; --hqc-finance-cell-y: 7px; } .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-header-cell { font-size: 11px !important; } .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-cell { font-size: 12px !important; } } /* ========================================================= COLUMN MANAGER V33 Live mode: no Apply button required. ========================================================= */ .fi-ta-column-manager { max-height: min(66vh, 560px) !important; overflow-y: auto !important; overflow-x: hidden !important; } /* * Because changes are live now, * keep each option dense and easy to scan. */ .fi-ta-column-manager label { min-height: 34px !important; padding-top: 5px !important; padding-bottom: 5px !important; } /* Mobile */ @media (max-width: 700px) { .fi-ta-column-manager { max-height: 56vh !important; } .fi-ta-column-manager label { min-height: 38px !important; } } /* HQC_FINANCE_TABLE_COMPACT_V33_END */ /* ========================================================= HQC_FINANCE_MOBILE_TABLE_COMPACT_V34 Scope: Finance tables containing: .hqc-finance-mobile-file-action Mobile only: - compact rows - compact columns - readable font - horizontal scroll preserved - badges/actions compact ========================================================= */ @media (max-width: 700px) { /* * Keep table horizontally scrollable. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-content { overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin; } /* * Table width should follow actual visible columns, * not stretch each cell excessively. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) table { width: max-content !important; min-width: 100% !important; table-layout: auto !important; border-collapse: collapse !important; } /* * HEADER CELLS */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-header-cell { min-width: 86px !important; padding: 7px 8px !important; font-size: 11px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; vertical-align: middle !important; } /* * DATA CELLS */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-cell { padding: 8px 8px !important; font-size: 12px !important; line-height: 1.25 !important; vertical-align: middle !important; } /* * Reduce row height. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) tbody tr { min-height: 48px !important; height: auto !important; } /* * Text columns. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-text { line-height: 1.25 !important; } /* * Don't let normal text columns become gigantic. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) td:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) { max-width: 190px !important; } /* * Long descriptions can wrap naturally. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) td .fi-ta-text-item-label { white-space: normal !important; overflow-wrap: break-word !important; } /* * Date columns stay compact. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) th:first-of-type, .fi-ta-ctn:has(.hqc-finance-mobile-file-action) td:first-of-type { white-space: nowrap !important; } /* * Currency / amount should stay one line. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-cell:has(.fi-ta-text-item-label) { min-width: 86px !important; } /* * Badges compact. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-badge { min-height: 20px !important; padding: 2px 6px !important; font-size: 10px !important; line-height: 1.1 !important; white-space: nowrap !important; } /* * Checkbox column. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-selection-cell, .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-selection-cell-header { width: 34px !important; min-width: 34px !important; padding-left: 6px !important; padding-right: 6px !important; } /* * Row action column. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-actions-cell { width: 42px !important; min-width: 42px !important; padding-left: 5px !important; padding-right: 5px !important; } /* * Compact action icons. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-actions-cell .fi-icon-btn { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; } /* * Pagination compact. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-pagination { padding: 8px 8px !important; gap: 4px !important; } /* * Footer text. */ .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-pagination .fi-pagination-overview { font-size: 11px !important; } } /* Samsung S20 / narrow phone */ @media (max-width: 390px) { .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-header-cell { padding: 6px 6px !important; font-size: 10px !important; } .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-ta-cell { padding: 7px 6px !important; font-size: 11px !important; } .fi-ta-ctn:has(.hqc-finance-mobile-file-action) tbody tr { min-height: 44px !important; } .fi-ta-ctn:has(.hqc-finance-mobile-file-action) td:not(.fi-ta-selection-cell):not(.fi-ta-actions-cell) { max-width: 165px !important; } .fi-ta-ctn:has(.hqc-finance-mobile-file-action) .fi-badge { font-size: 9px !important; padding: 2px 5px !important; } } /* HQC_FINANCE_MOBILE_TABLE_COMPACT_V34_END */ /* ========================================================= HQC_COLUMN_MANAGER_NATIVE_V42 Minimal styling only. Layout/behavior handled by Filament native API. ========================================================= */ /* * We intentionally do NOT alter modal footer, * flex structure, positioning or overflow here. * * Filament native modal owns those behaviors. */ /* Laptop / desktop checkbox spacing */ @media (min-width: 701px) { .fi-modal-window .fi-ta-col-toggle { column-gap: 24px !important; row-gap: 4px !important; } } /* Mobile remains easy to tap. */ @media (max-width: 700px) { .fi-modal-window .fi-ta-col-toggle { row-gap: 3px !important; } } /* HQC_COLUMN_MANAGER_NATIVE_V42_END */ /* ========================================================= HQC_COLUMN_MANAGER_MOBILE_FINAL_V44 Mobile only: - force 1 column - compact rows - vertical scroll - no horizontal overflow - desktop V43 untouched ========================================================= */ @media (max-width: 700px) { /* * Column Manager modal window */ .fi-modal-window:has(.fi-ta-col-toggle), .fi-modal-window:has(.fi-ta-column-manager) { width: calc(100vw - 18px) !important; max-width: calc(100vw - 18px) !important; max-height: calc(100dvh - 18px) !important; margin: 9px !important; overflow: hidden !important; } /* * Scroll only modal body */ .fi-modal-window:has(.fi-ta-col-toggle) .fi-modal-content, .fi-modal-window:has(.fi-ta-column-manager) .fi-modal-content { min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; padding-top: 8px !important; padding-bottom: 10px !important; } /* * FORCE ONE COLUMN */ .fi-modal-window .fi-ta-col-toggle, .fi-modal-window .fi-ta-column-manager { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; column-gap: 0 !important; row-gap: 2px !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } /* * Each checkbox row */ .fi-modal-window .fi-ta-col-toggle label, .fi-modal-window .fi-ta-column-manager label { width: 100% !important; min-width: 0 !important; min-height: 34px !important; display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 5px 6px !important; box-sizing: border-box !important; border-radius: 8px !important; } /* * Checkbox size */ .fi-modal-window .fi-ta-col-toggle input[type="checkbox"], .fi-modal-window .fi-ta-column-manager input[type="checkbox"], .fi-modal-window .fi-checkbox-input { flex: 0 0 17px !important; width: 17px !important; min-width: 17px !important; height: 17px !important; min-height: 17px !important; margin: 0 !important; } /* * Label text */ .fi-modal-window .fi-ta-col-toggle label span, .fi-modal-window .fi-ta-column-manager label span, .fi-modal-window .fi-checkbox-label { min-width: 0 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 500 !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* * Prevent any child from forcing horizontal overflow */ .fi-modal-window .fi-ta-col-toggle *, .fi-modal-window .fi-ta-column-manager * { max-width: 100% !important; box-sizing: border-box !important; } /* * Footer / actions safe area */ .fi-modal-window .fi-modal-footer { padding-bottom: max( 12px, env(safe-area-inset-bottom) ) !important; } } /* Samsung S20 / narrow Android */ @media (max-width: 390px) { .fi-modal-window:has(.fi-ta-col-toggle), .fi-modal-window:has(.fi-ta-column-manager) { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; margin: 6px !important; } .fi-modal-window .fi-ta-col-toggle label, .fi-modal-window .fi-ta-column-manager label { min-height: 32px !important; padding: 4px 5px !important; gap: 7px !important; } .fi-modal-window .fi-ta-col-toggle label span, .fi-modal-window .fi-ta-column-manager label span, .fi-modal-window .fi-checkbox-label { font-size: 11px !important; } } /* HQC_COLUMN_MANAGER_MOBILE_FINAL_V44_END */ /* ========================================================= HQC_COLUMN_MANAGER_MOBILE_SCROLL_V45 Mobile only: - modal fits viewport - modal content scrolls vertically - footer stays visible - one-column native layout retained ========================================================= */ @media (max-width: 700px) { /* * Any Filament modal that contains the table column manager. * Keep whole modal inside viewport. */ .fi-modal-window:has(.fi-ta-column-manager), .fi-modal-window:has(.fi-ta-col-toggle) { display: flex !important; flex-direction: column !important; width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: calc(100dvh - 16px) !important; max-height: calc(100dvh - 16px) !important; margin: 8px !important; overflow: hidden !important; } /* * Header fixed. */ .fi-modal-window:has(.fi-ta-column-manager) .fi-modal-header, .fi-modal-window:has(.fi-ta-col-toggle) .fi-modal-header { flex: 0 0 auto !important; } /* * THIS is the actual scroll area. */ .fi-modal-window:has(.fi-ta-column-manager) .fi-modal-content, .fi-modal-window:has(.fi-ta-col-toggle) .fi-modal-content { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; padding-top: 6px !important; padding-bottom: 8px !important; } /* * Footer fixed. */ .fi-modal-window:has(.fi-ta-column-manager) .fi-modal-footer, .fi-modal-window:has(.fi-ta-col-toggle) .fi-modal-footer { flex: 0 0 auto !important; position: relative !important; bottom: auto !important; z-index: 40 !important; background: #fff !important; padding-top: 8px !important; padding-bottom: max( 10px, env(safe-area-inset-bottom) ) !important; } /* * Keep selector one column. */ .fi-modal-window .fi-ta-column-manager, .fi-modal-window .fi-ta-col-toggle { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 2px !important; overflow: visible !important; } /* * Compact option rows. */ .fi-modal-window .fi-ta-column-manager label, .fi-modal-window .fi-ta-col-toggle label { min-height: 32px !important; margin: 0 !important; padding: 4px 5px !important; gap: 7px !important; font-size: 12px !important; line-height: 1.15 !important; } /* * Prevent any child from forcing horizontal scroll. */ .fi-modal-window .fi-ta-column-manager *, .fi-modal-window .fi-ta-col-toggle * { max-width: 100% !important; box-sizing: border-box !important; } } /* narrow Android */ @media (max-width: 390px) { .fi-modal-window:has(.fi-ta-column-manager), .fi-modal-window:has(.fi-ta-col-toggle) { width: calc(100vw - 10px) !important; max-width: calc(100vw - 10px) !important; height: calc(100dvh - 10px) !important; max-height: calc(100dvh - 10px) !important; margin: 5px !important; } .fi-modal-window .fi-ta-column-manager label, .fi-modal-window .fi-ta-col-toggle label { min-height: 30px !important; font-size: 11px !important; } } /* HQC_COLUMN_MANAGER_MOBILE_SCROLL_V45_END */ /* ========================================================= HQC_COLUMN_MANAGER_NATIVE_RESPONSIVE_V46 PHP controls: mobile = 1 md = 2 lg = 3 CSS ONLY handles viewport / scrolling. ========================================================= */ @media (max-width: 767px) { .fi-modal-window { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; margin: 8px !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } .fi-modal-header { flex: 0 0 auto !important; } .fi-modal-content { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } .fi-modal-footer { flex: 0 0 auto !important; position: relative !important; bottom: auto !important; } } /* HQC_COLUMN_MANAGER_NATIVE_RESPONSIVE_V46_END */ /* HQC SPRINT 15E - FILAMENT REAL TABLE HEADER */ body.fi-body:not(.fi-simple-layout) .fi-ta-header { background: linear-gradient( 90deg, #edf6ff 0%, #f7fbff 100% ) !important; border-left: 4px solid #3b82f6 !important; border-bottom: 1px solid #dbe7f3 !important; padding: 14px 16px !important; } body.fi-body:not(.fi-simple-layout) .fi-ta-header-heading { color: #174a7e !important; font-weight: 800 !important; } body.fi-body:not(.fi-simple-layout) .fi-ta-header-description { color: #64748b !important; }