/* Forge-Inspired Color Scheme for CCG */

/* Override Tailwind colors with forge theme */
.bg-blue-600 {
    background-color: #C2410C !important; /* Primary orange */
}

.bg-blue-800 {
    background-color: #92400E !important; /* Dark orange */
}

.bg-blue-500 {
    background-color: #C2410C !important; /* Primary orange */
}

.bg-blue-700 {
    background-color: #92400E !important; /* Dark orange */
}

.bg-blue-400 {
    background-color: #C2410C !important; /* Primary orange */
}

.text-blue-600 {
    color: #C2410C !important;
}

.text-blue-200 {
    color: #FED7AA !important; /* Light orange tint */
}

.text-blue-800 {
    color: #92400E !important;
}

.text-blue-500 {
    color: #C2410C !important;
}

/* Team member color definitions */
.text-green-600 {
    color: #16a34a !important; /* Haoran's green */
}

.text-green-700 {
    color: #15803d !important;
}

.text-purple-600 {
    color: #9333ea !important; /* Barry's purple */
}

.text-purple-700 {
    color: #7c3aed !important;
}

.text-orange-600 {
    color: #ea580c !important; /* Ruijie's orange */
}

.text-orange-700 {
    color: #c2410c !important;
}

.border-blue-500 {
    border-color: #C2410C !important;
}

.border-blue-400 {
    border-color: #C2410C !important;
}

/* Steel gray accents for contrast */
.bg-gray-800 {
    background-color: #334155 !important; /* Steel gray */
}

.bg-gray-700 {
    background-color: #475569 !important;
}

.bg-gray-600 {
    background-color: #64748B !important;
}

/* Forge-specific gradient */
.bg-gradient-to-r.from-blue-600.to-blue-800 {
    background: linear-gradient(to right, #C2410C, #92400E) !important;
}

/* Hover effects with forge colors */
.hover\:bg-blue-700:hover {
    background-color: #92400E !important;
}

.hover\:bg-blue-400:hover {
    background-color: #92400E !important;
}

.hover\:text-blue-800:hover {
    color: #92400E !important;
}

/* Make login button visible on navbar */
#login-btn {
    background-color: #92400E !important; /* Dark orange instead of primary */
}

#login-btn:hover {
    background-color: #78350F !important; /* Even darker on hover */
}

/* Additional forge-inspired elements */
.forge-accent {
    background: linear-gradient(45deg, #EA580C, #F97316);
}

.forge-text {
    background: linear-gradient(45deg, #C2410C, #EA580C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mobile-friendly touch targets and spacing */
@media (max-width: 768px) {
    /* Ensure minimum touch target size of 44px */
    button,
    .btn,
    a[class*="px-"],
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }

    /* Improve form inputs for mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Better spacing for mobile interactions */
    .space-x-4 > * + * {
        margin-left: 8px;
    }

    .space-y-2 > * + * {
        margin-top: 8px;
    }

    /* Navigation improvements */
    #auth-section {
        flex-wrap: wrap;
        gap: 8px;
    }

    #auth-section button {
        font-size: 14px;
        padding: 8px 12px;
    }
}
/* ============================================================
 * Wiki / entity links — used by knowledge pages, project
 * narrative/overview previews, planner task notes, etc.
 * Centralized so any page rendering [[type:name]] tokens gets
 * the same styling without per-page inline CSS.
 * ============================================================ */
.wiki-link { color: #4f46e5; text-decoration: none; border-bottom: 1px dashed #4f46e5; }
.wiki-link:hover { border-bottom-style: solid; }
.wiki-link.broken { color: #dc2626; border-bottom-color: #dc2626; border-bottom-style: dotted; }

.entity-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.15s ease;
}
.entity-link .entity-icon { width: 0.9em; height: 0.9em; flex-shrink: 0; }

.entity-project { background-color: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.entity-project:hover { background-color: #bfdbfe; border-color: #60a5fa; }

.entity-area { background-color: #dcfce7; color: #166534; border: 1px solid #86efac; }
.entity-area:hover { background-color: #bbf7d0; border-color: #4ade80; }

.entity-person { background-color: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.entity-person:hover { background-color: #fde68a; border-color: #fbbf24; }

.entity-cite {
    background-color: #ede9fe;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
}
.entity-cite:hover { background-color: #ddd6fe; border-color: #a78bfa; }

/* Planner task-notes preview pane styling — mild prose look. */
.planner-notes-preview { line-height: 1.45; }
.planner-notes-preview p { margin: 0.25rem 0; }
.planner-notes-preview p:first-child { margin-top: 0; }
.planner-notes-preview p:last-child { margin-bottom: 0; }
.planner-notes-preview a { color: #1d4ed8; text-decoration: underline; }

/* Autocomplete dropdown — shared by knowledge editor + CMMarkdownEditor.
   Positioned fixed by knowledge-autocomplete.ts via cursorCoords('page'). */
.autocomplete-dropdown {
    position: fixed;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    max-height: 240px;
    overflow-y: auto;
    z-index: 9999;
    min-width: 220px;
    max-width: 480px;
}
.autocomplete-dropdown.hidden { display: none; }
.autocomplete-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.selected { background-color: #eef2ff; }
.autocomplete-item .slug { font-size: 0.75rem; color: #6b7280; }

/* ------------------------------------------------------------------------ */
/* Arbitrary-value utility fallbacks                                        */
/*                                                                          */
/* The site loads the STATIC Tailwind 2.2.19 CDN build, which does NOT      */
/* include JIT arbitrary-value classes like `max-h-[90vh]`. Many components */
/* (especially modals) use them, so without these definitions the class    */
/* produces no CSS: modals get no height cap and overflow the viewport with */
/* no scrollbar. This file loads after Tailwind, so defining them here      */
/* makes them apply. Keep in sync with arbitrary classes used in src/.      */
/* ------------------------------------------------------------------------ */

/* Modal sizing (the reported problem: tall modals must cap + scroll) */
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[85vh\] { max-height: 85vh; }
.max-h-\[70vh\] { max-height: 70vh; }
.h-\[min\(90vh\,720px\)\] { height: min(90vh, 720px); }
.w-\[min\(96vw\,720px\)\] { width: min(96vw, 720px); }
.w-\[min\(96vw\,1200px\)\] { width: min(96vw, 1200px); }

/* Other arbitrary utilities used across the app */
.grid-cols-\[3fr_2fr\] { grid-template-columns: 3fr 2fr; }
.max-w-\[10rem\] { max-width: 10rem; }
.min-h-\[24px\] { min-height: 24px; }
.min-h-\[64px\] { min-height: 64px; }
.min-w-\[100px\] { min-width: 100px; }
.min-w-\[10rem\] { min-width: 10rem; }
.min-w-\[120px\] { min-width: 120px; }
.min-w-\[140px\] { min-width: 140px; }
.min-w-\[180px\] { min-width: 180px; }
.z-\[9999\] { z-index: 9999; }