/* ================================================
   GITHUB-STYLE THEME - Clean & Minimal
   Inspired by GitHub's Dark Mode Interface
   ================================================ */

:root {
    /* GitHub Dark Colors */
    --gh-bg-canvas: #0d1117;
    --gh-bg-default: #161b22;
    --gh-bg-subtle: #21262d;
    --gh-bg-muted: #30363d;
    --gh-bg-emphasis: #6e7681;

    --gh-border-default: #30363d;
    --gh-border-muted: #21262d;
    --gh-border-subtle: rgba(240, 246, 252, 0.1);

    --gh-text-primary: #e6edf3;
    --gh-text-secondary: #8d96a0;
    --gh-text-muted: #6e7681;
    --gh-text-placeholder: #484f58;

    /* Accent Colors */
    --gh-accent-blue: #58a6ff;
    --gh-accent-green: #3fb950;
    --gh-accent-yellow: #d29922;
    --gh-accent-red: #f85149;
    --gh-accent-purple: #a371f7;
    --gh-accent-emphasis: #1f6feb;

    /* Functional colors */
    --gh-link-color: #58a6ff;
    --gh-success: #238636;
    --gh-danger: #da3633;
    --gh-warning: #9e6a03;

    /* Shadows - Very subtle */
    --gh-shadow-sm: 0 1px 0 rgba(27, 31, 36, 0.04);
    --gh-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15);
    --gh-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);
    --gh-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.35);

    /* Border Radius - More subtle */
    --gh-radius-sm: 4px;
    --gh-radius-md: 6px;
    --gh-radius-lg: 8px;
    --gh-radius-full: 100px;

    /* Typography */
    --gh-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    --gh-font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;

    /* Spacing */
    --gh-space-1: 4px;
    --gh-space-2: 8px;
    --gh-space-3: 12px;
    --gh-space-4: 16px;
    --gh-space-5: 24px;
    --gh-space-6: 32px;

    /* Layout */
    --gh-sidebar-width: 260px;
    --gh-sidebar-collapsed: 56px;
    --gh-header-height: 48px;

    /* Override app.css variables */
    --color-bg-primary: var(--gh-bg-canvas);
    --color-bg-secondary: var(--gh-bg-default);
    --color-bg-tertiary: var(--gh-bg-subtle);
    --color-bg-elevated: var(--gh-bg-muted);
    --color-bg-hover: var(--gh-bg-muted);

    --color-border: var(--gh-border-default);
    --color-border-light: var(--gh-border-subtle);

    --color-text-primary: var(--gh-text-primary);
    --color-text-secondary: var(--gh-text-secondary);
    --color-text-tertiary: var(--gh-text-muted);
    --color-text-muted: var(--gh-text-placeholder);

    --color-primary: var(--gh-accent-emphasis);
    --color-primary-light: var(--gh-accent-blue);
    --color-primary-dark: #1158c7;
    --color-primary-bg: rgba(31, 111, 235, 0.15);

    --sidebar-width: var(--gh-sidebar-width);
    --header-height: var(--gh-header-height);
}

/* ================================================
   GLOBAL EMOJI GRAYSCALE - Desaturate all emojis
   Only target specific containers, not all text
   ================================================ */

/* Headers with emojis - grayscale the emoji part */
.dist-card h4,
.kpi-header h4,
.goal-icon,
.tip-icon {
    filter: grayscale(100%);
}

/* Restore normal text in bar labels */
.bar-label,
.bar-value,
.priority-bars .bar-label,
.priority-bars span {
    filter: none !important;
    color: var(--gh-text-secondary) !important;
}

/* Priority bars structure */
.priority-bars {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.bar-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.bar-label {
    min-width: 80px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.bar-track {
    flex: 1 !important;
    height: 8px !important;
    background: var(--gh-bg-muted) !important;
    border-radius: 4px !important;
}

.bar-value {
    min-width: 24px !important;
    text-align: right !important;
    color: var(--gh-text-muted) !important;
    font-size: 12px !important;
}

/* Icon elements - no filter */
[class^="icon-"],
[class*=" icon-"],
i[class*="icon-"] {
    filter: none !important;
}

/* ================================================
   BASE STYLES & TYPOGRAPHY
   ================================================ */
body {
    font-family: var(--gh-font-sans);
    background: var(--gh-bg-canvas);
    color: var(--gh-text-primary);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Typography - GitHub Style Headers */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    color: var(--gh-text-primary) !important;
}

h1 {
    font-size: 24px !important;
}

h2 {
    font-size: 20px !important;
}

h3 {
    font-size: 16px !important;
}

h4 {
    font-size: 14px !important;
}

p,
span,
label {
    letter-spacing: 0.01em;
}

/* ================================================
   ICONS - Minimal Monochrome (GitHub Style)
   ================================================ */
/* All icons should be monochrome gray - no saturated colors */
i,
[class^="icon-"],
[class*=" icon-"],
.nav-item i,
.sidebar i,
.btn i,
.modal i,
.header-action-btn i,
.section-label i,
.gtd-option i {
    color: var(--gh-text-muted) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: color 0.15s ease !important;
}

/* Icons on hover - slightly lighter but still gray */
a:hover i,
button:hover i,
.nav-item:hover i,
.btn:hover i {
    color: var(--gh-text-secondary) !important;
}

/* Active state icons */
.nav-item.active i {
    color: var(--gh-text-primary) !important;
}

/* Smaller icons in specific contexts */
.sidebar-nav i,
.nav-item i {
    font-size: 15px !important;
    width: 16px !important;
    text-align: center !important;
}

/* Remove any icon colors from badges */
.badge i,
.nav-item .badge {
    color: inherit !important;
}

/* Button icons - match button text */
.btn-primary i,
.btn-danger i {
    color: #ffffff !important;
}

/* No colored emoji icons - use simple versions */
.gtd-option i,
.section-label i {
    font-size: 14px !important;
    opacity: 0.7;
}

/* ================================================
   SIDEBAR - GitHub Style
   ================================================ */
.sidebar {
    background: var(--gh-bg-canvas) !important;
    border-right: 1px solid var(--gh-border-default) !important;
    width: var(--gh-sidebar-width) !important;
}

.sidebar-header {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: var(--gh-space-3) var(--gh-space-4) !important;
    height: auto !important;
    min-height: 48px;
    border-bottom: 1px solid var(--gh-border-default) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-header .logo {
    padding: 0 !important;
}

.sidebar-header .logo img {
    height: 24px !important;
    opacity: 0.9;
}

#toggle-sidebar {
    width: 32px;
    height: 32px;
    border-radius: var(--gh-radius-md);
    color: var(--gh-text-muted);
    transition: all 0.15s ease;
}

#toggle-sidebar:hover {
    background: var(--gh-bg-subtle);
    color: var(--gh-text-primary);
}

/* Sidebar Content */
.sidebar-content {
    padding: var(--gh-space-3) var(--gh-space-3) !important;
}

/* Quick Capture Button - GitHub Primary Button Style */
.quick-capture-btn,
#quick-capture-btn {
    width: 100% !important;
    padding: var(--gh-space-2) var(--gh-space-3) !important;
    border-radius: var(--gh-radius-md) !important;
    background: var(--gh-success) !important;
    border: 1px solid rgba(240, 246, 252, 0.1) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    transition: background 0.15s ease !important;
    margin-bottom: var(--gh-space-4) !important;
}

.quick-capture-btn:hover,
#quick-capture-btn:hover {
    background: #2ea043 !important;
}

.quick-capture-btn kbd {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    margin-left: auto !important;
}

/* Navigation */
.sidebar-nav {
    gap: var(--gh-space-1) !important;
}

.nav-section {
    gap: 0 !important;
}

.nav-section-main {
    margin-bottom: var(--gh-space-3) !important;
    padding-bottom: var(--gh-space-3) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
}

.nav-section-header {
    padding: var(--gh-space-2) var(--gh-space-2) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--gh-text-secondary) !important;
}

.nav-section-header .header-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-section-header .toggle-icon {
    font-size: 10px;
    color: var(--gh-text-muted);
}

/* Nav Items - GitHub Style */
.nav-item {
    display: flex;
    align-items: center;
    gap: var(--gh-space-2) !important;
    padding: 6px var(--gh-space-2) !important;
    border-radius: var(--gh-radius-md) !important;
    color: var(--gh-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    transition: all 0.1s ease !important;
    margin: 1px 0;
}

.nav-item::before {
    display: none !important;
}

.nav-item:hover {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-primary) !important;
    transform: none !important;
}

.nav-item.active {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-primary) !important;
    font-weight: 500 !important;
}

.nav-item.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: #f78166;
    border-radius: 0 3px 3px 0;
}

.nav-item i {
    width: 16px !important;
    font-size: 14px !important;
    color: var(--gh-text-muted);
    text-align: center;
}

.nav-item:hover i,
.nav-item.active i {
    color: var(--gh-text-secondary);
}

/* Badges - GitHub Counter Style */
.nav-item .badge {
    margin-left: auto;
    padding: 0 6px !important;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gh-bg-muted) !important;
    border-radius: var(--gh-radius-full) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--gh-text-secondary) !important;
}

.nav-item .badge.warning {
    background: rgba(210, 153, 34, 0.15) !important;
    color: var(--gh-accent-yellow) !important;
}

.nav-item .badge.success {
    background: rgba(63, 185, 80, 0.15) !important;
    color: var(--gh-accent-green) !important;
}

/* Sidebar Projects/Contexts List */
.nav-items-list {
    max-height: 180px !important;
}

.nav-items-list .nav-item {
    padding-left: var(--gh-space-4) !important;
}

.nav-items-list .nav-item::before {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--item-color, var(--gh-bg-emphasis)) !important;
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
}

/* Sidebar Footer */
.sidebar-footer {
    border-top: 1px solid var(--gh-border-default) !important;
    padding: var(--gh-space-3) !important;
}

.sidebar-footer-fixed {
    border-top: 1px solid var(--gh-border-default) !important;
    padding-top: var(--gh-space-3) !important;
    margin-top: var(--gh-space-2) !important;
}

/* Search inside sidebar */
.sidebar-search-wrap {
    margin-bottom: var(--gh-space-2);
}

.sidebar-search {
    width: 100%;
    padding: 5px 8px !important;
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    color: var(--gh-text-primary) !important;
    font-size: 12px !important;
}

.sidebar-search:focus {
    border-color: var(--gh-accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
}

/* ================================================
   MAIN CONTENT
   ================================================ */
.main-content {
    margin-left: var(--gh-sidebar-width) !important;
    background: var(--gh-bg-canvas);
}

/* ================================================
   HEADER - GitHub Style
   ================================================ */
.main-header {
    height: var(--gh-header-height) !important;
    background: var(--gh-bg-default) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
    padding: 0 var(--gh-space-4) !important;
    backdrop-filter: none !important;
}

.header-left h1,
#view-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--gh-text-primary) !important;
    letter-spacing: 0 !important;
}

/* Search Bar - GitHub Style */
.search-container {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    padding: 5px 12px !important;
    max-width: 400px;
}

.search-container:focus-within {
    border-color: var(--gh-accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
}

.search-container i {
    color: var(--gh-text-muted) !important;
    font-size: 13px !important;
}

.search-container input,
#global-search {
    background: transparent !important;
    border: none !important;
    color: var(--gh-text-primary) !important;
    font-size: 13px !important;
    padding: 0 8px !important;
}

