:root {
    --taiga-theme-toggle-bg: rgba(12, 17, 23, 0.9);
    --taiga-theme-toggle-text: #eef6ff;
    --taiga-theme-toggle-border: rgba(114, 142, 168, 0.35);
    --taiga-theme-toggle-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
}

.taiga-theme-toggle {
    align-items: center;
    backdrop-filter: blur(14px);
    background: var(--taiga-theme-toggle-bg);
    border: 1px solid var(--taiga-theme-toggle-border);
    border-radius: 999px;
    bottom: 20px;
    box-shadow: var(--taiga-theme-toggle-shadow);
    color: var(--taiga-theme-toggle-text);
    cursor: pointer;
    display: inline-flex;
    font: 600 13px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    gap: 10px;
    padding: 12px 14px;
    position: fixed;
    right: 20px;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
    z-index: 99999;
}

.taiga-theme-toggle:hover {
    transform: translateY(-1px);
}

.taiga-theme-toggle:focus-visible {
    outline: 2px solid #7fc9ff;
    outline-offset: 2px;
}

.taiga-theme-toggle-label {
    letter-spacing: 0.02em;
}

.taiga-theme-toggle-track {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    display: inline-block;
    height: 20px;
    position: relative;
    width: 40px;
}

.taiga-theme-toggle-thumb {
    background: #f0f6ff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    height: 16px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: transform 160ms ease;
    width: 16px;
}

.taiga-theme-toggle[data-mode="midnight"] .taiga-theme-toggle-track {
    background: rgba(17, 179, 122, 0.5);
}

.taiga-theme-toggle[data-mode="midnight"] .taiga-theme-toggle-thumb {
    transform: translateX(20px);
}

html[data-theme="midnight"] {
    --tg-bg: #0c1117;
    --tg-bg-sunken: #091019;
    --tg-bg-elevated: #121b25;
    --tg-bg-soft: #18232f;
    --tg-border: #2d3947;
    --tg-border-strong: #3b4b5d;
    --tg-text: #e5eef8;
    --tg-text-muted: #98aabd;
    --tg-link: #7fc9ff;
    --tg-accent: #13b981;
    --tg-accent-strong: #0d9b6f;
    --tg-danger: #f87171;
    --tg-warning: #f0b44d;
    background: var(--tg-bg);
    color-scheme: dark;
}

html[data-theme="midnight"] body,
html[data-theme="midnight"] tg-legacy,
html[data-theme="midnight"] .master,
html[data-theme="midnight"] [ng-view],
html[data-theme="midnight"] .loader,
html[data-theme="midnight"] .home-wrapper,
html[data-theme="midnight"] .discover,
html[data-theme="midnight"] .profile,
html[data-theme="midnight"] .notifications,
html[data-theme="midnight"] .admin,
html[data-theme="midnight"] .wiki,
html[data-theme="midnight"] .issues,
html[data-theme="midnight"] .team,
html[data-theme="midnight"] .search,
html[data-theme="midnight"] .taskboard,
html[data-theme="midnight"] .kanban,
html[data-theme="midnight"] .backlog,
html[data-theme="midnight"] .epics {
    background: var(--tg-bg) !important;
    color: var(--tg-text) !important;
}

html[data-theme="midnight"] header,
html[data-theme="midnight"] nav,
html[data-theme="midnight"] tg-navigation-bar,
html[data-theme="midnight"] .navbar,
html[data-theme="midnight"] .top-menu,
html[data-theme="midnight"] .project-nav,
html[data-theme="midnight"] .menu,
html[data-theme="midnight"] .subnav {
    background: #0b1219 !important;
    border-color: var(--tg-border) !important;
    color: var(--tg-text) !important;
}

html[data-theme="midnight"] section,
html[data-theme="midnight"] article,
html[data-theme="midnight"] aside,
html[data-theme="midnight"] .wrapper,
html[data-theme="midnight"] .panel,
html[data-theme="midnight"] .content,
html[data-theme="midnight"] .dashboard,
html[data-theme="midnight"] .sidebar,
html[data-theme="midnight"] .detail,
html[data-theme="midnight"] .listing,
html[data-theme="midnight"] .card,
html[data-theme="midnight"] .row,
html[data-theme="midnight"] .lightbox form,
html[data-theme="midnight"] .lightbox section,
html[data-theme="midnight"] .notification-message,
html[data-theme="midnight"] .notification-light,
html[data-theme="midnight"] .dropdown,
html[data-theme="midnight"] .popover,
html[data-theme="midnight"] .tooltip,
html[data-theme="midnight"] .board,
html[data-theme="midnight"] .swimlane,
html[data-theme="midnight"] .kanban-table,
html[data-theme="midnight"] .taskboard-table,
html[data-theme="midnight"] .backlog-table,
html[data-theme="midnight"] .history-entry,
html[data-theme="midnight"] .project-card,
html[data-theme="midnight"] .user-story,
html[data-theme="midnight"] .issue,
html[data-theme="midnight"] .task {
    background: var(--tg-bg-elevated) !important;
    border-color: var(--tg-border) !important;
    color: var(--tg-text) !important;
}

