/* ================================================================
   Shastho360 – main.css
   Theme custom properties (light/dark) + Bootstrap overrides
   ================================================================ */

/* ----------------------------------------------------------------
   1. Custom Properties
   ---------------------------------------------------------------- */

:root {
  /* User text-size scale, adjusted by the A-/A+ toggle in base.html */
  --s360-text-scale: 1;

  /* Light theme (default) */
  --s360-body-bg:           #ffffff;
  --s360-body-color:        #212529;
  --s360-surface-bg:        #f8f9fa;
  --s360-card-bg:           #ffffff;
  --s360-card-border:       rgba(0, 0, 0, 0.125);
  --s360-dropdown-bg:       #ffffff;
  --s360-dropdown-link:     #212529;
  --s360-dropdown-hover:    #f1f3f5;
  --s360-input-bg:          #ffffff;
  --s360-input-color:       #212529;
  --s360-input-border:      #ced4da;
  --s360-placeholder:       #6c757d;
  --s360-muted:             #6c757d;
  --s360-modal-bg:          #ffffff;
  --s360-table-border:      #dee2e6;
  --s360-footer-bg:         #212529;
  --s360-hr:                rgba(0, 0, 0, 0.10);
  --s360-link-color:        #8e44ad;
  --s360-input-group-bg:    #e9ecef;
}

[data-theme="dark"] {
  /* Dark theme overrides */
  --s360-body-bg:           #0e0e1c;
  --s360-body-color:        #dde1ec;
  --s360-surface-bg:        #17172e;
  --s360-card-bg:           #1c1c33;
  --s360-card-border:       rgba(255, 255, 255, 0.08);
  --s360-dropdown-bg:       #1c1c33;
  --s360-dropdown-link:     #dde1ec;
  --s360-dropdown-hover:    #2a2a48;
  --s360-input-bg:          #23233e;
  --s360-input-color:       #dde1ec;
  --s360-input-border:      #4a4a72;
  --s360-placeholder:       #8888aa;
  --s360-muted:             #8888aa;
  --s360-modal-bg:          #1c1c33;
  --s360-table-border:      #3a3a5c;
  --s360-footer-bg:         #08080f;
  --s360-hr:                rgba(255, 255, 255, 0.08);
  --s360-link-color:        #c47dea;
  --s360-input-group-bg:    #2a2a48;
}

/* ----------------------------------------------------------------
   1b. Fonts (Bengali-aware) + text-size scaling
   ---------------------------------------------------------------- */
html {
  font-size: calc(16px * var(--s360-text-scale));
}

body {
  font-family: "Hind Siliguri", "Noto Sans Bengali", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------------
   2. Smooth Theme Transition
      Apply only to elements that visibly change – not everything,
      to keep layout-triggering properties (width, height) fast.
   ---------------------------------------------------------------- */

body,
.card, .card-header, .card-footer, .card-body,
.dropdown-menu, .dropdown-item,
.form-control, .form-select, .form-check-input, .input-group-text,
.modal-content, .modal-header, .modal-footer,
.list-group-item,
.table, .table > :not(caption) > * > *,
.nav-tabs .nav-link,
.accordion-item, .accordion-button,
#tos-modal-content {
  transition:
    background-color 0.25s ease,
    color           0.25s ease,
    border-color    0.25s ease;
}

/* ----------------------------------------------------------------
   3. Base / Body
   ---------------------------------------------------------------- */

body {
  background-color: var(--s360-body-bg);
  color: var(--s360-body-color);
}

a {
  color: var(--s360-link-color);
}

hr {
  border-color: var(--s360-hr);
  opacity: 1;
}

/* ----------------------------------------------------------------
   4. Cards
   ---------------------------------------------------------------- */

.card {
  background-color: var(--s360-card-bg);
  border-color: var(--s360-card-border);
  color: var(--s360-body-color);
}

.card-header,
.card-footer {
  background-color: var(--s360-surface-bg);
  border-color: var(--s360-card-border);
  color: var(--s360-body-color);
}

/* ----------------------------------------------------------------
   5. Dropdowns
   ---------------------------------------------------------------- */

.dropdown-menu {
  background-color: var(--s360-dropdown-bg);
  border-color: var(--s360-card-border);
}

