@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* High-Tech Black & White Morse Code Design Tokens */
:root, [data-theme], [data-theme="black"] {
    --p: 0 0% 100%;       /* Primary: #FFFFFF */
    --pc: 0 0% 0%;        /* Primary Content: #000000 */
    --s: 0 0% 70%;        /* Secondary: #B3B3B3 */
    --sc: 0 0% 0%;
    --a: 0 0% 100%;       /* Accent: #FFFFFF */
    --ac: 0 0% 0%;
    --n: 0 0% 10%;        /* Neutral: #1A1A1A */
    --nc: 0 0% 100%;
    --b1: 0 0% 2%;        /* Base 100: #030303 */
    --b2: 0 0% 5%;        /* Base 200: #0D0D0D */
    --b3: 0 0% 8%;        /* Base 300: #141414 */
    --bc: 0 0% 90%;       /* Base Content: #E5E5E5 */
    
    --rounded-box: 4px;
    --rounded-btn: 3px;
    --rounded-badge: 2px;
    
    --tech-font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono-font: 'JetBrains Mono', monospace;
}

/* Rich Multi-Layered Tech & Morse Code Background */
body {
    font-family: var(--tech-font);
    background-color: #030303;
    background-image: 
        /* Layer 1: Dot Matrix Intersections */
        radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px),
        /* Layer 2: Tactical Grid Lines */
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        /* Layer 3: CRT Scanlines */
        linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 32px 32px, 32px 32px, 32px 32px, 100% 4px;
    background-position: center center;
    color: #e5e5e5;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Ambient Pulsing Radar Top Glow */
body::before {
    content: '';
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 450px;
    background: 
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.09) 0%, rgba(0, 0, 0, 0) 70%),
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 50%);
    pointer-events: none;
    z-index: 0;
    animation: ambientPulse 8s ease-in-out infinite alternate;
}

/* Moving Radar Scan Beam Line */
body::after {
    content: '';
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    animation: radarScan 14s linear infinite;
}

/* Navigation Bar & Header Bars */
.navbar, header {
    background: rgba(10, 10, 10, 0.92) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15) !important;
    position: relative;
    z-index: 10;
}

.navbar .btn-ghost {
    font-family: var(--mono-font);
    letter-spacing: -0.02em;
}

/* High-Tech Tactical Glassmorphism Containers & Cards */
.bg-base-300, 
.card, 
section.bg-base-300, 
.modal-box {
    background: rgba(14, 14, 14, 0.9) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75);
    border-radius: var(--rounded-box) !important;
    position: relative;
}

/* Morse Code Node Indicator on Tactical Cards */
.bg-base-300::before, 
section.bg-base-300::before {
    content: '• — • •  • •  — • •'; /* Morse LID */
    position: absolute;
    top: 8px;
    right: 14px;
    font-family: var(--mono-font);
    font-size: 9px;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

/* Corner Bracket Accents */
.bg-base-300::after, 
section.bg-base-300::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6px;
    height: 6px;
    border-right: 2px solid rgba(255, 255, 255, 0.4);
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

/* Stream Cards, Lists & Items Dynamic Styling */
#chit-stream > div, 
#chair-pending-stream > div, 
#chair-history-stream > div,
#chits-feed-container > div,
#my-chits-container > div,
.bg-base-200 {
    background: rgba(20, 20, 20, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--rounded-box) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#chit-stream > div:hover, 
#chair-pending-stream > div:hover, 
#chair-history-stream > div:hover,
#chits-feed-container > div:hover,
#my-chits-container > div:hover,
.bg-base-200:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 255, 255, 0.04);
}

/* DaisyUI Tabs (Chair Portal Switcher) */
.tabs-boxed {
    background: rgba(10, 10, 10, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--rounded-box) !important;
    padding: 4px !important;
}

.tab {
    font-family: var(--mono-font) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888888 !important;
    border-radius: var(--rounded-btn) !important;
    transition: all 0.2s ease;
}

.tab:hover {
    color: #ffffff !important;
}

.tab-active {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.3) !important;
}

/* Overall Top 3 Secretariat Banner */
.bg-gradient-to-r.from-base-300 {
    background: linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(12, 12, 12, 0.95)) !important;
    border: 1px solid rgba(234, 179, 8, 0.35) !important;
    box-shadow: 0 0 30px rgba(234, 179, 8, 0.05);
}

