/* Spec Kitty Theme - Matching Dashboard Design */

/* Dashboard Color Variables */
:root {
    --sk-baby-blue: #A7C7E7;
    --sk-grassy-green: #7BB661;
    --sk-lavender: #C9A0DC;
    --sk-sunny-yellow: #FFF275;
    --sk-soft-peach: #FFD8B1;
    --sk-light-gray: #E8E8E8;
    --sk-creamy-white: #FFFDF7;
    --sk-dark-text: #2c3e50;
    --sk-medium-text: #546e7a;
}

/* Light Mode Overrides */
[data-bs-theme="light"] {
    --bs-body-bg: var(--sk-baby-blue);
    --bs-body-color: var(--sk-dark-text);
    --bs-link-color: var(--sk-grassy-green);
    --bs-link-hover-color: #5a9647;
    --bs-code-color: #c7254e;
}

/* Dark Mode - Carefully crafted complementary colors */
[data-bs-theme="dark"] {
    /* Darkened versions of the dashboard palette */
    --sk-baby-blue: #2d4a68;           /* Deep slate blue background */
    --sk-grassy-green: #8fc97a;        /* Brighter green for contrast */
    --sk-lavender: #a882c0;            /* Slightly muted lavender */
    --sk-sunny-yellow: #e6d45a;        /* Muted gold (less harsh) */
    --sk-soft-peach: #c9a080;          /* Muted warm accent */
    --sk-light-gray: #3d4a56;          /* Dark gray for borders */
    --sk-creamy-white: #1e2832;        /* Dark surface color */
    --sk-dark-text: #e8eef4;           /* Light text */
    --sk-medium-text: #9aacbc;         /* Muted secondary text */

    /* Bootstrap overrides for dark mode */
    --bs-body-bg: #18222c;             /* Deepest background */
    --bs-body-color: #e8eef4;
    --bs-link-color: #8fc97a;
    --bs-link-hover-color: #a8d898;
    --bs-code-color: #f687b3;          /* Pink for code in dark mode */
}

/* Main body background */
body {
    background: var(--sk-baby-blue) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

[data-bs-theme="dark"] body {
    background: #1a2530 !important;
}

/* Header styling */
header.bg-body {
    background: var(--sk-creamy-white) !important;
    border-bottom: 3px solid var(--sk-sunny-yellow) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

[data-bs-theme="dark"] header.bg-body {
    background: var(--sk-creamy-white) !important;
    border-bottom-color: #d4a800 !important;
}

/* Logo/Brand styling */
.navbar-brand {
    color: var(--sk-grassy-green) !important;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.navbar-brand:hover {
    color: #5a9647 !important;
}

/* Logo styling - constrained like dashboard */
.navbar-brand img {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 2px solid rgba(123, 182, 97, 0.25);
    background: white;
    padding: 4px;
}

/* Navigation tabs */
#navbar .nav-link {
    color: var(--sk-dark-text) !important;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s;
}

#navbar .nav-link:hover {
    background: rgba(201, 160, 220, 0.15);
    color: var(--sk-grassy-green) !important;
}

#navbar .nav-link.active {
    background: rgba(123, 182, 97, 0.15);
    color: var(--sk-grassy-green) !important;
    font-weight: 600;
}

[data-bs-theme="dark"] #navbar .nav-link {
    color: var(--sk-dark-text) !important;
}

/* Search box styling */
#search-query {
    border: 2px solid var(--sk-lavender) !important;
    border-radius: 8px !important;
    background: var(--sk-creamy-white) !important;
    transition: all 0.2s;
}

#search-query:focus {
    border-color: var(--sk-grassy-green) !important;
    box-shadow: 0 0 0 3px rgba(123, 182, 97, 0.2) !important;
}

/* Main content area */
main.container-xxl {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* Article/content cards */
article {
    background: var(--sk-creamy-white);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-top: 3px solid var(--sk-sunny-yellow);
}

[data-bs-theme="dark"] article {
    background: var(--sk-creamy-white);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--sk-grassy-green);
}

article h1:first-child,
article h2:first-child {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sk-soft-peach);
    margin-bottom: 20px;
}

/* Links */
article a {
    color: var(--sk-grassy-green);
    text-decoration: none;
}

article a:hover {
    text-decoration: underline;
    color: #5a9647;
}

/* Sidebar TOC */
.sidetoc, #affix {
    background: var(--sk-creamy-white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border-left: 3px solid var(--sk-lavender);
}

[data-bs-theme="dark"] .sidetoc,
[data-bs-theme="dark"] #affix {
    background: var(--sk-creamy-white);
}

.sidetoc .toc a,
#affix a {
    color: var(--sk-dark-text);
    transition: all 0.2s;
    border-left: 3px solid transparent;
    padding-left: 10px;
    display: block;
}

.sidetoc .toc a:hover,
#affix a:hover {
    color: var(--sk-grassy-green);
    background: rgba(201, 160, 220, 0.15);
}

.sidetoc .toc a.active,
#affix a.active {
    color: var(--sk-grassy-green);
    font-weight: 600;
    border-left-color: var(--sk-grassy-green);
    background: rgba(123, 182, 97, 0.1);
}