.dropdown-item {
  color: var(--s360-dropdown-link);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--s360-dropdown-hover);
  color: var(--s360-dropdown-link);
}

.dropdown-divider {
  border-color: var(--s360-hr);
}

/* Existing custom HealthKit360 dropdown – dark mode fix */
[data-theme="dark"] .fancy-dropdown {
  background-color: var(--s360-dropdown-bg);
  border-color: var(--s360-card-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .fancy-dropdown .dropdown-item:hover,
[data-theme="dark"] .fancy-dropdown .dropdown-item:focus {
  background-color: var(--s360-dropdown-hover);
  color: var(--s360-dropdown-link);
}

/* Language dropdown – dark mode */
[data-theme="dark"] .lang-dropdown-menu {
  background-color: var(--s360-dropdown-bg);
  border-color: var(--s360-card-border);
}

/* ----------------------------------------------------------------
   6. Forms
   ---------------------------------------------------------------- */

.form-control,
.form-select {
  background-color: var(--s360-input-bg);
  color: var(--s360-input-color);
  border-color: var(--s360-input-border);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--s360-input-bg);
  color: var(--s360-input-color);
  border-color: #8e44ad;
  box-shadow: 0 0 0 0.25rem rgba(142, 68, 173, 0.25);
}

.form-control::placeholder {
  color: var(--s360-placeholder);
  opacity: 1;
}

.form-check-input {
  background-color: var(--s360-input-bg);
  border-color: var(--s360-input-border);
}

.input-group-text {
  background-color: var(--s360-input-group-bg);
  color: var(--s360-body-color);
  border-color: var(--s360-input-border);
}

/* ----------------------------------------------------------------
   7. Tables
   ---------------------------------------------------------------- */

.table {
  color: var(--s360-body-color);
  border-color: var(--s360-table-border);
}

.table > :not(caption) > * > * {
  background-color: var(--s360-card-bg);
  color: var(--s360-body-color);
  border-bottom-color: var(--s360-table-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--s360-surface-bg);
  color: var(--s360-body-color);
}

/* ----------------------------------------------------------------
   8. Modals
   ---------------------------------------------------------------- */

.modal-content {
  background-color: var(--s360-modal-bg);
  color: var(--s360-body-color);
  border-color: var(--s360-card-border);
}

.modal-header,
.modal-footer {
  border-color: var(--s360-hr);
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ----------------------------------------------------------------
   9. List Groups
   ---------------------------------------------------------------- */

.list-group-item {
  background-color: var(--s360-card-bg);
  color: var(--s360-body-color);
  border-color: var(--s360-card-border);
}

/* ----------------------------------------------------------------
   10. Accordion
   ---------------------------------------------------------------- */

.accordion-item {
  background-color: var(--s360-card-bg);
  border-color: var(--s360-card-border);
  color: var(--s360-body-color);
}

.accordion-button {
  background-color: var(--s360-surface-bg);
  color: var(--s360-body-color);
}

.accordion-button:not(.collapsed) {
  background-color: rgba(142, 68, 173, 0.15);
  color: var(--s360-body-color);
  box-shadow: inset 0 -1px 0 var(--s360-hr);
}

.accordion-body {
  background-color: var(--s360-card-bg);
  color: var(--s360-body-color);
}

/* ----------------------------------------------------------------
   11. Utility Class Overrides (dark-mode only)
   ---------------------------------------------------------------- */

[data-theme="dark"] .bg-white  { background-color: var(--s360-card-bg)    !important; }
[data-theme="dark"] .bg-light  { background-color: var(--s360-surface-bg) !important; }
[data-theme="dark"] .text-dark { color: var(--s360-body-color)             !important; }
[data-theme="dark"] .text-muted{ color: var(--s360-muted)                  !important; }

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
  border-color: var(--s360-card-border) !important;
}

/* ----------------------------------------------------------------
   12. Footer
   ---------------------------------------------------------------- */

footer.bg-dark {
  background-color: var(--s360-footer-bg) !important;
}

/* ----------------------------------------------------------------
   13. Nav Tabs
   ---------------------------------------------------------------- */

.nav-tabs { border-color: var(--s360-hr); }

.nav-tabs .nav-link {
  color: var(--s360-body-color);
}

.nav-tabs .nav-link.active {
  background-color: var(--s360-card-bg);
  border-color: var(--s360-hr) var(--s360-hr) var(--s360-card-bg);
  color: var(--s360-body-color);
}

/* ----------------------------------------------------------------
   14. Custom TOS Modal (base.html)
   ---------------------------------------------------------------- */

#tos-modal-content {
  background: var(--s360-modal-bg);
  color: var(--s360-body-color);
}

