/* ---------------------------------- Revelti Webapp - Global Stylesheet ---------------------------------- */ /* --- Base & Font Styles --- */ body { font-family: 'Nunito', sans-serif; background-color: #f0f2f5; /* Light gray background */ padding-top: 3rem; /* Added padding to prevent content from being hidden behind the fixed navbar */ } /* Add padding to the bottom of the body on smaller screens to prevent the fixed footer from overlapping the content. The footer is 4rem (h-16) high, so 5rem gives a little extra space. This padding is removed on large screens where the footer is hidden. */ @media (max-width: 1023px) { body.has-mobile-footer { padding-bottom: 3.5rem; /* Space for the new mobile footer */ } } /* Footer active state */ .footer-link-active { color: #f58220; /* revelti-orange */ font-weight: 700; position: relative; } /* Footer active state indicator (bar at the top) */ .footer-link-active::before { content: ''; position: absolute; top: 0; /* Align perfectly with the top border of the footer */ left: 20%; right: 20%; height: 2px; background-color: #f58220; border-radius: 0 0 4px 4px; } /* Micro-animations for mobile tap */ .footer-item:active { transform: scale(0.95); transition: transform 0.1s ease-out; } /* --- Custom Color Palette --- */ /* Colors are now defined and mapped through the Tailwind CSS config block in the document */ /* --- Component Styles --- */ /* Active Tab Indicator (Pill Style for Attendee Pages) */ .tab-active { background-color: #f58220 !important; color: white !important; font-weight: 600; border-radius: 9999px; } /* Attendee pill tab container (2-3 tabs) */ .attendee-tab-container { display: flex; justify-content: center; background-color: white; border-radius: 9999px; padding: 4px; border: 1px solid #e5e7eb; max-width: 400px; margin: 0 auto; } /* Attendee pill tab container (4+ tabs) - wider on desktop */ .attendee-tab-container-wide { display: flex; justify-content: center; background-color: white; border-radius: 9999px; padding: 4px; border: 1px solid #e5e7eb; max-width: 600px; margin: 0 auto; } /* Attendee tab active state (pill style) */ .attendee-tab-active { background-color: #f58220 !important; color: white !important; font-weight: 600; border-radius: 9999px; } /* Organizer pill tab container (2-3 tabs) */ .organizer-tab-container { display: flex; justify-content: center; background-color: white; border-radius: 9999px; padding: 4px; border: 1px solid #e5e7eb; max-width: 400px; margin: 0 auto; } /* Organizer pill tab container (4+ tabs) - wider on desktop */ .organizer-tab-container-wide { display: flex; justify-content: center; background-color: white; border-radius: 9999px; padding: 4px; border: 1px solid #e5e7eb; max-width: 600px; margin: 0 auto; } /* Organizer tab active state (pill style - blue) */ .organizer-tab-active { background-color: #213c63 !important; color: white !important; font-weight: 600; border-radius: 9999px; } /* Creative pill tab container (2-3 tabs) */ .creative-tab-container { display: flex; justify-content: center; background-color: white; border-radius: 9999px; padding: 4px; border: 1px solid #e5e7eb; max-width: 400px; margin: 0 auto; } /* Creative pill tab container (4+ tabs) - wider on desktop */ .creative-tab-container-wide { display: flex; justify-content: center; background-color: white; border-radius: 9999px; padding: 4px; border: 1px solid #e5e7eb; max-width: 600px; margin: 0 auto; } /* Creative tab active state (pill style - purple) */ .creative-tab-active { background-color: #6b21a8 !important; color: white !important; font-weight: 600; border-radius: 9999px; } /* Accordion (Details/Summary) Arrow Rotation */ details>summary { list-style: none; } details>summary::-webkit-details-marker { display: none; } /* This rule is too general and is rotating all SVGs. Let's make it more specific. */ /* details[open] > summary svg { transform: rotate(180deg); } */ /* --- Utility Styles --- */ /* Hides scrollbar for horizontal scrolling containers */ /* .horizontal-scroll { /* -ms-overflow-style: none; /* IE and Edge */ /* scrollbar-width: none; /* Firefox */ /* } /* .horizontal-scroll::-webkit-scrollbar { /* display: none; /* Chrome, Safari, and Opera */ /* } /* /* .break-inside-avoid { /* break-inside: avoid; /* } /* --- Custom Styles for Organizer Pages --- */ /* Simple transition for tree view expansion */ .tree-content { transition: max-height 0.3s ease-in-out; max-height: 0; overflow: hidden; } .tree-item.open>.tree-content { max-height: 500px; /* Adjust as needed */ } .tree-item>div>svg { transition: transform 0.3s ease-in-out; } .tree-item.open>div>svg { transform: rotate(90deg); } /* --- Styles for ticketManagement & liveEventEdit --- */ /* This more specific rule will only rotate SVGs that have the 'accordion-arrow' class */ details[open]>summary svg.accordion-arrow { transform: rotate(180deg); } .rule-enter { max-height: 0; opacity: 0; transform: translateY(-10px); transition: max-height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out; } .rule-enter-active { max-height: 100px; /* Adjust as needed */ opacity: 1; transform: translateY(0); } .commission-tier-enter { max-height: 0; opacity: 0; transform: translateY(-10px); transition: max-height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out; } .commission-tier-enter-active { max-height: 100px; /* Adjust as needed */ opacity: 1; transform: translateY(0); } .ticket-tag { display: inline-block; background-color: #e5e7eb; /* gray-200 */ color: #374151; /* gray-700 */ padding: 0.25rem 0.5rem; border-radius: 0.375rem; /* rounded-md */ font-size: 0.75rem; /* text-xs */ font-weight: 500; } .ticket-tag.all-tickets { background-color: #dbeafe; /* blue-100 */ color: #1e40af; /* blue-800 */ } /* Custom dropdown for ticket selection */ #ticket-multiselect-dropdown label:hover { background-color: #f9fafb; /* gray-50 */ } /* Styles for mediaManagement */ .tree-content { transition: max-height 0.3s ease-in-out; max-height: 0; overflow: hidden; } .tree-item.open>.tree-content { max-height: 500px; /* Adjust as needed */ } .tree-item>div>svg { transition: transform 0.3s ease-in-out; } .tree-item.open>div>svg { transform: rotate(90deg); } /* Custom styles for DataTables */ .dt-button { background-color: #213c63 !important; color: white !important; border-radius: 0.5rem !important; padding: 0.5rem 1rem !important; margin: 0 0.25rem !important; border: none !important; } .dt-button:hover { background-color: #1a3050 !important; } .dataTables_wrapper .dataTables_filter input { border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.5rem; } /* --- MODAL STYLES (UPDATED) --- */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); /* Darkened overlay slightly */ display: none; /* Hidden by default */ justify-content: center; align-items: center; z-index: 1000; padding: 1rem; /* Add padding for smaller screens */ opacity: 0; /* Start fully transparent */ transition: opacity 0.3s ease-in-out; /* Fade-in transition */ } /* Fix for toggle switch colors */ .peer:checked~.peer-checked\:bg-revelti-orange { background-color: #f58220 !important; } /* This style will be added by JS to show the modal */ .modal-overlay.visible { display: flex; opacity: 1; } .modal-content { background: white; padding: 0; /* Remove padding, as the fetched content has its own */ border-radius: 0.5rem; width: 100%; /* Full width on small screens */ max-width: 672px; /* max-w-2xl from Tailwind, to match notification content */ max-height: 90vh; /* Limit height to 90% of viewport */ display: flex; /* Use flexbox to manage inner content */ flex-direction: column; /* Stack content vertically */ overflow: hidden; /* Hide overflow on the modal itself */ position: relative; transform: scale(0.95); /* Start slightly smaller */ transition: transform 0.3s ease-in-out; /* Pop-in transition */ } .modal-overlay.visible .modal-content { transform: scale(1); /* Scale to full size when visible */ } /* When the notification container is inside the modal, remove its shadow and margin */ .modal-content .max-w-2xl { box-shadow: none !important; margin: 0 !important; /* Allow the inner content of the notification panel to scroll */ overflow-y: auto; } /* Accordion arrow */ details>summary { list-style: none; } details>summary::-webkit-details-marker { display: none; } details>summary svg { transition: transform 0.2s; } details[open]>summary svg { transform: rotate(180deg); } details[open]>summary svg.no-rotate { transform: none; } /* This overrides the rotation */ /* Custom styles for pagination and sorting */ .pagination-btn { padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 600; transition: background-color 0.3s; } .pagination-btn.active { background-color: #213c63; color: white; } .pagination-btn:not(.active) { background-color: #e5e7eb; color: #374151; } .pagination-btn:disabled { background-color: #f3f4f6; color: #9ca3af; cursor: not-allowed; } .sort-indicator { opacity: 0.5; transition: opacity 0.3s; } th:hover .sort-indicator { opacity: 1; } /* Styles from eventBreakdown.html */ .tab-button.active { border-bottom: 3px solid #213c63; color: #213c63; font-weight: 700; } .filter-icon { cursor: pointer; margin-left: 8px; display: inline-block; vertical-align: middle; width: 16px; height: 16px; } .filter-modal { position: absolute; background-color: white; border: 1px solid #ccc; padding: 15px; z-index: 100; display: none; max-height: 250px; overflow-y: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; } .filter-modal .options-container { margin-bottom: 10px; } .filter-modal label { display: block; padding: 4px 0; font-weight: normal; } .filter-modal input[type="checkbox"] { margin-right: 8px; accent-color: #213c63; /* revelti-blue */ } .dt-buttons { display: inline-block; } .reset-btn-container { display: inline-block; margin-left: 10px; } /* Styles from eventCollaboratorManagement.html */ .accordion-arrow { transition: transform 0.2s; } details[open] .accordion-arrow { transform: rotate(180deg); } /* Styles from eventLiveEdit.html */ .change-dot { display: none; position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; background-color: #f58220; /* revelti-orange */ border-radius: 50%; border: 1px solid white; } .change-dot.visible { display: block; } /* --- Custom Styles for DataTables Export Dropdown --- */ /* Removes the dark background overlay when the export menu is open */ div.dt-button-background { display: none !important; } /* Styles the dropdown container */ .dt-button-collection { background-color: white !important; border: 1px solid #e2e8f0 !important; /* light gray border */ border-radius: 0.5rem !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; padding: 0.5rem !important; margin-top: 0.25rem !important; } /* Styles individual buttons within the dropdown */ .dt-button-collection .dt-button { background: none !important; color: #213c63 !important; /* revelti-blue */ border: none !important; box-shadow: none !important; text-align: left; padding: 0.5rem 1rem !important; border-radius: 0.375rem !important; transition: background-color 0.2s; } /* Hover effect for the dropdown buttons */ .dt-button-collection .dt-button:hover { background-color: #f8fafc !important; /* very light gray */ } /* --- Mobile Components --- */ .btn-mobile-tab { flex: 1 1 0%; padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 0.25rem; padding-right: 0.25rem; text-align: center; color: #6b7280; /* text-gray-500 */ transition-duration: 300ms; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .btn-mobile-tab.tab-active, .btn-mobile-tab:hover { color: #213c63; /* revelti-blue */ } /* --- Dashboard Layout Architecture --- */ /* Core Structural Shell */ .dashboard-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background-color: #f9fafb; /* gray-50 */ padding-top: 3rem; /* Space for the fixed navbar */ } .dashboard-main-area { display: flex; flex: 1 1 0%; overflow: hidden; position: relative; width: 100%; } /* Sidebar */ .sidebar-container { display: flex; flex-direction: column; background-color: white; border-right: 1px solid #e5e7eb; /* gray-200 */ transition: width 0.3s ease-in-out; overflow-y: auto; overflow-x: hidden; white-space: nowrap; flex-shrink: 0; z-index: 20; } /* Sidebar States */ .sidebar-expanded { width: 16rem; /* w-64 */ } .sidebar-collapsed { width: 3.5rem; /* Just wide enough for the icon + padding */ } /* Hide sidebar text labels when collapsed */ .sidebar-collapsed .sidebar-text { display: none; } /* Center nav items (icon-only) when collapsed */ .sidebar-collapsed nav a, .sidebar-collapsed nav button { justify-content: center; padding-left: 0; padding-right: 0; } /* Center the toggle button when collapsed */ .sidebar-collapsed>div>div:first-child { justify-content: center; padding-left: 0; padding-right: 0; } /* Mobile overrides for sidebar */ @media (max-width: 768px) { /* Hide sidebar on mobile for everyone EXCEPT Creatives and Organizers */ body:not([data-role="creative"]):not([data-role="organizer"]) .sidebar-collapsed { width: 0; border-right: none; } } /* Base Topbar & Main Wrapper */ .main-wrapper { flex: 1 1 0%; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .topbar-container { height: 4rem; border-bottom: 1px solid #e5e7eb; /* gray-200 */ background-color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; flex-shrink: 0; } .page-content { flex: 1 1 0%; overflow-y: auto; padding: 0; background-color: white; /* Eliminates gray band behind the page header */ } /* Sidebar toggle chevron icon visibility */ /* By default (expanded): show left-chevrons, hide right-chevrons */ .sidebar-expanded .sidebar-icon-collapsed { display: none; } .sidebar-expanded .sidebar-icon-expanded { display: block; } /* When collapsed: show right-chevrons, hide left-chevrons */ .sidebar-collapsed .sidebar-icon-expanded { display: none; } .sidebar-collapsed .sidebar-icon-collapsed { display: block; } /* Active State Color for Organizer View - Color change only for general links */ .active-link-organizer { color: #213c63 !important; /* revelti-blue */ font-weight: 700; } .active-link-organizer svg { color: #213c63 !important; stroke: #213c63 !important; } /* Background Highlight for Sidebar Links in Organizer View */ .sidebar-container .active-link-organizer { background-color: #eff6ff !important; /* blue-50 */ } /* Active State Color for Creative View - Color change and font weight */ .active-link-creative { color: #6b21a8 !important; /* revelti-purple */ font-weight: 700; } .active-link-creative svg { color: #6b21a8 !important; } /* Background Highlight for Sidebar Links in Creative View */ .sidebar-container .active-link-creative { background-color: #faf5ff !important; /* purple-50 */ } /* Active State Color for Super Admin View */ .active-link-superadmin { color: #be123c !important; /* rose-700 / crimson */ font-weight: 700; } .active-link-superadmin svg { color: #be123c !important; stroke: #be123c !important; } /* Background Highlight for Sidebar Links in Super Admin View */ .sidebar-container .active-link-superadmin { background-color: #fff1f2 !important; /* rose-50 */ } /* --- Sidebar Group (details/summary) Styles --- */ /* Rotate chevron when group is open */ .sidebar-group[open] .sidebar-chevron { transform: rotate(180deg); } /* When sidebar is collapsed: hide sub-items and prevent details from opening */ .sidebar-collapsed .sidebar-sub-items { display: none; } .sidebar-collapsed .sidebar-group { pointer-events: auto; } /* Prevent open state from showing sub-items when collapsed */ .sidebar-collapsed details[open] .sidebar-sub-items { display: none; } /* Keep group summary layout stable when collapsed (icon centers via existing rules) */ .sidebar-collapsed .sidebar-group>summary { justify-content: center; padding-left: 0; padding-right: 0; } /* --- Settings Accordion Styles --- */ .toggle-switch input { display: none; } .toggle-switch .slider { width: 44px; height: 24px; background: #d1d5db; border-radius: 9999px; position: relative; cursor: pointer; transition: background .2s; display: inline-block; } .toggle-switch .slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: transform .2s; } .toggle-switch input:checked+.slider { background: #f58220; } .toggle-switch input:checked+.slider::after { transform: translateX(20px); } details[open] summary .accordion-chevron { transform: rotate(180deg); } .accordion-chevron { transition: transform .2s ease; } .settings-section { background: white; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); margin-bottom: 1rem; border: 1px solid #f1f5f9; overflow: hidden; } .settings-section summary { padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; list-style: none; justify-content: space-between; } .settings-section summary::-webkit-details-marker { display: none; } .settings-section summary .section-left { display: flex; align-items: center; gap: 0.75rem; } .settings-section summary .section-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .settings-section .section-body { padding: 1.25rem; border-top: 1px solid #f1f5f9; background: #fafbfc; } .form-row { margin-bottom: 1rem; } .form-row label { display: block; font-weight: 600; font-size: .875rem; color: #374151; margin-bottom: .25rem; } .form-row input[type=text], .form-row input[type=email], .form-row input[type=password], .form-row select, .form-row textarea { width: 100%; padding: .5rem .75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: .875rem; outline: none; transition: border-color .15s; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: #f58220; box-shadow: 0 0 0 2px rgba(245, 130, 32, .12); } .toggle-row { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px solid #f1f5f9; } .toggle-row:last-child { border-bottom: none; } .toggle-row .toggle-label { font-size: .875rem; color: #374151; font-weight: 500; } .toggle-row .toggle-desc { font-size: .75rem; color: #9ca3af; } /* --- Mobile Viewport Overrides (ONLY MOBILE) --- */ @media (max-width: 767px) { /* Hide sidebar completely on mobile to prevent squishing layout */ .sidebar-container, #sidebar-placeholder { display: none !important; width: 0 !important; min-width: 0 !important; } /* Reset layout padding-left or margins where sidebar was assumed */ .dashboard-layout { padding-top: 3rem !important; } /* Horizontal scroll for all tab containers instead of text wrap/squish */ .attendee-tab-container, .attendee-tab-container-wide, .organizer-tab-container, .organizer-tab-container-wide, .creative-tab-container, .creative-tab-container-wide { overflow-x: auto !important; white-space: nowrap !important; justify-content: flex-start !important; border-radius: 0.5rem !important; max-width: 100% !important; scrollbar-width: none !important; /* Firefox */ -webkit-overflow-scrolling: touch; } .attendee-tab-container::-webkit-scrollbar, .attendee-tab-container-wide::-webkit-scrollbar, .organizer-tab-container::-webkit-scrollbar, .organizer-tab-container-wide::-webkit-scrollbar, .creative-tab-container::-webkit-scrollbar, .creative-tab-container-wide::-webkit-scrollbar { display: none !important; /* Chrome/Safari/Webkit */ } .attendee-tab-container button, .attendee-tab-container-wide button, .organizer-tab-container button, .organizer-tab-container-wide button, .creative-tab-container button, .creative-tab-container-wide button, .attendee-tab-container a, .attendee-tab-container-wide a, .organizer-tab-container a, .organizer-tab-container-wide a, .creative-tab-container a, .creative-tab-container-wide a { flex: 0 0 auto !important; padding-left: 1rem !important; padding-right: 1rem !important; } /* Table scrolling auto-wrapping */ table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* Responsive grid items layout scaling */ .mobile-col-grid { grid-template-columns: 1fr !important; } /* Stacking header items vertically */ .flex-row-mobile-wrap { flex-direction: column !important; align-items: stretch !important; gap: 1rem !important; } }