/**
 * PureBlog Admin Custom Stylesheet (admin-custom.css)
 * 
 * Windows XP (Luna Blue & Royale Noir) Theme customised with:
 * - Iconic Luna Blue palette: #0055ea Royal Blue, #ece9d8 chassis beige, #388e3c Start Green
 * - Authentic Tahoma font stack across all dialogues and controls
 * - Classic Windows XP push buttons with bevelled gradients and gold hover rings
 * - Primary action (.save) styled after the legendary Windows XP Start Button
 * - Form controls with signature #7f9db9 borders and balloon-tip notifications (#ffffe1)
 * - Royale Noir / Zune dark mode support
 */

/* ==========================================================================
   1. Design Tokens & Colour Schemes (Windows XP Luna System)
   ========================================================================== */

:root {
    /* Windows XP Luna Blue Light Palette */
    --bg-color: #ece9d8;                /* Classic XP chassis beige/grey */
    --accent-bg-color: #7ba2e7;         /* XP Explorer Task Pane blue */
    --text-color: #000000;              /* Primary text */
    --accent-text-color: #ffffff;
    --accent-color: #215dc6;            /* Luna taskbar / link blue */
    --accent-hover: #428eff;
    --accent-active: #0a246a;
    --border-color: #7f9db9;            /* Iconic XP input border colour */
    --input-bg: #ffffff;
    --subnav-bg: #5a7ec8;
    --red: #c93427;                     /* XP Close button red */
    --green: #298226;                   /* XP Start button green */
    --blue: #0055ea;                    /* Luna Royal Blue titlebar */
    --orange: #f07b10;
    --code-selection-bg: rgba(10, 36, 106, 0.25);
    --code-active-line-bg: rgba(0, 0, 0, 0.03);

    /* Windows XP Surface Tokens */
    --heading-color: #0a246a;           /* XP Titlebar Navy */
    --text-secondary: #444444;
    --border-subtle: #d5d5cd;
    --card-bg: #ffffff;
    --card-hover-border: #0a246a;
    --sidebar-text: #ffffff;
    --sidebar-icon: #d6e3f7;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.2);
    --sidebar-active-bg: #1642a8;
    --sidebar-active-text: #ffffff;
    --toolbar-bg: #ece9d8;

    /* Push Button Tokens */
    --btn-border: #003c74;
    --btn-color: #000000;
    --btn-hover-border: #003c74;
    --delete-btn-border: #7a0f07;

    /* Status Badges */
    --status-pub-bg: #e2f2de;
    --status-pub-color: #1f641d;
    --status-pub-border: #74b872;
    --status-draft-bg: #fde8e6;
    --status-draft-color: #9c1f14;
    --status-draft-border: #e68079;
    --status-sched-bg: #dce7f9;
    --status-sched-color: #0d388e;
    --status-sched-border: #7ba2e7;

    /* Notification Balloon */
    --notice-bg: #ffffe1;               /* XP Balloon notification yellow */
    --notice-border: #000000;
    --notice-success-border: #298226;
    --notice-danger-border: #c93427;

    /* Tables */
    --table-header-bg: #ece9d8;
    --table-row-hover: #f5f4eb;
}

/* Dark Mode Tokens (Windows XP Royale Noir / Zune Theme) */
html[data-admin-theme="dark"] {
    --bg-color: #222222;                /* Royale Noir chassis */
    --accent-bg-color: #181818;         /* Dark task pane */
    --text-color: #e5e5e5;
    --accent-text-color: #ffffff;
    --accent-color: #f26522;            /* Zune Orange accent */
    --accent-hover: #ff8547;
    --accent-active: #d14d0f;
    --border-color: #555555;
    --input-bg: #1a1a1a;
    --subnav-bg: #111111;
    --red: #e04a3f;
    --green: #48a845;
    --blue: #3a75c4;
    --orange: #f26522;
    --code-selection-bg: rgba(242, 101, 34, 0.3);
    --code-active-line-bg: rgba(255, 255, 255, 0.04);

    --heading-color: #ffffff;
    --text-secondary: #999999;
    --border-subtle: #3a3a3a;
    --card-bg: #2b2b2b;
    --card-hover-border: #f26522;
    --sidebar-text: #cccccc;
    --sidebar-icon: #999999;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: #3a3a3a;
    --sidebar-active-text: #f26522;
    --toolbar-bg: #2b2b2b;

    --btn-border: #666666;
    --btn-color: #ffffff;
    --btn-hover-border: #f26522;
    --delete-btn-border: #991f15;

    --status-pub-bg: rgba(72, 168, 69, 0.2);
    --status-pub-color: #72cf6f;
    --status-pub-border: #48a845;
    --status-draft-bg: rgba(224, 74, 63, 0.2);
    --status-draft-color: #ff8a82;
    --status-draft-border: #e04a3f;
    --status-sched-bg: rgba(58, 117, 196, 0.2);
    --status-sched-color: #7da8e8;
    --status-sched-border: #3a75c4;

    --notice-bg: #333333;
    --notice-border: #666666;
    --notice-success-border: #48a845;
    --notice-danger-border: #e04a3f;

    --table-header-bg: #2b2b2b;
    --table-row-hover: #333333;
}

