/* ==========================================================================
   Wiki.js Custom Theme - Profice Corporate Design
   Optimized CSS Injection with Light/Dark Mode Support
   ========================================================================== */

/* ===== CSS VARIABLES - LIGHT MODE (Default) ===== */
:root {
    /* Core Colors */
    --pf-bg-body: #F7F7F0;
    --pf-bg-content: #FFFFFF;
    --pf-bg-sidebar: #4F4747;
    --pf-bg-header: #4F4747;
    
    /* Text Colors */
    --pf-text-primary: #4F4747;
    --pf-text-secondary: #6B6363;
    --pf-text-muted: #8A8A7A;
    --pf-text-inverse: #F7F7F0;
    
    /* Accent Colors */
    --pf-accent-teal: #5A9E96;
    --pf-accent-teal-hover: #4A8E86;
    --pf-accent-orange: #D4864A;
    --pf-accent-green: #7FB882;
    
    /* UI Elements */
    --pf-border-light: rgba(79, 71, 71, 0.1);
    --pf-border-medium: rgba(79, 71, 71, 0.2);
    --pf-shadow-soft: 0 2px 12px rgba(79, 71, 71, 0.08);
    --pf-shadow-medium: 0 4px 20px rgba(79, 71, 71, 0.12);
    --pf-shadow-card: 0 1px 3px rgba(79, 71, 71, 0.06), 0 4px 16px rgba(79, 71, 71, 0.06);
    
    /* Transitions */
    --pf-transition: 0.2s ease;
    --pf-transition-slow: 0.3s ease;
    
    /* Spacing */
    --pf-radius-sm: 6px;
    --pf-radius-md: 10px;
    --pf-radius-lg: 16px;
    --pf-radius-pill: 50px;
}

/* ===== CSS VARIABLES - DARK MODE ===== */
.theme--dark,
[data-theme="dark"],
.dark-mode {
    --pf-bg-body: #1E1E1E;
    --pf-bg-content: #2D2D2D;
    --pf-bg-sidebar: #252525;
    --pf-bg-header: #252525;
    
    --pf-text-primary: #E8E8E8;
    --pf-text-secondary: #B0B0B0;
    --pf-text-muted: #888888;
    --pf-text-inverse: #1E1E1E;
    
    --pf-border-light: rgba(255, 255, 255, 0.08);
    --pf-border-medium: rgba(255, 255, 255, 0.15);
    --pf-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.3);
    --pf-shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
    --pf-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ===== GLOBAL RESET & BASE ===== */
body {
    background-color: var(--pf-bg-body) !important;
    color: var(--pf-text-primary) !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== HEADER / APP BAR ===== */
header,
.v-app-bar,
.v-toolbar,
.application--wrap > header {
    background-color: var(--pf-bg-header) !important;
    border-bottom: none !important;
    box-shadow: var(--pf-shadow-soft) !important;
}

.v-toolbar__content {
    background: transparent !important;
    border: none !important;
}

/* Header elements */
.v-app-bar .v-toolbar__title,
.v-toolbar__title,
header .v-btn,
header .v-icon,
.v-app-bar .v-icon {
    color: var(--pf-text-inverse) !important;
}

/* Header buttons - clean circular style */
header .v-btn,
.v-app-bar .v-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    transition: var(--pf-transition) !important;
}

header .v-btn:hover,
.v-app-bar .v-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: none !important;
}

/* ===== SEARCH BAR - Clean Pill Style ===== */
.v-app-bar .v-text-field,
header .search-box,
.v-toolbar .v-input,
.v-app-bar .v-input {
    background: rgba(255, 255, 255, 0.12) !important;
    border: none !important;
    border-radius: var(--pf-radius-pill) !important;
    box-shadow: none !important;
    max-width: 400px !important;
}

.v-app-bar .v-text-field input,
.v-app-bar .v-input input {
    color: var(--pf-text-inverse) !important;
    padding: 8px 16px !important;
}

