/*
 * Sylogos - Custom Styles
 * Organized by component and functionality
 * Features: Top-down tree layout, dark mode support, Sylogos color scheme
 */

/* ===== CSS Variables for Light/Dark Theme ===== */
:root {
    /* Light theme colors (from pitch.html) */
    --bg-gradient-start: #fef9e7;
    --bg-gradient-end: #fdf2e9;
    --bg-solid: #ffffff;
    --bg-secondary: #f8f9fa;

    /* Primary colors */
    --primary-orange: #e67e22;
    --primary-orange-dark: #d35400;
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;

    /* Node type colors */
    --color-support: #27ae60;
    --color-support-bg: #d4edda;
    --color-objection: #e74c3c;
    --color-objection-bg: #f8d7da;
    --color-neutral: #3498db;
    --color-neutral-bg: #cce5ff;
    --color-definition: #007bff;
    --color-definition-bg: #cce5ff;
    --color-reference: #ffc107;
    --color-reference-bg: #fff3cd;

    /* UI elements */
    --border-color: #ddd;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --navbar-bg: #2c3e50;
    --footer-bg: #f8f9fa;
    --link-color: #ccc;
}

/* Dark theme */
[data-theme="dark"] {
    --bg-gradient-start: #1a1a1a;
    --bg-gradient-end: #2c2c2c;
    --bg-solid: #2c2c2c;
    --bg-secondary: #252525;

    --text-primary: #ecf0f1;
    --text-secondary: #95a5a6;

    /* Darkened node colors */
    --color-support: #27ae60;
    --color-support-bg: #1e4d2b;
    --color-objection: #e74c3c;
    --color-objection-bg: #5c1e1a;
    --color-neutral: #3498db;
    --color-neutral-bg: #1e3a5f;
    --color-definition: #3498db;
    --color-definition-bg: #1e3a5f;
    --color-reference: #f39c12;
    --color-reference-bg: #5d4a1f;

    --border-color: #444;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --navbar-bg: #1a1a1a;
    --footer-bg: #1a1a1a;
    --link-color: #555;
}

/* ===== Base Styles ===== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
}

/* ===== Navigation ===== */
.navbar {
    background-color: var(--navbar-bg) !important;
}

.navbar-brand {
    color: var(--primary-orange) !important;
    font-weight: 700;
    font-size: 1.5rem;
}

.navbar-nav .nav-link {
    color: var(--text-secondary) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--text-primary) !important;
}

/* Dark mode toggle */
.theme-toggle {
    background: none;
    border: 2px solid var(--primary-orange);
    color: var(--primary-orange);
    border-radius: 25px;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    margin-left: auto;
}

.theme-toggle:hover {
    background-color: var(--primary-orange);
    color: white;
}

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 1rem 0;
    background-color: var(--footer-bg);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ===== Argument Tree Visualization ===== */
/* Node styling - using rectangles instead of circles */
.node rect {
    stroke-width: 3px;
    rx: 8;  /* Rounded corners */
    ry: 8;
    transition: all 0.3s ease;
    filter: drop-shadow(2px 2px 4px var(--shadow-color));
}

.node text {
    font: 14px sans-serif;
    font-weight: 500;
    transition: font-size 0.3s ease;
    fill: var(--text-primary);
    pointer-events: none;
}

.node:hover rect {
    filter: drop-shadow(4px 4px 8px var(--shadow-color));
    transform: scale(1.02);
}

.node:hover text {
    font-weight: 600;
}

/* Link styling */
.link {
    fill: none;
    stroke: var(--link-color);
    stroke-width: 2px;
    transition: stroke-width 0.3s ease, stroke 0.3s ease;
}

.link:hover {
    stroke-width: 3px;
}

/* Node type colors - updated to use CSS variables */
.node-neutral rect {
    fill: var(--color-neutral-bg);
    stroke: var(--color-neutral);
}

.node-support rect {
    fill: var(--color-support-bg);
    stroke: var(--color-support);
}

