/* Agentosaurus Main Stylesheet - Extracted from templates */

/* CSS Variables and Base Styles from base.html */
:root {
    /* Forest Gradient System */
    --forest-50: #f0fdf4;
    --forest-100: #dcfce7;
    --forest-500: #22c55e;
    --forest-600: #16a34a;
    --forest-900: #14532d;
    
    /* Ocean Trust Palette */
    --ocean-50: #eff6ff;
    --ocean-500: #3b82f6;
    --ocean-600: #2563eb;
    
    /* Earth Warmth */
    --amber-50: #fffbeb;
    --amber-500: #f59e0b;
    
    /* Sophisticated Grays */
    --stone-50: #fafaf9;
    --stone-100: #f5f5f4;
    --stone-600: #57534e;
    --stone-900: #1c1917;
    
    /* Animation System */
    --ease-organic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration-normal: 300ms;
    --duration-fast: 150ms;
}

* {
    font-family: 'Inter', system-ui, sans-serif;
}

.glassmorphism {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.95), 
        rgba(240, 253, 244, 0.8));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(220, 252, 231, 0.3);
}

.gradient-forest {
    background: linear-gradient(135deg, 
        var(--forest-500) 0%, 
        var(--forest-600) 50%, 
        var(--ocean-600) 100%);
}

.card-hover {
    transition: all var(--duration-normal) var(--ease-organic);
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(34, 197, 94, 0.15);
}

.text-gradient {
    background: linear-gradient(135deg, var(--forest-600), var(--ocean-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-primary {
    background: linear-gradient(135deg, var(--forest-500), var(--forest-600));
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all var(--duration-fast) var(--ease-organic);
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--forest-600), var(--ocean-600));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.8);
    color: var(--stone-600);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--stone-100);
    font-weight: 500;
    transition: all var(--duration-fast) var(--ease-organic);
    cursor: pointer;
}

.btn-secondary:hover {
    background: white;
    border-color: var(--forest-500);
    color: var(--forest-600);
    transform: translateY(-1px);
}

/* Dashboard Cards from organization_detail.html */
.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