/* ----------------------------------------------------------------
   15. Page-level section backgrounds
   ---------------------------------------------------------------- */

[data-theme="dark"] section.bg-light,
[data-theme="dark"] div.bg-light,
[data-theme="dark"] .section-light {
  background-color: var(--s360-surface-bg) !important;
}

/* ----------------------------------------------------------------
   16. Theme Toggle Button (navbar)
   ---------------------------------------------------------------- */

.theme-toggle {
  background-color: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  color: white;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.35s ease;
  cursor: pointer;
}

.theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.22);
  color: white;
  transform: rotate(22deg);
}

.theme-toggle:focus {
  outline: none;
}

.theme-toggle:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
}

/* ----------------------------------------------------------------
   17. Smooth Transition – page-specific components
   ---------------------------------------------------------------- */

.feature-box, .lifestyle-card, .mh-card, .flip-card-front, .flip-card-back,
.directory-tools, .disease-list-item, .featured-article-section,
.article-card, .contact-box, .login-container, .tools-section,
.info-card, .appointment-card, .kit-card, .patient-card,
.profile-card, .source-card, .who-we-are-section, .team-section,
.chat-container, .chat-header, .chat-footer, .tool-card,
.highlight-box, .terms-content, .calculator-result, .stats-card {
  transition:
    background-color 0.25s ease,
    color           0.25s ease,
    border-color    0.25s ease;
}

/* ----------------------------------------------------------------
   18. Per-page dark mode overrides
       All templates have inline <style> blocks that hardcode light
       colors. These !important rules reclaim control in dark mode.
   ---------------------------------------------------------------- */

/* --- 18a. Body background (overrides all per-page inline body rules) --- */

[data-theme="dark"] body {
  background-color: var(--s360-body-bg) !important;
  color: var(--s360-body-color) !important;
}

/* --- 18b. home.html --- */

