/* IETIS Workshop Assistant — Stylesheet
   Understated, professional, readable. Inspired by technical documentation. */

/* ── Reset & base ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --color-bg:          #f8f7f4;
    --color-surface:     #ffffff;
    --color-border:      #ddd9d0;
    --color-text:        #1a1a1a;
    --color-text-muted:  #6b6560;
    --color-accent:      #1c3a5e;   /* deep Bentley navy */
    --color-accent-light:#e8eef5;
    --color-success:     #1a5c2e;
    --color-error:       #8b1a1a;
    --color-error-bg:    #fdf0f0;
    --color-warning-bg:  #fffbec;
    --color-mark:        #fff3a3;
    --font-sans:         'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:         'Consolas', 'Monaco', monospace;
    --radius:            6px;
    --shadow:            0 1px 4px rgba(0,0,0,0.08);
    --shadow-md:         0 2px 12px rgba(0,0,0,0.10);
}

html { font-size: 16px; }

body {
    font-family:      var(--font-sans);
    background-color: var(--color-bg);
    color:            var(--color-text);
    line-height:      1.6;
    min-height:       100vh;
    display:          flex;
    flex-direction:   column;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header {
    background:   var(--color-accent);
    color:        #fff;
    padding:      0 1.5rem;
    height:       56px;
    flex-shrink:  0;
}

.header-inner {
    max-width:      1100px;
    margin:         0 auto;
    height:         100%;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
}

.header-title {
    font-size:      1rem;
    font-weight:    600;
    letter-spacing: 0.02em;
}

.header-nav {
    display:     flex;
    align-items: center;
    gap:         1rem;
}

.vehicle-badge {
    font-size:   0.85rem;
    opacity:     0.85;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
    margin-top:  auto;
    padding:     1rem 1.5rem;
    text-align:  center;
    font-size:   0.8rem;
    color:       var(--color-text-muted);
    border-top:  1px solid var(--color-border);
}

/* ── Main content ─────────────────────────────────────────────────────── */

.main-content {
    flex:       1;
    max-width:  1100px;
    margin:     0 auto;
    width:      100%;
    padding:    2rem 1.5rem;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         0.5rem 1.25rem;
    border-radius:   var(--radius);
    font-size:       0.9rem;
    font-weight:     500;
    cursor:          pointer;
    border:          none;
    text-decoration: none;
    transition:      background 0.15s, opacity 0.15s;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--color-accent);
    color:      #fff;
}
.btn-primary:hover:not(:disabled) { background: #152d4a; }

.btn-outline {
    background: transparent;
    color:      #fff;
    border:     1px solid rgba(255,255,255,0.5);
}
.btn-outline:hover:not(:disabled) { background: rgba(255,255,255,0.1); }

.btn-full { width: 100%; }

/* ── Alerts ───────────────────────────────────────────────────────────── */

.alert {
    padding:       0.75rem 1rem;
    border-radius: var(--radius);
    font-size:     0.9rem;
    margin-bottom: 1rem;
}

.alert-error {
    background: var(--color-error-bg);
    color:      var(--color-error);
    border:     1px solid #f0c0c0;
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display:       block;
    font-size:     0.875rem;
    font-weight:   500;
    margin-bottom: 0.4rem;
    color:         var(--color-text);
}

.form-group input,
.form-group textarea {
    width:         100%;
    padding:       0.6rem 0.75rem;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     0.95rem;
    font-family:   var(--font-sans);
    background:    var(--color-surface);
    color:         var(--color-text);
    transition:    border-color 0.15s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline:      none;
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px var(--color-accent-light);
}

.form-hint {
    display:    block;
    font-size:  0.8rem;
    color:      var(--color-text-muted);
    margin-top: 0.3rem;
}

/* ── Login page ───────────────────────────────────────────────────────── */

.login-wrapper {
    display:         flex;
    justify-content: center;
    align-items:     flex-start;
    padding-top:     3rem;
}

.login-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow:    var(--shadow-md);
    padding:       2rem;
    width:         100%;
    max-width:     420px;
}

.login-heading {
    font-size:     1.4rem;
    font-weight:   600;
    margin-bottom: 0.4rem;
    color:         var(--color-accent);
}

.login-subheading {
    font-size:     0.9rem;
    color:         var(--color-text-muted);
    margin-bottom: 1.5rem;
}

/* ── Query page ───────────────────────────────────────────────────────── */

.query-layout {
    display:        flex;
    flex-direction: column;
    gap:            2rem;
}

.query-panel {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       1.5rem;
    box-shadow:    var(--shadow);
}

.panel-heading {
    font-size:     1.15rem;
    font-weight:   600;
    margin-bottom: 0.3rem;
    color:         var(--color-accent);
}

.panel-sub {
    font-size:     0.875rem;
    color:         var(--color-text-muted);
    margin-bottom: 1.25rem;
}

.stats-bar {
    margin-top:  1rem;
    padding-top: 0.75rem;
    border-top:  1px solid var(--color-border);
    font-size:   0.8rem;
    color:       var(--color-text-muted);
}

.stat-sep { margin: 0 0.4rem; }

/* ── Result panel ─────────────────────────────────────────────────────── */

