/* 1. Universal Terminal Container (Targets all pre tags containing a clipboard button) */
pre:has(button.md-clipboard) {
    background-color: #1e1e1e !important; /* Dark terminal background */
    color: #f8f9fa !important;            /* Off-white text color */
    padding: 2.5rem 1rem 1rem 1rem !important; /* Extra top padding for the button */
    border-radius: 0.375rem !important;   /* Bootstrap standard rounded corners */
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    position: relative;                   /* Anchors the copy button */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Subtle depth shadow */
    margin-bottom: 1.5rem;
    display: block;
    overflow-x: auto;                     /* Horizontal scrollbar for long code lines */
}

/* 2. Universal Code Text & Terminal Prompt ($) */
pre:has(button.md-clipboard) code {
    color: #f8f9fa !important;
    font-size: 0.875rem !important;
    white-space: pre !important;
    display: block;
}

/* Adds a Linux terminal '$' prompt automatically before the code */
pre:has(button.md-clipboard) code::before {
    content: "$ ";
    color: #28a745; /* Bootstrap green prompt color */
    font-weight: bold;
}

/* 3. Universal Copy Button (Positioned top-right for all blocks) */
pre button.md-clipboard {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 10;
}

/* Hover effect for the copy button */
pre button.md-clipboard:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Fallback text label if the button doesn't have an icon image */
pre button.md-clipboard::after {
    content: "Copy";
}