[data-theme="dark"] .section-title {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .feature-box {
  background-color: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .feature-box h5 {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .feature-box p {
  color: var(--s360-muted) !important;
}

/* --- 18c. diseases.html --- */

[data-theme="dark"] .directory-tools {
  background-color: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .disease-list-item {
  background: var(--s360-card-bg) !important;
  border-color: var(--s360-card-border) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .disease-list-item .content h5 {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .disease-list-item .content p {
  color: var(--s360-muted) !important;
}

[data-theme="dark"] .letter-header {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .az-index {
  border-bottom-color: var(--s360-card-border) !important;
}

/* --- 18d. lifestyle.html --- */

[data-theme="dark"] .lifestyle-card {
  background-color: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .lifestyle-card h3 {
  color: #81c784 !important;
}

[data-theme="dark"] .intro-section {
  background-color: #1a2e1a !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .intro-section h2 {
  color: #81c784 !important;
}

[data-theme="dark"] .stats-card {
  background: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .calculator-result {
  background: #1a2e1a !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .calculator-result h4,
[data-theme="dark"] .result-value {
  color: #81c784 !important;
}

/* --- 18e. mental_health.html --- */

[data-theme="dark"] .mh-card {
  background-color: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .mh-card h3 {
  color: #4db6ac !important;
}

[data-theme="dark"] .stigma-section {
  background-color: #0a2020 !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .stigma-section h2 {
  color: #4db6ac !important;
}

[data-theme="dark"] .flip-card-front {
  background-color: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .flip-card-front h3 {
  color: #4db6ac !important;
}

[data-theme="dark"] .flip-card-back {
  background-color: #0a2020 !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .mh-card.is-revealed .remedial-steps {
  background-color: #0a2020 !important;
}

[data-theme="dark"] .tool-card {
  background-color: var(--s360-card-bg) !important;
  border-color: var(--s360-card-border) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .tool-card h5 {
  color: #4db6ac !important;
}

/* --- 18f. tools-section (lifestyle + mental_health shared class) --- */

[data-theme="dark"] .tools-section {
  background-color: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .tools-section h2 {
  color: var(--s360-body-color) !important;
}

/* --- 18g. chat.html --- */

[data-theme="dark"] .chat-container {
  background: var(--s360-surface-bg) !important;
}

[data-theme="dark"] .chat-header,
[data-theme="dark"] .chat-footer {
  background: var(--s360-card-bg) !important;
  border-color: var(--s360-card-border) !important;
}

[data-theme="dark"] .chat-header .bot-info h5 {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .bot-message .message-text {
  background: var(--s360-input-bg) !important;
  color: var(--s360-body-color) !important;
}

/* --- 18h. dashboard.html + doctor_dashboard.html --- */

[data-theme="dark"] .info-card,
[data-theme="dark"] .appointment-card,
[data-theme="dark"] .patient-card {
  background: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .appointment-date {
  border-right-color: var(--s360-card-border) !important;
}

[data-theme="dark"] .kit-card {
  background-color: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .kit-card:hover {
  color: var(--s360-body-color) !important;
}

/* --- 18i. articles.html --- */

[data-theme="dark"] .featured-article-section {
  background: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .category-header {
  border-bottom-color: var(--s360-card-border) !important;
}

[data-theme="dark"] .category-header h2 {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .article-card {
  background: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .article-card .card-title {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .article-card .card-text,
[data-theme="dark"] .featured-article-section .content h2 {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .article-card .card-meta,
[data-theme="dark"] .featured-article-section .card-meta {
  color: var(--s360-muted) !important;
}

/* --- 18j. about_us.html --- */

[data-theme="dark"] .who-we-are-section {
  background: var(--s360-surface-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .team-section {
  background-color: var(--s360-surface-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .team-section .section-title,
[data-theme="dark"] .sources-section .section-title {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .mission-section blockquote {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .profile-card {
  background: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .profile-card .name {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .source-card {
  background: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .source-card h4 {
  color: var(--s360-body-color) !important;
}

/* --- 18k. contact.html --- */

[data-theme="dark"] .contact-box {
  background: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .contact-box h3 {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .contact-box .email-link {
  color: var(--s360-link-color) !important;
}

/* --- 18l. terms.html --- */

[data-theme="dark"] .terms-content {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .terms-content h3,
[data-theme="dark"] .terms-content strong {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .terms-content h2 {
  border-bottom-color: var(--s360-card-border) !important;
}

[data-theme="dark"] .highlight-box {
  background-color: #2a0808 !important;
  border-left-color: #e74c3c !important;
  color: var(--s360-body-color) !important;
}

/* --- 18m. login.html --- */

[data-theme="dark"] .login-container {
  background: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

/* --- 18n. full_article.html ---
   The article body hardcodes near-black text (#333) and dark-slate headings
   (#2c3e50), which are unreadable on the dark background. Reclaim them, plus
   the LLM-generated body markup (h1-h4, .lead, links) rendered via | safe. */

[data-theme="dark"] .article-content,
[data-theme="dark"] .article-content p,
[data-theme="dark"] .article-content li,
[data-theme="dark"] .article-content strong,
[data-theme="dark"] .article-content blockquote {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .article-content h1,
[data-theme="dark"] .article-content h2,
[data-theme="dark"] .article-content h3,
[data-theme="dark"] .article-content h4 {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .article-content h2 {
  border-bottom-color: var(--s360-card-border) !important;
}

[data-theme="dark"] .article-content .lead {
  color: var(--s360-muted) !important;
}

[data-theme="dark"] .article-content a {
  color: var(--s360-link-color) !important;
}

/* --- 18o. article_archive.html --- */

[data-theme="dark"] .archive-card {
  background: var(--s360-card-bg) !important;
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .archive-card .card-title,
[data-theme="dark"] .archive-card .card-text {
  color: var(--s360-body-color) !important;
}

[data-theme="dark"] .archive-card .card-meta {
  color: var(--s360-muted) !important;
}