.search-container input::placeholder {
    color: var(--gh-text-placeholder) !important;
}

.search-container kbd {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    color: var(--gh-text-muted) !important;
}

/* Header Actions */
.header-right {
    gap: 8px;
}

.btn-icon,
.header-action-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--gh-radius-md) !important;
    color: var(--gh-text-secondary) !important;
}

.btn-icon:hover,
.header-action-btn:hover {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-primary) !important;
}

/* Focus Button */
.btn-focus-header {
    padding: 5px 12px !important;
    background: transparent !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: var(--gh-radius-md) !important;
}

.btn-focus-header:hover {
    background: var(--gh-bg-subtle) !important;
    border-color: var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
}

/* User Menu */
.user-avatar {
    width: 28px !important;
    height: 28px !important;
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    color: var(--gh-text-primary) !important;
}

.user-avatar:hover {
    border-color: var(--gh-text-muted) !important;
}

.user-dropdown {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-lg) !important;
    box-shadow: var(--gh-shadow-lg) !important;
}

.user-info {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
}

.user-info #user-name {
    color: var(--gh-text-primary) !important;
    font-weight: 600 !important;
}

.user-info #user-email {
    color: var(--gh-text-muted) !important;
    font-size: 12px !important;
}

.dropdown-item {
    padding: 8px 16px !important;
    font-size: 13px !important;
    color: var(--gh-text-secondary) !important;
}

.dropdown-item:hover {
    background: var(--gh-accent-emphasis) !important;
    color: #ffffff !important;
}

.dropdown-item.danger:hover {
    background: var(--gh-danger) !important;
}

/* ================================================
   CONTENT AREA
   ================================================ */
.content-area {
    padding: var(--gh-space-5) !important;
    background: var(--gh-bg-canvas);
}

/* ================================================
   BUTTONS - GitHub Button System
   ================================================ */
.btn {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 5px 16px !important;
    border-radius: var(--gh-radius-md) !important;
    border: 1px solid transparent !important;
    transition: all 0.1s ease !important;
}

.btn-primary {
    background: var(--gh-success) !important;
    border-color: rgba(240, 246, 252, 0.1) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-primary:hover {
    background: #2ea043 !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-secondary {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
}

.btn-secondary:hover {
    background: var(--gh-bg-muted) !important;
    border-color: var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
}

.btn-ghost {
    background: transparent !important;
    color: var(--gh-text-secondary) !important;
}

.btn-ghost:hover {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-primary) !important;
}

.btn-danger {
    background: var(--gh-danger) !important;
    border-color: rgba(240, 246, 252, 0.1) !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    background: #b62324 !important;
}

/* ================================================
   FORMS - GitHub Style
   ================================================ */
input,
textarea,
select {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    color: var(--gh-text-primary) !important;
    padding: 5px 12px !important;
    font-size: 13px !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--gh-accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--gh-text-placeholder) !important;
}

/* Checkbox - GitHub Style */
input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    border: 2px solid var(--gh-border-default) !important;
    border-radius: 3px !important;
    background: var(--gh-bg-canvas) !important;
}

input[type="checkbox"]:checked {
    background: var(--gh-success) !important;
    border-color: var(--gh-success) !important;
}

/* ================================================
   MODALS - GitHub Style
   ================================================ */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.6) !important;
}

.modal-content {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-lg) !important;
    box-shadow: var(--gh-shadow-xl) !important;
}

.modal-header {
    padding: var(--gh-space-4) var(--gh-space-5) !important;
    background: var(--gh-bg-default) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
}

.modal-header h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gh-text-primary) !important;
}

.modal-header h2::before {
    display: none !important;
}

.modal-close {
    color: var(--gh-text-muted) !important;
    width: 28px;
    height: 28px;
    border-radius: var(--gh-radius-md);
}

.modal-close:hover {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-primary) !important;
}

.modal-body {
    padding: var(--gh-space-4) var(--gh-space-5) !important;
}

.modal-footer {
    padding: var(--gh-space-3) var(--gh-space-5) !important;
    background: var(--gh-bg-subtle) !important;
    border-top: 1px solid var(--gh-border-default) !important;
}

/* ================================================
   TASK MODAL - GitHub PR Style
   ================================================ */
.modal-content.task-modal {
    max-width: 900px !important;
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-lg) !important;
}

.task-modal .modal-header {
    background: var(--gh-bg-default) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
    padding: 12px 20px !important;
}

.task-modal #task-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--gh-text-primary) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.task-modal #task-title:focus {
    box-shadow: none !important;
}

/* Task Modal Sidebar */
.task-modal-sidebar {
    background: var(--gh-bg-subtle) !important;
    border-left: 1px solid var(--gh-border-default) !important;
}

.sidebar-section {
    margin-bottom: 16px !important;
}

.sidebar-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--gh-text-primary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}

.sidebar-field label {
    font-size: 12px !important;
    color: var(--gh-text-secondary) !important;
    font-weight: 500 !important;
}

.sidebar-field select,
.sidebar-field input {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
}

/* GTD Options */
.gtd-decision-section {
    background: var(--gh-bg-subtle) !important;
    border-radius: var(--gh-radius-md) !important;
    padding: 12px !important;
    border: 1px solid var(--gh-border-default) !important;
}

.gtd-option {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    padding: 8px !important;
}

.gtd-option:hover {
    border-color: var(--gh-accent-blue) !important;
}

.gtd-option.active {
    background: var(--gh-accent-emphasis) !important;
    border-color: var(--gh-accent-emphasis) !important;
}

/* Task Sections */
.task-section {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    overflow: hidden;
}

.section-header {
    background: var(--gh-bg-subtle) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
    padding: 10px 12px !important;
}

.section-header:hover {
    background: var(--gh-bg-muted) !important;
}

.section-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--gh-text-secondary) !important;
}

.section-content {
    background: var(--gh-bg-default) !important;
    padding: 12px !important;
}

/* Subtasks */
.subtask-item {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    padding: 8px 10px !important;
}

.add-subtask-wrapper input,
.comment-input-wrapper input {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* Note Editor */
.note-editor {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    overflow: hidden;
}

.note-tabs {
    background: var(--gh-bg-subtle) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
}

.note-tabs .tab-btn {
    background: transparent !important;
    color: var(--gh-text-secondary) !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    border-bottom: 2px solid transparent !important;
}

.note-tabs .tab-btn.active {
    color: var(--gh-text-primary) !important;
    border-bottom-color: #f78166 !important;
}

.note-toolbar {
    background: var(--gh-bg-subtle) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
    padding: 6px !important;
}

.toolbar-btn {
    background: transparent !important;
    color: var(--gh-text-muted) !important;
    padding: 4px 8px !important;
    border-radius: var(--gh-radius-sm) !important;
}

.toolbar-btn:hover {
    background: var(--gh-bg-muted) !important;
    color: var(--gh-text-primary) !important;
}

.toolbar-btn.ai-btn {
    background: var(--gh-accent-emphasis) !important;
    color: #ffffff !important;
}

#task-description {
    background: var(--gh-bg-default) !important;
    border: none !important;
    padding: 12px !important;
    min-height: 80px !important;
    resize: vertical !important;
}

/* ================================================
   TASK LIST ITEMS
   ================================================ */
.task-item,
.task-card {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    transition: border-color 0.1s ease !important;
}

.task-item:hover,
.task-card:hover {
    border-color: var(--gh-text-muted) !important;
}

/* ================================================
   LOADING SCREEN
   ================================================ */
.loading-screen {
    background: var(--gh-bg-canvas) !important;
}

.loading-spinner {
    border-color: var(--gh-border-default) !important;
    border-top-color: var(--gh-accent-blue) !important;
}

/* ================================================
   AUTH CONTAINER
   ================================================ */
.auth-container {
    background: var(--gh-bg-canvas);
}

.auth-gradient {
    display: none !important;
}

.auth-card {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-lg) !important;
    box-shadow: var(--gh-shadow-lg) !important;
    max-width: 380px !important;
}

.auth-header h1 {
    font-size: 20px !important;
    color: var(--gh-text-primary) !important;
}

.auth-header p {
    color: var(--gh-text-secondary) !important;
}

.btn-google {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.btn-google:hover {
    background: var(--gh-bg-subtle) !important;
    border-color: var(--gh-text-muted) !important;
}

.auth-divider {
    color: var(--gh-text-muted) !important;
}

.auth-divider::before,
.auth-divider::after {
    background: var(--gh-border-default) !important;
}

/* ================================================
   SCROLLBARS - GitHub Style
   ================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gh-bg-emphasis);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gh-text-muted);
}

/* ================================================
   COLLAPSIBLE SECTIONS
   ================================================ */
.nav-section[data-section].collapsed .nav-section-content {
    display: none;
}

.nav-section[data-section].collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.collapsible {
    cursor: pointer;
    user-select: none;
}

.collapsible:hover {
    color: var(--gh-text-primary) !important;
}

/* ================================================
   RESPONSIVE ADJUSTMENTS
   ================================================ */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        z-index: 1000;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0 !important;
    }
}

/* ================================================
   LIGHT THEME OVERRIDES
   ================================================ */
[data-theme="light"] {
    --gh-bg-canvas: #ffffff;
    --gh-bg-default: #ffffff;
    --gh-bg-subtle: #f6f8fa;
    --gh-bg-muted: #eaeef2;
    --gh-bg-emphasis: #6e7781;

    --gh-border-default: #d0d7de;
    --gh-border-muted: #d8dee4;
    --gh-border-subtle: rgba(27, 31, 36, 0.15);

    --gh-text-primary: #24292f;
    --gh-text-secondary: #57606a;
    --gh-text-muted: #6e7781;
    --gh-text-placeholder: #8c959f;
}

[data-theme="light"] .sidebar {
    background: #f6f8fa !important;
    border-right-color: #d0d7de !important;
}

[data-theme="light"] .main-header {
    background: #ffffff !important;
    border-bottom-color: #d0d7de !important;
}

[data-theme="light"] .quick-capture-btn,
[data-theme="light"] #quick-capture-btn {
    background: #2da44e !important;
    color: #ffffff !important;
}

/* ================================================
   REMOVE ALL SATURATED COLORS - Clean Minimal
   ================================================ */

/* Remove colorful emojis from selects and labels */
select option,
.sidebar-field select option {
    color: var(--gh-text-primary) !important;
}

/* Status dropdown - no emojis, just text */
#task-status option,
#task-priority option,
#task-energy option,
#task-estimated-time option {
    font-family: var(--gh-font-sans) !important;
}

/* Priority colors - all gray tones */
.task-item[data-priority="low"],
.task-item[data-priority="normal"],
.task-item[data-priority="high"],
.task-item[data-priority="urgent"] {
    border-left-color: var(--gh-border-default) !important;
}

