/*
Theme Name: TaskFocus
Description: Minimal weekly task tracking dashboard with project groups.
Version: 1.1
Author: TaskFocus
*/

/* ── Reset & Base ── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-body: #fafafa;
    --bg-card: #fff;
    --bg-input: #fff;
    --bg-hover: #f0f0f0;
    --bg-section: #f9fafb;
    --bg-header: #fff;
    --bg-modal: #fff;
    --bg-overlay: rgba(0, 0, 0, 0.35);
    --text-primary: #222;
    --text-secondary: #666;
    --text-muted: #999;
    --text-placeholder: #aaa;
    --border-color: #e0e0e0;
    --border-light: #eee;
    --border-input: #ddd;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --accent-blue: #2563eb;
    --accent-red: #dc2626;
    --accent-green: #16a34a;
    --select2-bg: #fff;
    --select2-border: #ddd;
    --scrollbar-thumb: #ccc;
    --scrollbar-track: transparent;
}

[data-theme="dark"] {
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --bg-input: #2a2a2a;
    --bg-hover: #333;
    --bg-section: #1a1a1a;
    --bg-header: #1a1a1a;
    --bg-modal: #1e1e1e;
    --bg-overlay: rgba(0, 0, 0, 0.6);
    --text-primary: #e0e0e0;
    --text-secondary: #ccc;
    --text-muted: #999;
    --text-placeholder: #888;
    --border-color: #333;
    --border-light: #2a2a2a;
    --border-input: #444;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --accent-orange: #c2410c;
    --accent-blue: #4a8af4;
    --accent-red: #ef4444;
    --accent-green: #22c55e;
    --select2-bg: #2a2a2a;
    --select2-border: #444;
    --scrollbar-thumb: #555;
    --scrollbar-track: #1a1a1a;
}

body {
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Layout ── */

.dashboard-wrap {
    margin: 0 auto;
    padding: 40px 48px;
}

/* ── Header ── */

.dashboard-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: -40px -48px 20px;
    padding: 10px 48px 10px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.dashboard-title {
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #888;
    font-style: italic;
    line-height: 1;
}
.dashboard-title:has(.taskfocus-logo) {
    line-height: 0;
}

.dashboard-title img {
    height: 28px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.55;
}

.taskfocus-logo {
    height: 21px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.logo-check-light { fill: #d8d8d8; }
.logo-check-mid { fill: #9e9e9e; }
.logo-check-dark { fill: #5b5b5b; }
.logo-text-task { fill: #1a1a1a; }
.logo-text-focus { fill: #5b5b5b; }

[data-theme="dark"] .logo-check-light { fill: #666; }
[data-theme="dark"] .logo-check-mid { fill: #999; }
[data-theme="dark"] .logo-check-dark { fill: #e0e0e0; }
[data-theme="dark"] .logo-text-task { fill: #fff; }
[data-theme="dark"] .logo-text-focus { fill: #999; }

.dashboard-title span {
    color: #bbb;
}

.dashboard-greeting {
    font-size: 13px;
    color: #aaa;
    font-weight: 400;
    margin-top: 2px;
}

.dashboard-motd {
    color: #ccc;
    font-style: italic;
}

.week-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.week-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ddd;
    background: #fff;
    color: #999;
    border-radius: 2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.week-nav-btn:hover {
    color: #333;
    border-color: #999;
}

.week-selector label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    font-weight: 600;
}

.week-selector select {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 13px;
    color: #333;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
}

.week-selector select:focus {
    border-color: #999;
}

/* ── Week Date Picker ── */

.week-datepicker {
    position: relative;
}

.week-datepicker-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 13px;
    color: #333;
    border-radius: 2px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s;
}

.week-datepicker-btn:hover {
    border-color: #999;
}

.week-calendar {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 12px;
    width: 252px;
}

.week-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.week-cal-month {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.week-cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    border-radius: 2px;
    transition: border-color 0.15s, color 0.15s;
    padding: 0;
}

.week-cal-nav:hover {
    border-color: #999;
    color: #333;
}

.week-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 4px;
}

.week-calendar-days span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #aaa;
    padding: 4px 0;
}

.week-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.week-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 1px auto;
    font-size: 12px;
    border: none;
    background: none;
    color: #ccc;
    border-radius: 2px;
    padding: 0;
}

.week-cal-day.empty {
    visibility: hidden;
}

.week-cal-day.disabled {
    cursor: default;
}

.week-cal-day.selectable {
    color: #333;
    font-weight: 600;
    cursor: pointer;
    background: #f0f7ff;
    transition: background 0.15s;
}

.week-cal-day.selectable:hover {
    background: #dbeafe;
}

.week-cal-day.selected {
    background: #333;
    color: #fff;
}

.week-cal-day.selected:hover {
    background: #222;
}

/* ── Header Controls ── */

.header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.export-pdf-btn,
.new-week-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    border-radius: 2px;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.export-pdf-btn:hover,
.new-week-btn:hover {
    border-color: #999;
    color: #333;
}

.export-pdf-btn:disabled,
.new-week-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.export-pdf-btn svg,
.new-week-btn svg {
    flex-shrink: 0;
}

.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: none;
    color: #999;
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.15s, background 0.15s;
}

.header-icon-btn:hover {
    color: #333;
    background: #f0f0f0;
}

.header-icon-btn:disabled {
    opacity: 0.4;
    cursor: default;
    background: none;
}

.header-icon-btn svg {
    flex-shrink: 0;
}

/* ── Toolbar Drawer (nine-dots menu → right sidebar) ── */

.toolbar-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: #fff;
    color: #999;
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.15s;
}

.toolbar-drawer-toggle:hover {
    color: #333;
}

.toolbar-drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    z-index: 200;
}

.toolbar-drawer-overlay.open {
    display: block;
}

.toolbar-drawer {
    position: fixed;
    top: 0;
    right: -280px;
    width: 260px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
    z-index: 201;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
    overflow-y: auto;
}

.toolbar-drawer.open {
    right: 0;
}

.toolbar-drawer.compact {
    width: 56px;
}

.toolbar-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.toolbar-drawer.compact .toolbar-drawer-header {
    justify-content: center;
    padding: 14px 8px;
}

.toolbar-drawer.compact .toolbar-drawer-header-actions {
    flex-direction: column;
    gap: 2px;
}

.toolbar-drawer-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.3px;
}

.toolbar-drawer.compact .toolbar-drawer-title {
    display: none;
}

.toolbar-drawer-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-drawer-compact-toggle,
.toolbar-drawer-pin-toggle {
    border: none;
    background: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.toolbar-drawer-compact-toggle:hover,
.toolbar-drawer-pin-toggle:hover {
    color: #333;
}

/* Pin button only visible in compact mode */
.toolbar-drawer-pin-toggle {
    display: none;
}

.toolbar-drawer.compact .toolbar-drawer-pin-toggle {
    display: flex;
}

.toolbar-drawer-pin-toggle.pinned {
    color: #c2410c;
}

/* Sticky/pinned mode — drawer stays open, pushes content */
.toolbar-drawer.sticky {
    position: fixed;
    right: 0;
    box-shadow: -1px 0 4px rgba(0, 0, 0, 0.06);
}

body.toolbar-pinned {
    margin-right: 56px;
}

body.toolbar-pinned .toolbar-drawer-overlay {
    display: none !important;
}

body.toolbar-pinned .quick-add-fab {
    right: 84px;
    z-index: 202;
}

.toolbar-drawer-nav {
    padding: 8px 0;
    flex: 1;
}

.toolbar-drawer-section-label {
    padding: 8px 16px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #bbb;
}

.toolbar-drawer.compact .toolbar-drawer-section-label {
    display: none;
}

.toolbar-drawer-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 6px 12px;
}

.toolbar-drawer.compact .toolbar-drawer-divider {
    margin: 6px 8px;
}

.toolbar-drawer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.toolbar-drawer-item:hover {
    background: #f5f5f5;
    color: #333;
}

.toolbar-drawer-item svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.toolbar-drawer-label {
    font-size: 13px;
}

.toolbar-drawer.compact .toolbar-drawer-item {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}

.toolbar-drawer.compact .toolbar-drawer-label {
    display: none;
}

.toolbar-drawer-item-danger {
    color: #999;
}

.toolbar-drawer-item-danger:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* Active states for toolbar drawer items */
.toolbar-drawer-item.view-active,
.toolbar-drawer-item.gantt-active,
.toolbar-drawer-item.details-active,
.toolbar-drawer-item.hiding-complete,
.toolbar-drawer-item.columns-active,
.toolbar-drawer-item.stats-active,
.toolbar-drawer-item.docs-panel-active,
.toolbar-drawer-item.statuses-active,
.toolbar-drawer-item.audit-active {
    color: #c2410c;
}

/* Dark mode */
[data-theme="dark"] .toolbar-drawer-toggle {
    background: var(--bg-card);
    color: var(--text-muted);
}

[data-theme="dark"] .toolbar-drawer-toggle:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .toolbar-drawer {
    background: var(--bg-card);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .toolbar-drawer-header {
    border-bottom-color: var(--accent-orange);
}

[data-theme="dark"] .toolbar-drawer-title {
    color: var(--text-primary);
}

[data-theme="dark"] .toolbar-drawer-compact-toggle,
[data-theme="dark"] .toolbar-drawer-pin-toggle {
    color: var(--text-muted);
}

[data-theme="dark"] .toolbar-drawer-compact-toggle:hover,
[data-theme="dark"] .toolbar-drawer-pin-toggle:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .toolbar-drawer-pin-toggle.pinned {
    color: var(--accent-orange);
}

[data-theme="dark"] .toolbar-drawer-section-label {
    color: var(--accent-orange);
}

[data-theme="dark"] .toolbar-drawer-divider {
    background: var(--border-color);
}

[data-theme="dark"] .toolbar-drawer-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .toolbar-drawer-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-left: 2px solid var(--accent-orange);
}

[data-theme="dark"] .toolbar-drawer-overlay {
    background: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .toolbar-drawer-item.view-active,
[data-theme="dark"] .toolbar-drawer-item.gantt-active,
[data-theme="dark"] .toolbar-drawer-item.details-active,
[data-theme="dark"] .toolbar-drawer-item.hiding-complete,
[data-theme="dark"] .toolbar-drawer-item.columns-active,
[data-theme="dark"] .toolbar-drawer-item.stats-active,
[data-theme="dark"] .toolbar-drawer-item.docs-panel-active,
[data-theme="dark"] .toolbar-drawer-item.statuses-active,
[data-theme="dark"] .toolbar-drawer-item.audit-active {
    color: #c2410c;
}

[data-theme="dark"] .toolbar-drawer-item-danger:hover {
    color: var(--accent-red);
    background: var(--bg-hover);
}

/* ── Header Menu (hamburger on mobile, inline on desktop) ── */

.header-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #ddd;
    background: #fff;
    color: #999;
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.15s, border-color 0.15s;
}

.header-menu-toggle:hover {
    color: #333;
    border-color: #999;
}

.header-menu-toggle .close-icon {
    display: none;
}

.header-menu-toggle.menu-open .hamburger-icon {
    display: none;
}

.header-menu-toggle.menu-open .close-icon {
    display: block;
}

.header-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding-left: 12px;
    border-left: 1px solid #e0e0e0;
}

.header-menu .header-menu-label {
    display: none;
}

.header-menu .header-menu-divider {
    display: none;
}

.header-menu-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #999;
    border-radius: 2px;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
}

.header-menu-link:hover {
    color: #333;
    background: #f0f0f0;
}

/* Icon buttons inside the menu keep their desktop look */
.header-menu .header-icon-btn {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
}

/* ── Section Header ── */

.section-header {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: #333;
    display: inline;
}

.section-subtitle {
    font-size: 11px;
    color: #999;
    margin-left: 8px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ── Focus Areas Grid ── */

.focus-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* ── Group Card ── */

.group-card {
    min-width: 0;
}

.group-header {
    position: relative;
    margin-bottom: 8px;
}

.group-name-input {
    width: 100%;
    padding: 8px 58px 8px 10px;
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    outline: none;
    transition: border-color 0.15s;
}

.group-name-input:focus {
    border-color: #999;
    background: #fff;
}

.group-name-input::placeholder {
    color: #bbb;
    font-weight: 400;
}

/* ── Task Row ── */

.task-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 0 10px;
    border-bottom: 1px solid #eee;
}

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

.task-checkbox {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    margin: 0;
    border-radius: 1px;
}

.task-checkbox:checked {
    background: #333;
    border-color: #333;
}

.task-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.task-text-input {
    flex: 1;
    padding: 5px 4px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #333;
    outline: none;
    min-width: 0;
}

.task-text-input:focus {
    background: #f9f9f9;
}

.task-text-input::placeholder {
    color: #ddd;
}

.task-row.completed .task-text-input {
    text-decoration: line-through;
    color: #bbb;
}

body.hide-completed .task-row.completed {
    display: none;
}

#hide-completed-btn {
    position: relative;
}

body.hide-completed #hide-completed-btn {
    color: var(--accent-orange, #c2410c);
}

/* ── Task Effort ── */

.task-effort {
    flex-shrink: 0;
    font-size: 11px;
    color: #888;
    background: #f1f1f1;
    padding: 2px 6px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.task-effort[hidden] {
    display: none;
}

/* ── Task Deadline ── */

.task-deadline {
    flex-shrink: 0;
    width: 20px;
    padding: 2px;
    border: none;
    background: transparent;
    font-size: 11px;
    color: #bbb;
    outline: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, width 0.15s;
}

.task-deadline:focus,
.task-deadline[value]:not([value=""]) {
    opacity: 1;
}

.task-deadline[value]:not([value=""]) {
    width: 110px;
    color: #888;
}

.task-deadline:focus {
    width: 110px;
}

.task-row.overdue .task-deadline {
    color: #e53935;
    opacity: 1;
}

.task-row.overdue .task-text-input {
    color: #e53935;
}

/* ── Task Three-Dots Menu ── */

.task-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.task-menu-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    cursor: pointer;
    color: #aaa;
    padding: 0;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.task-menu-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.task-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    min-width: 170px;
    padding: 4px 0;
    z-index: 1000;
}

.task-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    color: #333;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}

.task-menu-item:hover {
    background: #f5f5f5;
}

.task-menu-item svg {
    flex-shrink: 0;
    color: #888;
}

.task-menu-item-danger {
    color: #c0392b;
}

.task-menu-item-danger svg {
    color: #c0392b;
}

.task-menu-item-danger:hover {
    background: #fdf1ef;
}

.task-menu-divider {
    height: 1px;
    background: #eee;
    margin: 4px 0;
}

/* Rich variant: deadline + effort dropdowns above the divider, delete below */
.task-menu.task-menu-rich {
    min-width: 360px;
    padding: 12px 14px 4px;
}

.task-menu-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.task-menu-field {
    flex: 1 1 0;
    min-width: 0;
}

.task-menu-field-deadline {
    flex: 0 0 130px;
}

.task-menu-field-effort {
    flex: 1 1 0;
    min-width: 0;
}

.task-menu-field label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 4px;
    font-weight: 600;
}

/* ── Custom select component (used inside the rich task menu) ── */

.tt-select {
    position: relative;
    width: 100%;
}

.tt-select-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 10px 7px 12px;
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #333;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.tt-select-btn:hover {
    border-color: #b0b0b0;
    background-color: #fafafa;
}

.tt-select-btn:focus-visible {
    outline: none;
    border-color: #555;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.tt-select.open .tt-select-btn {
    border-color: #555;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.tt-select-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-select-chevron {
    flex-shrink: 0;
    display: inline-flex;
    color: #999;
    transition: transform 0.2s ease, color 0.15s;
}

.tt-select.open .tt-select-chevron {
    transform: rotate(180deg);
    color: #333;
}

.tt-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 4px;
    z-index: 1100;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tt-select-option {
    display: block;
    width: 100%;
    padding: 7px 28px 7px 12px;
    border: none;
    background: none;
    color: #333;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s, color 0.1s;
    position: relative;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-select-option + .tt-select-option {
    margin-top: 1px;
}

.tt-select-option:hover {
    background: #f4f4f4;
    color: #111;
}

.tt-select-option.active {
    background: #f0f0f0;
    color: #111;
    font-weight: 600;
}

.tt-select-option.active::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.3l2.6 2.7L10 3.5' stroke='%23222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

/* Hours / minutes selects are narrow with short labels — drop the checkmark
   so it doesn't sit on top of the text, and center the labels for tidiness. */
.tt-select-hours,
.tt-select-mins {
    flex: 0 0 78px !important;
    width: 78px;
    min-width: 78px;
}

.tt-select-hours .tt-select-btn,
.tt-select-mins  .tt-select-btn {
    width: 78px;
    padding: 7px 10px;
    justify-content: center;
}

.tt-select-hours .tt-select-label,
.tt-select-mins  .tt-select-label {
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
}

.tt-select-hours .tt-select-option,
.tt-select-mins  .tt-select-option {
    padding-right: 12px;
    text-align: center;
}

.tt-select-hours .tt-select-option.active::after,
.tt-select-mins  .tt-select-option.active::after {
    content: none;
}

[data-theme="dark"] .tt-select-btn {
    background: var(--bg-input, #1e1e1e);
    border-color: var(--border-input, #3a3a3a);
    color: var(--text-primary, #e0e0e0);
}

[data-theme="dark"] .tt-select-btn:hover {
    background: #262626;
    border-color: #5a5a5a;
}

[data-theme="dark"] .tt-select.open .tt-select-btn,
[data-theme="dark"] .tt-select-btn:focus-visible {
    border-color: #888;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .tt-select-chevron {
    color: #888;
}

[data-theme="dark"] .tt-select.open .tt-select-chevron {
    color: #ddd;
}

[data-theme="dark"] .tt-select-menu {
    background: var(--bg-card, #1a1a1a);
    border-color: #333;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .tt-select-option {
    color: var(--text-primary, #ddd);
}

[data-theme="dark"] .tt-select-option:hover {
    background: #2a2a2a;
    color: #fff;
}

[data-theme="dark"] .tt-select-option.active {
    background: #303030;
    color: #fff;
}

[data-theme="dark"] .tt-select-option.active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.3l2.6 2.7L10 3.5' stroke='%23eee' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.task-menu-effort-row {
    display: flex;
    gap: 6px;
}

.task-menu-effort-row select {
    flex: 1 1 0;
    min-width: 0;
}

[data-theme="dark"] .task-menu-field label {
    color: var(--text-muted, #888);
}


/* ── Add Buttons ── */

.add-task-btn,
.add-group-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    color: #bbb;
    padding: 4px 0 14px 10px;
    transition: color 0.15s;
}

.add-task-btn:hover,
.add-group-btn:hover {
    color: #666;
}

.add-task-btn::before {
    content: '+ ';
}

.add-group-btn {
    margin-top: 20px;
    font-size: 13px;
    padding: 8px 16px;
    border: 1px dashed #ddd;
    display: inline-block;
}

.add-group-btn:hover {
    border-color: #999;
}

/* ── Group Delete ── */

.group-delete-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    color: #ccc;
    font-size: 13px;
    padding: 2px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    line-height: 1;
}

.group-header:hover .group-delete-btn {
    opacity: 1;
}

.group-delete-btn:hover {
    color: #e53935;
}

/* ── Group Transfer ── */

.group-transfer-btn {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    color: #ccc;
    padding: 2px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    line-height: 1;
    display: flex;
    align-items: center;
}

.group-header:hover .group-transfer-btn {
    opacity: 1;
}

.group-transfer-btn:hover {
    color: #4a90d9;
}

/* ── Save Indicator ── */

.save-indicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 6px 14px;
    background: #333;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.save-indicator.visible {
    opacity: 1;
}

/* ── Empty State ── */

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #999;
}

.empty-state p {
    margin-bottom: 16px;
    font-size: 15px;
}

.tt-create-week-state {
    max-width: 520px;
    margin: 80px auto 0;
    padding: 48px 32px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #222);
    text-align: center;
}

.tt-create-week-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary, #222);
}

.tt-create-week-sub {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--text-secondary, #666);
}

.tt-create-week-copy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--text-primary, #222);
    cursor: pointer;
}

.tt-create-week-copy input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent-orange, #c2410c);
}

.tt-create-week-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 1px solid #c2410c;
    background: #c2410c;
    color: #fff;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(194, 65, 12, 0.25);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.tt-create-week-btn:hover {
    background: #9a3409;
    border-color: #9a3409;
    box-shadow: 0 2px 6px rgba(194, 65, 12, 0.35);
}

.tt-create-week-btn:active {
    background: #7a2808;
    border-color: #7a2808;
}

.tt-create-week-btn:disabled {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}

[data-theme="dark"] .tt-create-week-btn {
    background: #c2410c;
    border-color: #c2410c;
    color: #fff;
}

[data-theme="dark"] .tt-create-week-btn:hover {
    background: #ea580c;
    border-color: #ea580c;
}

/* ── Bottom Panels (Notes + Tracker) ── */

.bottom-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e0e0e0;
}

/* ── General Notes ── */

.notes-textarea {
    width: 100%;
    min-height: 180px;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}

.notes-textarea:focus {
    border-color: #999;
}

.notes-textarea::placeholder {
    color: #bbb;
}

/* ── Daily Tracker ── */

.tracker-grid {
    border: 1px solid #e0e0e0;
    background: #fff;
}

.tracker-header {
    display: grid;
    grid-template-columns: 1fr repeat(7, 30px) 24px;
    gap: 0;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
}

.tracker-day-head {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-align: center;
    text-transform: uppercase;
}

.tracker-label-col,
.tracker-action-col {
    /* spacers */
}

.tracker-row {
    display: grid;
    grid-template-columns: 1fr repeat(7, 30px) 24px;
    gap: 0;
    padding: 4px 10px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}

.tracker-row:last-child {
    border-bottom: none;
}

.habit-name-input {
    padding: 4px 4px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #333;
    outline: none;
    min-width: 0;
}

.habit-name-input:focus {
    background: #f9f9f9;
}

.habit-name-input::placeholder {
    color: #ccc;
}

.habit-day-checkbox {
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    margin: 0 auto;
    border-radius: 1px;
    display: block;
}

.habit-day-checkbox:checked {
    background: #333;
    border-color: #333;
}

.habit-day-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.habit-delete {
    border: none;
    background: none;
    cursor: pointer;
    color: #ccc;
    font-size: 14px;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    text-align: center;
    line-height: 1;
}

.tracker-row:hover .habit-delete {
    opacity: 1;
}

.habit-delete:hover {
    color: #e53935;
}

.add-habit-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    color: #bbb;
    padding: 8px 10px;
    transition: color 0.15s;
    display: block;
    width: 100%;
    text-align: left;
}

.add-habit-btn:hover {
    color: #666;
}

/* ── Responsive ── */

@media (max-width: 900px) {
    .focus-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bottom-panels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dashboard-wrap {
        padding: 20px 16px;
    }

    .dashboard-header {
        flex-wrap: wrap;
        gap: 10px;
        margin: -20px -16px 24px;
        padding: 20px 16px 0;
    }

    .header-left {
        width: 100%;
        text-align: center;
    }

    .header-controls {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-title {
        font-size: 20px;
    }

    .dashboard-title img {
        height: 22px;
    }

    .dashboard-greeting {
        font-size: 11px;
    }

    .focus-grid {
        grid-template-columns: 1fr;
    }

    /* Header controls: keep week selector + hamburger inline */
    .header-controls {
        gap: 8px;
    }

    .header-menu-toggle {
        display: flex;
    }

    /* The menu is hidden by default, shown as a dropdown panel */
    .header-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        margin: 8px 0 0;
        padding: 8px 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        min-width: 200px;
        z-index: 100;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }

    .header-menu.menu-open {
        display: flex;
    }

    /* Make header-controls position anchor for the dropdown */
    .header-controls {
        position: relative;
    }

    /* Show text labels in mobile menu */
    .header-menu .header-menu-label {
        display: inline;
        font-size: 13px;
        color: #555;
    }

    .header-menu .header-menu-divider {
        display: block;
        height: 1px;
        background: #eee;
        margin: 4px 0;
    }

    /* Style links as full-width rows */
    .header-menu .header-menu-link,
    .header-menu .header-icon-btn {
        width: 100%;
        height: auto;
        padding: 10px 16px;
        justify-content: flex-start;
        gap: 10px;
        border-radius: 0;
        color: #666;
        font-size: 13px;
    }

    .header-menu .header-menu-link:hover,
    .header-menu .header-icon-btn:hover {
        background: #f5f5f5;
        color: #333;
    }

    /* Override icon button sizing in menu */
    .header-menu .header-icon-btn {
        opacity: 1;
    }

    .header-menu .header-icon-btn svg {
        flex-shrink: 0;
    }
}

/* ── Login Page ── */

.login-page {
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.login-wrap {
    width: 100%;
    max-width: 380px;
    padding: 20px;
}

.login-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    padding: 40px 36px 36px;
}

.login-title {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #888;
    font-style: italic;
    text-align: center;
    margin-bottom: 4px;
    line-height: 1;
}

.login-title img,
.login-title .taskfocus-logo {
    height: 30px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.65;
}

.login-title span {
    color: #ccc;
}

.login-subtitle {
    text-align: center;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 32px;
}

.login-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 20px;
}

.login-field {
    margin-bottom: 18px;
}

.login-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
}

.login-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 14px;
    color: #333;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.login-field input:focus {
    border-color: #999;
    background: #fff;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #888;
    cursor: pointer;
}

.login-remember input[type="checkbox"] {
    width: 14px;
    height: 14px;
    border: 1px solid #ccc;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    margin: 0;
    border-radius: 1px;
    flex-shrink: 0;
}

.login-remember input[type="checkbox"]:checked {
    background: #333;
    border-color: #333;
}

.login-remember input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.login-forgot-link {
    font-size: 13px;
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
}

.login-forgot-link:hover {
    color: #333;
}

.login-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 20px;
}

.login-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.login-footer-link {
    font-size: 13px;
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
}

.login-footer-link:hover {
    color: #333;
}

.login-submit {
    width: 100%;
    padding: 11px 20px;
    background: #333;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.15s;
}

.login-submit:hover {
    background: #222;
}

.login-submit:active {
    background: #111;
}

.login-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #999;
    font-size: 13px;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.login-divider span {
    padding: 0 12px;
}

.login-sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #d0d0d0;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.login-sso-btn:hover {
    background: #f5f5f5;
}

.login-sso-btn svg {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    flex-shrink: 0;
}

/* ── Login Tabs ── */

.login-tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 24px;
}

.login-tab {
    flex: 1;
    padding: 10px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.02em;
    transition: color 0.15s, border-color 0.15s;
}

.login-tab:hover {
    color: #555;
}

.login-tab.active {
    color: #333;
    border-bottom-color: #333;
}

.login-tab-content {
    display: none;
}

.login-tab-content.active {
    display: block;
}

/* ── Magic Link ── */

.magic-link-desc {
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
    line-height: 1.5;
}

.magic-link-check {
    font-size: 13px;
    color: #888;
    margin-top: 16px;
    line-height: 1.5;
}

.login-link-btn {
    background: none;
    border: none;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    padding: 0;
    margin-top: 12px;
    text-decoration: underline;
    transition: color 0.15s;
}

.login-link-btn:hover {
    color: #333;
}

/* ── Magic Link Email Settings ── */