/* Code blocks */
code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 0.9em;
    color: #c7254e;
}

pre {
    background: #f8f9fa !important;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    overflow-x: auto;
}

pre code {
    background: transparent;
    color: #212529;
    padding: 0;
}

[data-bs-theme="dark"] code {
    background: #2d3748;
    color: #f687b3;
}

[data-bs-theme="dark"] pre {
    background: #1e2530 !important;
    border-color: #3d4a5a;
}

[data-bs-theme="dark"] pre code {
    color: #e8e8e8;
}

/* Blockquotes */
blockquote {
    border-left: 4px solid var(--sk-lavender);
    padding: 10px 15px;
    margin: 1em 0;
    background: rgba(201, 160, 220, 0.1);
    border-radius: 0 4px 4px 0;
    color: var(--sk-medium-text);
}

[data-bs-theme="dark"] blockquote {
    background: rgba(201, 160, 220, 0.15);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

table th {
    background: var(--sk-baby-blue);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border: 1px solid #ddd;
    color: var(--sk-dark-text);
}

table td {
    padding: 12px;
    border: 1px solid #ddd;
}

table tr:nth-child(even) {
    background: rgba(248, 248, 248, 0.5);
}

[data-bs-theme="dark"] table th {
    background: #2a4a6e;
}

[data-bs-theme="dark"] table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.05);
}

/* Alerts/Notes */
.alert, .NOTE, .TIP, .WARNING, .IMPORTANT, .CAUTION {
    border-radius: 8px;
    padding: 15px 20px;
    margin: 1em 0;
    border-left: 4px solid;
}

.alert-info, .NOTE {
    background: rgba(167, 199, 231, 0.2);
    border-left-color: var(--sk-baby-blue);
}

.alert-success, .TIP {
    background: rgba(123, 182, 97, 0.15);
    border-left-color: var(--sk-grassy-green);
}

.alert-warning, .WARNING, .CAUTION {
    background: rgba(255, 242, 117, 0.2);
    border-left-color: var(--sk-sunny-yellow);
}

.alert-danger, .IMPORTANT {
    background: rgba(255, 216, 177, 0.3);
    border-left-color: var(--sk-soft-peach);
}

/* Footer */
footer {
    background: var(--sk-creamy-white) !important;
    border-top: 2px solid var(--sk-light-gray);
    padding: 20px;
    color: var(--sk-medium-text);
}

[data-bs-theme="dark"] footer {
    background: var(--sk-creamy-white) !important;
}

/* Breadcrumbs - high contrast for visibility */
#breadcrumb {
    background: transparent;
    padding: 10px 0;
}

#breadcrumb a {
    color: var(--sk-dark-text);
    font-weight: 500;
}

#breadcrumb a:hover {
    color: var(--sk-grassy-green);
}

.breadcrumb-item {
    color: var(--sk-dark-text);
}

.breadcrumb-item.active {
    color: var(--sk-dark-text);
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--sk-medium-text);
}

/* GitHub icon styling */
.bi-github {
    color: var(--sk-dark-text);
    transition: color 0.2s;
}

.bi-github:hover {
    color: var(--sk-grassy-green);
}

/* Theme toggle styling */
.dropdown-toggle {
    border: 2px solid var(--sk-lavender) !important;
    border-radius: 6px !important;
    background: var(--sk-creamy-white) !important;
}

.dropdown-menu {
    border: 2px solid var(--sk-lavender);
    border-radius: 8px;
    background: var(--sk-creamy-white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dropdown-item:hover {
    background: rgba(123, 182, 97, 0.15);
    color: var(--sk-grassy-green);
}

/* Horizontal rules */
hr {
    border: none;
    border-top: 2px solid var(--sk-light-gray);
    margin: 2em 0;
}

/* Images */
article img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 1em 0;
}

/* List styling */
article ul, article ol {
    margin-bottom: 1em;
    padding-left: 2em;
}

article li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

/* Content card for landing page elements */
.content-card {
    background: var(--sk-creamy-white);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    border-top: 3px solid var(--sk-sunny-yellow);
}

/* Status badges (for tutorials/how-to navigation) */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
}

.badge-tutorial {
    background: var(--sk-baby-blue);
    color: #1a4a6e;
}

.badge-howto {
    background: var(--sk-soft-peach);
    color: #8b5a00;
}

.badge-reference {
    background: var(--sk-lavender);
    color: #5a3a6e;
}

.badge-explanation {
    background: var(--sk-sunny-yellow);
    color: #6b5a00;
}

/* Progress bar styling (matching dashboard) */
.progress {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--sk-grassy-green) 0%, #5a9647 100%);
}

/* Card hover effects (matching dashboard) */
.card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    article {
        padding: 20px;
        border-radius: 8px;
    }

    .sidetoc, #affix {
        padding: 15px;
    }
}

/* ===== COMPREHENSIVE DARK MODE OVERRIDES ===== */

/* Dark mode navbar */
[data-bs-theme="dark"] .navbar-brand {
    color: var(--sk-grassy-green) !important;
}