/* Remove any gradient or color from AI buttons */
.btn-ai,
.toolbar-btn.ai-btn,
.ai-btn {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.btn-ai:hover,
.toolbar-btn.ai-btn:hover {
    background: var(--gh-bg-muted) !important;
    color: var(--gh-text-primary) !important;
}

/* Loading spinner - gray only */
.loading-spinner,
.spinner {
    border-color: var(--gh-border-default) !important;
    border-top-color: var(--gh-text-muted) !important;
}

/* ================================================
   ENHANCED SPACING - GitHub Clean Layout
   ================================================ */

/* Content spacing */
.content-area {
    padding: 24px 32px !important;
}

/* Section spacing */
.task-section,
.sidebar-section {
    margin-bottom: 16px !important;
}

/* Form group spacing */
.form-group {
    margin-bottom: 16px !important;
}

.form-group label {
    margin-bottom: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--gh-text-secondary) !important;
}

/* Input padding */
input,
textarea,
select {
    padding: 6px 12px !important;
    line-height: 1.5 !important;
}

/* Modal spacing */
.modal-body {
    padding: 20px 24px !important;
}

.modal-footer {
    padding: 12px 24px !important;
    gap: 8px !important;
}

/* ================================================
   CLEAN TASK LIST
   ================================================ */
.task-item,
.task-card {
    padding: 12px 16px !important;
    margin-bottom: 6px !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: 6px !important;
    background: var(--gh-bg-default) !important;
}

.task-item:hover,
.task-card:hover {
    background: var(--gh-bg-subtle) !important;
    border-color: var(--gh-text-muted) !important;
}

.task-item .task-title,
.task-card .task-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--gh-text-primary) !important;
    line-height: 1.4 !important;
}

.task-item .task-meta,
.task-card .task-meta {
    font-size: 12px !important;
    color: var(--gh-text-muted) !important;
    margin-top: 4px !important;
}

/* Task checkbox - simple circle */
.task-checkbox,
.task-item input[type="checkbox"],
input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: 50% !important;
    background: transparent !important;
}

.task-checkbox:hover,
input[type="checkbox"]:hover {
    border-color: var(--gh-text-muted) !important;
}

input[type="checkbox"]:checked {
    background: var(--gh-text-muted) !important;
    border-color: var(--gh-text-muted) !important;
}

/* ================================================
   TAGS & BADGES - Subtle
   ================================================ */
