/* ==========================================================================
   VIKUNJA TRUE DARK-COMPACT-STYLED (Еталон)
   Pixel-Perfect Adaptation based on bmscmoreira/VikunjaStyles & Vikunja v2.6.0
   ========================================================================== */

/* 1. Global Color Variables */
:root, [data-theme="dark"], html, body {
    --white: #ffffff !important;
    --heavy-gray: #121212 !important;
    --medium-gray: #1a1a1a !important;
    --dark-card: #1e1e1e !important;
    --dark-hover: #262626 !important;
    --border-dark: #2a2a2a !important;
    --red: #ff4136 !important;
    --orange: #ff851b !important;

    /* Override System Variables */
    --scheme-main: #121212 !important;
    --scheme-main-bis: #141414 !important;
    --scheme-main-ter: #181818 !important;
    --body-background-color: #121212 !important;
    --background: #121212 !important;
    --content-background: #121212 !important;
    --card-background-color: #1a1a1a !important;
    --sidebar-background: #141414 !important;
    --navbar-background-color: #121212 !important;
    --text: #f0f0f0 !important;
    --text-strong: #ffffff !important;
    --text-light: #888888 !important;
    --border: #282828 !important;
    --border-hover: #3a3a3a !important;
}

/* 2. Global Surface & Typography */
html, body, #app, .app-container, .main-container, main, .content-container {
    background-color: #121212 !important;
    color: #f0f0f0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* 3. SIDEBAR FIX: Fix Glaring White Active Item */
aside, .sidebar, .menu, .namespace-container, .menu-container {
    background-color: #141414 !important;
    border-right: 1px solid #222222 !important;
}

/* Neutralize the bright white active background */
.menu-list a.is-active,
.menu-list a.router-link-active,
.menu-list a.router-link-exact-active,
.router-link-active,
.router-link-exact-active,
.navigation-item.is-active,
.menu-active,
a.is-active {
    background-color: #222222 !important;
    color: #ff851b !important;
    font-weight: 700 !important;
    border-left: 3px solid #ff851b !important;
}

.menu-list a, .sidebar-item, .list-menu-link, .menu a {
    color: #a0a0a0 !important;
    padding: 5px 12px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    transition: all 0.15s ease-in-out !important;
}

.menu-list a:hover, .sidebar-item:hover, .list-menu-link:hover {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

/* 4. VIEW SWITCHER FIX: Neutralize White Bubble Tabs */
.switch-view, .tabs, .tabs ul, [class*="view-switcher"], [class*="view-tabs"] {
    background: #181818 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 3px !important;
    box-shadow: none !important;
}

.switch-view a, .tabs li a, .tabs a, [class*="view-switcher"] button {
    background: transparent !important;
    color: #888888 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 4px 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.switch-view a:hover, .tabs li a:hover {
    color: #ffffff !important;
    background: #242424 !important;
}

/* Active tab: Sharp Orange & Black */
.switch-view a.is-active,
.switch-view .is-active,
.tabs li.is-active a,
.tabs li.is-active,
[class*="view-switcher"] .is-active,
[class*="view-button"].is-active {
    background-color: #ff851b !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* 5. TOP NAVBAR */
nav, .navbar, header, .top-menu {
    background-color: #121212 !important;
    border-bottom: 1px solid #222222 !important;
}

/* 6. PRIORITY BADGES (Original bmscmoreira High Contrast) */
.high-priority, [class*="priority-urgent"], [class*="priority-5"], [class*="priority-4"] {
    background-color: #ff4136 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.high-priority.not-so-high, [class*="priority-high"], [class*="priority-3"] {
    background-color: #ff851b !important;
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 7. KANBAN BOARD STYLING ("ДОШКА") */
.kanban, .kanban-board {
    background-color: #121212 !important;
    padding: 10px 0 !important;
}

.kanban .bucket, [class*="bucket"] {
    background-color: #161616 !important;
    border: 1px solid #262626 !important;
    border-radius: 6px !important;
    padding: 8px !important;
    margin-right: 12px !important;
}

.kanban .bucket .bucket-header, [class*="bucket-header"] {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #222222 !important;
    margin-bottom: 8px !important;
}

/* Kanban task cards */
.kanban .task, .kanban .card, [class*="kanban-task"] {
    background-color: #202020 !important;
    border: 1px solid #2c2c2c !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    box-shadow: none !important;
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

.kanban .task:hover, .kanban .card:hover {
    background-color: #262626 !important;
    border-color: #ff851b !important;
}

/* Add Column / Add Task Buttons */
.kanban .new-bucket-button, [class*="new-bucket"], [class*="add-bucket"], .add-task-button, .task-add {
    background-color: #181818 !important;
    border: 1px dashed #333333 !important;
    color: #a0a0a0 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.kanban .new-bucket-button:hover, .add-task-button:hover {
    background-color: #222222 !important;
    border-color: #ff851b !important;
    color: #ff851b !important;
}

/* 8. LIST VIEW COMPACTNESS (Original benchmark) */
.tasks .task, .task-item, .task-link {
    background-color: #181818 !important;
    border: 1px solid #242424 !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
    margin-bottom: 3px !important;
    min-height: 28px !important;
    box-shadow: none !important;
}

.tasks .task:hover, .task-item:hover {
    background-color: #222222 !important;
    border-color: #383838 !important;
}

.task-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #f0f0f0 !important;
}

/* Due Dates in Italic / Red for overdue */
.task-glance-due, [class*="due-date"] {
    font-size: 11.5px !important;
    font-style: italic !important;
    color: #ff851b !important;
}

/* Checkboxes */
input[type="checkbox"], .fancy-checkbox {
    accent-color: #ff851b !important;
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
}

/* 9. LABELS & TAGS */
.label, .tag, .task-glance-labels span {
    background-color: #222222 !important;
    color: #d0d0d0 !important;
    border: 1px solid #363636 !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    padding: 1px 6px !important;
}

/* 10. PROJECT CARDS ("Перегляньте") */
.card, .project-card, [class*="project-tile"] {
    background-color: #181818 !important;
    border: 1px solid #262626 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.card:hover, .project-card:hover {
    background-color: #222222 !important;
    border-color: #3a3a3a !important;
}

/* 11. INPUTS & GENERAL BUTTONS */
input, textarea, select {
    background-color: #181818 !important;
    border: 1px solid #2a2a2a !important;
    color: #f0f0f0 !important;
    border-radius: 4px !important;
}

input:focus, textarea:focus {
    border-color: #ff851b !important;
    box-shadow: 0 0 0 1px #ff851b !important;
}

.button, button:not([class*="toggle"]) {
    height: 28px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.button.is-primary, button.is-primary {
    background-color: #ff851b !important;
    color: #000000 !important;
    border: none !important;
}

/* 12. SPECIAL EFFECTS KILLER */
* {
    box-shadow: none !important;
}