/* ============================================
   Chronicis Custom MudBlazor Theme
   Based on Chronicis Style Guide v1.0
   
   This is the SINGLE SOURCE OF TRUTH for:
   - CSS Custom Properties (variables)
   - Global scrollbar styles
   - Animation keyframes
   - MudBlazor component overrides
   ============================================ */

/* ============================================
   CSS Custom Properties
   ============================================ */

:root {
    /* Primary Colors */
    --chronicis-deep-blue-grey: #1F2A33;
    --chronicis-beige-gold: #C4AF8E;
    
    /* Secondary Colors */
    --chronicis-slate-grey: #3A4750;
    --chronicis-soft-off-white: #F4F0EA;
    
    /* Accents */
    --chronicis-muted-gold: #D9C9A7;
    --chronicis-charcoal: #1A1A1A;
    --chronicis-beige: #cabda3;
    
    /* Semantic Colors */
    --chronicis-success: #4CAF50;
    --chronicis-warning: #FFA726;
    --chronicis-error: #EF5350;
    --chronicis-info: #29B6F6;
    
    /* Typography */
    --chronicis-font-heading: 'Libre Baskerville', Georgia, serif;
    --chronicis-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Spacing */
    --chronicis-space-xs: 4px;
    --chronicis-space-sm: 8px;
    --chronicis-space-md: 16px;
    --chronicis-space-lg: 24px;
    --chronicis-space-xl: 32px;
    
    /* Shadows */
    --chronicis-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --chronicis-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --chronicis-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --chronicis-glow-gold: 0 0 12px rgba(196, 175, 142, 0.4);
    
    /* Border Radius */
    --chronicis-radius-sm: 4px;
    --chronicis-radius-md: 6px;
    --chronicis-radius-lg: 8px;
    --chronicis-radius-xl: 12px;
    
    /* Transitions */
    --chronicis-transition-fast: 150ms ease-in-out;
    --chronicis-transition-normal: 250ms ease-in-out;
    --chronicis-transition-slow: 400ms ease-in-out;
}

/* ============================================
   Global Animation Keyframes
   ============================================ */

@keyframes chronicis-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chronicis-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chronicis-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chronicis-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes chronicis-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes chronicis-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes chronicis-expand {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chronicis-glow-pulse {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        transform: translate(50px, 50px) rotate(360deg);
    }
}

@keyframes chronicis-tooltip-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Global Scrollbar Styles
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--chronicis-deep-blue-grey);
}

::-webkit-scrollbar-thumb {
    background: var(--chronicis-slate-grey);
    border-radius: var(--chronicis-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--chronicis-beige-gold);
}

/* Light background scrollbar variant */
.chronicis-scrollbar-light::-webkit-scrollbar-track {
    background: rgba(58, 71, 80, 0.05);
}

.chronicis-scrollbar-light::-webkit-scrollbar-thumb {
    background: rgba(196, 175, 142, 0.5);
}

.chronicis-scrollbar-light::-webkit-scrollbar-thumb:hover {
    background: var(--chronicis-beige-gold);
}

/* ============================================
   Global MudBlazor Overrides
   ============================================ */

.mud-theme-primary {
    color: var(--chronicis-beige-gold) !important;
}

.mud-primary {
    color: var(--chronicis-beige-gold) !important;
}

.mud-primary-text {
    color: var(--chronicis-beige-gold) !important;
}

.mud-input-outlined-border {
    border-color: var(--chronicis-slate-grey) !important;
}

/* AppBar */
.mud-appbar {
    background-color: var(--chronicis-deep-blue-grey) !important;
    box-shadow: var(--chronicis-shadow-md);
}

.mud-appbar .mud-toolbar {
    padding: 0 var(--chronicis-space-lg);
}

/* Drawer */
.mud-drawer {
    background-color: var(--chronicis-deep-blue-grey) !important;
    border-right: 1px solid var(--chronicis-slate-grey);
}

.mud-drawer-paper {
    background-color: var(--chronicis-deep-blue-grey) !important;
}

.mud-drawer-content {
    background-color: var(--chronicis-deep-blue-grey);
}

/* Main Content */
.mud-main-content {
    background-color: var(--chronicis-beige);
    min-height: 100vh;
}

/* Cards & Paper */
.mud-paper {
    background-color: var(--chronicis-soft-off-white) !important;
    border-radius: var(--chronicis-radius-lg);
    box-shadow: var(--chronicis-shadow-sm);
    transition: box-shadow var(--chronicis-transition-normal);
}