.result-panel {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       1.5rem;
    box-shadow:    var(--shadow);
}

.token-info {
    font-size:     0.75rem;
    color:         var(--color-text-muted);
    margin-bottom: 1rem;
    text-align:    right;
}

/* Answer body — render Claude's markdown-like output */
.answer-body {
    line-height: 1.7;
    font-size:   0.95rem;
}

.answer-body h2 {
    font-size:     1.1rem;
    font-weight:   600;
    color:         var(--color-accent);
    margin:        1.25rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.answer-body h3 {
    font-size:   1rem;
    font-weight: 600;
    margin:      1rem 0 0.4rem;
}

.answer-body p {
    margin-bottom: 0.75rem;
}

.answer-body li {
    margin:      0.2rem 0 0.2rem 1.5rem;
    list-style:  disc;
}

.answer-body strong {
    font-weight: 600;
}

.answer-body code {
    font-family:   var(--font-mono);
    font-size:     0.85em;
    background:    #f0ede8;
    padding:       0.1em 0.35em;
    border-radius: 3px;
}

/* Warning/caution blocks */
.answer-body p:has(> strong:first-child) {
    background:    var(--color-warning-bg);
    border-left:   3px solid #e6a817;
    padding:       0.5rem 0.75rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin:        0.75rem 0;
}

mark { background: var(--color-mark); }

/* ── Source documents ─────────────────────────────────────────────────── */

.source-docs {
    margin-top:  1.5rem;
    padding-top: 1rem;
    border-top:  1px solid var(--color-border);
    font-size:   0.8rem;
    color:       var(--color-text-muted);
}

.source-docs h4 {
    font-size:     0.8rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.source-docs ul { list-style: none; }
.source-docs li { margin: 0.2rem 0; }

.doc-type {
    margin-left: 0.5rem;
    color:       var(--color-text-muted);
    font-style:  italic;
}

/* ── Diagrams ─────────────────────────────────────────────────────────── */

.diagrams-section {
    margin-top: 1.5rem;
}

.diagrams-section h4 {
    font-size:      0.8rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--color-text-muted);
    margin-bottom:  0.75rem;
}

.diagram-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   1rem;
}

.diagram-item {
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    overflow:      hidden;
    background:    #fff;
}

.diagram-img {
    width:   100%;
    height:  auto;
    display: block;
}

/* ── PDF actions ──────────────────────────────────────────────────────── */

.pdf-actions {
    margin-top:  1.5rem;
    padding-top: 1rem;
    border-top:  1px solid var(--color-border);
}

.pdf-actions .btn-outline {
    color:  var(--color-accent);
    border: 1px solid var(--color-accent);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .main-content { padding: 1rem; }
    .login-card   { padding: 1.25rem; }
    .header-inner { gap: 0.5rem; }
    .vehicle-badge { display: none; }
}

/* ── References (collapsible) ─────────────────────────────────────────── */

.references-section {
    margin-top:  1rem;
    font-size:   0.8rem;
    color:       var(--color-text-muted);
}

.references-section summary {
    cursor:      pointer;
    font-weight: 500;
    padding:     0.4rem 0;
    color:       var(--color-text-muted);
}

.references-section summary:hover {
    color: var(--color-accent);
}

.references-list {
    list-style:  none;
    margin-top:  0.4rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--color-border);
}

.references-list li { margin: 0.2rem 0; }

/* ── Diagram figcaptions ──────────────────────────────────────────────── */

.diagram-item figcaption {
    font-size:   0.75rem;
    color:       var(--color-text-muted);
    text-align:  center;
    padding:     0.3rem;
    background:  #fafaf8;
    border-top:  1px solid var(--color-border);
}

.diagrams-heading {
    font-size:      0.8rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--color-text-muted);
    margin-bottom:  0.75rem;
    margin-top:     1.5rem;
}

/* ── Reference links to static site ──────────────────────────────────── */
.ref-link {
    text-decoration: none;
}
.ref-link:hover code {
    background:    var(--color-accent-light);
    color:         var(--color-accent);
}
.ref-link code {
    transition: background 0.15s, color 0.15s;
}

/* ── Inline diagrams ──────────────────────────────────────────────────── */
.inline-diagram {
    margin:        1.25rem 0;
    text-align:    center;
}
.inline-diagram figcaption {
    font-size:   0.75rem;
    color:       var(--color-text-muted);
    margin-top:  0.3rem;
}

/* ── Based on: source line ────────────────────────────────────────────── */
.based-on {
    margin-top:  1.5rem;
    padding-top: 0.75rem;
    border-top:  1px solid var(--color-border);
    font-size:   0.8rem;
    color:       var(--color-text-muted);
}
.based-on-label {
    font-weight: 600;
    margin-right: 0.4rem;
}
.source-link {
    color:           var(--color-accent);
    text-decoration: none;
}
.source-link:hover {
    text-decoration: underline;
}

/* ── Based on: vertical list ──────────────────────────────────────────── */
.based-on-list {
    list-style:  none;
    margin-top:  0.4rem;
    padding:     0;
}
.based-on-list li {
    padding:     0.2rem 0;
    border-bottom: 1px solid var(--color-border);
}
.based-on-list li:last-child {
    border-bottom: none;
}