/* System Dark Mode (when set to Auto) */
@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] {
        --bg-color: #222222;
        --accent-bg-color: #181818;
        --text-color: #e5e5e5;
        --accent-text-color: #ffffff;
        --accent-color: #f26522;
        --accent-hover: #ff8547;
        --accent-active: #d14d0f;
        --border-color: #555555;
        --input-bg: #1a1a1a;
        --subnav-bg: #111111;
        --red: #e04a3f;
        --green: #48a845;
        --blue: #3a75c4;
        --orange: #f26522;
        --code-selection-bg: rgba(242, 101, 34, 0.3);
        --code-active-line-bg: rgba(255, 255, 255, 0.04);

        --heading-color: #ffffff;
        --text-secondary: #999999;
        --border-subtle: #3a3a3a;
        --card-bg: #2b2b2b;
        --card-hover-border: #f26522;
        --sidebar-text: #cccccc;
        --sidebar-icon: #999999;
        --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
        --sidebar-active-bg: #3a3a3a;
        --sidebar-active-text: #f26522;
        --toolbar-bg: #2b2b2b;

        --btn-border: #666666;
        --btn-color: #ffffff;
        --btn-hover-border: #f26522;
        --delete-btn-border: #991f15;

        --status-pub-bg: rgba(72, 168, 69, 0.2);
        --status-pub-color: #72cf6f;
        --status-pub-border: #48a845;
        --status-draft-bg: rgba(224, 74, 63, 0.2);
        --status-draft-color: #ff8a82;
        --status-draft-border: #e04a3f;
        --status-sched-bg: rgba(58, 117, 196, 0.2);
        --status-sched-color: #7da8e8;
        --status-sched-border: #3a75c4;

        --notice-bg: #333333;
        --notice-border: #666666;
        --notice-success-border: #48a845;
        --notice-danger-border: #e04a3f;

        --table-header-bg: #2b2b2b;
        --table-row-hover: #333333;
    }
}


/* ==========================================================================
   2. Typography & Global Layout (Authentic Tahoma)
   ========================================================================== */

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "Tahoma", "Segoe UI", Arial, sans-serif;
    font-size: 11.5px;
    line-height: 1.45;
}

h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--heading-color);
    margin: 1.25rem 0 0.85rem 0;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
}

html[data-admin-theme="dark"] h1 {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] h1 {
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
    }
}

h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading-color);
    margin: 1.75rem 0 0.75rem 0;
}

h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading-color);
    margin: 1.25rem 0 0.5rem 0;
}

a {
    color: var(--accent-color);
    text-decoration: underline;
}

a:hover {
    color: var(--accent-hover);
}


/* ==========================================================================
   3. Sidebar Navigation (Windows XP Explorer Task Pane)
   ========================================================================== */

.admin-nav {
    background: linear-gradient(180deg, var(--accent-bg-color) 0%, #6375d6 100%);
    border-right: 1px solid #556bb2;
    width: 14rem;
    padding: 0;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.15);
}

html[data-admin-theme="dark"] .admin-nav {
    background: linear-gradient(180deg, #181818 0%, #101010 100%);
    border-right: 1px solid #333333;
}

@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] .admin-nav {
        background: linear-gradient(180deg, #181818 0%, #101010 100%);
        border-right: 1px solid #333333;
    }
}