.settings-hint {
    display: block;
    font-size: 11px;
    color: #aaa;
    margin-top: 6px;
    line-height: 1.4;
}

.settings-hint code {
    background: #f5f5f5;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 11px;
}

.settings-preview-btn {
    display: inline-block;
    padding: 8px 20px;
    background: #333;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s;
}

.settings-preview-btn:hover {
    background: #222;
}

.settings-preview-btn:disabled {
    background: #999;
    cursor: default;
}

.smtp-test-status {
    display: inline-block;
    margin-left: 12px;
    font-size: 13px;
    vertical-align: middle;
}
.smtp-test-status.is-success { color: #46a049; }
.smtp-test-status.is-error   { color: #d32f2f; }

.ml-preview-wrap .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ml-preview-close {
    border: none;
    background: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.ml-preview-close:hover {
    color: #333;
}

.ml-preview-card {
    padding: 0;
}

.ml-preview-iframe {
    width: 100%;
    height: 520px;
    border: none;
    display: block;
}

/* ── Signup Tabs ── */

.signup-tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 24px;
}

.signup-tab {
    flex: 1;
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #aaa;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    text-align: center;
}

.signup-tab:hover {
    color: #666;
}

.signup-tab.active {
    color: #333;
    border-bottom-color: #333;
}

/* ── Org Info Card ── */

.org-info-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.org-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.org-info-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.org-info-separator {
    color: #ccc;
}

.org-info-label {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.org-invite-code {
    display: inline-block;
    padding: 4px 10px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    font-size: 13px;
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    color: #333;
    letter-spacing: 0.15em;
    user-select: all;
}

.org-copy-btn {
    padding: 4px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #666;
    background: #f5f5f5;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.org-copy-btn:hover {
    background: #eee;
    color: #333;
}

/* ── Profile Page ── */

.profile-wrap {
    /* Inherits the dashboard-wrap layout (full-width, padded). */
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── MEETINGS ─────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── List view ── */

.meetings-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.meeting-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
    transition: background 0.12s;
}

.meeting-list-item:hover {
    background: #fafafa;
}

.meeting-list-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.meeting-list-dot-active { background: #16a34a; }
.meeting-list-dot-complete { background: #999; }

.meeting-list-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
}

.meeting-list-date {
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
}

.meeting-list-actions {
    font-size: 12px;
    color: #aaa;
    flex-shrink: 0;
}

[data-theme="dark"] .meeting-list-item { color: var(--text-primary); border-bottom-color: var(--border-light); }
[data-theme="dark"] .meeting-list-item:hover { background: var(--bg-hover); }
[data-theme="dark"] .meeting-list-date { color: var(--text-muted); }

/* Meeting table in folder view (uses the same .project-list / .project-link base styles) */
.meeting-table-header { grid-template-columns: 30px 1fr 110px 90px 80px 40px; }
.meeting-row { grid-template-columns: 30px 1fr 110px 90px 80px 40px; }
.meeting-row-date { font-size: 12px; color: #888; }
.meeting-row-action-count { font-size: 12px; color: #aaa; }
[data-theme="dark"] .meeting-row-date { color: var(--text-muted); }

/* ── Detail view toolbar ── */

.meeting-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 16px;
    flex-wrap: wrap;
}

.meeting-back-link {
    font-size: 12px;
    color: #888;
    text-decoration: none;
    transition: color 0.15s;
}

.meeting-back-link:hover { color: #333; }

.meeting-date-input,
.meeting-team-select,
.meeting-status-select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    color: #333;
    background: #fff;
}

[data-theme="dark"] .meeting-back-link { color: var(--text-muted); }
[data-theme="dark"] .meeting-back-link:hover { color: var(--text-primary); }
[data-theme="dark"] .meeting-date-input,
[data-theme="dark"] .meeting-team-select,
[data-theme="dark"] .meeting-status-select {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

/* ── Three-column layout ── */

.meeting-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .meeting-columns {
        grid-template-columns: 1fr;
    }
}

.meeting-col {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 16px;
    min-height: 300px;
}

[data-theme="dark"] .meeting-col {
    background: var(--bg-card);
    border-color: var(--border-light);
}

.meeting-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.meeting-col-header h3 {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #888;
}

[data-theme="dark"] .meeting-col-header { border-bottom-color: var(--border-light); }

.meeting-col-actions {
    display: flex;
    gap: 6px;
}

.meeting-col-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    color: #444;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.meeting-col-btn:hover { background: #f5f5f5; border-color: #b0b0b0; }
.meeting-col-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.meeting-col-btn svg { width: 12px; height: 12px; color: #888; }

.meeting-col-btn-primary {
    background: #c2410c;
    border-color: #c2410c;
    color: #fff;
}
.meeting-col-btn-primary svg { color: #fff; }
.meeting-col-btn-primary:hover { background: #9a3409; border-color: #9a3409; }

[data-theme="dark"] .meeting-col-btn {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}
[data-theme="dark"] .meeting-col-btn:hover { background: var(--bg-hover); border-color: #5a5a5a; }
[data-theme="dark"] .meeting-col-btn-primary { background: #c2410c; border-color: #c2410c; color: #fff; }

/* ── Agenda ── */

.agenda-attendees {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    min-height: 24px;
}

.agenda-attendee-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 10px;
    background: #f0f0f0;
    border-radius: 999px;
    font-size: 11px;
    color: #333;
    font-weight: 500;
}

.agenda-attendee-remove {
    border: none;
    background: none;
    color: #999;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
}
.agenda-attendee-remove:hover { color: #c0392b; }

[data-theme="dark"] .agenda-attendee-pill { background: var(--bg-input); color: var(--text-primary); }

.agenda-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.agenda-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid #f5f5f5;
}

.agenda-drag-handle {
    cursor: grab;
    color: #ccc;
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: -2px;
}

.agenda-checkbox {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.agenda-content {
    flex: 1;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: #333;
    outline: none;
    padding: 2px 4px;
    min-width: 0;
}

.agenda-content-heading {
    font-weight: 700;
    font-size: 14px;
}

.agenda-content:focus { background: #fafafa; }
[data-theme="dark"] .agenda-content { color: var(--text-primary); }
[data-theme="dark"] .agenda-content:focus { background: var(--bg-input); }
[data-theme="dark"] .agenda-item { border-bottom-color: rgba(255,255,255,0.05); }

.agenda-assignee {
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    font-size: 11px;
    color: #555;
    background: #fafafa;
    max-width: 90px;
}

[data-theme="dark"] .agenda-assignee {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

.agenda-delete {
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}
.agenda-delete:hover { color: #c0392b; }

.agenda-add-bar {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.agenda-add-btn {
    border: none;
    background: none;
    font-size: 11px;
    color: #aaa;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s;
}
.agenda-add-btn:hover { color: #333; }
[data-theme="dark"] .agenda-add-btn:hover { color: var(--text-primary); }

/* ── Transcript ── */

.transcript-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.transcript-source {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
    font-style: italic;
}

.transcript-raw pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
    background: #f9f9f9;
    padding: 12px;
    border-radius: 4px;
    max-height: 500px;
    overflow-y: auto;
}

[data-theme="dark"] .transcript-raw pre {
    background: var(--bg-input);
    color: var(--text-secondary);
}

.transcript-notes {
    font-size: 13px;
    line-height: 1.6;
    color: #333;
}

.transcript-notes h3 { font-size: 14px; margin: 14px 0 6px; }
.transcript-notes p { margin: 0 0 8px; }
.transcript-notes ul, .transcript-notes ol { padding-left: 20px; margin: 0 0 8px; }
.transcript-notes li { margin-bottom: 4px; }

[data-theme="dark"] .transcript-notes { color: var(--text-primary); }

.transcript-toggle-raw {
    display: inline-block;
    margin-top: 12px;
    border: none;
    background: none;
    font-size: 11px;
    color: #888;
    cursor: pointer;
    text-decoration: underline;
}
.transcript-toggle-raw:hover { color: #333; }

.transcript-empty {
    color: #aaa;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    padding: 40px 0;
}

/* ── Actions ── */

.action-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid #f5f5f5;
    flex-wrap: wrap;
}

[data-theme="dark"] .action-row { border-bottom-color: rgba(255,255,255,0.05); }

.action-text {
    flex: 1 1 100px;
    min-width: 80px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: #333;
    outline: none;
    padding: 2px 4px;
}
.action-text:focus { background: #fafafa; }
[data-theme="dark"] .action-text { color: var(--text-primary); }
[data-theme="dark"] .action-text:focus { background: var(--bg-input); }

.action-assignee {
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    font-size: 11px;
    color: #555;
    background: #fafafa;
    max-width: 90px;
}

[data-theme="dark"] .action-assignee {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

.action-deadline {
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    font-size: 11px;
    color: #555;
    background: #fafafa;
    width: 100px;
}

[data-theme="dark"] .action-deadline {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

.action-push-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.action-push-project,
.action-push-dashboard {
    width: 22px;
    height: 22px;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.action-push-project:hover,
.action-push-dashboard:hover { background: #f0f0f0; border-color: #b0b0b0; }
.action-push-project:disabled,
.action-push-dashboard:disabled { opacity: 0.4; cursor: not-allowed; }

[data-theme="dark"] .action-push-project,
[data-theme="dark"] .action-push-dashboard {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-muted);
}

.action-delete {
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}
.action-delete:hover { color: #c0392b; }

.action-pushed .action-text {
    text-decoration: line-through;
    color: #aaa;
}

[data-theme="dark"] .action-pushed .action-text { color: var(--text-muted); }

#add-action-btn {
    margin-top: 8px;
}

.cal-sync-banner {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    border: 1px solid transparent;
}

.cal-sync-banner-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #166534;
}

.cal-sync-banner-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.cal-sync-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
}

.cal-sync-row-info {
    flex: 1 1 auto;
    min-width: 0;
}

.cal-sync-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.cal-sync-icon {
    color: #555;
    flex-shrink: 0;
    display: inline-flex;
}

.cal-sync-icon-outlook { color: #0078d4; }
.cal-sync-icon-google  { color: #34a853; }

.cal-sync-row-status {
    margin-top: 2px;
    font-size: 12px;
    color: #888;
}

.cal-sync-connect,
.cal-sync-disconnect {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.cal-sync-connect {
    background: #333;
    border: 1px solid #333;
    color: #fff;
}

.cal-sync-connect:hover {
    background: #111;
    border-color: #111;
    color: #fff;
}

.cal-sync-disconnect {
    background: #fff;
    border: 1px solid #ddd;
    color: #b91c1c;
}

.cal-sync-disconnect:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

.cal-sync-disabled {
    flex-shrink: 0;
    font-size: 12px;
    color: #aaa;
    font-style: italic;
}

[data-theme="dark"] .cal-sync-row {
    background: var(--bg-card, #1a1a1a);
    border-color: var(--border-light, #2a2a2a);
}

[data-theme="dark"] .cal-sync-row-title { color: var(--text-primary, #e0e0e0); }
[data-theme="dark"] .cal-sync-row-status { color: var(--text-muted, #888); }

[data-theme="dark"] .cal-sync-connect {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #1e1e1e;
}

[data-theme="dark"] .cal-sync-connect:hover {
    background: #fff;
    border-color: #fff;
}

[data-theme="dark"] .cal-sync-disconnect {
    background: #1e1e1e;
    border-color: #444;
    color: #f87171;
}

[data-theme="dark"] .cal-sync-disconnect:hover {
    background: #2a1a1a;
    border-color: #5a3a3a;
}

[data-theme="dark"] .cal-sync-banner-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
    color: #86efac;
}

[data-theme="dark"] .cal-sync-banner-error {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.35);
    color: #fca5a5;
}

.profile-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    padding: 36px 40px 28px;
    max-width: 720px;
}

.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.profile-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.01em;
}

.profile-back {
    font-size: 13px;
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
}

.profile-back:hover {
    color: #333;
}

.profile-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 20px;
}

.profile-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 20px;
}

.profile-error p {
    margin: 0;
}

.profile-error p + p {
    margin-top: 4px;
}

.profile-field {
    margin-bottom: 18px;
    flex: 1;
    min-width: 0;
}

.profile-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
}

.profile-field label.settings-toggle {
    display: flex;
    margin-bottom: 0;
}

.profile-field input,
.profile-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 14px;
    color: #333;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.profile-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

.profile-field input:focus,
.profile-field select:focus {
    border-color: #999;
    background-color: #fff;
}

.profile-field input::placeholder {
    color: #bbb;
}

.profile-field-row {
    display: flex;
    gap: 16px;
}

.profile-divider {
    height: 1px;
    background: #eee;
    margin: 24px 0;
}

.profile-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 16px;
}

.profile-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

.profile-submit {
    width: 100%;
    padding: 11px 20px;
    background: #333;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.15s;
    margin-top: 6px;
}

.profile-submit:hover {
    background: #222;
}

.profile-submit:active {
    background: #111;
}

.profile-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.profile-logout-link {
    font-size: 13px;
    color: #b91c1c;
    text-decoration: none;
    transition: color 0.15s;
}

.profile-logout-link:hover {
    color: #7f1d1d;
}

@media (max-width: 500px) {
    .profile-field-row {
        flex-direction: column;
        gap: 0;
    }

    .profile-card {
        padding: 24px 20px 20px;
    }
}

/* ── Site Footer ── */

.site-footer {
    text-align: center;
    font-size: 12px;
    color: #bbb;
    padding: 16px 0;
    position: sticky;
    top: 100vh;
}

.site-version {
    opacity: 0.6;
    margin-left: 4px;
}

.site-footer a {
    color: #999;
    text-decoration: none;
    transition: color 0.15s;
}

.site-footer a:hover {
    color: #333;
}

/* ── PDF Render (off-screen clone) ── */

.pdf-render {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -9999;
    background: #fff;
    pointer-events: none;
}

.pdf-render .dashboard-wrap {
    padding: 20px 18px;
}

.pdf-render .dashboard-header {
    margin: 0 0 24px;
    padding: 0 0 12px;
}

.pdf-render .focus-grid {
    display: flex;
    gap: 16px;
}

.pdf-render .pdf-column {
    flex: 1;
    min-width: 0;
}

.pdf-render .group-card {
    margin-bottom: 16px;
}

.pdf-render .task-deadline.pdf-static {
    flex-shrink: 0;
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    width: auto;
    opacity: 1;
}

.pdf-static.group-name-input {
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
}

.pdf-static.task-text-input {
    font-size: 14px;
    color: #111;
}

.pdf-checkbox {
    display: inline-block;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 1px;
    vertical-align: middle;
}

.pdf-checkbox.checked {
    background: #333;
    border-color: #333;
}

.task-row.completed .pdf-static.task-text-input {
    text-decoration: line-through;
    color: #999;
}

/* ── User Management ── */

.users-table {
    background: #fff;
    border: 1px solid #e0e0e0;
}

.users-header-row {
    display: grid;
    grid-template-columns: 1fr 1fr 96px 80px 120px;
    gap: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
}

.users-header-row span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
}

.users-row {
    display: grid;
    grid-template-columns: 1fr 1fr 96px 80px 120px;
    gap: 0;
    padding: 4px 16px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}

.users-row:last-child {
    border-bottom: none;
}

.users-row.locked {
    background: #fef2f2;
}

.users-name-input,
.users-email-input {
    padding: 6px 8px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #333;
    outline: none;
    min-width: 0;
}

.users-name-input:focus,
.users-email-input:focus {
    background: #f9f9f9;
}

.users-header-row.has-org-col,
.users-row.has-org-col {
    grid-template-columns: 1fr 1fr 140px 96px 80px 120px;
}

.users-org-field {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-role-cell {
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    padding-right: 16px;
}

.users-role-select {
    font-size: 12px;
    font-family: inherit;
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 2px;
    background: #fff;
    color: #333;
    cursor: pointer;
    width: 100%;
    max-width: 80px;
}

.users-role-select:hover {
    border-color: #999;
}

.users-role-select:focus {
    outline: none;
    border-color: #888;
}

.users-status {
    font-size: 12px;
    color: #888;
}

.users-row.locked .users-status {
    color: #b91c1c;
    font-weight: 600;
}

.users-action-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: #888;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.users-action-icon:hover {
    color: #333;
    background: #f0f0f0;
}

.users-action-icon:disabled {
    opacity: 0.4;
    cursor: default;
}

.users-action-icon svg {
    flex-shrink: 0;
}

.users-row.locked .users-lock-btn {
    color: #b91c1c;
}

.users-row.locked .users-lock-btn:hover {
    background: #fef2f2;
}

.users-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.users-impersonate-btn.imp-pending {
    color: #b45309;
}

.users-impersonate-btn.imp-active {
    color: #15803d;
}

.users-impersonate-btn.imp-active:hover {
    background: #f0fdf4;
}

.users-delete-btn {
    color: #ccc;
}

.users-delete-btn:hover {
    color: #b91c1c;
    background: #fef2f2;
}

/* ── Impersonation Banners ── */

.tt-imp-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    font-size: 13px;
    color: #333;
    padding: 0 16px;
}

.tt-imp-banner a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    margin-left: 4px;
}

.tt-imp-banner--active {
    background: #fef3c7;
    border-bottom: 1px solid #f59e0b;
    color: #92400e;
}

.tt-imp-banner--pending {
    background: #dbeafe;
    border-bottom: 1px solid #3b82f6;
    color: #1e40af;
}

.tt-imp-banner--grant {
    background: #e0f2fe;
    border-bottom: 1px solid #7dd3fc;
    color: #0c4a6e;
}

body.tt-has-imp-banner {
    padding-top: 44px;
}

.pending-field {
    font-size: 13px;
    color: #333;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pending-header-row {
    grid-template-columns: 1fr 1fr 1fr 90px;
}

.pending-header-row.has-org-col {
    grid-template-columns: 1fr 1fr 1fr 140px 90px;
}

.pending-row {
    grid-template-columns: 1fr 1fr 1fr 90px;
}

.pending-row.has-org-col {
    grid-template-columns: 1fr 1fr 1fr 140px 90px;
}

.pending-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pending-approve-btn,
.pending-reject-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 2px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.pending-approve-btn {
    color: #16a34a;
}

.pending-approve-btn:hover {
    border-color: #16a34a;
    background: #f0fdf4;
}

.pending-reject-btn {
    color: #b91c1c;
}

.pending-reject-btn:hover {
    border-color: #b91c1c;
    background: #fef2f2;
}

.pending-approve-btn:disabled,
.pending-reject-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.add-user-form {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px 20px 16px;
    margin-bottom: 20px;
}

.add-user-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.add-user-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
}

.add-user-field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.add-user-field input:focus {
    border-color: #999;
    background: #fff;
}

.add-user-error {
    margin-top: 12px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 13px;
}

.add-user-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.add-user-submit {
    padding: 8px 20px;
    background: #333;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.add-user-submit:hover {
    background: #222;
}

.add-user-submit:disabled {
    opacity: 0.5;
    cursor: default;
}

.add-user-cancel {
    padding: 8px 20px;
    background: none;
    color: #999;
    border: 1px solid #ddd;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.add-user-cancel:hover {
    border-color: #999;
    color: #333;
}

@media (max-width: 600px) {
    .add-user-fields {
        grid-template-columns: 1fr;
    }

    .users-header-row,
    .users-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .users-header-row {
        display: none;
    }
}

/* ── Projects Section (Homepage) ── */

.projects-section {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e0e0e0;
}

.project-list {
    border: 1px solid #e0e0e0;
    background: #fff;
}

.project-list-header,
.project-link {
    display: grid;
    grid-template-columns: 20px 1fr 120px auto auto auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
}

.project-list-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #999;
    border-bottom: 1px solid #e0e0e0;
}

.project-link {
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #333;
    transition: background 0.15s;
}

.project-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: #ccc;
    opacity: 0;
    transition: opacity 0.15s;
}

.project-link:hover .project-drag-handle {
    opacity: 1;
}

.project-drag-handle:active {
    cursor: grabbing;
}

.project-link.sortable-ghost {
    background: #f0f4ff;
    opacity: 0.6;
}

.project-link.sortable-chosen {
    background: #f9f9f9;
}

.project-link.sortable-fallback {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    opacity: 1 !important;
}

.project-link:last-child {
    border-bottom: none;
}

.project-link:hover {
    background: #f9f9f9;
}

.project-link-title {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #333;
    min-width: 0;
}

.project-link-title:hover {
    color: #000;
}

.project-link-count {
    font-size: 12px;
    color: #999;
    text-align: right;
}

.projects-empty {
    font-size: 13px;
    color: #999;
    padding: 16px 0;
}

.add-project-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #bbb;
    padding: 8px 16px;
    margin-top: 12px;
    border: 1px dashed #ddd;
    display: inline-block;
    transition: color 0.15s, border-color 0.15s;
}

.add-project-btn:hover {
    color: #666;
    border-color: #999;
}

.add-project-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Projects Detail Page ── */

.project-layout {
    display: flex;
    min-height: 100vh;
}

.projects-wrap {
    flex: 1;
    min-width: 0;
    padding: 40px 48px;
}

/* ── Project Sidebar ── */

.project-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    overflow: hidden;
}

.project-sidebar.collapsed {
    width: 40px;
}

.project-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 12px;
    border-bottom: 1px solid #eee;
    gap: 8px;
}

.project-sidebar-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
}

.project-sidebar.collapsed .project-sidebar-title {
    display: none;
}

.project-sidebar.collapsed .project-sidebar-header {
    padding: 16px 0;
    justify-content: center;
}

.project-sidebar-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    color: #999;
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.15s, background 0.15s;
}

.project-sidebar-toggle:hover {
    color: #333;
    background: #f0f0f0;
}

.project-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.project-sidebar.collapsed .project-sidebar-nav {
    display: none;
}

.project-sidebar-section {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: #aaa;
    padding: 12px 16px 4px;
}

.project-sidebar-section-projects {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-search-toggle {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 2px;
    line-height: 0;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.sidebar-search-toggle:hover {
    color: #555;
    background: rgba(0, 0, 0, 0.06);
}

.sidebar-search-box {
    padding: 4px 12px 6px;
}

.sidebar-search-input {
    width: 100%;
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color 0.15s;
}

.sidebar-search-input:focus {
    border-color: #999;
}

.project-sidebar-item-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.project-sidebar-item {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 8px 54px 8px 16px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, color 0.15s;
}

.project-sidebar-item:hover {
    background: #f5f5f5;
    color: #222;
}

.project-sidebar-item.active {
    background: #f0f0f0;
    color: #111;
    font-weight: 600;
}

.project-sidebar-star {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.project-sidebar-item-wrap:hover .project-sidebar-star,
.project-sidebar-star.starred {
    opacity: 1;
}

.project-sidebar-star:hover {
    color: #e6a817;
}

.project-sidebar-star.starred {
    color: #e6a817;
}

.project-sidebar-delete {
    position: absolute;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.project-sidebar-item-wrap:hover .project-sidebar-delete {
    opacity: 1;
}

.project-sidebar-delete:hover {
    color: #dc2626;
}

.project-sidebar-home {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    color: #777;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s, color 0.15s;
}

.project-sidebar-home:hover {
    background: #f5f5f5;
    color: #333;
}

.project-sidebar.collapsed .project-sidebar-home span {
    display: none;
}

.project-sidebar.collapsed .project-sidebar-home {
    justify-content: center;
    padding: 12px 0;
}

.projects-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.projects-header-left {
    flex: 1;
    min-width: 0;
}

.projects-brand {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 4px;
}

.projects-brand-title {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #bbb;
    font-style: italic;
    transition: color 0.15s;
}

.projects-brand:hover .projects-brand-title {
    color: #888;
}

.project-title-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #999;
    margin-bottom: 2px;
}

.project-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.project-title-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.2s;
}
.project-title-input {
    flex: 1;
    min-width: 0;
    padding: 8px 4px;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    font-size: 24px;
    font-weight: 300;
    color: #333;
    outline: none;
    transition: border-color 0.15s;
    letter-spacing: 0.01em;
}

.project-title-input:focus {
    border-bottom-color: #999;
}

.project-title-input::placeholder {
    color: #ccc;
}

.projects-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-bottom: 10px;
}

.projects-home-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    transition: color 0.15s;
}

.projects-home-link:hover {
    color: #333;
}

/* ── Project Details Panel ── */

.project-toggle-details {
    border: none;
    background: none;
    cursor: pointer;
    color: #bbb;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s;
    display: flex;
    align-items: center;
}

.project-toggle-details:hover {
    color: #333;
}

.project-toggle-details.details-active {
    color: #c2410c;
}

.project-details-panel {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.project-details-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    align-items: flex-start;
}

.project-details-status {
    flex-shrink: 0;
}

.project-details-status .project-status-select {
    width: 100%;
}

.project-details-desc {
    flex: 1 1 100%;
    min-width: 0;
}

.project-details-sponsor {
    width: 220px;
    flex-shrink: 0;
}

.project-details-panel label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.project-description {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #333;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.15s;
    outline: none;
}

.project-description:focus {
    border-color: #aaa;
}

.project-description::placeholder {
    color: #bbb;
}

.project-sponsor {
    width: 100%;
}

/* Select2 overrides for sponsor */
.project-details-sponsor .select2-container--default .select2-selection--single {
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    height: 34px;
    min-height: 34px;
    transition: border-color 0.15s;
}

.project-details-sponsor .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px;
    color: #333;
    line-height: 32px;
    padding-left: 10px;
}

.project-details-sponsor .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

.project-details-sponsor .select2-container--default .select2-selection--single .select2-selection__clear {
    font-size: 16px;
    margin-right: 4px;
    color: #bbb;
}

.project-details-sponsor .select2-container--default.select2-container--open .select2-selection--single,
.project-details-sponsor .select2-container--default .select2-selection--single:hover {
    border-color: #aaa;
}

/* ── Task Table ── */

.ptask-table {
    border: 1px solid #e0e0e0;
    background: #fff;
    overflow: visible;
}

.ptask-header-row {
    display: grid;
    gap: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
}

.ptask-header-row span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
}

.ptask-header-row span:nth-child(4) {
    padding-left: 6px;
}

.ptask-header-row span:nth-child(5) {
    text-align: center;
}

.ptask-row {
    display: grid;
    gap: 0;
    padding: 4px 16px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    position: relative;
}

.ptask-row:last-child {
    border-bottom: none;
}

/* Depth indentation — indent the summary wrapper (toggle + title) */
.ptask-row[data-depth="1"] .ptask-summary-wrap { padding-left: 24px; }
.ptask-row[data-depth="2"] .ptask-summary-wrap { padding-left: 48px; }
.ptask-row[data-depth="3"] .ptask-summary-wrap { padding-left: 72px; }
.ptask-row[data-depth="4"] .ptask-summary-wrap { padding-left: 96px; }
.ptask-row[data-depth="5"] .ptask-summary-wrap { padding-left: 120px; }

/* Task inputs */
.ptask-summary {
    padding: 6px 8px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #333;
    outline: none;
    min-width: 0;
    transition: background 0.15s;
}

.ptask-summary:focus {
    background: #f9f9f9;
}

.ptask-summary::placeholder {
    color: #ccc;
}

.ptask-summary {
    font-weight: 500;
}

.ptask-summary-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
}

.ptask-summary-wrap .ptask-summary {
    flex: 1;
    min-width: 0;
}

.ptask-child-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    color: #999;
    transition: transform 0.15s, color 0.15s;
    transform: rotate(90deg);
}

.ptask-child-toggle:hover {
    color: #333;
}

.ptask-has-children .ptask-child-toggle {
    display: flex;
}

.ptask-collapsed .ptask-child-toggle {
    transform: rotate(0deg);
}

.ptask-has-children .ptask-summary {
    font-weight: 700;
}

.ptask-before-parent {
    border-bottom-color: #ccc;
}

.ptask-last-child {
    border-bottom-color: #ccc;
}

/* Deadline input */
.ptask-deadline {
    padding: 4px 6px;
    border: none;
    background: transparent;
    font-size: 12px;
    color: #999;
    outline: none;
    cursor: pointer;
    transition: color 0.15s;
}

.ptask-deadline:focus {
    color: #333;
}

.ptask-deadline[value]:not([value=""]) {
    color: #666;
}

.ptask-overdue .ptask-deadline {
    color: #e53935;
}

.ptask-overdue .ptask-summary {
    color: #e53935;
}

/* Duration input */
.ptask-duration-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    position: relative;
}

.ptask-duration {
    padding: 4px 2px;
    border: none;
    background: transparent;
    font-size: 12px;
    color: #999;
    outline: none;
    flex: 1;
    min-width: 0;
    text-align: center;
    -moz-appearance: textfield;
}

.ptask-duration::-webkit-outer-spin-button,
.ptask-duration::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ptask-duration:focus {
    color: #333;
}

.ptask-duration[value]:not([value=""]) {
    color: #666;
}

.ptask-duration-arrows {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.15s;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ptask-row:hover .ptask-duration-arrows {
    opacity: 1;
}

.ptask-duration-up,
.ptask-duration-down {
    border: none;
    background: none;
    cursor: pointer;
    color: #bbb;
    font-size: 7px;
    line-height: 1;
    padding: 1px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.ptask-duration-up:hover,
.ptask-duration-down:hover {
    color: #4a90d9;
}

.ptask-has-children .ptask-duration {
    color: #999;
    pointer-events: none;
}

.ptask-has-children .ptask-duration-arrows {
    display: none;
}

/* Dependency select */
.ptask-dependency {
    padding: 4px 2px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 11px;
    color: #999;
    cursor: pointer;
    outline: none;
    border-radius: 2px;
    transition: border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    max-width: 100%;
}

.ptask-dependency:focus,
.ptask-dependency:hover {
    border-color: #ddd;
}

.ptask-dependency option {
    font-size: 12px;
}

/* Select2 dependency overrides */
.ptask-row .select2-container--default {
    min-width: 0;
    max-width: 100%;
}

.ptask-row .select2-container--default .select2-selection--single {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    height: 26px;
    min-height: 26px;
    transition: border-color 0.15s;
}

.ptask-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 11px;
    color: #999;
    line-height: 24px;
    padding-left: 4px;
    padding-right: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptask-row .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 24px;
    width: 16px;
}

.ptask-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    position: relative;
}

.ptask-row .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #bbb;
    z-index: 1;
    line-height: 1;
}

