/* ============================================
   POCITS Hub Themes CSS - Color Variables
   Data-attribute-based theming for all hubs
   Created: 2025-12-27
   ============================================ */

/* =========================================
   DEFAULT THEME (fallback) - Neutral Light Grey
   ========================================= */
:root {
    --hub-color: #bbc1cc;
    --hub-color-dark: #9aa2b2;
    --hub-light: #F9FAFB;
    --hub-glow: rgba(156, 163, 175, 0.3);
}

/* =========================================
   HUB-SPECIFIC THEMES
   Applied via data-hub attribute on body
   ========================================= */

/* TOPX - Topics/Feed Hub (Blue) */
[data-hub="TOPX"],
[data-hub="topx"] {
    --hub-color: #3B82F6;
    --hub-color-dark: #2563EB;
    --hub-light: #DBEAFE;
    --hub-glow: rgba(59, 130, 246, 0.3);
}

/* BOOK - Business Directory Hub (Amber/Orange) */
[data-hub="BOOK"],
[data-hub="book"] {
    --hub-color: #F59E0B;
    --hub-color-dark: #D97706;
    --hub-light: #FEF3C7;
    --hub-glow: rgba(245, 158, 11, 0.3);
}

/* MALL - Marketplace Hub (Emerald/Green) */
[data-hub="MALL"],
[data-hub="mall"] {
    --hub-color: #10B981;
    --hub-color-dark: #059669;
    --hub-light: #D1FAE5;
    --hub-glow: rgba(16, 185, 129, 0.3);
}

/* CMTY - Community Hub (Pink) */
[data-hub="CMTY"],
[data-hub="cmty"],
[data-hub="community"] {
    --hub-color: #EC4899;
    --hub-color-dark: #DB2777;
    --hub-light: #FCE7F3;
    --hub-glow: rgba(236, 72, 153, 0.3);
}

/* MEDI - Healthcare Hub (Teal) */
[data-hub="MEDI"],
[data-hub="medi"],
[data-hub="health"] {
    --hub-color: #14B8A6;
    --hub-color-dark: #0D9488;
    --hub-light: #CCFBF1;
    --hub-glow: rgba(20, 184, 166, 0.3);
}

/* SMARTS - Governance Hub (Purple) */
[data-hub="SMARTS"],
[data-hub="smarts"],
[data-hub="governance"] {
    --hub-color: #7C3AED;
    --hub-color-dark: #6D28D9;
    --hub-light: #EDE9FE;
    --hub-glow: rgba(124, 58, 237, 0.3);
}

/* SOCIAL - Social/Profile Hub (Blue) */
[data-hub="SOCIAL"],
[data-hub="social"],
[data-hub="profile"] {
    --hub-color: #3B82F6;
    --hub-color-dark: #2563EB;
    --hub-light: #DBEAFE;
    --hub-glow: rgba(59, 130, 246, 0.3);
}

/* STRM - Streaming Hub (Red) */
[data-hub="STRM"],
[data-hub="strm"],
[data-hub="streaming"] {
    --hub-color: #EF4444;
    --hub-color-dark: #DC2626;
    --hub-light: #FEE2E2;
    --hub-glow: rgba(239, 68, 68, 0.3);
}

/* CHAT - Chat Hub (Violet) */
[data-hub="CHAT"],
[data-hub="chat"] {
    --hub-color: #8B5CF6;
    --hub-color-dark: #7C3AED;
    --hub-light: #EDE9FE;
    --hub-glow: rgba(139, 92, 246, 0.3);
}

/* DYK - Did You Know Hub (Cyan) */
[data-hub="DYK"],
[data-hub="dyk"] {
    --hub-color: #06B6D4;
    --hub-color-dark: #0891B2;
    --hub-light: #CFFAFE;
    --hub-glow: rgba(6, 182, 212, 0.3);
}