html[data-theme="midnight"] .row:nth-child(even),
html[data-theme="midnight"] tr:nth-child(even),
html[data-theme="midnight"] .table-main tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.025) !important;
}

html[data-theme="midnight"] h1,
html[data-theme="midnight"] h2,
html[data-theme="midnight"] h3,
html[data-theme="midnight"] h4,
html[data-theme="midnight"] h5,
html[data-theme="midnight"] h6,
html[data-theme="midnight"] strong,
html[data-theme="midnight"] b,
html[data-theme="midnight"] .title,
html[data-theme="midnight"] .subject {
    color: var(--tg-text) !important;
}

html[data-theme="midnight"] p,
html[data-theme="midnight"] span,
html[data-theme="midnight"] label,
html[data-theme="midnight"] li,
html[data-theme="midnight"] small,
html[data-theme="midnight"] .subtitle,
html[data-theme="midnight"] .description,
html[data-theme="midnight"] .message {
    color: inherit;
}

html[data-theme="midnight"] .description,
html[data-theme="midnight"] .subtitle,
html[data-theme="midnight"] .date,
html[data-theme="midnight"] .meta,
html[data-theme="midnight"] .placeholder,
html[data-theme="midnight"] .hint {
    color: var(--tg-text-muted) !important;
}

html[data-theme="midnight"] a,
html[data-theme="midnight"] a:visited {
    color: var(--tg-link) !important;
}

html[data-theme="midnight"] a:hover {
    color: #a6dcff !important;
}

html[data-theme="midnight"] hr,
html[data-theme="midnight"] table,
html[data-theme="midnight"] th,
html[data-theme="midnight"] td,
html[data-theme="midnight"] .table-main,
html[data-theme="midnight"] .table-main th,
html[data-theme="midnight"] .table-main td,
html[data-theme="midnight"] .table-header,
html[data-theme="midnight"] .table-row {
    border-color: var(--tg-border) !important;
    color: var(--tg-text) !important;
}

html[data-theme="midnight"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="midnight"] textarea,
html[data-theme="midnight"] select,
html[data-theme="midnight"] .select,
html[data-theme="midnight"] .select2-selection,
html[data-theme="midnight"] .filters input,
html[data-theme="midnight"] .filters select {
    background: var(--tg-bg-sunken) !important;
    border-color: var(--tg-border-strong) !important;
    box-shadow: none !important;
    color: var(--tg-text) !important;
}

html[data-theme="midnight"] input::placeholder,
html[data-theme="midnight"] textarea::placeholder {
    color: #7f91a5 !important;
}

html[data-theme="midnight"] button,
html[data-theme="midnight"] .button,
html[data-theme="midnight"] .btn-small,
html[data-theme="midnight"] .btn-link,
html[data-theme="midnight"] .button-gray,
html[data-theme="midnight"] .button-white,
html[data-theme="midnight"] .button-trans {
    background: var(--tg-bg-soft) !important;
    border-color: var(--tg-border-strong) !important;
    color: var(--tg-text) !important;
}

html[data-theme="midnight"] .button-green,
html[data-theme="midnight"] .btn-confirm,
html[data-theme="midnight"] .create-project-action-submit,
html[data-theme="midnight"] button[variant="primary"],
html[data-theme="midnight"] .button-primary {
    background: var(--tg-accent) !important;
    border-color: var(--tg-accent-strong) !important;
    color: #04120d !important;
}

html[data-theme="midnight"] button[variant="destructive"],
html[data-theme="midnight"] .button-red,
html[data-theme="midnight"] .btn-delete {
    background: #7f1d1d !important;
    border-color: #b91c1c !important;
    color: #fff3f3 !important;
}

html[data-theme="midnight"] button:hover,
html[data-theme="midnight"] .button:hover,
html[data-theme="midnight"] .btn-small:hover {
    filter: brightness(1.08);
}

html[data-theme="midnight"] .tag,
html[data-theme="midnight"] .badge,
html[data-theme="midnight"] .pill,
html[data-theme="midnight"] .status-tag,
html[data-theme="midnight"] .assigned-users-more {
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

html[data-theme="midnight"] .empty,
html[data-theme="midnight"] .empty-large,
html[data-theme="midnight"] .empty-filter,
html[data-theme="midnight"] .empty-state {
    background: transparent !important;
    color: var(--tg-text-muted) !important;
}

html[data-theme="midnight"] img,
html[data-theme="midnight"] svg,
html[data-theme="midnight"] video,
html[data-theme="midnight"] canvas {
    opacity: 0.97;
}

@media (max-width: 640px) {
    .taiga-theme-toggle {
        bottom: 14px;
        padding: 10px 12px;
        right: 14px;
    }

    .taiga-theme-toggle-label {
        display: none;
    }
}