/* ============================================================
   AIA Sustainability — Global Theme
   Page background : linear-gradient #0f5b73 → #1581a3
   Cards & buttons : #093442
   Fonts           : white
   Load this AFTER Bootstrap so it wins the cascade.
   ============================================================ */

:root {
  --aia-bg-start:     #0f5b73;
  --aia-bg-end:       #1581a3;
  --aia-surface:      #093442;   /* cards + buttons */
  --aia-surface-2:    #0c4658;   /* hover / raised */
  --aia-accent:       #1581a3;
  --aia-text:         #ffffff;
  --aia-text-muted:   rgba(255,255,255,.72);
  --aia-border:       rgba(255,255,255,.14);
}

/* ---------- Page background (all pages) ---------- */
html { min-height: 100%; }
body {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--aia-bg-start) 0%, var(--aia-bg-end) 100%);
  background-attachment: fixed;
  color: var(--aia-text);
}

/* Let the gradient show through wrappers */
.container, .container-fluid, main, .content, .page, section {
  background: transparent;
}

/* Global text = white, but keep headings/paragraphs explicit */
h1,h2,h3,h4,h5,h6,p,span,label,li,td,th,div { color: var(--aia-text); }
.text-muted, small.text-muted { color: var(--aia-text-muted) !important; }