/* SCOUT - Scout/Grants Hub (Teal) */
[data-hub="SCOUT"],
[data-hub="scout"],
[data-hub="grants"] {
    --hub-color: #14B8A6;
    --hub-color-dark: #0D9488;
    --hub-light: #CCFBF1;
    --hub-glow: rgba(20, 184, 166, 0.3);
}

/* =========================================
   FINANCIAL HUBS
   ========================================= */

/* TRUST - Trust Accounts Hub (Indigo) */
[data-hub="TRUST"],
[data-hub="trust"] {
    --hub-color: #6366F1;
    --hub-color-dark: #4F46E5;
    --hub-light: #E0E7FF;
    --hub-glow: rgba(99, 102, 241, 0.3);
}

/* XCHG - Exchange Hub (Green) */
[data-hub="XCHG"],
[data-hub="xchg"],
[data-hub="exchange"] {
    --hub-color: #22C55E;
    --hub-color-dark: #16A34A;
    --hub-light: #DCFCE7;
    --hub-glow: rgba(34, 197, 94, 0.3);
}

/* INDEX - Data Index Hub (Yellow) */
[data-hub="INDEX"],
[data-hub="index"] {
    --hub-color: #EAB308;
    --hub-color-dark: #CA8A04;
    --hub-light: #FEF9C3;
    --hub-glow: rgba(234, 179, 8, 0.3);
}

/* RSRV - Reserve Hub (Sky Blue) */
[data-hub="RSRV"],
[data-hub="rsrv"],
[data-hub="reserve"] {
    --hub-color: #0EA5E9;
    --hub-color-dark: #0284C7;
    --hub-light: #E0F2FE;
    --hub-glow: rgba(14, 165, 233, 0.3);
}

/* FINANCIAL - General Financial Hub (Indigo) - legacy */
[data-hub="FINANCIAL"],
[data-hub="financial"],
[data-hub="wallet"] {
    --hub-color: #6366F1;
    --hub-color-dark: #4F46E5;
    --hub-light: #E0E7FF;
    --hub-glow: rgba(99, 102, 241, 0.3);
}

/* =========================================
   NEUTRAL/ADMIN THEMES
   ========================================= */

/* Admin theme (Slate) */
[data-hub="ADMIN"],
[data-hub="admin"] {
    --hub-color: #475569;
    --hub-color-dark: #334155;
    --hub-light: #F1F5F9;
}

/* Settings theme (Gray) */
[data-hub="SETTINGS"],
[data-hub="settings"] {
    --hub-color: #6B7280;
    --hub-color-dark: #4B5563;
    --hub-light: #F3F4F6;
}

/* =========================================
   SEMANTIC COLOR UTILITIES
   Can be used alongside hub colors
   ========================================= */

/* Success colors */
.text-success {
    color: #10B981;
}

.bg-success {
    background-color: #D1FAE5;
}

.border-success {
    border-color: #10B981;
}

/* Warning colors */
.text-warning {
    color: #F59E0B;
}

.bg-warning {
    background-color: #FEF3C7;
}

.border-warning {
    border-color: #F59E0B;
}

/* Error/Danger colors */
.text-danger {
    color: #EF4444;
}

.bg-danger {
    background-color: #FEE2E2;
}

.border-danger {
    border-color: #EF4444;
}

/* Info colors */
.text-info {
    color: #3B82F6;
}

.bg-info {
    background-color: #DBEAFE;
}

.border-info {
    border-color: #3B82F6;
}

/* =========================================
   HUB COLOR UTILITIES
   Use hub theme colors explicitly
   ========================================= */

/* Text using hub color */
.text-hub {
    color: var(--hub-color);
}

.text-hub-dark {
    color: var(--hub-color-dark);
}

/* Background using hub color */
.bg-hub {
    background-color: var(--hub-color);
}

.bg-hub-light {
    background-color: var(--hub-light);
}

.bg-hub-dark {
    background-color: var(--hub-color-dark);
}

/* Border using hub color */
.border-hub {
    border-color: var(--hub-color);
}