.tag,
.badge,
.label {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
    border: 1px solid var(--gh-border-default) !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* ================================================
   QUICK CAPTURE - Clean
   ================================================ */
#quick-capture-modal .modal-content,
.smart-capture-modal {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.capture-input-wrapper textarea {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 12px !important;
}

.capture-hints {
    color: var(--gh-text-muted) !important;
    font-size: 12px !important;
}

.voice-btn {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-muted) !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* AI Badge - subtle */
.ai-badge {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* ================================================
   DASHBOARD CARDS - Clean Boxes
   ================================================ */
.dashboard-card,
.stat-card,
.widget {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: 6px !important;
    padding: 16px !important;
}

.dashboard-card:hover,
.stat-card:hover {
    border-color: var(--gh-text-muted) !important;
}

.stat-value,
.stat-number {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--gh-text-primary) !important;
}

.stat-label {
    font-size: 12px !important;
    color: var(--gh-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ================================================
   NOTIFICATIONS - Clean
   ================================================ */
.notification,
.toast,
.alert {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
    border-radius: 6px !important;
}

.notification.success,
.toast.success {
    border-left: 3px solid var(--gh-accent-green) !important;
}

.notification.error,
.toast.error {
    border-left: 3px solid var(--gh-accent-red) !important;
}

.notification.warning,
.toast.warning {
    border-left: 3px solid var(--gh-accent-yellow) !important;
}

/* ================================================
   EMPTY STATES
   ================================================ */
.empty-state,
.no-tasks,
.no-results {
    text-align: center !important;
    padding: 48px 24px !important;
    color: var(--gh-text-muted) !important;
}

.empty-state i {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

.empty-state h3 {
    font-size: 16px !important;
    color: var(--gh-text-secondary) !important;
    margin-bottom: 8px !important;
}

.empty-state p {
    font-size: 13px !important;
    color: var(--gh-text-muted) !important;
}

/* ================================================
   FOCUS MODE - Minimal
   ================================================ */
.focus-mode,
.pomodoro-widget {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.pomodoro-timer {
    font-family: var(--gh-font-mono) !important;
    color: var(--gh-text-primary) !important;
}

/* ================================================
   KANBAN BOARD - Clean Cards
   ================================================ */
.kanban-column {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: 6px !important;
}

.kanban-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.kanban-card {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: 6px !important;
    padding: 12px !important;
    margin: 8px !important;
}

/* ================================================
   CALENDAR VIEW - Clean
   ================================================ */
.calendar-day {
    border: 1px solid var(--gh-border-default) !important;
}

.calendar-day.today {
    background: var(--gh-bg-subtle) !important;
}

.calendar-event {
    background: var(--gh-bg-subtle) !important;
    border-left: 2px solid var(--gh-text-muted) !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}

/* ================================================
   FINAL OVERRIDES - Ensure No Color Leaks
   ================================================ */

/* Remove all gradients */
* {
    background-image: none !important;
}

/* Exception for actual images */
img,
.logo img,
.user-avatar img {
    background-image: unset !important;
}

/* Force monochrome icons everywhere */
.icon-inbox,
.icon-calendar,
.icon-zap,
.icon-clock,
.icon-cloud,
.icon-layout,
.icon-check-circle,
.icon-crosshair,
.icon-target,
.icon-activity,
.icon-refresh-cw,
.icon-settings,
.icon-plus,
.icon-search,
.icon-bell,
.icon-moon,
.icon-sun,
.icon-menu,
.icon-x,
.icon-chevron-down,
.icon-chevron-right,
.icon-list,
.icon-file-text,
.icon-folder,
.icon-shield,
.icon-user,
.icon-mail,
.icon-lock,
.icon-eye,
.icon-arrow-right,
.icon-arrow-left,
.icon-log-out,
.icon-keyboard,
.icon-send,
.icon-paperclip,
.icon-message-circle,
.icon-edit-2,
.icon-trash,
.icon-calendar-clock,
.icon-calendar-days,
.icon-panel-left,
.icon-bold,
.icon-italic,
.icon-check-square,
.icon-sparkles,
.icon-cpu,
.icon-mic,
.icon-users,
.icon-user-plus,
.icon-folder-plus,
.icon-layout-dashboard,
.icon-align-left {
    color: inherit !important;
}

/* ================================================
   DASHBOARD - Complete Desaturation
   ================================================ */

/* Stats cards - all gray tones */
.stat-card {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.stat-card.warning,
.stat-card.success,
.stat-card.danger,
.stat-card.info {
    background: var(--gh-bg-default) !important;
    border-color: var(--gh-border-default) !important;
}

/* Stat values - no gradient, just white/gray */
.stat-value,
.stat-number,
.stat-card .stat-value,
.stat-card.warning .stat-value {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--gh-text-primary) !important;
    background-clip: unset !important;
    color: var(--gh-text-primary) !important;
}

/* Progress bars - gray only */
.progress-bar,
.progress-fill,
.progress {
    background: var(--gh-bg-muted) !important;
}

.progress-fill {
    background: var(--gh-text-muted) !important;
}

/* Priority distribution bars - all gray */
.priority-bar,
.distribution-bar,
[class*="priority-"],
[class*="distribution-"] .bar {
    background: var(--gh-text-muted) !important;
}

/* Remove any colored priority indicators */
.priority-urgent .bar,
.priority-high .bar,
.priority-normal .bar,
.priority-low .bar,
.priority-bar.urgent,
.priority-bar.high,
.priority-bar.normal,
.priority-bar.low {
    background: var(--gh-text-muted) !important;
}

/* Energy indicators - gray, no colors */
.energy-indicator,
.energy-icon,
.energy-low,
.energy-medium,
.energy-high,
[class*="energy-"] {
    color: var(--gh-text-muted) !important;
    background: transparent !important;
}

/* Chart colors - grayscale */
.chart-bar,
.chart-segment,
.donut-segment {
    fill: var(--gh-text-muted) !important;
    stroke: var(--gh-text-muted) !important;
}

/* Widget headers */
.widget-header,
.card-header,
.dashboard-card-header {
    border-bottom: 1px solid var(--gh-border-default) !important;
    background: transparent !important;
}

.widget-title,
.card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--gh-text-primary) !important;
}

/* ================================================
   TASK CHECKBOXES - Gray only
   ================================================ */
.task-checkbox,
.task-item .task-checkbox {
    border: 1px solid var(--gh-border-default) !important;
    background: transparent !important;
}

.task-checkbox:hover {
    border-color: var(--gh-text-muted) !important;
    background: transparent !important;
    color: var(--gh-text-muted) !important;
    transform: none !important;
}

.task-checkbox.checked,
.task-checkbox:checked {
    background: var(--gh-text-muted) !important;
    border-color: var(--gh-text-muted) !important;
}

/* Remove priority colors from checkboxes */
.task-checkbox[style*="--priority-color"],
.task-item[data-priority] .task-checkbox {
    border-color: var(--gh-border-default) !important;
}

/* ================================================
   PROJECT STATUS - All gray
   ================================================ */
.project-status,
.project-status.active,
.project-status.on_hold,
.project-status.completed {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
}

/* Project color dots - subtle */
.project-color {
    opacity: 0.5 !important;
}

/* ================================================
   REMOVE ALL COLORFUL BADGES & TAGS
   ================================================ */
.task-badge,
.task-badge.capture,
.task-tag,
.status-badge,
.label-badge {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
}

/* Task due dates - no color */
.task-due,
.task-due.overdue,
.task-due.today,
.task-due.soon {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
}

/* Task project tags */
.task-project {
    border-left-color: var(--gh-border-default) !important;
    background: var(--gh-bg-subtle) !important;
}

/* ================================================
   SIDEBAR HEADER - Clean, no gradient
   ================================================ */
.sidebar-header {
    background: transparent !important;
    border-radius: 0 !important;
}

/* ================================================
   NOTES ICON - Gray
   ================================================ */
.note-icon {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-muted) !important;
}

.note-pin {
    color: var(--gh-text-muted) !important;
}

/* ================================================
   REVIEW SECTION - Desaturate
   ================================================ */
.review-checklist,
.checklist-item {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.checklist-item input[type="checkbox"] {
    accent-color: var(--gh-text-muted) !important;
}

/* ================================================
   SETTINGS TOGGLE - Gray
   ================================================ */
.toggle-slider {
    background: var(--gh-bg-muted) !important;
}

.toggle input:checked+.toggle-slider {
    background: var(--gh-text-muted) !important;
}

/* ================================================
   GTD QUESTION BOX - Clean
   ================================================ */
.gtd-question {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.gtd-question h3 {
    color: var(--gh-text-primary) !important;
}

/* ================================================
   CAPTURE MODAL - Clean
   ================================================ */
.task-badge.capture,
.process-item-preview {
    border-left-color: var(--gh-border-default) !important;
    background: var(--gh-bg-subtle) !important;
}

/* AI Confidence badge */
.ai-confidence,
.ai-badge {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
}

/* ================================================
   GROUP HEADERS - Clean
   ================================================ */
.group-title,
.group-title.warning {
    color: var(--gh-text-secondary) !important;
}

.task-group.overdue .tasks-list .task-item {
    border-left-color: var(--gh-border-default) !important;
}

/* ================================================
   HOVER EFFECTS - Subtle
   ================================================ */
.task-item:hover,
.project-card:hover,
.note-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--gh-text-muted) !important;
}

/* ================================================
   BUTTON COLORS - Only green for primary actions
   ================================================ */
.btn-primary,
.btn-success {
    background: var(--gh-success) !important;
}

/* All other buttons - gray */
.btn-warning,
.btn-info {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* ================================================
   LINKS - Subtle blue
   ================================================ */
a {
    color: var(--gh-accent-blue) !important;
}

a:hover {
    text-decoration: underline !important;
}

/* Remove link colors from nav items */
.nav-item,
.nav-item:hover,
.nav-item.active {
    color: var(--gh-text-secondary) !important;
}

.nav-item.active {
    color: var(--gh-text-primary) !important;
}

/* ================================================
   FINAL CLEANUP
   ================================================ */

/* Remove box shadows everywhere */
* {
    box-shadow: none !important;
}

/* Exception for dropdowns */
.user-dropdown,
.dropdown-menu,
.modal-content,
.ai-dropdown-menu {
    box-shadow: var(--gh-shadow-lg) !important;
}

/* Ensure all text uses the right colors */
strong,
b {
    color: var(--gh-text-primary) !important;
}

small {
    color: var(--gh-text-muted) !important;
}

/* Code blocks */
code,
pre {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* Selection color */
::selection {
    background: rgba(88, 166, 255, 0.3) !important;
    color: var(--gh-text-primary) !important;
}

/* ================================================
   PRIORITY BARS - Different Gray Tones
   ================================================ */
.bar-track {
    background: var(--gh-bg-muted) !important;
}

/* Different gray intensities for priority distinction */
.bar-fill,
.priority-bars .bar-fill {
    background: var(--gh-text-muted) !important;
}

.bar-fill.urgent,
.priority-bars .bar-fill.urgent,
div.bar-fill.urgent {
    background: #e6edf3 !important;
    /* Lightest - most visible */
}

.bar-fill.high,
.priority-bars .bar-fill.high,
div.bar-fill.high {
    background: #8d96a0 !important;
    /* Medium-light */
}

.bar-fill.normal,
.priority-bars .bar-fill.normal,
div.bar-fill.normal {
    background: #6e7681 !important;
    /* Medium */
}

.bar-fill.low,
.priority-bars .bar-fill.low,
div.bar-fill.low {
    background: #484f58 !important;
    /* Darker */
}

/* Priority dots - matching gray tones (high specificity) */
.priority-dot,
span.priority-dot,
.bar-item .priority-dot,
.bar-label .priority-dot,
.priority-bars .priority-dot {
    background: #6e7681 !important;
    background-color: #6e7681 !important;
}

.priority-dot.urgent,
span.priority-dot.urgent,
.bar-item .priority-dot.urgent,
.bar-label .priority-dot.urgent {
    background: #e6edf3 !important;
    background-color: #e6edf3 !important;
}

.priority-dot.high,
span.priority-dot.high,
.bar-item .priority-dot.high,
.bar-label .priority-dot.high {
    background: #8d96a0 !important;
    background-color: #8d96a0 !important;
}

.priority-dot.normal,
span.priority-dot.normal,
.bar-item .priority-dot.normal,
.bar-label .priority-dot.normal {
    background: #6e7681 !important;
    background-color: #6e7681 !important;
}

.priority-dot.low,
span.priority-dot.low,
.bar-item .priority-dot.low,
.bar-label .priority-dot.low {
    background: #484f58 !important;
    background-color: #484f58 !important;
}

/* ================================================
   ENERGY PILLS - Grayscale
   ================================================ */
.energy-pills .energy-pill,
.energy-pill,
.energy-pill.high,
.energy-pill.medium,
.energy-pill.low {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.energy-pill .pill-icon,
.pill-icon {
    filter: grayscale(100%) !important;
    opacity: 0.6 !important;
}

.energy-pill .pill-value,
.pill-value {
    color: var(--gh-text-primary) !important;
}

.energy-pill .pill-label,
.pill-label {
    color: var(--gh-text-muted) !important;
}

/* ================================================
   STAT ICONS - All Gray
   ================================================ */
.stat-icon,
.stat-icon.inbox,
.stat-icon.next,
.stat-icon.today,
.stat-icon.overdue {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-muted) !important;
}

.stat-icon i {
    color: var(--gh-text-muted) !important;
}

/* ================================================
   KPI CARDS - Desaturate
   ================================================ */
/* Uniform Dark Background for ALL Dashboard Cards */
.kpi-card,
.efficiency-card,
.streak-card,
.time-card,
.dist-card,
.dashboard-card,
.stat-card {
    background: var(--gh-bg-canvas) !important;
    background-color: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    box-shadow: none !important;
}

/* Ensure no inner elements have conflicting backgrounds */
.dist-card>div,
.kpi-card>div {
    background: transparent !important;
}

/* Gauge circle - gray */
.gauge-circle {
    --color: var(--gh-text-muted) !important;
    border-color: var(--gh-bg-muted) !important;
}

.gauge-value {
    color: var(--gh-text-primary) !important;
}

.streak-number,
.time-total {
    color: var(--gh-text-primary) !important;
    background: none !important;
    -webkit-text-fill-color: var(--gh-text-primary) !important;
}

/* Goal bar */
.goal-bar,
.goal-fill {
    background: var(--gh-bg-muted) !important;
}

.goal-fill {
    background: var(--gh-text-muted) !important;
}

/* ================================================
   MINI TASKS & DOTS - Gray
   ================================================ */
.mini-dot,
.mini-dot.accent,
.mini-dot.priority-urgent,
.mini-dot.priority-high,
.mini-dot.priority-normal,
.mini-dot.priority-low {
    background: var(--gh-text-muted) !important;
}

/* ================================================
   SIDEBAR NAV ICONS - All Monochrome
   ================================================ */
.sidebar .nav-item i,
.sidebar-nav .nav-item i,
.sidebar-footer .nav-item i,
nav.sidebar-nav i,
.nav-section i {
    color: var(--gh-text-muted) !important;
}

.sidebar .nav-item:hover i,
.sidebar .nav-item.active i {
    color: var(--gh-text-secondary) !important;
}

/* ================================================
   HEADER FOCUS BUTTON - No Color
   ================================================ */
#focus-header-btn i,
.btn-focus-header i {
    color: var(--gh-text-muted) !important;
}

/* ================================================
   AREA COLORS - Subtle
   ================================================ */
.area-color {
    opacity: 0.5 !important;
}

/* ================================================
   DASHBOARD GRID CARDS
   ================================================ */
.dashboard-card,
.dashboard-grid .dashboard-card {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.card-header {
    border-bottom: 1px solid var(--gh-border-default) !important;
}

.card-header h3 {
    color: var(--gh-text-primary) !important;
}

.card-header h3 i {
    color: var(--gh-text-muted) !important;
}

.card-link {
    color: var(--gh-accent-blue) !important;
}

/* Empty mini states */
.empty-mini i {
    color: var(--gh-text-muted) !important;
}

/* Project dots */
.project-dot {
    opacity: 0.5 !important;
}

/* GTD Tip */
.gtd-tip .tip-icon {
    filter: grayscale(100%) !important;
}

/* ================================================
   WEEKLY GOAL & POMODORO
   ================================================ */
.weekly-goal-section,
.weekly-goal,
.pomodoro-summary {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* ================================================
   ENSURE ALL EMOJIS ARE GRAYSCALE
   ================================================ */
h4,
.kpi-header h4,
.dist-card h4 {
    filter: grayscale(100%);
}

/* ================================================
   TASK MODAL - Complete GitHub Style Fix
   ================================================ */

/* GTD Quick Action Buttons */
.gtd-options,
.gtd-quick-actions {
    gap: 8px !important;
}

.gtd-option,
.gtd-quick-action,
.action-button {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    color: var(--gh-text-secondary) !important;
    transition: all 0.15s ease !important;
}

.gtd-option:hover,
.gtd-quick-action:hover,
.action-button:hover {
    background: var(--gh-bg-subtle) !important;
    border-color: var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
}

.gtd-option.active,
.gtd-quick-action.active,
.action-button.active {
    background: var(--gh-bg-subtle) !important;
    border-color: var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
}

.gtd-option i,
.gtd-quick-action i,
.action-button i {
    color: var(--gh-text-muted) !important;
}

/* Delete button - subtle red border only */
.btn-delete,
.btn-danger,
.modal-footer .btn-danger,
button[onclick*="delete"],
button.delete-btn {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-danger) !important;
    color: var(--gh-danger) !important;
}

.btn-delete:hover,
.btn-danger:hover {
    background: rgba(218, 54, 51, 0.1) !important;
}

/* AI / Investigate button - gray, not purple */
.btn-ai,
.btn-investigate,
button[onclick*="investigate"],
button[onclick*="ai"],
.ai-btn {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
    background-image: none !important;
}

.btn-ai:hover,
.btn-investigate:hover {
    background: var(--gh-bg-muted) !important;
    border-color: var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
}

/* Adjuntar button - gray, not blue */
.btn-attach,
button[onclick*="attach"],
.attach-btn,
.file-upload-btn {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.btn-attach:hover {
    background: var(--gh-bg-muted) !important;
}

/* Promote to Project button */
.btn-promote,
button[onclick*="promote"] {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
}

/* Modal footer buttons alignment */
.modal-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
}

.modal-footer .btn {
    padding: 6px 16px !important;
}

/* Inbox button in footer */
.btn-inbox,
button[onclick*="inbox"] {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
}

/* ================================================
   SELECT DROPDOWNS - Remove Emoji Colors
   ================================================ */
select,
.sidebar-field select,
.form-select {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

/* Make emoji in selects grayscale */
select option {
    filter: grayscale(100%);
}

/* Status/Priority selects */
#task-status,
#task-priority,
#task-context,
#task-project,
#task-energy,
#task-area {
    filter: grayscale(100%);
}

/* Section headers in modal */
.section-label,
.section-header .label {
    color: var(--gh-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Comment input */
.comment-input,
.comment-input-wrapper input,
.comment-input-wrapper textarea {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* Send comment button */
.comment-send-btn,
.btn-send {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-muted) !important;
    border: none !important;
}

.comment-send-btn:hover,
.btn-send:hover {
    color: var(--gh-text-primary) !important;
}

/* ================================================
   GITHUB-STYLE SVG ICONS (Lucide/Octicon Style)
   Monochrome, minimal line icons
   ================================================ */

/* Base icon style - Clean SVG look */
[class^="icon-"]::before,
[class*=" icon-"]::before {
    font-family: var(--gh-font-sans) !important;
    font-style: normal !important;
    font-weight: normal !important;
    -webkit-font-smoothing: antialiased;
}

/* Override all icons to use inline SVG backgrounds */
.icon-inbox::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") !important;
}

.icon-layout-dashboard::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E") !important;
}

.icon-calendar::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3C/svg%3E") !important;
}

.icon-zap::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E") !important;
}

.icon-crosshair::before,
.icon-target::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") !important;
}

.icon-clock::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important;
}

.icon-cloud::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E") !important;
}

.icon-calendar-clock::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h5'/%3E%3Ccircle cx='17' cy='17' r='5'/%3E%3Cpath d='M17 14v3l2 1'/%3E%3C/svg%3E") !important;
}

.icon-calendar-days::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E") !important;
}

.icon-layout::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Cline x1='3' x2='21' y1='9' y2='9'/%3E%3Cline x1='9' x2='9' y1='21' y2='9'/%3E%3C/svg%3E") !important;
}

