/* Free.ai — Main Stylesheet */

:root {
    --primary: #16A34A;
    --primary-hover: #15803D;
    --primary-light: #4ADE80;
    --primary-bg: #F0FDF4;
    --primary-bg-hover: #DCFCE7;
    --text-dark: #111827;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --bg-body: #ffffff;
    --bg-card: #ffffff;
    --bg-surface: #f9fafb;
    --bg-nav: #ffffff;
    --bg-footer: #111827;
    --bg-input: #ffffff;
    --shadow-color: rgba(0,0,0,.05);
    --shadow-hover: rgba(0,0,0,.1);
    --code-bg: #1e1e2e;
}

html.dark {
    --primary: #16A34A;
    --primary-hover: #1ebe56;
    --primary-light: #4ADE80;
    --primary-bg: #1a1a1a;
    --primary-bg-hover: #222222;
    --text-dark: #f0f0f0;
    --text-muted: #b0b0b0;
    --border: #333333;
    --bg-body: #0a0a0a;
    --bg-card: #141414;
    --bg-surface: #111111;
    --bg-nav: #0e0e0e;
    --bg-footer: #080808;
    --bg-input: #1a1a1a;
    --shadow-color: rgba(0,0,0,.4);
    --shadow-hover: rgba(0,0,0,.5);
    --code-bg: #0e0e0e;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1; }

.navbar { box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1) !important; }