/* Sidebar Titlebar Header: Royal Blue Luna Gloss */
.sidebar-header {
    background: linear-gradient(180deg, #0058ee 0%, #3593ff 8%, #0055ea 40%, #0045d0 100%);
    border-bottom: 1px solid #002277;
    height: 3.5rem;
    padding: 0 0.75rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

html[data-admin-theme="dark"] .sidebar-header {
    background: linear-gradient(180deg, #3c3c3c 0%, #2a2a2a 50%, #1c1c1c 100%);
    border-bottom: 1px solid #111111;
}

@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] .sidebar-header {
        background: linear-gradient(180deg, #3c3c3c 0%, #2a2a2a 50%, #1c1c1c 100%);
        border-bottom: 1px solid #111111;
    }
}

.sidebar-logo .logo {
    font-family: "Tahoma", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    border: none;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.sidebar-logo .pure {
    color: #ffffff;
}

.sidebar-logo .service {
    background: #f07b10;
    color: #ffffff;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-size: 0.8em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.sidebar-toggle {
    border: 1px solid #002277;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 0.4rem;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.35);
}

.admin-nav-list {
    padding: 0.5rem 0;
    gap: 2px;
}

/* Sidebar Links */
.admin-nav .admin-nav-list a,
.admin-nav .admin-nav-list .link-button {
    text-transform: none;
    font-size: 11.5px;
    font-weight: normal;
    color: var(--sidebar-text);
    padding: 0.45rem 0.85rem;
    margin: 1px 6px;
    border-radius: 3px;
    border-left: none;
    gap: 0.65rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    transition: background-color 0.1s ease;
}

.admin-nav .admin-nav-list a .icon,
.admin-nav .admin-nav-list .link-button .icon {
    color: var(--sidebar-icon);
    stroke: currentColor;
}

.admin-nav .admin-nav-list a:hover,
.admin-nav .admin-nav-list .link-button:hover {
    background-color: var(--sidebar-hover-bg);
    color: #ffffff;
    text-decoration: underline;
}

/* Active navigation item: Solid Luna Blue Block */
.admin-nav .admin-nav-list a.current,
.admin-nav .admin-nav-list a.current:hover {
    background: linear-gradient(180deg, #225ad7 0%, #1642a8 100%);
    color: #ffffff;
    font-weight: 700;
    border: 1px solid #0f2c72;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.admin-nav .admin-nav-list a.current .icon {
    color: #ffffff;
    stroke: #ffffff;
}

/* Submenu items */
.admin-nav .sidebar-subnav {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    margin: 2px 6px;
    border-bottom: none;
    padding: 0.25rem 0;
}

.admin-nav .sidebar-subnav a,
.admin-nav .sidebar-subnav .link-button {
    padding-left: 2rem;
    margin: 1px 4px;
    font-size: 11px;
}

#sidebar-new-post-button {
    color: #ffffff;
    font-weight: 700;
}

ul.admin-nav-list .logout-item {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 0.5rem;
}


/* ==========================================================================
   4. Luna Push Buttons (Classic XP Bevel & Luna Start Button)
   ========================================================================== */

button,
a.button,
a.delete,
a.save,
.editor-actions button,
.link-button,
.editor-actions a {
    text-transform: none;
    font-family: "Tahoma", sans-serif;
    font-size: 11.5px;
    font-weight: normal;
    min-height: 25px;
    padding: 0.3rem 0.9rem;
    border-radius: 3px;
    border: 1px solid var(--btn-border);
    background: linear-gradient(180deg, #ffffff 0%, #ecebe5 12%, #f2f1ec 45%, #e1e0d8 50%, #eae8e1 100%);
    color: var(--btn-color);
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px rgba(0, 0, 0, 0.1);
    transition: none;
}

html[data-admin-theme="dark"] button,
html[data-admin-theme="dark"] a.button,
html[data-admin-theme="dark"] .link-button,
html[data-admin-theme="dark"] .editor-actions button,
html[data-admin-theme="dark"] .editor-actions a {
    background: linear-gradient(180deg, #3c3c3c 0%, #2a2a2a 50%, #1e1e1e 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] button,
    html[data-admin-theme="auto"] a.button,
    html[data-admin-theme="auto"] .link-button,
    html[data-admin-theme="auto"] .editor-actions button,
    html[data-admin-theme="auto"] .editor-actions a {
        background: linear-gradient(180deg, #3c3c3c 0%, #2a2a2a 50%, #1e1e1e 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

/* Iconic XP Button Hover: Gold outline glow */
button:hover,
a.button:hover,
.link-button:hover,
.editor-actions button:hover,
.editor-actions a:hover {
    border-color: #003c74;
    box-shadow: 0 0 3px #ffe792, inset 0 0 2px #fff6cb;
    color: var(--btn-color);
    text-decoration: none;
}

/* Pressed / Active: Inverted gradient */
button:active,
a.button:active,
.link-button:active,
.editor-actions button:active,
.editor-actions a:active {
    background: linear-gradient(180deg, #d3d1c8 0%, #e1e0d8 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   PRIMARY SAVE BUTTON: Legendary Windows XP Luna Start Button!
   ========================================================================== */

.save,
a.save,
button.save {
    background: linear-gradient(180deg, #3c9c38 0%, #5cb85c 12%, #298226 50%, #206d1e 100%);
    border: 1px solid #165614;
    color: #ffffff;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.02em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.25);
}

.save .icon,
a.save .icon,
button.save .icon {
    stroke: #ffffff;
}

a.save:hover,
button.save:hover,
.editor-actions button.save:hover,
.editor-actions a.save:hover {
    background: linear-gradient(180deg, #4cb848 0%, #6cd86c 12%, #359832 50%, #257e23 100%);
    border-color: #165614;
    color: #ffffff;
    box-shadow: 0 0 4px #ffe792, inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

a.save:active,
button.save:active {
    background: linear-gradient(180deg, #206d1e 0%, #298226 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   DESTRUCTIVE BUTTON: Windows XP Close Button Red!
   ========================================================================== */

.delete,
a.delete,
button.delete,
.link-button.delete {
    background: linear-gradient(180deg, #e05345 0%, #ea695c 12%, #c93427 50%, #b21b0e 100%);
    border: 1px solid #7a0f07;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.25);
}

.delete .icon,
a.delete .icon,
button.delete .icon {
    stroke: #ffffff;
}

a.delete:hover,
button.delete:hover,
.editor-actions a.delete:hover,
.link-button.delete:hover {
    background: linear-gradient(180deg, #f06456 0%, #fa786b 12%, #d94235 50%, #c42416 100%);
    border-color: #7a0f07;
    color: #ffffff;
    box-shadow: 0 0 4px #ffc1be, inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

button:disabled,
button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: default;
    color: #888888 !important;
    text-shadow: 1px 1px 0 #ffffff !important;
    box-shadow: none !important;
}


/* ==========================================================================
   5. Form Controls (The Classic XP #7f9db9 Border)
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="file"],
textarea,
select {
    border-radius: 2px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-color);
    padding: 0.35rem 0.5rem;
    font-family: "Tahoma", sans-serif;
    font-size: 11.5px;
    line-height: 1.4;
    min-height: 24px;
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #0a246a;
    box-shadow: 0 0 2px #0a246a;
}

form label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 0.25rem;
}

form label span.tip,
p.tip {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: normal;
}

/* Layout Preview */
.layout-preview {
    border: 2px solid #7f9db9;
    border-radius: 3px;
    background: #ffffff;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.layout-choice:hover .layout-preview {
    border-color: #0a246a;
}

.layout-choice input:checked+.layout-preview {
    border-color: #215dc6;
    box-shadow: 0 0 0 2px #215dc6;
}

/* Tags */
.tag-badge {
    border-radius: 2px;
    border: 1px solid #7f9db9;
    background: #ffffff;
    color: #000000;
    padding: 0.15rem 0.45rem;
    font-size: 11px;
}

.tag-suggestions {
    border: 1px solid #7f9db9;
    border-radius: 0 0 2px 2px;
    background: #ffffff;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.tag-suggestions li {
    padding: 0.3rem 0.6rem;
    font-size: 11px;
}

.tag-suggestions li:hover,
.tag-suggestions li.active {
    background: #0a246a;
    color: #ffffff;
}


/* ==========================================================================
   6. Command Toolbars (Windows XP Rebar Style)
   ========================================================================== */

.admin-actions,
.editor-actions {
    background: linear-gradient(180deg, #f8f7f1 0%, #ece9d8 100%);
    border: 1px solid #99978a;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0.75rem;
    margin: 1rem 0 1.5rem 0;
    z-index: 100;
}

html[data-admin-theme="dark"] .admin-actions,
html[data-admin-theme="dark"] .editor-actions {
    background: linear-gradient(180deg, #333333 0%, #252525 100%);
    border: 1px solid #444444;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] .admin-actions,
    html[data-admin-theme="auto"] .editor-actions {
        background: linear-gradient(180deg, #333333 0%, #252525 100%);
        border: 1px solid #444444;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

.mobile-nav-header {
    background: linear-gradient(180deg, #0058ee 0%, #0055ea 100%);
    color: #ffffff;
    border-bottom: 1px solid #002277;
}

.autosave-status {
    color: var(--text-secondary);
    font-size: 11px;
}


/* ==========================================================================
   7. Content Lists & Windows XP Groupboxes
   ========================================================================== */

.admin-list {
    gap: 0.65rem;
}

.admin-list-item {
    background: var(--card-bg);
    border: 1px solid #d5d5cd;
    border-radius: 4px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08);
    padding: 0.85rem 1.15rem;
    transition: border-color 0.1s ease;
}

.admin-list-item:hover {
    border-color: #7f9db9;
}

.admin-list-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading-color);
}

.admin-list-meta {
    font-size: 11.5px;
    color: var(--text-secondary);
    gap: 0.5rem 1.25rem;
}

/* Status Badges */
.admin-list-meta .status.published {
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
    padding: 0.1rem 0.5rem;
    font-size: 11px;
    font-weight: 700;
    background: var(--status-pub-bg);
    color: var(--status-pub-color);
    border: 1px solid var(--status-pub-border);
}

.admin-list-meta .status.draft {
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
    padding: 0.1rem 0.5rem;
    font-size: 11px;
    font-weight: 700;
    background: var(--status-draft-bg);
    color: var(--status-draft-color);
    border: 1px solid var(--status-draft-border);
}

.admin-list-meta .status.scheduled {
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
    padding: 0.1rem 0.5rem;
    font-size: 11px;
    font-weight: 700;
    background: var(--status-sched-bg);
    color: var(--status-sched-color);
    border: 1px solid var(--status-sched-border);
}

.admin-list-meta button.page-badge {
    border-radius: 2px;
    padding: 0.1rem 0.5rem;
    font-size: 11px;
    font-weight: 700;
    background: var(--status-pub-bg);
    color: var(--status-pub-color);
    border: 1px solid var(--status-pub-border);
}


/* ==========================================================================
   8. Search & Content Filter Panel
   ========================================================================== */

.content-filter {
    background: var(--card-bg);
    border: 1px solid #7f9db9;
    border-radius: 4px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08);
    padding: 0.65rem 1rem;
    margin: 1.5rem 0;
}

.content-filter-summary {
    text-transform: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--heading-color);
    padding: 0.2rem 0;
}

.content-filter-active-label {
    border-radius: 2px;
    background: var(--accent-color);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
}


/* ==========================================================================
   9. Dashboard Widgets & Charts
   ========================================================================== */

.dashboard-h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-top: 3rem;
}

.dashboard-h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-top: 2rem;
}

.dashboard-stat-card {
    background: var(--card-bg);
    border: 1px solid #d5d5cd;
    border-radius: 4px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08);
    padding: 1.15rem;
}

.dashboard-stat-label {
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.dashboard-stat-value {
    color: var(--heading-color);
    font-weight: 700;
}

.dashboard-stat-card-metric .dashboard-stat-value {
    color: var(--accent-color);
    font-size: 2rem;
}

.dashboard-chart {
    border-bottom: 1px solid #7f9db9;
    padding-bottom: 0.5rem;
}

.dashboard-chart-bar {
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #3593ff 0%, #0055ea 100%);
    border: 1px solid #003c74;
    border-bottom: none;
}

.dashboard-chart-label {
    border-top: 1px solid #7f9db9;
    color: var(--text-secondary);
    font-size: 10.5px;
    text-transform: uppercase;
}


/* ==========================================================================
   10. Windows XP Balloon Tip Notifications (.notice)
   ========================================================================== */

.notice {
    background: var(--notice-bg);
    border: 1px solid #000000;
    border-left: 4px solid var(--green);
    border-radius: 4px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    padding: 0.75rem 1rem;
    color: #000000;
    font-size: 11.5px;
}

html[data-admin-theme="dark"] .notice {
    color: #e5e5e5;
}

@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] .notice {
        color: #e5e5e5;
    }
}

.notice.delete {
    border-left-color: var(--red);
}

.admin-toast-container .notice {
    border-radius: 4px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   11. CodeJar & Prism Editor
   ========================================================================== */

.editor {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 1rem;
}

.editor:focus-within {
    border-color: #0a246a;
    box-shadow: 0 0 2px #0a246a;
}

.editor-sidebar {
    background: #ece9d8;
    border-left: 1px solid #99978a;
}

html[data-admin-theme="dark"] .editor-sidebar {
    background: #2b2b2b;
    border-left: 1px solid #444444;
}

@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] .editor-sidebar {
        background: #2b2b2b;
        border-left: 1px solid #444444;
    }
}

.editor-sidebar .sidebar-header {
    border-bottom: 1px solid #99978a;
}

.editor-sidebar .sidebar-title {
    text-transform: none;
    font-size: 12px;
    font-weight: 700;
}


/* ==========================================================================
   12. Dialogue Windows & Modals (Windows XP Window Frame)
   ========================================================================== */

#layout-picker,
#sidebar-layout-picker {
    background: #ece9d8;
    border: 3px solid #0055ea;
    border-radius: 5px 5px 0 0;
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
    padding: 2rem;
}

html[data-admin-theme="dark"] #layout-picker,
html[data-admin-theme="dark"] #sidebar-layout-picker {
    background: #2b2b2b;
    border-color: #3c3c3c;
}

@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] #layout-picker,
    html[data-admin-theme="auto"] #sidebar-layout-picker {
        background: #2b2b2b;
        border-color: #3c3c3c;
    }
}

.layout-picker-list a {
    border-radius: 3px;
    border: 1px solid var(--btn-border);
    background: linear-gradient(180deg, #ffffff 0%, #eae8e1 100%);
    color: var(--btn-color);
    text-transform: none;
    font-weight: 700;
}

.layout-picker-list a:hover {
    box-shadow: 0 0 3px #ffe792;
}

.image-lightbox {
    border: 3px solid #0055ea;
    border-radius: 5px 5px 0 0;
    box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.5);
}

.image-delete-dialog {
    background: #ece9d8;
    border: 3px solid #0055ea;
    border-radius: 5px 5px 0 0;
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   13. Media & Image Library
   ========================================================================== */

.image-library-card {
    background: var(--card-bg);
    border: 1px solid #7f9db9;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.image-library-thumb {
    border-radius: 2px 2px 0 0;
}

.image-list li {
    background: var(--card-bg);
    border: 1px solid #d5d5cd;
    border-radius: 3px;
}


/* ==========================================================================
   14. Theme Manager & Settings Cards
   ========================================================================== */

.theme-card {
    background: var(--card-bg);
    border: 1px solid #d5d5cd;
    border-radius: 4px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08);
}

.theme-card.active {
    border: 2px solid #0055ea;
    box-shadow: 0 0 4px #0055ea;
}

.theme-badge {
    border-radius: 2px;
    text-transform: none;
    font-weight: 700;
    font-size: 10px;
}


/* ==========================================================================
   15. Login Screen (Windows XP User Logon Frame)
   ========================================================================== */

main.narrow {
    max-width: 330px;
    margin: 5rem auto;
    padding: 2rem;
    background: #ece9d8;
    border: 2px solid #0055ea;
    border-radius: 6px;
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.3);
}

html[data-admin-theme="dark"] main.narrow {
    background: #2b2b2b;
    border-color: #3c3c3c;
}

@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] main.narrow {
        background: #2b2b2b;
        border-color: #3c3c3c;
    }
}

main.narrow h1 {
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
    color: #0a246a;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

html[data-admin-theme="dark"] main.narrow h1 {
    color: #ffffff;
}

@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] main.narrow h1 {
        color: #ffffff;
    }
}

main.narrow form button[type="submit"] {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.45rem 1rem;
    min-height: 30px;
    font-size: 12px;
}


/* ==========================================================================
   16. Tables & Pagination Controls
   ========================================================================== */

table {
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid #7f9db9;
}

th {
    background: linear-gradient(180deg, #f8f7f1 0%, #ece9d8 100%);
    font-size: 11px;
    font-weight: 700;
    color: #000000;
    border: 1px solid #99978a;
    padding: 5px 8px;
    text-transform: none;
}

html[data-admin-theme="dark"] th {
    background: #2b2b2b;
    color: #ffffff;
    border-color: #444444;
}

@media (prefers-color-scheme: dark) {
    html[data-admin-theme="auto"] th {
        background: #2b2b2b;
        color: #ffffff;
        border-color: #444444;
    }
}

td {
    border: 1px solid #d5d5cd;
    padding: 6px 8px;
    font-size: 11.5px;
}

tbody tr:hover {
    background-color: var(--table-row-hover);
}

nav.pagination a {
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    border: 1px solid var(--btn-border);
    background: linear-gradient(180deg, #ffffff 0%, #eae8e1 100%);
    color: var(--btn-color);
    padding: 0.3rem 0.85rem;
    min-height: 25px;
    font-size: 11.5px;
    text-decoration: none;
}

nav.pagination a:hover {
    box-shadow: 0 0 3px #ffe792;
}