.mud-paper:hover {
    box-shadow: var(--chronicis-shadow-md);
}

/* Buttons */
.mud-button-root {
    border-radius: var(--chronicis-radius-md);
    transition: all var(--chronicis-transition-fast);
    text-transform: none;
    font-weight: 500;
}

.mud-button-filled.mud-button-filled-primary {
    background-color: var(--chronicis-beige-gold);
    color: var(--chronicis-deep-blue-grey);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--chronicis-muted-gold);
    box-shadow: var(--chronicis-glow-gold);
}

.mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--chronicis-beige-gold);
    color: var(--chronicis-beige-gold);
}

.mud-button-outlined.mud-button-outlined-primary:hover {
    background-color: rgba(196, 175, 142, 0.08);
    box-shadow: var(--chronicis-glow-gold);
}

/* Inputs */
.mud-input-root {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--chronicis-radius-md);
}

.mud-input-underline:before {
    border-bottom-color: var(--chronicis-slate-grey);
}

.mud-input-underline:after {
    border-bottom-color: var(--chronicis-beige-gold);
}

.mud-input-label,
.mud-input-label-inputcontrol {
    color: var(--chronicis-muted-gold);
}

/* Tree View */
.mud-treeview {
    color: var(--chronicis-soft-off-white);
}

.mud-treeview-item {
    transition: all var(--chronicis-transition-fast);
    border-radius: var(--chronicis-radius-md);
    padding: var(--chronicis-space-xs) var(--chronicis-space-sm);
    margin: 2px 0;
}

.mud-treeview-item:hover {
    background-color: rgba(196, 175, 142, 0.1);
    box-shadow: var(--chronicis-glow-gold);
}

.mud-treeview-item-selected {
    background-color: rgba(196, 175, 142, 0.15) !important;
    color: var(--chronicis-beige-gold) !important;
}

.mud-treeview-item-content {
    color: var(--chronicis-soft-off-white);
}

/* Icons */
.mud-icon-root {
    color: var(--chronicis-muted-gold);
}

.mud-icon-button:hover .mud-icon-root {
    color: var(--chronicis-beige-gold);
}

/* Snackbar / Toast */
.mud-snackbar {
    border-radius: var(--chronicis-radius-lg);
    box-shadow: var(--chronicis-shadow-lg);
}

.mud-snackbar.mud-snackbar-success {
    background-color: var(--chronicis-success);
}

.mud-snackbar.mud-snackbar-error {
    background-color: var(--chronicis-error);
}

.mud-snackbar.mud-snackbar-warning {
    background-color: var(--chronicis-warning);
}

.mud-snackbar.mud-snackbar-info {
    background-color: var(--chronicis-info);
}

/* Dialog */
.mud-dialog {
    background-color: var(--chronicis-soft-off-white);
    border-radius: var(--chronicis-radius-xl);
}

.mud-dialog-title {
    font-family: var(--chronicis-font-heading);
    color: var(--chronicis-charcoal);
    font-size: 1.5rem;
    font-weight: 500;
}

/* Menu */
.mud-menu {
    background-color: var(--chronicis-deep-blue-grey);
    border-radius: var(--chronicis-radius-lg);
    box-shadow: var(--chronicis-shadow-lg);
}

.mud-menu-item {
    color: var(--chronicis-soft-off-white);
    transition: all var(--chronicis-transition-fast);
}

.mud-menu-item:hover {
    background-color: rgba(196, 175, 142, 0.1);
    color: var(--chronicis-beige-gold);
}

/* Breadcrumbs */
.mud-breadcrumbs {
    color: var(--chronicis-slate-grey);
}

.mud-breadcrumb-item {
    color: var(--chronicis-slate-grey);
}

.mud-breadcrumb-item:hover {
    color: var(--chronicis-beige-gold);
}

.mud-breadcrumb-separator {
    color: var(--chronicis-muted-gold);
}

/* Nav Menu */
.mud-navmenu {
    padding: 0 !important;
}

/* ============================================
   Chronicis Component Classes
   ============================================ */