.ptask-row:hover .select2-container--default .select2-selection--single {
    border-color: #ddd;
}

.ptask-row .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #aaa;
}

.select2-container--default .select2-results__option {
    font-size: 12px;
    padding: 4px 8px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: 12px;
    padding: 4px 6px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #4a90d9;
}

.select2-dropdown {
    border-color: #ccc;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 9999;
}

/* Conflict styling for Select2 */
.ptask-dep-conflict .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e57373;
}

/* Dependency conflict */
.ptask-dep-conflict .ptask-summary,
.ptask-dep-conflict .ptask-dependency {
    color: #e57373;
}



/* Status select */
.ptask-status {
    padding: 4px 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    outline: none;
    border-radius: 2px;
    transition: border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
}

.ptask-status:focus,
.ptask-status:hover {
    border-color: #ddd;
}

/* Status colours */
.ptask-status-backlog .ptask-status { color: #999; }
.ptask-status-started .ptask-status { color: #2563eb; }
.ptask-status-stuck .ptask-status { color: #dc2626; }
.ptask-status-on_hold .ptask-status { color: #d97706; }
.ptask-status-complete .ptask-status { color: #16a34a; }

.ptask-status-complete .ptask-summary {
    text-decoration: line-through;
    color: #bbb;
}

/* Red dot indicator for stuck tasks — uses background gradient since inputs can't have ::before */
.ptask-status-stuck .ptask-summary {
    background-image: radial-gradient(circle 3.5px, #dc2626 3px, transparent 3.5px);
    background-repeat: no-repeat;
    background-size: 7px 7px;
    background-position: 8px center;
    padding-left: 22px;
}

/* Action buttons — Three-dots menu */
.ptask-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ptask-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    color: #bbb;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.ptask-row:hover .ptask-menu-btn {
    opacity: 1;
}

.ptask-menu-btn:hover {
    color: #555;
    background: #f0f0f0;
}

.ptask-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 170px;
    padding: 4px 0;
}

.ptask-menu.open {
    display: block;
}

.ptask-menu.ptask-menu-up {
    top: auto;
    bottom: 100%;
}

.ptask-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    text-align: left;
    transition: background 0.1s;
    white-space: nowrap;
}

.ptask-menu-item svg {
    flex-shrink: 0;
    color: #999;
}

.ptask-menu-item:hover svg {
    color: #555;
}

.ptask-menu-item.ptask-delete:hover svg {
    color: #dc2626;
}

.ptask-menu-item:hover {
    background: #f5f5f5;
}

.ptask-menu-item.ptask-delete:hover {
    background: #fef2f2;
    color: #dc2626;
}

.ptask-menu-divider {
    border-top: 1px solid #eee;
    margin: 4px 0;
}

/* Drag handle */
.ptask-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: #ccc;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.ptask-row:hover .ptask-drag-handle {
    opacity: 1;
}

.ptask-drag-handle:hover {
    color: #999;
}

.ptask-drag-handle:active {
    cursor: grabbing;
}

.ptask-check-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    padding: 0;
    color: transparent;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ptask-check-btn:hover {
    border-color: #16a34a;
    color: #16a34a;
}

.ptask-row.ptask-status-complete .ptask-check-btn {
    border-color: #16a34a;
    background: #16a34a;
    color: #fff;
}

/* Dragging state */
.ptask-row.dragging {
    opacity: 0.4;
}

/* Drop indicators */
.ptask-row.drag-over-above::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #2563eb;
    z-index: 10;
}

.ptask-row.drag-over-below::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #2563eb;
    z-index: 10;
}

/* Indent button (now inside menu, these legacy styles kept for compatibility) */

/* Add task button */
.add-ptask-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #bbb;
    padding: 8px 16px;
    margin-top: 12px;
    border: 1px dashed #ddd;
    display: inline-block;
    transition: color 0.15s, border-color 0.15s;
}

.add-ptask-btn:hover {
    color: #666;
    border-color: #999;
}

.add-ptask-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.add-ptask-btn {
    margin-top: 0;
}

.add-group-btn {
    border: 1px dashed #ddd;
    background: none;
    cursor: pointer;
    color: #bbb;
    font-size: 13px;
    padding: 8px 16px;
    margin: 0;
    transition: color 0.15s, border-color 0.15s;
}

.add-group-btn:hover {
    color: #666;
    border-color: #999;
}

/* ── Group Headers ── */

.ptask-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f5f5f5;
    border-bottom: 2px solid #e0e0e0;
    margin-top: 12px;
    user-select: none;
}

.ptask-group-header:first-child {
    margin-top: 0;
}

.ptask-group-header.dragging {
    opacity: 0.4;
}

.ptask-group-header.drag-over-above {
    box-shadow: 0 -2px 0 0 #2563eb;
}

.ptask-group-header.drag-over-below {
    box-shadow: 0 2px 0 0 #2563eb;
}

.ptask-group-col-header.drag-drop-target {
    position: relative;
}

.ptask-group-col-header.drag-drop-target::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #2563eb;
    z-index: 10;
}

.ptask-group-drag-handle {
    cursor: grab;
    color: #ccc;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.ptask-group-drag-handle:hover {
    color: #999;
}

.ptask-group-toggle {
    cursor: pointer;
    color: #999;
    display: flex;
    align-items: center;
    transition: color 0.15s, transform 0.15s;
}

.ptask-group-toggle:hover {
    color: #333;
}

.ptask-group-header.collapsed .ptask-group-toggle {
    transform: rotate(-90deg);
}

.ptask-group-name {
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    flex: 1;
    outline: none;
    min-width: 0;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.15s;
}

.ptask-group-name:focus {
    background: #fff;
}

.ptask-group-count {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}

.ptask-group-add-task {
    border: none;
    background: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
    display: flex;
    align-items: center;
}

.ptask-group-add-task:hover {
    color: #2563eb;
}

.ptask-group-add-task:disabled {
    opacity: 0.4;
    cursor: default;
}

.ptask-group-delete {
    border: none;
    background: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.ptask-group-delete:hover {
    color: #e53935;
}

/* Hide top-level column header when groups provide their own */
.ptask-table.has-groups > .ptask-header-row {
    display: none;
}

/* Column headers inside groups */
.ptask-group-col-header {
    margin-top: 0;
}

/* Collapsed group hides its tasks and column headers */
.ptask-group-collapsed {
    display: none !important;
}

.ptask-toggle-complete {
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}

.ptask-toggle-complete:hover {
    color: #333;
}

.ptask-toggle-complete.hiding-complete {
    color: #c2410c;
}

.ptask-toggle-complete .eye-closed,
.toolbar-drawer-item .eye-closed {
    display: none;
}

.ptask-toggle-complete.hiding-complete .eye-open,
.hiding-complete .eye-open {
    display: none;
}

.ptask-toggle-complete.hiding-complete .eye-closed,
.hiding-complete .eye-closed {
    display: block;
}

.ptask-table.hide-complete .ptask-row.ptask-status-complete,
.ptask-preload-hide-complete .ptask-row.ptask-status-complete {
    display: none;
}

.kanban-wrap.hide-complete .kanban-column[data-status="complete"] {
    display: none;
}

.kanban-wrap.hide-complete .kanban-subtask-done {
    display: none;
}

/* Gantt toggle */
.ptask-toggle-gantt {
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}

.ptask-toggle-gantt:hover {
    color: #333;
}

.ptask-toggle-gantt.gantt-active {
    color: #c2410c;
}

/* Gantt chart */
.gantt-wrap {
    margin-top: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
    overflow-x: auto;
    --gantt-label-width: 200px;
}

.gantt-chart {
    display: inline-block;
    min-width: 100%;
}

.gantt-header {
    display: flex;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
}

.gantt-label-col {
    flex-shrink: 0;
    width: var(--gantt-label-width);
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    border-right: 1px solid #eee;
    position: sticky;
    left: 0;
    background: #f9f9f9;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gantt-label-resize {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 3;
}

.gantt-label-resize::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    bottom: 25%;
    width: 2px;
    background: transparent;
    border-radius: 1px;
    transition: background 0.15s;
}

.gantt-label-resize:hover::after,
.gantt-label-resize.active::after {
    background: #4a90d9;
}

.gantt-timeline-col {
    display: flex;
    flex-shrink: 0;
}

.gantt-date-cell {
    width: 48px;
    min-width: 48px;
    flex-shrink: 0;
    text-align: center;
    font-size: 10px;
    color: #999;
    padding: 6px 2px;
    border-right: 1px solid #f0f0f0;
}

.gantt-date-cell:last-child {
    border-right: none;
}

.gantt-date-cell.gantt-today {
    background: #f0f7ff;
    font-weight: 600;
    color: #2563eb;
}

.gantt-row {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    min-height: 28px;
}

.gantt-row:last-child {
    border-bottom: none;
}

.gantt-row-label {
    flex-shrink: 0;
    width: var(--gantt-label-width);
    padding: 4px 12px;
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid #eee;
    display: flex;
    align-items: center;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
}

.gantt-row-label.gantt-parent {
    font-weight: 700;
}

.gantt-row-timeline {
    position: relative;
    flex-shrink: 0;
}

.gantt-bar {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 3px;
    min-width: 3px;
}

.gantt-bar-backlog {
    background: #e0e0e0;
}

.gantt-bar-started {
    background: #93c5fd;
}

.gantt-bar-complete {
    background: #86efac;
}

.gantt-bar-stuck {
    background: #fca5a5;
}

.gantt-bar-on_hold {
    background: #fcd34d;
}

.gantt-bar-parent {
    background: #64748b;
    opacity: 0.5;
    top: 6px;
    bottom: 6px;
}

.gantt-rows-wrap {
    position: relative;
}

.gantt-dep-svg {
    position: absolute;
    top: 0;
    left: var(--gantt-label-width);
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.gantt-dep-line {
    fill: none;
    stroke: #999;
    stroke-width: 1.5;
}

.gantt-dep-arrow {
    fill: #999;
}

.gantt-empty {
    padding: 20px;
    text-align: center;
    color: #bbb;
    font-size: 13px;
}

.ptask-shortcuts-hint {
    font-size: 11px;
    color: #bbb;
}

.ptask-shortcuts-hint kbd {
    display: inline-block;
    font-family: inherit;
    font-size: 10px;
    padding: 1px 4px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #f7f7f7;
    color: #999;
}

/* ── Quick-action buttons (now inside three-dots menu) ── */

/* ── View Toggle Button ── */

.ptask-toggle-view {
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}

.ptask-toggle-view:hover {
    color: #333;
}

.ptask-toggle-view.view-active {
    color: #c2410c;
}

/* ── Status Settings Toggle Button ── */

.ptask-toggle-statuses {
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}

.ptask-toggle-statuses:hover {
    color: #333;
}

.ptask-toggle-statuses.statuses-active {
    color: #c2410c;
}

/* ── Kanban Board ── */

.kanban-wrap {
    margin-top: 16px;
}

.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
}

.kanban-column {
    min-width: 250px;
    flex: 1;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-left: 3px solid #999;
    border-radius: 8px 8px 0 0;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.kanban-column-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.kanban-column-count {
    font-size: 11px;
    color: #999;
    background: #f0f0f0;
    padding: 1px 7px;
    border-radius: 10px;
}

.kanban-column-body {
    padding: 8px;
    flex: 1;
    min-height: 60px;
}

.kanban-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.kanban-card:hover {
    border-color: #bbb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.kanban-card-summary {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

/* ── Kanban card action bar ── */

.kanban-card-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    flex-wrap: wrap;
}

.kanban-card-deadline-wrap {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}

.kanban-card-deadline-wrap svg {
    flex-shrink: 0;
}

.kanban-card-date {
    border: none;
    background: none;
    font-size: 11px;
    color: #666;
    padding: 1px 2px;
    outline: none;
    cursor: pointer;
    width: 100px;
    font-family: inherit;
}

.kanban-card-date:hover {
    color: #333;
}

.kanban-card-date:focus {
    color: #2563eb;
}

/* Empty date input — show placeholder color */
.kanban-card-date:not([value]),
.kanban-card-date[value=""] {
    color: #ccc;
}

.kanban-card-deadline-wrap.kanban-card-overdue .kanban-card-date {
    color: #dc2626;
    font-weight: 500;
}

.kanban-card-deadline-wrap.kanban-card-overdue svg {
    stroke: #dc2626;
}

.kanban-card-subtasks-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: none;
    background: #f3f3f3;
    color: #666;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.kanban-card-subtasks-toggle:hover {
    background: #e8e8e8;
    color: #333;
}

.kanban-card-subtasks-toggle.expanded {
    background: #e0ecff;
    color: #2563eb;
}

.kanban-card-assignee-wrap {
    flex: 0 0 100%;
}

.kanban-card-assignee-select {
    width: 100%;
    font-size: 11px;
    padding: 2px 4px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    background: #fff;
    color: #555;
    cursor: pointer;
    outline: none;
    max-width: 100px;
    transition: border-color 0.15s;
}

.kanban-card-assignee-select:hover {
    border-color: #bbb;
}

.kanban-card-assignee-select:focus {
    border-color: #2563eb;
}

/* ── Kanban sub-tasks list ── */

.kanban-card-subtasks {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

.kanban-card-subtask {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12px;
    color: #555;
}

.kanban-subtask-check {
    flex-shrink: 0;
    width: 14px;
    text-align: center;
    font-size: 11px;
    color: #bbb;
}

.kanban-subtask-done .kanban-subtask-check {
    color: #16a34a;
}

.kanban-subtask-done .kanban-subtask-name {
    text-decoration: line-through;
    color: #aaa;
}

.kanban-card[draggable="true"] {
    cursor: grab;
}

.kanban-card-dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.kanban-column-dragover {
    background: #eef4ff;
    border-color: #93b8f7;
}

.kanban-column-dragover .kanban-column-body {
    min-height: 100px;
}

/* ── Status Settings Panel ── */

.status-settings-panel {
    position: fixed;
    top: 0;
    right: -360px;
    width: 340px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 12px rgba(0,0,0,0.1);
    z-index: 101;
    transition: right 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.status-settings-panel.open {
    right: 0;
}

.status-settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.status-settings-panel-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.status-settings-panel-close {
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    padding: 0 4px;
}

.status-settings-panel-close:hover {
    color: #333;
}

.status-settings-list {
    padding: 12px 20px;
    flex: 1;
}

.status-settings-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.status-settings-color {
    width: 30px;
    height: 30px;
    padding: 2px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

.status-settings-label {
    flex: 1;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    background: transparent;
}

.status-settings-label:focus {
    background: #f5f5f0;
}

.status-settings-delete {
    border: none;
    background: none;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
    flex-shrink: 0;
}

.status-settings-delete:hover {
    color: #dc2626;
}

.status-settings-add {
    margin: 0 20px 16px;
    padding: 8px 16px;
    border: 1px dashed #ddd;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #bbb;
    border-radius: 4px;
    transition: color 0.15s, border-color 0.15s;
}

.status-settings-add:hover {
    color: #666;
    border-color: #999;
}

.status-settings-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    z-index: 100;
}

.status-settings-overlay.open {
    display: block;
}

/* ── Notes Button ── */

.ptask-notes-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    border-radius: 3px;
    transition: color 0.15s;
}

.ptask-notes-btn svg {
    fill: none;
    stroke: currentColor;
}

.ptask-notes-btn:hover {
    color: #4a90d9;
}

.ptask-notes-btn.has-notes {
    color: #999;
}

.ptask-notes-btn.has-notes svg {
    fill: currentColor;
}

/* ── Documents Button ── */

.ptask-docs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    border-radius: 3px;
    transition: color 0.15s;
}

.ptask-docs-btn svg {
    fill: none;
    stroke: currentColor;
}

.ptask-docs-btn:hover {
    color: #4a90d9;
}

.ptask-docs-btn.has-docs {
    color: #999;
}

.ptask-docs-btn.has-docs svg {
    fill: currentColor;
}

/* ── Notes Sidebar Panel ── */

.ptask-notes-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.ptask-notes-overlay.open {
    display: block;
}

.ptask-notes-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #e0e0e0;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
}

.ptask-notes-panel.open {
    right: 0;
}

.ptask-notes-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.ptask-notes-panel-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.ptask-notes-panel-close {
    border: none;
    background: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.ptask-notes-panel-close:hover {
    color: #333;
}

.ptask-notes-panel-add {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.ptask-notes-panel-add textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
    min-height: 60px;
}

.ptask-notes-panel-add textarea:focus {
    border-color: #999;
}

.ptask-notes-panel-add textarea::placeholder {
    color: #bbb;
}

.ptask-notes-add-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 16px;
    background: #333;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s;
}

.ptask-notes-add-btn:hover {
    background: #222;
}

.ptask-notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
}

.ptask-note-card {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.ptask-note-card:last-child {
    border-bottom: none;
}

.ptask-note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ptask-note-date {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ptask-note-delete {
    border: none;
    background: none;
    font-size: 14px;
    color: #ccc;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.ptask-note-card:hover .ptask-note-delete {
    opacity: 1;
}

.ptask-note-delete:hover {
    color: #e53935;
}

.ptask-note-text {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    cursor: pointer;
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background 0.15s;
}

.ptask-note-text:hover:not(.editing) {
    background: #f5f5f5;
}

.ptask-note-text.editing {
    cursor: default;
    padding: 0;
    margin: 0;
    background: none;
}

.ptask-note-edit {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    resize: vertical;
    outline: none;
    min-height: 60px;
    transition: border-color 0.15s;
}

.ptask-note-edit:focus {
    border-color: #999;
}

.ptask-note-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ptask-note-complete-btn {
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.ptask-note-card:hover .ptask-note-complete-btn {
    opacity: 1;
}

.ptask-note-complete-btn.completed {
    opacity: 1;
    color: #2e7d32;
}

.ptask-note-complete-btn:hover {
    color: #2e7d32;
}

.ptask-note-card.note-completed .ptask-note-text {
    text-decoration: line-through;
    color: #aaa;
}

.ptask-note-completed-date {
    font-size: 10px;
    color: #2e7d32;
    margin-top: 4px;
}

.ptask-notes-empty {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 24px 0;
}

@media (max-width: 700px) {
    .ptask-notes-panel {
        width: 100%;
        right: -100%;
    }
}

/* ── Documents Sidebar Panel ── */

.ptask-docs-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.ptask-docs-overlay.open {
    display: block;
}

.ptask-docs-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #e0e0e0;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
}

.ptask-docs-panel.open {
    right: 0;
}

.ptask-docs-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.ptask-docs-panel-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.ptask-docs-panel-close {
    border: none;
    background: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.ptask-docs-panel-close:hover {
    color: #333;
}

.ptask-docs-panel-upload {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.ptask-docs-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    border: 2px dashed #ddd;
    border-radius: 6px;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.ptask-docs-dropzone:hover,
.ptask-docs-dropzone.dragover {
    border-color: #4a90d9;
    background: #f0f7ff;
    color: #4a90d9;
}

.ptask-docs-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
}

.ptask-doc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.ptask-doc-item:last-child {
    border-bottom: none;
}

.ptask-doc-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.ptask-doc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ptask-doc-filename {
    font-size: 13px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background 0.15s;
}

.ptask-doc-filename:hover:not(.editing) {
    background: #f5f5f5;
}

.ptask-doc-rename-input {
    width: 100%;
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    outline: none;
}

.ptask-doc-rename-input:focus {
    border-color: #999;
}

.ptask-doc-size {
    font-size: 11px;
    color: #999;
}

.ptask-doc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ptask-doc-download {
    display: flex;
    align-items: center;
    color: #999;
    transition: color 0.15s;
}

.ptask-doc-download:hover {
    color: #4a90d9;
}

.ptask-doc-delete {
    border: none;
    background: none;
    font-size: 16px;
    color: #ccc;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.ptask-doc-item:hover .ptask-doc-delete {
    opacity: 1;
}

.ptask-doc-delete:hover {
    color: #e53935;
}

.ptask-docs-empty {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 24px 0;
}

@media (max-width: 700px) {
    .ptask-docs-panel {
        width: 100%;
        right: -100%;
    }
}

/* ── Documents Panel Toggle ── */

.ptask-toggle-docs-panel {
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}

.ptask-toggle-docs-panel:hover {
    color: #333;
}

.ptask-toggle-docs-panel.docs-panel-active {
    color: #c2410c;
}

/* ── Header Documents Panel ── */

.docs-header-panel {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    max-height: 400px;
    overflow-y: auto;
    margin: 12px 0 16px 0;
}

.docs-header-toolbar {
    position: sticky;
    top: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    z-index: 1;
}

.docs-header-search-wrap {
    display: flex;
    align-items: center;
    gap: 0;
}

.docs-header-search-toggle {
    border: none;
    background: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.docs-header-search-toggle:hover {
    color: #333;
}

.docs-header-search-input {
    width: 0;
    opacity: 0;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: width 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
}

.docs-header-search-wrap.active .docs-header-search-input {
    width: 200px;
    opacity: 1;
    padding: 4px 8px;
}

.docs-header-search-input:focus {
    border-color: #999;
}

.docs-header-views {
    display: flex;
    align-items: center;
    gap: 4px;
}

.docs-view-btn {
    border: none;
    background: none;
    color: #bbb;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.docs-view-btn:hover {
    color: #666;
}

.docs-view-btn.active {
    color: #333;
    background: #f0f0f0;
}

.docs-header-content {
    padding: 8px 16px;
}

.docs-header-empty {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 24px 0;
}

.docs-header-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.docs-header-table th {
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
}

.docs-header-table td {
    padding: 8px 8px;
    border-bottom: 1px solid #f5f5f5;
    color: #333;
}

.docs-header-table tr:last-child td {
    border-bottom: none;
}

.docs-header-task {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.docs-header-download {
    display: inline-flex;
    align-items: center;
    color: #999;
    transition: color 0.15s;
}

.docs-header-download:hover {
    color: #4a90d9;
}

.docs-header-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 4px 0;
}

.docs-header-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    border: 1px solid #eee;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    transition: border-color 0.15s, background 0.15s;
}

.docs-header-card:hover {
    border-color: #ccc;
    background: #fafafa;
}

.docs-header-card-icon {
    font-size: 28px;
}

.docs-header-card-name {
    font-size: 12px;
    text-align: center;
    word-break: break-all;
    line-height: 1.3;
}

.docs-header-card-task {
    font-size: 10px;
    color: #999;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Select2 wrapper (keeps select + container in one grid cell) ── */

.ptask-select-wrap {
    min-width: 0;
    max-width: 100%;
    position: relative;
}

.ptask-assignee,
.ptask-dependency {
    min-width: 0;
    max-width: 100%;
}

/* ── Project Team Selector ── */

.project-team-selector {
    flex-shrink: 0;
}

.project-team-selector label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #999;
    margin-bottom: 6px;
}

.project-team-selector select {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 13px;
    color: #333;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
}

.project-team-selector select:focus {
    border-color: #999;
}

.project-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-switcher label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #999;
}

.project-switcher select {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 13px;
    color: #333;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
}

.project-switcher select:focus {
    border-color: #999;
}

/* ── Project Deadline Selector ── */

.project-deadline-selector {
    flex-shrink: 0;
}

.project-deadline-selector label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #999;
    margin-bottom: 6px;
}

.project-deadline-selector input[type="date"] {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: transparent;
    font-size: 13px;
    color: #333;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    font-family: inherit;
}

.project-deadline-selector input[type="date"]:focus {
    border-color: #999;
}

.project-deadline-selector input[type="date"]:disabled {
    cursor: default;
    opacity: 0.7;
    background: transparent;
}

/* ── Project List Deadline ── */

.project-link-deadline {
    font-size: 12px;
    color: #999;
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 6px;
    border-radius: 2px;
    outline: none;
    font-family: inherit;
    cursor: pointer;
}

.project-link-deadline:hover {
    border-color: #ddd;
}

.project-link-deadline:focus {
    border-color: #999;
}

.project-link-deadline:disabled {
    cursor: default;
    opacity: 0.7;
}

.project-link-deadline:disabled:hover {
    border-color: transparent;
}

.project-link-overdue {
    color: #d32f2f;
    font-weight: 600;
}

.project-link-owner {
    font-size: 12px;
    color: #999;
}

.project-link-delete {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    color: #ccc;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.project-link-delete:hover {
    color: #d32f2f;
}

/* ── Homepage Team Badge ── */

.project-link-team {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #f0f0f0;
    color: #888;
    padding: 2px 8px;
    border-radius: 2px;
    margin-left: 8px;
    vertical-align: middle;
}

/* ── Teams Page ── */

.teams-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.team-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 0;
}

