<?php
$path = '../../';
require_once $path . 'core/includes/header.inc.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex,nofollow">
    <title>Admin Style Guide</title>

    <!-- Admin LESS (same approach as admin panel) -->
    <link rel="stylesheet/less" href="/core/admin/css/mtc_admin_style.less" media="screen">
    <script src="/core/js/less.js"></script>

    <style>
        /* Style guide layout — scoped to avoid conflicts */
        .sg-body {
            display: flex;
            min-height: 100vh;
            background: #f5f6f8;
        }
        .sg-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 240px;
            height: 100vh;
            overflow-y: auto;
            background: #262d3b;
            padding: 20px 0;
            z-index: 1000;
        }
        .sg-sidebar h1 {
            color: #fff;
            font-size: 16px;
            padding: 0 20px 15px;
            margin: 0 0 10px;
            border-bottom: 1px solid #3a4255;
            font-weight: 600;
        }
        .sg-sidebar a {
            display: block;
            color: #a0aab8;
            padding: 7px 20px;
            text-decoration: none;
            font-size: 13px;
        }
        .sg-sidebar a:hover,
        .sg-sidebar a.active {
            color: #fff;
            background: rgba(255,255,255,0.07);
        }
        .sg-sidebar .sg-nav-group {
            margin-bottom: 5px;
        }
        .sg-sidebar .sg-nav-group-title {
            color: #6b7a8d;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 15px 20px 5px;
        }
        .sg-main {
            margin-left: 240px;
            padding: 40px;
            width: calc(100% - 240px);
            max-width: 1100px;
        }
        .sg-section {
            margin-bottom: 60px;
        }
        .sg-section-title {
            font-size: 24px;
            font-weight: 700;
            color: #323234;
            margin: 0 0 10px;
            padding-bottom: 10px;
            border-bottom: 2px solid #0f55c4;
        }
        .sg-section-desc {
            color: #666;
            font-size: 13px;
            margin: 0 0 25px;
        }
        .sg-component {
            margin-bottom: 35px;
        }
        .sg-component-title {
            font-size: 15px;
            font-weight: 600;
            color: #323234;
            margin: 0 0 12px;
        }
        .sg-example {
            background: #fff;
            border: 1px solid #d7dce4;
            border-radius: 4px 4px 0 0;
            padding: 25px;
            position: relative;
            overflow: auto;
        }
        .sg-example::after {
            content: "";
            display: table;
            clear: both;
        }
        .sg-example--dark {
            background: #262d3b;
        }
        .sg-example--grey {
            background: #f1f4f8;
        }
        .sg-code {
            background: #2d2d2d;
            border: 1px solid #d7dce4;
            border-top: none;
            border-radius: 0 0 4px 4px;
            padding: 0;
            margin: 0;
            position: relative;
        }
        .sg-code pre {
            margin: 0;
            padding: 15px;
            overflow-x: auto;
            font-size: 12px;
            line-height: 1.5;
            color: #ccc;
            white-space: pre;
        }
        .sg-code pre code {
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        }
        .sg-code-toggle {
            position: absolute;
            top: 8px;
            right: 8px;
            background: #444;
            color: #ccc;
            border: none;
            border-radius: 3px;
            padding: 3px 8px;
            font-size: 11px;
            cursor: pointer;
        }
        .sg-code-toggle:hover {
            background: #555;
            color: #fff;
        }
        .sg-code.collapsed pre {
            display: none;
        }

        /* Color swatches */
        .sg-swatches {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        .sg-swatch {
            width: 140px;
        }
        .sg-swatch-color {
            width: 100%;
            height: 70px;
            border-radius: 4px;
            border: 1px solid rgba(0,0,0,0.1);
            margin-bottom: 6px;
        }
        .sg-swatch-label {
            font-size: 12px;
            font-weight: 600;
            color: #323234;
        }
        .sg-swatch-value {
            font-size: 11px;
            color: #888;
            font-family: monospace;
        }

        /* Spacing scale */
        .sg-spacing-row {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 8px;
        }
        .sg-spacing-bar {
            height: 20px;
            background: #0f55c4;
            border-radius: 2px;
            opacity: 0.6;
        }
        .sg-spacing-label {
            font-size: 12px;
            color: #666;
            font-family: monospace;
            min-width: 80px;
        }

        /* Inline helpers for the guide */
        .sg-inline-items {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }
        .sg-inline-items > * {
            float: none !important;
        }
        .sg-row-colors tr td {
            padding: 10px 15px;
        }
        .sg-note {
            font-size: 12px;
            color: #888;
            font-style: italic;
            margin-top: 8px;
        }

        /* Fix floats in examples */
        .sg-example .btn,
        .sg-example form input[type="submit"],
        .sg-example form .submit {
            float: none !important;
            display: inline-block !important;
        }
        .sg-example form .row {
            float: none;
            clear: both;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .sg-example form .row label {
            line-height: 34px;
        }
        .sg-example ul.pagination {
            float: none;
        }
        .sg-example ul.breadcrumbs {
            float: none;
        }
    </style>
</head>
<body>
<div class="sg-body">

    <!-- Sidebar Navigation -->
    <nav class="sg-sidebar">
        <h1>Admin Style Guide</h1>
        <div class="sg-nav-group">
            <div class="sg-nav-group-title">Foundation</div>
            <a href="#colors">Colors</a>
            <a href="#typography">Typography</a>
            <a href="#spacing">Spacing &amp; Radius</a>
        </div>
        <div class="sg-nav-group">
            <div class="sg-nav-group-title">Components</div>
            <a href="#buttons">Buttons</a>
            <a href="#forms">Forms</a>
            <a href="#tables">Tables</a>
            <a href="#navigation">Navigation</a>
            <a href="#messages">Messages &amp; Alerts</a>
            <a href="#overlays">Overlays</a>
        </div>
        <div class="sg-nav-group">
            <div class="sg-nav-group-title">Layout</div>
            <a href="#layout">Layout &amp; Grid</a>
        </div>
        <div class="sg-nav-group">
            <div class="sg-nav-group-title">Plugin Components</div>
            <a href="#tags">Tags / Badges</a>
            <a href="#cards">Cards (Clinic)</a>
            <a href="#details-table">Details Table</a>
            <a href="#formbuilder">FormBuilder</a>
            <a href="#refund-table">Refund Table</a>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="sg-main">

        <!-- ============================================== -->
        <!-- COLORS -->
        <!-- ============================================== -->
        <section class="sg-section" id="colors">
            <h2 class="sg-section-title">Colors</h2>
            <p class="sg-section-desc">LESS variables that define the admin color palette. All are also exposed as CSS custom properties on <code>:root</code>.</p>

            <div class="sg-component">
                <h3 class="sg-component-title">Primary Colors</h3>
                <div class="sg-swatches">
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#0f55c4"></div>
                        <div class="sg-swatch-label">Primary / MTC Blue</div>
                        <div class="sg-swatch-value">@primary_color / @mtc_blue<br>#0f55c4</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#4ed2b5"></div>
                        <div class="sg-swatch-label">Secondary</div>
                        <div class="sg-swatch-value">@secondary_color<br>#4ed2b5</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#323232"></div>
                        <div class="sg-swatch-label">Dark</div>
                        <div class="sg-swatch-value">@dark_color<br>#323232</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#edf0f2"></div>
                        <div class="sg-swatch-label">Light</div>
                        <div class="sg-swatch-value">@light_color<br>#edf0f2</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#b7babc"></div>
                        <div class="sg-swatch-label">Medium</div>
                        <div class="sg-swatch-value">@med_color<br>#b7babc</div>
                    </div>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Text Colors</h3>
                <div class="sg-swatches">
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#323234"></div>
                        <div class="sg-swatch-label">Text</div>
                        <div class="sg-swatch-value">@text_color<br>#323234</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#edf0f2; border: 1px solid #ccc"></div>
                        <div class="sg-swatch-label">Light Text</div>
                        <div class="sg-swatch-value">@light_text_color<br>#edf0f2</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#fff; border: 1px solid #ccc"></div>
                        <div class="sg-swatch-label">Dark Text (on dark bg)</div>
                        <div class="sg-swatch-value">@dark_text_color<br>#fff</div>
                    </div>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Alert Colors</h3>
                <div class="sg-swatches">
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#e74c3c"></div>
                        <div class="sg-swatch-label">Alert / Error</div>
                        <div class="sg-swatch-value">@alert_color<br>#e74c3c</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#f1c40f"></div>
                        <div class="sg-swatch-label">Information</div>
                        <div class="sg-swatch-value">@information_color<br>#f1c40f</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#2ecc71"></div>
                        <div class="sg-swatch-label">Success</div>
                        <div class="sg-swatch-value">@success_color<br>#2ecc71</div>
                    </div>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Border &amp; Background</h3>
                <div class="sg-swatches">
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#d7dce4"></div>
                        <div class="sg-swatch-label">Border</div>
                        <div class="sg-swatch-value">@border_color<br>#d7dce4</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#edf0f2"></div>
                        <div class="sg-swatch-label">Background</div>
                        <div class="sg-swatch-value">@background_color<br>#edf0f2</div>
                    </div>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Button-Specific Colors</h3>
                <div class="sg-swatches">
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#0f55c4"></div>
                        <div class="sg-swatch-label">Button Primary</div>
                        <div class="sg-swatch-value">@mtc_blue<br>#0f55c4</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#dc3333"></div>
                        <div class="sg-swatch-label">Button Delete</div>
                        <div class="sg-swatch-value">@btn_delete_bg<br>#dc3333</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#942929"></div>
                        <div class="sg-swatch-label">Button Red</div>
                        <div class="sg-swatch-value">@btn_red_bg<br>#942929</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#349E3C"></div>
                        <div class="sg-swatch-label">Button Green</div>
                        <div class="sg-swatch-value">@btn_green_top<br>#349E3C</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#cccccc"></div>
                        <div class="sg-swatch-label">Button Grey</div>
                        <div class="sg-swatch-value">@btn_grey_top<br>#cccccc</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#333333"></div>
                        <div class="sg-swatch-label">Button Black</div>
                        <div class="sg-swatch-value">@btn_black_top<br>#333333</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#565656"></div>
                        <div class="sg-swatch-label">Cancel</div>
                        <div class="sg-swatch-value">@btn_cancel_top<br>#565656</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#297E01"></div>
                        <div class="sg-swatch-label">Secondary Action</div>
                        <div class="sg-swatch-value">@btn_green_bg<br>#297E01</div>
                    </div>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Sidebar / CMS Colors</h3>
                <div class="sg-swatches">
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#262d3b"></div>
                        <div class="sg-swatch-label">Sidebar BG</div>
                        <div class="sg-swatch-value">@sidebar_bg<br>#262d3b</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#2e3748"></div>
                        <div class="sg-swatch-label">Sidebar Sub BG</div>
                        <div class="sg-swatch-value">@sidebar_sub_bg<br>#2e3748</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#1a2030"></div>
                        <div class="sg-swatch-label">Sidebar Search BG</div>
                        <div class="sg-swatch-value">@sidebar_search_bg<br>#1a2030</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#6b7280"></div>
                        <div class="sg-swatch-label">Sidebar Muted Text</div>
                        <div class="sg-swatch-value">@sidebar_muted_text<br>#6b7280</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#054bbb"></div>
                        <div class="sg-swatch-label">Tab Border Active</div>
                        <div class="sg-swatch-value">darken(@mtc_blue, 5%)<br>#054bbb</div>
                    </div>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Table Row Status Colors</h3>
                <div class="sg-swatches">
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#ffdca8"></div>
                        <div class="sg-swatch-label">Patient Notes</div>
                        <div class="sg-swatch-value">@row_patient_notes<br>#ffdca8</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#fdfcd9"></div>
                        <div class="sg-swatch-label">Recurring</div>
                        <div class="sg-swatch-value">@row_recurring<br>#fdfcd9</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#f7e981"></div>
                        <div class="sg-swatch-label">Waiting</div>
                        <div class="sg-swatch-value">@row_waiting<br>#f7e981</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#ccf714"></div>
                        <div class="sg-swatch-label">Private Rx</div>
                        <div class="sg-swatch-value">@row_private_rx<br>#ccf714</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#ffcc66"></div>
                        <div class="sg-swatch-label">Active Item</div>
                        <div class="sg-swatch-value">@row_active_item<br>#ffcc66</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#e5fdff"></div>
                        <div class="sg-swatch-label">Message History</div>
                        <div class="sg-swatch-value">@row_message_history<br>#e5fdff</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#bbdced"></div>
                        <div class="sg-swatch-label">Unread Admin</div>
                        <div class="sg-swatch-value">@row_unread_admin<br>#bbdced</div>
                    </div>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Chat Bubble Colors</h3>
                <div class="sg-swatches">
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#46519c"></div>
                        <div class="sg-swatch-label">Chat Left</div>
                        <div class="sg-swatch-value">@chat_left_bg<br>#46519c</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#9c7618"></div>
                        <div class="sg-swatch-label">Chat Right</div>
                        <div class="sg-swatch-value">@chat_right_bg<br>#9c7618</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#9b9b9c"></div>
                        <div class="sg-swatch-label">Chat Private</div>
                        <div class="sg-swatch-value">@chat_private_bg<br>#9b9b9c</div>
                    </div>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Message Colors</h3>
                <div class="sg-swatches">
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#e5f4bb"></div>
                        <div class="sg-swatch-label">Success BG</div>
                        <div class="sg-swatch-value">@msg_success_bg<br>#e5f4bb</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#d1e792"></div>
                        <div class="sg-swatch-label">Success Border</div>
                        <div class="sg-swatch-value">@msg_success_border<br>#d1e792</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#52a61a"></div>
                        <div class="sg-swatch-label">Success Text</div>
                        <div class="sg-swatch-value">@msg_success_text<br>#52a61a</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#fce3e3"></div>
                        <div class="sg-swatch-label">Error BG</div>
                        <div class="sg-swatch-value">@msg_error_bg<br>#fce3e3</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#f4c9c9"></div>
                        <div class="sg-swatch-label">Error Border</div>
                        <div class="sg-swatch-value">@msg_error_border<br>#f4c9c9</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#ce2b2b"></div>
                        <div class="sg-swatch-label">Error Text</div>
                        <div class="sg-swatch-value">@error_text_color<br>#ce2b2b</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#fcf8e3"></div>
                        <div class="sg-swatch-label">Alert BG</div>
                        <div class="sg-swatch-value">@msg_alert_bg<br>#fcf8e3</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#E0CBA2"></div>
                        <div class="sg-swatch-label">Alert Border</div>
                        <div class="sg-swatch-value">@msg_alert_border<br>#E0CBA2</div>
                    </div>
                    <div class="sg-swatch">
                        <div class="sg-swatch-color" style="background:#c09853"></div>
                        <div class="sg-swatch-label">Alert Text</div>
                        <div class="sg-swatch-value">@msg_alert_text<br>#c09853</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- TYPOGRAPHY -->
        <!-- ============================================== -->
        <section class="sg-section" id="typography">
            <h2 class="sg-section-title">Typography</h2>
            <p class="sg-section-desc">Fonts: <code>@primary_font</code> / <code>@body_font</code> = Open Sans. Custom weights: OpenSansSemibold, OpenSansBold. Base font size: 13px.</p>

            <div class="sg-component">
                <h3 class="sg-component-title">Headings</h3>
                <div class="sg-example">
                    <h1>Heading 1</h1>
                    <h2>Heading 2</h2>
                    <h3>Heading 3</h3>
                    <h4>Heading 4</h4>
                    <h5>Heading 5</h5>
                    <h6>Heading 6</h6>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;h1&gt;Heading 1&lt;/h1&gt;
&lt;h2&gt;Heading 2&lt;/h2&gt;
&lt;h3&gt;Heading 3&lt;/h3&gt;
&lt;h4&gt;Heading 4&lt;/h4&gt;
&lt;h5&gt;Heading 5&lt;/h5&gt;
&lt;h6&gt;Heading 6&lt;/h6&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Body Text &amp; Links</h3>
                <div class="sg-example">
                    <p>This is regular body text in the admin panel. The base font size is 13px using Open Sans.</p>
                    <p><strong>Bold text</strong> uses font-weight: bold.</p>
                    <p><em>Italic text</em> for emphasis.</p>
                    <p><a href="#">This is a link</a> — default admin link styling.</p>
                    <p style="font-family: 'OpenSansSemibold'">This uses the OpenSansSemibold font face (used for buttons, tabs).</p>
                    <p style="font-family: 'OpenSansBold'">This uses the OpenSansBold font face (used for messages).</p>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Font Families</h3>
                <div class="sg-example">
                    <table class="manage-items" style="width:auto">
                        <thead>
                            <tr>
                                <th style="padding:8px 15px">Variable</th>
                                <th style="padding:8px 15px">Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td style="padding:8px 15px"><code>@primary_font</code></td><td style="padding:8px 15px">'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif</td></tr>
                            <tr><td style="padding:8px 15px"><code>@body_font</code></td><td style="padding:8px 15px">'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif</td></tr>
                            <tr><td style="padding:8px 15px"><code>OpenSansSemibold</code></td><td style="padding:8px 15px; font-family:'OpenSansSemibold'">Custom @font-face (buttons, tabs, nav)</td></tr>
                            <tr><td style="padding:8px 15px"><code>OpenSansBold</code></td><td style="padding:8px 15px; font-family:'OpenSansBold'">Custom @font-face (messages, emphasis)</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- SPACING & RADIUS -->
        <!-- ============================================== -->
        <section class="sg-section" id="spacing">
            <h2 class="sg-section-title">Spacing &amp; Radius</h2>

            <div class="sg-component">
                <h3 class="sg-component-title">Border Radius</h3>
                <div class="sg-example">
                    <div style="display:flex; gap:20px; align-items:end">
                        <div style="text-align:center">
                            <div style="width:80px;height:80px;background:#0f55c4;border-radius:4px"></div>
                            <div style="margin-top:5px;font-size:12px"><code>@border_radius</code><br>4px</div>
                        </div>
                        <div style="text-align:center">
                            <div style="width:80px;height:80px;background:#0f55c4;border-radius:5px"></div>
                            <div style="margin-top:5px;font-size:12px">Buttons<br>5px</div>
                        </div>
                        <div style="text-align:center">
                            <div style="width:80px;height:80px;background:#0f55c4;border-radius:10px"></div>
                            <div style="margin-top:5px;font-size:12px">Overlays / Cards<br>10px</div>
                        </div>
                        <div style="text-align:center">
                            <div style="width:80px;height:80px;background:#0f55c4;border-radius:100%"></div>
                            <div style="margin-top:5px;font-size:12px">Circles<br>100%</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Common Spacing Values</h3>
                <div class="sg-example">
                    <div class="sg-spacing-row">
                        <div class="sg-spacing-label">5px</div>
                        <div class="sg-spacing-bar" style="width:5px"></div>
                        <span style="font-size:11px;color:#888">Button margin</span>
                    </div>
                    <div class="sg-spacing-row">
                        <div class="sg-spacing-label">8px</div>
                        <div class="sg-spacing-bar" style="width:8px"></div>
                        <span style="font-size:11px;color:#888">Input padding</span>
                    </div>
                    <div class="sg-spacing-row">
                        <div class="sg-spacing-label">10px</div>
                        <div class="sg-spacing-bar" style="width:10px"></div>
                        <span style="font-size:11px;color:#888">Nav item padding, breadcrumb margin</span>
                    </div>
                    <div class="sg-spacing-row">
                        <div class="sg-spacing-label">15px</div>
                        <div class="sg-spacing-bar" style="width:15px"></div>
                        <span style="font-size:11px;color:#888">Button horizontal padding, card padding</span>
                    </div>
                    <div class="sg-spacing-row">
                        <div class="sg-spacing-label">20px</div>
                        <div class="sg-spacing-bar" style="width:20px"></div>
                        <span style="font-size:11px;color:#888">@gutter_width, message margin-bottom, styledForm padding</span>
                    </div>
                    <div class="sg-spacing-row">
                        <div class="sg-spacing-label">40px</div>
                        <div class="sg-spacing-bar" style="width:40px"></div>
                        <span style="font-size:11px;color:#888">.rightcol padding</span>
                    </div>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Breakpoints</h3>
                <div class="sg-example">
                    <table class="manage-items" style="width:auto">
                        <thead>
                            <tr>
                                <th style="padding:8px 15px">Variable</th>
                                <th style="padding:8px 15px">Query</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td style="padding:8px 15px"><code>@desktop</code></td><td style="padding:8px 15px">min-width: 1220px</td></tr>
                            <tr><td style="padding:8px 15px"><code>@tablet</code></td><td style="padding:8px 15px">min-width: 641px and max-width: 1219px</td></tr>
                            <tr><td style="padding:8px 15px"><code>@medium</code></td><td style="padding:8px 15px">min-width: 801px and max-width: 1200px</td></tr>
                            <tr><td style="padding:8px 15px"><code>@mobile</code></td><td style="padding:8px 15px">max-width: 640px</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- BUTTONS -->
        <!-- ============================================== -->
        <section class="sg-section" id="buttons">
            <h2 class="sg-section-title">Buttons</h2>
            <p class="sg-section-desc">Base class: <code>.btn</code>. Also applies to <code>form input[type="submit"]</code> and <code>form .submit</code>.</p>

            <div class="sg-component">
                <h3 class="sg-component-title">Primary Button</h3>
                <div class="sg-example">
                    <div class="sg-inline-items">
                        <a class="btn" href="#">Primary Button</a>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;a class="btn" href="#"&gt;Primary Button&lt;/a&gt;

&lt;!-- Also works on submit inputs --&gt;
&lt;form&gt;
    &lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Color Variants</h3>
                <div class="sg-example">
                    <div class="sg-inline-items">
                        <a class="btn" href="#">Default (Blue)</a>
                        <a class="btn delete" href="#">Delete</a>
                        <a class="btn btn-red" href="#">Red</a>
                        <a class="btn btn-green" href="#">Green</a>
                        <a class="btn btn-grey" href="#">Grey</a>
                        <a class="btn btn-black" href="#">Black</a>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;a class="btn" href="#"&gt;Default (Blue)&lt;/a&gt;
&lt;a class="btn delete" href="#"&gt;Delete&lt;/a&gt;
&lt;a class="btn btn-red" href="#"&gt;Red&lt;/a&gt;
&lt;a class="btn btn-green" href="#"&gt;Green&lt;/a&gt;
&lt;a class="btn btn-grey" href="#"&gt;Grey&lt;/a&gt;
&lt;a class="btn btn-black" href="#"&gt;Black&lt;/a&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Size &amp; State Variants</h3>
                <div class="sg-example">
                    <div class="sg-inline-items">
                        <a class="btn" href="#">Default Size</a>
                        <a class="btn btn-smaller" href="#">Smaller</a>
                        <a class="btn btn-secondary" href="#">Secondary</a>
                        <a class="btn disabled" href="#">Disabled</a>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;a class="btn" href="#"&gt;Default Size&lt;/a&gt;
&lt;a class="btn btn-smaller" href="#"&gt;Smaller&lt;/a&gt;
&lt;a class="btn btn-secondary" href="#"&gt;Secondary&lt;/a&gt;
&lt;a class="btn disabled" href="#"&gt;Disabled&lt;/a&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Special Buttons</h3>
                <div class="sg-example">
                    <div class="sg-inline-items">
                        <a class="btn secondaryActionButton" href="#">Secondary Action</a>
                    </div>
                    <div style="margin-top:15px">
                        <div class="btn-section">
                            <input type="submit" value="Save" id="btn_save">
                        </div>
                        <div class="btn-section">
                            <input type="submit" value="Cancel" id="btn_cancel">
                        </div>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;a class="btn secondaryActionButton" href="#"&gt;Secondary Action&lt;/a&gt;

&lt;!-- Save/Cancel button section --&gt;
&lt;div class="btn-section"&gt;
    &lt;input type="submit" value="Save" id="btn_save"&gt;
&lt;/div&gt;
&lt;div class="btn-section"&gt;
    &lt;input type="submit" value="Cancel" id="btn_cancel"&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Button Groups</h3>
                <div class="sg-example">
                    <div style="max-width: 200px">
                        <div class="buttonGroups">
                            <a class="btn" href="#">Action One</a>
                            <a class="btn btn-green" href="#">Action Two</a>
                            <a class="btn delete" href="#">Delete</a>
                        </div>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div class="buttonGroups"&gt;
    &lt;a class="btn" href="#"&gt;Action One&lt;/a&gt;
    &lt;a class="btn btn-green" href="#"&gt;Action Two&lt;/a&gt;
    &lt;a class="btn delete" href="#"&gt;Delete&lt;/a&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Delete Link</h3>
                <div class="sg-example">
                    <a class="deleteBtn" href="#">Delete this item</a>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;a class="deleteBtn" href="#"&gt;Delete this item&lt;/a&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- FORMS -->
        <!-- ============================================== -->
        <section class="sg-section" id="forms">
            <h2 class="sg-section-title">Forms</h2>
            <p class="sg-section-desc">Two form systems: admin default (label + input rows) and <code>.styledForm</code> (stacked, full-width).</p>

            <div class="sg-component">
                <h3 class="sg-component-title">Admin Form (Default)</h3>
                <div class="sg-example">
                    <form onsubmit="return false">
                        <div class="row">
                            <label>Text Input</label>
                            <input type="text" placeholder="Enter text...">
                        </div>
                        <div class="row">
                            <label>Short Input</label>
                            <input type="text" class="short" placeholder="Short">
                        </div>
                        <div class="row">
                            <label>Select</label>
                            <select>
                                <option>Option 1</option>
                                <option>Option 2</option>
                                <option>Option 3</option>
                            </select>
                        </div>
                        <div class="row">
                            <label>Textarea</label>
                            <textarea rows="3" placeholder="Enter text..."></textarea>
                        </div>
                        <div class="row">
                            <label>Readonly</label>
                            <input type="text" readonly value="Read only value">
                        </div>
                    </form>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;form&gt;
    &lt;div class="row"&gt;
        &lt;label&gt;Text Input&lt;/label&gt;
        &lt;input type="text" placeholder="Enter text..."&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;label&gt;Short Input&lt;/label&gt;
        &lt;input type="text" class="short" placeholder="Short"&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;label&gt;Select&lt;/label&gt;
        &lt;select&gt;
            &lt;option&gt;Option 1&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;label&gt;Textarea&lt;/label&gt;
        &lt;textarea rows="3"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;label&gt;Readonly&lt;/label&gt;
        &lt;input type="text" readonly value="Read only"&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Checkbox Row</h3>
                <div class="sg-example">
                    <form onsubmit="return false">
                        <div class="row checkboxRow">
                            <input type="checkbox" id="sg-check1" checked>
                            <label for="sg-check1">Checkbox with label on right</label>
                        </div>
                        <div class="row checkboxes" style="margin-top:10px;">
                            <label style="width:16%;float:left;font-weight:bold">Options</label>
                            <input type="checkbox" id="sg-check2">
                            <label for="sg-check2">Option A</label>
                            <input type="checkbox" id="sg-check3">
                            <label for="sg-check3">Option B</label>
                            <input type="checkbox" id="sg-check4">
                            <label for="sg-check4">Option C</label>
                        </div>
                    </form>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;!-- Single checkbox --&gt;
&lt;div class="row checkboxRow"&gt;
    &lt;input type="checkbox" id="check1" checked&gt;
    &lt;label for="check1"&gt;Label on right&lt;/label&gt;
&lt;/div&gt;

&lt;!-- Inline checkboxes with label --&gt;
&lt;div class="row checkboxes"&gt;
    &lt;label&gt;Options&lt;/label&gt;
    &lt;input type="checkbox" id="optA"&gt;
    &lt;label for="optA"&gt;Option A&lt;/label&gt;
    &lt;input type="checkbox" id="optB"&gt;
    &lt;label for="optB"&gt;Option B&lt;/label&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Validation States (Admin Form)</h3>
                <div class="sg-example">
                    <form onsubmit="return false">
                        <div class="row errorWrap">
                            <label>Error Field</label>
                            <input type="text" value="Invalid value">
                            <span class="validationMessage">This field is required</span>
                        </div>
                    </form>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div class="row errorWrap"&gt;
    &lt;label&gt;Error Field&lt;/label&gt;
    &lt;input type="text" value="Invalid value"&gt;
    &lt;span class="validationMessage"&gt;This field is required&lt;/span&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Styled Form</h3>
                <div class="sg-example">
                    <form class="styledForm" onsubmit="return false" style="padding:0">
                        <div class="row">
                            <label>Full Name</label>
                            <div class="inputWrap">
                                <input type="text" placeholder="Enter full name...">
                            </div>
                        </div>
                        <div class="row">
                            <label>Email Address</label>
                            <div class="inputWrap">
                                <input type="email" placeholder="Enter email...">
                            </div>
                        </div>
                        <div class="row">
                            <label>Message</label>
                            <div class="inputWrap">
                                <textarea rows="3" placeholder="Enter message..."></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;form class="styledForm"&gt;
    &lt;div class="row"&gt;
        &lt;label&gt;Full Name&lt;/label&gt;
        &lt;div class="inputWrap"&gt;
            &lt;input type="text" placeholder="Enter full name..."&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;label&gt;Email Address&lt;/label&gt;
        &lt;div class="inputWrap"&gt;
            &lt;input type="email" placeholder="Enter email..."&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Styled Form — Inline Layout</h3>
                <div class="sg-example">
                    <form class="styledForm formInline" onsubmit="return false" style="padding:0">
                        <div class="row">
                            <label>Label</label>
                            <div class="inputWrap">
                                <input type="text" placeholder="Inline form input">
                            </div>
                        </div>
                        <div class="row">
                            <label>Select</label>
                            <div class="inputWrap">
                                <select>
                                    <option>Choose an option</option>
                                    <option>Option A</option>
                                    <option>Option B</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;form class="styledForm formInline"&gt;
    &lt;div class="row"&gt;
        &lt;label&gt;Label&lt;/label&gt;
        &lt;div class="inputWrap"&gt;
            &lt;input type="text"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Styled Form — Validation States</h3>
                <div class="sg-example">
                    <form class="styledForm" onsubmit="return false" style="padding:0">
                        <div class="row errorWrap">
                            <label>Error State</label>
                            <div class="inputWrap">
                                <input type="text" value="Invalid value">
                            </div>
                            <div class="validationMessage">This field has an error</div>
                        </div>
                        <div class="row successWrap">
                            <label>Success State</label>
                            <div class="inputWrap">
                                <input type="text" value="Valid value">
                            </div>
                            <div class="validationMessage">This field is valid</div>
                        </div>
                    </form>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;!-- Error --&gt;
&lt;div class="row errorWrap"&gt;
    &lt;label&gt;Error State&lt;/label&gt;
    &lt;div class="inputWrap"&gt;
        &lt;input type="text" value="Invalid"&gt;
    &lt;/div&gt;
    &lt;div class="validationMessage"&gt;Error message&lt;/div&gt;
&lt;/div&gt;

&lt;!-- Success --&gt;
&lt;div class="row successWrap"&gt;
    &lt;label&gt;Success State&lt;/label&gt;
    &lt;div class="inputWrap"&gt;
        &lt;input type="text" value="Valid"&gt;
    &lt;/div&gt;
    &lt;div class="validationMessage"&gt;Looks good&lt;/div&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Styled Form — Custom Checkboxes &amp; Radios</h3>
                <div class="sg-example">
                    <form class="styledForm" onsubmit="return false" style="padding:0">
                        <div class="row">
                            <input type="checkbox" id="sg-styled-check1">
                            <label for="sg-styled-check1">Styled checkbox (unchecked)</label>
                        </div>
                        <div class="row">
                            <input type="checkbox" id="sg-styled-check2" checked>
                            <label for="sg-styled-check2">Styled checkbox (checked)</label>
                        </div>
                        <div class="row" style="margin-top: 10px">
                            <input type="radio" name="sg-radio" id="sg-styled-radio1">
                            <label for="sg-styled-radio1">Styled radio A</label>
                        </div>
                        <div class="row">
                            <input type="radio" name="sg-radio" id="sg-styled-radio2" checked>
                            <label for="sg-styled-radio2">Styled radio B (selected)</label>
                        </div>
                    </form>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;!-- Checkbox (inside .styledForm) --&gt;
&lt;input type="checkbox" id="myCheck"&gt;
&lt;label for="myCheck"&gt;Styled checkbox&lt;/label&gt;

&lt;!-- Radio (inside .styledForm) --&gt;
&lt;input type="radio" name="group" id="myRadio"&gt;
&lt;label for="myRadio"&gt;Styled radio&lt;/label&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Styled Form — Toggle Switch</h3>
                <div class="sg-example">
                    <form class="styledForm" onsubmit="return false" style="padding:0">
                        <div class="row" style="display:flex;align-items:center;gap:10px">
                            <input type="checkbox" class="checkboxToggle" id="sg-toggle1">
                            <label for="sg-toggle1"></label>
                            <span>Toggle off</span>
                        </div>
                        <div class="row" style="display:flex;align-items:center;gap:10px">
                            <input type="checkbox" class="checkboxToggle" id="sg-toggle2" checked>
                            <label for="sg-toggle2"></label>
                            <span>Toggle on</span>
                        </div>
                    </form>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;input type="checkbox" class="checkboxToggle" id="toggle1"&gt;
&lt;label for="toggle1"&gt;&lt;/label&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Styled Form — Button Inline (Input + Button)</h3>
                <div class="sg-example">
                    <form class="styledForm" onsubmit="return false" style="padding:0">
                        <div class="row">
                            <label>Search</label>
                            <div class="inputWrap">
                                <div class="buttonInline">
                                    <input type="text" placeholder="Search...">
                                    <button class="btn" type="button">Go</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div class="buttonInline"&gt;
    &lt;input type="text" placeholder="Search..."&gt;
    &lt;button class="btn" type="button"&gt;Go&lt;/button&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Clinic Form (.newForm)</h3>
                <div class="sg-example">
                    <form class="newForm" onsubmit="return false">
                        <div class="row">
                            <div class="formLabel">Patient Name <span class="formRequired">*</span></div>
                            <input type="text" placeholder="Enter name...">
                        </div>
                        <div class="row">
                            <div class="formLabel">Dosage</div>
                            <input type="number" class="short" placeholder="0">
                        </div>
                        <div class="row">
                            <div class="formLabel">Type</div>
                            <select>
                                <option>Select type...</option>
                                <option>Type A</option>
                                <option>Type B</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;form class="newForm"&gt;
    &lt;div class="row"&gt;
        &lt;div class="formLabel"&gt;Label &lt;span class="formRequired"&gt;*&lt;/span&gt;&lt;/div&gt;
        &lt;input type="text"&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- TABLES -->
        <!-- ============================================== -->
        <section class="sg-section" id="tables">
            <h2 class="sg-section-title">Tables</h2>
            <p class="sg-section-desc">Several table styles for different admin contexts.</p>

            <div class="sg-component">
                <h3 class="sg-component-title">.tabular (Striped Table)</h3>
                <div class="sg-example">
                    <table class="tabular">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>John Smith</td>
                                <td>john@example.com</td>
                                <td>Admin</td>
                                <td>Active</td>
                            </tr>
                            <tr>
                                <td>Jane Doe</td>
                                <td>jane@example.com</td>
                                <td>Editor</td>
                                <td>Active</td>
                            </tr>
                            <tr>
                                <td>Bob Wilson</td>
                                <td>bob@example.com</td>
                                <td>Viewer</td>
                                <td>Inactive</td>
                            </tr>
                            <tr>
                                <td>Alice Brown</td>
                                <td>alice@example.com</td>
                                <td>Editor</td>
                                <td>Active</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;table class="tabular"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Email&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;John Smith&lt;/td&gt;
            &lt;td&gt;john@example.com&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">table.manage-items</h3>
                <div class="sg-example">
                    <table class="manage-items">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Price</th>
                                <th class="center">Visible</th>
                                <th class="center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Paracetamol 500mg</td>
                                <td>&pound;3.99</td>
                                <td class="center"><a class="show" href="#">Show</a></td>
                                <td class="center"><a href="#">Edit</a></td>
                            </tr>
                            <tr>
                                <td>Ibuprofen 200mg</td>
                                <td>&pound;4.50</td>
                                <td class="center"><a class="hide" href="#">Hide</a></td>
                                <td class="center"><a href="#">Edit</a></td>
                            </tr>
                            <tr>
                                <td>Aspirin 300mg</td>
                                <td>&pound;2.99</td>
                                <td class="center"><a class="show" href="#">Show</a></td>
                                <td class="center"><a href="#">Edit</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;table class="manage-items"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Product&lt;/th&gt;
            &lt;th&gt;Price&lt;/th&gt;
            &lt;th class="center"&gt;Visible&lt;/th&gt;
            &lt;th class="center"&gt;Actions&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;Product Name&lt;/td&gt;
            &lt;td&gt;&amp;pound;3.99&lt;/td&gt;
            &lt;td class="center"&gt;&lt;a class="show"&gt;Show&lt;/a&gt;&lt;/td&gt;
            &lt;td class="center"&gt;&lt;a&gt;Edit&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Semantic Row Colors (Order Tables)</h3>
                <div class="sg-example">
                    <table class="tabular manage-items">
                        <thead>
                            <tr>
                                <th>Order #</th>
                                <th>Customer</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1001</td>
                                <td>Normal row</td>
                                <td>Completed</td>
                            </tr>
                            <tr class="orderWaiting">
                                <td>1002</td>
                                <td>John Smith</td>
                                <td>.orderWaiting</td>
                            </tr>
                            <tr class="recurringOrder">
                                <td>1003</td>
                                <td>Jane Doe</td>
                                <td>.recurringOrder</td>
                            </tr>
                            <tr class="hasPatientNotes">
                                <td>1004</td>
                                <td>Bob Wilson</td>
                                <td>.hasPatientNotes</td>
                            </tr>
                            <tr class="hasUnreadAdmin">
                                <td>1005</td>
                                <td>Alice Brown</td>
                                <td>.hasUnreadAdmin</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;tr class="orderWaiting"&gt;...&lt;/tr&gt;      &lt;!-- Yellow: #f7e981 --&gt;
&lt;tr class="recurringOrder"&gt;...&lt;/tr&gt;    &lt;!-- Light yellow: #fdfcd9 --&gt;
&lt;tr class="hasPatientNotes"&gt;...&lt;/tr&gt;   &lt;!-- Orange: #ffdca8 --&gt;
&lt;tr class="hasUnreadAdmin"&gt;...&lt;/tr&gt;    &lt;!-- Blue: #bbdced --&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Half-Width Table</h3>
                <div class="sg-example">
                    <table class="manage-items half">
                        <thead>
                            <tr><th>Setting</th><th>Value</th></tr>
                        </thead>
                        <tbody>
                            <tr><td>Site Name</td><td>My Pharmacy</td></tr>
                            <tr><td>Currency</td><td>GBP</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;table class="manage-items half"&gt;...&lt;/table&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- NAVIGATION -->
        <!-- ============================================== -->
        <section class="sg-section" id="navigation">
            <h2 class="sg-section-title">Navigation</h2>

            <div class="sg-component">
                <h3 class="sg-component-title">Tabs (.tabnav)</h3>
                <div class="sg-example">
                    <ul class="tabnav" style="list-style:none;padding:0;margin:0">
                        <li class="selected"><a href="#">General</a></li>
                        <li><a href="#">SEO</a></li>
                        <li><a href="#">Images</a></li>
                        <li><a href="#">Advanced</a></li>
                    </ul>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;ul class="tabnav"&gt;
    &lt;li class="selected"&gt;&lt;a href="#"&gt;General&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;SEO&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Images&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Advanced&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Breadcrumbs</h3>
                <div class="sg-example">
                    <ul class="breadcrumbs" style="list-style:none;padding:0">
                        <li><a href="#">Dashboard</a> &raquo; </li>
                        <li><a href="#">Products</a> &raquo; </li>
                        <li class="end">Edit Product</li>
                    </ul>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;ul class="breadcrumbs"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dashboard&lt;/a&gt; &amp;raquo; &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt; &amp;raquo; &lt;/li&gt;
    &lt;li class="end"&gt;Edit Product&lt;/li&gt;
&lt;/ul&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Pagination</h3>
                <div class="sg-example">
                    <ul class="pagination" style="list-style:none;padding:0">
                        <li><a href="#">&laquo;</a></li>
                        <li><a href="#">1</a></li>
                        <li class="active"><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li class="dots"><span>...</span></li>
                        <li><a href="#">12</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;ul class="pagination"&gt;
    &lt;li&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="active"&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li class="dots"&gt;&lt;span&gt;...&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;12&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Sidebar Navigation (Preview)</h3>
                <div class="sg-example sg-example--dark" style="max-width:250px">
                    <ul class="topnav" style="list-style:none;padding:0;margin:0">
                        <li class="sectionHeader">Shop</li>
                        <li class="active">
                            <a href="#" style="position:relative"><i class="fa fa-shopping-cart" style="position:absolute;left:20px;top:50%;transform:translateY(-50%)"></i>Orders</a>
                        </li>
                        <li>
                            <a href="#" style="position:relative"><i class="fa fa-cube" style="position:absolute;left:20px;top:50%;transform:translateY(-50%)"></i>Products</a>
                        </li>
                        <li>
                            <a href="#" style="position:relative"><i class="fa fa-tags" style="position:absolute;left:20px;top:50%;transform:translateY(-50%)"></i>Categories</a>
                        </li>
                        <li class="sectionHeader">Content</li>
                        <li>
                            <a href="#" style="position:relative"><i class="fa fa-file-text" style="position:absolute;left:20px;top:50%;transform:translateY(-50%)"></i>Pages</a>
                        </li>
                        <li>
                            <a href="#" style="position:relative"><i class="fa fa-cog" style="position:absolute;left:20px;top:50%;transform:translateY(-50%)"></i>Settings</a>
                        </li>
                    </ul>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;ul class="topnav"&gt;
    &lt;li class="sectionHeader"&gt;Shop&lt;/li&gt;
    &lt;li class="active"&gt;
        &lt;a href="#"&gt;&lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt;Orders&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="#"&gt;&lt;i class="fa fa-cube"&gt;&lt;/i&gt;Products&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- MESSAGES & ALERTS -->
        <!-- ============================================== -->
        <section class="sg-section" id="messages">
            <h2 class="sg-section-title">Messages &amp; Alerts</h2>

            <div class="sg-component">
                <h3 class="sg-component-title">.msg (Message Box)</h3>
                <div class="sg-example">
                    <div class="msg">Product has been saved successfully.</div>
                    <div class="msg error">There was an error processing your request.</div>
                    <div class="msg alert">Please review the following items before continuing.</div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div class="msg"&gt;Success message&lt;/div&gt;
&lt;div class="msg error"&gt;Error message&lt;/div&gt;
&lt;div class="msg alert"&gt;Alert/warning message&lt;/div&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Inline Status Classes</h3>
                <div class="sg-example">
                    <p class="success" style="margin:0 0 10px">This is a .success message</p>
                    <p class="error" style="margin:0 0 10px">This is an .error message</p>
                    <p class="alert" style="margin:0 0 10px">This is an .alert message</p>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;p class="success"&gt;Success text&lt;/p&gt;
&lt;p class="error"&gt;Error text&lt;/p&gt;
&lt;p class="alert"&gt;Alert text&lt;/p&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Status Indicators</h3>
                <div class="sg-example">
                    <div style="display:flex;flex-wrap:wrap;gap:20px;align-items:center">
                        <span class="orderItemStatus approved">Approved</span>
                        <span class="orderItemStatus rejected">Rejected</span>
                        <span class="orderVerified">Verified</span>
                        <span class="red">Alert Red</span>
                        <span class="beige">Beige</span>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;span class="orderItemStatus approved"&gt;Approved&lt;/span&gt;
&lt;span class="orderItemStatus rejected"&gt;Rejected&lt;/span&gt;
&lt;span class="orderVerified"&gt;Verified&lt;/span&gt;
&lt;span class="red"&gt;Alert Red&lt;/span&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Order Labels</h3>
                <div class="sg-example">
                    <div style="display:flex;flex-wrap:wrap;gap:10px;align-items:center">
                        <span class="orderLabel">Default Label</span>
                        <span class="orderLabel orderLabelOrange">Orange Label</span>
                        <span class="orderLabel orderLabelOrangeInactive">Orange Inactive</span>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;span class="orderLabel"&gt;Default Label&lt;/span&gt;
&lt;span class="orderLabel orderLabelOrange"&gt;Orange Label&lt;/span&gt;
&lt;span class="orderLabel orderLabelOrangeInactive"&gt;Inactive&lt;/span&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Assessment Row Colors</h3>
                <div class="sg-example">
                    <table class="manage-items">
                        <tbody>
                            <tr class="assessmentRow rowOkay">
                                <td>Assessment passed</td>
                                <td>.rowOkay (green)</td>
                            </tr>
                            <tr class="assessmentRow rowAlert">
                                <td>Needs review</td>
                                <td>.rowAlert (orange)</td>
                            </tr>
                            <tr class="assessmentRow rowBlock">
                                <td>Assessment blocked</td>
                                <td>.rowBlock (red)</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;tr class="assessmentRow rowOkay"&gt;...&lt;/tr&gt;
&lt;tr class="assessmentRow rowAlert"&gt;...&lt;/tr&gt;
&lt;tr class="assessmentRow rowBlock"&gt;...&lt;/tr&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Success Block (Clinic)</h3>
                <div class="sg-example">
                    <div class="successBlock">
                        <p>Operation completed successfully.</p>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div class="successBlock"&gt;
    &lt;p&gt;Operation completed successfully.&lt;/p&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- OVERLAYS -->
        <!-- ============================================== -->
        <section class="sg-section" id="overlays">
            <h2 class="sg-section-title">Overlays</h2>
            <p class="sg-section-desc">Modal overlay system. Triggered by JS, shown here as a static preview.</p>

            <div class="sg-component">
                <h3 class="sg-component-title">Overlay Structure (Static Preview)</h3>
                <div class="sg-example" style="background:#888;padding:40px;position:relative;min-height:300px">
                    <!-- Simulated overlay -->
                    <div style="position:relative;max-width:500px;margin:0 auto">
                        <div class="overlayCloseButton" style="position:absolute;top:-4px;right:0;z-index:1">
                            <a href="#" onclick="return false" style="background:#0f55c4;color:#fff;width:40px;height:40px;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:4px;text-decoration:none">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                        <div style="background:#fff;margin-top:48px;border-radius:10px;overflow:hidden">
                            <div class="overlayAjax" style="padding:24px">
                                <h3 style="margin-top:0">Overlay Title</h3>
                                <p>This is the overlay content area. It can contain any HTML including forms, tables, and other components.</p>
                                <form onsubmit="return false">
                                    <div class="row">
                                        <label>Field</label>
                                        <input type="text" placeholder="Enter value...">
                                    </div>
                                </form>
                                <div style="margin-top:15px">
                                    <a class="btn" href="#" onclick="return false">Confirm</a>
                                    <a class="btn btn-grey" href="#" onclick="return false">Cancel</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div class="overlayBoxOuter"&gt;
    &lt;div class="overlayBox"&gt;
        &lt;div class="overlayCloseButton"&gt;
            &lt;a href="#"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="overlayContent"&gt;
            &lt;div class="overlayAjax"&gt;
                &lt;h3&gt;Overlay Title&lt;/h3&gt;
                &lt;p&gt;Content here...&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- LAYOUT -->
        <!-- ============================================== -->
        <section class="sg-section" id="layout">
            <h2 class="sg-section-title">Layout &amp; Grid</h2>
            <p class="sg-section-desc">Admin layout structure: sidebar (250px) + right column (remaining). Grid mixins available for responsive layouts.</p>

            <div class="sg-component">
                <h3 class="sg-component-title">Admin Page Structure</h3>
                <div class="sg-example" style="padding:0;font-size:12px">
                    <div style="display:flex;min-height:200px">
                        <div style="width:120px;background:#262d3b;color:#fff;padding:15px;flex-shrink:0">
                            <div style="font-size:10px;text-transform:uppercase;color:#6b7a8d;margin-bottom:8px">Sidebar</div>
                            <div style="color:#a0aab8;padding:4px 0">250px width</div>
                            <div style="color:#a0aab8;padding:4px 0">.sidebar</div>
                        </div>
                        <div style="flex:1;padding:15px;background:#f5f6f8">
                            <div style="font-size:10px;text-transform:uppercase;color:#6b7a8d;margin-bottom:8px">.rightcol</div>
                            <div style="color:#666;padding:4px 0">calc(100% - 250px)</div>
                            <div style="color:#666;padding:4px 0">padding: 40px</div>
                            <div style="background:#fff;border:1px solid #d7dce4;padding:10px;margin-top:10px;border-radius:4px">
                                Content area
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div id="content"&gt;
    &lt;div class="sidebar"&gt;
        &lt;ul class="topnav"&gt;...&lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="rightcol"&gt;
        &lt;!-- Page content here --&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Two-Column Layout (.cols2)</h3>
                <div class="sg-example">
                    <div class="cols2" style="overflow:hidden">
                        <div class="col first">
                            <strong>Column 1 (46%)</strong>
                            <p>Left column content with background and border.</p>
                        </div>
                        <div class="col">
                            <strong>Column 2 (46%)</strong>
                            <p>Right column content with background and border.</p>
                        </div>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div class="cols2"&gt;
    &lt;div class="col first"&gt;Column 1&lt;/div&gt;
    &lt;div class="col"&gt;Column 2&lt;/div&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Three-Column Layout (.cols3)</h3>
                <div class="sg-example">
                    <div class="cols3" style="overflow:hidden">
                        <div class="col first" style="background:#f1f4f8;border:1px solid #d7dce4;padding:1%">
                            <strong>Column 1</strong>
                        </div>
                        <div class="col" style="background:#f1f4f8;border:1px solid #d7dce4;padding:1%">
                            <strong>Column 2</strong>
                        </div>
                        <div class="col" style="background:#f1f4f8;border:1px solid #d7dce4;padding:1%">
                            <strong>Column 3</strong>
                        </div>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div class="cols3"&gt;
    &lt;div class="col first"&gt;Column 1&lt;/div&gt;
    &lt;div class="col"&gt;Column 2&lt;/div&gt;
    &lt;div class="col"&gt;Column 3&lt;/div&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Style Box</h3>
                <div class="sg-example">
                    <div class="style">
                        <h4>Section Title</h4>
                        <p>The <code>.style</code> class provides a light grey background with border — used for visual grouping of form sections.</p>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div class="style"&gt;
    &lt;h4&gt;Section Title&lt;/h4&gt;
    &lt;p&gt;Content...&lt;/p&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Utility Classes</h3>
                <div class="sg-example">
                    <table class="manage-items" style="width:auto">
                        <thead>
                            <tr>
                                <th style="padding:8px 15px">Class</th>
                                <th style="padding:8px 15px">Effect</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td style="padding:8px 15px"><code>.el</code></td><td style="padding:8px 15px">Full-width floated block (float:left; width:100%; clear:both)</td></tr>
                            <tr><td style="padding:8px 15px"><code>.clear</code> / <code>.clearBoth</code></td><td style="padding:8px 15px">clear: both</td></tr>
                            <tr><td style="padding:8px 15px"><code>.clearfix</code></td><td style="padding:8px 15px">Clearfix (pseudo-element clear)</td></tr>
                            <tr><td style="padding:8px 15px"><code>.hidden</code></td><td style="padding:8px 15px">display: none !important; visibility: hidden</td></tr>
                            <tr><td style="padding:8px 15px"><code>.hideme</code></td><td style="padding:8px 15px">display: none !important</td></tr>
                            <tr><td style="padding:8px 15px"><code>.invisible</code></td><td style="padding:8px 15px">visibility: hidden</td></tr>
                            <tr><td style="padding:8px 15px"><code>.relative</code></td><td style="padding:8px 15px">position: relative</td></tr>
                            <tr><td style="padding:8px 15px"><code>.half</code></td><td style="padding:8px 15px">width: 50%</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- TAGS / BADGES -->
        <!-- ============================================== -->
        <section class="sg-section" id="tags">
            <h2 class="sg-section-title">Tags / Badges</h2>
            <p class="sg-section-desc">Color-coded tag badges from the Clinic plugin. Also used across other admin areas.</p>

            <div class="sg-component">
                <h3 class="sg-component-title">Tag Variants</h3>
                <div class="sg-example">
                    <div style="display:flex;flex-wrap:wrap;gap:10px;align-items:center">
                        <span class="tag tag-blue">Blue Tag</span>
                        <span class="tag tag-green">Green Tag</span>
                        <span class="tag tag-yellow">Yellow Tag</span>
                        <span class="tag tag-red">Red Tag</span>
                        <span class="tag tag-grey">Grey Tag</span>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;span class="tag tag-blue"&gt;Blue Tag&lt;/span&gt;
&lt;span class="tag tag-green"&gt;Green Tag&lt;/span&gt;
&lt;span class="tag tag-yellow"&gt;Yellow Tag&lt;/span&gt;
&lt;span class="tag tag-red"&gt;Red Tag&lt;/span&gt;
&lt;span class="tag tag-grey"&gt;Grey Tag&lt;/span&gt;</code></pre>
                </div>
            </div>

            <div class="sg-component">
                <h3 class="sg-component-title">Count Bubble</h3>
                <div class="sg-example">
                    <div style="display:flex;align-items:center;gap:10px">
                        <span>Items</span>
                        <span class="countBubble" style="background:#0f55c4;color:#fff;width:16px;height:16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:10px">3</span>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;span class="countBubble"&gt;3&lt;/span&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- CARDS -->
        <!-- ============================================== -->
        <section class="sg-section" id="cards">
            <h2 class="sg-section-title">Cards (Clinic)</h2>
            <p class="sg-section-desc">Card layout from the Clinic plugin — used for patient details, records, etc.</p>

            <div class="sg-component">
                <h3 class="sg-component-title">Card Layout</h3>
                <div class="sg-example sg-example--grey">
                    <div style="display:flex;gap:20px;flex-wrap:wrap">
                        <div class="card" style="width:calc(50% - 10px);box-sizing:border-box">
                            <div class="cardTitle" style="position:relative">
                                <h3 style="margin:0 0 10px">Patient Information</h3>
                                <div class="actions" style="position:absolute;right:0;top:5px">
                                    <a class="btn btn-smaller" href="#">Edit</a>
                                </div>
                            </div>
                            <p>Name: John Smith</p>
                            <p>DOB: 01/01/1990</p>
                            <p>Phone: +44 7700 900000</p>
                        </div>
                        <div class="card" style="width:calc(50% - 10px);box-sizing:border-box">
                            <div class="cardTitle">
                                <h3 style="margin:0 0 10px">Prescriptions</h3>
                            </div>
                            <p>Active prescriptions: 3</p>
                            <p>Last updated: 25/02/2026</p>
                            <div style="margin-top:10px">
                                <span class="tag tag-green">Active</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div class="cardColumn"&gt;
    &lt;div class="card"&gt;
        &lt;div class="cardTitle"&gt;
            &lt;h3&gt;Card Title&lt;/h3&gt;
            &lt;div class="actions"&gt;
                &lt;a class="btn btn-smaller"&gt;Edit&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;p&gt;Card content...&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- DETAILS TABLE -->
        <!-- ============================================== -->
        <section class="sg-section" id="details-table">
            <h2 class="sg-section-title">Details Table</h2>
            <p class="sg-section-desc">Full-bordered detail table from the Clinic plugin. Used for key-value display.</p>

            <div class="sg-component">
                <h3 class="sg-component-title">.detailsTable</h3>
                <div class="sg-example">
                    <table class="detailsTable">
                        <tbody>
                            <tr class="firstRow">
                                <td class="fieldName">Patient Name</td>
                                <td class="fieldValue">John Smith</td>
                            </tr>
                            <tr>
                                <td class="fieldName">Date of Birth</td>
                                <td class="fieldValue">01/01/1990</td>
                            </tr>
                            <tr>
                                <td class="fieldName">Email</td>
                                <td class="fieldValue">john@example.com</td>
                            </tr>
                            <tr>
                                <td class="dividerRow" colspan="2"></td>
                            </tr>
                            <tr>
                                <td class="fieldName">GP Surgery</td>
                                <td class="fieldValue">Elm Street Practice</td>
                            </tr>
                            <tr>
                                <td class="fieldName">GP Name</td>
                                <td class="fieldValue">Dr. Williams</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;table class="detailsTable"&gt;
    &lt;tr class="firstRow"&gt;
        &lt;td class="fieldName"&gt;Label&lt;/td&gt;
        &lt;td class="fieldValue"&gt;Value&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td class="dividerRow" colspan="2"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td class="fieldName"&gt;Label&lt;/td&gt;
        &lt;td class="fieldValue"&gt;Value&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- FORMBUILDER -->
        <!-- ============================================== -->
        <section class="sg-section" id="formbuilder">
            <h2 class="sg-section-title">FormBuilder</h2>
            <p class="sg-section-desc">Sortable portlet components from the FormBuilder module.</p>

            <div class="sg-component">
                <h3 class="sg-component-title">Portlet (Drag-and-drop Item)</h3>
                <div class="sg-example">
                    <div class="orderingWrap" style="max-width:400px">
                        <div class="portlet" style="margin-bottom:8px;border:1px solid #ccc;border-radius:4px;overflow:hidden">
                            <div class="portletHeader" style="background:linear-gradient(#0f55c5, #054bbb);color:#fff;padding:8px 12px;cursor:move">
                                <i class="fa fa-arrows" style="margin-right:8px"></i>
                                Question Group 1
                            </div>
                            <div class="portletElement" style="padding:8px 12px;background:#fff;border-top:1px solid #ccc">
                                What is your date of birth?
                            </div>
                            <div class="portletElement" style="padding:8px 12px;background:#fff;border-top:1px solid #ccc">
                                Do you have any allergies?
                            </div>
                        </div>
                        <div class="portlet portletDisabled" style="margin-bottom:8px;border:1px solid #ccc;border-radius:4px;overflow:hidden">
                            <div class="portletHeader" style="background:#ccc;color:#666;padding:8px 12px">
                                <i class="fa fa-arrows" style="margin-right:8px"></i>
                                Disabled Group
                            </div>
                            <div class="portletElement" style="padding:8px 12px;background:#fff;border-top:1px solid #ccc;color:#999">
                                Hidden question
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;div class="orderingWrap"&gt;
    &lt;div class="portlet"&gt;
        &lt;div class="portletHeader"&gt;
            &lt;i class="fa fa-arrows"&gt;&lt;/i&gt; Group Title
        &lt;/div&gt;
        &lt;div class="portletElement"&gt;Question text&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="portlet portletDisabled"&gt;
        &lt;div class="portletHeader"&gt;Disabled Group&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                </div>
            </div>
        </section>

        <!-- ============================================== -->
        <!-- REFUND TABLE -->
        <!-- ============================================== -->
        <section class="sg-section" id="refund-table">
            <h2 class="sg-section-title">Refund Table</h2>
            <p class="sg-section-desc">Extended tabular table from the Refunds plugin.</p>

            <div class="sg-component">
                <h3 class="sg-component-title">.refundTable.tabular</h3>
                <div class="sg-example">
                    <table class="refundTable tabular">
                        <thead>
                            <tr>
                                <th style="padding:8px">Item</th>
                                <th style="padding:8px">Qty</th>
                                <th style="padding:8px">Price</th>
                                <th style="padding:8px">Refund</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="padding:8px">Paracetamol 500mg</td>
                                <td style="padding:8px">2</td>
                                <td style="padding:8px">&pound;7.98</td>
                                <td class="refundCell" style="padding:8px">&pound;7.98</td>
                            </tr>
                            <tr>
                                <td style="padding:8px">Ibuprofen 200mg</td>
                                <td style="padding:8px">1</td>
                                <td style="padding:8px">&pound;4.50</td>
                                <td style="padding:8px">-</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr class="refundInfo">
                                <td colspan="3" style="padding:8px;text-align:right"><strong>Total Refund:</strong></td>
                                <td class="refundCell" style="padding:8px"><strong>&pound;7.98</strong></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <div class="sg-code collapsed">
                    <button class="sg-code-toggle" onclick="this.parentElement.classList.toggle('collapsed')">Show code</button>
                    <pre><code>&lt;table class="refundTable tabular"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Item&lt;/th&gt;
            &lt;th&gt;Qty&lt;/th&gt;
            &lt;th&gt;Price&lt;/th&gt;
            &lt;th&gt;Refund&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;Item name&lt;/td&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;&amp;pound;7.98&lt;/td&gt;
            &lt;td class="refundCell"&gt;&amp;pound;7.98&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tfoot&gt;
        &lt;tr class="refundInfo"&gt;
            &lt;td colspan="3"&gt;Total Refund:&lt;/td&gt;
            &lt;td class="refundCell"&gt;&amp;pound;7.98&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tfoot&gt;
&lt;/table&gt;</code></pre>
                </div>
            </div>
        </section>

    </main>
</div>

<script>
    // Highlight active sidebar link on scroll
    document.addEventListener('DOMContentLoaded', function() {
        const sections = document.querySelectorAll('.sg-section');
        const navLinks = document.querySelectorAll('.sg-sidebar a');

        function setActiveLink() {
            let current = '';
            sections.forEach(function(section) {
                const sectionTop = section.offsetTop - 100;
                if (window.scrollY >= sectionTop) {
                    current = section.getAttribute('id');
                }
            });
            navLinks.forEach(function(link) {
                link.classList.remove('active');
                if (link.getAttribute('href') === '#' + current) {
                    link.classList.add('active');
                }
            });
        }

        window.addEventListener('scroll', setActiveLink);
        setActiveLink();
    });
</script>
</body>
</html>
