/* style.css - REVAMPED for Professional & Clear Tone, adjusted nav color and PC layout */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* Primary text font */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap'); /* Monospace for code, Fira Code is popular */

:root {
    /* Color Palette - Professional & Clear */
    --primary-mitre-blue: #0078D4; /* MITRE's Brand Blue */
    --accent-indigo: #4F46E5; /* A complementary deep indigo */
    --text-dark: #1F2937; /* Dark slate gray for primary text (used for black links) */
    --text-medium: #4B5563; /* Medium gray for secondary text */
    --text-light: #6B7280; /* Lighter gray for subtle text */
    --background-light: #F9FAFB; /* Very light gray for body background */
    --background-card: #FFFFFF; /* Pure white for cards/panels */
    --border-color: #E5E7EB; /* Subtle light gray border */
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);

    /* Specific element colors */
    --header-bg: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --main-content-bg: #F9FAFB;
    --footer-bg: #374151;
    --link-color: var(--primary-mitre-blue);
    --link-hover-color: var(--accent-indigo);
    --sidebar-active-link-bg: #E0F2F7; /* Light blue for active nav item */
    --sidebar-active-link-border: var(--primary-mitre-blue);
    --quote-bg: #FFFBEB; /* Light yellow for quotes */
    --quote-border: #FBBF24; /* Yellow border for quotes */

    /* Card/Section Specific Icons */
    --icon-general-info: #2196F3; /* Blue */
    --icon-risk-landscape: #FFC107; /* Amber */
    --icon-strategic-actions: #4CAF50; /* Green */
    --icon-top-threats: #F44336; /* Red */
    --icon-threat-actor-case: #9C27B0; /* Purple */
    --icon-mitre-ds: #607D8B; /* Blue Grey */
    --icon-detection: #FF9800; /* Orange */
    --icon-list-status: #00BCD4; /* Cyan */
    --icon-mitigation: #8BC34A; /* Light Green */
    --icon-monitoring: #2196F3; /* Blue (same as general, or pick a new one) */
    --icon-tools: #795548; /* Brown */
    --icon-analyst-notes: #673AB7; /* Deep Purple */

    /* Define header height as a CSS variable */
    --header-height: 60px; /* Adjust this to your actual header height */
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-light);
    color: var(--text-dark);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* General Layout */
.main-container {
    display: flex;
    flex: 1; /* Allow container to take available vertical space */
    min-height: calc(100vh - var(--header-height)); /* Ensure it takes full viewport height minus header */
}

/* Header */
.page-header {
    background-color: var(--header-bg);
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-light);
    position: sticky; /* Make header sticky */
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-dark);
}

.site-logo {
    height: 40px; /* Adjust as needed */
    margin-right: 10px;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-mitre-blue);
}

.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.header-nav a {
    text-decoration: none;
    color: var(--text-medium);
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.header-nav a:hover {
    color: var(--primary-mitre-blue);
}

/* Sidebar */
.left-sidebar {
    width: 300px;
    background-color: var(--sidebar-bg);
    padding: 20px;
    box-shadow: var(--shadow-medium);
    overflow-y: auto; /* Enable scrolling for long content */
    flex-shrink: 0; /* Prevent sidebar from shrinking */
}

#tactic-tree-nav {
    margin-top: 15px;
    padding-bottom: 20px; /* Add padding at bottom for loading indicator */
}