.team-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
}

.team-name-input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    outline: none;
    min-width: 0;
    transition: border-color 0.15s, background 0.15s;
}

.team-name-input:focus {
    border-color: #999;
    background: #fff;
}

.team-name-input::placeholder {
    color: #bbb;
    font-weight: 400;
}

.team-delete-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    color: #ccc;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.team-card-header:hover .team-delete-btn {
    opacity: 1;
}

.team-delete-btn:hover {
    color: #e53935;
}

.team-members {
    padding: 4px 0;
}

.team-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    border-bottom: 1px solid #f5f5f5;
}

.team-member-row:last-child {
    border-bottom: none;
}

.team-member-name {
    font-size: 13px;
    color: #333;
    flex: 1;
}

.team-member-email {
    display: block;
    font-size: 10px;
    color: #999;
    margin-top: 1px;
}

.team-member-remove {
    border: none;
    background: none;
    cursor: pointer;
    color: #ccc;
    font-size: 14px;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    line-height: 1;
}

.team-member-row:hover .team-member-remove {
    opacity: 1;
}

.team-member-remove:hover {
    color: #e53935;
}

.team-add-member-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-top: 1px solid #eee;
    background: transparent;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    text-align: left;
}

.team-add-member-btn:hover {
    background: #f9f9f9;
    color: #333;
}

.add-member-list {
    max-height: 280px;
    overflow-y: auto;
}

.add-member-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 20px;
    cursor: pointer;
    border-top: 1px solid #f0f0f0;
    transition: background 0.1s;
}

.add-member-item:hover {
    background: #f5f5f5;
}

.add-member-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.add-member-item-email {
    font-size: 11px;
    color: #999;
}

.add-member-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: #999;
}

/* ── Projects Responsive ── */

@media (max-width: 700px) {
    .project-sidebar {
        display: none;
    }

    .projects-wrap {
        padding: 20px 16px;
    }

    .project-details-fields {
        flex-direction: column;
    }

    .project-details-sponsor {
        width: 100%;
    }

    .projects-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ptask-header-row,
    .ptask-row {
        --ptask-columns: 20px 20px 1fr 30px 30px 100px 60px;
    }

    .ptask-deadline,
    .ptask-duration-wrap,
    .ptask-row .ptask-select-wrap,
    .ptask-header-row span:nth-child(4),
    .ptask-header-row span:nth-child(5),
    .ptask-header-row span:nth-child(6),
    .ptask-header-row span:nth-child(7),
    .ptask-header-row span:nth-child(9) {
        display: none;
    }

    .ptask-row[data-depth="1"] .ptask-summary-wrap { padding-left: 20px; }
    .ptask-row[data-depth="2"] .ptask-summary-wrap { padding-left: 40px; }
    .ptask-row[data-depth="3"] .ptask-summary-wrap { padding-left: 60px; }
    .ptask-row[data-depth="4"] .ptask-summary-wrap { padding-left: 80px; }
    .ptask-row[data-depth="5"] .ptask-summary-wrap { padding-left: 100px; }
}

/* ── Teams Responsive ── */

@media (max-width: 500px) {
    .teams-list {
        grid-template-columns: 1fr;
    }
}

/* ── Landing Page ── */

.landing-page {
    background: #fafafa;
}

.landing-container {
    margin: 0 auto;
    padding-left: 80px;
    padding-right: 80px;
}

.landing-br-desktop {
    display: inline;
}

/* Shared section title */

.landing-section-title {
    font-size: 24px;
    font-weight: 300;
    color: #333;
    text-align: center;
    margin-bottom: 48px;
    letter-spacing: -0.01em;
}

/* Nav */

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #e0e0e0;
    background: rgba(255,255,255,0.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.landing-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}

.landing-nav-title {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #888;
    font-style: italic;
    line-height: 1;
}

.landing-nav-title img,
.landing-nav-title .taskfocus-logo {
    height: 26px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.65;
}

.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Buttons */

.landing-cta-btn {
    display: inline-block;
    padding: 10px 24px;
    background: #c4652a;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.02em;
    border: 1px solid #c4652a;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.landing-cta-btn:hover {
    background: #b35520;
    border-color: #b35520;
    box-shadow: 0 2px 8px rgba(196,101,42,0.3);
}

.landing-cta-btn-accent {
    background: #c4652a;
    border-color: #c4652a;
}

.landing-cta-btn-accent:hover {
    background: #b35520;
    border-color: #b35520;
    box-shadow: 0 2px 8px rgba(196,101,42,0.3);
}

.landing-cta-btn-outline {
    display: inline-block;
    padding: 10px 24px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #ddd;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.landing-cta-btn-outline:hover {
    border-color: #999;
    color: #111;
}

/* Hero */

.landing-hero {
    padding: 96px 0 72px;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}

.landing-hero-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #c4652a;
    margin-bottom: 20px;
    padding: 5px 14px;
    background: rgba(196,101,42,0.07);
    border: 1px solid rgba(196,101,42,0.18);
}

.landing-hero-title {
    font-size: 48px;
    font-weight: 300;
    line-height: 1.25;
    color: #333;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}

.landing-hero-subtitle {
    font-size: 17px;
    line-height: 1.65;
    color: #888;
    margin-bottom: 36px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

.landing-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.landing-hero-actions .landing-cta-btn {
    padding: 12px 32px;
    font-size: 14px;
}

.landing-hero-actions .landing-cta-btn-outline {
    padding: 12px 32px;
    font-size: 14px;
}

/* Product mockups */

.landing-product {
    padding: 0 0 80px;
    background: #fafafa;
}

.landing-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.landing-product-window {
    border: 1px solid #d0d0d0;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03);
    overflow: hidden;
    transition: box-shadow 0.15s;
    display: flex;
    flex-direction: column;
}

.landing-product-window:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.04);
}

.landing-product-toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 14px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.landing-product-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
}

.landing-product-dot:first-child { background: #ff6058; }
.landing-product-dot:nth-child(2) { background: #ffbd2e; }
.landing-product-dot:nth-child(3) { background: #28ca42; }

.landing-product-toolbar-title {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.02em;
}

.landing-product-body {
    padding: 16px;
    flex: 1;
}

/* Shared mockup elements */

.landing-product-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    margin-bottom: 10px;
}

.landing-product-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 12px 0;
}

/* Focus areas (weekly planner) */

.landing-product-focus {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    color: #333;
}

.landing-product-focus-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.landing-product-focus-dot--orange { background: #c4652a; }
.landing-product-focus-dot--blue { background: #5a8abf; }
.landing-product-focus-dot--green { background: #5a9a6b; }

.landing-product-focus-name {
    flex: 1;
    font-weight: 500;
}

.landing-product-focus-count {
    font-size: 11px;
    color: #999;
}

/* Tasks (weekly planner) */

.landing-product-task {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f5f5f5;
}

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

.landing-product-checkbox {
    width: 14px;
    height: 14px;
    border: 1.5px solid #ccc;
    flex-shrink: 0;
}

.landing-product-checkbox--done {
    background: #c4652a;
    border-color: #c4652a;
    position: relative;
}

.landing-product-checkbox--done::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 4px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.landing-product-task-text {
    flex: 1;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-product-task--done {
    color: #aaa;
    text-decoration: line-through;
}

.landing-product-tag {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    flex-shrink: 0;
}

.landing-product-tag--orange {
    background: rgba(196,101,42,0.1);
    color: #c4652a;
}

.landing-product-tag--blue {
    background: rgba(90,138,191,0.1);
    color: #5a8abf;
}

.landing-product-tag--green {
    background: rgba(90,154,107,0.1);
    color: #5a9a6b;
}

/* Project board columns */

.landing-product-columns {
    display: flex;
    gap: 10px;
}

.landing-product-column {
    flex: 1;
    min-width: 0;
}

.landing-product-col-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 2px solid #eee;
}

.landing-product-col-count {
    font-weight: 400;
    color: #bbb;
    margin-left: 2px;
}

.landing-product-card {
    background: #fafafa;
    border: 1px solid #eee;
    padding: 8px 10px;
    margin-bottom: 6px;
}

.landing-product-card--active {
    border-left: 2px solid #c4652a;
}

.landing-product-card--done {
    opacity: 0.55;
}

.landing-product-card--muted {
    background: none;
    border: 1px dashed #ddd;
    text-align: center;
}

.landing-product-card--muted .landing-product-card-title {
    color: #bbb;
    font-weight: 400;
}

.landing-product-card-title {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-product-card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #999;
}

.landing-product-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e0e0e0;
    font-size: 8px;
    font-weight: 600;
    color: #666;
}

/* Habits tracker */

.landing-product-habit-grid {
    margin-bottom: 12px;
}

.landing-product-habit-header {
    display: grid;
    grid-template-columns: 1fr repeat(7, 20px);
    gap: 4px;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid #f0f0f0;
}

.landing-product-habit-header span {
    font-size: 10px;
    font-weight: 600;
    color: #bbb;
    text-align: center;
    text-transform: uppercase;
}

.landing-product-habit-row {
    display: grid;
    grid-template-columns: 1fr repeat(7, 20px);
    gap: 4px;
    align-items: center;
    padding: 5px 0;
}

.landing-product-habit-name {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-product-check {
    width: 16px;
    height: 16px;
    border: 1px solid #ddd;
    background: #fff;
}

.landing-product-check.checked {
    background: #c4652a;
    border-color: #c4652a;
}

.landing-product-check--na {
    width: 16px;
    height: 16px;
    background: #f5f5f5;
    border: 1px solid #eee;
}

.landing-product-habit-streak {
    padding: 10px 0 0;
    border-top: 1px solid #f0f0f0;
}

.landing-product-habit-streak-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    margin-bottom: 2px;
}

.landing-product-habit-streak-value {
    font-size: 12px;
    color: #c4652a;
    font-weight: 500;
}

/* Features */

.landing-features {
    padding: 80px 0;
    background: #fff;
    border-top: 1px solid #e0e0e0;
}

.landing-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.landing-feature {
    background: #fafafa;
    border: 1px solid #e8e8e8;
    padding: 28px 24px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.landing-feature:hover {
    border-color: #d0d0d0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.landing-feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196,101,42,0.07);
    color: #c4652a;
}

.landing-feature-text {
    min-width: 0;
}

.landing-feature-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.landing-feature-desc {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
}

/* Stats strip */

.landing-stats {
    background: #333;
    padding: 56px 0;
}

.landing-stats-inner {
    display: flex;
    justify-content: center;
    gap: 80px;
}

.landing-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.landing-stat-value {
    font-size: 28px;
    font-weight: 300;
    color: #fff;
    letter-spacing: -0.01em;
}

.landing-stat-divider {
    font-size: 20px;
    font-weight: 300;
    color: #c4652a;
}

.landing-stat-label {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.02em;
}

/* How it works */

.landing-how {
    padding: 80px 0;
    background: #fafafa;
}

.landing-how-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.landing-how-step {
    text-align: center;
    flex: 1;
    max-width: 300px;
}

.landing-how-connector {
    display: flex;
    align-items: center;
    padding-top: 6px;
    color: #ccc;
    flex-shrink: 0;
}

.landing-how-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #c4652a;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 18px;
}

.landing-how-step-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.landing-how-step-desc {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    padding: 0 8px;
}

/* Demo form */

.landing-demo {
    background: #fff;
    border-top: 1px solid #e0e0e0;
    padding: 80px 0;
}

.landing-demo-inner {
    max-width: 560px;
    margin: 0 auto;
}

.landing-demo-subtitle {
    font-size: 14px;
    color: #888;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 36px;
}

.landing-demo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.landing-demo-field {
    margin-bottom: 16px;
}

.landing-demo-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #333;
    margin-bottom: 6px;
}

.landing-demo-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #999;
}

.landing-demo-field input,
.landing-demo-field textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    background: #fafafa;
    border: 1px solid #ddd;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.landing-demo-field input:focus,
.landing-demo-field textarea:focus {
    border-color: #c4652a;
    box-shadow: 0 0 0 3px rgba(196,101,42,0.1);
}

.landing-demo-field textarea {
    resize: vertical;
    min-height: 72px;
}

.landing-demo-error {
    background: #fef2f2;
    border: 1px solid #e8c4c4;
    color: #993333;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.landing-demo-submit {
    width: 100%;
    text-align: center;
    padding: 12px 24px;
    font-size: 14px;
}

.landing-demo-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.landing-demo-success {
    text-align: center;
    padding: 24px 0;
}

.landing-demo-success-icon {
    color: #c4652a;
    margin-bottom: 16px;
}

.landing-demo-success-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.landing-demo-success-desc {
    font-size: 14px;
    color: #888;
    line-height: 1.7;
}

/* Footer */

.landing-page .site-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 48px 32px;
}

/* ── Landing Responsive: 900px ── */

@media (max-width: 900px) {
    .landing-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-how-grid {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .landing-how-connector {
        transform: rotate(90deg);
    }

    .landing-how-step {
        max-width: 400px;
    }

    .landing-stats-inner {
        gap: 48px;
    }

    .landing-product-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }
}

/* ── Landing Responsive: 600px ── */

@media (max-width: 600px) {
    .landing-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .landing-br-desktop {
        display: none;
    }

    .landing-nav-title img {
        height: 20px;
    }

    .landing-hero {
        padding: 56px 0 48px;
    }

    .landing-hero-title {
        font-size: 32px;
    }

    .landing-hero-subtitle {
        font-size: 15px;
    }

    .landing-hero-actions {
        flex-direction: column;
        gap: 8px;
    }

    .landing-hero-actions .landing-cta-btn,
    .landing-hero-actions .landing-cta-btn-outline {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .landing-product {
        padding: 0 0 48px;
    }

    .landing-features {
        padding: 48px 0;
    }

    .landing-features-grid {
        grid-template-columns: 1fr;
    }

    .landing-feature {
        flex-direction: column;
        gap: 12px;
    }

    .landing-stats {
        padding: 40px 0;
    }

    .landing-stats-inner {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .landing-how {
        padding: 48px 0;
    }

    .landing-how-connector svg {
        width: 28px;
        height: 18px;
    }

    .landing-demo {
        padding: 48px 0;
    }

    .landing-demo-row {
        grid-template-columns: 1fr;
    }

    .landing-page .site-footer {
        padding: 16px 16px 24px;
    }
}

/* ── Audit Log Panel ── */

.audit-log-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.audit-log-overlay.open {
    display: block;
}

.audit-log-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 420px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #e0e0e0;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
}

.audit-log-panel.open {
    right: 0;
}

.audit-log-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.audit-log-panel-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.audit-log-panel-close {
    border: none;
    background: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.audit-log-panel-close:hover {
    color: #333;
}

.audit-log-filter {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.audit-log-filter-select {
    flex: 1;
    min-width: 0;
    font-size: 13px;
}

.audit-log-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
}

.audit-log-entry {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.audit-log-entry:last-child {
    border-bottom: none;
}

.audit-log-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.audit-log-user {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.audit-log-time {
    font-size: 11px;
    color: #aaa;
}

.audit-log-action {
    font-size: 13px;
    color: #555;
}

.audit-log-details {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
    word-break: break-word;
}

.audit-log-loading,
.audit-log-empty {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 24px 0;
}

.ptask-toggle-audit-log {
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    transition: color 0.15s;
}

.ptask-toggle-audit-log:hover {
    color: #333;
}

.ptask-toggle-audit-log.audit-active {
    color: #c2410c;
}

@media (max-width: 700px) {
    .audit-log-panel {
        width: 100%;
        right: -100%;
    }
}

/* ── Team Member Role Selector ── */

/* ── Column Picker Panel ── */

.columns-panel-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.columns-panel-overlay.open {
    display: block;
}

.columns-panel {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #e0e0e0;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
}

.columns-panel.open {
    right: 0;
}

.columns-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.columns-panel-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.columns-panel-close {
    border: none;
    background: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.columns-panel-close:hover {
    color: #333;
}

.columns-panel-list {
    padding: 12px 20px;
}

.columns-panel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.columns-panel-item:last-child {
    border-bottom: none;
}

.columns-panel-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #333;
    cursor: pointer;
    flex-shrink: 0;
}

.ptask-toggle-columns {
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    transition: color 0.15s;
}

.ptask-toggle-columns:hover {
    color: #333;
}

.ptask-toggle-columns.columns-active {
    color: #c2410c;
}

@media (max-width: 700px) {
    .columns-panel {
        width: 100%;
        right: -100%;
    }
}

/* ── Column visibility via CSS custom property grid ── */

.ptask-header-row,
.ptask-row {
    grid-template-columns: var(--ptask-columns, 20px 20px 1fr 30px 30px 120px 50px 120px 100px 120px 100px);
}

.ptask-table.hide-col-notes .ptask-notes-btn,
.ptask-table.hide-col-notes .ptask-header-row span:nth-child(4) {
    overflow: hidden;
    visibility: hidden;
}

.ptask-table.hide-col-documents .ptask-docs-btn,
.ptask-table.hide-col-documents .ptask-header-row span:nth-child(5) {
    overflow: hidden;
    visibility: hidden;
}

.ptask-table.hide-col-deadline .ptask-deadline,
.ptask-table.hide-col-deadline .ptask-header-row span:nth-child(6) {
    overflow: hidden;
    visibility: hidden;
}

.ptask-table.hide-col-days .ptask-duration-wrap,
.ptask-table.hide-col-days .ptask-header-row span:nth-child(7) {
    overflow: hidden;
    visibility: hidden;
}

.ptask-table.hide-col-depends .ptask-dependency,
.ptask-table.hide-col-depends .ptask-row .select2-container.select2-container--default + .select2-container,
.ptask-table.hide-col-depends .ptask-header-row span:nth-child(8) {
    overflow: hidden;
    visibility: hidden;
}

/* Hide the select-wrap that contains .ptask-dependency */
.ptask-table.hide-col-depends .ptask-select-wrap:has(.ptask-dependency) {
    overflow: hidden;
    visibility: hidden;
}

.ptask-table.hide-col-status .ptask-status,
.ptask-table.hide-col-status .ptask-header-row span:nth-child(9) {
    overflow: hidden;
    visibility: hidden;
}

/* Hide the select-wrap that contains .ptask-assignee */
.ptask-table.hide-col-assignee .ptask-select-wrap:has(.ptask-assignee),
.ptask-table.hide-col-assignee .ptask-header-row span:nth-child(10) {
    overflow: hidden;
    visibility: hidden;
}

/* ── Team Member Role Selector ── */

.team-member-role {
    padding: 3px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    font-size: 12px;
    color: #555;
    background: #fafafa;
    cursor: pointer;
    outline: none;
    margin-left: auto;
    margin-right: 8px;
    transition: border-color 0.15s;
}

.team-member-role:hover {
    border-color: #999;
}

.team-member-role:focus {
    border-color: #666;
}

/* ── Backups Page ── */

.backup-settings {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px;
}

.backup-settings-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.backup-setting label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
}

.backup-setting select,
.backup-setting input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.backup-setting select:focus,
.backup-setting input[type="number"]:focus {
    border-color: #999;
    background: #fff;
}

.backup-next-scheduled {
    display: block;
    padding: 8px 0;
    font-size: 13px;
    color: #666;
}

.backups-table {
    background: #fff;
    border: 1px solid #e0e0e0;
}

.backups-header-row {
    display: grid;
    grid-template-columns: 1fr 120px 80px 110px;
    gap: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
}

.backups-header-row span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
}

.backups-row {
    display: grid;
    grid-template-columns: 1fr 120px 80px 110px;
    gap: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}

.backups-row:last-child {
    border-bottom: none;
}

.backup-date {
    font-size: 13px;
    color: #333;
}

.backup-created-by {
    font-size: 13px;
    color: #666;
}

.backup-size {
    font-size: 13px;
    color: #888;
}

.backup-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.backup-download-btn,
.backup-restore-btn,
.backup-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 2px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.backup-download-btn {
    color: #666;
}

.backup-download-btn:hover {
    border-color: #999;
    color: #333;
}

.backup-restore-btn {
    color: #b45309;
}

.backup-restore-btn:hover {
    border-color: #b45309;
    background: #fffbeb;
}

.backup-delete-btn {
    color: #b91c1c;
}

.backup-delete-btn:hover {
    border-color: #b91c1c;
    background: #fef2f2;
}

.backup-download-btn:disabled,
.backup-restore-btn:disabled,
.backup-delete-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.selective-import-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-orange);
    margin: 12px 0 6px;
}

.selective-import-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
}

.selective-import-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-input, #fff);
    cursor: default;
}

.selective-import-item-name {
    flex: 1;
    color: var(--text-primary, #1a1a1a);
}

.selective-import-item-btn {
    background: none;
    border: 1px solid var(--accent-orange, #c2410c);
    color: var(--accent-orange, #c2410c);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.selective-import-item-btn:hover {
    background: var(--accent-orange, #c2410c);
    color: #fff;
}

.selective-import-item-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Restore confirmation modal */

.backup-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.backup-modal {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 32px;
    max-width: 480px;
    width: 90%;
}

.backup-modal h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.backup-modal p {
    font-size: 13px;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.6;
}

.backup-modal-warning {
    color: #b91c1c;
    font-weight: 600;
}

.backup-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.backup-modal-confirm {
    padding: 8px 20px;
    background: #b45309;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.backup-modal-confirm:hover {
    background: #92400e;
}

.backup-modal-confirm:disabled {
    opacity: 0.5;
    cursor: default;
}

.backup-modal-cancel {
    padding: 8px 20px;
    background: none;
    color: #999;
    border: 1px solid #ddd;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.backup-modal-cancel:hover {
    border-color: #999;
    color: #333;
}

@media (max-width: 600px) {
    .backup-settings-row {
        grid-template-columns: 1fr;
    }

    .backups-header-row,
    .backups-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .backups-header-row {
        display: none;
    }
}

/* ── Settings Page ── */

.settings-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 24px;
}

.settings-row {
    margin-bottom: 20px;
}

.settings-row:last-child {
    margin-bottom: 0;
}

.settings-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.settings-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #666;
    margin-bottom: 6px;
}

.settings-field input[type="text"],
.settings-field input[type="password"],
.settings-field input[type="url"],
.settings-field input[type="number"],
.settings-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
    border-radius: 0;
}

.settings-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
}

.settings-field input[type="text"]:focus,
.settings-field input[type="password"]:focus,
.settings-field input[type="url"]:focus,
.settings-field input[type="number"]:focus,
.settings-field select:focus {
    border-color: #999;
    background-color: #fff;
    outline: none;
}

.settings-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}

.settings-field textarea:focus {
    border-color: #999;
    background: #fff;
    outline: none;
}

.settings-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.settings-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.settings-toggle-label {
    color: #666;
}

.settings-code {
    display: block;
    padding: 8px 10px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    font-size: 12px;
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    color: #555;
    word-break: break-all;
    user-select: all;
}

.settings-guide {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}

.settings-guide ol {
    margin: 0;
    padding-left: 20px;
}

.settings-guide li {
    margin-bottom: 6px;
}

.settings-guide code {
    background: #f0f0f0;
    padding: 1px 5px;
    font-size: 12px;
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
}

@media (max-width: 600px) {
    .settings-row-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Quick-Add FAB + Bar ── */

.quick-add-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #c2410c;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(194, 65, 12, 0.35);
    z-index: 200;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.quick-add-fab:hover {
    background: #9a3412;
    box-shadow: 0 6px 20px rgba(194, 65, 12, 0.45);
    transform: scale(1.05);
}

.quick-add-fab.open {
    background: #555;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: rotate(45deg);
}

.quick-add-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);
    z-index: 198;
}

.quick-add-overlay.open {
    display: block;
}

.quick-add-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
    z-index: 199;
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

.quick-add-bar.open {
    transform: translateY(0);
}

.quick-add-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.quick-add-title {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    min-width: 0;
    transition: border-color 0.15s;
}

.quick-add-title:focus {
    border-color: #2563eb;
}

.quick-add-title::placeholder {
    color: #bbb;
}

.quick-add-deadline {
    padding: 9px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #555;
    outline: none;
    transition: border-color 0.15s;
    cursor: pointer;
}

.quick-add-deadline:focus {
    border-color: #2563eb;
}

.quick-add-project {
    padding: 9px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #555;
    outline: none;
    max-width: 200px;
    transition: border-color 0.15s;
    cursor: pointer;
}

.quick-add-project:focus {
    border-color: #2563eb;
}

.quick-add-submit {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: #c2410c;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s;
}

.quick-add-submit:hover {
    background: #9a3412;
}

.quick-add-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.quick-add-close {
    border: none;
    background: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s;
}

.quick-add-close:hover {
    color: #333;
}

@media (max-width: 700px) {
    .quick-add-form {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
    }

    .quick-add-title {
        width: 100%;
        flex: none;
    }

    .quick-add-deadline,
    .quick-add-project {
        flex: 1;
        max-width: none;
    }

    .quick-add-fab {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }

    .quick-add-menu {
        bottom: 76px;
        right: 20px;
    }
}

/* ── Workspace Switcher ── */

.workspace-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 0 14px;
    margin-bottom: 16px;
    overflow-x: auto;
    border-bottom: 1px solid #f0f0f0;
}

.workspace-pill {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.workspace-pill:hover {
    border-color: #bbb;
    color: #333;
}

.workspace-pill.active {
    background: var(--ws-color, #c2410c);
    color: #fff;
    border-color: var(--ws-color, #c2410c);
}

.workspace-add-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px dashed #ccc;
    background: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.workspace-add-btn:hover {
    border-color: #999;
    color: #333;
}

.workspace-manage-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: none;
    color: #bbb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}

.workspace-manage-btn:hover {
    color: #333;
    border-color: #ddd;
}

/* ── Workspace Manage Modal ── */

.ws-manage-modal .tt-modal-body {
    padding: 8px 0;
    max-height: 400px;
    overflow-y: auto;
}

.ws-manage-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.ws-manage-row:last-child {
    border-bottom: none;
}

.ws-manage-colors {
    flex-shrink: 0;
}

.ws-manage-colors .quick-add-color-swatch {
    width: 18px;
    height: 18px;
}

.ws-manage-name {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    min-width: 0;
}

.ws-manage-name:focus {
    border-color: #999;
}

.ws-manage-delete {
    border: none;
    background: none;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
}

.ws-manage-delete:hover {
    color: #e53935;
}

/* ── Quick-Add Popup Menu ── */

.quick-add-menu {
    position: fixed;
    bottom: 88px;
    right: 28px;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 201;
}

.quick-add-menu.open {
    display: flex;
}

.quick-add-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 24px;
    border: none;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    white-space: nowrap;
    transition: background 0.15s;
}

.quick-add-menu-item:hover {
    background: #f5f5f5;
}

.quick-add-menu-item svg {
    width: 16px;
    height: 16px;
    color: #c2410c;
    flex-shrink: 0;
}

/* ── Color Swatches ── */

.quick-add-color-picker {
    display: flex;
    gap: 6px;
    align-items: center;
}

.quick-add-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.1s;
    padding: 0;
}

.quick-add-color-swatch:hover {
    transform: scale(1.15);
}

.quick-add-color-swatch.selected {
    border-color: #333;
}

/* ── Group Workspace Dot ── */

.group-workspace-btn {
    position: absolute;
    top: 50%;
    right: 42px;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.5;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
}

.group-header:hover .group-workspace-btn {
    opacity: 1;
}

.ws-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ws-color, #ddd);
}