.border-hub-light {
    border-color: var(--hub-light);
}

/* =========================================
   HEADER GRADIENT - Hub-Specific Background Images
   3px wide x 70px high images repeated horizontally
   Auto-applies based on page's data-hub attribute
   ========================================= */

/* Base header styling with gradient image support — only when a hub is active */
[data-hub]:not([data-hub=""]) .pocits-header,
[data-hub]:not([data-hub=""]) .pocits-header.header-gradient {
    height: 70px;
    background-color: var(--bg-dark, #0a0a1e);
    background: linear-gradient(to bottom, var(--bg-dark, #0a0a1e) 0%, var(--bg-dark, #0a0a1e) 80%, var(--hub-color) 100%);
}

/* Ensure header content stays above background */
.pocits-header > *,
.pocits-header.header-gradient > * {
    position: relative;
    z-index: 1;
}

/* =========================================
   GRADIENT UTILITIES
   ========================================= */

/* Standard hub gradient (used in headers) */
.gradient-hub {
    background: linear-gradient(135deg, var(--hub-color) 0%, var(--hub-color-dark) 100%);
}

/* Horizontal gradient */
.gradient-hub-horizontal {
    background: linear-gradient(90deg, var(--hub-color) 0%, var(--hub-color-dark) 100%);
}

/* Subtle gradient (light) */
.gradient-hub-light {
    background: linear-gradient(135deg, var(--hub-light) 0%, white 100%);
}

/* =========================================
   INTERACTIVE STATE COLORS
   Hover, focus, active states
   ========================================= */

/* Generic interactive element */
.interactive-hub {
    transition: all 0.2s ease;
}

.interactive-hub:hover {
    background-color: var(--hub-light);
}

.interactive-hub:active {
    background-color: var(--hub-color);
    color: white;
}

/* Link style using hub color */
a.link-hub {
    color: var(--hub-color);
    text-decoration: none;
}

a.link-hub:hover {
    color: var(--hub-color-dark);
    text-decoration: underline;
}

/* =========================================
   BUTTON COLOR VARIANTS
   Extend base button styles with hub colors
   ========================================= */

/* Outline button using hub color */
.btn-outline-hub {
    background: transparent;
    color: var(--hub-color);
    border: 2px solid var(--hub-color);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline-hub:hover {
    background: var(--hub-color);
    color: white;
}

/* Ghost button (minimal) */
.btn-ghost-hub {
    background: transparent;
    color: var(--hub-color);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-ghost-hub:hover {
    background: var(--hub-light);
}

/* Light button */
.btn-light-hub {
    background: var(--hub-light);
    color: var(--hub-color-dark);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-light-hub:hover {
    background: var(--hub-color);
    color: white;
}

/* =========================================
   ACCENT ELEMENTS
   Borders, underlines, highlights
   ========================================= */

/* Left border accent (like vote items) */
.accent-left-hub {
    border-left: 4px solid var(--hub-color);
}

/* Bottom border accent (like section titles) */
.accent-bottom-hub {
    border-bottom: 2px solid var(--hub-light);
}

/* Top border accent */
.accent-top-hub {
    border-top: 3px solid var(--hub-color);
}

/* =========================================
   ICON CONTAINERS
   Colored icon backgrounds
   ========================================= */

/* Icon container with hub color */
.icon-hub {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--hub-light);
    color: var(--hub-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Circular icon container */
.icon-hub-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hub-light);
    color: var(--hub-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   FOCUS STATES
   Accessibility-friendly focus rings
   ========================================= */

.focus-hub:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--hub-light);
}

.focus-hub:focus-visible {
    outline: 2px solid var(--hub-color);
    outline-offset: 2px;
}

/* =========================================
   SELECTION STATES
   Selected items, active tabs
   ========================================= */

.selected-hub {
    background: var(--hub-light);
    color: var(--hub-color-dark);
    border-color: var(--hub-color);
}

.active-hub {
    background: var(--hub-color);
    color: white;
}