/** * @name main.css * @version 3.0 * @desc Main application stylesheet. CONTAINS MERGED AND DE-SCOPED FMS STYLES. Adds .mobile-active class for JS toggle. */ /* ========================================================================== */ /* === CSS_STYLES.html --- App Version: v3.0 (Mobile Nav Color Change) === */ /* ========================================================================== */ /* ================================= */ /* === GLOBAL & HTML DEFAULTS === */ /* ================================= */ html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; /* Adjust as needed for sticky headers */ height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { padding-top: 4rem; /* For your fixed app-header */ font-family: "Inter", sans-serif; background-color: #f3f4f6; /* Tailwind gray-100 */ color: #1f2937; /* Tailwind gray-800 */ min-height: 100%; display: flex; flex-direction: column; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap'); /* ================================= */ /* === MAIN LAYOUT WRAPPERS === */ /* ================================= */ /* Landing Page specific styles (if not using .page-panel or .main-container for its primary layout) */ #landing-page { /* Removed min-height, display, flex-direction and associated comment as per v1.9 */ } /* Main wrapper directly inside your in DjanguiApp.html */ #main-content-wrapper { width: 100%; /* Ensure it takes full width of its parent (body) */ flex-grow: 1; /* Allows this wrapper to expand and push footer down */ display: flex; flex-direction: column; /* So page-panels stack and can also grow */ /* background-color: #e9ebee; /* Light gray, for debugging visibility if needed */ } /* Styles for individual page views / content panes (Kept from baseline as it was omitted in v1.9 diff) */ .main-container, .edit-data-page, .page-panel.active-page { /* Target only the active page panel for shared layout and styling */ width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 1rem; /* Default padding */ background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); margin-top: 1rem; margin-bottom: 2rem; box-sizing: border-box; flex-grow: 1; /* Allows the active page content to fill vertical space */ } /* Ensure non-active page panels are hidden and active one is displayed */ .page-panel { display: none; } .page-panel.active-page { display: block; /* Or 'flex' if its internal content needs to be a flex container */ } /* NEW RULE: Hide the config action footer unless its parent page-panel is active */ .page-panel:not(.active-page) #config-action-footer { display: none !important; } /* NEW RULE: Class to explicitly hide the sticky footer */ #config-action-footer.hidden-footer { display: none !important; /* Ensure this overrides any other display properties */ } /* Landing Page & Main Content Wrapper Visibility (kept from previous versions) */ #landing-page.hidden { display: none; } /* Removed !important */ #main-content-wrapper.hidden { display: none !important; } /* Keep !important for main content for safety */ /* ================================= */ /* === APP HEADER & NAVIGATION === */ /* ================================= */ #app-header { /* Tailwind classes handle most of this: bg-emerald-600 text-white py-3 shadow-lg fixed top-0 left-0 right-0 z-50 h-16 flex items-center */ } #app-logo a:hover { opacity: 0.85; } #main-nav-links .nav-link { font-weight: 500; border-radius: 0.375rem; padding: 0.5rem 0.75rem; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } #main-nav-links .nav-link:hover, #main-nav-links .nav-link.active-nav-link { background-color: rgba(255, 255, 255, 0.15); /* font-weight: 600; - Removed as per v1.9 */ } /* Dropdown Button (Help & Meetings) Arrow Styling - Consolidated as per v1.9 */ li.dropdown-active > button svg { transition: transform 0.2s ease-in-out; transform: rotate(180deg); } /* Desktop Dropdown Menus (Help & Meetings) - Consolidated as per v1.9 */ @media (min-width: 768px) { /* md breakpoint */ ul#help-dropdown-menu, ul#meetings-dropdown-menu, ul#profile-dropdown-menu, ul#voting-dropdown-menu, ul#reports-dropdown-menu, ul#cash-pool-dropdown-menu { background-color: #059669; /* emerald-600 */ color: #d1fae5; /* emerald-100 */ border: 1px solid #065f46; /* emerald-800 */ z-index: 65; } ul[id$="-dropdown-menu"] a { /* Consolidated */ color: #d1fae5; } ul[id$="-dropdown-menu"] a:hover { /* Consolidated */ background-color: #065f46; /* emerald-800 */ color: #ffffff; } } /* Mobile Navigation & Dropdowns - Consolidated and fixed as per v1.9 */ @media (max-width: 767px) { #main-nav-links { display: none; flex-direction: column; position: fixed; /* DEFINITIVE FIX: Ensures the menu sticks to the viewport */ top: 4rem; /* Aligns below the fixed header */ left: 0; right: 0; background-color: #3730a3; /* FIX: Change background from emerald-700 to dark indigo */ padding: 0.5rem 0; box-shadow: 0 8px 16px rgba(0,0,0,0.2); border-top: 1px solid #312e81; /* FIX: Change border-top from emerald-800 to darker indigo */ /* --- NEW Z-INDEX --- */ z-index: 1001; /* Higher than #app-header (1000) */ /* ------------------- */ /* --- NEW STYLES FOR SCROLLING --- */ max-height: calc(100vh - 4rem); /* Full viewport height minus header height */ overflow-y: auto; /* Enable vertical scrolling if content overflows */ -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */ /* -------------------------------- */ } /* DEFINITIVE FIX: This class will be toggled by the Alpine.js component */ #main-nav-links.mobile-active { display: flex; } #main-nav-links li { width: 100%; } #main-nav-links li .nav-link, #main-nav-links li > button.nav-link { /* Generic for both nav links and dropdown buttons */ display: block; width: 100%; padding: 0.75rem 1rem; text-align: left; border-radius: 0; border-bottom: 1px solid #059669; /* emerald-600 */ } #main-nav-links li:last-child > .nav-link { /* Fix for last item */ border-bottom: none; } #main-nav-links .nav-link:hover, #main-nav-links > li > button.nav-link:hover { /* Generic hover */ background-color: #4f46e5; /* FIX: Change hover background from emerald-600 to dark indigo/hover */ } #main-nav-links .nav-link.active-nav-link { background-color: #312e81; /* FIX: Change active background from emerald-800 to deeper indigo */ font-weight: 600; } ul[id$="-dropdown-menu"] { /* Consolidated for all dropdowns */ position: static; width: 100%; box-shadow: none; border-top: 1px dashed #4f46e5; /* FIX: Change border-top from emerald-600 to indigo */ margin-top: 0; background-color: #3730a3; /* FIX: Change background from emerald-700 to deep indigo */ } ul[id$="-dropdown-menu"] a { /* Consolidated for all dropdown items */ padding: 0.75rem 1.5rem; color: #e0e7ff; /* FIX: Change color to Indigo-100 for contrast */ border-bottom: 1px solid #4338ca; /* FIX: Change border-bottom from emerald-600 to indigo */ } ul[id$="-dropdown-menu"] li:last-child a { border-bottom: none; } ul[id$="-dropdown-menu"] a:hover { background-color: #4f46e5; /* FIX: Change hover background from emerald-600 to indigo-600 */ color: #ffffff; /* FIX: Change hover text color */ } } /* ================================= */ /* === SYSTEM INFO BANNER STYLES === */ /* ================================= */ #system-info-banner { background-color: #0284c7; color: white; padding: 0.5rem 1rem; font-size: 0.875rem; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; z-index: 55; display: none; width: 100%; box-sizing: border-box; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; opacity: 0; transform: translateY(-100%); } #system-info-banner.banner-visible { display: block; opacity: 1; transform: translateY(0); } /* ================================= */ /* === TOOLTIP STYLES === */ /* ================================= */ .form-label-inline { display: inline-flex; align-items: center; gap: 0.25rem; } h3.form-label-inline, h4.form-label-inline, h5.form-label-inline, button.form-label-inline { display: inline-flex; align-items: center; gap: 0.3rem; } .tooltip-trigger { display: inline-flex; align-items: center; margin-left: 0.25rem; vertical-align: middle; cursor: help; color: #6b7280; line-height: 1; } .tooltip-trigger svg { width: 1em; height: 1em; display: inline-block; } .tooltip-trigger:hover svg, .tooltip-trigger:focus svg { color: #3b82f6; } #app-tooltip { position: absolute; background-color: #1f2937; color: #f9fafb; padding: 0.625rem 0.875rem; border-radius: 0.375rem; box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15), 0 3px 7px -3px rgba(0, 0, 0, 0.1); font-size: 0.75rem; line-height: 1.5; max-width: 280px; z-index: 10000; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease-out, visibility 0s linear 0.15s, transform 0.15s ease-out; transform: translateY(5px); } #app-tooltip.app-tooltip-visible { opacity: 1; visibility: visible; transition-delay: 0s, 0s, 0s; transform: translateY(0); } /* ================================= */ /* === CASH POOL MEMBER VIEW === */ /* ================================= */ /* Styles for the "My Cash Pool Activity" header area */ /* The flex container in DjanguiApp.html handles stacking on small screens (sm:flex-row) */ /* Styles for the Installment Plan Tracker items */ #cp-installment-plans-list .bg-indigo-50 h5 { /* Target the plan title */ font-size: 0.95rem; /* Slightly smaller on very small screens if needed */ } #cp-installment-plans-list .flex.items-center.justify-between { /* On very small screens, allow button to wrap if text is long */ flex-wrap: wrap; gap: 0.25rem; /* Add a small gap if they wrap */ } #cp-installment-plans-list .pay-specific-installment-btn { white-space: nowrap; /* Prevent button text from wrapping */ flex-shrink: 0; /* Prevent button from shrinking too much */ } /* Styles for Payment History Cards */ #cp-payment-history-list .bg-white h5 { /* Target payment type */ font-size: 0.9rem; word-break: break-word; /* Allow long types to wrap */ } #cp-payment-history-list .text-gray-600, #cp-payment-history-list .text-xs { line-height: 1.4; /* Adjust line height for readability */ } /* Ensure the main content area for Cash Pool view has some padding */ #cash-pool-view-content-area { padding-bottom: 2rem; /* Add some bottom padding */ } /* Small screen adjustments for headings if needed */ @media (max-width: 480px) { #my-cash-pool-payments-section h3, #cp-installment-plan-tracker-area h4, #cp-payment-history-area h4 { font-size: 1.1rem; /* Slightly smaller heading on very small screens */ } #my-cash-pool-payments-section .modal-button.confirm { /* Make "Make New Payment" button full width */ width: 100%; margin-top: 0.5rem; } } /* ================================= */ /* === MESSAGE & LOADING AREAS === */ /* ================================= */ .message-area { padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 0.375rem; font-size: 0.875rem; border: 1px solid transparent; position: fixed; /* Ensure it's fixed */ top: 1rem; /* Adjust as needed */ left: 50%; transform: translateX(-50%); width: calc(100% - 2rem); max-width: 500px; z-index: 2000; /* Ensure it's above modals */ } .message-area-success { background-color: #d1fae5; border-color: #6ee7b7; color: #065f46; } .message-area-error { background-color: #fee2e2; border-color: #fca5a5; color: #991b1b; } .message-area-warning { background-color: #fef3c7; border-color: #fcd34d; color: #92400e; } .message-area-info { background-color: #e0f2fe; /* sky-100 */ border-color: #7dd3fc; /* sky-300 */ color: #075985; /* sky-800 */ } .message-area-loading { background-color: #eff6ff; border-color: #bfdbfe; color: #1e40af; } /* ================================= */ /* === COUNTDOWN TIMER STYLES === */ /* ================================= */ #countdown-timer-container { margin-bottom: 1.5rem; } #countdown-timer { padding: 0.75rem 1rem; background-color: #eff6ff; border: 1px solid #bfdbfe; border-radius: 0.5rem; text-align: center; font-size: 1.125rem; font-weight: 600; color: #1d4ed8; } #countdown-timer .countdown-text-label { display: inline; } #countdown { font-family: 'Courier New', Courier, monospace; font-weight: bold; letter-spacing: 0.05em; } .countdown-warning { background-color: #fef3c7; border-color: #fcd34d; } .countdown-warning #countdown { color: #b45309; } .countdown-critical { background-color: #fee2e2; border-color: #fca5a5; animation: pulseRed 1.2s infinite ease-in-out; } .countdown-critical #countdown { color: #b91c1c; } @keyframes pulseRed { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } } @media (max-width: 480px) { #countdown-timer { font-size: 0.9rem; padding: 0.5rem; } #countdown-timer .countdown-text-label { display: block; margin-bottom: 0.25rem; } #countdown { display: block; font-size: 1.1rem; } } /* ================================= */ /* === MAIN VIEW BANNER & TABLE === */ /* ================================= */ .banner-section { background-color: #1e3a8a; color: white; padding: 20px; text-align: center; border-radius: 8px 8px 0 0; } .banner-title { font-size: 2em; font-weight: bold; margin-bottom: 0.25em; } .banner-subtitle { font-size: 1em; } table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.9rem; } th, td { border: 1px solid #e5e7eb; padding: 10px 8px; text-align: left; vertical-align: middle; } th { background-color: #f9fafb; font-weight: 600; color: #374151; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em;} tbody tr:nth-child(odd):not(.total-row):not(.month-header) { background-color: #f9fafb; } tbody tr:hover:not(.total-row):not(.month-header) { background-color: #eff6ff; } .month-header { background-color: #6b7280; color: white; font-weight: bold; text-align: center; } .total-row { background-color: #e0f2fe; font-weight: 600; } .total-row.treasurer-total { background-color: #cffafe; } /* Responsive Main Contribution Table - Replaced old rules as per v1.9 */ @media (max-width: 768px) { #contribution-table-container table, #contribution-table-container thead, #contribution-table-container tbody, #contribution-table-container th, #contribution-table-container td, #contribution-table-container tr { display: block; } #contribution-table-container thead tr { position: absolute; top: -9999px; left: -9999px; } #contribution-table-container tr:not(.month-header) { border: 1px solid #e5e7eb; border-radius: 0.5rem; margin-bottom: 1rem; background-color: #ffffff; padding: 0.75rem; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); /* Added box-shadow */ } /* FIX 1: Hide the Month cell entirely on mobile */ #contribution-table-container td[data-label="Month"] { display: none !important; } #contribution-table-container td { display: flex; justify-content: space-between; /* Keeps label left and value right */ align-items: center; padding: 0.5rem 0.25rem; border: none; border-bottom: 1px solid #f3f4f6; text-align: right; /* Ensures values like names and amounts align right */ } #contribution-table-container td:last-child { border-bottom: none; } #contribution-table-container td:before { content: attr(data-label); font-weight: 600; text-align: left; color: #374151; margin-right: 1rem; flex-shrink: 0; /* Prevent label from shrinking */ } /* FIX 2: Center the confirmation button */ #contribution-table-container td.confirmation-cell { justify-content: center; /* Center the button horizontally */ padding-top: 1rem; text-align: center; /* Center text if status is 'Done' or 'Pending' */ } #contribution-table-container td.confirmation-cell:before { /* No label needed for the confirmation button cell */ display: none; } } #input-section .sticky-header-content.sticky-active { position: fixed; top: 4rem; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1200px; background-color: rgba(249, 250, 251, 0.97); box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 40; padding: 1rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .beneficiary-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 0.5rem 1rem; font-size: 0.9rem; } .beneficiary-grid .grid-header { display: contents; font-weight: 600; color: #1e3a8a; border-bottom: 1px solid #93c5fd; padding-bottom: 0.25rem; margin-bottom: 0.5rem; } .beneficiary-grid .beneficiary-header { text-align: left; } .beneficiary-grid .amount-header { text-align: right; } .beneficiary-grid .beneficiary-row { display: contents; } .beneficiary-grid .beneficiary-name, .beneficiary-grid .beneficiary-amount, .beneficiary-grid .beneficiary-confirmed { padding: 0.25rem 0; } .beneficiary-grid .beneficiary-name { text-align: left; color: #1d4ed8; } .beneficiary-grid .beneficiary-amount, .beneficiary-grid .beneficiary-confirmed { text-align: right; color: #047857; } .beneficiary-grid .beneficiary-row.fully-confirmed .beneficiary-name, .beneficiary-grid .beneficiary-row.fully-confirmed .beneficiary-confirmed { color: #065f46; } .beneficiary-jump-link { cursor: pointer; text-decoration: underline; } .beneficiary-jump-link:hover { color: #1e40af; } /* ================================= */ /* === EDIT PAGE - GENERAL === */ /* ================================= */ #edit-data-page .edit-group { margin-bottom: 2rem; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 8px; background-color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } #edit-data-page .edit-group h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: #1f2937; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.75rem; } #edit-data-page button:disabled { background-color: #9ca3af !important; color: #e5e7eb !important; cursor: not-allowed !important; opacity: 0.8; } #manual-announce-message-area { min-height: 6rem; } #generated-script-output { width: 100%; height: 150px; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-family: monospace; font-size: 0.8rem; background-color: #f9fafb; color: #374151; resize: vertical; } .tabs-nav .tab-link { padding: 0.75rem 1.5rem; margin-bottom: -2px; border: 2px solid transparent; border-bottom: none; cursor: pointer; font-weight: 500; color: #4b5563; } .tabs-nav .tab-link:hover { color: #1f2937; border-color: #e5e7eb; border-bottom-color: transparent; background-color: #f9fafb; } .tabs-nav .tab-link.active-tab { color: #1d4ed8; border-color: #e5e7eb #e5e7eb #ffffff; border-width: 2px; border-bottom-color: #ffffff !important; background-color: #ffffff; font-weight: 600; border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; } .tab-panel { display: none; } .tab-panel.active-tab-panel { display: block; } /* ================================= */ /* === EDIT PAGE - MEMBERS TAB === */ /* ================================= */ @media (min-width: 769px) { .member-edit-header, .member-edit-row { grid-template-columns: 30px minmax(150px, 1.5fr) minmax(120px, 1.1fr) 75px 70px 70px 75px minmax(80px, 0.9fr) minmax(100px, 1fr) 70px; gap: 0.5rem; display: grid; align-items: center; } .member-edit-header span { overflow: hidden; text-overflow: ellipsis; padding: 0.25rem 0.1rem; line-height: 1.2; text-align: left; } .member-edit-header span.row-number-header, .member-edit-header span:nth-child(4), .member-edit-header span:nth-child(5), .member-edit-header span:nth-child(6), .member-edit-header span:nth-child(7) { text-align: center; } .member-edit-header span:nth-child(7) { white-space: normal; } .member-edit-header span:last-child { white-space: nowrap; text-align: center; } .member-edit-row .member-row-number-cell { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: #6b7280; padding-right: 0.25rem; } } @media (max-width: 768px) { #tab-members .member-edit-header { display: none; } #tab-members .member-edit-row { display: block; border: 1px solid #d1d5db; padding: 0.5rem; border-radius: 0.375rem; margin-bottom: 1rem; background-color: #ffffff; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); /* Added box-shadow */ } /* FIX 1: Hide the Month cell entirely on mobile */ #contribution-table-container td[data-label="Month"] { display: none !important; } #tab-members .member-edit-row > div:not(.member-row-number-cell) { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.25rem; border-bottom: 1px solid #e5e7eb; min-height: 2.5em; } #tab-members .member-edit-row > div:last-child { border-bottom: none; } #tab-members .member-edit-row > div:not(.member-row-number-cell):before { content: attr(data-label); font-weight: 600; color: #374151; margin-right: 0.5rem; font-size: 0.875rem; text-align: left; white-space: nowrap; } #tab-members .member-edit-row input[type="text"], #tab-members .member-edit-row input[type="email"], #tab-members .member-edit-row input[type="tel"], #tab-members .member-edit-row input[type="number"], #tab-members .member-edit-row input[type="time"], #tab-members .member-edit-row select.member-roles-select { flex-basis: 60%; flex-grow: 1; text-align: right; padding: 0.375rem 0.5rem; font-size: 0.875rem; } #tab-members .member-edit-row input[type="checkbox"].member-isdjangui-checkbox { margin-left: auto; } #tab-members .member-edit-row select.member-roles-select { text-align: left; height: auto; min-height: 5em; } #tab-members .member-edit-row .member-row-number-cell { display: none; } #tab-members .member-edit-row .action-button-cell { justify-content: flex-end; padding-top: 0.75rem; } /* The following were old specific rules for #contribution-table and #acknowledgement-table, replaced by #contribution-table-container */ } /* ======================================== */ /* === EDIT PAGE - CONSTANTS TAB SUB-NAV === */ /* ======================================== */ #tab-constants > header { background-color: #4f46e5; color: white; padding: 0.5rem 0.75rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; top: 4rem; z-index: 30; } /* Link styles for constants-nav-links are now handled by the generic sub-navigation block */ #tab-constants > header nav .constants-nav-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 4px; } #tab-constants > header nav .constants-nav-scroll-wrapper::-webkit-scrollbar { display: none; } #tab-constants input#constants-search-input { background-color: #e0e7ff; color: #3730a3; border: 1px solid #a5b4fc; border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } #tab-constants input#constants-search-input::placeholder { color: #6366f1; opacity: 0.8; } #tab-constants input#constants-search-input:focus { background-color: white; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4); outline: none; } #tab-constants .config-page-main-title { font-size: 1.5rem; } #tab-constants .config-section { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); transition: box-shadow 0.2s ease-in-out; } #tab-constants .config-section-title { font-size: 1.25rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #d1d5db; } #tab-constants .config-section .form-label-inline { margin-bottom: 0.25rem; } /* ======================================== */ /* === EDIT PAGE - ORGANISATION ROLES TAB === */ /* ======================================== */ /* This rule is for the header of the tab itself, not links inside. Kept from v1.8.3 */ #tab-organisation-roles > header { background-color: #4b5563; } #editable-roles-list { display: grid; gap: 1rem; } @media (min-width: 480px) { #editable-roles-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { #editable-roles-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { #editable-roles-list { grid-template-columns: repeat(4, minmax(180px, 1fr)); } } .role-card { background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 100px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); } .role-card .role-name { font-weight: 500; color: #374151; margin-bottom: 0.25rem; word-break: break-word; flex-grow: 1; } .role-card .role-actions { text-align: right; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid #f3f4f6; } .role-card .role-actions button { margin-left: 0.5rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; } /* ================================= */ /* === MEETINGS PAGE === */ /* Meetings Page Meeting Card Styles - REFINED */ /* ================================= */ #upcoming-meetings-list .meeting-card { min-height: 180px; } #upcoming-meetings-list .meeting-card h4 { line-height: 1.3; } .meeting-card .meeting-card-buttons-container { /* Added flex-wrap and gap for better button layout */ display: flex; flex-wrap: wrap; /* NEW: Allow buttons to wrap */ justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; } /* Mobile-specific layout for Meeting Cards */ @media (max-width: 640px) { /* Or adjust breakpoint as needed */ .meeting-card { /* If needed, adjust card padding on mobile */ padding: 1rem; } .meeting-card .meeting-card-buttons-container { /* Ensure enough space between buttons when wrapped on mobile */ gap: 0.75rem; } /* Use existing .text-xs or similar for button text size */ .meeting-card .modal-button { flex: 1 1 45%; /* Adjust widths if needed */ min-width: 0; /* Allow shrinking below content width */ box-sizing: border-box; } } /* ================================= */ /* === ORGANISATION CHART PAGE === */ /* ================================= */ #org-chart-view { font-family: 'Nunito', sans-serif; background-color: #f0fdfa; } #org-chart-view .chart-container { max-width: 1200px; margin: 0 auto; padding: 1rem 1rem 2.5rem 1rem; } #org-chart-view .main-title { font-size: 2rem; font-weight: 800; color: #047857; text-align: center; margin-bottom: 2rem; } #org-chart-view .section-title { font-size: 1.75rem; font-weight: 700; color: #059669; margin-top: 2.5rem; margin-bottom: 1.5rem; border-bottom: 2px solid #6ee7b7; padding-bottom: 0.5rem; } @media (max-width: 639px) { #org-chart-view .section-title { font-size: 1.25rem; } } #org-chart-view .member-card { background-color: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 0.75rem; padding: 1.25rem; text-align: center; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); display: flex; flex-direction: column; justify-content: space-between; } #org-chart-view .member-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); } #org-chart-view .member-photo { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 1rem auto; background-color: #d1fae5; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid #ffffff; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); flex-shrink: 0; } #org-chart-view .member-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } #org-chart-view .member-photo svg { width: 55%; height: 55%; } #org-chart-view .member-info { flex-grow: 1; } #org-chart-view .member-name { font-size: 1.125rem; font-weight: 700; color: #064e3b; } #org-chart-view .member-title { font-size: 0.875rem; color: #047857; margin-top: 0.25rem; font-weight: 600; } #org-chart-view .member-aka, #org-chart-view .member-note { font-size: 0.75rem; color: #52525b; font-style: italic; margin-top: 0.125rem; } #org-chart-view > header { background-color: #065f46; color: white; padding: 0.5rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; top: 4rem; z-index: 40; } #org-chart-view > header nav ul#org-chart-nav-links a { padding: 0.375rem 0.625rem; border-radius: 0.375rem; font-weight: 500; color: #d1fae5; white-space: nowrap; } #org-chart-view > header nav ul#org-chart-nav-links a:hover { background-color: rgba(255,255,255,0.1); color: #ffffff; } #org-chart-view header nav .org-chart-nav-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } #org-chart-view header nav .org-chart-nav-scroll-wrapper::-webkit-scrollbar { display: none; } #org-chart-view header nav ul#org-chart-nav-links { display: flex; flex-wrap: nowrap; } #org-chart-search-input { padding: 0.375rem 0.75rem; border: 1px solid #a3e635; border-radius: 0.375rem; background-color: #ecfccb; color: #3f6212; } #org-chart-search-input::placeholder { color: #65a30d; } #org-chart-search-input:focus { border-color: #84cc16; box-shadow: 0 0 0 2px rgba(132, 204, 22, 0.4); background-color: white; } @media (max-width: 639px) { #org-chart-view > header nav { flex-direction: column; align-items: stretch; } #org-chart-view > header nav .org-chart-nav-scroll-wrapper { margin-bottom: 0.5rem; } #org-chart-view > header nav input#org-chart-search-input { width: 100%; } } /* ================================= */ /* === MODAL STYLES === */ /* ================================= */ .modal { display: none; /* Controlled by JS, but 'flex' is often used to show */ position: fixed; z-index: 1000; /* Base z-index for general modals */ left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; } /* FIX: Ensure warning/confirmation modals appear above other modals */ #customWarningModal, #textInputModal, #validationErrorModal { z-index: 1050; } #validationErrorModal .modal-content { border: 2px solid #f87171; } #validationErrorModal .modal-title { color: #b91c1c; } #validationErrorModal #validationErrorList { color: #991b1b; } #validationErrorModal #okValidationErrorModalBtn { background-color: #dc2626; } #validationErrorModal #okValidationErrorModalBtn:hover { background-color: #b91c1c; } .custom-scrollbar::-webkit-scrollbar { width: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #a7a7a7; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #7b7b7b; } #attendanceResultModal { display: none; /* Hidden by default, controlled by JS */ position: fixed; z-index: 1050; /* Higher than other modals */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.4); /* Slightly less opaque overlay */ backdrop-filter: blur(3px); /* Optional modern blur effect */ justify-content: center; align-items: center; padding: 1rem; /* Prevent content touching edges */ box-sizing: border-box; } #attendanceResultModal .modal-content { max-width: 360px; /* Smaller for mobile */ text-align: center; } #attendanceResultModal .modal-title { /* Style for success title already handled by generic modal title CSS */ } #attendanceResultModal .modal-body p { margin-bottom: 1rem; /* Spacing if multiple paragraphs */ } #attendanceResultModal .modal-body button { /* Style for OK button in modal footer is handled by global modal button styles */ } /* ================================= */ /* === PROFILE PAGE RESPONSIVE === */ /* ================================= */ @media (max-width: 768px) { #profile-view .p-6 > h3.text-xl { font-size: 1.125rem; line-height: 1.5rem; } } /* ================================= */ /* === MEETINGS PAGE SUB-HEADER === */ /* ================================= */ #meetings-view > header#meetings-view-subheader { background-color: #0369a1; color: white; padding: 0.5rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; top: 4rem; z-index: 40; } /* Link styles for meetings-nav-links are now handled by the generic sub-navigation block */ #meetings-view > header#meetings-view-subheader nav .meetings-nav-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } #meetings-view > header#meetings-view-subheader nav .meetings-nav-scroll-wrapper::-webkit-scrollbar { display: none; } #meetings-view > header#meetings-view-subheader nav ul#meetings-nav-links { display: flex; flex-wrap: nowrap; } @media (max-width: 639px) { #meetings-view > header#meetings-view-subheader nav { flex-direction: column; align-items: stretch; } #meetings-view > header#meetings-view-subheader nav .meetings-nav-scroll-wrapper { margin-bottom: 0.5rem; justify-content: center; } #meetings-view > header#meetings-view-subheader nav ul#meetings-nav-links { justify-content: center; } } #meetings-view-subheader .meetings-nav-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Hide scrollbar */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ position: relative; /* Needed for pseudo-elements */ /* Add padding to allow gradients to show */ padding-left: 1rem; padding-right: 1rem; } #meetings-view-subheader .meetings-nav-scroll-wrapper::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* Gradient overlay for fading effect */ #meetings-view-subheader .meetings-nav-scroll-wrapper::before, #meetings-view-subheader .meetings-nav-scroll-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1.5rem; /* Width of the fade effect */ pointer-events: none; /* Allow clicks through */ z-index: 1; /* Above the content, below the main nav */ } #meetings-view-subheader .meetings-nav-scroll-wrapper::before { left: 0; background: linear-gradient(to right, #0369a1, transparent); /* Matches bg-sky-700 */ } #meetings-view-subheader .meetings-nav-scroll-wrapper::after { right: 0; background: linear-gradient(to left, #0369a1, transparent); /* Matches bg-sky-700 */ } /* On larger screens, where overflow-x is not active, hide gradients */ @media (min-width: 768px) { /* Adjust to your 'md' breakpoint */ #meetings-view-subheader .meetings-nav-scroll-wrapper::before, #meetings-view-subheader .meetings-nav-scroll-wrapper::after { display: none; } } /* ================================= */ /* === PROFILE PAGE STYLES === */ /* ================================= */ /* The primary styles for #profile-view > header#profile-view-subheader (background) and its nav links are handled by the "Sub-navigation menu styles" block appended at the end of this file. Remaining specific styles for this section are below: */ #profile-view > header#profile-view-subheader nav .profile-nav-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 4px; } #profile-view > header#profile-view-subheader nav .profile-nav-scroll-wrapper::-webkit-scrollbar { display: none; } #profile-view > header#profile-view-subheader nav ul#profile-nav-links { display: flex; flex-wrap: nowrap; justify-content: center; } #profile-view > header#profile-view-subheader input#profile-search-input { background-color: #e0e7ff; color: #3730a3; border: 1px solid #a5b4fc; border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } #profile-view > header#profile-view-subheader input#profile-search-input::placeholder { color: #6366f1; opacity: 0.8; } #profile-view > header#profile-view-subheader input#profile-search-input:focus { background-color: white; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4); outline: none; } @media (max-width: 639px) { #profile-view > header#profile-view-subheader nav .profile-nav-scroll-wrapper { margin-bottom: 0.5rem; } #profile-view > header#profile-view-subheader input#profile-search-input { width: 100%; } } #profile-hosting-duties-list button:disabled { background-color: #d1d5db !important; color: #6b7280 !important; border-color: #9ca3af !important; cursor: not-allowed !important; opacity: 0.6 !important; } /* In CSS_STYLES.html */ /* ================================= */ /* === PROFILE PAGE STICKY FOOTER === */ /* ================================= */ #profile-sticky-footer-actions { /* Tailwind classes from HTML will be replaced by these explicit styles */ background-color: #f3f4f6; /* Tailwind gray-100 */ border-top: 1px solid #e5e7eb; /* Tailwind gray-200 */ padding: 0.75rem 1rem; /* Slightly more vertical padding */ box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* Shadow for bottom */ position: sticky; /* Keeps it in view while scrolling content */ bottom: 0; /* Sticks to the bottom of the viewport */ z-index: 50; /* Ensures it's above other content */ width: 100%; /* Takes full width */ box-sizing: border-box; /* Include padding in width */ /* Enable horizontal scrolling for overflow content */ overflow-x: auto; white-space: nowrap; /* Keep content on a single line */ /* Optional: Hide scrollbar for a cleaner look */ -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */ -ms-overflow-style: none; /* For IE/Edge */ scrollbar-width: none; /* For Firefox */ } /* Hide scrollbar track for Webkit browsers (Chrome, Safari) */ #profile-sticky-footer-actions::-webkit-scrollbar { display: none; } /* Style the inner container of the footer for button layout */ #profile-sticky-footer-actions > div { /* Targets the div directly inside the footer */ display: flex; /* Makes buttons use flexbox */ gap: 0.75rem; /* Space between buttons */ justify-content: flex-end; /* Aligns buttons to the right */ min-width: fit-content; /* Allows the flex container to be wider than viewport if needed */ padding-left: 0.5rem; /* Small left padding for scrollable content */ padding-right: 0.5rem; /* Small right padding for scrollable content */ } /* Ensure buttons themselves don't wrap and shrink */ #profile-sticky-footer-actions button { flex-shrink: 0; /* Prevent buttons from shrinking */ white-space: nowrap; /* Ensure button text stays on one line */ } /* ======================================== */ /* === CASH POOL APPROVAL TABLE (NEW) === */ /* ======================================== */ @media (max-width: 768px) { #cash-pool-approval-table-container-main-view thead, #cash-pool-approval-table-container-config-tab thead { display: none; } #cash-pool-approval-table-container-main-view tbody tr, #cash-pool-approval-table-container-config-tab tbody tr { display: block; margin-bottom: 1rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); overflow: hidden; } #cash-pool-approval-table-container-main-view tbody td, #cash-pool-approval-table-container-config-tab tbody td { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; text-align: right; /* Aligns content of value part to the right */ border-bottom: 1px solid #f3f4f6; min-height: 2.5em; } #cash-pool-approval-table-container-main-view tbody td:last-child, #cash-pool-approval-table-container-config-tab tbody td:last-child { border-bottom: none; } #cash-pool-approval-table-container-main-view tbody td:before, #cash-pool-approval-table-container-config-tab tbody td:before { content: attr(data-label); font-weight: 600; text-align: left; margin-right: 0.5rem; color: #4b5563; white-space: nowrap; } /* Special handling for the actions cell */ #cash-pool-approval-table-container-main-view tbody td.cp-actions-cell, #cash-pool-approval-table-container-config-tab tbody td.cp-actions-cell { display: flex; /* Already flex */ justify-content: space-between; /* Push label and button wrapper apart */ align-items: center; /* Align items vertically */ padding-top: 0.75rem; padding-bottom: 0.75rem; } #cash-pool-approval-table-container-main-view tbody td.cp-actions-cell:before, #cash-pool-approval-table-container-config-tab tbody td.cp-actions-cell:before { content: "Actions:"; flex-shrink: 0; /* Ensure label doesn't shrink */ } } /* --- Banner & Sticky Element Styles --- */ /* Slot for interchangeable banners (Countdown and System Info) */ #interchangeable-banner-slot { /* Removed commented-out positioning as per v1.9 */ } /* System Info Banner (e.g., for upcoming meetings) */ #system-info-banner { width: 100%; } #system-info-banner:not(.banner-visible) { display: none !important; /* JS toggles the '.banner-visible' class */ } /* Countdown Timer Container (Outer wrapper) */ #countdown-timer-container { position: sticky; top: 4rem; /* Should match the height of your main app header */ z-index: 55; /* Same as #system-info-banner to occupy the same layer */ width: 100%; /* background-color: #f3f4f6; - Removed optional background as per v1.9 */ } /* Inner Countdown Timer (The styled content block) */ #countdown-timer { /* This element receives styling, often from utility classes (e.g., Tailwind CSS). */ /* The settings below ensure it behaves like a banner. */ width: 100%; border-radius: 0; /* No rounded corners for a full-width banner look - Added as per v1.9 */ } /* Visibility control for both countdown elements, toggled by JS */ #countdown-timer-container.hidden, #countdown-timer.hidden { display: none !important; } /* Smooth transitions for other sticky elements whose position is updated by JS */ #loading-indicator, #message-area, #tab-constants > header, #org-chart-view > header, #meetings-view-subheader, #cash-pool-view-subheader { /* #profile-view-subheader removed as per v1.9 */ transition: top 0.3s ease-in-out; /* Smoothly animates changes to the 'top' property */ } /* ======================================== */ /* === SUB-NAVIGATION MENU STYLES (NEW) === */ /* ======================================== */ /* General container for all sub-navs */ nav ul[id$="-nav-links"] { display: flex; flex-wrap: nowrap; gap: 0.5rem; /* Default gap */ } @media (min-width: 640px) { nav ul[id$="-nav-links"] { gap: 0.75rem; /* Larger gap on bigger screens */ } } /* Generic styles for all sub-nav links */ nav ul[id$="-nav-links"] a { display: inline-block; padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color 0.2s, color 0.2s; } /* Profile Page Sub-Header background */ #profile-view > header#profile-view-subheader { background-color: #4338ca; /* Indigo-700 */ } #profile-view-subheader nav ul#profile-nav-links a.profile-nav-item { color: #c7d2fe; /* Indigo-200 */ } #profile-view-subheader nav ul#profile-nav-links a.active-sub-nav, #profile-view-subheader nav ul#profile-nav-links a:hover { background-color: #ffffff; color: #3730a3; /* Indigo-800 */ } /* Data Definitions Sub-Header background (already defined, but let's ensure it's here) */ #tab-organisation-roles > header { background-color: #4b5563; /* Gray-600 */ } #data-definitions-nav-links a.data-definitions-nav-item { color: #e5e7eb; /* Gray-200 */ } #data-definitions-nav-links a.active-sub-nav, #data-definitions-nav-links a:hover { background-color: #ffffff; color: #1f2937; /* Gray-800 */ } /* Reports Page Sub-Header background and link centering */ #reports-view > header#reports-view-subheader { background-color: #0369a1; /* Sky-700 */ } #reports-view-subheader nav .reports-nav-scroll-wrapper { justify-content: center; /* Center the links within the wrapper */ } #reports-view-subheader nav ul#reports-nav-links a.reports-nav-item { color: #e0f2fe; /* Sky-100 */ } #reports-view-subheader nav ul#reports-nav-links a.active-sub-nav, #reports-view-subheader nav ul#reports-nav-links a:hover { background-color: #ffffff; color: #0369a1; /* Sky-700 */ } /* Constants Sub-Header link colors */ #constants-nav-links a.constants-nav-item { color: #c7d2fe; /* Indigo-200, matching profile */ } #constants-nav-links a.active-sub-nav, #constants-nav-links a:hover { color: #4338ca; /* Indigo-700, matching profile hover */ } /* Meetings Sub-Header link colors */ #meetings-view-subheader nav ul#meetings-nav-links a.meetings-nav-item { color: #e0f2fe; /* Sky-100, matching reports */ } #meetings-view-subheader nav ul#meetings-nav-links a.active-sub-nav, #meetings-view-subheader nav ul#meetings-nav-links a:hover { color: #0284c7; /* Sky-600, matching reports hover */ } /* Scroll margin for content sections to avoid being hidden by sticky headers */ .scroll-mt-40 { scroll-margin-top: 10rem; /* ~160px */ } /* Add this style block at the end of the file or in your main CSS file */ .readonly-amount { background-color: #e9ecef; /* A light grey to indicate readonly */ cursor: not-allowed; border: 1px solid #ced4da; border-radius: 0.25rem; padding: 0.5rem; } .readonly-amount p { color: #495057; /* A slightly muted text color */ } /* ========================================================================== */ /* === FMS GLOBAL STYLES (DE-SCOPED FROM fms.css) === */ /* ========================================================================== */ /* --- FMS LAYOUT & BODY --- */ /* The body background is now handled by the global body style. */ #fms-layout-wrapper { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; } #fms-layout-wrapper > header { grid-row: 1; } #fms-layout-wrapper > main.main { grid-row: 2; padding-top: 1rem; } /* --- FMS-SPECIFIC CARD STYLING --- */ .fms-card { background-color: #ffffff; border: 1px solid #e5e7eb; /* gray-200 */ border-radius: 0.5rem; /* rounded-lg */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); padding: 1.5rem; } /* --- FMS-SPECIFIC BUTTONS --- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; font-size: 0.875rem; border: 1px solid transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background-color: #4f46e5; color: white; border-color: #4f46e5; } .btn-primary:hover:not(:disabled) { background-color: #4338ca; border-color: #4338ca; } .btn-secondary { background-color: #ffffff; color: #1f2937; border-color: #e5e7eb; } .btn-secondary:hover:not(:disabled) { background-color: #f3f4f6; border-color: #d1d5db; } .btn-danger-outline { background-color: #ffffff; color: #ef4444; border-color: #ef4444; } .btn-danger-outline:hover:not(:disabled) { background-color: #ef4444; color: white; } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; } .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; } /* --- DEFINITIVE FIX FOR FMS DROPZONE --- */ #file-dropzone { position: relative; /* Establishes stacking context */ } #file-dropzone-overlay, #upload-progress-overlay { position: absolute; inset: 0; /* a modern way to say top, left, right, bottom are 0 */ background-color: rgba(239, 246, 255, 0.95); border: 3px dashed #93c5fd; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; color: #3b82f6; opacity: 0; visibility: hidden; /* Hidden by default */ pointer-events: none; /* Ignore mouse events by default */ transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s; } /* This is the active state, toggled by JavaScript */ #file-dropzone.drag-over #file-dropzone-overlay { opacity: 1; visibility: visible; /* Show when drag-over is active */ transition-delay: 0s; pointer-events: auto; /* Accept drop events ONLY when visible */ } /* The fms-card containing the table must have a lower z-index than the overlays */ #file-dropzone .fms-card { position: relative; z-index: 10; } /** END src/webroot/css/main.css */