/* ── Workspace Menu (group assignment) ── */
.group-ws-label {
    font-size: 10px;
    color: #999;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}
.group-ws-label:empty {
    display: none;
}
.group-workspace-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
[data-theme="dark"] .group-ws-label {
    color: #777;
}
.group-ws-menu {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    min-width: 160px;
    padding: 4px 0;
}
.group-ws-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: background 0.15s;
    text-transform: capitalize;
}
.group-ws-menu-item:hover {
    background: #f5f5f5;
}
.group-ws-menu-item.active {
    font-weight: 600;
}
[data-theme="dark"] .group-ws-menu {
    background: var(--bg-card, #1e1e1e);
    border-color: var(--border-input, #333);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
[data-theme="dark"] .group-ws-menu-item {
    color: var(--text-primary, #ccc);
}
[data-theme="dark"] .group-ws-menu-item:hover {
    background: rgba(255,255,255,0.05);
}

/* ── Workspace Add Popover (switcher) ── */

.ws-add-popover {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 200px;
}

.ws-add-name {
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.ws-add-name:focus {
    border-color: #999;
}

.ws-add-confirm {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: #c2410c;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s;
    align-self: flex-end;
}

.ws-add-confirm:hover {
    background: #9a3412;
}

@media (max-width: 700px) {
    .workspace-switcher {
        padding: 0 0 10px;
        margin-bottom: 10px;
        gap: 6px;
    }

    .workspace-pill {
        padding: 5px 12px;
        font-size: 11px;
    }
}

/* ── Sidebar Folders ── */

.sidebar-folder {
    border-bottom: 1px solid #f0f0f0;
}

.sidebar-folder:first-of-type {
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
}

.sidebar-folder-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px 8px 10px;
    cursor: default;
    position: relative;
}

.sidebar-folder-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    color: #aaa;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}

.sidebar-folder-toggle:hover {
    color: #555;
}

.sidebar-folder-chevron {
    transition: transform 0.15s ease;
    transform: rotate(90deg);
}

.sidebar-folder.collapsed .sidebar-folder-chevron {
    transform: rotate(0deg);
}

.sidebar-folder-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.sidebar-folder-name-input {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 1px 4px;
    outline: none;
    background: #fff;
}

.sidebar-folder-name-input:focus {
    border-color: #999;
}

.sidebar-folder-count {
    font-size: 10px;
    color: #bbb;
    flex-shrink: 0;
    min-width: 14px;
    text-align: center;
}

.sidebar-folder-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}

.sidebar-folder-header:hover .sidebar-folder-delete {
    opacity: 1;
}

.sidebar-folder-delete:hover {
    color: #dc2626;
}

.sidebar-folder-items {
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.sidebar-folder.collapsed .sidebar-folder-items {
    display: none;
}

.sidebar-folder-items .project-sidebar-item {
    padding-left: 30px;
}

/* Drag & drop states */
.sidebar-dragging {
    opacity: 0.4;
}

.sidebar-folder-dragover {
    background: #f0f4ff;
    outline: 2px dashed #93b4f5;
    outline-offset: -2px;
    border-radius: 4px;
}

.sidebar-section-dragover {
    background: #f0f4ff;
    outline: 2px dashed #93b4f5;
    outline-offset: -2px;
    border-radius: 2px;
}

/* (old add-folder-wrap and new-project button styles removed — replaced by sidebar-actions icons and modals) */

.project-sidebar.collapsed .sidebar-folder {
    display: none;
}

/* ── Sidebar Action Icons ── */

.sidebar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.sidebar-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: #888;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.sidebar-action-btn:hover {
    color: #333;
    background: #f0f0f0;
}

.project-sidebar.collapsed .sidebar-actions {
    display: none;
}

/* ── Modals ── */

.tt-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
}

.tt-modal-overlay.open {
    display: block;
}

.tt-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: 90vw;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 1001;
}

.tt-modal.open {
    display: block;
}

.tt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #eee;
}

.tt-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.tt-modal-close {
    border: none;
    background: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.tt-modal-close:hover {
    color: #333;
}

.tt-modal-body {
    padding: 16px 20px;
}

.tt-modal-body label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.tt-modal-body select,
.tt-modal-body input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.tt-modal-body select:focus,
.tt-modal-body input[type="text"]:focus {
    border-color: #999;
}

/* Info modal (replaces window.alert) */
.tt-info-modal {
    width: 420px;
    max-width: 92vw;
}

.tt-info-modal-message {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: #444;
    white-space: pre-wrap;
}

.tt-info-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.tt-info-modal-ok {
    border: 1px solid #333;
    background: #333;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.tt-info-modal-ok:hover {
    background: #111;
    border-color: #111;
}

.tt-info-modal-ok:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .tt-info-modal {
    background: var(--bg-card, #1a1a1a);
    color: var(--text-primary, #e0e0e0);
}

[data-theme="dark"] .tt-info-modal .tt-modal-header {
    border-bottom-color: #333;
}

[data-theme="dark"] .tt-info-modal .tt-modal-header h3 {
    color: var(--text-primary, #f0f0f0);
}

[data-theme="dark"] .tt-info-modal-message {
    color: var(--text-secondary, #bbb);
}

[data-theme="dark"] .tt-info-modal-ok {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #1e1e1e;
}

[data-theme="dark"] .tt-info-modal-ok:hover {
    background: #fff;
    border-color: #fff;
}

/* Select2 inside modal */
.tt-modal .select2-container--default .select2-selection--single {
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 36px;
    background: #fff;
}

.tt-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px;
    color: #333;
    line-height: 34px;
    padding-left: 10px;
}

.tt-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}

.tt-modal .select2-container--default .select2-selection--single .select2-selection__clear {
    font-size: 16px;
    margin-right: 4px;
    color: #bbb;
}

.tt-modal .select2-container--default.select2-container--open .select2-selection--single,
.tt-modal .select2-container--default .select2-selection--single:hover {
    border-color: #999;
}

.tt-modal .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999;
}

.tt-modal-footer {
    padding: 12px 20px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.tt-modal-btn {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.tt-modal-btn-primary {
    background: #c2410c;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tt-modal-btn-primary:hover {
    background: #9a3412;
}

.tt-modal-btn-primary:disabled {
    opacity: 0.5;
    cursor: default;
}

.tt-modal-btn-danger {
    background: #dc2626;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tt-modal-btn-danger:hover {
    background: #b91c1c;
}

.tt-modal-btn-danger:disabled {
    opacity: 0.5;
    cursor: default;
}

.tt-modal-btn-cancel {
    background: #f5f5f5;
    color: #555;
}

.tt-modal-btn-cancel:hover {
    background: #e8e8e8;
}

.tt-modal-btn-danger {
    background: #dc2626;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tt-modal-btn-danger:hover {
    background: #b91c1c;
}

/* ── Folder Manager (projects list page) ── */

/* ── Folder tiles ── */

.folder-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.folder-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.folder-tile:hover {
    border-color: #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.folder-tile-icon {
    color: #c2410c;
    flex-shrink: 0;
}

.folder-tile-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-align: center;
    word-break: break-word;
}

.folder-tile-count {
    font-size: 11px;
    color: #999;
    margin-top: auto;
}

.folder-tile-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.folder-tile:hover .folder-tile-delete {
    opacity: 1;
}

.folder-tile-delete:hover {
    color: #dc2626;
}

.folder-tile-name-input {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 6px;
    outline: none;
    width: 120px;
    color: #333;
}

.folder-tile-name-input:focus {
    border-color: #999;
}

.folder-tile-uncategorized .folder-tile-icon {
    color: #999;
}

.folder-tile-add {
    border-style: dashed;
    border-color: #ddd;
    background: #fafafa;
}

.folder-tile-add:hover {
    border-color: #bbb;
    background: #f5f5f5;
}

.folder-tile-add .folder-tile-icon {
    color: #bbb;
}

.folder-tile-add .folder-tile-name {
    color: #999;
    font-weight: 500;
}

.folder-tile .folder-drag-handle {
    position: absolute;
    top: 8px;
    left: 8px;
}

.folder-list-row .folder-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.folder-drag-handle {
    color: #ccc;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
}

.folder-tile:hover .folder-drag-handle,
.folder-list-row:hover .folder-drag-handle {
    opacity: 1;
}

.folder-drag-handle:active {
    cursor: grabbing;
}

.folder-tile.sortable-ghost {
    opacity: 0.4;
}

.folder-tile.sortable-fallback {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 1 !important;
}

.folder-list-row.sortable-ghost {
    background: #f0f4ff;
    opacity: 0.5;
}

.folder-list-row.sortable-fallback {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    opacity: 1 !important;
}

/* ── Folder project view ── */

.folder-project-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.folder-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.folder-back-btn:hover {
    border-color: #ccc;
    color: #333;
}

.folder-project-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.folder-empty-message {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 40px 0;
}

/* ── Folder view toggle ── */

.folder-view-toggle {
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.folder-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: none;
    background: #fff;
    color: #999;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.folder-view-btn:not(:last-child) {
    border-right: 1px solid #e0e0e0;
}

.folder-view-btn.active {
    background: #f5f5f5;
    color: #333;
}

.folder-view-btn:hover:not(.active) {
    background: #fafafa;
    color: #555;
}

/* ── Folder list view ── */

.folder-list {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.folder-list-row {
    display: grid;
    grid-template-columns: 16px 18px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
}

.folder-list-row:last-child {
    border-bottom: none;
}

.folder-list-row:hover {
    background: #f9f9f9;
}

.folder-list-icon {
    color: #c2410c;
    flex-shrink: 0;
}

.folder-list-uncategorized .folder-list-icon {
    color: #999;
}

.folder-list-add {
    border-top: 1px dashed #e0e0e0;
}

.folder-list-add .folder-list-icon {
    color: #bbb;
}

.folder-list-add .folder-list-name {
    color: #999;
}

.folder-list-name {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.folder-list-count {
    font-size: 12px;
    color: #999;
}

.folder-list-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.folder-list-row:hover .folder-list-delete {
    opacity: 1;
}

.folder-list-delete:hover {
    color: #dc2626;
}

.folder-list-name-input {
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 6px;
    outline: none;
    width: 200px;
    color: #333;
}

.folder-list-name-input:focus {
    border-color: #999;
}

/* ── Project link folder select ── */

.project-link-folder {
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    background: #fff;
    color: #555;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}

.project-link-folder:focus {
    border-color: #999;
}

.project-list.hide-folder-col .project-list-header,
.project-list.hide-folder-col .project-link {
    grid-template-columns: 20px 1fr auto auto auto auto auto;
}

.project-list.hide-folder-col .project-col-folder {
    display: none;
}

/* ── Project Status Select (header dropdown) ── */

.project-status-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.03em;
    padding: 3px 22px 3px 10px;
    border-radius: 10px;
    border: none;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--status-color, #999);
    background: color-mix(in srgb, var(--status-color, #999) 12%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='%23888' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0.5L4 4L7.5 0.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: box-shadow 0.15s;
}

.project-status-select:hover {
    box-shadow: 0 0 0 1px var(--status-color, #999);
}

.project-status-select:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-color, #999) 40%, transparent);
}

.project-status-select:disabled {
    opacity: 0.7;
    cursor: default;
}

/* ── Project Status on list view ── */

.project-link-status {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
    text-align: center;
}

/* ── Sidebar Status Dot ── */

.sidebar-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 8px;
    vertical-align: middle;
}

/* ── Settings cog link in header ── */

.ptask-settings-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    color: #999;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.ptask-settings-link:hover {
    background: #f0f0f0;
    color: #333;
}

/* ── Project Settings Page ── */

.project-settings-wrap {
    max-width: none;
}

.settings-sections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.settings-section-danger {
    grid-column: 1 / -1;
}

@media (max-width: 1100px) {
    .settings-sections {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .settings-sections {
        grid-template-columns: 1fr;
    }
}

.settings-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
}

.settings-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.settings-section-desc {
    font-size: 13px;
    color: #888;
    margin-top: -8px;
    margin-bottom: 16px;
}

.settings-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-field label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.settings-input,
.settings-select,
.settings-textarea {
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fafafa;
    color: #333;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.settings-input:focus,
.settings-select:focus,
.settings-textarea:focus {
    border-color: #999;
    background: #fff;
}

.settings-textarea {
    resize: vertical;
    min-height: 80px;
}

/* ── Task Statuses in Settings ── */

.settings-statuses-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.settings-status-row {
    display: grid;
    grid-template-columns: 36px 1fr auto 28px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
}

.settings-status-color {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
    background: none;
}

.settings-status-label {
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    outline: none;
}

.settings-status-label:focus {
    border-color: #999;
}

.settings-status-slug {
    font-size: 11px;
    color: #aaa;
    font-family: monospace;
}

.settings-status-delete {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.settings-status-delete:hover {
    color: #dc2626;
    background: #fef2f2;
}

.settings-status-add {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    font-family: inherit;
    border: 1px dashed #ccc;
    background: none;
    color: #888;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.settings-status-add:hover {
    border-color: #999;
    color: #555;
}

/* ── Danger Zone ── */

.settings-section-danger {
    border-color: #fecaca;
}

.settings-section-danger .settings-section-title {
    color: #dc2626;
    border-bottom-color: #fecaca;
}

.settings-field-danger {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
}

.settings-field-danger strong {
    font-size: 14px;
    color: #333;
}

.settings-field-hint {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.settings-danger-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    border: 1px solid #dc2626;
    background: #fff;
    color: #dc2626;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.settings-danger-btn:hover {
    background: #dc2626;
    color: #fff;
}

/* ── Project Templates ── */

.templates-btn {
    background: none;
    border: 1px solid #ddd;
    color: #555;
}

.templates-btn:hover {
    border-color: #bbb;
    color: #333;
}

/* Templates Management Modal */

.template-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
}

.template-row:hover {
    background: #fafafa;
}

.template-row:last-child {
    border-bottom: none;
}

.template-row-name {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-row-count {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}

.template-row-edit {
    padding: 4px 12px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
    transition: border-color 0.15s, color 0.15s;
}

.template-row-edit:hover {
    border-color: #999;
    color: #333;
}

.template-row-delete {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.template-row-delete:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* Template Editor */

.template-editor-title {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    padding: 0;
    background: transparent;
    min-width: 0;
}

.template-editor-title:focus {
    border-bottom: 2px solid #2563eb;
}

.template-task-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid #f5f5f5;
}

.template-task-row:hover .template-task-indent,
.template-task-row:hover .template-task-add-child,
.template-task-row:hover .template-task-delete {
    opacity: 1;
}

.template-task-drag {
    color: #ccc;
    font-size: 12px;
    cursor: grab;
    user-select: none;
    letter-spacing: -2px;
    padding-right: 4px;
}

.template-task-summary {
    flex: 1;
    border: 1px solid transparent;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    padding: 6px 8px;
    border-radius: 4px;
    background: transparent;
    min-width: 0;
}

.template-task-summary:focus {
    border-color: #ddd;
    background: #fff;
}

.template-task-indent,
.template-task-add-child,
.template-task-delete {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    color: #999;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.template-task-indent:hover {
    background: #f0f0f0;
    color: #555;
}

.template-task-add-child:hover {
    background: #eff6ff;
    color: #2563eb;
}

.template-task-delete:hover {
    background: #fef2f2;
    color: #dc2626;
}

.template-add-task-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 12px auto;
    padding: 10px;
    font-size: 13px;
    font-family: inherit;
    color: #888;
    background: none;
    border: 2px dashed #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.template-add-task-btn:hover {
    border-color: #bbb;
    color: #555;
}

/* Save as Template button (detail view) */

.ptask-delete-all-tasks,
.ptask-csv-import,
.ptask-save-template {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s;
}

.ptask-csv-import:hover,
.ptask-save-template:hover {
    color: #333;
}

.ptask-delete-all-tasks:hover {
    color: #dc2626;
}

/* ── CSV Import ── */

.folder-import-csv-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.folder-import-csv-btn:hover {
    border-color: #ccc;
    color: #333;
}

.csv-import-modal {
    width: 1360px;
}

.csv-import-modal .tt-modal-header {
    gap: 12px;
}

.csv-import-steps {
    display: flex;
    gap: 4px;
    margin-left: auto;
    margin-right: 12px;
}

.csv-step {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    color: #999;
    background: #f5f5f5;
    transition: background 0.15s, color 0.15s;
}

.csv-step.active {
    background: #fff3e0;
    color: #c2410c;
}

.csv-step.completed {
    background: #e8f5e9;
    color: #2e7d32;
}

.csv-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

.csv-drop-zone p {
    margin: 0;
    font-size: 14px;
    color: #888;
}

.csv-drop-zone-or {
    font-size: 12px;
    color: #bbb;
}

.csv-drop-zone.drag-over {
    border-color: #c2410c;
    background: #fff8f5;
}

.csv-browse-btn {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: border-color 0.15s;
}

.csv-browse-btn:hover {
    border-color: #bbb;
}

.csv-file-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-top: 12px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
}

.csv-file-remove {
    border: none;
    background: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.csv-file-remove:hover {
    color: #c2410c;
}

.csv-preview-table-scroll {
    max-height: 200px;
    overflow: auto;
    margin-top: 12px;
    border: 1px solid #eee;
    border-radius: 6px;
}

.csv-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.csv-preview-table th {
    position: sticky;
    top: 0;
    background: #f5f5f5;
    font-weight: 600;
    color: #555;
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
}

.csv-preview-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #f0f0f0;
    color: #666;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csv-multi-select {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.tt-modal-body label.csv-checkbox-label,
.csv-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 400;
    color: #555;
    text-transform: none;
    letter-spacing: normal;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 0;
    transition: background 0.15s, border-color 0.15s;
}

.csv-checkbox-label:hover {
    background: #f0f0f0;
    border-color: #ddd;
}

.csv-checkbox-label input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

.csv-import-target-toggle {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}

.tt-modal-body label.csv-radio-label,
.csv-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #555;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    margin-bottom: 0;
}

.csv-radio-label input[type="radio"] {
    margin: 0;
}

.csv-field-hint {
    font-size: 11px;
    color: #999;
    margin: -2px 0 6px 0;
}

.csv-step-panel .tt-modal-label {
    margin-bottom: 6px;
}

.csv-confirm-item {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #555;
}

.csv-confirm-item:last-child {
    border-bottom: none;
}

.csv-confirm-item strong {
    color: #333;
}

/* ── Stats Panel ── */

.ptask-toggle-stats {
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    transition: color 0.15s;
}

.ptask-toggle-stats:hover {
    color: #333;
}

.ptask-toggle-stats.stats-active {
    color: #c2410c;
}

.stats-panel {
    position: fixed;
    top: 0;
    right: -540px;
    width: 540px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #e0e0e0;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
}

.stats-panel.open {
    right: 0;
}

.stats-panel-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1099;
}

.stats-panel-overlay.open {
    display: block;
}

.stats-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.stats-panel-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.stats-panel-close {
    border: none;
    background: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.stats-panel-close:hover {
    color: #333;
}

.stats-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.stats-loading {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 40px 0;
}

.stats-period-wrap {
    margin-bottom: 16px;
}

.stats-period-select {
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

.stats-period-select:hover {
    border-color: #bbb;
}

.stats-period-select:focus {
    border-color: #6c5ce7;
}

/* Stat cards grid */
.stats-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.stats-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
}

.stats-card-label {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stats-card-value {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.stats-card-sub {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

/* Chart sections */
.stats-chart-section {
    margin-bottom: 24px;
}

.stats-chart-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
}

.stats-chart-container {
    min-height: 220px;
}

/* Duration cards */
.stats-duration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
}

.stats-duration-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}

.stats-duration-label {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stats-duration-value {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.stats-duration-unit {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

/* User leaderboards */
.stats-leaderboard {
    margin-bottom: 24px;
}

.stats-leaderboard-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
}

.stats-leaderboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}

.stats-leaderboard-item:last-child {
    border-bottom: none;
}

.stats-leaderboard-rank {
    font-size: 12px;
    font-weight: 600;
    color: #bbb;
    width: 24px;
    flex-shrink: 0;
}

.stats-leaderboard-name {
    font-size: 13px;
    color: #333;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-leaderboard-count {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #6c757d;
    border-radius: 10px;
    padding: 2px 8px;
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* Team members list */
.stats-team-section {
    margin-bottom: 24px;
}

.stats-team-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
}

.stats-team-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}

.stats-team-item:last-child {
    border-bottom: none;
}

.stats-team-name {
    font-size: 13px;
    color: #333;
}

.stats-team-role {
    font-size: 11px;
    color: #999;
    text-transform: capitalize;
}

.stats-empty {
    text-align: center;
    color: #ccc;
    font-size: 12px;
    padding: 12px 0;
}

@media (max-width: 700px) {
    .stats-panel {
        width: 100%;
        right: -100%;
    }

    .stats-cards-grid {
        grid-template-columns: 1fr;
    }

    .stats-duration-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Help Centre ── */

.help-content {
    max-width: 1100px;
    margin: 0 auto;
}

.help-content:has(.help-layout) {
    max-width: none;
}

.help-search-wrap {
    margin-bottom: 28px;
}

.help-search-field {
    position: relative;
    max-width: 480px;
}

.help-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

.help-search-field input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.help-search-field input:focus {
    outline: none;
    border-color: #333;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.help-card {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.help-card:hover {
    border-color: #ccc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.help-card-icon {
    color: #555;
    margin-bottom: 12px;
}

.help-card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #222;
}

.help-card-desc {
    font-size: 13px;
    color: #777;
    margin: 0;
    line-height: 1.5;
}

.help-no-results {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}

/* Single article layout: sidebar + main */

.help-layout {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 120px);
}

.help-sidebar {
    width: 260px;
    min-width: 260px;
    border-right: 1px solid #eee;
    padding: 0 0 32px;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
    position: sticky;
    top: 0;
}

.help-sidebar-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    font-weight: 600;
    padding: 4px 20px 10px;
}

.help-sidebar-nav {
    display: flex;
    flex-direction: column;
}

.help-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.help-sidebar-link:hover {
    background: #f8f8f8;
    color: #222;
}

.help-sidebar-link.active {
    background: #f5f5f5;
    color: #222;
    font-weight: 600;
    border-left-color: #333;
}

.help-sidebar-icon {
    flex-shrink: 0;
    color: #999;
    display: flex;
    align-items: center;
}

.help-sidebar-icon svg {
    width: 16px;
    height: 16px;
}

.help-sidebar-link.active .help-sidebar-icon {
    color: #555;
}

.help-main {
    flex: 1;
    min-width: 0;
    padding: 0 0 40px 40px;
}

.help-breadcrumb {
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-breadcrumb a {
    color: #555;
    text-decoration: none;
}

.help-breadcrumb a:hover {
    color: #222;
    text-decoration: underline;
}

.help-article-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 32px 30px;
}

.help-article-icon {
    color: #555;
    margin-bottom: 8px;
}

.help-article-body h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 16px;
    color: #222;
}

.help-article-body h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 28px 0 10px;
    color: #333;
}

.help-article-body h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 22px 0 8px;
    color: #444;
}

.help-article-body p {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin: 0 0 14px;
}

.help-article-body ul,
.help-article-body ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.help-article-body li {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 4px;
}

.help-article-body code {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
    color: #c7254e;
}

.help-article-body a {
    color: #2563eb;
    text-decoration: none;
}

.help-article-body a:hover {
    text-decoration: underline;
}

.help-article-body strong {
    font-weight: 600;
    color: #333;
}

/* Related articles */

.help-related {
    margin-top: 28px;
}

.help-related-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    font-weight: 500;
    margin: 0 0 12px;
}

.help-related-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.help-card.help-card-small {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}

.help-card.help-card-small .help-card-icon {
    margin-bottom: 0;
}

.help-card.help-card-small .help-card-title {
    font-size: 13px;
    margin: 0;
}

/* Sidebar help link */

.project-sidebar-help {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-top: 8px;
    border-top: 1px solid #eee;
    color: #888;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s;
}

.project-sidebar-help:hover {
    color: #333;
}

.project-sidebar.collapsed .project-sidebar-help {
    padding: 12px 0;
    justify-content: center;
    border-top: none;
}

.project-sidebar.collapsed .project-sidebar-help span {
    display: none;
}

@media (max-width: 800px) {
    .help-layout {
        flex-direction: column;
    }

    .help-sidebar {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid #eee;
        max-height: none;
        position: static;
        padding-bottom: 16px;
    }

    .help-main {
        padding: 20px 0 40px;
    }
}

@media (max-width: 600px) {
    .help-grid {
        grid-template-columns: 1fr;
    }

    .help-article-card {
        padding: 20px 18px;
    }
}

/* ── PDF Export ── */

.pdf-layout-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdf-column-checks {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pdf-render {
    position: fixed;
    left: -9999px;
    top: 0;
    z-index: -1;
}

/* ── Projects Drawer ── */

.projects-drawer-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.projects-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.projects-drawer {
    position: fixed;
    top: 0;
    left: -340px;
    width: 320px;
    height: 100%;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: 1101;
    display: flex;
    flex-direction: column;
    transition: left 0.25s ease;
}

.projects-drawer.open {
    left: 0;
}

.projects-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border-color);
}

.projects-drawer-header h3 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.projects-drawer-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.projects-drawer-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.projects-drawer-search {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-light);
}

.projects-drawer-search input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    font-size: 13px;
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s;
}

.projects-drawer-search input:focus {
    border-color: var(--accent-blue);
}

.projects-drawer-search input::placeholder {
    color: var(--text-placeholder);
}

.projects-drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.drawer-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-orange);
    padding: 8px 16px 4px;
}

.drawer-section-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 16px;
}

.drawer-folder {
    margin-bottom: 2px;
}

.drawer-folder-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 16px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    text-align: left;
}

.drawer-folder-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.drawer-folder-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.drawer-folder.collapsed .drawer-folder-chevron {
    transform: rotate(0deg);
}

.drawer-folder:not(.collapsed) .drawer-folder-chevron {
    transform: rotate(90deg);
}

.drawer-folder-icon {
    flex-shrink: 0;
}

.drawer-folder-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

.drawer-folder-items {
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.2s ease;
}

.drawer-folder.collapsed .drawer-folder-items {
    max-height: 0;
}

.drawer-project-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 38px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 13px;
    transition: background 0.15s;
}

.drawer-project-link:hover {
    background: var(--bg-hover);
}

.drawer-project-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.drawer-project-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-project-count {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.projects-drawer-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}

.drawer-view-all {
    display: block;
    text-align: center;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    text-decoration: none;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.drawer-view-all:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: var(--bg-hover);
}

@media (max-width: 600px) {
    .projects-drawer {
        width: 280px;
        left: -300px;
    }
}

/* ── Dark Mode Overrides ── */