.tactic-group {
    margin-bottom: 10px;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 400; /* Lighter weight like TOC */
    font-size: 0.85rem; /* Smaller font size */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.nav-item .iconify {
    margin-right: 8px;
    font-size: 1.1rem;
    color: var(--text-medium);
}

.nav-item:hover {
    background-color: #f0f4f8; /* Lighter hover for nav items */
    color: var(--primary-mitre-blue);
}

.nav-item.active {
    background-color: var(--sidebar-active-link-bg);
    color: var(--primary-mitre-blue);
    border-left: 4px solid var(--sidebar-active-link-border);
    padding-left: 8px;
}

.nav-item.active .iconify {
    color: var(--primary-mitre-blue);
}

.tactic-header {
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem; /* Slightly smaller than before */
    padding: 8px 10px;
    background-color: #f0f4f8;
    margin-bottom: 5px;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.tactic-header .iconify {
    transition: transform 0.2s ease-in-out;
}

.tactic-header.collapsed .iconify {
    transform: rotate(-90deg);
}

.techniques-list, .subtechniques-list {
    list-style: none;
    padding-left: 20px;
    margin: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
    height: auto;
}

.techniques-list.collapsed, .subtechniques-list.collapsed {
    height: 0 !important;
}

.subtechniques-list {
    padding-left: 15px;
}

.technique-link .iconify, .subtechnique-link .iconify {
    font-size: 0.9rem;
    color: var(--text-light);
}

.subtechnique-link {
    font-size: 0.8rem;
}

/* Main Content */
.main-content {
    flex-grow: 1; /* Allow content to take remaining space */
    padding: 25px;
    background-color: var(--main-content-bg);
    overflow-y: auto; /* This is crucial: makes main-content the primary scrollable area */
    scroll-behavior: smooth; /* For smoother jumps from TOC */
}

.header-quote {
    background-color: var(--quote-bg);
    border-left: 5px solid var(--quote-border);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    color: var(--text-medium);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-quote .iconify {
    color: var(--quote-border);
    font-size: 1.2rem;
}

.loading-indicator {
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: var(--text-light);
    display: none;
}

/* Main Search Input Container (Always visible now) */
.main-search-container {
    padding: 10px 20px; /* Adjust padding as needed */
    background-color: var(--background-color-light); /* Or any suitable background */
    border-bottom: 1px solid var(--border-color);
    display: block; /* Always visible */
}

/* Style the main search input itself */
#main-search-input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1em;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin-bottom: 15px; /* Space between input and dashboard */
}

#main-search-input:focus {
    outline: none;
    border-color: var(--primary-mitre-blue);
    box-shadow: 0 0 5px rgba(var(--primary-mitre-blue-rgb), 0.5);
}

.search-summary-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    padding: 20px;
    background-color: var(--background-card);
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    margin-bottom: 20px;
    /* This element is now a scroll target for TOC when list of articles is shown */
    scroll-margin-top: calc(var(--header-height) + 20px);
}

.dashboard-header {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 10px;
}

.dashboard-card {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center;
    justify-content: center;
    padding: 10px 15px; /* Reduced vertical padding */
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    box-shadow: var(--shadow-light);
    transition: transform 0.2s ease-in-out;
}

.dashboard-card:hover {
    transform: translateY(-3px);
}

.card-count {
    font-size: 1.8rem; /* Keep existing font size for number */
    font-weight: 700;
    color: var(--primary-mitre-blue);
    margin-bottom: 5px; /* Space between number and icon/tactic */
}

.dashboard-card .icon-and-tactic {
    display: flex;
    align-items: center;
    gap: 5px; /* Space between icon and tactic name */
}

.dashboard-card .iconify {
    font-size: 1.2rem; /* Standardized icon size for dashboard cards */
    color: var(--primary-mitre-blue);
    margin-bottom: 0; /* Remove previous margin-bottom */
}

.card-tactic {
    font-size: 0.85rem;
    color: var(--text-medium);
    text-transform: capitalize;
}

.breadcrumb {
    padding: 10px 0;
    font-size: 0.9rem;
    color: var(--text-medium);
    display: flex;
    align-items: center;
    gap: 5px;
}