.icon-check-circle::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
}

.icon-file-text::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' x2='8' y1='13' y2='13'/%3E%3Cline x1='16' x2='8' y1='17' y2='17'/%3E%3Cline x1='10' x2='8' y1='9' y2='9'/%3E%3C/svg%3E") !important;
}

.icon-folder::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/%3E%3C/svg%3E") !important;
}

.icon-activity::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E") !important;
}

.icon-refresh-cw::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16'/%3E%3Cpath d='M16 16h5v5'/%3E%3C/svg%3E") !important;
}

.icon-settings::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
}

.icon-shield::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") !important;
}

.icon-plus::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='5' y2='19'/%3E%3Cline x1='5' x2='19' y1='12' y2='12'/%3E%3C/svg%3E") !important;
}

.icon-search::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' x2='16.65' y1='21' y2='16.65'/%3E%3C/svg%3E") !important;
}

.icon-bell::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") !important;
}

.icon-moon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E") !important;
}

.icon-sun::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E") !important;
}

.icon-menu::before,
.icon-panel-left::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='12' y2='12'/%3E%3Cline x1='4' x2='20' y1='6' y2='6'/%3E%3Cline x1='4' x2='20' y1='18' y2='18'/%3E%3C/svg%3E") !important;
}

.icon-x::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' x2='6' y1='6' y2='18'/%3E%3Cline x1='6' x2='18' y1='6' y2='18'/%3E%3C/svg%3E") !important;
}

.icon-chevron-down::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

.icon-chevron-right::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
}

.icon-user::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 1 0-16 0'/%3E%3C/svg%3E") !important;
}

.icon-users::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") !important;
}

.icon-mail::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") !important;
}

.icon-lock::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
}

.icon-eye::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
}

.icon-log-out::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E") !important;
}

.icon-keyboard::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2' ry='2'/%3E%3Cpath d='M6 8h.001'/%3E%3Cpath d='M10 8h.001'/%3E%3Cpath d='M14 8h.001'/%3E%3Cpath d='M18 8h.001'/%3E%3Cpath d='M8 12h.001'/%3E%3Cpath d='M12 12h.001'/%3E%3Cpath d='M16 12h.001'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E") !important;
}

.icon-trash::before,
.icon-trash-2::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E") !important;
}

.icon-edit::before,
.icon-edit-2::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") !important;
}

.icon-star::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") !important;
}

.icon-paperclip::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") !important;
}

.icon-message-circle::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z'/%3E%3C/svg%3E") !important;
}

.icon-send::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' x2='11' y1='2' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") !important;
}

.icon-list::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' x2='21' y1='6' y2='6'/%3E%3Cline x1='8' x2='21' y1='12' y2='12'/%3E%3Cline x1='8' x2='21' y1='18' y2='18'/%3E%3Cline x1='3' x2='3.01' y1='6' y2='6'/%3E%3Cline x1='3' x2='3.01' y1='12' y2='12'/%3E%3Cline x1='3' x2='3.01' y1='18' y2='18'/%3E%3C/svg%3E") !important;
}

.icon-align-left::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='3' y1='6' y2='6'/%3E%3Cline x1='15' x2='3' y1='12' y2='12'/%3E%3Cline x1='17' x2='3' y1='18' y2='18'/%3E%3C/svg%3E") !important;
}

.icon-bold::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 12a4 4 0 0 0 0-8H6v8'/%3E%3Cpath d='M15 20a4 4 0 0 0 0-8H6v8Z'/%3E%3C/svg%3E") !important;
}

.icon-italic::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='10' y1='4' y2='4'/%3E%3Cline x1='14' x2='5' y1='20' y2='20'/%3E%3Cline x1='15' x2='9' y1='4' y2='20'/%3E%3C/svg%3E") !important;
}

.icon-check-square::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
}

.icon-sparkles::before,
.icon-cpu::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z'/%3E%3Cpath d='M5 3v4'/%3E%3Cpath d='M19 17v4'/%3E%3Cpath d='M3 5h4'/%3E%3Cpath d='M17 19h4'/%3E%3C/svg%3E") !important;
}

.icon-mic::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E") !important;
}

.icon-folder-plus::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/%3E%3Cline x1='12' x2='12' y1='10' y2='16'/%3E%3Cline x1='9' x2='15' y1='13' y2='13'/%3E%3C/svg%3E") !important;
}

.icon-arrow-right::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' x2='19' y1='12' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") !important;
}

.icon-arrow-left::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='5' y1='12' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") !important;
}

.icon-user-plus::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' x2='19' y1='8' y2='14'/%3E%3Cline x1='22' x2='16' y1='11' y2='11'/%3E%3C/svg%3E") !important;
}

.icon-alert-circle::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") !important;
}

.icon-lightbulb::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E") !important;
}

.icon-coffee::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8h1a4 4 0 1 1 0 8h-1'/%3E%3Cpath d='M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z'/%3E%3Cline x1='6' x2='6' y1='2' y2='4'/%3E%3Cline x1='10' x2='10' y1='2' y2='4'/%3E%3Cline x1='14' x2='14' y1='2' y2='4'/%3E%3C/svg%3E") !important;
}

/* ================================================
   ADMIN PANEL - GitHub Style
   ================================================ */

.admin-panel {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Stats Cards */
.admin-stat-card {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    box-shadow: none !important;
}

.admin-stat-icon {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-muted) !important;
    border-radius: var(--gh-radius-md) !important;
}

.admin-stat-icon i {
    color: var(--gh-text-muted) !important;
    filter: grayscale(100%) !important;
}

.admin-stat-value {
    color: var(--gh-text-primary) !important;
}

.admin-stat-label {
    color: var(--gh-text-secondary) !important;
}

/* System Stats */
.admin-system-stats {
    background: transparent !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
}

.admin-sys-stat strong {
    color: var(--gh-text-primary) !important;
}

/* Admin Tables and Badges */
.admin-table-wrapper {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
}

.admin-table th {
    background: var(--gh-bg-subtle) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
}

.admin-table td {
    border-bottom: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.admin-badge {
    background: transparent !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
    border-radius: 2em !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
}

.admin-badge.status-active {
    border-color: rgba(63, 185, 80, 0.4) !important;
    color: #3fb950 !important;
}

.admin-badge.role-admin {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-primary) !important;
}

.admin-badge.plan-pro {
    border-color: rgba(227, 179, 65, 0.4) !important;
    color: #e3b341 !important;
}

.admin-action-btn {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-muted) !important;
}

.admin-action-btn:hover {
    background: var(--gh-bg-muted) !important;
    color: var(--gh-text-primary) !important;
}

/* Settings View */
.subscription-card {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    box-shadow: none !important;
}

.subscription-card.pro {
    border-color: var(--gh-border-default) !important;
}

.feature-item {
    color: var(--gh-text-secondary) !important;
}

.feature-item.enabled i {
    color: var(--gh-text-muted) !important;
}

.usage-bar {
    background: var(--gh-bg-muted) !important;
}

.usage-fill {
    background: var(--gh-text-muted) !important;
}

/* Additional Missing Icons */
.icon-play::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E") !important;
}

.icon-pause::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='4' height='16' x='6' y='4'/%3E%3Crect width='4' height='16' x='14' y='4'/%3E%3C/svg%3E") !important;
}

.icon-check::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}

.icon-pin::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='17' y2='22'/%3E%3Cpath d='M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z'/%3E%3C/svg%3E") !important;
}

.icon-rotate-ccw::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") !important;
}

.icon-home::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") !important;
}

.icon-info::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") !important;
}

.icon-copy::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E") !important;
}

.icon-download::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E") !important;
}

.icon-upload::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' x2='12' y1='3' y2='15'/%3E%3C/svg%3E") !important;
}

.icon-tag::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E") !important;
}

.icon-flag::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' x2='4' y1='22' y2='15'/%3E%3C/svg%3E") !important;
}

.icon-layers::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") !important;
}

.icon-map-pin::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important;
}

.icon-external-link::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' x2='21' y1='14' y2='3'/%3E%3C/svg%3E") !important;
}

.icon-credit-card::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E") !important;
}

.icon-bar-chart-2::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' x2='18' y1='20' y2='10'/%3E%3Cline x1='12' x2='12' y1='20' y2='4'/%3E%3Cline x1='6' x2='6' y1='20' y2='14'/%3E%3C/svg%3E") !important;
}

.icon-x-circle::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E") !important;
}

.icon-user-check::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpolyline points='16 11 18 13 22 9'/%3E%3C/svg%3E") !important;
}

.icon-briefcase::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E") !important;
}

/* Remaining Missing Icons */
.icon-link::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") !important;
}

.icon-archive::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='5' x='2' y='3' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E") !important;
}

.icon-alert-triangle::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") !important;
}

.icon-bookmark::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E") !important;
}

.icon-database::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5V19A9 3 0 0 0 21 19V5'/%3E%3Cpath d='M3 12A9 3 0 0 0 21 12'/%3E%3C/svg%3E") !important;
}

.icon-filter::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E") !important;
}

.icon-key::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Cpath d='m15.5 7.5 3 3L22 7l-3-3'/%3E%3C/svg%3E") !important;
}

.icon-palette::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.555C21.965 6.012 17.461 2 12 2z'/%3E%3C/svg%3E") !important;
}

.icon-repeat::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E") !important;
}

.icon-trash::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E") !important;
}

.icon-volume-x::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='22' x2='16' y1='9' y2='15'/%3E%3Cline x1='16' x2='22' y1='9' y2='15'/%3E%3C/svg%3E") !important;
}

.icon-volume-2::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E") !important;
}

.icon-brain::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 4.44-1.54'/%3E%3Cpath d='M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-4.44-1.54'/%3E%3C/svg%3E") !important;
}

.icon-code::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E") !important;
}

.icon-hash::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='9' y2='9'/%3E%3Cline x1='4' x2='20' y1='15' y2='15'/%3E%3Cline x1='10' x2='8' y1='3' y2='21'/%3E%3Cline x1='16' x2='14' y1='3' y2='21'/%3E%3C/svg%3E") !important;
}

.icon-git-branch::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' x2='6' y1='3' y2='15'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M18 9a9 9 0 0 1-9 9'/%3E%3C/svg%3E") !important;
}

.icon-battery::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='10' x='2' y='7' rx='2' ry='2'/%3E%3Cline x1='22' x2='22' y1='11' y2='13'/%3E%3C/svg%3E") !important;
}

.icon-more-horizontal::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E") !important;
}

.icon-more-vertical::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E") !important;
}

.icon-square::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3C/svg%3E") !important;
}

.icon-save::before,
.icon-hard-drive::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpolyline points='17 21 17 13 7 13 7 21'/%3E%3Cpolyline points='7 3 7 8 15 8'/%3E%3C/svg%3E") !important;
}

.icon-loader::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='2' y2='6'/%3E%3Cline x1='12' x2='12' y1='18' y2='22'/%3E%3Cline x1='4.93' x2='7.76' y1='4.93' y2='7.76'/%3E%3Cline x1='16.24' x2='19.07' y1='16.24' y2='19.07'/%3E%3Cline x1='2' x2='6' y1='12' y2='12'/%3E%3Cline x1='18' x2='22' y1='12' y2='12'/%3E%3Cline x1='4.93' x2='7.76' y1='19.07' y2='16.24'/%3E%3Cline x1='16.24' x2='19.07' y1='7.76' y2='4.93'/%3E%3C/svg%3E") !important;
}