[data-bs-theme="dark"] #navbar .nav-link {
    color: var(--sk-dark-text) !important;
}

[data-bs-theme="dark"] #navbar .nav-link:hover {
    background: rgba(168, 130, 192, 0.2);
    color: var(--sk-grassy-green) !important;
}

[data-bs-theme="dark"] #navbar .nav-link.active {
    background: rgba(143, 201, 122, 0.2);
    color: var(--sk-grassy-green) !important;
}

/* Dark mode search */
[data-bs-theme="dark"] #search-query {
    background: var(--sk-creamy-white) !important;
    border-color: var(--sk-lavender) !important;
    color: var(--sk-dark-text) !important;
}

[data-bs-theme="dark"] #search-query::placeholder {
    color: var(--sk-medium-text);
}

/* Dark mode article headings */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: var(--sk-grassy-green);
}

[data-bs-theme="dark"] article h1:first-child,
[data-bs-theme="dark"] article h2:first-child {
    border-bottom-color: var(--sk-soft-peach);
}

/* Dark mode links */
[data-bs-theme="dark"] article a {
    color: var(--sk-grassy-green);
}

[data-bs-theme="dark"] article a:hover {
    color: #a8d898;
}

/* Dark mode sidebar */
[data-bs-theme="dark"] .sidetoc,
[data-bs-theme="dark"] #affix {
    background: var(--sk-creamy-white);
    border-left-color: var(--sk-lavender);
}

[data-bs-theme="dark"] .sidetoc .toc a,
[data-bs-theme="dark"] #affix a {
    color: var(--sk-dark-text);
}

[data-bs-theme="dark"] .sidetoc .toc a:hover,
[data-bs-theme="dark"] #affix a:hover {
    background: rgba(168, 130, 192, 0.2);
    color: var(--sk-grassy-green);
}

[data-bs-theme="dark"] .sidetoc .toc a.active,
[data-bs-theme="dark"] #affix a.active {
    background: rgba(143, 201, 122, 0.15);
    border-left-color: var(--sk-grassy-green);
    color: var(--sk-grassy-green);
}

/* Dark mode blockquotes */
[data-bs-theme="dark"] blockquote {
    background: rgba(168, 130, 192, 0.15);
    border-left-color: var(--sk-lavender);
    color: var(--sk-medium-text);
}

/* Dark mode tables */
[data-bs-theme="dark"] table th {
    background: var(--sk-baby-blue);
    color: var(--sk-dark-text);
    border-color: var(--sk-light-gray);
}

[data-bs-theme="dark"] table td {
    border-color: var(--sk-light-gray);
    color: var(--sk-dark-text);
}

[data-bs-theme="dark"] table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

/* Dark mode alerts */
[data-bs-theme="dark"] .alert-info,
[data-bs-theme="dark"] .NOTE {
    background: rgba(45, 74, 104, 0.4);
    border-left-color: var(--sk-baby-blue);
    color: var(--sk-dark-text);
}

[data-bs-theme="dark"] .alert-success,
[data-bs-theme="dark"] .TIP {
    background: rgba(143, 201, 122, 0.2);
    border-left-color: var(--sk-grassy-green);
    color: var(--sk-dark-text);
}

[data-bs-theme="dark"] .alert-warning,
[data-bs-theme="dark"] .WARNING,
[data-bs-theme="dark"] .CAUTION {
    background: rgba(230, 212, 90, 0.15);
    border-left-color: var(--sk-sunny-yellow);
    color: var(--sk-dark-text);
}

[data-bs-theme="dark"] .alert-danger,
[data-bs-theme="dark"] .IMPORTANT {
    background: rgba(201, 160, 128, 0.2);
    border-left-color: var(--sk-soft-peach);
    color: var(--sk-dark-text);
}

/* Dark mode dropdown */
[data-bs-theme="dark"] .dropdown-toggle {
    background: var(--sk-creamy-white) !important;
    border-color: var(--sk-lavender) !important;
    color: var(--sk-dark-text) !important;
}

[data-bs-theme="dark"] .dropdown-menu {
    background: var(--sk-creamy-white);
    border-color: var(--sk-lavender);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--sk-dark-text);
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background: rgba(143, 201, 122, 0.2);
    color: var(--sk-grassy-green);
}

/* Dark mode horizontal rules */
[data-bs-theme="dark"] hr {
    border-top-color: var(--sk-light-gray);
}

/* Dark mode images */
[data-bs-theme="dark"] article img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Dark mode breadcrumbs */
[data-bs-theme="dark"] #breadcrumb a {
    color: var(--sk-dark-text);
}

[data-bs-theme="dark"] #breadcrumb a:hover {
    color: var(--sk-grassy-green);
}

[data-bs-theme="dark"] .breadcrumb-item {
    color: var(--sk-dark-text);
}

[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--sk-dark-text);
}

[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--sk-medium-text);
}

/* Dark mode GitHub icon */
[data-bs-theme="dark"] .bi-github {
    color: var(--sk-dark-text);
}

[data-bs-theme="dark"] .bi-github:hover {
    color: var(--sk-grassy-green);
}

/* Print styles */
@media print {
    body {
        background: white !important;
    }

    article {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}