.breadcrumb a {
    text-decoration: none;
    color: var(--link-color);
    font-weight: 500;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span.current {
    font-weight: 600;
    color: var(--text-dark);
}

/* Technique Detail View (per article) */
.technique-detail-view {
    background-color: var(--background-card);
    padding: 25px; /* Padding utama untuk seluruh artikel */
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    margin-bottom: 20px; /* Jarak antara artikel di tampilan daftar */
    /* Add scroll-margin-top for each article in list view */
    scroll-margin-top: calc(var(--header-height) + 20px);
}

/* Header untuk artikel tunggal (H1) */
.technique-detail-view h1 {
    font-size: 1.8rem;
    color: var(--primary-mitre-blue);
    margin-top: 0;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.technique-detail-view h1 .iconify {
    font-size: 2.2rem;
    color: var(--primary-mitre-blue);
}

/* Header untuk artikel dalam daftar (H2, with toggle) */
.article-header-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    background-color: var(--background-light);
    padding: 15px 20px;
    border-radius: 10px; /* Adjusted radius for header only */
    box-shadow: var(--shadow-light);
    transition: background-color 0.2s ease-in-out;
    margin-bottom: 0; /* Remove default margin from H2 */
    border: 1px solid var(--border-color);
}

.article-header-toggle:hover {
    background-color: #eef2f6;
}

.article-header-toggle .iconify:first-child {
    font-size: 1.8rem;
    color: var(--primary-mitre-blue);
    flex-shrink: 0;
}

.article-header-toggle .iconify:last-child { /* Chevron icon */
    margin-left: auto;
    font-size: 1.5rem;
    color: var(--text-medium);
    transition: transform 0.2s ease-in-out;
    flex-shrink: 0;
}

.article-header-toggle[aria-expanded="false"] .iconify:first-child { /* Ikon utama teknik saat collapsed */
    transform: rotate(0deg); /* Pastikan tidak berputar */
}

.article-header-toggle[aria-expanded="false"] .iconify:last-child {
    transform: rotate(-90deg); /* Chevron down */
}

/* Specific styling for the "View Details" link within the article header in multi-article view */
.article-header-toggle .view-details-link {
    margin-left: 15px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--accent-indigo);
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--accent-indigo);
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
}

.article-header-toggle .view-details-link:hover {
    background-color: var(--accent-indigo);
    color: white;
}


/* Content Body for Collapsible Article */
.article-body-toggle {
    transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    overflow: hidden;
    height: auto; /* Default to expanded */
    opacity: 1;
    padding: 20px; /* Padding for content body */
    background-color: var(--background-card); /* Background for content body */
    border: 1px solid var(--border-color); /* Border for content body */
    border-top: none; /* Remove top border to blend with header */
    border-radius: 0 0 10px 10px; /* Round bottom corners only */
    box-shadow: var(--shadow-light); /* Shadow for content body */
}

.article-body-toggle[aria-hidden="true"] {
    height: 0 !important; /* Use !important to override JS initial 'auto' */
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Spacing between main sections/cards within an article */
.technique-detail-view .content-box {
    margin-bottom: 15px; /* Spacing between individual sections/cards */
}

/* Styling for content boxes inside article body */
.content-box-header { /* Header for sections within article */
    background-color: #eef4f8;
    padding: 15px 20px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0; /* Only top corners */
}

.content-box-body { /* Body for sections within article */
    padding: 20px;
    font-size: 0.95rem; /* Base font size, reverted from 0.75em for specific elements */
    color: var(--text-medium);
    border-radius: 0 0 8px 8px; /* Only bottom corners */
}

/* IMPORTANT: Styling for ULs directly within content-box-body for lists like Mitigation, Tools, Analyst Notes */
.content-box-body ul {
    list-style: none; /* Remove bullet points */
    padding: 0;      /* Remove default left padding */
    margin: 0;       /* Remove default margin */
}

.content-box-body ul li {
    display: flex; /* Use flexbox to align icon and text */
    align-items: flex-start; /* Align items to the start in case of multi-line text */
    gap: 8px; /* Space between icon and text */
    margin-bottom: 8px; /* Space between list items */
}

.content-box-body ul li .iconify {
    flex-shrink: 0; /* Prevent icon from shrinking */
    font-size: 1.1rem; /* Standardized icon size for list items */
    color: var(--text-medium); /* Default icon color */
    margin-top: 2px; /* Small adjustment for visual alignment with text */
}


/* Adjust main content for multiple articles */
/* This class is on #content when displaying a list of techniques */
.technique-list-view .technique-detail-view {
    margin-bottom: 2.5rem; /* Space between multiple articles */
    border: none; /* Remove outer article border as individual sections have borders */
    box-shadow: none; /* Remove outer article shadow */
    padding: 0; /* Remove outer article padding */
}
.technique-list-view .technique-detail-view:not(:last-child) {
    /* Separator between articles */
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2.5rem;
}


/* Code blocks within content */
code {
    font-family: 'Fira Code', monospace;
    background-color: #e6eff4;
    color: #334155;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Links within content body */
.content-box-body a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500;
}

.content-box-body a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

/* Revert .tech-desc font-size to its base. Other elements remain affected by .content-box-body font-size. */
.content-box-body .tech-desc {
    font-size: 1em; /* Revert to 100% of parent (.content-box-body) font size, which is 0.95rem */
}

/* Styling for specific elements to reduce padding/margin and make citation superscript */
.content-box-body .content-tag {
    font-size: 0.8em; /* Slightly larger than 0.75em, adjust as needed relative to 0.95rem */
    padding: 3px 8px; /* Reduced padding */
    margin-right: 5px; /* Reduced margin */
    margin-bottom: 3px; /* Reduced margin */
    background-color: #F5F5F5; /* Light silver background */
    color: var(--text-dark); /* Ensure text is readable on light silver */
}

.content-box-body .info-tag {
    font-size: 0.8em; /* Slightly larger than 0.75em, adjust as needed relative to 0.95rem */
    padding: 3px 8px; /* Reduced padding */
    margin-right: 5px; /* Reduced margin */
    margin-bottom: 3px; /* Reduced margin */
    background-color: #F5F5F5; /* Set to light silver */
    color: var(--text-dark); /* Ensure text is readable */
}

.content-box-body .tactic-pill {
    font-size: 0.75em; /* Adjusted to 0.75em for smaller size */
    padding: 2px 6px; /* Further reduced padding */
    margin-right: 4px; /* Further reduced margin */
    margin-bottom: 2px; /* Further reduced margin */
}


.content-box-body .info-tag-label {
    /* Apply font size relative to its parent for consistency with other tags */
    font-size: 0.9em; /* Adjust as needed */
    margin-right: 8px; /* Reduced margin */
    padding: 0; /* Ensure no extra padding */
}


/* Make citation-reference superscript */
.citation-reference {
    vertical-align: super; /* Make it superscript */
    font-size: 0.7em; /* Reduce font size for superscript effect */
    border-bottom: none; /* Remove border-bottom as it looks odd on superscript */
    text-decoration: none; /* Ensure no underline */
    color: var(--primary-mitre-blue); /* Keep color */
    cursor: help;
}

/* Adjust icon size within links that are now superscript */
.citation-reference .iconify {
    font-size: 0.7em !important; /* Smaller icon for superscript, !important to override other rules if necessary */
    vertical-align: middle; /* Align icon better with text */
}

.citation-reference:hover {
    color: var(--accent-indigo);
    /* No border-bottom or underline on hover for superscript */
}


.info-tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 5px; /* Adjusted margin-bottom */
}


