/* ==========================================================================
   XCSpec Theme for The Nose-AI Lab
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font Imports
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Raleway:wght@200;300;400;500;600&display=swap');

/* --------------------------------------------------------------------------
   2. Design Tokens (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
    /* XCSpec Brand Colors */
    --xcspec-primary: #0071B9;
    --xcspec-primary-dark: #005a94;
    --xcspec-primary-light: #4da3d9;
    --xcspec-accent: #FF7070;
    --xcspec-accent-dark: #e65555;
    --xcspec-dark-bg: #363839;
    --xcspec-dark-bg-alt: #303030;

    /* Typography */
    --xcspec-font-heading: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --xcspec-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --xcspec-font-size-base: 14px;
}

/* --------------------------------------------------------------------------
   3. Light Theme (Default)
   -------------------------------------------------------------------------- */
[data-bs-theme="light"] {
    /* Primary color overrides */
    --bs-primary: var(--xcspec-primary);
    --bs-primary-rgb: 0, 113, 185;

    /* Link colors */
    --bs-link-color: var(--xcspec-primary);
    --bs-link-color-rgb: 0, 113, 185;
    --bs-link-hover-color: var(--xcspec-primary-dark);
    --bs-link-hover-color-rgb: 0, 90, 148;
}

/* --------------------------------------------------------------------------
   4. Dark Theme
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    /* Primary - slightly brighter for dark bg contrast */
    --bs-primary: var(--xcspec-primary-light);
    --bs-primary-rgb: 77, 163, 217;

    /* Background - XCSpec dark colors */
    --bs-body-bg: var(--xcspec-dark-bg-alt);
    --bs-tertiary-bg: var(--xcspec-dark-bg);

    /* Link colors for dark mode */
    --bs-link-color: var(--xcspec-primary-light);
    --bs-link-color-rgb: 77, 163, 217;
    --bs-link-hover-color: #6db8e8;
    --bs-link-hover-color-rgb: 109, 184, 232;
}

/* --------------------------------------------------------------------------
   5. Global Typography
   -------------------------------------------------------------------------- */
body {
    font-family: var(--xcspec-font-body);
    font-size: var(--xcspec-font-size-base);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--xcspec-font-heading);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. Layout (migrated from base.html inline styles)
   -------------------------------------------------------------------------- */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

footer {
    margin-top: auto;
    padding: 1rem 0;
}

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */
.navbar {
    background-color: #ffffff !important;
    position: relative;
}

.navbar-brand {
    font-family: var(--xcspec-font-heading);
    font-weight: 600;
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 40px;
}

/* Centered title */
.navbar-title {
    font-family: var(--xcspec-font-heading);
    color: var(--xcspec-primary);
    pointer-events: none;
}

[data-bs-theme="dark"] .navbar-title {
    color: var(--xcspec-primary-light);
}

.navbar .nav-link {
    color: #333 !important;
}

.navbar .nav-link:hover {
    color: var(--xcspec-primary) !important;
}

.navbar .nav-link.active {
    color: var(--xcspec-primary) !important;
}

/* Dark mode navbar adjustments */
[data-bs-theme="dark"] .navbar {
    background-color: var(--xcspec-dark-bg) !important;
}

[data-bs-theme="dark"] .navbar-brand {
    color: var(--xcspec-primary-light) !important;
}

[data-bs-theme="dark"] .navbar .nav-link {
    color: #e9ecef !important;
}

[data-bs-theme="dark"] .navbar .nav-link:hover {
    color: var(--xcspec-primary-light) !important;
}

.nav-section-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 0.5rem 1rem 0.25rem;
    letter-spacing: 0.05em;
}

.badge-count {
    font-size: 0.65rem;
    margin-left: 0.5rem;
}

/* Active nav indicator */
.nav-link.active {
    font-weight: 600;
}

.dropdown-item.active {
    background-color: var(--bs-primary);
    color: white;
}

/* --------------------------------------------------------------------------
   8. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumb-container {
    background-color: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/* --------------------------------------------------------------------------
   9. Theme Toggle
   -------------------------------------------------------------------------- */
.theme-toggle .dropdown-menu {
    min-width: 8rem;
}

/* --------------------------------------------------------------------------
   10. Toast Container
   -------------------------------------------------------------------------- */
.toast-container {
    z-index: 1100;
}

/* --------------------------------------------------------------------------
   11. Empty State
   -------------------------------------------------------------------------- */
.empty-state {
    padding: 3rem 1rem;
}

.empty-state .bi {
    font-size: 4rem;
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   12. Button Overrides (XCSpec accent for special actions)
   -------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--xcspec-primary);
    --bs-btn-border-color: var(--xcspec-primary);
    --bs-btn-hover-bg: var(--xcspec-primary-dark);
    --bs-btn-hover-border-color: var(--xcspec-primary-dark);
    --bs-btn-active-bg: var(--xcspec-primary-dark);
    --bs-btn-active-border-color: var(--xcspec-primary-dark);
}

.btn-accent {
    --bs-btn-bg: var(--xcspec-accent);
    --bs-btn-border-color: var(--xcspec-accent);
    --bs-btn-hover-bg: var(--xcspec-accent-dark);
    --bs-btn-hover-border-color: var(--xcspec-accent-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

/* --------------------------------------------------------------------------
   13. Link Styling
   -------------------------------------------------------------------------- */
a {
    color: var(--bs-link-color);
    text-decoration: none;
}

a:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   14. Card Enhancements
   -------------------------------------------------------------------------- */
.card {
    border-radius: 0.5rem;
}

.card-header {
    font-family: var(--xcspec-font-heading);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   15. Powered By Footer Text
   -------------------------------------------------------------------------- */
.powered-by {
    font-size: 0.75rem;
    opacity: 0.7;
}