/* Specific glassmorphism for containers only */
.container-glassmorphism {
    background: linear-gradient(135deg, rgb(240 253 244) 0%, rgb(240 249 255) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(220, 252, 231, 0.3);
}

/* Dashboard Layout Styles from dashboard_unified.html */
.fixed-height-dashboard {
    display: flex;
    flex-direction: column;
    height: 600px;
    gap: 1.5rem;
}

/* Top Row - Impact Metrics Full Width */
.metrics-row {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0.75rem;
    border: 1px solid rgb(245 245 244);
    padding: 1.5rem;
    height: 40%;
    display: flex;
    flex-direction: column;
}

.metrics-header {
    margin-bottom: 1rem;
}

.metrics-carousel-container {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.metrics-carousel {
    display: flex;
    gap: 1rem;
    height: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.metrics-carousel::-webkit-scrollbar {
    display: none;
}

.metric-card-carousel {
    background: linear-gradient(135deg, rgb(254 252 232) 0%, rgb(254 243 199) 100%);
    border: 1px solid rgb(251 191 36);
    border-radius: 0.5rem;
    padding: 1rem;
    min-width: 220px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Carousel Navigation */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgb(229 231 235);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.carousel-nav:hover {
    background: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.carousel-nav.left {
    left: 0.5rem;
}

.carousel-nav.right {
    right: 0.5rem;
}

/* Bottom Row - Three Sections */
.bottom-sections-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    height: 55%;
}

.bottom-section {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0.75rem;
    border: 1px solid rgb(245 245 244);
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.section-header {
    margin-bottom: 1rem;
    flex-shrink: 0;
}

/* Environmental + SDG Section */
.environmental-sdg-section {
    background: linear-gradient(135deg, rgb(240 253 244) 0%, rgb(240 249 255) 100%);
    border-color: rgb(187 247 208);
}

.sdg-compact-section {
    flex: 1;
}

.sdg-compact-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.sdg-compact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgb(186 230 253);
    border-radius: 0.375rem;
}

.sdg-number-small {
    width: 1.5rem;
    height: 1.5rem;
    background: linear-gradient(135deg, rgb(14 116 144) 0%, rgb(8 145 178) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: bold;
    flex-shrink: 0;
}

.sdg-content-compact {
    min-width: 0;
    flex: 1;
}

.sdg-title-small {
    font-weight: 600;
    color: rgb(28 25 23);
    font-size: 0.75rem;
    line-height: 1.25;
    margin-bottom: 0.125rem;
}

.sdg-description-small {
    color: rgb(120 113 108);
    font-size: 0.625rem;
    line-height: 1.4;
}

/* Practices Section */
.practices-compact-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    overflow-y: auto;
}

.practice-compact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgb(240 253 244);
    border: 1px solid rgb(187 247 208);
    border-radius: 0.375rem;
}

.practice-bullet-small {
    width: 0.375rem;
    height: 0.375rem;
    background: rgb(34 197 94);
    border-radius: 50%;
    margin-top: 0.375rem;
    flex-shrink: 0;
}

.practice-text-small {
    color: rgb(68 64 60);
    font-size: 0.75rem;
    line-height: 1.4;
    flex: 1;
}

/* Initiatives Section */
.initiatives-compact-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    overflow-y: auto;
}

.initiative-compact-item {
    padding: 0.5rem;
    background: rgb(240 249 255);
    border: 1px solid rgb(186 230 253);
    border-radius: 0.375rem;
}

.initiative-text-small {
    color: rgb(68 64 60);
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fixed-height-dashboard {
        height: auto;
    }
    
    .metrics-row {
        height: auto;
        min-height: 200px;
    }
    
    .bottom-sections-row {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .bottom-section {
        height: 250px;
    }
    
    .carousel-nav {
        display: none;
    }
}

@media (max-width: 1024px) {
    .bottom-sections-row {
        grid-template-columns: 1fr;
    }
}

/* Slideshow Styles from organization_detail.html */
/* Container sizing for embedded reveal.js */
.activities-reveal {
    height: 800px ; /* Reduced from 500px for better space usage */
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
}

.activities-reveal .reveal {
    height: 100% !important;
}

.activities-reveal .slides {
    height: 100% !important;
}

/* Slide content styling with consistent typography */
.activities-reveal .slides .slide-content {
    text-align: left;
    padding: 24px 32px; /* More horizontal padding, slightly more vertical */
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to top */
}

/* Slideshow Typography Hierarchy - Balanced and Consistent */
.activities-reveal .slides h1 {
    font-size: 1.5rem; /* text-2xl - smaller than before for better balance */
    font-weight: 700; /* font-bold */
    color: var(--forest-600);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    text-align: center;
}

.activities-reveal .slides h2 {
    font-size: 4.125rem; /* text-lg - slightly smaller for better hierarchy */
    font-weight: 600; /* font-semibold */  
    color: var(--forest-600);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.activities-reveal .slides h3 {
    font-size: 1rem; /* text-base */
    font-weight: 600;
    color: var(--stone-900);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.activities-reveal .slides p {
    font-size: 1.5rem; /* text-base - larger for better readability */
    line-height: 1.7;
    color: var(--stone-700);
    margin-bottom: 1rem;
}

.activities-reveal .slides ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.activities-reveal .slides li {
    font-size: 2rem; /* text-base - larger for better readability */
    margin: 0.5rem 0;
    line-height: 1.7;
    color: var(--stone-700);
}

.activities-reveal .slides strong {
    color: var(--stone-900);
    font-weight: 600;
}

.slideshow-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Ensure reveal.js doesn't interfere with page scrolling */
.activities-reveal .reveal .slides section {
    position: relative !important;
    transform: none !important;
    top: 0 !important; /* Override reveal.js inline top positioning */
    left: 0 !important; /* Ensure no horizontal offset */
}

/* Responsive slideshow height adjustments */
@media (max-width: 768px) {
    .activities-reveal {
        height: 550px !important; /* Smaller on mobile */
    }
    
    .activities-reveal .slides .slide-content {
        padding: 20px 24px; /* Less padding on mobile */
    }
}

@media (min-width: 1024px) {
    .activities-reveal {
        height: 550px !important; /* Slightly larger on desktop */
    }
}

/* Landing Page Styles from landing.html */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Note: card-hover is already defined above, but landing.html had slightly different values */
/* We'll keep the base.html version for consistency across the site */

/* Organization Detail Page Typography Consistency */
.org-header h1 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    line-height: 1.2;
    color: var(--stone-900);
}

/* Dashboard section headers consistency */
.dashboard-row h3,
.section-header h3,
.metrics-header h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: var(--stone-900);
    margin-bottom: 0.75rem;
}

/* Impact & Sustainability Analysis main title */
.org-impact-dashboard h2 {
    font-size: 1.875rem; /* text-3xl - same as org title */
    font-weight: 700; /* font-bold */
    color: var(--stone-900);
    margin-bottom: 0.5rem;
}

.org-impact-dashboard > div > p {
    font-size: 1rem; /* text-base instead of default smaller */
    color: var(--stone-600);
}

/* Pixel 7 Red Background Fix - Minimal Targeted Solution */
@media screen and (min-width: 410px) and (max-width: 420px) {
    /* Force solid background fallback for Pixel 7 viewport only */
    body {
        background: #fafaf9 !important;
        background-image: none !important;
    }
    
    /* Debug indicator to confirm fix is active - remove after testing */
    body::before {
        content: "🔧 Pixel 7 Fix Active";
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(34, 197, 94, 0.9);
        color: white;
        padding: 4px 8px;
        font-size: 11px;
        z-index: 9999;
        font-family: monospace;
    }
}

/* Dashboard Content Typography - Make Everything Larger and Consistent */
.metric-card-carousel h4 {
    font-size: 1rem !important; /* text-base instead of text-sm */
    font-weight: 600;
    color: var(--stone-900);
    margin-bottom: 0.5rem;
}

.metric-card-carousel .text-sm {
    font-size: 0.875rem !important; /* Slightly larger than default text-sm */
}

/* SDG and other compact sections - make text readable */
.sdg-title-small {
    font-size: 0.875rem !important; /* text-sm but ensure it's not smaller */
}

.sdg-description-small,
.practice-text-small,
.initiative-text-small {
    font-size: 0.875rem !important; /* text-sm for consistency */
    line-height: 1.6;
}

/* Body text consistency across all sections */
.org-contact-info,
.dashboard-content,
.section-content {
    font-size: 1rem; /* text-base instead of text-sm */
    line-height: 1.6;
    color: var(--stone-600);
}

/* Override any dashboard text that's too small */
.org-impact-dashboard .text-xs {
    font-size: 0.875rem !important; /* Convert text-xs to text-sm */
}

.org-impact-dashboard p,
.org-impact-dashboard li {
    font-size: 1rem;
    line-height: 1.6;
}

/* Badge and tag consistency */
.eco-score,
.category-tag,
.sustainability-tag {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
}

/* Unified color system for gray/stone text */
.text-gray-600 {
    color: var(--stone-600) !important;
}

.text-gray-700 {
    color: var(--stone-700) !important;
}

/* Section spacing consistency */
.dashboard-section {
    margin-bottom: 2rem;
}

.dashboard-section:last-child {
    margin-bottom: 0;
}