.checklist-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checklist-list li {
    background-color: #f8fbfd;
    border: 1px solid #e9f2f8;
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem; /* This one seems fine as is for list items */
    color: var(--text-dark);
}

.checklist-list li .iconify {
    color: var(--primary-mitre-blue);
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Right Sidebar TOC */
/* Apply sticky behavior only on wide screens */
@media (min-width: 901px) {
    .right-sidebar {
        width: 250px;
        background-color: var(--sidebar-bg);
        padding: 20px;
        box-shadow: var(--shadow-medium);
        flex-shrink: 0;
        display: block; /* Ensure visible on desktop */

        /* Make the sidebar itself sticky */
        position: sticky;
        top: calc(var(--header-height) + 20px); /* Sticks below the header + desired top margin */
        align-self: flex-start; /* Important for sticky to work within a flex container */
        height: calc(100vh - var(--header-height) - 40px); /* Adjust height to fill remaining viewport, accounting for top/bottom margins */
        overflow-y: auto; /* Allow the content *inside* the right sidebar (TOC) to scroll if it's too long */
        padding-left: 20px; /* Space from main content */
        box-sizing: border-box; /* Include padding in width */
    }

    /* TOC Container inside a sticky sidebar - no longer needs to be sticky itself */
    .toc-container {
        position: static; /* Remove sticky from toc-container on desktop */
        padding: 0; /* Remove padding if right-sidebar already handles it */
        box-shadow: none; /* Remove redundant shadow */
        width: auto; /* Reset width */
    }
    .toc-container strong {
        padding-bottom: 15px; /* Add space below heading if toc-container padding is removed */
    }

    /* Adjust TOC list items to match treenav style */
    .toc { /* Remove default list styling */
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .toc li a {
        padding: 6px 10px; /* Adjusted padding to match treenav .nav-item */
        font-size: 0.85rem; /* Adjusted font size to match treenav .nav-item */
        color: var(--text-dark); /* Match treenav .nav-item text color */
        font-weight: 400; /* Ensure lighter weight like treenav */
        text-decoration: none; /* Remove underline */
        display: flex; /* Ensure flexbox for icon alignment */
        align-items: center;
        gap: 8px; /* Match gap with treenav .nav-item */
        border-radius: 8px; /* Match border-radius of treenav items */
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Add transition for hover */
    }

    .toc li a:hover {
        background-color: #f0f4f8; /* Match treenav hover effect */
        color: var(--primary-mitre-blue); /* Match treenav hover text color */
        text-decoration: none; /* Ensure no underline on hover */
    }

    /* Standardize icon size for TOC links */
    .toc li a .iconify {
        margin-right: 0; /* Remove right margin as gap handles spacing */
        font-size: 1.1rem; /* Standardized icon size for TOC to match treenav icons */
        color: var(--text-medium); /* Match treenav .nav-item icon color */
        flex-shrink: 0; /* Prevent icon from shrinking */
    }

    /* Remove active highlight style from TOC links */
    .toc li a.active {
        /* No specific background or border for active state as per request */
        font-weight: 400; /* Revert to normal font-weight if it was bold */
        color: var(--text-dark); /* Revert to normal color if it was primary-mitre-blue */
        /* Ensure no background-color or border-left if it was previously set for active state */
        background-color: transparent; /* Explicitly set to transparent */
        border-left: none; /* Explicitly remove border */
        padding-left: 10px; /* Reset padding if border-left affected it */
    }
    .toc li a.active .iconify {
        color: var(--text-medium); /* Revert icon color */
    }
}

/* Mobile Responsiveness for .right-sidebar (retains overlay behavior) */
@media (max-width: 900px) {
    .left-sidebar {
        position: fixed;
        top: 0;
        left: -300px; /* Hide off-screen by default */
        height: 100%;
        width: 300px; /* Explicit width */
        box-sizing: border-box;
        z-index: 100;
        transition: left 0.3s ease-in-out;
        /* Ensure display: block is here or elsewhere so left property works */
        display: block; 
    }

    .left-sidebar.open {
        left: 0; /* Slide in when 'open' class is added */
    }

    .right-sidebar {
        display: none; /* Hide by default on mobile */
        position: fixed; /* Position as overlay */
        top: 0;
        right: -250px; /* Hide off-screen to the right */
        height: 100%;
        width: 250px; /* Explicit width for overlay */
        z-index: 100;
        transition: right 0.3s ease-in-out;
        box-shadow: var(--shadow-medium); /* Add shadow for overlay effect */
        overflow-y: auto; /* Allow scrolling for mobile overlay sidebar */
        padding: 20px; /* Ensure padding on mobile overlay */
    }
    .right-sidebar.open-toc {
        right: 0; /* Slide in from right */
        display: block; /* Ensure it is block when active */
    }
    /* TOC Container on mobile: Not sticky, static within the overlay sidebar */
    .toc-container {
        position: static; /* Sticky doesn't make sense for a full-height overlay */
        top: auto; /* Reset top */
        padding: 0; /* Handled by .right-sidebar padding on mobile */
        box-shadow: none; /* No shadow for full-height overlay */
    }

    /* Adjust main content padding if needed to align with the new search input */
    .main-content {
        padding-top: 0; /* Remove default top padding if the search bar is now at the very top */
    }

    /* Mobile-specific search input container adjustments */
    .main-search-container {
        padding: 15px; /* Adjust padding for mobile */
        border-bottom: none; /* Remove bottom border if it clashes with dashboard */
    }

    #main-search-input {
        margin-bottom: 0; /* Remove extra space from desktop for tighter mobile layout */
    }


    .technique-detail-view {
        padding: 15px;
    }

    .technique-detail-view h1 {
        font-size: 1.5rem;
        gap: 10px;
        margin-bottom: 20px;
    }
    .technique-detail-view h1 .iconify {
        font-size: 1.8rem;
    }
    .content-box-header {
        font-size: 1rem;
        padding: 12px 15px;
    }
    .content-box-header .iconify {
        font-size: 1.3rem;
    }
    .content-box-body {
        padding: 15px;
        font-size: 0.9rem;
    }
    .info-tag-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .info-tag-label {
        margin-bottom: 5px;
    }
    .article-header-toggle {
        font-size: 1.2rem;
        padding: 10px 15px;
        margin-bottom: 15px;
    }
    .article-header-toggle .iconify:first-child {
        font-size: 1.5rem;
    }
    .article-header-toggle .iconify:last-child {
        font-size: 1.2rem;
    }
    .article-header-toggle .view-details-link {
        margin-left: 10px;
        font-size: 0.75rem;
        padding: 4px 8px;
    }
}

/* Adjust target elements for accurate scrolling when jumping from TOC */
/* This will offset the scroll target to prevent it from being hidden by the fixed header */
/* Applied to both .content-box (for single technique view sections) and .technique-detail-view (for list view articles) */
.content-box, .technique-detail-view {
    scroll-margin-top: calc(var(--header-height) + 20px); /* Account for fixed header + some extra margin */
}

/* Popover for citations */
.citation-popover {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 0.8rem;
    z-index: 1000;
    white-space: nowrap;
    box-shadow: var(--shadow-medium);
    display: none;
}

.citation-reference {
    vertical-align: super; /* Make it superscript */
    font-size: 0.7em; /* Reduce font size for superscript effect */
    border-bottom: none; /* Remove border-bottom as it looks odd on superscript */
    text-decoration: none; /* Ensure no underline */
    color: var(--primary-mitre-blue); /* Keep color */
    cursor: help;
}

/* Adjust icon size within links that are now superscript */
.citation-reference .iconify {
    font-size: 0.7em !important; /* Smaller icon for superscript, !important to override other rules if necessary */
    vertical-align: middle; /* Align icon better with text */
}

.citation-reference:hover {
    color: var(--accent-indigo);
    /* No border-bottom or underline on hover for superscript */
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px; /* Space above pagination */
    margin-bottom: 30px; /* Space below pagination */
    padding: 15px;
    background-color: var(--background-card);
    border-radius: 8px;
    box-shadow: var(--shadow-light);
}

.pagination-btn {
    background-color: var(--primary-mitre-blue);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out;
}

.pagination-btn:hover:not(:disabled) {
    background-color: #cccccc;
    cursor: not-allowed;
}

.page-info {
    font-size: 1rem;
    color: var(--text-dark);
}

.items-per-page-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-light);
    font-size: 0.95rem;
    color: var(--text-dark);
}


