/* ============================================================
   IDEAS PAGE — NAVY/AI THEME OVERLAY
   Re-themes the ideas portal to match the rest of the navy/AI site.
   Loaded after styles.css so it overrides cleanly.
   ============================================================ */

/* ---------- Hero overlay re-tint ---------- */
.ideas-hero .service-hero-overlay {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(80, 150, 255, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 70%, rgba(120, 80, 255, 0.25) 0%, transparent 60%),
        linear-gradient(135deg, rgba(8, 18, 42, 0.75) 0%, rgba(12, 26, 60, 0.65) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ideas-hero .service-hero-content h1 {
    background: linear-gradient(135deg, #ffffff 0%, #cfe6ff 60%, #a78bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ideas-hero .service-hero-content::before {
    content: '✦ AI-Powered Idea Portal';
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(80, 150, 255, 0.18);
    border: 1px solid rgba(120, 200, 255, 0.45);
    color: #cfe6ff;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
    width: fit-content;
}

/* ---------- Ideas intro section ---------- */
.ideas-intro {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(80, 150, 255, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(120, 80, 255, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #08122a 0%, #0c1a3d 50%, #08122a 100%) !important;
}

.ideas-intro-bg::before {
    background-image:
        linear-gradient(rgba(120, 200, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 200, 255, 0.05) 1px, transparent 1px) !important;
}

.ideas-intro-badge {
    background: rgba(80, 150, 255, 0.15) !important;
    border-color: rgba(120, 200, 255, 0.4) !important;
    color: #cfe6ff !important;
}
.ideas-intro-badge::before {
    content: '●';
    color: #6cf;
    margin-right: 8px;
    animation: ideasBlink 1.6s ease-in-out infinite;
}
@keyframes ideasBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.ideas-intro-title {
    background: linear-gradient(135deg, #ffffff 0%, #cfe6ff 50%, #a78bff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.ideas-intro-subtitle {
    color: rgba(200, 220, 255, 0.75) !important;
}

/* Cards re-themed */
.ideas-intro-card {
    background: linear-gradient(165deg, rgba(80, 150, 255, 0.08), rgba(40, 80, 180, 0.03)) !important;
    border: 1px solid rgba(120, 200, 255, 0.2) !important;
    backdrop-filter: blur(8px);
}

.ideas-intro-card::before {
    background: linear-gradient(90deg, transparent, rgba(120, 200, 255, 0.6), rgba(167, 139, 255, 0.6), transparent) !important;
    height: 2px !important;
}

.ideas-intro-card:hover {
    border-color: rgba(120, 200, 255, 0.5) !important;
    box-shadow: 0 16px 50px rgba(0, 50, 150, 0.4), 0 0 0 1px rgba(120, 200, 255, 0.1) !important;
    background: linear-gradient(165deg, rgba(80, 150, 255, 0.12), rgba(40, 80, 180, 0.05)) !important;
}

/* Conic gradient AI border on hover */
.ideas-intro-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--ideas-angle, 0deg),
        transparent 0deg,
        rgba(120, 200, 255, 0) 40deg,
        rgba(120, 200, 255, 0.7) 90deg,
        rgba(167, 139, 255, 0.5) 130deg,
        transparent 180deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    animation: ideasAngleSpin 5s linear infinite;
    z-index: 0;
}
.ideas-intro-card:hover::after { opacity: 1; }

@property --ideas-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes ideasAngleSpin {
    to { --ideas-angle: 360deg; }
}

.ideas-intro-card-icon {
    background: linear-gradient(135deg, rgba(80, 150, 255, 0.25), rgba(120, 80, 255, 0.12)) !important;
    border: 1px solid rgba(120, 200, 255, 0.35) !important;
    color: #6cf !important;
    box-shadow: 0 0 24px rgba(80, 150, 255, 0.15);
}

.ideas-intro-card:hover .ideas-intro-card-icon {
    background: linear-gradient(135deg, rgba(80, 150, 255, 0.4), rgba(120, 80, 255, 0.2)) !important;
    box-shadow: 0 0 28px rgba(120, 200, 255, 0.4) !important;
    color: #ffffff !important;
}

.ideas-intro-card h3 {
    color: #ffffff !important;
}

.ideas-intro-card p {
    color: rgba(200, 220, 255, 0.7) !important;
}

.ideas-intro-card-number {
    background: linear-gradient(135deg, rgba(120, 200, 255, 0.35), rgba(167, 139, 255, 0.2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    opacity: 0.4;
}
.ideas-intro-card:hover .ideas-intro-card-number {
    opacity: 0.8;
}

/* ---------- Auth gate (soft, airy redesign) ---------- */
.ideas-auth-gate,
.ideas-pending-gate,
.ideas-rejected-gate {
    background: linear-gradient(180deg, #08122a 0%, #0a1635 100%) !important;
    position: relative;
    overflow: hidden;
    padding: 140px 0 120px !important;
}
.ideas-auth-gate::before,
.ideas-pending-gate::before,
.ideas-rejected-gate::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(80, 150, 255, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(180, 100, 255, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 50% 110%, rgba(255, 180, 80, 0.08) 0%, transparent 50%);
    pointer-events: none;
    animation: authBlobsFloat 18s ease-in-out infinite alternate;
}
@keyframes authBlobsFloat {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, -20px, 0) scale(1.05); }
}
.ideas-auth-gate .container,
.ideas-pending-gate .container,
.ideas-rejected-gate .container {
    position: relative;
    z-index: 1;
}

.auth-card,
.pending-card {
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 48px 42px 40px !important;
    text-align: center;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(20, 40, 90, 0.18)) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    box-shadow:
        0 40px 100px -20px rgba(0, 20, 80, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
    position: relative;
}
.auth-card::before,
.pending-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(140deg, rgba(120, 200, 255, 0.35), transparent 40%, transparent 60%, rgba(180, 120, 255, 0.25));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    display: block !important;
}

.auth-card h2,
.pending-card h2 {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ffffff 0%, #cfe6ff 60%, #e9d6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2rem !important;
    letter-spacing: -0.5px;
    margin-bottom: 10px !important;
}

.auth-desc,
.pending-desc {
    color: rgba(200, 220, 255, 0.65) !important;
    font-size: 0.98rem !important;
    margin-bottom: 32px !important;
}

.auth-input-group {
    margin-bottom: 16px !important;
    text-align: left;
}

.auth-input-group label {
    color: rgba(200, 220, 255, 0.75) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.6px;
    margin-bottom: 8px !important;
}

.auth-input-group input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    transition: all 0.25s ease !important;
}
.auth-input-group input:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
.auth-input-group input:focus {
    background: rgba(80, 150, 255, 0.08) !important;
    border-color: rgba(120, 200, 255, 0.6) !important;
    box-shadow: 0 0 0 4px rgba(80, 150, 255, 0.15) !important;
    outline: none;
}
.auth-input-group input::placeholder {
    color: rgba(200, 220, 255, 0.3) !important;
}

.auth-btn {
    border-radius: 14px !important;
    padding: 14px 18px !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.auth-btn-primary {
    background: linear-gradient(135deg, #4f8bff 0%, #8a5cff 100%) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow:
        0 12px 28px -6px rgba(80, 100, 255, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
    margin-top: 12px !important;
}
.auth-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 38px -6px rgba(80, 100, 255, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset !important;
}

.auth-btn-google {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}
.auth-btn-google:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px);
}

.auth-divider {
    color: rgba(200, 220, 255, 0.4) !important;
    margin: 22px 0 !important;
}
.auth-divider::before,
.auth-divider::after {
    background: linear-gradient(90deg, transparent, rgba(120, 200, 255, 0.25), transparent) !important;
    height: 1px;
}
.auth-divider span {
    background: transparent !important;
    color: rgba(200, 220, 255, 0.45) !important;
    font-size: 0.78rem !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 14px !important;
}

.auth-toggle {
    color: rgba(200, 220, 255, 0.6) !important;
    margin-top: 24px !important;
}
.auth-toggle a {
    color: #7cc6ff !important;
    font-weight: 600;
    transition: color 0.2s ease;
}
.auth-toggle a:hover {
    color: #a8dcff !important;
}

/* ---------- Ideas main section ---------- */
.ideas-section {
    background: linear-gradient(180deg, #08122a 0%, #0c1a3d 50%, #08122a 100%) !important;
    position: relative;
}

.ideas-user-bar {
    background: linear-gradient(135deg, rgba(80, 150, 255, 0.10), rgba(20, 40, 90, 0.4)) !important;
    border: 1px solid rgba(120, 200, 255, 0.2) !important;
    backdrop-filter: blur(10px);
}
.ideas-user-name {
    color: #ffffff !important;
}
.ideas-user-avatar {
    background: linear-gradient(135deg, #4080ff, #7050ff) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(80, 150, 255, 0.4);
}

.ideas-logout-btn,
.ideas-admin-btn,
.pending-signout-btn {
    background: rgba(80, 150, 255, 0.12) !important;
    border: 1px solid rgba(120, 200, 255, 0.3) !important;
    color: #cfe6ff !important;
}
.ideas-logout-btn:hover,
.ideas-admin-btn:hover,
.pending-signout-btn:hover {
    background: rgba(80, 150, 255, 0.22) !important;
    border-color: rgba(120, 200, 255, 0.6) !important;
}

/* Toolbar */
.ideas-toolbar {
    background: linear-gradient(135deg, rgba(80, 150, 255, 0.08), rgba(20, 40, 90, 0.3)) !important;
    border: 1px solid rgba(120, 200, 255, 0.18) !important;
    backdrop-filter: blur(10px);
}
.ideas-search,
.ideas-select {
    background: rgba(8, 18, 42, 0.6) !important;
    border: 1px solid rgba(120, 200, 255, 0.2) !important;
    color: #ffffff !important;
}
.ideas-search::placeholder {
    color: rgba(200, 220, 255, 0.4) !important;
}
.ideas-search:focus,
.ideas-select:focus {
    border-color: rgba(120, 200, 255, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(80, 150, 255, 0.15) !important;
    outline: none;
}
.ideas-search-icon {
    color: rgba(120, 200, 255, 0.7) !important;
}

.ideas-new-btn {
    background: linear-gradient(135deg, #4080ff 0%, #7050ff 100%) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(80, 150, 255, 0.3) !important;
}
.ideas-new-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(80, 150, 255, 0.45) !important;
}

/* Idea Form */
.idea-form {
    background: linear-gradient(165deg, rgba(80, 150, 255, 0.08), rgba(20, 40, 90, 0.4)) !important;
    border: 1px solid rgba(120, 200, 255, 0.25) !important;
    backdrop-filter: blur(20px);
}
.idea-form h3 {
    color: #ffffff !important;
}
.idea-form-group label {
    color: rgba(200, 220, 255, 0.85) !important;
}
.idea-form-group input,
.idea-form-group textarea,
.idea-form-group select {
    background: rgba(8, 18, 42, 0.6) !important;
    border: 1px solid rgba(120, 200, 255, 0.25) !important;
    color: #ffffff !important;
}
.idea-form-group input::placeholder,
.idea-form-group textarea::placeholder {
    color: rgba(200, 220, 255, 0.35) !important;
}
.idea-form-group input:focus,
.idea-form-group textarea:focus,
.idea-form-group select:focus {
    border-color: rgba(120, 200, 255, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(80, 150, 255, 0.15) !important;
    outline: none;
}

.ideas-cancel-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(120, 200, 255, 0.25) !important;
    color: #cfe6ff !important;
}
.ideas-submit-btn {
    background: linear-gradient(135deg, #4080ff 0%, #7050ff 100%) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(80, 150, 255, 0.3) !important;
}

/* Idea cards (list items) */
.idea-card {
    background: linear-gradient(165deg, rgba(80, 150, 255, 0.06), rgba(20, 40, 90, 0.25)) !important;
    border: 1px solid rgba(120, 200, 255, 0.18) !important;
    backdrop-filter: blur(8px);
    color: rgba(220, 235, 255, 0.92) !important;
}
.idea-card:hover {
    border-color: rgba(120, 200, 255, 0.45) !important;
    box-shadow: 0 16px 40px rgba(0, 50, 150, 0.35) !important;
    transform: translateY(-3px);
}
.idea-card h3,
.idea-card .idea-title {
    color: #ffffff !important;
}
.idea-card p,
.idea-card .idea-desc {
    color: rgba(200, 220, 255, 0.75) !important;
}
.idea-meta,
.idea-author,
.idea-date {
    color: rgba(200, 220, 255, 0.55) !important;
}
.idea-category,
.idea-status {
    background: rgba(80, 150, 255, 0.18) !important;
    border: 1px solid rgba(120, 200, 255, 0.35) !important;
    color: #cfe6ff !important;
}

/* Vote buttons */
.vote-btn,
.upvote-btn {
    background: rgba(80, 150, 255, 0.12) !important;
    border: 1px solid rgba(120, 200, 255, 0.3) !important;
    color: #cfe6ff !important;
}
.vote-btn:hover,
.vote-btn.voted,
.upvote-btn:hover,
.upvote-btn.voted {
    background: linear-gradient(135deg, #4080ff, #7050ff) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(80, 150, 255, 0.4);
}

/* Decorative orbs */
.ideas-orb {
    background: radial-gradient(circle, rgba(80, 150, 255, 0.4) 0%, transparent 70%) !important;
    filter: blur(40px);
}
.ideas-orb-2 {
    background: radial-gradient(circle, rgba(120, 80, 255, 0.35) 0%, transparent 70%) !important;
}
.ideas-orb-3 {
    background: radial-gradient(circle, rgba(0, 200, 255, 0.3) 0%, transparent 70%) !important;
}

.ideas-grid-pattern {
    background-image:
        linear-gradient(rgba(120, 200, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 200, 255, 0.05) 1px, transparent 1px) !important;
}

/* Pending status */
.pending-status-bar {
    background: rgba(80, 150, 255, 0.15) !important;
    border: 1px solid rgba(120, 200, 255, 0.4) !important;
    color: #cfe6ff !important;
}
.pending-status-dot {
    background: #6cf !important;
    box-shadow: 0 0 10px #6cf;
}
.rejected-status {
    background: rgba(255, 100, 100, 0.15) !important;
    border-color: rgba(255, 120, 120, 0.4) !important;
    color: #ffcccc !important;
}
.rejected-status .pending-status-dot {
    background: #ff6b6b !important;
    box-shadow: 0 0 10px #ff6b6b;
}

.pending-user-info {
    background: rgba(8, 18, 42, 0.5) !important;
    border: 1px solid rgba(120, 200, 255, 0.2) !important;
}
.pending-user-avatar {
    background: linear-gradient(135deg, #4080ff, #7050ff) !important;
    color: #ffffff !important;
}
.pending-user-name {
    color: #ffffff !important;
}
.pending-user-email {
    color: rgba(200, 220, 255, 0.6) !important;
}

/* Empty state */
.ideas-empty {
    color: rgba(200, 220, 255, 0.6) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ideas-intro-card::after,
    .ideas-intro-badge::before,
    .pending-status-dot {
        animation: none !important;
    }
}