.v-app-bar .v-text-field input::placeholder,
.v-app-bar .v-input input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Remove search field underlines and outlines */
.v-app-bar .v-text-field .v-input__slot::before,
.v-app-bar .v-text-field .v-input__slot::after,
.v-app-bar .v-input .v-input__slot::before,
.v-app-bar .v-input .v-input__slot::after {
    display: none !important;
    border: none !important;
}

.v-app-bar .v-text-field .v-input__slot,
.v-app-bar .v-input .v-input__slot {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.v-app-bar .v-text-field.v-input--is-focused .v-input__slot,
.v-app-bar .v-input.v-input--is-focused .v-input__slot {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* ===== SIDEBAR / NAVIGATION DRAWER ===== */
.v-navigation-drawer,
.v-navigation-drawer__content {
    background-color: var(--pf-bg-sidebar) !important;
    border-right: none !important;
}

/* Sidebar text */
.v-navigation-drawer .v-list-item__title,
.v-navigation-drawer .v-list-item__subtitle,
.v-navigation-drawer .v-icon {
    color: var(--pf-text-inverse) !important;
}

/* Sidebar navigation items */
.v-navigation-drawer .v-list-item {
    margin: 4px 8px !important;
    border-radius: var(--pf-radius-sm) !important;
    transition: var(--pf-transition) !important;
    border: none !important;
    min-height: 40px !important;
}

.v-navigation-drawer .v-list-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Active sidebar item - subtle highlight, no thick border */
.v-navigation-drawer .v-list-item--active,
.v-navigation-drawer .v-list-item.v-list-item--active {
    background: rgba(90, 158, 150, 0.25) !important;
    border: none !important;
}

.v-navigation-drawer .v-list-item--active .v-list-item__title,
.v-navigation-drawer .v-list-item--active .v-icon {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Sidebar section headers */
.v-navigation-drawer .v-subheader {
    color: var(--pf-accent-orange) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ===== MAIN CONTENT AREA ===== */
main,
.v-main,
.v-main__wrap {
    background-color: var(--pf-bg-body) !important;
}

/* Content container - Clean white card */
.container,
.v-container,
.page-col-content,
.contents {
    background: var(--pf-bg-content) !important;
    border-radius: var(--pf-radius-lg) !important;
    box-shadow: var(--pf-shadow-card) !important;
    padding: 32px !important;
    margin: 24px !important;
    border: 1px solid var(--pf-border-light) !important;
}

/* Remove any glass morphism / backdrop filter */
.container,
.v-container,
.page-col-content,
.contents {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ===== BREADCRUMBS ===== */
.v-breadcrumbs {
    background: transparent !important;
    padding: 8px 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
}

.v-breadcrumbs__item,
.v-breadcrumbs a {
    color: var(--pf-text-muted) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: var(--pf-transition) !important;
}

.v-breadcrumbs a:hover {
    color: var(--pf-accent-teal) !important;
}

.v-breadcrumbs__divider {
    color: var(--pf-text-muted) !important;
    padding: 0 8px !important;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    color: var(--pf-text-primary) !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

h1 {
    font-size: 2rem !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--pf-accent-teal) !important;
}

h2 {
    font-size: 1.5rem !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
    color: var(--pf-text-primary) !important;
}

h3 {
    font-size: 1.25rem !important;
    color: var(--pf-accent-teal) !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

p {
    color: var(--pf-text-secondary) !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
}

a {
    color: var(--pf-accent-teal) !important;
    text-decoration: none !important;
    transition: var(--pf-transition) !important;
}

a:hover {
    color: var(--pf-accent-teal-hover) !important;
    text-decoration: underline !important;
}

/* ===== BUTTONS - Standardized Teal Gradient ===== */
.v-btn,
button:not(.v-app-bar .v-btn),
input[type="submit"],
input[type="button"] {
    background: linear-gradient(135deg, var(--pf-accent-teal), var(--pf-accent-green)) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--pf-radius-md) !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 8px rgba(90, 158, 150, 0.3) !important;
    transition: var(--pf-transition) !important;
}

.v-btn:hover,
button:not(.v-app-bar .v-btn):hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    box-shadow: 0 4px 16px rgba(90, 158, 150, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Secondary / Outlined buttons */
.v-btn--outlined {
    background: transparent !important;
    color: var(--pf-text-primary) !important;
    border: 2px solid var(--pf-border-medium) !important;
    box-shadow: none !important;
}

.v-btn--outlined:hover {
    background: var(--pf-bg-body) !important;
    border-color: var(--pf-accent-teal) !important;
    color: var(--pf-accent-teal) !important;
    transform: none !important;
}

/* Icon buttons in content area */
.v-btn--icon {
    background: transparent !important;
    box-shadow: none !important;
}

.v-btn--icon:hover {
    background: var(--pf-border-light) !important;
}

/* ===== CARDS ===== */
.v-card {
    background: var(--pf-bg-content) !important;
    border-radius: var(--pf-radius-md) !important;
    box-shadow: var(--pf-shadow-card) !important;
    border: 1px solid var(--pf-border-light) !important;
    transition: var(--pf-transition-slow) !important;
    overflow: hidden !important;
    position: relative !important;
}

.v-card:hover {
    box-shadow: var(--pf-shadow-medium) !important;
    transform: none !important;
    border-color: var(--pf-border-medium) !important;
}

/* Remove the top gradient bar from cards */
.v-card::before {
    display: none !important;
}

/* ===== FORMS & INPUTS ===== */
.v-text-field .v-input__slot,
.v-input .v-input__slot,
input:not([type="submit"]):not([type="button"]),
textarea,
select {
    background: var(--pf-bg-body) !important;
    border: 1px solid var(--pf-border-medium) !important;
    border-radius: var(--pf-radius-sm) !important;
    transition: var(--pf-transition) !important;
}

.v-text-field.v-input--is-focused .v-input__slot,
.v-input.v-input--is-focused .v-input__slot,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--pf-accent-teal) !important;
    box-shadow: 0 0 0 3px rgba(90, 158, 150, 0.15) !important;
    outline: none !important;
}

/* ===== CODE BLOCKS ===== */
pre,
code {
    font-family: 'Consolas', 'Monaco', 'Fira Code', monospace !important;
}

pre {
    background: #2D2D2D !important;
    color: #E8E8E8 !important;
    border-radius: var(--pf-radius-md) !important;
    padding: 20px !important;
    margin: 16px 0 !important;
    border-left: 4px solid var(--pf-accent-teal) !important;
    overflow-x: auto !important;
}

code:not(pre code) {
    background: rgba(90, 158, 150, 0.1) !important;
    color: var(--pf-accent-teal) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.9em !important;
}

/* ===== BLOCKQUOTES ===== */
blockquote {
    background: rgba(90, 158, 150, 0.08) !important;
    border-left: 4px solid var(--pf-accent-teal) !important;
    border-radius: 0 var(--pf-radius-sm) var(--pf-radius-sm) 0 !important;
    padding: 16px 20px !important;
    margin: 16px 0 !important;
    color: var(--pf-text-secondary) !important;
}

/* ===== ALERTS ===== */
.v-alert {
    border-radius: var(--pf-radius-md) !important;
    padding: 16px 20px !important;
    border: none !important;
    margin: 16px 0 !important;
}

.v-alert.success,
.v-alert--success {
    background: rgba(127, 184, 130, 0.15) !important;
    border-left: 4px solid var(--pf-accent-green) !important;
}

.v-alert.info,
.v-alert--info {
    background: rgba(90, 158, 150, 0.15) !important;
    border-left: 4px solid var(--pf-accent-teal) !important;
}

.v-alert.warning,
.v-alert--warning {
    background: rgba(212, 134, 74, 0.15) !important;
    border-left: 4px solid var(--pf-accent-orange) !important;
}

.v-alert.error,
.v-alert--error {
    background: rgba(220, 80, 80, 0.15) !important;
    border-left: 4px solid #DC5050 !important;
}

/* ===== TABLES ===== */
table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-radius: var(--pf-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--pf-shadow-soft) !important;
    margin: 16px 0 !important;
}

table th {
    background: var(--pf-bg-sidebar) !important;
    color: var(--pf-text-inverse) !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
    text-align: left !important;
}

table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--pf-border-light) !important;
    color: var(--pf-text-secondary) !important;
}

table tr:hover td {
    background: rgba(90, 158, 150, 0.04) !important;
}

/* ===== TAGS / CHIPS ===== */
.v-chip {
    background: linear-gradient(135deg, var(--pf-accent-teal), var(--pf-accent-green)) !important;
    color: #FFFFFF !important;
    border-radius: var(--pf-radius-pill) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
}

/* ===== DIALOGS / MODALS ===== */
.v-dialog {
    border-radius: var(--pf-radius-lg) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
}

.v-dialog .v-card {
    border-radius: var(--pf-radius-lg) !important;
    box-shadow: none !important;
}

/* ===== TOOLTIPS ===== */
.v-tooltip__content {
    background: var(--pf-bg-sidebar) !important;
    color: var(--pf-text-inverse) !important;
    border-radius: var(--pf-radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    box-shadow: var(--pf-shadow-medium) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--pf-bg-body);
}

::-webkit-scrollbar-thumb {
    background: var(--pf-text-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pf-text-secondary);
}

/* ===== SELECTION ===== */
::selection {
    background: var(--pf-accent-teal);
    color: #FFFFFF;
}

/* ===== WIKI.JS SPECIFIC FIXES ===== */

/* Page title styling */
.page-header h1,
.contents > h1:first-child {
    font-size: 2rem !important;
    color: var(--pf-text-primary) !important;
    border-bottom: 2px solid var(--pf-accent-teal) !important;
    padding-bottom: 12px !important;
    margin-bottom: 24px !important;
}

/* Sidebar tree view */
.v-treeview {
    background: transparent !important;
}

.v-treeview-node__root {
    border-radius: var(--pf-radius-sm) !important;
    margin: 2px 0 !important;
}

.v-treeview-node__root:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Comments section */
.comments-container {
    background: var(--pf-bg-content) !important;
    border-radius: var(--pf-radius-md) !important;
    padding: 20px !important;
    border: 1px solid var(--pf-border-light) !important;
}

/* Editor */
.editor,
.ProseMirror,
.CodeMirror {
    background: var(--pf-bg-content) !important;
    border-radius: var(--pf-radius-md) !important;
    border: 1px solid var(--pf-border-medium) !important;
}

.editor:focus-within,
.ProseMirror:focus,
.CodeMirror-focused {
    border-color: var(--pf-accent-teal) !important;
    box-shadow: 0 0 0 3px rgba(90, 158, 150, 0.15) !important;
}

/* Page info sidebar cards */
.page-col-sd .v-card {
    background: var(--pf-bg-content) !important;
    border: 1px solid var(--pf-border-light) !important;
    margin-bottom: 16px !important;
}

/* Dividers */
hr,
.v-divider {
    border-color: var(--pf-border-light) !important;
    margin: 24px 0 !important;
}

/* Lists */
ul, ol {
    padding-left: 24px !important;
    margin: 12px 0 !important;
}

li {
    margin-bottom: 8px !important;
    color: var(--pf-text-secondary) !important;
}

li::marker {
    color: var(--pf-accent-teal) !important;
}

/* Images */
.contents img {
    border-radius: var(--pf-radius-md) !important;
    box-shadow: var(--pf-shadow-soft) !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Loading states */
.v-progress-circular {
    color: var(--pf-accent-teal) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
    .container,
    .v-container,
    .page-col-content,
    .contents {
        padding: 20px !important;
        margin: 12px !important;
        border-radius: var(--pf-radius-md) !important;
    }
    
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.35rem !important;
    }
}

@media (max-width: 600px) {
    .container,
    .v-container,
    .page-col-content,
    .contents {
        padding: 16px !important;
        margin: 8px !important;
    }
    
    .v-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}

/* ===== PRINT ===== */
@media print {
    header,
    .v-app-bar,
    .v-navigation-drawer,
    footer {
        display: none !important;
    }
    
    body {
        background: #FFFFFF !important;
    }
    
    .container,
    .v-container {
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}