/* Burger button for mobile navigation */
.burger-btn {
    display: none; /* Hidden by default for desktop, controlled by media query */
    position: fixed;
    bottom: 15px; /* Pindahkan ke kanan bawah */
    right: 15px; /* Pindahkan ke kanan bawah */
    z-index: 101;
    background-color: var(--primary-mitre-blue);
    color: white;
    border: none;
    border-radius: 50%; /* Membuat tombol lingkaran */
    width: 50px; /* Ukuran tombol */
    height: 50px; /* Ukuran tombol */
    display: flex; /* Menggunakan flexbox untuk memusatkan ikon */
    align-items: center;
    justify-content: center;
    font-size: 1.8rem; /* Ukuran ikon burger */
    cursor: pointer;
    box-shadow: var(--shadow-medium);
}

/* Print Styles */
@media print {
    .page-header, .left-sidebar, .right-sidebar, .burger-btn, .pagination-controls, .main-search-container, .breadcrumb, hr {
        display: none !important;
    }
    body {
        background-color: white;
        color: black;
    }
    .main-content {
        width: 100%;
        padding: 0;
        box-shadow: none;
        background-color: white;
    }
    .content-box, .technique-detail-view {
        border: 1px solid #ddd;
        box-shadow: none;
        margin-bottom: 15px;
        page-break-inside: avoid;
    }
    .content-box-header {
        background-color: #f0f0f0;
        border-bottom: 1px solid #ddd;
    }
    .content-box-body {
        font-size: 0.9em;
    }
    .content-box-body p, .checklist-list li {
        font-size: 0.9em;
    }
    a {
        text-decoration: underline;
        color: #000;
    }
    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* Add this to your style.css */
.citation-popover {
    /* Existing styles like position, background, color, padding, border-radius, font-size, z-index, white-space, box-shadow */
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.citation-popover.is-open {
    display: block; /* Make it visible */
    opacity: 1; /* Fade it in */
}