[data-theme="dark"] body {
    background: var(--bg-body);
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard-header {
    background: var(--bg-header);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .dashboard-wrap {
    color: var(--text-primary);
}

[data-theme="dark"] .workspace-pill {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-secondary);
}

[data-theme="dark"] .workspace-pill:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

[data-theme="dark"] .workspace-add-btn,
[data-theme="dark"] .workspace-manage-btn {
    color: var(--text-muted);
    border-color: var(--border-input);
    background: var(--bg-input);
}

[data-theme="dark"] .workspace-add-btn:hover,
[data-theme="dark"] .workspace-manage-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

[data-theme="dark"] .dashboard-title,
[data-theme="dark"] .section-title {
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard-title span {
    color: var(--accent-orange);
}

[data-theme="dark"] .dashboard-greeting,
[data-theme="dark"] .section-subtitle {
    color: var(--text-muted);
}

[data-theme="dark"] .header-icon-btn,
[data-theme="dark"] .header-menu-link {
    color: var(--text-muted);
}

[data-theme="dark"] .header-icon-btn:hover,
[data-theme="dark"] .header-menu-link:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

[data-theme="dark"] .header-menu-divider {
    background: var(--border-color);
}

[data-theme="dark"] .header-menu-toggle {
    border-color: var(--border-input);
    background: var(--bg-card);
    color: var(--text-secondary);
}

[data-theme="dark"] .export-pdf-btn,
[data-theme="dark"] .new-week-btn {
    border-color: var(--border-input);
    background: var(--bg-card);
    color: var(--text-secondary);
}

[data-theme="dark"] .export-pdf-btn:hover,
[data-theme="dark"] .new-week-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

[data-theme="dark"] .group-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .group-name-input {
    color: var(--text-primary);
    background: transparent;
    border-color: transparent;
}

[data-theme="dark"] .group-name-input:focus {
    border-color: var(--border-input);
    background: var(--bg-input);
}

[data-theme="dark"] .task-text-input {
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .task-text-input:focus {
    background: var(--bg-input);
}

[data-theme="dark"] .task-row {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .task-row:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .task-row.completed .task-text-input {
    color: var(--text-muted);
}

[data-theme="dark"] .task-checkbox {
    background: var(--bg-input);
    border-color: var(--border-input);
}

[data-theme="dark"] .task-checkbox:checked {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
}

[data-theme="dark"] .task-deadline {
    color: var(--text-secondary);
    background: transparent;
}

[data-theme="dark"] .task-effort {
    background: var(--bg-input);
    color: var(--text-secondary);
}

[data-theme="dark"] .task-menu-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .task-menu-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .task-menu {
    background: var(--bg-card, #1e1e1e);
    border-color: var(--border-light, #333);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .task-menu-item {
    color: var(--text-primary);
}

[data-theme="dark"] .task-menu-item:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .task-menu-item svg {
    color: var(--text-muted);
}

[data-theme="dark"] .task-menu-item-danger,
[data-theme="dark"] .task-menu-item-danger svg {
    color: var(--accent-red);
}

[data-theme="dark"] .task-menu-item-danger:hover {
    background: rgba(229, 57, 53, 0.12);
}

[data-theme="dark"] .task-menu-divider {
    background: var(--border-light, #333);
}

[data-theme="dark"] .add-task-btn,
[data-theme="dark"] .add-group-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .add-task-btn:hover,
[data-theme="dark"] .add-group-btn:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .group-header button {
    color: var(--text-muted);
}

[data-theme="dark"] .group-header button:hover {
    color: var(--text-primary);
}

/* Dark mode: notes/habits panels */
[data-theme="dark"] .panel-notes,
[data-theme="dark"] .panel-habits {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .notes-textarea {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .notes-textarea:focus {
    border-color: var(--accent-blue);
}

[data-theme="dark"] .habit-row {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .habit-name-input {
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .habit-delete {
    color: var(--text-muted);
}

[data-theme="dark"] .tracker-grid {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .tracker-header {
    background: var(--bg-section);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tracker-day-head {
    color: var(--text-muted);
}

[data-theme="dark"] .tracker-row {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .habit-day-checkbox {
    background: var(--bg-input);
    border-color: #666;
}

[data-theme="dark"] .habit-day-checkbox:checked {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
}

[data-theme="dark"] .add-habit-btn {
    color: var(--text-muted);
    border-color: var(--border-color);
}

[data-theme="dark"] .add-habit-btn:hover {
    color: var(--accent-orange);
    border-color: var(--accent-orange);
}

/* Dark mode: projects page */
[data-theme="dark"] .projects-list-wrap {
    color: var(--text-primary);
}

[data-theme="dark"] .folder-tile {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .folder-tile:hover {
    border-color: var(--text-muted);
}

[data-theme="dark"] .folder-tile-icon {
    color: var(--text-muted);
}

[data-theme="dark"] .folder-tile-count {
    color: var(--text-muted);
}

[data-theme="dark"] .folder-tile-delete {
    color: var(--text-muted);
}

[data-theme="dark"] .folder-list-row {
    border-bottom-color: var(--border-light);
    color: var(--text-primary);
}

[data-theme="dark"] .folder-list-row:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .project-link {
    background: var(--bg-card);
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .project-link:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .project-link-title {
    color: var(--text-primary);
}

[data-theme="dark"] .project-link-team {
    color: var(--text-muted);
}

[data-theme="dark"] .project-list-header {
    background: var(--bg-section);
    border-bottom-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .project-link-folder,
[data-theme="dark"] .project-link-deadline {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-secondary);
}

/* Dark mode: project detail view */
[data-theme="dark"] .projects-wrap {
    color: var(--text-primary);
}

[data-theme="dark"] .project-sidebar {
    background: #1a1a1a;
    border-right-color: var(--border-color);
}

[data-theme="dark"] .project-sidebar-header {
    border-bottom-color: var(--accent-orange);
}

[data-theme="dark"] .project-sidebar-title {
    color: var(--accent-orange);
}

[data-theme="dark"] .project-sidebar-toggle {
    color: var(--text-muted);
}

[data-theme="dark"] .project-sidebar-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

[data-theme="dark"] .project-sidebar-section {
    color: var(--accent-orange);
}

[data-theme="dark"] .sidebar-search-toggle {
    color: var(--text-muted);
}

[data-theme="dark"] .sidebar-search-toggle:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sidebar-search-input {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .sidebar-search-input:focus {
    border-color: var(--accent-orange);
}

[data-theme="dark"] .project-sidebar-search {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .project-sidebar-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .project-sidebar-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .project-sidebar-item.active {
    background: var(--bg-hover);
    color: #fff;
    border-left: 3px solid var(--accent-orange);
}

[data-theme="dark"] .project-sidebar-star {
    color: var(--text-muted);
}

[data-theme="dark"] .project-sidebar-star:hover,
[data-theme="dark"] .project-sidebar-star.starred {
    color: #e6a817;
}

[data-theme="dark"] .project-sidebar-delete {
    color: var(--text-muted);
}

[data-theme="dark"] .project-sidebar-delete:hover {
    color: var(--accent-red);
}

[data-theme="dark"] .project-sidebar-home {
    color: var(--text-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .project-sidebar-home:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .project-sidebar-help {
    color: var(--text-muted);
}

[data-theme="dark"] .project-sidebar-help:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

[data-theme="dark"] .sidebar-project-link {
    color: var(--text-primary);
}

[data-theme="dark"] .sidebar-project-link:hover,
[data-theme="dark"] .sidebar-project-link.active {
    background: var(--bg-hover);
}

[data-theme="dark"] .sidebar-folder {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .sidebar-folder:first-of-type {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .sidebar-folder-toggle {
    color: var(--text-muted);
}

[data-theme="dark"] .sidebar-folder-toggle:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .sidebar-folder-name {
    color: var(--text-secondary);
}

[data-theme="dark"] .sidebar-folder-name-input {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .sidebar-folder-name-input:focus {
    border-color: var(--accent-orange);
}

[data-theme="dark"] .sidebar-folder-count {
    color: var(--text-muted);
}

[data-theme="dark"] .sidebar-folder-delete {
    color: var(--text-muted);
}

[data-theme="dark"] .sidebar-folder-delete:hover {
    color: var(--accent-red);
}

[data-theme="dark"] .sidebar-folder-dragover,
[data-theme="dark"] .sidebar-section-dragover {
    background: rgba(194, 65, 12, 0.08);
    outline-color: var(--accent-orange);
}

[data-theme="dark"] .ptask-table {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .ptask-header-row {
    background: var(--bg-section);
    border-bottom-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .ptask-row {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .ptask-row:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .ptask-summary {
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .ptask-summary:focus {
    background: var(--bg-input);
}

[data-theme="dark"] .ptask-deadline,
[data-theme="dark"] .ptask-duration {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

[data-theme="dark"] .ptask-deadline:focus,
[data-theme="dark"] .ptask-duration:focus {
    background: var(--bg-input);
    border-color: var(--border-input);
}

[data-theme="dark"] .ptask-status,
[data-theme="dark"] .ptask-dependency,
[data-theme="dark"] .ptask-assignee {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-secondary);
}

[data-theme="dark"] .ptask-group-header {
    background: var(--bg-section);
    border-bottom-color: var(--border-color);
    border-left: 3px solid var(--accent-orange);
}

[data-theme="dark"] .ptask-group-name {
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .ptask-group-count {
    color: var(--text-muted);
}

[data-theme="dark"] .ptask-check-btn,
[data-theme="dark"] .ptask-notes-btn,
[data-theme="dark"] .ptask-docs-btn,
[data-theme="dark"] .ptask-menu-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .ptask-check-btn:hover,
[data-theme="dark"] .ptask-notes-btn:hover,
[data-theme="dark"] .ptask-docs-btn:hover,
[data-theme="dark"] .ptask-menu-btn:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .ptask-drag-handle,
[data-theme="dark"] .ptask-group-drag-handle {
    color: var(--text-muted);
}

[data-theme="dark"] .ptask-group-add-task {
    color: var(--text-muted);
}

[data-theme="dark"] .ptask-group-add-task:hover {
    color: var(--accent-blue);
}

[data-theme="dark"] .ptask-menu {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .ptask-menu-item {
    color: var(--text-primary);
}

[data-theme="dark"] .ptask-menu-item:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .ptask-menu-divider {
    background: var(--border-light);
}

[data-theme="dark"] .ptask-save-template,
[data-theme="dark"] .ptask-csv-import,
[data-theme="dark"] .ptask-delete-all-tasks {
    color: var(--text-muted);
}

[data-theme="dark"] .ptask-save-template:hover,
[data-theme="dark"] .ptask-csv-import:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

[data-theme="dark"] .ptask-settings-link,
[data-theme="dark"] .ptask-toggle-gantt,
[data-theme="dark"] .ptask-toggle-docs-panel {
    color: var(--text-muted);
}

[data-theme="dark"] .ptask-settings-link:hover,
[data-theme="dark"] .ptask-toggle-gantt:hover,
[data-theme="dark"] .ptask-toggle-docs-panel:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

[data-theme="dark"] .ptask-toggle-gantt.gantt-active,
[data-theme="dark"] .ptask-toggle-view.view-active,
[data-theme="dark"] .ptask-toggle-docs-panel.docs-panel-active,
[data-theme="dark"] .ptask-toggle-statuses.statuses-active,
[data-theme="dark"] .ptask-toggle-columns.columns-active,
[data-theme="dark"] .ptask-toggle-audit-log.audit-active,
[data-theme="dark"] .ptask-toggle-stats.stats-active,
[data-theme="dark"] .ptask-toggle-complete.hiding-complete,
[data-theme="dark"] .project-toggle-details.details-active {
    color: #c2410c;
}

[data-theme="dark"] .projects-home-link {
    color: var(--text-muted);
}

[data-theme="dark"] .projects-home-link:hover {
    color: var(--text-primary);
}

/* Dark mode: project details panel */
[data-theme="dark"] .project-details-panel {
    background: var(--bg-section);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .project-details-panel label {
    color: var(--text-secondary);
}

[data-theme="dark"] .project-details-panel input,
[data-theme="dark"] .project-details-panel select,
[data-theme="dark"] .project-details-panel textarea {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

/* Dark mode: add task row */
[data-theme="dark"] .add-ptask-row input {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

/* Dark mode: panels (notes, docs, status, audit) */
[data-theme="dark"] .ptask-notes-panel,
[data-theme="dark"] .ptask-docs-panel,
[data-theme="dark"] .status-settings-panel,
[data-theme="dark"] .audit-log-panel {
    background: var(--bg-card);
    border-left-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .ptask-notes-panel-header,
[data-theme="dark"] .ptask-docs-panel-header,
[data-theme="dark"] .status-settings-panel-header {
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .ptask-notes-panel-header h3,
[data-theme="dark"] .ptask-docs-panel-header h3,
[data-theme="dark"] .status-settings-panel-header h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .ptask-notes-panel-close,
[data-theme="dark"] .ptask-docs-panel-close,
[data-theme="dark"] .status-settings-panel-close {
    color: var(--text-muted);
}

[data-theme="dark"] #ptask-notes-textarea {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .ptask-notes-overlay,
[data-theme="dark"] .ptask-docs-overlay,
[data-theme="dark"] .status-settings-overlay {
    background: var(--bg-overlay);
}

[data-theme="dark"] .status-settings-label:focus {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .status-settings-color {
    border-color: transparent;
}

/* Dark mode: Gantt chart */
[data-theme="dark"] .gantt-wrap {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* Dark mode: kanban */
[data-theme="dark"] .kanban-board {
    color: var(--text-primary);
}

/* Dark mode: modals */
[data-theme="dark"] .tt-modal-overlay {
    background: var(--bg-overlay);
}

[data-theme="dark"] .tt-modal {
    background: var(--bg-modal);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .tt-modal-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tt-modal-title {
    color: var(--text-primary);
}

[data-theme="dark"] .tt-modal-close {
    color: var(--text-muted);
}

[data-theme="dark"] .tt-modal-close:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .tt-modal-body {
    color: var(--text-primary);
}

[data-theme="dark"] .tt-modal-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .tt-modal-input,
[data-theme="dark"] .tt-modal-select {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .tt-modal-footer {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .tt-modal-btn-cancel {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-secondary);
}

[data-theme="dark"] .tt-modal-btn-cancel:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

[data-theme="dark"] .tt-modal-btn-primary {
    background: var(--accent-blue);
}

/* Dark mode: CSV import */
[data-theme="dark"] .csv-drop-zone {
    background: var(--bg-section);
    border-color: var(--border-input);
    color: var(--text-secondary);
}

[data-theme="dark"] .csv-preview-table {
    color: var(--text-primary);
}

[data-theme="dark"] .csv-preview-table th {
    background: var(--bg-section);
    border-color: var(--border-color);
}

[data-theme="dark"] .csv-preview-table td {
    border-color: var(--border-light);
}

[data-theme="dark"] .csv-step {
    color: var(--text-muted);
}

[data-theme="dark"] .csv-step.active {
    color: var(--text-primary);
}

[data-theme="dark"] .csv-checkbox-label,
[data-theme="dark"] .csv-radio-label {
    color: var(--text-primary);
}

[data-theme="dark"] .csv-field-hint {
    color: var(--text-muted);
}

[data-theme="dark"] .csv-multi-select {
    background: var(--bg-section);
    border-color: var(--border-input);
}

/* Dark mode: save indicator */
[data-theme="dark"] .save-indicator {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* Dark mode: week selector */
[data-theme="dark"] .week-selector select {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .week-selector select:focus {
    border-color: var(--text-muted);
}

[data-theme="dark"] .week-selector label {
    color: var(--text-muted);
}

[data-theme="dark"] .week-datepicker-btn {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .week-datepicker-btn:hover {
    border-color: var(--text-muted);
}

[data-theme="dark"] .week-datepicker-label {
    color: var(--text-primary);
}

[data-theme="dark"] .week-nav-btn {
    color: var(--text-muted);
    border-color: var(--border-input);
    background: var(--bg-card);
}

[data-theme="dark"] .week-nav-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

[data-theme="dark"] .week-calendar {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .week-cal-month {
    color: var(--text-primary);
}

[data-theme="dark"] .week-cal-nav {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-muted);
}

[data-theme="dark"] .week-cal-nav:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

[data-theme="dark"] .week-calendar-days span {
    color: var(--text-muted);
}

[data-theme="dark"] .week-cal-day {
    color: var(--text-primary);
}

[data-theme="dark"] .week-cal-day:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .week-cal-day.other-month {
    color: var(--text-muted);
}

[data-theme="dark"] .week-cal-header {
    color: var(--text-secondary);
}

/* Dark mode: Select2 */
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--select2-bg);
    border-color: var(--select2-border);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--text-primary);
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

/* Dark mode: scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

/* Dark mode: site footer */
[data-theme="dark"] .site-footer {
    color: var(--text-muted);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .site-footer a {
    color: var(--text-secondary);
}

/* Dark mode: duration arrows */
[data-theme="dark"] .ptask-duration-arrows button {
    color: var(--text-muted);
}

[data-theme="dark"] .ptask-duration-arrows button:hover {
    color: var(--text-primary);
}

/* Dark mode: folder view toggle */
[data-theme="dark"] .folder-view-btn {
    color: var(--text-muted);
    border-color: var(--border-input);
    background: var(--bg-card);
}

[data-theme="dark"] .folder-view-btn.active,
[data-theme="dark"] .folder-view-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Dark mode: templates button */
[data-theme="dark"] .templates-btn {
    border-color: var(--border-input);
    background: var(--bg-card);
    color: var(--text-secondary);
}

[data-theme="dark"] .templates-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

/* Dark mode: header menu on mobile */
@media (max-width: 768px) {
    [data-theme="dark"] .header-menu.menu-open {
        background: var(--bg-card);
        border-color: var(--border-color);
        box-shadow: var(--shadow-lg);
    }
}

/* Dark mode: settings page */
[data-theme="dark"] .settings-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .settings-section {
    border-color: var(--border-light);
}

[data-theme="dark"] .settings-section-title {
    color: var(--text-primary);
}

[data-theme="dark"] .settings-section-desc {
    color: var(--text-muted);
}

[data-theme="dark"] .settings-row label {
    color: var(--text-secondary);
}

[data-theme="dark"] .settings-card input[type="text"],
[data-theme="dark"] .settings-card input[type="email"],
[data-theme="dark"] .settings-card input[type="password"],
[data-theme="dark"] .settings-card input[type="number"],
[data-theme="dark"] .settings-card input[type="url"],
[data-theme="dark"] .settings-card select,
[data-theme="dark"] .settings-card textarea {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .settings-section-danger {
    border-color: #552222;
}

/* Dark mode: profile page */
[data-theme="dark"] .profile-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .profile-header {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .profile-title {
    color: var(--text-primary);
}

[data-theme="dark"] .profile-card label {
    color: var(--text-secondary);
}

[data-theme="dark"] .profile-card input[type="text"],
[data-theme="dark"] .profile-card input[type="email"],
[data-theme="dark"] .profile-card input[type="password"],
[data-theme="dark"] .profile-card select {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

/* Dark mode: users/teams pages */
[data-theme="dark"] .users-card,
[data-theme="dark"] .teams-card,
[data-theme="dark"] .backups-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .user-row,
[data-theme="dark"] .team-row,
[data-theme="dark"] .backup-row {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .user-row:hover,
[data-theme="dark"] .team-row:hover,
[data-theme="dark"] .backup-row:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .backups-table {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .backups-header-row {
    background: var(--bg-section);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .backups-header-row span {
    color: var(--text-muted);
}

[data-theme="dark"] .backups-row {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .backup-date {
    color: var(--text-primary);
}

[data-theme="dark"] .backup-created-by {
    color: var(--text-secondary);
}

[data-theme="dark"] .backup-size {
    color: var(--text-muted);
}

[data-theme="dark"] .backup-settings {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .backup-setting label {
    color: var(--text-secondary);
}

[data-theme="dark"] .backup-setting select,
[data-theme="dark"] .backup-setting input[type="number"] {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .backup-next-scheduled {
    color: var(--text-muted);
}

[data-theme="dark"] .backup-download-btn,
[data-theme="dark"] .backup-restore-btn,
[data-theme="dark"] .backup-delete-btn {
    border-color: var(--border-input);
    background: var(--bg-input);
}

[data-theme="dark"] .backup-download-btn {
    color: var(--text-secondary);
}

[data-theme="dark"] .backup-download-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

[data-theme="dark"] .backup-restore-btn {
    color: #f59e0b;
}

[data-theme="dark"] .backup-restore-btn:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .backup-delete-btn {
    color: #ef4444;
}

[data-theme="dark"] .backup-delete-btn:hover {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .selective-import-item {
    background: var(--bg-input);
    border-color: var(--border-input);
}

[data-theme="dark"] .selective-import-item-name {
    color: var(--text-primary);
}

[data-theme="dark"] .selective-import-item-btn {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

[data-theme="dark"] .selective-import-item-btn:hover {
    background: var(--accent-orange);
    color: #fff;
}

[data-theme="dark"] .backup-modal-overlay {
    background: var(--bg-overlay);
}

[data-theme="dark"] .backup-modal {
    background: var(--bg-modal);
    border-color: var(--border-color);
}

[data-theme="dark"] .backup-modal h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .backup-modal p {
    color: var(--text-secondary);
}

/* Dark mode: help page */
[data-theme="dark"] .help-sidebar {
    background: var(--bg-card);
    border-right-color: var(--border-color);
}

[data-theme="dark"] .help-sidebar a {
    color: var(--text-secondary);
}

[data-theme="dark"] .help-sidebar a:hover,
[data-theme="dark"] .help-sidebar a.active {
    color: var(--text-primary);
    background: var(--bg-hover);
}

[data-theme="dark"] .help-article-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .help-article-card:hover {
    border-color: var(--text-muted);
}

/* Dark mode: projects page — missing overrides */
[data-theme="dark"] .projects-section {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .project-list {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .project-link-count {
    color: var(--text-muted);
}

[data-theme="dark"] .project-link-owner {
    color: var(--text-muted);
}

[data-theme="dark"] .project-link-delete {
    color: var(--text-muted);
}

[data-theme="dark"] .project-link-delete:hover {
    color: var(--accent-red);
}

[data-theme="dark"] .project-drag-handle {
    color: var(--text-muted);
}

[data-theme="dark"] .project-link.sortable-ghost {
    background: rgba(194, 65, 12, 0.08);
}

[data-theme="dark"] .project-link.sortable-chosen {
    background: var(--bg-hover);
}

[data-theme="dark"] .project-link.sortable-fallback {
    background: var(--bg-card);
}

[data-theme="dark"] .project-link-team {
    background: var(--bg-hover);
    color: var(--text-muted);
}

[data-theme="dark"] .projects-empty {
    color: var(--text-muted);
}

[data-theme="dark"] .add-project-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .add-project-btn:hover {
    color: var(--accent-orange);
}

[data-theme="dark"] .projects-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .projects-brand,
[data-theme="dark"] .projects-brand-title {
    color: var(--text-muted);
}

/* Dark mode: folder tiles */
[data-theme="dark"] .folder-tile-name {
    color: var(--text-primary);
}

[data-theme="dark"] .folder-tile-add {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-muted);
}

[data-theme="dark"] .folder-tile-add:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

[data-theme="dark"] .folder-tile-name-input {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .folder-tile-name-input:focus {
    border-color: var(--accent-orange);
}

[data-theme="dark"] .folder-tile-uncategorized {
    color: var(--text-muted);
}

[data-theme="dark"] .folder-drag-handle {
    color: var(--text-muted);
}

/* Dark mode: folder list view */
[data-theme="dark"] .folder-list {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .folder-list-icon {
    color: var(--text-muted);
}

[data-theme="dark"] .folder-list-name {
    color: var(--text-primary);
}

[data-theme="dark"] .folder-list-count {
    color: var(--text-muted);
}

[data-theme="dark"] .folder-list-delete {
    color: var(--text-muted);
}

[data-theme="dark"] .folder-list-delete:hover {
    color: var(--accent-red);
}

[data-theme="dark"] .folder-list-add {
    border-top-color: var(--border-color);
    color: var(--text-muted);
}

[data-theme="dark"] .folder-list-name-input {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .folder-list-name-input:focus {
    border-color: var(--accent-orange);
}

[data-theme="dark"] .folder-list-uncategorized {
    color: var(--text-muted);
}

/* Dark mode: folder controls */
[data-theme="dark"] .folder-back-btn {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .folder-back-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

[data-theme="dark"] .folder-project-title {
    color: var(--text-primary);
}

[data-theme="dark"] .folder-empty-message {
    color: var(--text-muted);
}

[data-theme="dark"] .folder-view-toggle {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .folder-import-csv-btn {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .folder-import-csv-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

/* Dark mode: project detail panel */
[data-theme="dark"] .project-title-label {
    color: var(--text-muted);
}

[data-theme="dark"] .project-title-input {
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .project-title-input:focus {
    background: var(--bg-input);
    border-color: var(--accent-orange);
}

[data-theme="dark"] .project-title-input::placeholder {
    color: var(--text-placeholder);
}

[data-theme="dark"] .project-description {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .project-description:focus {
    border-color: var(--accent-orange);
}

[data-theme="dark"] .project-sponsor,
[data-theme="dark"] .project-details-sponsor {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .project-team-selector,
[data-theme="dark"] .project-switcher,
[data-theme="dark"] .project-deadline-selector {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .project-status-select {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

/* Dark mode: login, signup, forgot-password */
[data-theme="dark"] .login-page {
    background: var(--bg-main);
}

[data-theme="dark"] .login-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .login-title {
    color: var(--text-muted);
}

[data-theme="dark"] .login-title span {
    color: var(--text-placeholder);
}

[data-theme="dark"] .login-subtitle {
    color: var(--text-muted);
}

[data-theme="dark"] .login-field input {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .login-field input:focus {
    border-color: var(--text-muted);
    background: var(--bg-card);
}

[data-theme="dark"] .login-field input::placeholder {
    color: var(--text-placeholder);
}

[data-theme="dark"] .login-remember {
    color: var(--text-muted);
}

[data-theme="dark"] .login-remember input[type="checkbox"] {
    border-color: var(--border-input);
    background: var(--bg-input);
}

[data-theme="dark"] .login-tab {
    color: var(--text-muted);
}

[data-theme="dark"] .login-tab:hover {
    color: var(--text-secondary);
}

[data-theme="dark"] .login-tab.active {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

[data-theme="dark"] .login-divider {
    color: var(--text-muted);
}

[data-theme="dark"] .login-divider::before,
[data-theme="dark"] .login-divider::after {
    background: var(--border-color);
}

[data-theme="dark"] .login-sso-btn {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .login-sso-btn:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .login-footer {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .login-footer-link {
    color: var(--text-muted);
}

[data-theme="dark"] .login-footer-link:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .login-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

[data-theme="dark"] .login-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

/* Dark mode: signup extras */
[data-theme="dark"] .signup-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .signup-tab {
    color: var(--text-muted);
}

[data-theme="dark"] .signup-tab:hover {
    color: var(--text-secondary);
}

[data-theme="dark"] .signup-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}

[data-theme="dark"] .org-info-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .org-invite-code {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .org-copy-btn {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-secondary);
}

[data-theme="dark"] .org-copy-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Dark mode: profile page */
[data-theme="dark"] .profile-page {
    background: var(--bg-main);
}

[data-theme="dark"] .profile-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .profile-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .profile-title {
    color: var(--text-primary);
}

[data-theme="dark"] .profile-field label {
    color: var(--text-muted);
}

[data-theme="dark"] .profile-field input,
[data-theme="dark"] .profile-field select {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .profile-field select {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] .profile-field input:focus,
[data-theme="dark"] .profile-field select:focus {
    border-color: var(--text-muted);
    background-color: var(--bg-card);
}

[data-theme="dark"] .profile-field input::placeholder {
    color: var(--text-placeholder);
}

[data-theme="dark"] .profile-divider {
    background: var(--border-color);
}

[data-theme="dark"] .profile-section-label {
    color: var(--accent-orange);
}

[data-theme="dark"] .profile-hint {
    color: var(--text-muted);
}

[data-theme="dark"] .profile-footer {
    border-top-color: var(--border-color);
}

/* Dark mode: users page */
[data-theme="dark"] .users-table {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .users-header-row {
    background: var(--bg-section);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .users-row {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .users-row:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .users-name-input,
[data-theme="dark"] .users-email-input {
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .users-name-input:focus,
[data-theme="dark"] .users-email-input:focus {
    background: var(--bg-input);
}

[data-theme="dark"] .users-org-field {
    color: var(--text-secondary);
}

[data-theme="dark"] .users-role-cell {
    color: var(--text-secondary);
}

[data-theme="dark"] .users-role-select {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .users-status {
    color: var(--text-muted);
}

[data-theme="dark"] .users-action-icon {
    color: var(--text-muted);
}

[data-theme="dark"] .users-action-icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .users-row.locked .users-lock-btn {
    color: #f87171;
}

[data-theme="dark"] .users-delete-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .users-delete-btn:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .users-delete-btn {
    background: transparent;
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

[data-theme="dark"] .users-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .pending-field {
    color: var(--text-primary);
}

/* Dark mode: teams page */
[data-theme="dark"] .team-name-input {
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .team-name-input:focus {
    background: var(--bg-input);
}

[data-theme="dark"] .team-member-name {
    color: var(--text-primary);
}

[data-theme="dark"] .team-member-role {
    color: var(--text-secondary);
}

[data-theme="dark"] .team-add-member-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .team-add-member-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Dark mode: settings page */
[data-theme="dark"] .settings-field input,
[data-theme="dark"] .settings-field select,
[data-theme="dark"] .settings-field textarea {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .settings-field input:focus,
[data-theme="dark"] .settings-field select:focus,
[data-theme="dark"] .settings-field textarea:focus {
    border-color: var(--text-muted);
    background: var(--bg-card);
}

[data-theme="dark"] .settings-hint {
    color: var(--text-muted);
}

[data-theme="dark"] .settings-hint code {
    background: var(--bg-input);
    color: var(--text-secondary);
}

/* Dark mode: help page — extended */
[data-theme="dark"] .help-search-field input {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .help-search-field input:focus {
    border-color: var(--text-muted);
}

[data-theme="dark"] .help-search-icon {
    color: var(--text-muted);
}

[data-theme="dark"] .help-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .help-card:hover {
    border-color: var(--text-muted);
}

[data-theme="dark"] .help-card-icon {
    color: var(--text-secondary);
}

[data-theme="dark"] .help-card-title {
    color: var(--text-primary);
}

[data-theme="dark"] .help-card-desc {
    color: var(--text-muted);
}

[data-theme="dark"] .help-no-results {
    color: var(--text-muted);
}

[data-theme="dark"] .help-sidebar-header {
    color: var(--accent-orange);
}

[data-theme="dark"] .help-sidebar-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .help-sidebar-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .help-sidebar-link.active {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-left-color: var(--accent-orange);
}

[data-theme="dark"] .help-sidebar-icon {
    color: var(--text-muted);
}

[data-theme="dark"] .help-sidebar-link.active .help-sidebar-icon {
    color: var(--text-secondary);
}

[data-theme="dark"] .help-breadcrumb {
    color: var(--text-muted);
}

[data-theme="dark"] .help-breadcrumb a {
    color: var(--text-secondary);
}

[data-theme="dark"] .help-breadcrumb a:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .help-article-icon {
    color: var(--text-secondary);
}

[data-theme="dark"] .help-article-body h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .help-article-body h3,
[data-theme="dark"] .help-article-body h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .help-article-body p,
[data-theme="dark"] .help-article-body li {
    color: var(--text-secondary);
}

[data-theme="dark"] .help-article-body code {
    background: var(--bg-input);
    color: #f87171;
}

[data-theme="dark"] .help-article-body strong {
    color: var(--text-primary);
}

[data-theme="dark"] .help-related-title {
    color: var(--text-muted);
}

/* Dark mode: modals (global tt-modal) */
[data-theme="dark"] .tt-modal,
[data-theme="dark"] .backup-modal {
    background: var(--bg-modal);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .tt-modal h3,
[data-theme="dark"] .backup-modal h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .tt-modal p,
[data-theme="dark"] .backup-modal p {
    color: var(--text-secondary);
}

/* Dark mode: site footer */
[data-theme="dark"] .site-footer {
    color: var(--text-muted);
}

[data-theme="dark"] .site-footer a {
    color: var(--text-secondary);
}

[data-theme="dark"] .site-footer a:hover {
    color: var(--text-primary);
}

/* Dark mode: general forms & buttons */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    color-scheme: dark;
}

/* Dark mode: dark mode toggle icon visibility */
[data-theme="dark"] .dm-icon-light {
    display: none;
}

[data-theme="dark"] .dm-icon-dark {
    display: block !important;
}

/* ── Custom Column Cells ── */

.ptask-custom-field {
    font-size: 12px;
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 6px;
    border-radius: 4px;
    width: 100%;
    min-width: 0;
    color: inherit;
}
.ptask-custom-field:hover,
.ptask-custom-field:focus {
    border-color: #d1d5db;
    outline: none;
}
.ptask-custom-status {
    cursor: pointer;
}
.ptask-custom-col-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Custom Columns Panel ── */

.custom-columns-panel {
    position: fixed;
    right: -360px;
    top: 0;
    width: 360px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: right .25s ease;
}
.custom-columns-panel.open {
    right: 0;
}
.custom-columns-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}
.custom-columns-panel-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.custom-columns-panel-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    padding: 0 4px;
}
.custom-columns-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
}
.custom-columns-panel-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
}
.custom-columns-add-btn {
    background: none;
    border: 1px dashed #d1d5db;
    color: #c2410c;
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.custom-columns-add-btn:hover {
    border-color: #c2410c;
    background: #fff7ed;
}
.custom-columns-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.2);
    z-index: 1049;
    display: none;
}
.custom-columns-panel-overlay.open {
    display: block;
}

.cc-empty {
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
}
.cc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}
.cc-item-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
}
.cc-item-type {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
}
.cc-item-edit {
    background: none;
    border: 1px solid #d1d5db;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    color: #374151;
}
.cc-item-edit:hover {
    border-color: #c2410c;
    color: #c2410c;
}
.cc-item-delete {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #9ca3af;
    padding: 0 4px;
    line-height: 1;
}
.cc-item-delete:hover {
    color: #dc2626;
}

/* ── Forms Panel ── */

.forms-panel {
    position: fixed;
    right: -400px;
    top: 0;
    width: 400px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: right .25s ease;
}
.forms-panel.open {
    right: 0;
}
.forms-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}
.forms-panel-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.forms-panel-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    padding: 0 4px;
}
.forms-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
}
.forms-panel-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
}
.forms-add-btn {
    background: none;
    border: 1px dashed #d1d5db;
    color: #c2410c;
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.forms-add-btn:hover {
    border-color: #c2410c;
    background: #fff7ed;
}
.forms-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.2);
    z-index: 1049;
    display: none;
}
.forms-panel-overlay.open {
    display: block;
}
.forms-empty,
.forms-loading {
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
}
.form-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 8px;
}
.form-item-info {
    flex: 1;
    min-width: 0;
}
.form-item-name {
    font-size: 13px;
    font-weight: 500;
    display: block;
}
.form-item-url {
    font-size: 11px;
    color: #c2410c;
    word-break: break-all;
}
.form-item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}
.form-item-edit-link,
.form-item-copy-url {
    background: none;
    border: 1px solid #d1d5db;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.form-item-edit-link:hover,
.form-item-copy-url:hover {
    border-color: #c2410c;
    color: #c2410c;
}
.form-item-delete {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #9ca3af;
    padding: 0 4px;
    line-height: 1;
}
.form-item-delete:hover {
    color: #dc2626;
}

/* ── Form Builder ── */

.form-builder-wrap {
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.form-builder-wrap .dashboard-header {
    margin: 0;
    padding: 10px 48px;
    width: 100%;
    box-sizing: border-box;
}
.form-builder-content {
    max-width: 720px;
    margin: 16px auto 0;
    padding: 0 20px;
}
.form-builder-back {
    font-size: 13px;
    color: #c2410c;
    text-decoration: none;
}
.form-builder-back:hover {
    text-decoration: underline;
}
.form-builder-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}
.form-builder-section h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
}
.form-builder-hint {
    font-size: 12px;
    color: #9ca3af;
    margin: 0 0 12px;
}
.form-builder-field {
    margin-bottom: 12px;
}
.form-builder-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
.form-builder-field input,
.form-builder-field select,
.form-builder-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: inherit;
}
.form-builder-field input:focus,
.form-builder-field select:focus,
.form-builder-field textarea:focus {
    outline: none;
    border-color: #c2410c;
}
.form-url-row {
    display: flex;
    gap: 8px;
}
.form-url-row input {
    flex: 1;
    background: #f9fafb;
}
.form-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.form-preview-btn:hover {
    border-color: #c2410c;
    color: #c2410c;
}
.form-copy-url-btn {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.form-copy-url-btn:hover {
    border-color: #c2410c;
    color: #c2410c;
}

/* Form field items */
.form-field-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 6px;
    background: #fafafa;
}
.form-field-drag {
    cursor: grab;
    color: #d1d5db;
    flex-shrink: 0;
}
.form-field-label {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    padding: 2px 4px;
    min-width: 0;
    color: inherit;
}
.form-field-label:focus {
    outline: none;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #c2410c;
}
.form-field-source {
    font-size: 11px;
    color: #9ca3af;
    flex-shrink: 0;
}
.form-field-required-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #6b7280;
    flex-shrink: 0;
    cursor: pointer;
}
.form-field-locked {
    font-size: 10px;
    background: #f3f4f6;
    color: #9ca3af;
    padding: 2px 8px;
    border-radius: 10px;
}
.form-field-remove {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #9ca3af;
    padding: 0 4px;
    line-height: 1;
}
.form-field-remove:hover {
    color: #dc2626;
}
.form-add-field-row select {
    width: 100%;
    padding: 8px 10px;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: #6b7280;
    background: #fff;
    cursor: pointer;
}

/* ── Public Form ── */

.public-form-page {
    background: #f5f3ef;
    min-height: 100vh;
}
.public-form-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 60px 20px;
}
.public-form-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.public-form-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 24px;
    text-align: center;
}
.public-form-group {
    margin-bottom: 16px;
}
.public-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.public-form-required {
    color: #dc2626;
}
.public-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: #111;
    font-family: inherit;
}
.public-form-input:focus {
    outline: none;
    border-color: #c2410c;
    box-shadow: 0 0 0 2px rgba(194,65,12,.15);
}
.public-form-error {
    background: #fef2f2;
    color: #dc2626;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}
.public-form-submit {
    width: 100%;
    padding: 12px;
    background: #c2410c;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.public-form-submit:hover {
    background: #9a3412;
}
.public-form-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.public-form-success {
    text-align: center;
    padding: 20px 0;
}
.public-form-success svg {
    margin-bottom: 12px;
}
.public-form-success p {
    font-size: 16px;
    color: #374151;
}

/* ── Dark mode: Custom columns & forms ── */

[data-theme="dark"] .custom-columns-panel,
[data-theme="dark"] .forms-panel {
    background: #1e1e1e;
    border-color: #333;
}
[data-theme="dark"] .custom-columns-panel-header,
[data-theme="dark"] .forms-panel-header,
[data-theme="dark"] .custom-columns-panel-footer,
[data-theme="dark"] .forms-panel-footer {
    border-color: #333;
}
[data-theme="dark"] .cc-item {
    border-color: #333;
}
[data-theme="dark"] .cc-item-edit {
    border-color: #555;
    color: #ccc;
}
[data-theme="dark"] .cc-item-edit:hover {
    border-color: #c2410c;
    color: #c2410c;
}
[data-theme="dark"] .form-item {
    border-color: #333;
}
[data-theme="dark"] .form-item-edit-link,
[data-theme="dark"] .form-item-copy-url {
    border-color: #555;
    color: #ccc;
}
[data-theme="dark"] .custom-columns-add-btn:hover,
[data-theme="dark"] .forms-add-btn:hover {
    background: #2a2a2a;
}
[data-theme="dark"] .custom-columns-panel-overlay,
[data-theme="dark"] .forms-panel-overlay {
    background: rgba(0,0,0,.5);
}
[data-theme="dark"] .ptask-custom-field:hover,
[data-theme="dark"] .ptask-custom-field:focus {
    border-color: #555;
}

/* Dark mode: Form builder */
[data-theme="dark"] .form-builder-section {
    background: #1e1e1e;
    border-color: #333;
}
[data-theme="dark"] .form-field-item {
    background: #252525;
    border-color: #333;
}
[data-theme="dark"] .form-builder-field input,
[data-theme="dark"] .form-builder-field select,
[data-theme="dark"] .form-builder-field textarea {
    background: #252525;
    border-color: #444;
    color: #e5e5e5;
}
[data-theme="dark"] .form-url-row input {
    background: #1a1a1a;
}
[data-theme="dark"] .form-preview-btn {
    background: #252525;
    border-color: #444;
    color: #ccc;
}
[data-theme="dark"] .form-preview-btn:hover {
    border-color: #c2410c;
    color: #c2410c;
}
[data-theme="dark"] .form-copy-url-btn {
    background: #252525;
    border-color: #444;
    color: #ccc;
}
[data-theme="dark"] .form-add-field-row select {
    background: #252525;
    border-color: #444;
    color: #999;
}

/* Dark mode: Public form */
[data-theme="dark"] .public-form-page {
    background: #121212;
}
[data-theme="dark"] .public-form-card {
    background: #1e1e1e;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-theme="dark"] .public-form-title {
    color: #e5e5e5;
}
[data-theme="dark"] .public-form-group label {
    color: #ccc;
}
[data-theme="dark"] .public-form-input {
    background: #252525;
    border-color: #444;
    color: #e5e5e5;
}
[data-theme="dark"] .public-form-input:focus {
    border-color: #c2410c;
}
[data-theme="dark"] .public-form-error {
    background: #2d1111;
}
[data-theme="dark"] .public-form-success p {
    color: #ccc;
}

/* ── Import / Export Modal ── */
.import-export-section {
    margin-bottom: 16px;
}
.import-export-section:last-child {
    margin-bottom: 0;
}
.import-export-section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.import-export-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    margin-bottom: 6px;
    transition: background .15s, border-color .15s;
    color: var(--text-secondary);
}
.import-export-option:last-child {
    margin-bottom: 0;
}
.import-export-option:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}
.import-export-option svg {
    flex-shrink: 0;
}
.import-export-option-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.import-export-option-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.import-export-option-desc {
    font-size: 11px;
    color: var(--text-muted);
}

/* Dark mode: Import / Export */
[data-theme="dark"] .import-export-option {
    border-color: #333;
}
[data-theme="dark"] .import-export-option:hover {
    background: #252525;
    border-color: #444;
}

/* ── User Stories Panel ── */
.user-stories-panel {
    position: fixed;
    right: -400px;
    top: 0;
    width: 400px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: right .25s ease;
}
.user-stories-panel.open {
    right: 0;
}
.user-stories-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}
.user-stories-panel-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.user-stories-panel-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    padding: 0 4px;
}
.user-stories-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
}
.user-stories-panel-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
}
.user-stories-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.2);
    z-index: 1049;
    display: none;
}
.user-stories-panel-overlay.open {
    display: block;
}

/* User story items */
.us-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: background .15s;
}
.us-item:hover {
    background: var(--bg-hover);
}
.us-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.us-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.us-item-count {
    font-size: 11px;
    color: var(--text-muted);
}
.us-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.us-item-open {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
}
.us-item-open:hover {
    background: var(--bg-hover);
    border-color: #aaa;
}
.us-item-delete {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.us-item-delete:hover {
    color: var(--accent-red);
}
.user-stories-add-btn {
    background: none;
    border: 1px dashed #d1d5db;
    color: #c2410c;
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.user-stories-add-btn:hover {
    border-color: #c2410c;
    background: #fff7ed;
}

/* ── Wireframe Drawer ── */
.wireframe-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100vh;
    background: var(--bg-card);
    border-left: 2px solid var(--border-color);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,.12);
}
.wireframe-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}
.wireframe-journey-name {
    flex: 1;
    border: 1px solid transparent;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 6px;
    outline: none;
}
.wireframe-journey-name:hover,
.wireframe-journey-name:focus {
    border-color: var(--border-input);
    background: var(--bg-input);
}
.wireframe-drawer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wireframe-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background .15s, color .15s;
}
.wireframe-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.wireframe-present-btn {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}
.wireframe-present-btn:hover {
    background: #eff6ff;
}
.wireframe-close-btn {
    font-size: 18px;
    padding: 2px 8px;
}

/* Wireframe Toolbar */
.wireframe-toolbar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-light);
    gap: 6px;
    flex-wrap: wrap;
}
.wireframe-palette {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wireframe-element-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: grab;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.wireframe-element-btn:hover {
    background: var(--bg-hover);
    border-color: #aaa;
}
.wireframe-element-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.wireframe-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 6px;
}
.wireframe-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.wireframe-tool-btn:hover {
    background: var(--bg-hover);
}
.wireframe-tool-btn.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}
.wireframe-tool-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Wireframe Canvas */
.wireframe-canvas-wrap {
    flex: 1;
    overflow: auto;
    position: relative;
    background: var(--bg-section);
}
.wireframe-canvas {
    position: relative;
    min-width: 4000px;
    min-height: 4000px;
    width: 100%;
    height: 100%;
}
.wireframe-canvas.mode-connect {
    cursor: crosshair;
}
.wireframe-canvas.mode-delete {
    cursor: not-allowed;
}

/* Wireframe SVG connections */
.wireframe-connections-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.wf-connection {
    stroke: #6b7280;
    stroke-width: 2;
    fill: none;
    pointer-events: stroke;
    cursor: pointer;
}
.wf-connection:hover {
    stroke: var(--accent-red);
    stroke-width: 3;
}

/* Wireframe Elements */
.wireframe-element {
    position: absolute;
    width: 180px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    z-index: 2;
    cursor: grab;
    user-select: none;
    transition: box-shadow .15s;
}
.wireframe-element:active {
    cursor: grabbing;
}
.wireframe-element.selected {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.wf-el-header {
    padding: 5px 8px;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
}
.wf-el-type-label {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.wf-el-body {
    padding: 8px 10px;
}
.wf-el-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}
.wf-el-annotation {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-style: italic;
    word-break: break-word;
}

/* Delete button in header */
.wf-el-delete {
    background: none;
    border: none;
    color: rgba(255,255,255,.6);
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    margin-left: auto;
    transition: color .15s;
}
.wf-el-delete:hover {
    color: #fff;
}

/* Inline label editing */
.wf-el-label {
    cursor: text;
}
.wf-el-label-input {
    width: 100%;
    border: 1px solid var(--accent-blue);
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
}

/* Connection handles — 4 sides */
.wf-el-connector-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--accent-blue);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: crosshair;
    z-index: 3;
    opacity: 0;
    transition: opacity .15s;
}
.wf-el-connector-handle[data-side="top"] {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}
.wf-el-connector-handle[data-side="right"] {
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}
.wf-el-connector-handle[data-side="bottom"] {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}
.wf-el-connector-handle[data-side="left"] {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}
.wireframe-element:hover .wf-el-connector-handle,
.wireframe-canvas.mode-connect .wf-el-connector-handle {
    opacity: 1;
}

/* Connection labels */
.wf-connection-label {
    font-size: 11px;
    fill: var(--text-secondary);
    font-weight: 500;
}

/* Element type colors */
.wireframe-el-login { border-color: #6366f1; }
.wireframe-el-password_reset { border-color: #f59e0b; }
.wireframe-el-create_account { border-color: #10b981; }
.wireframe-el-page { border-color: #6b7280; }
.wireframe-el-form { border-color: #8b5cf6; }
.wireframe-el-user_message { border-color: #ec4899; }
.wireframe-el-decision { border-color: #d97706; }
.wireframe-el-branch { border-color: #0891b2; }

/* ── Element preview styling ── */
.wf-el-preview {
    padding: 6px 0 2px;
}
.wf-preview-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 5px;
}
.wf-preview-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.wf-preview-input {
    display: block;
    height: 14px;
    background: var(--bg-section);
    border: 1px solid var(--border-light);
    border-radius: 3px;
}
.wf-preview-input.tall {
    height: 24px;
}
.wf-preview-btn {
    display: block;
    text-align: center;
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    background: #6366f1;
    border-radius: 3px;
    padding: 3px 6px;
    margin-top: 4px;
}
.wf-el-preview-reset .wf-preview-btn { background: #f59e0b; }
.wf-el-preview-signup .wf-preview-btn { background: #10b981; }
.wf-el-preview-form .wf-preview-btn { background: #8b5cf6; }

/* Page preview */
.wf-preview-nav {
    height: 8px;
    background: var(--bg-section);
    border: 1px solid var(--border-light);
    border-radius: 2px;
    margin-bottom: 6px;
}
.wf-preview-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wf-preview-line {
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
}
.wf-preview-line.short {
    width: 60%;
}

/* Message preview */
.wf-preview-bubble {
    width: 70%;
    height: 12px;
    background: #e0e7ff;
    border-radius: 8px 8px 8px 2px;
    margin-bottom: 4px;
}
.wf-preview-bubble.reply {
    margin-left: auto;
    background: #f0fdf4;
    border-radius: 8px 8px 2px 8px;
    width: 60%;
}

/* Decision preview — diamond */
.wf-el-preview-decision {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}
.wf-preview-diamond {
    width: 28px;
    height: 28px;
    background: #fef3c7;
    border: 2px solid #d97706;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #d97706;
}
.wf-preview-diamond > * {
    transform: rotate(-45deg);
}

/* Branch preview */
.wf-el-preview-branch {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 4px 0;
}
.wf-preview-branch-line {
    font-size: 9px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 3px;
}
.wf-preview-branch-line.yes {
    background: #dcfce7;
    color: #16a34a;
}
.wf-preview-branch-line.no {
    background: #fee2e2;
    color: #dc2626;
}

/* ── Wireframe Present Overlay ── */
.wireframe-present-overlay {
    position: fixed;
    inset: 0;
    background: #f9fafb;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}
.wireframe-present-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
.wireframe-present-title {
    font-size: 16px;
    font-weight: 600;
    color: #111;
}
.wireframe-present-close {
    background: none;
    border: 1px solid #d1d5db;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    padding: 4px 12px;
    border-radius: 6px;
}
.wireframe-present-close:hover {
    background: #f3f4f6;
    color: #111;
}
.wireframe-present-canvas-wrap {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.wireframe-canvas-present {
    position: relative;
    transform-origin: center center;
}

/* ── Dark mode: User Stories / Wireframe ── */
[data-theme="dark"] .user-stories-panel {
    background: var(--bg-card);
    border-left-color: #333;
}
[data-theme="dark"] .user-stories-panel-close {
    color: #999;
}
[data-theme="dark"] .us-item {
    border-color: #333;
}
[data-theme="dark"] .us-item:hover {
    background: #252525;
}
[data-theme="dark"] .us-item-open {
    border-color: #444;
}
[data-theme="dark"] .us-item-open:hover {
    background: #1a2332;
}
[data-theme="dark"] .user-stories-add-btn {
    border-color: #444;
    color: #c2410c;
}
[data-theme="dark"] .user-stories-add-btn:hover {
    background: #2a1a10;
    border-color: #c2410c;
}
[data-theme="dark"] .wireframe-drawer {
    background: var(--bg-card);
    border-top-color: #333;
}
[data-theme="dark"] .wireframe-journey-name {
    color: #e5e5e5;
}
[data-theme="dark"] .wireframe-journey-name:hover,
[data-theme="dark"] .wireframe-journey-name:focus {
    border-color: #555;
    background: #252525;
}
[data-theme="dark"] .wireframe-element-btn {
    background: #252525;
    border-color: #444;
    color: #ccc;
}
[data-theme="dark"] .wireframe-element-btn:hover {
    background: #333;
}
[data-theme="dark"] .wireframe-toolbar-sep {
    background: #444;
}
[data-theme="dark"] .wireframe-tool-btn {
    border-color: #444;
    color: #ccc;
}
[data-theme="dark"] .wireframe-tool-btn:hover {
    background: #333;
}
[data-theme="dark"] .wireframe-canvas-wrap {
    background: #181818;
}
[data-theme="dark"] .wireframe-element {
    background: #1e1e1e;
    border-color: #444;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
[data-theme="dark"] .wireframe-element.selected {
    border-color: #3b82f6;
}
[data-theme="dark"] .wf-connection {
    stroke: #888;
}
[data-theme="dark"] .wf-connection:hover {
    stroke: #ef4444;
}
[data-theme="dark"] .wf-el-connector-handle {
    border-color: #1e1e1e;
}
[data-theme="dark"] .wf-el-label-input {
    background: #252525;
    color: #e5e5e5;
    border-color: #3b82f6;
}
[data-theme="dark"] .wf-preview-input {
    background: #252525;
    border-color: #444;
}
[data-theme="dark"] .wf-preview-nav {
    background: #252525;
    border-color: #444;
}
[data-theme="dark"] .wf-preview-line {
    background: #444;
}
[data-theme="dark"] .wf-preview-bubble {
    background: #2a2a4a;
}
[data-theme="dark"] .wf-preview-bubble.reply {
    background: #1a2e1a;
}
[data-theme="dark"] .wf-preview-diamond {
    background: #3d2e0a;
    border-color: #d97706;
}
[data-theme="dark"] .wf-connection-label {
    fill: #999;
}
[data-theme="dark"] .wireframe-present-overlay {
    background: #121212;
}
[data-theme="dark"] .wireframe-present-header {
    background: #1e1e1e;
    border-bottom-color: #333;
}
[data-theme="dark"] .wireframe-present-title {
    color: #e5e5e5;
}
[data-theme="dark"] .wireframe-present-close {
    border-color: #444;
    color: #999;
}
[data-theme="dark"] .wireframe-present-close:hover {
    background: #333;
    color: #e5e5e5;
}
[data-theme="dark"] #wireframe-arrow polygon {
    fill: #888;
}

/* ── Focus Mode ── */
.section-header .section-subtitle {
    flex: 1;
}
.focus-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #666;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
    flex-shrink: 0;
    box-sizing: border-box;
    text-decoration: none;
    white-space: nowrap;
}

.focus-mode-toggle .focus-mode-label {
    line-height: 1;
}
.focus-mode-toggle:hover {
    border-color: #999;
    color: #333;
}
.focus-mode-toggle.active {
    background: #333;
    border-color: #333;
    color: #fff;
}
.focus-mode-toggle svg {
    width: 14px;
    height: 14px;
}

body.focus-mode .dashboard-header {
    display: none;
}
body.focus-mode .toolbar-drawer-overlay,
body.focus-mode .toolbar-drawer {
    display: none;
}
body.focus-mode .bottom-panels {
    display: none;
}
body.focus-mode .add-group-btn {
    display: none;
}
body.focus-mode .dashboard-wrap {
    padding-top: 20px;
}

[data-theme="dark"] .focus-mode-toggle {
    background: #1e1e1e;
    border-color: #444;
    color: #999;
}
[data-theme="dark"] .focus-mode-toggle:hover {
    border-color: #666;
    color: #ccc;
}
[data-theme="dark"] .focus-mode-toggle.active {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #111;
}

/* ── My Day Modal ── */
.myday-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9998;
}
.myday-modal-overlay.active { display: block; }
.myday-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    width: 640px;
    max-width: 92vw;
    max-height: 80vh;
    z-index: 9999;
    overflow: hidden;
    display: none;
    flex-direction: column;
}
.myday-modal.active { display: flex; }
.myday-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}
.myday-modal-header h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: #111;
}
.myday-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.myday-overdue-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    user-select: none;
}
.myday-overdue-toggle input { margin: 0; }
.myday-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.myday-modal-close:hover { color: #333; }
.myday-modal-body {
    overflow-y: auto;
    padding: 16px 20px 20px;
    flex: 1;
}
.myday-empty {
    text-align: center;
    color: #999;
    padding: 30px 0;
    font-size: 13px;
}
.myday-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.myday-table th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    font-weight: 600;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
}
.myday-table td {
    padding: 8px;
    border-bottom: 1px solid #f5f5f5;
    color: #333;
    vertical-align: middle;
}
.myday-table tr:last-child td { border-bottom: none; }
.myday-row { cursor: pointer; transition: background 0.15s; }
.myday-row:hover { background: #f5f5f5; }
[data-theme="dark"] .myday-row:hover { background: #2a2a2a; }
.myday-task-name { font-weight: 500; }
.myday-project-name {
    color: #888;
    font-size: 12px;
}
.myday-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #f0f0f0;
    color: #555;
}
.myday-overdue {
    color: #e74c3c;
    font-size: 11px;
    font-weight: 600;
}
.myday-today {
    color: #2ecc71;
    font-size: 11px;
    font-weight: 600;
}
.myday-btn-active {
    background: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
}

[data-theme="dark"] .myday-modal {
    background: #1e1e1e;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
[data-theme="dark"] .myday-modal-header {
    border-bottom-color: #333;
}
[data-theme="dark"] .myday-modal-header h3 { color: #e5e5e5; }
[data-theme="dark"] .myday-modal-close { color: #666; }
[data-theme="dark"] .myday-modal-close:hover { color: #ccc; }
[data-theme="dark"] .myday-table th { color: #777; border-bottom-color: #333; }
[data-theme="dark"] .myday-table td { color: #ccc; border-bottom-color: #2a2a2a; }
[data-theme="dark"] .myday-project-name { color: #777; }
[data-theme="dark"] .myday-status { background: #2a2a2a; color: #aaa; }
[data-theme="dark"] .myday-empty { color: #666; }
[data-theme="dark"] .myday-overdue-toggle { color: #999; }

/* ── Workspace Dropdown ── */
.ws-dropdown {
    position: relative;
}
.ws-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 2px;
    background: #fff;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s;
    white-space: nowrap;
    text-transform: capitalize;
}
.ws-dropdown-btn:hover {
    border-color: #999;
}
.ws-dropdown-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ws-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 170px;
    padding: 4px 0;
    z-index: 1000;
}
.ws-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
    text-transform: capitalize;
}
.ws-dropdown-item:hover {
    background: #f5f5f5;
}
.ws-dropdown-item.active {
    font-weight: 600;
}
.ws-dropdown-item::after {
    content: '';
    margin-left: auto;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.ws-dropdown-item.active::after {
    content: '';
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
[data-theme="dark"] .ws-dropdown-item.active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5' stroke='%23ccc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") ;
}
.ws-dropdown-item-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ws-dropdown-divider {
    height: 1px;
    background: #eee;
    margin: 4px 0;
}
.ws-dropdown-action {
    padding: 6px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s;
}
.ws-dropdown-action:hover {
    color: #333;
}

[data-theme="dark"] .ws-dropdown-btn {
    background: var(--bg-input, #1e1e1e);
    border-color: var(--border-input, #444);
    color: var(--text-primary, #ccc);
}
[data-theme="dark"] .ws-dropdown-btn:hover {
    border-color: var(--text-muted, #666);
}
[data-theme="dark"] .ws-dropdown-menu {
    background: var(--bg-card, #1e1e1e);
    border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
[data-theme="dark"] .ws-dropdown-item {
    color: var(--text-primary, #ccc);
}
[data-theme="dark"] .ws-dropdown-item:hover {
    background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .ws-dropdown-divider {
    background: var(--border-input, #333);
}
[data-theme="dark"] .ws-dropdown-action {
    color: var(--text-muted, #777);
}
[data-theme="dark"] .ws-dropdown-action:hover {
    color: var(--text-primary, #ccc);
}

/* ── TOTP 2FA ── */
.totp-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 4px;
    color: #166534;
    font-size: 13px;
    margin-bottom: 16px;
}
.totp-status svg { flex-shrink: 0; }
.totp-qr-container { text-align: center; margin: 20px 0; }
.totp-qr-container img { border: 1px solid #eee; border-radius: 6px; padding: 8px; background: #fff; }
.totp-manual-key {
    display: block;
    text-align: center;
    font-size: 14px;
    letter-spacing: 3px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    margin: 12px 0;
    font-family: monospace;
    word-break: break-all;
}
.totp-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 16px 0;
}
.totp-recovery-codes code {
    display: block;
    text-align: center;
    font-size: 14px;
    padding: 8px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: 2px;
}
.totp-recovery-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 4px;
    color: #92400e;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.totp-btn-secondary {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    padding: 8px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.totp-btn-secondary:hover { background: #f0f0f0; border-color: #bbb; }
.totp-btn-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    color: #b91c1c;
    padding: 8px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.totp-btn-danger:hover { background: #fee2e2; border-color: #f87171; }
.users-2fa-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
}
.users-reset-totp-btn {
    color: #ccc;
}
.users-reset-totp-btn:hover { background: #fef2f2; color: #b91c1c; }

/* TOTP dark mode */
[data-theme="dark"] .totp-status { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.2); color: #4ade80; }
[data-theme="dark"] .totp-manual-key { background: #1e1e1e; border-color: #333; color: #ccc; }
[data-theme="dark"] .totp-recovery-codes code { background: #1e1e1e; border-color: #333; color: #ccc; }
[data-theme="dark"] .totp-recovery-warning { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.2); color: #fbbf24; }
[data-theme="dark"] .totp-btn-secondary { background: #2a2a2a; border-color: #444; color: #ccc; }
[data-theme="dark"] .totp-btn-secondary:hover { background: #333; border-color: #555; }
[data-theme="dark"] .totp-btn-danger { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); color: #f87171; }
[data-theme="dark"] .totp-btn-danger:hover { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .users-2fa-badge { background: rgba(59,130,246,0.15); color: #60a5fa; }
[data-theme="dark"] .users-reset-totp-btn { color: var(--text-muted); }
[data-theme="dark"] .users-reset-totp-btn:hover { color: #f87171; background: rgba(239,68,68,0.1); }
[data-theme="dark"] .totp-qr-container img { border-color: #333; }
[data-theme="dark"] #totp-disable-code,
[data-theme="dark"] #totp-confirm-code,
[data-theme="dark"] #totp-disable-password { background: #1e1e1e; border-color: #444; color: #ccc; }

/* ── View Toggle (Focus Areas / Calendar lozenge) ── */

.view-toggle {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #f5f5f5;
    margin-left: 6px;
    flex-shrink: 0;
    font-family: inherit;
    box-sizing: border-box;
    user-select: none;
}

.view-toggle-option {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 16px;
    border: none;
    background: transparent;
    color: #888;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: none;
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.view-toggle-option svg {
    width: 13px;
    height: 13px;
    transition: color 0.25s ease;
}

.view-toggle-option.active {
    color: #fff;
}

.view-toggle-option:not(.active):hover {
    color: #333;
}

.view-toggle-thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: #333;
    border-radius: 999px;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Only animate after JS marks the toggle "ready" — prevents a load-time slide
   when the saved view is restored from localStorage. */
.view-toggle.ready .view-toggle-thumb {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.view-toggle .view-toggle-option {
    transition: none;
}
.view-toggle.ready .view-toggle-option {
    transition: color 0.25s ease;
}

.view-toggle[data-active="calendar"] .view-toggle-thumb {
    transform: translateX(100%);
}

[data-theme="dark"] .view-toggle {
    background: #1e1e1e;
    border-color: #444;
}

[data-theme="dark"] .view-toggle-option {
    color: #888;
}

[data-theme="dark"] .view-toggle-option.active {
    color: #1e1e1e;
}

[data-theme="dark"] .view-toggle-option:not(.active):hover {
    color: #ccc;
}

[data-theme="dark"] .view-toggle-thumb {
    background: #e5e5e5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── Calendar View ── */

.cal-page-body-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    min-height: 70vh;
}

.cal-inline {
    width: 100%;
}

.cal-grid-wrap {
    flex: 0 0 70%;
    overflow: auto;
    padding: 0 0 16px 0;
    border-right: 1px solid #eee;
    max-height: 80vh;
}

.cal-task-list {
    max-height: 80vh;
}

.cal-grid {
    display: flex;
    flex-direction: column;
    min-width: 700px;
}

.cal-grid-header {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
    border-bottom: 1px solid #eee;
}

.cal-day-header {
    padding: 10px 6px;
    text-align: center;
    font-size: 12px;
    color: #555;
    border-left: 1px solid #f0f0f0;
}

.cal-day-name {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cal-day-date {
    display: block;
    font-size: 16px;
    color: #222;
    margin-top: 2px;
}

.cal-grid-body {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
}

.cal-time-col {
    border-right: 1px solid #eee;
}

.cal-time-cell {
    font-size: 10px;
    color: #aaa;
    text-align: right;
    padding: 2px 6px 0 0;
    border-bottom: 1px solid #f5f5f5;
    box-sizing: border-box;
}

.cal-day-col {
    position: relative;
    border-left: 1px solid #f0f0f0;
}

.cal-slot {
    border-bottom: 1px dashed #f4f4f4;
    box-sizing: border-box;
    transition: background 0.1s;
}

.cal-slot.cal-slot-hour {
    border-bottom-style: solid;
    border-bottom-color: #ececec;
}

.cal-day-col.drag-over .cal-slot {
    background: rgba(255, 165, 0, 0.04);
}

.cal-block {
    position: absolute;
    left: 2px;
    right: 2px;
    background: #fff8ee;
    border: 1px solid #f0d8b8;
    border-left: 3px solid #c2410c;
    border-radius: 3px;
    padding: 4px 22px 4px 6px;
    font-size: 11px;
    color: #333;
    overflow: hidden;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.cal-block-menu-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    color: #c2410c;
    cursor: pointer;
    padding: 0;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.cal-block-menu-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.cal-block.overdue .cal-block-menu-btn {
    color: #c0392b;
}

[data-theme="dark"] .cal-block-menu-btn {
    color: #f0d8b8;
}

[data-theme="dark"] .cal-block-menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.cal-block.dragging {
    opacity: 0.4;
}

/* Synced calendar events (Outlook / Google) — read-only locked blocks */
.cal-event {
    position: absolute;
    left: 2px;
    right: 2px;
    background: repeating-linear-gradient(135deg, #eef2ff, #eef2ff 6px, #e6ecff 6px, #e6ecff 12px);
    border: 1px solid #c7d2fe;
    border-left: 3px solid #4f46e5;
    border-radius: 3px;
    padding: 4px 6px;
    font-size: 11px;
    color: #1e1b4b;
    overflow: hidden;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.1);
    z-index: 1;
}

.cal-event-text {
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.cal-event-meta {
    font-size: 10px;
    color: #4338ca;
    margin-top: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.cal-event-google {
    border-left-color: #16a34a;
    background: repeating-linear-gradient(135deg, #ecfdf5, #ecfdf5 6px, #d1fae5 6px, #d1fae5 12px);
    border-color: #a7f3d0;
    color: #14532d;
}

.cal-event-google .cal-event-meta {
    color: #15803d;
}

[data-theme="dark"] .cal-event {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.4);
    color: #e0e7ff;
}

[data-theme="dark"] .cal-event-meta {
    color: #c7d2fe;
}

[data-theme="dark"] .cal-event-google {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.4);
    color: #d1fae5;
}

[data-theme="dark"] .cal-event-google .cal-event-meta {
    color: #bbf7d0;
}

.cal-block.overdue {
    background: #fdecea;
    border-color: #f5b5b1;
    border-left-color: #c0392b !important;
    color: #7a1f17;
}

.cal-block.overdue .cal-block-meta {
    color: #b85a52;
}

.cal-block:active {
    cursor: grabbing;
}

.cal-block-text {
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.cal-block-meta {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


.cal-task-list {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fafafa;
}

.cal-task-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 10px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}

.cal-task-list-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cal-add-task-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid #c2410c;
    background: #c2410c;
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(194, 65, 12, 0.25);
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.cal-add-task-btn svg {
    width: 11px;
    height: 11px;
}

.cal-add-task-btn:hover {
    background: #9a3409;
    border-color: #9a3409;
    color: #fff;
    box-shadow: 0 2px 6px rgba(194, 65, 12, 0.35);
}

.cal-add-task-btn:active {
    transform: scale(0.95);
}

[data-theme="dark"] .cal-add-task-btn {
    background: #c2410c;
    border-color: #c2410c;
    color: #fff;
}

[data-theme="dark"] .cal-add-task-btn:hover {
    background: #ea580c;
    border-color: #ea580c;
}

/* ── Calendar add-task form ── */

.cal-add-task-form {
    margin: 10px 12px 6px;
    padding: 14px 14px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    text-transform: none;
    letter-spacing: 0;
    color: #333;
    font-weight: 400;
}

.cal-add-task-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    font-weight: 700;
    margin-bottom: 8px;
}

.cal-add-task-title {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #fafafa;
    font-family: inherit;
    font-size: 13px;
    color: #222;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    margin-bottom: 12px;
}

.cal-add-task-title::placeholder {
    color: #aaa;
}

.cal-add-task-title:focus {
    outline: none;
    border-color: #555;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.cal-add-task-title-error {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
}

.cal-add-task-field {
    margin-bottom: 10px;
    min-width: 0;
}

.cal-add-task-field > label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #888;
    margin-bottom: 4px;
}

.cal-add-task-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
}

.cal-add-task-row .cal-add-task-field {
    flex: 0 0 auto;
    width: 100%;
}

.cal-add-task-effort-row {
    display: flex;
    gap: 8px;
}

.cal-add-task-effort-row > div {
    flex: 1 1 0;
    min-width: 0;
}

.cal-add-task-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.cal-add-task-cancel,
.cal-add-task-submit {
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #444;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.cal-add-task-cancel:hover {
    background: #f4f4f4;
    border-color: #b0b0b0;
}

.cal-add-task-submit {
    background: #333;
    border-color: #333;
    color: #fff;
}

.cal-add-task-submit:hover {
    background: #111;
    border-color: #111;
}

.cal-add-task-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[data-theme="dark"] .cal-add-task-form {
    background: var(--bg-card, #1a1a1a);
    border-color: #333;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    color: var(--text-primary, #ddd);
}
[data-theme="dark"] .cal-add-task-header { color: var(--text-muted, #888); }
[data-theme="dark"] .cal-add-task-field > label { color: var(--text-muted, #888); }
[data-theme="dark"] .cal-add-task-title {
    background: var(--bg-input, #1e1e1e);
    border-color: var(--border-input, #3a3a3a);
    color: var(--text-primary, #e0e0e0);
}
[data-theme="dark"] .cal-add-task-title::placeholder { color: #666; }
[data-theme="dark"] .cal-add-task-title:focus {
    border-color: #888;
    background: #232323;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .cal-add-task-cancel {
    background: #1e1e1e;
    border-color: #444;
    color: #ccc;
}
[data-theme="dark"] .cal-add-task-cancel:hover {
    background: #262626;
    border-color: #5a5a5a;
}
[data-theme="dark"] .cal-add-task-submit {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #1e1e1e;
}
[data-theme="dark"] .cal-add-task-submit:hover {
    background: #fff;
    border-color: #fff;
}

.cal-task-list-title {
    flex: 1;
    min-width: 0;
}

.autoschedule-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    color: #444;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.autoschedule-btn svg {
    width: 12px;
    height: 12px;
    color: #888;
    transition: color 0.15s;
}

.autoschedule-btn:hover {
    background: #333;
    border-color: #333;
    color: #fff;
}

.autoschedule-btn:hover svg {
    color: #fff;
}

[data-theme="dark"] .autoschedule-btn {
    background: #1e1e1e;
    border-color: #444;
    color: #ccc;
}

[data-theme="dark"] .autoschedule-btn svg {
    color: #888;
}

[data-theme="dark"] .autoschedule-btn:hover {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #1e1e1e;
}

[data-theme="dark"] .autoschedule-btn:hover svg {
    color: #1e1e1e;
}

.cal-task-list-hint {
    color: #aaa;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

.cal-task-list-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.cal-task-list-empty {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: #aaa;
}

.cal-task-item {
    position: relative;
    background: #fff;
    border: 1px solid #eee;
    border-left: 3px solid #bbb;
    border-radius: 3px;
    padding: 8px 30px 8px 10px;
    margin-bottom: 6px;
    cursor: grab;
    transition: box-shadow 0.15s, transform 0.05s;
}

.cal-task-item-menu-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    cursor: pointer;
    color: #aaa;
    padding: 0;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.cal-task-item-menu-btn:hover {
    background: #f0f0f0;
    color: #333;
}


[data-theme="dark"] .cal-task-item-menu-btn {
    color: var(--text-muted, #888);
}

[data-theme="dark"] .cal-task-item-menu-btn:hover {
    background: var(--bg-hover, #222);
    color: var(--text-primary, #eee);
}

.cal-task-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cal-task-item.dragging {
    opacity: 0.4;
}

.cal-task-item.overdue {
    border-color: #f5b5b1;
    border-left-color: #c0392b !important;
    background: #fdf3f2;
}

.cal-task-item.overdue .cal-task-item-text {
    color: #7a1f17;
}

.cal-task-item.overdue .cal-task-item-deadline {
    color: #c0392b;
    font-weight: 600;
}

.cal-task-item-deadline {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    margin-bottom: 4px;
}

.cal-task-item:active {
    cursor: grabbing;
}

.cal-task-item-text {
    font-size: 13px;
    color: #222;
    line-height: 1.3;
    margin-bottom: 4px;
    word-break: break-word;
}

.cal-task-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    gap: 6px;
}

.cal-task-item-group {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-task-item-effort {
    flex-shrink: 0;
    background: #f1f1f1;
    color: #666;
    padding: 1px 6px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

/* Dark mode */
[data-theme="dark"] .cal-page-body-wrap {
    background: var(--bg-card, #1a1a1a);
    border-color: var(--border-light, #2a2a2a);
}
[data-theme="dark"] .cal-grid-wrap { border-right-color: var(--border-light, #2a2a2a); }
[data-theme="dark"] .cal-grid-header { background: var(--bg-card, #1a1a1a); border-bottom-color: var(--border-light, #2a2a2a); }
[data-theme="dark"] .cal-day-header { color: var(--text-secondary, #aaa); border-left-color: var(--border-light, #2a2a2a); }
[data-theme="dark"] .cal-day-date { color: var(--text-primary, #eee); }
[data-theme="dark"] .cal-time-col { border-right-color: var(--border-light, #2a2a2a); }
[data-theme="dark"] .cal-time-cell { color: var(--text-muted, #777); border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .cal-day-col { border-left-color: var(--border-light, #2a2a2a); }
[data-theme="dark"] .cal-slot { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .cal-slot.cal-slot-hour { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .cal-block {
    background: rgba(194, 65, 12, 0.18);
    border-color: rgba(194, 65, 12, 0.45);
    color: var(--text-primary, #eee);
}
[data-theme="dark"] .cal-block-meta { color: var(--text-muted, #888); }
[data-theme="dark"] .cal-block-remove { color: var(--text-muted, #888); }
[data-theme="dark"] .cal-block-remove:hover { background: rgba(255,255,255,0.08); color: var(--accent-red, #f87171); }
[data-theme="dark"] .cal-task-list { background: var(--bg-secondary, #141414); }
[data-theme="dark"] .cal-task-list-header { color: var(--text-secondary, #aaa); border-bottom-color: var(--border-light, #2a2a2a); }
[data-theme="dark"] .cal-task-list-empty { color: var(--text-muted, #777); }
[data-theme="dark"] .cal-task-item {
    background: var(--bg-card, #1a1a1a);
    border-color: var(--border-light, #2a2a2a);
}
[data-theme="dark"] .cal-task-item-text { color: var(--text-primary, #eee); }
[data-theme="dark"] .cal-task-item-meta { color: var(--text-muted, #888); }
[data-theme="dark"] .cal-task-item-effort { background: var(--bg-input, #222); color: var(--text-secondary, #aaa); }

[data-theme="dark"] .cal-block.overdue {
    background: rgba(229, 57, 53, 0.18);
    border-color: rgba(229, 57, 53, 0.5);
    color: #fca5a5;
}
[data-theme="dark"] .cal-block.overdue .cal-block-meta {
    color: #f5a3a0;
}
[data-theme="dark"] .cal-task-item.overdue {
    background: rgba(229, 57, 53, 0.12);
    border-color: rgba(229, 57, 53, 0.4);
}
[data-theme="dark"] .cal-task-item.overdue .cal-task-item-text {
    color: #fca5a5;
}
[data-theme="dark"] .cal-task-item.overdue .cal-task-item-deadline {
    color: #fca5a5;
}
[data-theme="dark"] .cal-task-item-deadline {
    color: var(--text-muted, #888);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── ORGANISATIONS PAGE ──────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */

.orgs-table {
    background: #fff;
    border: 1px solid #e0e0e0;
}

.orgs-header-row {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 0.6fr 0.8fr 0.6fr;
    gap: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
}

.orgs-header-row span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
}

.orgs-row {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 0.6fr 0.8fr 0.6fr;
    gap: 0;
    padding: 6px 16px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}

.orgs-row:last-child {
    border-bottom: none;
}

.orgs-name-input {
    padding: 6px 8px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #333;
    outline: none;
    min-width: 0;
}

.orgs-name-input:focus {
    background: #f9f9f9;
}

.orgs-invite-code-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.orgs-code {
    display: inline-block;
    padding: 3px 8px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    font-size: 12px;
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    color: #333;
    letter-spacing: 0.12em;
    user-select: all;
    white-space: nowrap;
}

.orgs-copy-btn,
.orgs-regen-btn {
    padding: 3px 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #666;
    background: #f5f5f5;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.orgs-copy-btn:hover,
.orgs-regen-btn:hover {
    background: #eee;
    color: #333;
}

.orgs-user-count {
    display: flex;
    align-items: center;
}

.orgs-users-btn {
    padding: 3px 10px;
    font-size: 12px;
    color: #555;
    background: none;
    border: 1px solid #ddd;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}

.orgs-users-btn:hover {
    border-color: #999;
    color: #333;
    background: #f9f9f9;
}

.orgs-created {
    font-size: 12px;
    color: #888;
}

.orgs-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.orgs-delete-btn {
    padding: 4px 10px;
    border: 1px solid #fecaca;
    background: #fff;
    font-size: 12px;
    color: #b91c1c;
    cursor: pointer;
    border-radius: 2px;
    transition: border-color 0.15s, background 0.15s;
}

.orgs-delete-btn:hover {
    border-color: #b91c1c;
    background: #fef2f2;
}

.orgs-delete-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Add Organisation Form ── */

.add-org-form {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px 20px 16px;
    margin-bottom: 20px;
}

.add-org-fields {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 400px;
}

.add-org-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
}

.add-org-field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.add-org-field input:focus {
    border-color: #999;
    background: #fff;
}

.add-org-error {
    margin-top: 12px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 13px;
}

.add-org-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

/* ── Org Users Modal ── */

.orgs-users-modal {
    max-width: 520px;
    width: 90vw;
}

.orgs-add-user-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.orgs-add-user-row select {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid #ddd;
    border-radius: 2px;
    background: #fff;
    color: #333;
}

#orgs-role-select {
    flex: 0 0 80px;
}

.orgs-modal-users-list {
    max-height: 320px;
    overflow-y: auto;
}

.orgs-modal-user-row {
    display: grid;
    grid-template-columns: 1fr 80px 28px;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.orgs-modal-user-row:last-child {
    border-bottom: none;
}

.orgs-modal-user-name {
    font-size: 13px;
    color: #333;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orgs-modal-user-email {
    display: block;
    font-size: 11px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orgs-modal-role-select {
    font-size: 12px;
    font-family: inherit;
    padding: 2px 4px;
    border: 1px solid #ddd;
    border-radius: 2px;
    background: #fff;
    color: #333;
    cursor: pointer;
}

.orgs-modal-role-select:hover {
    border-color: #999;
}

.orgs-modal-remove-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.15s;
    padding: 0;
}

.orgs-modal-remove-btn:hover {
    color: #b91c1c;
}

.orgs-modal-empty {
    font-size: 13px;
    color: #888;
    text-align: center;
    padding: 24px 0;
}

@media (max-width: 600px) {
    .orgs-header-row,
    .orgs-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .orgs-invite-code-cell {
        flex-wrap: wrap;
    }

    .orgs-add-user-row {
        flex-wrap: wrap;
    }

    .orgs-modal-user-row {
        grid-template-columns: 1fr 70px 28px;
    }
}

/* ── Dark mode: Organisations ── */

[data-theme="dark"] .orgs-table {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .orgs-header-row {
    background: var(--bg-section);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .orgs-row {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .orgs-row:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .orgs-name-input {
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .orgs-name-input:focus {
    background: var(--bg-input);
}

[data-theme="dark"] .orgs-code {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .orgs-copy-btn,
[data-theme="dark"] .orgs-regen-btn {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-secondary);
}

[data-theme="dark"] .orgs-copy-btn:hover,
[data-theme="dark"] .orgs-regen-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .orgs-users-btn {
    color: var(--text-secondary);
    border-color: var(--border-input);
}

[data-theme="dark"] .orgs-users-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

[data-theme="dark"] .orgs-created {
    color: var(--text-muted);
}

[data-theme="dark"] .orgs-delete-btn {
    background: transparent;
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

[data-theme="dark"] .orgs-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .add-org-form {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .add-org-field label {
    color: var(--text-muted);
}

[data-theme="dark"] .add-org-field input {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .add-org-field input:focus {
    background: var(--bg-card);
    border-color: var(--text-muted);
}

[data-theme="dark"] .add-org-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

[data-theme="dark"] .orgs-add-user-row {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .orgs-add-user-row select {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .orgs-modal-user-row {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .orgs-modal-user-name {
    color: var(--text-primary);
}

[data-theme="dark"] .orgs-modal-user-email {
    color: var(--text-muted);
}

[data-theme="dark"] .orgs-modal-role-select {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

[data-theme="dark"] .orgs-modal-remove-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .orgs-modal-remove-btn:hover {
    color: #f87171;
}

[data-theme="dark"] .orgs-modal-empty {
    color: var(--text-muted);
}