.node-objection rect {
    fill: var(--color-objection-bg);
    stroke: var(--color-objection);
}

.node-definition rect {
    fill: var(--color-definition-bg);
    stroke: var(--color-definition);
}

.node-reference rect {
    fill: var(--color-reference-bg);
    stroke: var(--color-reference);
}

/* Premise grouping connectors */
.premise-group {
    stroke: var(--border-color);
    stroke-width: 2px;
    stroke-dasharray: 5,5;
    fill: none;
}

/* Tree container */
#argument-container,
#tree-container {
    background-color: var(--bg-solid);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 8px 32px var(--shadow-color);
    margin-bottom: 20px;
    overflow: auto;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== Tooltip ===== */
.tooltip {
    position: absolute;
    background-color: var(--text-primary);
    color: var(--bg-solid);
    padding: 10px 15px;
    border-radius: 8px;
    pointer-events: none;
    max-width: 300px;
    z-index: 1000;
    font-size: 0.9rem;
    box-shadow: 0 4px 16px var(--shadow-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== Cards and Forms ===== */
/* Card styling */
.card {
    background-color: var(--bg-solid);
    box-shadow: 0 8px 32px var(--shadow-color);
    margin-bottom: 20px;
    border: none;
    border-radius: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 48px var(--shadow-color);
}

.card-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card-header h5,
.card-header .card-title {
    color: var(--text-primary) !important;
    margin-bottom: 0;
}

.card-body {
    color: var(--text-primary);
}

.card-title {
    color: var(--text-primary);
}

/* Form styling */
.node-form {
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--bg-secondary);
    margin-bottom: 15px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.form-control {
    background-color: var(--bg-solid);
    color: var(--text-primary);
    border-color: var(--border-color);
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-orange);
    box-shadow: 0 0 0 0.2rem rgba(230, 126, 34, 0.25);
    background-color: var(--bg-solid);
    color: var(--text-primary);
}

.form-label {
    color: var(--text-primary);
}

.form-text {
    color: var(--text-secondary);
}

/* ===== Buttons ===== */
.btn-primary {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--primary-orange-dark);
    border-color: var(--primary-orange-dark);
    color: white;
    transform: translateY(-2px);
}

.btn-success {
    background-color: var(--color-support);
    border-color: var(--color-support);
    color: white;
}

.btn-success:hover {
    background-color: #229954;
    border-color: #229954;
    color: white;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-solid);
}

.btn-outline-primary {
    color: var(--primary-orange);
    border-color: var(--primary-orange);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
}

.btn-outline-secondary {
    color: var(--text-primary);
    border-color: var(--border-color);
    background-color: transparent;
}

.btn-outline-secondary:hover {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.list-group-item {
    background-color: var(--bg-solid);
    border-color: var(--border-color);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.list-group-item:hover {
    background-color: var(--bg-secondary);
}

.list-group-item h5 {
    color: var(--text-primary);
}

.list-group-item small {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-secondary) !important;
}

.alert {
    border-radius: 10px;
}

.alert-info {
    background-color: var(--color-neutral-bg);
    border-color: var(--color-neutral);
    color: var(--text-primary);
}

.alert-info .alert-link {
    color: var(--primary-orange);
}

/* Main content area */
main {
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

/* Ensure Bootstrap's default card styles don't override */
.card .card-header h5,
.card .card-header .card-title,
.card-title.mb-0 {
    color: var(--text-primary) !important;
}

/* Override Bootstrap utility classes for dark mode */
.bg-light {
    background-color: var(--bg-secondary) !important;
}

/* Input group addon */
.input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ===== YAML Editor ===== */
#yaml-editor-textarea {
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    min-height: 300px;
    resize: vertical;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
    .d-flex.justify-content-between {
        flex-direction: column;
    }
    
    .d-flex.justify-content-between .btn {
        margin-bottom: 10px;
        width: 100%;
    }
    
    .card-title {
        font-size: 1.2rem;
    }
    
    #yaml-editor-textarea {
        font-size: 12px;
    }
}