/*--------------------------------------------------------------
# DPDPA Guide Page Specific Styles
# Complements main.css
--------------------------------------------------------------*/

/* Add scroll padding for fixed header */
html {
    scroll-padding-top: 90px; /* Increased slightly to accommodate top banner */
  }
  
  /* Top Banner Styling */
  .top-banner {
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--heading-color);
    padding: 10px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
    z-index: 1000; /* Ensure it's visible below header but above content */
  }
  body.dark-mode .top-banner {
      background-color: color-mix(in srgb, var(--accent-color), black 80%);
      color: var(--text-color);
      border-bottom: 1px solid var(--border-color);
  }
  .top-banner .timestamp {
    font-size: 0.8em;
    opacity: 0.8;
  }
  
  /* Sidebar TOC Styling */
  .toc-sidebar-container {
    height: calc(100vh - 110px); /* Adjust based on header + banner height */
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--border-color) transparent; /* Firefox */
  }
  /* Webkit scrollbar styles */
  .toc-sidebar-container::-webkit-scrollbar {
    width: 6px;
  }
  .toc-sidebar-container::-webkit-scrollbar-track {
    background: transparent;
  }
  .toc-sidebar-container::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
  }
  body.dark-mode .toc-sidebar-container::-webkit-scrollbar-thumb {
      background-color: color-mix(in srgb, var(--border-color), white 20%);
  }
  
  .toc-sidebar {
    padding-right: 15px; /* Space from content */
  }
  

  
  
  .toc-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--heading-color);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
  }
  
  #toc-nav .nav-link {
    color: var(--subtle-text-color);
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
  }
  
  #toc-nav .nav-link:hover {
    color: var(--accent-color);
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-left-color: color-mix(in srgb, var(--accent-color), transparent 70%);
  }
  
  #toc-nav .nav-link.active {
    color: var(--accent-color);
    font-weight: 600;
    background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
    border-left-color: var(--accent-color);
  }
  
  /* Main Content Area Styling */
  .content-section {
    scroll-margin-top: 90px; /* Match html scroll-padding-top */
  }
  .section-title-page { /* Distinct style for page section titles */
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary-accent-color);
    display: inline-block;
    color: var(--heading-color);
  }
  .section-subtitle-page {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 15px;
    color: color-mix(in srgb, var(--heading-color), black 10%);
  }
  body.dark-mode .section-subtitle-page {
      color: color-mix(in srgb, var(--heading-color), white 90%);
  }
  
  /* Hero Section Specific */
  .hero-guide-section {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--accent-color), transparent 97%), transparent);
    border: 1px solid var(--border-color);
  }
  body.dark-mode .hero-guide-section {
     background: linear-gradient(to bottom, color-mix(in srgb, var(--accent-color), black 90%), transparent);
  }
  .hero-guide-section h1 { color: var(--heading-color); }
  .hero-guide-section .lead { color: var(--subtle-text-color); }
  .hero-guide-section .btn-outline-accent { /* Inherits from main.css potentially */
      border-color: var(--accent-color);
      color: var(--accent-color);
  }
  .hero-guide-section .btn-outline-accent:hover {
       background-color: var(--accent-color);
       color: #000000; /* Dark text on accent bg */
  }
  body.dark-mode .hero-guide-section .btn-outline-accent:hover {
       color: #000000; /* Dark text on accent bg */
  }
  
  /* Role Cards */
  .role-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .role-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--heading-color), transparent 90%);
  }
  
  /* Lists */
  .list-styled {
    list-style: none;
    padding-left: 0;
  }
  .list-styled li::before {
    content: "\F26E"; /* Bootstrap Icons check */
    font-family: bootstrap-icons !important;
    color: var(--accent-color);
    margin-right: 8px;
    font-size: 1.1em;
  }
  .dot-list {
    list-style: disc;
    padding-left: 20px;
  }
  .dot-list li { margin-bottom: 0.5rem; }
  
  /* Accordion & Tab Styling Adjustments */
  .accordion-button { font-size: 1rem; font-weight: 500; }
  .accordion-body { font-size: 0.9rem; }
  .nav-pills .nav-link { font-size: 0.95rem; font-weight: 500; }
  
  /* Checklists */
  .interactive-checklist .card-header { background-color: var(--surface-color); border-bottom: 1px solid var(--border-color); }
  .interactive-checklist label { cursor: pointer; }
  .interactive-checklist .form-check-input { cursor: pointer; margin-top: 0.1em; } /* Align checkbox better */
  
  /* Applicability Checker */
  .applicability-checker-container .card-title { font-size: 1rem; }
  .applicability-checker-container .step p { font-weight: 500; }
  .applicability-checker-container .result { border: 1px solid var(--border-color); background-color: color-mix(in srgb, var(--bg-color), var(--border-color) 5%);}
  body.dark-mode .applicability-checker-container .result { background-color: color-mix(in srgb, var(--bg-color), var(--contrast-color) 5%);}
  .applicability-checker-container .result.success { border-color: #198754; background-color: #d1e7dd; color: #0f5132; }
  body.dark-mode .applicability-checker-container .result.success { background-color: color-mix(in srgb, #198754, black 70%); color: #a3cfbb; border-color: #2f6a4a;}
  .applicability-checker-container .result.fail { border-color: #dc3545; background-color: #f8d7da; color: #842029; }
  body.dark-mode .applicability-checker-container .result.fail { background-color: color-mix(in srgb, #dc3545, black 70%); color: #f1b0b7; border-color: #a33a45;}
  .applicability-checker-container .restart-checker { color: var(--subtle-text-color); }
  
  /* Search Dropdown */
  .search-results-dropdown {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem; /* Match form-control rounding */
    background-color: var(--surface-color);
  }
  .search-result-item {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--default-color);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
  }
  .search-result-item:last-child {
      border-bottom: none;
  }
  .search-result-item:hover, .search-result-item.active {
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
  }
  .search-result-item strong { /* Highlight matching text */
      font-weight: 600;
      color: var(--secondary-accent-color);
  }
  .no-results-item {
      padding: 0.75rem 1rem;
      font-style: italic;
      color: var(--subtle-text-color);
      text-align: center;
  }
  
  /* Glossary Modal */
  .glossary-body p {
      margin-bottom: 0.8rem;
      padding-bottom: 0.8rem;
      border-bottom: 1px dotted var(--border-color);
  }
  .glossary-body p:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
  }
  .glossary-body strong {
      color: var(--heading-color);
  }
  
  /* CTA Section */
  .cta-section {
     background-color: var(--subtle-bg); /* Use the subtle variation */
  }
  
  /* Ensure consistency with main.css form styling */
  .php-email-form input[type=email].form-control {
    /* Styles should be inherited from main.css */
  }
  .php-email-form .btn-accent {
     background-color: var(--accent-color);
     border-color: var(--accent-color);
     color: var(--contrast-color);
  }
  .php-email-form .btn-accent:hover {
      background-color: var(--subtle-accent-color);
      border-color: var(--subtle-accent-color);
  }
  body.dark-mode .php-email-form .btn-accent {
       color: #000000; /* Match primary button dark mode */
  }
  body.dark-mode .php-email-form .btn-accent:hover {
       color: #000000;
  }
  
  /* === Dark Mode Overrides for dpdpa-guide.css === */

body.dark-mode .role-card,
body.dark-mode .applicability-checker-container.card,
body.dark-mode .interactive-checklist.card,
body.dark-mode .accordion-item,
body.dark-mode .accordion-button, /* Also target button background */
body.dark-mode .tab-pane, /* Target the tab content pane background */
body.dark-mode .list-group-item, /* For sectoral impact list */
body.dark-mode .modal-content, /* For glossary modal */
body.dark-mode .search-results-dropdown, /* For search results */
body.dark-mode #faq-placeholder /* Ensure FAQ placeholder respects dark mode */
 {
  background-color: var(--surface-color) !important; /* Use !important cautiously, but often needed to override Bootstrap */
  border-color: var(--border-color) !important;
}

/* Specific text colors if needed within these components */
body.dark-mode .role-card .card-title,
body.dark-mode .applicability-checker-container.card .card-title,
body.dark-mode .interactive-checklist.card .card-header,
body.dark-mode .accordion-button,
body.dark-mode .list-group-item,
body.dark-mode .modal-title,
body.dark-mode #faq-placeholder h4
 {
  color: var(--heading-color);
}

body.dark-mode .role-card .card-text,
body.dark-mode .applicability-checker-container.card .step p,
body.dark-mode .interactive-checklist label,
body.dark-mode .accordion-body,
body.dark-mode .tab-pane p,
body.dark-mode .tab-pane li,
body.dark-mode .list-group-item, /* Check if needed, might inherit */
body.dark-mode .modal-body p,
body.dark-mode .modal-body strong,
body.dark-mode #faq-placeholder p
{
  color: var(--text-color);
}

/* Ensure links within dark components are styled correctly */
body.dark-mode .role-card .card-link,
body.dark-mode .modal-body a {
    color: var(--accent-color);
}
body.dark-mode .role-card .card-link:hover,
body.dark-mode .modal-body a:hover {
     color: color-mix(in srgb, var(--accent-color), white 20%);
}


/* Specific override for collapsed accordion button text color */
body.dark-mode .accordion-button.collapsed {
    color: var(--heading-color);
}
/* Specific override for NON-collapsed accordion button text color */
body.dark-mode .accordion-button:not(.collapsed) {
     color: var(--secondary-accent-color); /* Match light mode active color */
     background-color: color-mix(in srgb, var(--secondary-accent-color), black 85%) !important;
}


/* Override Bootstrap list group item background */
body.dark-mode .list-group-item-action {
    background-color: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
}
body.dark-mode .list-group-item-action:hover,
body.dark-mode .list-group-item-action:focus {
    background-color: color-mix(in srgb, var(--surface-color), white 5%); /* Slightly lighter on hover */
    color: var(--accent-color);
}

/* Search Dropdown Item Hover in Dark Mode */
body.dark-mode .search-result-item:hover,
body.dark-mode .search-result-item.active {
  background-color: color-mix(in srgb, var(--accent-color), black 80%);
  color: var(--accent-color); /* Keep accent color for text */
}
body.dark-mode .search-result-item strong {
    color: color-mix(in srgb, var(--secondary-accent-color), white 30%); /* Make highlight slightly brighter */
}

  /* Responsive Adjustments */
  @media (max-width: 991.98px) {
    html {
      scroll-padding-top: 70px; /* Reset padding if banner moves */
    }
    .toc-sidebar-container {
      display: none; /* Hide sidebar on smaller screens */
    }
  }