.icon-chevron-left::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") !important;
}

.icon-crosshair::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='22' x2='18' y1='12' y2='12'/%3E%3Cline x1='6' x2='2' y1='12' y2='12'/%3E%3Cline x1='12' x2='12' y1='6' y2='2'/%3E%3Cline x1='12' x2='12' y1='22' y2='18'/%3E%3C/svg%3E") !important;
}

.icon-goal::before,
.icon-award::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E") !important;
}

.icon-image::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E") !important;
}

.icon-globe::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E") !important;
}

/* ================================================
   MODAL DARK THEME - Force GitHub Dark
   ================================================ */

/* Modal Container & Content - Force Dark */
.modal,
.modal-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

.modal-content,
.modal-content.task-modal,
#task-modal .modal-content {
    background: var(--gh-bg-default) !important;
    background-color: #161b22 !important;
    color: var(--gh-text-primary) !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* Modal Header */
.modal-header,
.task-modal .modal-header {
    background: var(--gh-bg-default) !important;
    background-color: #161b22 !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.modal-header h2,
.modal-header h3,
.modal-title {
    color: var(--gh-text-primary) !important;
}

/* Modal Body */
.modal-body,
.task-modal-body {
    background: var(--gh-bg-default) !important;
    background-color: #161b22 !important;
    color: var(--gh-text-primary) !important;
}

/* Modal Sidebar */
.task-modal-sidebar,
.modal-sidebar {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border-left: 1px solid var(--gh-border-default) !important;
}

/* Section Headers */
.section-header,
.task-section .section-header,
.gtd-decision-section .section-title {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    color: var(--gh-text-secondary) !important;
}

/* Section Content */
.section-content,
.task-section .section-content {
    background: var(--gh-bg-default) !important;
    background-color: #161b22 !important;
}

/* Task Sections */
.task-section,
.gtd-decision-section {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* GTD Option Buttons */
.gtd-option {
    background: var(--gh-bg-canvas) !important;
    background-color: #0d1117 !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.gtd-option:hover {
    border-color: var(--gh-text-muted) !important;
}

.gtd-option.active {
    background: var(--gh-bg-subtle) !important;
    border-color: var(--gh-accent-blue) !important;
}

.gtd-option i {
    color: var(--gh-text-muted) !important;
}

/* Inputs & Textareas in Modal */
.modal input,
.modal textarea,
.modal select,
.task-modal input,
.task-modal textarea,
.task-modal select,
#task-title,
#task-description {
    background: var(--gh-bg-canvas) !important;
    background-color: #0d1117 !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.modal input::placeholder,
.modal textarea::placeholder {
    color: var(--gh-text-muted) !important;
}

/* Labels */
.modal label,
.sidebar-field label {
    color: var(--gh-text-secondary) !important;
}

/* Modal Footer */
.modal-footer,
.modal-actions {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border-top: 1px solid var(--gh-border-default) !important;
}

/* ALL Modal Buttons - Gray by default */
.modal-footer .btn,
.modal-actions .btn,
.modal .btn,
.task-modal .btn {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.modal-footer .btn:hover,
.modal-actions .btn:hover {
    background: var(--gh-bg-muted) !important;
    background-color: #30363d !important;
}

/* Primary Button (Save/Guardar) - Subtle Green */
.modal .btn-primary,
.modal-footer .btn-primary,
.btn-save,
#save-task-btn {
    background: var(--gh-success) !important;
    background-color: #238636 !important;
    border-color: #238636 !important;
    color: #ffffff !important;
}

.modal .btn-primary:hover,
.btn-save:hover {
    background-color: #2ea043 !important;
}

/* Danger Button (Delete) - Subtle Red Border */
.modal .btn-danger,
.modal-footer .btn-danger,
.btn-delete-task {
    background: transparent !important;
    border: 1px solid var(--gh-danger) !important;
    border-color: #da3633 !important;
    color: #f85149 !important;
}

.modal .btn-danger:hover,
.btn-delete-task:hover {
    background: rgba(248, 81, 73, 0.1) !important;
}

/* Adjuntar Button - Gray */
.btn-upload,
.btn-attach,
.file-upload-btn,
button[onclick*="Adjuntar"],
.modal .btn:has(> .icon-paperclip),
.modal button:contains("Adjuntar") {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

/* Investigar Button - Gray */
.btn-investigate,
.ai-btn,
button[onclick*="investigate"],
.modal .btn:has(> .icon-sparkles) {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

/* Inbox Button - Gray */
.btn-inbox,
button[onclick*="inbox"] {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

/* Promote to Project Button - Gray */
.btn-promote,
button[onclick*="promote"] {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

/* Cancel Button */
.btn-cancel,
.modal-footer .btn:first-child {
    background: transparent !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
}

/* Subtask & Comment input areas */
.add-subtask-wrapper,
.comment-input-wrapper {
    background: var(--gh-bg-canvas) !important;
    background-color: #0d1117 !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
}

.add-subtask-wrapper input,
.comment-input-wrapper input,
.comment-input-wrapper textarea {
    background: transparent !important;
    border: none !important;
}

/* Empty state text */
.no-subtasks,
.no-comments,
.no-files {
    color: var(--gh-text-muted) !important;
}

/* File list */
.file-item {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

/* ================================================
   ADMIN PANEL - Full Width & Dark Theme
   ================================================ */

.admin-panel {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 24px !important;
}

.admin-view,
.admin-container {
    background: var(--gh-bg-canvas) !important;
    max-width: 100% !important;
}

/* Admin Table - Full Width & Scrollable */
.admin-table-wrapper {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    overflow-x: auto !important;
    width: 100% !important;
}

.admin-table {
    width: 100% !important;
    min-width: 800px !important;
    background: var(--gh-bg-default) !important;
}

.admin-table th {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
    white-space: nowrap !important;
}

.admin-table td {
    background: var(--gh-bg-default) !important;
    color: var(--gh-text-primary) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
}

.admin-table tr:hover td {
    background: var(--gh-bg-subtle) !important;
}

/* Admin Stats Cards - Dark */
.admin-stat-card,
.admin-stats .stat-card {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* ================================================
   FAB BUTTON - Visible & Dark
   ================================================ */

#ai-assistant-btn,
.fab-btn,
.floating-action-btn {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

#ai-assistant-btn:hover,
.fab-btn:hover {
    background: var(--gh-bg-muted) !important;
    background-color: #30363d !important;
}

/* Notes View - Keep original light theme (user preference) */

/* ================================================
   PRODUCTIVITY VIEW - Dark Theme
   ================================================ */

.productivity-view,
.productivity-container {
    background: var(--gh-bg-canvas) !important;
}

.productivity-card,
.stats-card {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.chart-container {
    background: var(--gh-bg-default) !important;
}

/* ================================================
   CAMERA ICON (for OCR)
   ================================================ */

.icon-camera::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") !important;
}

/* ================================================
   AI ASSISTANT MODAL - Dark Theme
   ================================================ */

#ai-assistant-modal .modal-content,
.ai-assistant-modal {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.ai-quick-actions {
    background: var(--gh-bg-subtle) !important;
}

.ai-quick-btn {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.ai-quick-btn:hover {
    background: var(--gh-bg-subtle) !important;
    border-color: var(--gh-text-muted) !important;
}

.ai-chat-messages {
    background: var(--gh-bg-default) !important;
}

.ai-message.user .ai-bubble {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-primary) !important;
}

.ai-message.assistant .ai-bubble {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.ai-chat-input-wrapper {
    background: var(--gh-bg-subtle) !important;
    border-top: 1px solid var(--gh-border-default) !important;
}

#ai-chat-input {
    background: var(--gh-bg-canvas) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

/* ================================================
   DESATURATED COLORS - Projects, Areas, Contexts
   Subtle colors that complement the minimal theme
   ================================================ */

/* Project dots in sidebar */
.project-dot,
.nav-project .project-dot,
.sidebar-project .project-dot,
.project-item .project-dot {
    filter: saturate(0.5) brightness(0.9) !important;
    opacity: 0.85 !important;
}

/* Project color indicators */
.project-color,
.project-indicator,
[style*="background"][class*="project"] {
    filter: saturate(0.5) !important;
}

/* Area badges/dots */
.area-dot,
.area-badge,
.life-area-dot,
.nav-item[data-area] .nav-icon,
.area-indicator {
    filter: saturate(0.5) brightness(0.9) !important;
    opacity: 0.85 !important;
}

/* Context badges/dots */
.context-dot,
.context-badge,
.context-indicator,
.nav-item[data-context] .nav-icon {
    filter: saturate(0.5) brightness(0.9) !important;
    opacity: 0.85 !important;
}

/* Task list project/area/context indicators */
.task-item .project-dot,
.task-item .area-dot,
.task-item .context-dot,
.task-card .project-dot {
    filter: saturate(0.5) brightness(0.9) !important;
}

/* Sidebar colored elements */
.sidebar .nav-item .color-dot,
.sidebar .nav-project-item .dot {
    filter: saturate(0.5) brightness(0.85) !important;
}

/* Dashboard project cards */
.dashboard-project .project-color,
.project-mini-card .dot {
    filter: saturate(0.5) !important;
}

/* Tags with colors */
.tag,
.task-tag {
    filter: saturate(0.6) !important;
    opacity: 0.9 !important;
}

/* Keep inline style colors but desaturate them */
[style*="background-color"]:not(.btn):not(.modal):not(input):not(select) {
    filter: saturate(0.55) !important;
}

/* Exclude specific elements from desaturation */
.btn-primary,
.btn-success,
.btn-danger,
.status-badge,
.admin-badge {
    filter: none !important;
}

/* ================================================
   CALENDAR VIEW - Dark Theme & Desaturated
   ================================================ */

.calendar-view,
.calendar-container {
    background: var(--gh-bg-canvas) !important;
}

/* Calendar Header */
.calendar-header {
    background: var(--gh-bg-default) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
}

.calendar-title {
    color: var(--gh-text-primary) !important;
}

/* Calendar Navigation Buttons */
.calendar-nav-btn,
.calendar-nav button {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.calendar-nav-btn:hover {
    background: var(--gh-bg-muted) !important;
}

/* View Toggle Buttons (Mes, Semana, Día, Lista) */
.view-toggle-btn,
.calendar-view-btn,
.view-tabs .tab-btn {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
}

.view-toggle-btn.active,
.calendar-view-btn.active,
.view-tabs .tab-btn.active {
    background: var(--gh-bg-muted) !important;
    color: var(--gh-text-primary) !important;
    border-color: var(--gh-text-muted) !important;
}

/* Calendar Grid */
.calendar-grid,
.calendar-days {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* Day Headers */
.calendar-day-header,
.calendar-weekday {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-secondary) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
}

/* Calendar Day Cells */
.calendar-day,
.calendar-cell {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.calendar-day:hover,
.calendar-cell:hover {
    background: var(--gh-bg-subtle) !important;
}

.calendar-day.today,
.calendar-cell.today {
    background: var(--gh-bg-subtle) !important;
    border-color: var(--gh-text-muted) !important;
}

/* Day Numbers */
.calendar-day .day-number,
.calendar-cell .day-number {
    color: var(--gh-text-primary) !important;
}

/* Weekend/Sunday numbers - desaturate blue */
.calendar-day.weekend .day-number,
.calendar-day.sunday .day-number,
.calendar-cell.weekend .day-number {
    color: var(--gh-text-muted) !important;
}

/* Other month days */
.calendar-day.other-month,
.calendar-cell.other-month {
    opacity: 0.4 !important;
}

/* Calendar Events - Desaturated */
.calendar-event,
.calendar-task,
.fc-event {
    filter: saturate(0.5) brightness(0.9) !important;
    border-radius: 4px !important;
}

.calendar-event:hover {
    filter: saturate(0.6) brightness(1) !important;
}

/* Priority Legend - Desaturated */
.priority-legend,
.calendar-legend {
    background: var(--gh-bg-subtle) !important;
}

.priority-legend .legend-item,
.calendar-legend .legend-item {
    filter: saturate(0.5) !important;
}

/* Priority dots in calendar legend */
.priority-legend .dot,
.legend-dot {
    filter: saturate(0.5) brightness(0.9) !important;
}

/* Nueva Tarea Button - GitHub Green */
.calendar-header .btn-primary,
.calendar-header .btn-new-task {
    background: var(--gh-success) !important;
    background-color: #238636 !important;
    border-color: #238636 !important;
    filter: none !important;
}

/* Week View */
.week-view .time-slot {
    border-color: var(--gh-border-default) !important;
}

.week-view .hour-label {
    color: var(--gh-text-muted) !important;
}

/* Day View */
.day-view .time-slot {
    border-color: var(--gh-border-default) !important;
}

/* List View */
.list-view .list-item {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.list-view .list-item:hover {
    background: var(--gh-bg-subtle) !important;
}

/* ================================================
   MODAL BUTTONS - Specific Overrides
   ================================================ */

/* Investigar Button - Gray, not blue */
.modal-footer .btn-investigate,
.modal-footer button[class*="investigate"],
.modal .btn.btn-ai,
button.btn-investigate,
.btn-investigate {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.btn-investigate:hover {
    background: var(--gh-bg-muted) !important;
    background-color: #30363d !important;
}

/* Guardar Button - GitHub Green */
.modal-footer .btn-save,
.modal-footer .btn-primary,
button.btn-save,
#save-task-btn,
.modal .btn.btn-primary {
    background: #238636 !important;
    background-color: #238636 !important;
    border-color: #238636 !important;
    color: #ffffff !important;
}

.btn-save:hover,
.modal .btn-primary:hover {
    background: #2ea043 !important;
    background-color: #2ea043 !important;
}

/* Inbox Button - Gray */
.modal-footer .btn-inbox,
button.btn-inbox {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

/* Promover a Proyecto - Gray */
.modal-footer .btn-promote,
button.btn-promote {
    background: var(--gh-bg-subtle) !important;
    background-color: #21262d !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

/* Tab Underline - Change from orange to gray/subtle */
.note-tabs .tab-btn.active,
.modal-tabs .tab-btn.active,
.tab-btn.active {
    border-bottom-color: var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
}

.note-tabs .tab-btn,
.modal-tabs .tab-btn {
    border-bottom: 2px solid transparent !important;
    color: var(--gh-text-secondary) !important;
}

/* Description textarea */
#task-description,
.task-description,
.description-editor {
    background: var(--gh-bg-canvas) !important;
    color: var(--gh-text-primary) !important;
    border: 1px solid var(--gh-border-default) !important;
}

/* ================================================
   CALENDAR TYPOGRAPHY - Adjusted
   ================================================ */

/* Calendar font family */
.calendar-view,
.calendar-container,
.calendar-grid,
.calendar-header {
    font-family: var(--gh-font-sans) !important;
}

/* Day numbers - larger & clearer */
.calendar-day .day-number,
.calendar-cell .day-number,
.fc-daygrid-day-number {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gh-text-primary) !important;
}

/* Weekend numbers - muted */
.calendar-day.weekend .day-number,
.fc-day-sun .fc-daygrid-day-number,
.fc-day-sat .fc-daygrid-day-number {
    color: var(--gh-text-muted) !important;
}

/* Month/Year title */
.calendar-title,
.fc-toolbar-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--gh-text-primary) !important;
}

/* Day headers (dom, lun, mar...) */
.calendar-day-header,
.fc-col-header-cell {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: lowercase !important;
    color: var(--gh-text-secondary) !important;
}

/* Event text */
.calendar-event,
.fc-event-title {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Today highlight */
.calendar-day.today .day-number,
.fc-day-today .fc-daygrid-day-number {
    background: var(--gh-bg-muted) !important;
    color: var(--gh-text-primary) !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* FullCalendar Specific Overrides */
.fc {
    --fc-border-color: var(--gh-border-default) !important;
    --fc-page-bg-color: var(--gh-bg-canvas) !important;
    --fc-neutral-bg-color: var(--gh-bg-subtle) !important;
    --fc-today-bg-color: var(--gh-bg-subtle) !important;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-color: var(--gh-border-default) !important;
}

.fc-scrollgrid {
    border-color: var(--gh-border-default) !important;
}

.fc-col-header-cell-cushion {
    color: var(--gh-text-secondary) !important;
}

/* ================================================
   CALENDAR VIEW TOGGLE - Mes/Semana/Día/Lista
   ================================================ */

/* All view toggle buttons */
.view-toggle,
.view-toggle-group,
.calendar-view-toggle {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
    overflow: hidden !important;
}

.view-toggle button,
.view-toggle-btn,
.calendar-view-toggle button {
    background: transparent !important;
    border: none !important;
    border-right: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.view-toggle button:last-child,
.calendar-view-toggle button:last-child {
    border-right: none !important;
}

/* Active state - Gray background, NOT blue */
.view-toggle button.active,
.view-toggle-btn.active,
.calendar-view-toggle button.active {
    background: var(--gh-bg-muted) !important;
    background-color: #30363d !important;
    color: var(--gh-text-primary) !important;
}

.view-toggle button:hover,
.calendar-view-toggle button:hover {
    background: var(--gh-bg-muted) !important;
}

/* ================================================
   CALENDAR EVENTS - Truncate & Fit in Cell
   ================================================ */

/* Prevent events from overflowing */
.calendar-event,
.calendar-task,
.fc-event,
.fc-daygrid-event,
.fc-h-event {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.fc-event-title,
.fc-event-title-container,
.calendar-event-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Event container in day cell */
.fc-daygrid-event-harness,
.calendar-day-events {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Limit number of visible events per day */
.fc-daygrid-day-events {
    max-height: 80px !important;
    overflow: hidden !important;
}

/* More events indicator */
.fc-daygrid-more-link,
.calendar-more-link {
    color: var(--gh-text-muted) !important;
    font-size: 11px !important;
}

/* Event with multiple lines - truncate */
.fc-event-main,
.calendar-event-main {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Ensure event fits within cell horizontally */
.fc-daygrid-day-frame {
    overflow: hidden !important;
}

.fc-daygrid-event {
    margin: 1px 2px !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
    border-radius: 3px !important;
}

/* ================================================
   FOCUS VIEW - Dark GitHub Theme
   ================================================ */

/* Focus Container */
#content-view .max-w-4xl {
    max-width: 900px !important;
}

/* Focus Header */
#content-view h2.text-3xl {
    color: var(--gh-text-primary) !important;
    font-weight: 600 !important;
}

#content-view p.text-gray-500 {
    color: var(--gh-text-secondary) !important;
}

/* Focus Task Cards */
.focus-task-card,
#content-view .bg-white,
#content-view .dark\:bg-gray-800 {
    background: var(--gh-bg-default) !important;
    background-color: #161b22 !important;
    border: 1px solid var(--gh-border-default) !important;
    border-radius: var(--gh-radius-md) !important;
}

.focus-task-card:hover {
    border-color: var(--gh-text-muted) !important;
    box-shadow: var(--gh-shadow-sm) !important;
}

/* Active task card */
.focus-task-card.border-purple-500,
.focus-task-card[class*="border-purple"] {
    border-color: var(--gh-text-muted) !important;
    background: var(--gh-bg-subtle) !important;
}

/* Task title */
.focus-task-card h3,
#content-view .text-gray-800,
#content-view .dark\:text-gray-100 {
    color: var(--gh-text-primary) !important;
}

/* Task meta info */
.focus-task-card .text-gray-500,
.focus-task-card .text-sm {
    color: var(--gh-text-secondary) !important;
}

/* Star icon - desaturated */
.focus-task-card .icon-star,
.focus-task-card .text-yellow-500 {
    filter: saturate(0.5) !important;
    color: var(--gh-text-muted) !important;
}

/* Status dot */
.focus-task-card .bg-gray-300,
.focus-task-card .dark\:bg-gray-600 {
    background: var(--gh-text-muted) !important;
}

.focus-task-card .bg-green-500 {
    background: var(--gh-accent-green) !important;
    filter: saturate(0.6) !important;
}

/* Empty state */
#content-view .border-dashed {
    background: var(--gh-bg-subtle) !important;
    border-color: var(--gh-border-default) !important;
}

#content-view .text-gray-300,
#content-view .dark\:text-gray-600 {
    color: var(--gh-text-muted) !important;
}

/* Play button */
.focus-task-card button,
.focus-task-card .btn {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.focus-task-card button:hover {
    background: var(--gh-bg-muted) !important;
}

/* Timer display */
.focus-task-card .timer-display,
.focus-task-card [class*="timer"] {
    color: var(--gh-text-primary) !important;
    font-family: var(--gh-font-mono) !important;
}

/* Info text at bottom */
#content-view .text-gray-400 {
    color: var(--gh-text-muted) !important;
}

#content-view .bg-gray-200,
#content-view .dark\:bg-gray-700 {
    background: var(--gh-bg-subtle) !important;
}

/* Priority/context badges in focus cards */
.focus-task-card .badge,
.focus-task-card .tag {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
    filter: saturate(0.5) !important;
}

/* Animate pulse - muted */
.focus-task-card .animate-pulse {
    animation: pulse-muted 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

@keyframes pulse-muted {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ================================================
   FOCUS BUTTON - Visible & Distinctive
   ================================================ */

/* Focus button in task list */
.btn-focus {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-muted) !important;
    transition: all 0.2s ease !important;
}

.btn-focus:hover {
    background: var(--gh-bg-muted) !important;
    border-color: var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
}

/* When task is in focus (starred) */
.btn-focus.active {
    background: var(--gh-bg-muted) !important;
    border-color: var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
}

.btn-focus.active i {
    color: var(--gh-text-primary) !important;
}

/* Target icon for focus */
.icon-target::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") !important;
}

.icon-star-fill::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%236e7681' stroke='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") !important;
}

/* ================================================
   ACTIVE/SELECTED STATES - Gray, Not Blue
   Minimalist GitHub style
   ================================================ */

/* Override all blue active states with gray */
.gtd-option.active,
.gtd-quick-action.active,
.action-button.active {
    background: var(--gh-bg-muted) !important;
    background-color: #30363d !important;
    border-color: var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
}

/* Nav item active - subtle background, no blue */
.nav-item.active {
    background: var(--gh-bg-subtle) !important;
    border-left: 2px solid var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
}

.nav-item.active i {
    color: var(--gh-text-primary) !important;
}

/* GTD option hover - gray, not blue */
.gtd-option:hover {
    border-color: var(--gh-text-muted) !important;
}

/* Tab active - gray underline, not colored */
.tab-btn.active,
.note-tabs .tab-btn.active,
.modal-tabs .tab-btn.active {
    border-bottom-color: var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
    background: transparent !important;
}

/* View toggle active - gray */
.view-toggle button.active,
.view-toggle-btn.active,
.calendar-view-toggle button.active {
    background: var(--gh-bg-muted) !important;
    background-color: #30363d !important;
    color: var(--gh-text-primary) !important;
}

/* Select/option focus states - gray */
select:focus,
input:focus,
textarea:focus {
    border-color: var(--gh-text-muted) !important;
    box-shadow: 0 0 0 2px rgba(110, 118, 129, 0.2) !important;
    outline: none !important;
}

/* Dropdown option hover - gray */
option:hover,
option:checked,
select option:checked {
    background: var(--gh-bg-muted) !important;
}

/* Button focus - gray ring */
button:focus,
.btn:focus {
    box-shadow: 0 0 0 2px rgba(110, 118, 129, 0.3) !important;
    outline: none !important;
}

/* Remove any remaining blue accents on hover/active */
*:focus-visible {
    outline: 2px solid var(--gh-text-muted) !important;
    outline-offset: 2px !important;
}

/* ================================================
   ENHANCED FOCUS VIEW - New Layout
   ================================================ */

.focus-view-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

/* Focus Header */
.focus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gh-border-default);
}

.focus-header-info h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--gh-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.focus-header-info p {
    font-size: 13px;
    color: var(--gh-text-secondary);
    margin: 4px 0 0 0;
}

/* Zen Mode Button */
.btn-zen {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: var(--gh-radius-md) !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-zen:hover {
    background: var(--gh-bg-muted) !important;
    color: var(--gh-text-primary) !important;
}

/* Focus Empty State */
.focus-empty {
    text-align: center;
    padding: 60px 24px;
    background: var(--gh-bg-subtle);
    border: 2px dashed var(--gh-border-default);
    border-radius: var(--gh-radius-lg);
}

.focus-empty-icon {
    font-size: 48px;
    color: var(--gh-text-muted);
    margin-bottom: 16px;
}

.focus-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gh-text-primary);
    margin: 0 0 8px 0;
}

.focus-empty p {
    color: var(--gh-text-secondary);
    margin: 0 0 20px 0;
}

/* Start Prompt */
.focus-start-prompt {
    text-align: center;
    padding: 40px 24px;
    background: var(--gh-bg-subtle);
    border: 1px solid var(--gh-border-default);
    border-radius: var(--gh-radius-lg);
    margin-bottom: 24px;
}

.prompt-icon {
    font-size: 48px;
    color: var(--gh-text-muted);
    margin-bottom: 12px;
}

.focus-start-prompt h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gh-text-primary);
    margin: 0 0 8px 0;
}

.focus-start-prompt p {
    color: var(--gh-text-secondary);
    margin: 0;
    font-size: 13px;
}

/* ================================================
   ACTIVE TASK CARD - Expanded
   ================================================ */

.focus-active-card {
    background: var(--gh-bg-default);
    border: 2px solid var(--gh-accent-green);
    border-radius: var(--gh-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
}

.active-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.active-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gh-accent-green);
}

.active-card-content {
    margin-bottom: 24px;
}

.active-task-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--gh-text-primary);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.active-task-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.meta-project {
    font-size: 13px;
    color: var(--gh-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.active-task-description {
    font-size: 14px;
    color: var(--gh-text-secondary);
    line-height: 1.5;
    padding: 12px;
    background: var(--gh-bg-subtle);
    border-radius: var(--gh-radius-md);
}

/* Timer in Active Card */
.active-card-timer {
    text-align: center;
    padding: 24px 0;
    border-top: 1px solid var(--gh-border-default);
    border-bottom: 1px solid var(--gh-border-default);
    margin-bottom: 24px;
}

.active-card-timer .timer-display {
    font-size: 72px;
    font-weight: 700;
    font-family: var(--gh-font-mono);
    color: var(--gh-text-primary);
    line-height: 1;
}

.active-card-timer .timer-status {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gh-text-muted);
    margin-top: 8px;
}

/* Active Card Actions */
.active-card-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-lg {
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--gh-radius-md) !important;
}

.btn-pause {
    background: var(--gh-bg-muted) !important;
    color: var(--gh-text-primary) !important;
    border: 1px solid var(--gh-border-default) !important;
}

.btn-resume {
    background: var(--gh-accent-green) !important;
    color: #fff !important;
    border: none !important;
}

.btn-complete {
    background: #238636 !important;
    color: #fff !important;
    border: none !important;
}

/* ================================================
   TASK QUEUE - Compact List
   ================================================ */

.focus-queue {
    margin-top: 24px;
}

.queue-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gh-text-secondary);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.queue-list {
    background: var(--gh-bg-default);
    border: 1px solid var(--gh-border-default);
    border-radius: var(--gh-radius-md);
    overflow: hidden;
}

.queue-task {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gh-border-default);
    transition: background 0.15s ease;
}

.queue-task:last-child {
    border-bottom: none;
}

.queue-task:hover {
    background: var(--gh-bg-subtle);
}

.queue-task-order {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--gh-text-muted);
    background: var(--gh-bg-subtle);
    border-radius: 50%;
}

.queue-task-info {
    flex: 1;
    min-width: 0;
}

.queue-task-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--gh-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-task-project {
    display: block;
    font-size: 12px;
    color: var(--gh-text-muted);
    margin-top: 2px;
}

.queue-task-actions {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.queue-task:hover .queue-task-actions {
    opacity: 1;
}

/* ================================================
   FOCUS STATS
   ================================================ */

.focus-stats {
    display: flex;
    gap: 24px;
    justify-content: center;
    padding: 16px;
    margin-top: 24px;
    background: var(--gh-bg-subtle);
    border-radius: var(--gh-radius-md);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gh-text-secondary);
}

.stat-item strong {
    color: var(--gh-text-primary);
    font-weight: 600;
}

/* ================================================
   ZEN MODE - Full Focus
   ================================================ */

body.zen-mode .sidebar {
    display: none !important;
}

body.zen-mode .header,
body.zen-mode .app-header {
    display: none !important;
}

body.zen-mode main,
body.zen-mode .main-content {
    margin-left: 0 !important;
    max-width: 100% !important;
}

body.zen-mode .focus-view-container {
    max-width: 700px;
    padding-top: 60px;
}

body.zen-mode .focus-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--gh-bg-canvas);
    padding: 16px 24px;
    z-index: 100;
    border-bottom: 1px solid var(--gh-border-default);
    justify-content: center;
}

