Shrimp Task Manager

/* Nested Tabs Styles for HeadlessUI - Preserving original colors and rounded borders */ /* Wrapper for all tab panels */ .tab-panels-wrapper { background: #16213e; border-radius: 0 10px 10px 10px; border: 2px solid #2c3e50; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); margin-top: 0; position: relative; z-index: 1; } /* Level 1 - Outer tabs list */ .tabs-list.outer-tabs { display: flex; align-items: center; gap: 2px; position: relative; z-index: 1; padding-left: 0; margin-left: 0; } /* Project panel container */ .project-panel { background: transparent; } /* Profile tabs wrapper - encases both profile tabs and inner tabs */ .profile-tabs-wrapper { background: transparent; overflow: visible; margin: 0; padding: 0; } /* Level 2 - Profile tabs container */ .profile-tabs-container { background: transparent; padding: 0; margin: 0; position: relative; } /* Level 2 - Profile tabs list */ .tabs-list.profile-tabs { display: flex; gap: 2px; position: relative; padding: 10px 15px 0 15px; margin: 0; background: #16213e; } /* Profile tabs content area - border starts at bottom of tabs */ .profile-content-wrapper { border: 1px solid #2c3e50; border-top: none; background: #16213e; margin-top: -1px; position: relative; margin-left: 15px; margin-right: 15px; } /* Profile tab active state - connects to wrapper */ .profile-tabs .tab.active { background: #16213e !important; border-bottom: 2px solid #16213e !important; position: relative; z-index: 2; } /* Level 3 - Inner project tabs */ .inner-tabs-list.project-inner-tabs { display: flex; gap: 2px; border-bottom: 1px solid #2c3e50; margin-bottom: 0; padding: 10px 15px 0 15px; background: #0f1626; position: relative; border-radius: 8px 8px 0 0; } /* Inner tabs content wrapper */ .inner-tabs-wrapper { margin: 0; overflow: hidden; background: #0f1626; margin-bottom: 10px; } /* Inner tab panels content area */ .inner-tab-panels { background: #0f1626; border-top: none; margin-top: 0; margin-right: 10px; } /* Inner tab styles */ .inner-tab { background: #1a1f3a !important; border: 1px solid #1a1f3a !important; border-bottom: none !important; z-index: 1; position: relative; margin-bottom: -2px; } .inner-tab.active { background: #0f1626 !important; border-color: #1a1f3a !important; border-bottom: 2px solid #0f1626 !important; } /* Override HeadlessUI focus styles */ .tab:focus, .inner-tab:focus { outline: 2px solid #4fbdba; outline-offset: -2px; } /* Hide panel focus outline */ [role="tabpanel"]:focus { outline: none; } /* Ensure proper panel display */ [role="tabpanel"][data-headlessui-state="selected"] { display: block; margin-bottom: 15px; } [role="tabpanel"]:not([data-headlessui-state="selected"]) { display: none; }