.btn-primary, .btn-primary:active, .btn-primary:focus-visible {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}
.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
.nav-link { color: #374151; }
.nav-link:hover { color: var(--primary); }

.progress-bar { background-color: var(--primary); transition: width .3s ease; }
.progress-bar.bg-warning { background-color: #f59e0b !important; }
.progress-bar.bg-danger { background-color: #ef4444 !important; }
.progress-bar.bg-primary { background-color: var(--primary) !important; }

#chat-messages .user-msg { background: var(--primary); color: white; border-radius: 12px 12px 0 12px; }
#chat-messages .ai-msg { background: #f9fafb; border-radius: 12px 12px 12px 0; }
.chat-model-label { display: inline-block; font-size: .65rem; font-weight: 600; color: #4f46e5; background: #eef2ff; padding: 1px 8px; border-radius: 10px; margin-bottom: 6px; letter-spacing: .02em; }

#drop-zone { transition: all .2s ease; }
#drop-zone.dragover { border-color: var(--primary) !important; background: var(--primary-bg); }

.accordion-button:not(.collapsed) { background-color: var(--primary-bg); color: var(--primary); }
.accordion-button:focus { box-shadow: 0 0 0 .25rem rgba(220,38,38,.2); }

footer.bg-dark { background-color: #111827 !important; }
footer a { color: #d1d5db !important; }
footer a:hover { color: #fff !important; }
.star-btn:hover { transform: scale(1.2); }
.suggestion-btn:hover { background-color: var(--primary); color: white; border-color: var(--primary); }

.chat-code {
    background: #1e1e2e; color: #cdd6f4; padding: 1rem;
    border-radius: 8px; overflow-x: auto;
    font-family: 'SF Mono', 'Fira Code', monospace; font-size: .875rem;
}

.loading-dots::after { content: ''; animation: dots 1.5s steps(4) infinite; }
@keyframes dots { 0%,20%{content:''} 40%{content:'.'} 60%{content:'..'} 80%,100%{content:'...'} }


.modal-backdrop { backdrop-filter: blur(4px); }

.tool-link:hover { border-color: var(--primary) !important; background: var(--primary-bg); color: var(--primary); }
.cat-card:hover { border-color: var(--primary); }
.cat-card i { color: var(--primary); }

.bg-primary.bg-opacity-10 { background-color: var(--primary-bg) !important; }

@media (max-width: 768px) {
    .display-4 { font-size: 2rem; }
    #chat-messages { height: 250px !important; }
}

/* Dark Mode Toggle Button */
#dark-mode-toggle {
    background: none !important; border: none !important; outline: none !important; box-shadow: none !important;
    cursor: pointer; font-size: 1.1rem; padding: 4px 8px; border-radius: 6px;
    color: var(--text-muted); transition: color .2s;
}
#dark-mode-toggle:hover { color: var(--primary); background: var(--primary-bg); }

/* Dark Mode Overrides */
html.dark body { background-color: var(--bg-body); color: var(--text-dark); }
html.dark .navbar { background-color: var(--bg-nav) !important; border-color: var(--border) !important; box-shadow: 0 1px 3px var(--shadow-color); }
html.dark .navbar .nav-link { color: var(--text-muted); }
html.dark .navbar .nav-link:hover { color: var(--primary); }
html.dark .navbar-brand span:last-child { color: var(--text-dark) !important; }
html.dark .navbar-toggler-icon { filter: invert(1); }
html.dark .dropdown-menu { background-color: var(--bg-card); border-color: var(--border); }
html.dark .dropdown-item { color: var(--text-dark); }
html.dark .dropdown-item:hover { background-color: var(--bg-surface); color: var(--primary); }
html.dark .card { background-color: var(--bg-card) !important; border-color: var(--border) !important; }
html.dark .tool-card:hover { box-shadow: 0 4px 12px var(--shadow-hover) !important; }
html.dark .bg-white { background-color: var(--bg-card) !important; }
html.dark .bg-light { background-color: var(--bg-surface) !important; }
html.dark .border-bottom { border-color: var(--border) !important; }
html.dark .border-top { border-color: var(--border) !important; }
html.dark .border { border-color: var(--border) !important; }
html.dark .text-dark { color: var(--text-dark) !important; }
html.dark .text-muted { color: var(--text-muted) !important; }
html.dark .form-control, html.dark .form-select { background-color: var(--bg-input); color: var(--text-dark); border-color: var(--border); }
html.dark .form-control:focus, html.dark .form-select:focus { background-color: var(--bg-input); color: var(--text-dark); border-color: var(--primary); }
html.dark .form-control::placeholder { color: var(--text-muted); }
html.dark .modal-content { background-color: var(--bg-card); color: var(--text-dark); }
html.dark .btn-close { filter: invert(1); }
html.dark .table { color: var(--text-dark); }
html.dark .table th, html.dark .table td { border-color: var(--border); }
html.dark .nav-tabs .nav-link { color: var(--text-muted); }
html.dark .nav-tabs .nav-link.active { background-color: var(--bg-card); color: var(--primary); border-color: var(--border) var(--border) var(--bg-card); }
html.dark .nav-tabs { border-color: var(--border); }
html.dark #chat-messages .ai-msg { background: var(--bg-surface); color: var(--text-dark); }
html.dark .chat-model-label { color: #a5b4fc; background: #1e1b4b; }
html.dark .chat-code { background: var(--code-bg); }
html.dark .accordion-button { background-color: var(--bg-card); color: var(--text-dark); }
html.dark .accordion-button:not(.collapsed) { background-color: var(--primary-bg); color: var(--primary); }
html.dark .accordion-body { background-color: var(--bg-card); color: var(--text-dark); }
html.dark footer.bg-dark { background-color: var(--bg-footer) !important; }
html.dark .shadow-sm { box-shadow: 0 1px 3px var(--shadow-color) !important; }
html.dark .tool-link { background-color: var(--bg-card); border-color: var(--border) !important; color: var(--text-dark); }
html.dark .tool-link:hover { border-color: var(--primary) !important; background: var(--primary-bg); }
html.dark .cat-card { background-color: var(--bg-card); }
html.dark .progress { background-color: var(--border); }
html.dark .breadcrumb { color: var(--text-muted); }
html.dark .breadcrumb a { color: var(--text-muted); }
/* Override ALL inline backgrounds in dark mode */
html.dark [style*="background:#fafbff"],
html.dark [style*="background:#fff"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background:#f0f2ff"],
html.dark [style*="background:#F0FDF4"],
html.dark [style*="background:#f3f4f6"],
html.dark [style*="background:#f8f9fa"],
html.dark [style*="background:#f9fafb"],
html.dark [style*="background:white"],
html.dark [style*="background: #fff"],
html.dark [style*="background: #fafbff"],
html.dark [style*="background:#e8f5e9"] { background-color: var(--bg-surface) !important; }

html.dark [style*="background:#DCFCE7"],
html.dark [style*="background:#f0f2ff"] { background-color: var(--bg-card) !important; }

html.dark [style*="border:1px solid #f0f0f0"],
html.dark [style*="border:1px solid #eee"],
html.dark [style*="border:1px solid #DCFCE7"],
html.dark [style*="border-bottom:1px solid"] { border-color: var(--border) !important; }

html.dark [style*="color:#374151"],
html.dark [style*="color:#555"],
html.dark [style*="color:#111827"] { color: var(--text-dark) !important; }

html.dark section { background-color: var(--bg-body) !important; }
html.dark section[style] { background-color: var(--bg-surface) !important; }
html.dark .container .card { background-color: var(--bg-card) !important; }

/* Fix tool category cards on homepage */
html.dark .card[style*="border-radius"] { background-color: var(--bg-card) !important; color: var(--text-dark) !important; }
html.dark .card[style*="border-radius"]:hover { border-color: var(--primary) !important; }

/* Fix the hero/main area */
html.dark main { background-color: var(--bg-body) !important; }

/* Fix popover */
html.dark .popover { background-color: var(--bg-card); border-color: var(--border); }
html.dark .popover-body { color: var(--text-dark); }

/* Fix badge */
html.dark .badge.bg-success { background-color: var(--primary) !important; }
html.dark .badge.bg-primary { background-color: var(--primary) !important; }

html.dark .btn-outline-secondary { color: var(--text-muted); border-color: var(--border); }
html.dark .btn-outline-secondary:hover { background-color: var(--bg-surface); color: var(--text-dark); }
html.dark .input-group .form-control { border-color: var(--border); }

/* Fix ALL hardcoded dark text colors in dark mode */
html.dark [style*="color:#374151"],
html.dark [style*="color:#555"],
html.dark [style*="color:#111827"],
html.dark [style*="color:#222"],
html.dark [style*="color:#1a1a1a"],
html.dark [style*="color: #374151"],
html.dark [style*="color: #222"] { color: var(--text-dark) !important; }

/* Fix suggestion/pill buttons */
html.dark .btn-outline-secondary,
html.dark .btn-light { color: var(--text-dark) !important; border-color: var(--border) !important; background: var(--bg-card) !important; }

/* Fix tab links */
html.dark .nav-link { color: var(--text-muted) !important; }
html.dark .nav-link.active { color: var(--primary) !important; }

/* Fix category/tool cards text */
html.dark .card .fw-bold,
html.dark .card strong,
html.dark .card h2,
html.dark .card h3,
html.dark .card h5,
html.dark .card h6 { color: var(--text-dark) !important; }
html.dark .card .text-muted,
html.dark .card small { color: var(--text-muted) !important; }

/* Fix homepage hero text */
html.dark .home-logo { color: var(--text-dark) !important; }
html.dark .home-logo span { color: var(--primary) !important; }

/* Fix benefits bar checkmarks */
html.dark .text-success { color: #4ADE80 !important; }

/* Fix input placeholder in dark mode */
html.dark input::placeholder,
html.dark textarea::placeholder { color: #777 !important; }

/* Fix all remaining inline color:#xxx that's dark */
html.dark p, html.dark span, html.dark div, html.dark li, html.dark td, html.dark th,
html.dark label, html.dark small, html.dark a:not(.btn) {
    color: inherit;
}

/* Fix list-group, alerts */
html.dark .list-group-item { background-color: var(--bg-card); color: var(--text-dark); border-color: var(--border); }
html.dark .alert { background-color: var(--bg-card); color: var(--text-dark); border-color: var(--border); }

/* Fix the star rating section */
html.dark [style*="background:#fafbff"] { background-color: var(--bg-surface) !important; }

/* Border dashed zones */
html.dark [style*="border-color:#dee2e6"] { border-color: var(--border) !important; }
html.dark .border-dashed { border-color: var(--border) !important; }

/* Homepage submit button */
.btn-send {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}
.btn-send:hover { background: var(--primary-hover); }

/* Homepage input wrapper needs position relative */
#home-form { position: relative; }