body.zen-mode .focus-header-info {
    display: none;
}

body.zen-mode .btn-zen i {
    transform: rotate(45deg);
}

body.zen-mode .focus-active-card {
    border-width: 1px;
}

body.zen-mode .focus-queue {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

body.zen-mode .focus-queue:hover {
    opacity: 1;
}

/* Zen mode animation */
@keyframes zen-enter {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

body.zen-mode .focus-view-container {
    animation: zen-enter 0.3s ease;
}

/* ================================================
   SIDEBAR COLLAPSED STATE (Desktop)
   ================================================ */

.sidebar.collapsed {
    width: 60px !important;
    overflow: hidden !important;
}

.sidebar.collapsed .sidebar-header span,
.sidebar.collapsed .nav-section-header span,
.sidebar.collapsed .nav-section-header .badge,
.sidebar.collapsed .nav-section-header button,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-item .badge,
.sidebar.collapsed .nav-section-content,
.sidebar.collapsed .sidebar-search {
    display: none !important;
}

.sidebar.collapsed .nav-item {
    justify-content: center !important;
    padding: 12px !important;
}

.sidebar.collapsed .nav-item i {
    margin-right: 0 !important;
    font-size: 18px !important;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center !important;
    padding: 12px !important;
}

.sidebar.collapsed+.main-content {
    margin-left: 60px !important;
}

/* ================================================
   DJ NEURONAL (SPOTIFY WIDGET) - GitHub Theme
   ================================================ */

.spotify-widget {
    background: var(--gh-bg-default) !important;
    border: 1px solid var(--gh-border-default) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    border-radius: var(--gh-radius-lg) !important;
    color: var(--gh-text-primary) !important;
}

.spotify-header {
    background: var(--gh-bg-subtle) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
    padding: 12px 16px !important;
    /* Remove green gradient */
    background-image: none !important;
}

.spotify-header i {
    color: var(--gh-accent-green) !important;
}

.spotify-header span {
    color: var(--gh-text-primary) !important;
}

.spotify-header-actions button,
.spotify-minimize,
.spotify-close {
    color: var(--gh-text-secondary) !important;
    background: transparent !important;
    border: none !important;
}

.spotify-header-actions button:hover,
.spotify-minimize:hover,
.spotify-close:hover {
    color: var(--gh-text-primary) !important;
    background: var(--gh-bg-muted) !important;
}

.spotify-body {
    background: var(--gh-bg-default) !important;
}

.spotify-mood {
    background: var(--gh-bg-subtle) !important;
    border-bottom: 1px solid var(--gh-border-default) !important;
    padding: 8px 16px !important;
}

.mood-label {
    color: var(--gh-text-secondary) !important;
}

.mood-value {
    color: var(--gh-text-primary) !important;
    font-weight: 600 !important;
}

.spotify-categories {
    border-bottom: 1px solid var(--gh-border-default) !important;
    background: var(--gh-bg-default) !important;
    padding: 12px !important;
}

.spotify-cat {
    background: transparent !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
}

.spotify-cat:hover {
    background: var(--gh-bg-subtle) !important;
    border-color: var(--gh-text-muted) !important;
    color: var(--gh-text-primary) !important;
}

.spotify-cat.active {
    background: var(--gh-accent-green) !important;
    border-color: var(--gh-accent-green) !important;
    color: #ffffff !important;
}

.spotify-playlist-grid {
    background: var(--gh-bg-default) !important;
    padding: 12px !important;
}

.playlist-card {
    background: var(--gh-bg-subtle) !important;
    border: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-primary) !important;
}

.playlist-card:hover {
    background: var(--gh-bg-muted) !important;
    border-color: var(--gh-text-muted) !important;
}

.playlist-card.active {
    border-color: var(--gh-accent-green) !important;
    background: rgba(46, 160, 67, 0.1) !important;
}

.playlist-card .playlist-icon {
    font-size: 24px !important;
}

.playlist-card .playlist-name {
    color: var(--gh-text-primary) !important;
    font-size: 12px !important;
}

.spotify-now-playing {
    background: var(--gh-bg-subtle) !important;
    border-top: 1px solid var(--gh-border-default) !important;
    color: var(--gh-text-secondary) !important;
}

.now-playing-name {
    color: var(--gh-accent-green) !important;
}

.spotify-player-container {
    background: var(--gh-bg-default) !important;
    border-top: 1px solid var(--gh-border-default) !important;
}

.spotify-tip {
    background: var(--gh-bg-subtle) !important;
    color: var(--gh-text-muted) !important;
    font-size: 11px !important;
    border-top: 1px solid var(--gh-border-default) !important;
    padding: 8px 12px !important;
}