#overall-top3-grid > div {
    background: rgba(16, 16, 16, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--rounded-box);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#overall-top3-grid > div:hover {
    border-color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 255, 255, 0.1);
}

/* Evaluation Criteria Alert Box */
.alert.bg-base-200 {
    background: rgba(15, 15, 15, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Delegate Selector Cards in Chair Portal */
#delegate-list > div {
    background: rgba(18, 18, 18, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.2s ease;
}

#delegate-list > div:hover {
    background: rgba(30, 30, 30, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

#delegate-list > div.border-primary {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* Committee Allocation Cards in Sec Board */
#committee-cards-grid .bg-base-200 {
    background: rgba(16, 16, 16, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#committee-cards-grid .bg-base-200:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(26, 26, 26, 0.9) !important;
}

/* Modal Inspection Popups */
#delegate-modal .modal-box, dialog.modal .modal-box {
    background: rgba(12, 12, 12, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}

#delegate-modal .grid-cols-3 {
    background: rgba(20, 20, 20, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Typography Enhancements */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--tech-font);
    letter-spacing: -0.02em;
}

.font-mono, .badge, .btn, code, time {
    font-family: var(--mono-font) !important;
}

/* Buttons */
.btn {
    font-family: var(--mono-font);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    border-radius: var(--rounded-btn) !important;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
}

.btn-primary:hover {
    background-color: #e5e5e5 !important;
    border-color: #e5e5e5 !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.btn-primary:disabled {
    background-color: #262626 !important;
    color: #666666 !important;
    border-color: #333333 !important;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.btn-error {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.btn-error:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.btn-success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

.btn-success:hover {
    background: #22c55e !important;
    color: #000000 !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.btn-success:disabled {
    background: rgba(34, 197, 94, 0.05) !important;
    color: #555555 !important;
    border-color: rgba(34, 197, 94, 0.1) !important;
}

.btn-warning {
    background: rgba(234, 179, 8, 0.15) !important;
    color: #eab308 !important;
    border: 1px solid rgba(234, 179, 8, 0.4) !important;
}

.btn-warning:hover {
    background: #eab308 !important;
    color: #000000 !important;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.4);
}

/* Inputs, Textareas, Selects */
.input, .textarea, .select {
    background-color: #060606 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    font-family: var(--mono-font);
    border-radius: var(--rounded-btn) !important;
    transition: all 0.2s ease;
}

.input:focus, .textarea:focus, .select:focus {
    border-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.18) !important;
    outline: none !important;
}

.input:disabled, .textarea:disabled, .select:disabled {
    background-color: #040404 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    opacity: 0.45;
}

/* Badges with Morse Code Accent Prefix */
.badge {
    border-radius: var(--rounded-badge) !important;
    padding: 0.35em 0.65em;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-family: var(--mono-font) !important;
}

.badge-primary {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.badge-primary::before {
    content: '• —  ';
    letter-spacing: 0.1em;
    opacity: 0.6;
}

.badge-success {
    background: rgba(34, 197, 94, 0.1) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.badge-error {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.badge-warning {
    background: rgba(234, 179, 8, 0.1) !important;
    color: #facc15 !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important;
}

.badge-neutral {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #e5e5e5 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.badge-accent {
    background: rgba(168, 85, 247, 0.1) !important;
    color: #c084fc !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.badge-ghost {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #a3a3a3 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.badge-outline {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #a3a3a3 !important;
}

/* Dashed Morse-style Tables */
.table {
    border-collapse: separate;
    border-spacing: 0 4px;
}

.table th {
    font-family: var(--mono-font);
    font-size: 0.68rem;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15) !important;
    padding-bottom: 0.75rem;
}

.table tr {
    background: rgba(20, 20, 20, 0.4);
    transition: background 0.2s ease;
}

.table tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

.table td {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Toast Notifications */
.toast .alert {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-family: var(--mono-font);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    border-radius: var(--rounded-btn);
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Keyframe Animations */
@keyframes ambientPulse {
    0% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
    }
}

@keyframes radarScan {
    0% {
        top: -100%;
    }
    100% {
        top: 100%;
    }
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}