/* Tab Header Container */ .pr-tabs-header { background: teal; border-bottom: 1px solid #00695c; margin: -1rem -1rem 0 -1rem; padding: 0; border-radius: 15px 10px 0 0; } /* Tab Navigation */ .pr-tabs-nav { display: flex; gap: 0; align-items: stretch; padding: 0; } /* Individual Tab Button */ .pr-tab-btn { flex: 0 0 auto; padding: 14px 32px; background: transparent; border: none; border-bottom: 3px solid transparent; color: white; font-size: 15px; font-weight: 500; border-radius: 15px 0px 0 0; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0.3px; } /* Tab Hover State */ .pr-tab-btn:hover { background: rgba(255, 255, 255, 0.15); color: white; } /* Active Tab */ .pr-tab-btn.active { background: white; color: teal; font-weight: 600; border-bottom-color: white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* Active Tab Accent Line */ .pr-tab-btn.active::before { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 3px; background: white; } /* Loading State */ .pr-tab-btn.loading { pointer-events: none; opacity: 0.6; } .pr-tab-btn.loading::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } .page-header-section { padding: 24px 0 16px 0; } .page-heading { margin: 0; font-size: 28px; font-weight: 600; color: teal; text-align: left; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: -0.5px; position: relative; padding-bottom: 12px; } /* Subtle Accent Line Under Heading */ .page-heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 3px; background: teal; border-radius: 2px; } /* Title Transition Animation */ .page-heading { transition: opacity 0.25s ease, transform 0.25s ease; } .page-heading.updating { opacity: 0; transform: translateX(-10px); } /* Table Container Adjustments */ .table-container { margin-top: -15px !important; overflow: hidden; } /* Ensure table container has proper border radius */ .table-container.rounded { border-radius: 5px !important; } /* Responsive Design */ @media (max-width: 768px) { .pr-tabs-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pr-tab-btn { padding: 12px 24px; font-size: 14px; white-space: nowrap; } .page-heading { font-size: 24px; } .page-header-section { padding: 20px 0 12px 0; } } @media (max-width: 576px) { .pr-tab-btn { padding: 10px 20px; font-size: 13px; } .page-heading { font-size: 22px; } .page-header-section { padding: 16px 0 10px 0; } } /* Smooth scrollbar for mobile tabs */ .pr-tabs-nav::-webkit-scrollbar { height: 3px; } .pr-tabs-nav::-webkit-scrollbar-track { background: #e0f2f1; } .pr-tabs-nav::-webkit-scrollbar-thumb { background: #80cbc4; border-radius: 10px; } .pr-tabs-nav::-webkit-scrollbar-thumb:hover { background: #4db6ac; } /* Enhanced Table Styling */ #PRTable { margin-top: 0 !important; } /* Focus States for Accessibility */ .pr-tab-btn:focus { outline: 2px solid white; outline-offset: -2px; } .pr-tab-btn:focus:not(:focus-visible) { outline: none; } /* Print Styles */ @media print { .pr-tabs-header { display: none; } .page-heading::after { display: none; } }