a        { color: #8fd3ea; text-decoration: none; }
a:hover  { color: #bfe8f5; text-decoration: underline; }

/* ---------- Cards / surfaces ---------- */
.card, .accordion-item, .list-group-item, .modal-content, .dropdown-menu, .toast {
  background-color: var(--aia-surface);
  color: var(--aia-text);
  border: 1px solid var(--aia-border);
}
.card-header, .card-footer {
  background-color: rgba(255,255,255,.04);
  color: var(--aia-text);
  border-color: var(--aia-border);
}

/* Dashboard metric cards (custom classes) */
.metric-value { color: var(--aia-text); }
.metric-label { color: var(--aia-text-muted); }

/* ---------- Buttons ---------- */
/* Default / primary / neutral buttons => surface color */
.btn { color: var(--aia-text); }
.btn-primary, .btn-secondary, .btn-default,
.btn-outline-primary, .btn-outline-secondary,
.btn-light, .btn-dark {
  background-color: var(--aia-surface);
  border: 1px solid var(--aia-border);
  color: var(--aia-text);
}
.btn-primary:hover, .btn-secondary:hover, .btn-default:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-light:hover, .btn-dark:hover {
  background-color: var(--aia-surface-2);
  border-color: var(--aia-accent);
  color: var(--aia-text);
}
.btn:focus, .btn:active {
  box-shadow: 0 0 0 .2rem rgba(21,129,163,.35);
}
/* Preserve meaning for destructive / status actions */
.btn-danger  { background-color:#b23b3b; border-color:#b23b3b; color:#fff; }
.btn-success { background-color:#2e7d55; border-color:#2e7d55; color:#fff; }
.btn-warning { background-color:#b5852a; border-color:#b5852a; color:#fff; }

/* ---------- Navbar ---------- */
.navbar {
  background-color: var(--aia-surface) !important;
  border-bottom: 1px solid var(--aia-border);
}
.navbar .nav-link, .navbar-brand, .navbar .navbar-text, .navbar-toggler { color: var(--aia-text) !important; }
.navbar-toggler-icon { filter: invert(1) brightness(2); }

/* ---------- Forms ---------- */
.form-control, .form-select, textarea, input, .input-group-text {
  background-color: rgba(255,255,255,.06);
  color: var(--aia-text);
  border: 1px solid var(--aia-border);
}
.form-control:focus, .form-select:focus {
  background-color: rgba(255,255,255,.10);
  color: var(--aia-text);
  border-color: var(--aia-accent);
  box-shadow: 0 0 0 .2rem rgba(21,129,163,.35);
}
::placeholder { color: rgba(255,255,255,.5) !important; }
/* Native <option> lists are drawn by the OS on a white sheet — keep dark text */
.form-select option, select option { color: #093442; background:#ffffff; }

/* ---------- Tables ---------- */
.table {
  color: var(--aia-text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--aia-text);
  --bs-table-striped-color: var(--aia-text);
  --bs-table-hover-color: var(--aia-text);
}
.table thead th { background-color: var(--aia-surface); color: var(--aia-text); border-color: var(--aia-border); }
.table td, .table th { border-color: var(--aia-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.05); color: var(--aia-text); }
.table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,.09); }

/* ---------- Accordion (About / User Manual pages) ---------- */
.accordion-button { background-color: var(--aia-surface); color: var(--aia-text); }
.accordion-button:not(.collapsed) { background-color: var(--aia-surface-2); color: var(--aia-text); }
.accordion-button::after { filter: invert(1) brightness(2); }   /* white chevron */
.accordion-body { background-color: var(--aia-surface); color: var(--aia-text); }

/* ---------- Dropdown items ---------- */
.dropdown-item { color: var(--aia-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--aia-surface-2); color: var(--aia-text); }

/* ---------- Misc ---------- */
.badge.bg-light { color:#093442 !important; }
hr { border-color: var(--aia-border); opacity: 1; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--aia-border) !important; }

/* Respect users who prefer reduced motion (buttons/hover transitions) */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Card titles kept a dark color from the old light-card theme → force white */
.card :is(h1,h2,h3,h4,h5,h6,.card-title,.card-subtitle,.card-header) { color: var(--aia-text) !important; }

/* Pillar cards (home) are custom, not .card — target them directly */
.pillar-card, .pillar-card h1, .pillar-card h2, .pillar-card h3,
.pillar-card h4, .pillar-card h5, .pillar-card h6,
.pillar-card p, .pillar-card span, .pillar-card small { color: var(--aia-text) !important; }
.pillar-card small, .pillar-card .text-muted { color: var(--aia-text-muted) !important; }

/* ===== AI Assistant page — force white-on-dark like every other page ===== */

/* Chat wrappers → let the gradient/dark show through */
.chat-container, .chat-window, .chat-messages, .messages, .message-list,
.chat-body, .conversation, .ai-chat, .chat-area, #chatMessages, #messages {
    background: transparent !important;
}

/* Message bubbles + rendered markdown answers → dark surface, white text */
.message, .chat-message, .ai-message, .assistant-message, .bot-message,
.user-message, .message-content, .message-bubble, .response, .ai-response,
.markdown-body, .md-content, .msg {
    background-color: var(--aia-surface) !important;
    color: var(--aia-text) !important;
    border: 1px solid var(--aia-border);
}
.message *, .chat-message *, .ai-message *, .assistant-message *,
.message-content *, .response *, .markdown-body *, .msg * {
    color: var(--aia-text) !important;
}

/* Tables the AI renders inside answers (Area / Current / Target / Status) */
.message table th, .response table th, .markdown-body table th {
    background-color: rgba(255,255,255,.08) !important;
    color: var(--aia-text) !important;
}
.message table td, .message table th,
.response table td, .response table th,
.markdown-body table td, .markdown-body table th {
    border-color: var(--aia-border) !important;
}

/* Suggested-queries panel — titles were dark-on-dark */
.suggested-query, .query-card, .suggestion, .suggestion-item,
.suggested-queries .card, .suggested-queries a, .suggested-queries li {
    color: var(--aia-text) !important;
}
.suggested-query *, .query-card *, .suggestion *,
.suggestion-item *, .suggested-queries * {
    color: var(--aia-text) !important;
}

/* Provider box + section labels ("AI Provider", "SUGGESTED QUERIES") */
.ai-provider, .provider-name, .section-label, .panel-label { color: var(--aia-text) !important; }
/* ===== Commitment page — kill light-on-white card backgrounds ===== */

/* The 4 hero cards (were background:white -> invisible white text) */
.pillar-card {
    background: var(--aia-surface) !important;
    color: var(--aia-text) !important;
    border: 1px solid var(--aia-border);
}
.pillar-card h6, .pillar-card p, .pillar-card span, .pillar-card .icon {
    color: var(--aia-text) !important;
}

/* Vision/Mission body items (were #f8f9fa / white) */
.commitment-item {
    background: rgba(255,255,255,.06) !important;
    color: var(--aia-text) !important;
    border: 1px solid var(--aia-border);
}
.commitment-item:hover {
    background: rgba(255,255,255,.10) !important;
}
.commitment-item h5,
.commitment-item .description,
.commitment-item .meta,
.commitment-item * {
    color: var(--aia-text) !important;
}
.commitment-item .meta { color: var(--aia-text-muted) !important; }

/* Section card bodies inherit the dark surface */
.section-card .card-body {
    background: var(--aia-surface) !important;
    color: var(--aia-text) !important;
}

/* Status badges: keep them readable with DARK text on their light chips
   (these are intentionally coloured chips, so force dark text instead) */
.status-badge { color: #093442 !important; }


/* Commitment badges: light chips need dark text (Target/SDG were white-on-white) */
.timeline-badge, .sdg-badge { color: #093442 !important; }


/* Justify Vision/Mission card paragraph text */
.section-card .card-body p { text-align: justify; }


/* Force justify on vision/mission text even when Bootstrap .text-end is applied (RTL) */
.section-card .card-body p,
.section-card .card-body.text-end p,
.section-card .card-body.text-end { text-align: justify !important; }