/* Logo */
.chronicis-logo {
    width: 32px;
    height: 32px;
    margin-right: var(--chronicis-space-md);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Title */
.chronicis-title {
    font-family: var(--chronicis-font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--chronicis-beige-gold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.chronicis-title::first-letter {
    font-size: 1.4em;
}

/* Navigation children indent */
.chronicis-nav-children {
    margin-left: 13px;
}

.chronicis-nav-children span {
    font-size: 0.8rem;
}

/* Search Box in Drawer */
.chronicis-search-box {
    padding: var(--chronicis-space-md);
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--chronicis-slate-grey);
}

.chronicis-search-box .mud-input-root {
    background-color: rgba(255, 255, 255, 0.05);
}

.chronicis-search-box .mud-input-slot {
    background-color: rgba(243, 240, 235, 0.8) !important;
    margin: 8px !important;
}

.chronicis-search-box .mud-input-adornment-end {
    margin-left: 0px;
}

.chronicis-search-box .mb-2 {
    margin-bottom: 0px !important;
}

/* Global search input */
.global-search-input .mud-input-slot {
    background-color: rgba(243, 240, 235, 0.8) !important;
    padding-left: 8px !important;
    margin: 8px !important;
}

/* Article Card */
.chronicis-article-card {
    background-color: var(--chronicis-soft-off-white);
    border-radius: var(--chronicis-radius-lg);
    padding: var(--chronicis-space-xl);
    box-shadow: var(--chronicis-shadow-sm);
    transition: all var(--chronicis-transition-normal);
}

.chronicis-article-card:hover {
    box-shadow: var(--chronicis-shadow-md);
}

.chronicis-article-title {
    font-family: var(--chronicis-font-heading);
    font-size: 2rem;
    font-weight: 500;
    color: var(--chronicis-charcoal);
    margin-bottom: var(--chronicis-space-md);
}

.chronicis-article-meta {
    color: var(--chronicis-slate-grey);
    font-size: 0.875rem;
    margin-bottom: var(--chronicis-space-lg);
}

.chronicis-article-body {
    color: var(--chronicis-charcoal);
    line-height: 1.7;
    font-size: 1rem;
}

/* Empty States */
.chronicis-empty-state {
    text-align: center;
    padding: var(--chronicis-space-xl);
    color: var(--chronicis-slate-grey);
}

.chronicis-empty-state-icon {
    font-size: 4rem;
    opacity: 0.3;
    margin-bottom: var(--chronicis-space-md);
}

.chronicis-empty-state-title {
    font-family: var(--chronicis-font-heading);
    font-size: 1.5rem;
    color: var(--chronicis-slate-grey);
    margin-bottom: var(--chronicis-space-sm);
}

.chronicis-empty-state-message {
    color: var(--chronicis-slate-grey);
    opacity: 0.7;
}

/* Loading Skeleton */
.chronicis-loading-skeleton {
    background: linear-gradient(
        90deg,
        rgba(196, 175, 142, 0.1) 25%,
        rgba(196, 175, 142, 0.2) 50%,
        rgba(196, 175, 142, 0.1) 75%
    );
    background-size: 200% 100%;
    animation: chronicis-shimmer 1.5s infinite;
    border-radius: var(--chronicis-radius-sm);
}

/* Save Status Indicator */
.chronicis-save-status {
    display: inline-flex;
    align-items: center;
    gap: var(--chronicis-space-xs);
    padding: var(--chronicis-space-xs) var(--chronicis-space-sm);
    border-radius: var(--chronicis-radius-sm);
    font-size: 0.875rem;
    transition: all var(--chronicis-transition-fast);
}

.chronicis-save-status.saving {
    background-color: rgba(255, 167, 38, 0.1);
    color: var(--chronicis-warning);
}

.chronicis-save-status.saved {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--chronicis-success);
}

.chronicis-save-status.unsaved {
    background-color: rgba(239, 83, 80, 0.1);
    color: var(--chronicis-error);
}

/* Hover Glow Effect */
.chronicis-glow-hover {
    transition: all var(--chronicis-transition-fast);
}

.chronicis-glow-hover:hover {
    box-shadow: var(--chronicis-glow-gold);
}

/* Rune Divider */
.chronicis-rune-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--chronicis-beige-gold),
        transparent
    );
    margin: var(--chronicis-space-lg) 0;
    position: relative;
}

.chronicis-rune-divider::before,
.chronicis-rune-divider::after {
    content: '◆';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--chronicis-beige-gold);
    font-size: 0.75rem;
}

.chronicis-rune-divider::before {
    left: 0;
}

.chronicis-rune-divider::after {
    right: 0;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 960px) {
    .chronicis-title {
        font-size: 1.25rem;
    }

    .chronicis-article-title {
        font-size: 1.75rem;
    }
}