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

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --border: #e1e4e8;
  --text: #24292f;
  --text-muted: #6e7781;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-text: #ffffff;
  --danger: #dc2626;
  --high: #ef4444;
  --medium: #f59e0b;
  --low: #22c55e;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; }

/* ── Auth ── */
.auth-wrap { min-height: 100dvh; display: flex; align-items: center;
             justify-content: center; padding: 1rem; }
.auth-card  { background: var(--surface); border: 1px solid var(--border);
              border-radius: var(--radius); padding: 2rem; width: 100%;
              max-width: 380px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 1.6rem; margin-bottom: .25rem; }
.subtitle   { color: var(--text-muted); margin-bottom: 1.5rem; }
.switch     { margin-top: 1rem; text-align: center; color: var(--text-muted); font-size: .9rem; }
.switch a   { color: var(--primary); text-decoration: none; }

/* ── Forms ── */
label       { display: flex; flex-direction: column; gap: .3rem;
              margin-bottom: 1rem; font-size: .9rem; font-weight: 500; }
input       { padding: .55rem .75rem; border: 1px solid var(--border);
              border-radius: var(--radius); font-size: .95rem; width: 100%;
              background: var(--surface); color: var(--text);
              transition: border-color .15s; }
input:focus { outline: none; border-color: var(--primary);
              box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

.btn-primary { width: 100%; padding: .65rem; background: var(--primary);
               color: var(--primary-text); border: none; border-radius: var(--radius);
               font-size: 1rem; font-weight: 600; cursor: pointer;
               transition: background .15s; }
.btn-primary:hover { background: var(--primary-hover); }

.btn-ghost  { background: none; border: 1px solid var(--border);
              border-radius: var(--radius); padding: .35rem .75rem;
              cursor: pointer; font-size: .85rem; color: var(--text);
              text-decoration: none; transition: background .15s; }
.btn-ghost:hover { background: var(--surface-2); }

.error      { background: #fef2f2; border: 1px solid #fca5a5; color: var(--danger);
              border-radius: var(--radius); padding: .6rem .9rem;
              margin-bottom: 1rem; font-size: .9rem; }

/* ── App shell ── */
.app        { display: flex; flex-direction: column; min-height: 100dvh; }

.topbar     { background: var(--surface); border-bottom: 1px solid var(--border);
              padding: .75rem 1rem; display: flex; align-items: center; gap: .75rem;
              position: sticky; top: 0; z-index: 10; }
.logo       { font-weight: 700; font-size: 1.1rem; }
.user-name  { color: var(--text-muted); font-size: .9rem; }

.user-name-btn { background: none; border: 1px solid transparent; border-radius: var(--radius);
                 padding: .35rem .65rem; cursor: pointer; font-size: .875rem;
                 color: var(--text-muted); font-weight: 500; transition: all .15s; }
.user-name-btn:hover { border-color: var(--border); background: var(--surface-2); color: var(--text); }

.help-btn { display: inline-flex; align-items: center; justify-content: center;
            width: 26px; height: 26px; border-radius: 50%;
            border: 1px solid var(--border); background: none;
            color: var(--text-muted); font-size: .8rem; font-weight: 700;
            text-decoration: none; transition: all .15s; flex-shrink: 0; }
.help-btn:hover { border-color: var(--primary); color: var(--primary);
                  background: color-mix(in srgb, var(--primary) 8%, transparent); }

.search-box { flex: 1; max-width: 360px; margin: 0 auto;
              padding: .4rem .75rem; border: 1px solid var(--border);
              border-radius: 999px; font-size: .9rem; background: var(--surface-2);
              color: var(--text); transition: border-color .15s, box-shadow .15s; }
.search-box:focus { outline: none; border-color: var(--primary);
                    box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.filter-bar { display: flex; gap: .5rem; padding: .75rem 1rem;
              overflow-x: auto; background: var(--surface);
              border-bottom: 1px solid var(--border); }
.filter-btn { white-space: nowrap; padding: .35rem .85rem;
              border-radius: 999px; border: 1px solid var(--border);
              background: none; cursor: pointer; font-size: .85rem;
              color: var(--text-muted); transition: all .15s; }
.filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.filter-btn.active { background: var(--primary); border-color: var(--primary);
                     color: var(--primary-text); }

/* ── Modern filter toolbar ── */
.filter-toolbar { background: var(--surface-2); border-bottom: 1px solid var(--border);
                  padding: .45rem 1rem; display: flex; align-items: center;
                  gap: .45rem; position: relative; min-height: 40px; }

.filter-trigger { display: inline-flex; align-items: center; gap: .35rem;
                  padding: .28rem .75rem; border-radius: 6px;
                  border: 1px dashed var(--border); background: none;
                  color: var(--text-muted); font-size: .8rem; font-weight: 500;
                  cursor: pointer; white-space: nowrap; transition: all .15s; flex-shrink: 0; }
.filter-trigger:hover,
.filter-trigger.has-filters { border-style: solid; border-color: var(--primary);
                               color: var(--primary); }

.active-chips { display: flex; align-items: center; gap: .35rem;
                flex-wrap: nowrap; overflow-x: auto; flex: 1;
                scrollbar-width: none; }
.active-chips::-webkit-scrollbar { display: none; }

.filter-chip  { display: inline-flex; align-items: center; gap: .3rem;
                padding: .22rem .45rem .22rem .65rem; border-radius: 999px;
                background: color-mix(in srgb, var(--primary) 12%, transparent);
                border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
                color: var(--primary); font-size: .76rem; font-weight: 500;
                white-space: nowrap; flex-shrink: 0; }
.filter-chip-remove { display: inline-flex; align-items: center; justify-content: center;
                      width: 15px; height: 15px; border-radius: 50%; border: none;
                      background: none; color: inherit; cursor: pointer; opacity: .65;
                      font-size: 1rem; padding: 0; line-height: 1; transition: opacity .1s, background .1s; }
.filter-chip-remove:hover { opacity: 1; background: color-mix(in srgb, var(--primary) 25%, transparent); }

.clear-filters-btn { padding: .25rem .5rem; border: none; background: none;
                     color: var(--text-muted); font-size: .76rem; cursor: pointer;
                     white-space: nowrap; flex-shrink: 0; border-radius: 4px;
                     transition: color .12s; }
.clear-filters-btn:hover { color: #ef4444; }

/* ── Filter popover ── */
.filter-popover { position: absolute; top: calc(100% + 6px); left: 1rem; z-index: 200;
                  background: var(--surface); border: 1px solid var(--border);
                  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
                  padding: .8rem; min-width: 300px; display: flex; flex-direction: column;
                  gap: .7rem; animation: popover-in .12s ease; }
@keyframes popover-in { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform: none; } }
.filter-popover-section { display: flex; flex-direction: column; gap: .35rem; }
.filter-popover-label { font-size: .68rem; font-weight: 700; text-transform: uppercase;
                        letter-spacing: .07em; color: var(--text-muted); padding: 0 .1rem; }
.filter-popover-options { display: flex; flex-wrap: wrap; gap: .3rem; }
.filter-opt { padding: .22rem .65rem; border-radius: 999px; border: 1px solid var(--border);
              background: none; color: var(--text-muted); font-size: .79rem; font-weight: 500;
              cursor: pointer; transition: all .12s; white-space: nowrap; }
.filter-opt:hover    { border-color: var(--primary); color: var(--primary); }
.filter-opt.selected { background: color-mix(in srgb, var(--primary) 12%, transparent);
                       border-color: color-mix(in srgb, var(--primary) 40%, transparent);
                       color: var(--primary); }
.filter-popover-sep  { height: 1px; background: var(--border); margin: .05rem 0; }
.filter-popover select { width: 100%; padding: .32rem .5rem; border-radius: 6px;
                          border: 1px solid var(--border); background: var(--surface);
                          color: var(--text); font-size: .81rem; cursor: pointer; }
.filter-select:focus  { outline: none; border-color: var(--primary); }
[data-theme="dark"] .filter-select   { background: var(--surface-2); }
[data-theme="dark"] .filter-popover  { box-shadow: 0 8px 32px rgba(0,0,0,.45); }
[data-theme="dark"] .filter-popover select { background: var(--surface-2); }

/* ── Task list ── */
.task-list  { padding: 1rem; display: flex; flex-direction: column;
              gap: .75rem; max-width: 800px; width: 100%; margin: 0 auto; }

.task-card  { background: var(--surface); border: 1px solid var(--border);
              border-radius: var(--radius); padding: 0;
              box-shadow: var(--shadow); transition: box-shadow .15s;
              overflow: hidden; }
.task-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.task-card.done { opacity: .55; }
.task-card.expanded { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,.15); }

.task-summary { padding: 1rem; cursor: pointer; user-select: none; }
.task-summary:hover { background: var(--surface-2); }

.task-meta  { display: flex; align-items: center; gap: .5rem;
              flex-wrap: wrap; margin-bottom: .5rem; }
.expand-arrow { margin-left: auto; color: var(--text-muted); font-size: .75rem; }
.badge      { font-size: .75rem; font-weight: 600; padding: .15rem .55rem;
              border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.badge.email  { background: #dbeafe; color: #1e40af; }
.badge.jira   { background: #ede9fe; color: #5b21b6; }
.badge.high   { background: #fee2e2; color: #991b1b; }
.badge.medium { background: #fef3c7; color: #92400e; }
.badge.low    { background: #dcfce7; color: #166534; }

.due-date-wrap { display: inline-flex; align-items: center; }
.due-date   { font-size: .8rem; color: var(--text-muted); }
.due-date.overdue    { color: var(--high); font-weight: 600; }
.due-date.due-date-empty { display: none; }

.detail-row .due-date-input {
  font-size: .85rem; padding: .2rem .4rem; border-radius: 5px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer; }
.detail-row .due-date-input:hover { border-color: var(--primary); }
[data-theme="dark"] .detail-row .due-date-input { color-scheme: dark; }

.task-title { font-size: 1rem; font-weight: 600; }

/* Expanded detail panel */
.task-detail  { border-top: 1px solid var(--border); padding: 1rem;
                background: var(--surface-2); display: flex; flex-direction: column; gap: .75rem; }

.detail-row   { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; }
.detail-label { color: var(--text-muted); white-space: nowrap; min-width: 80px; font-size: .8rem; }
.detail-value { color: var(--text); flex: 1; }

.email-subject { font-weight: 600; color: var(--primary); word-break: break-word; }
.task-desc     { color: var(--text); line-height: 1.55; }
.task-source-id { font-family: monospace; font-size: .8rem; color: var(--text-muted); word-break: break-all; }

.assignee-badge { font-size: .75rem; color: var(--primary);
                  background: color-mix(in srgb, var(--primary) 10%, transparent);
                  padding: .1rem .45rem; border-radius: 99px; white-space: nowrap; margin-left: .5rem; }

.task-assignee { display: flex; align-items: center; gap: .5rem;
                 padding: .4rem .5rem; margin-bottom: .25rem;
                 background: var(--surface-2); border-radius: var(--radius);
                 font-size: .82rem; border: 1px solid var(--border); }
.assignee-label { color: var(--text-muted); }
.assignee-name  { font-weight: 600; }
.assignee-jira  { margin-left: auto; font-family: monospace; font-size: .78rem;
                  color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent);
                  padding: .1rem .4rem; border-radius: 4px; }

.task-actions { display: flex; align-items: center; gap: .5rem;
                flex-wrap: wrap; padding-top: .25rem; }
.status-select, .priority-select {
                 padding: .3rem .5rem; border: 1px solid var(--border);
                 border-radius: var(--radius); font-size: .85rem;
                 background: var(--surface); color: var(--text); cursor: pointer; }

.btn-assign { padding: .3rem .65rem; border: 1px solid var(--primary);
              color: var(--primary); background: transparent; border-radius: var(--radius);
              font-size: .82rem; font-weight: 600; cursor: pointer;
              transition: background .15s, color .15s; }
.btn-assign:hover { background: var(--primary); color: var(--primary-text); }

.btn-request-update { padding: .3rem .65rem; border: 1px solid var(--border);
                      color: var(--text-muted); background: transparent;
                      border-radius: var(--radius); font-size: .82rem; cursor: pointer;
                      transition: border-color .15s, color .15s; }
.btn-request-update:hover { border-color: var(--primary); color: var(--primary); }

.ntask-hint { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }

.loading    { text-align: center; color: var(--text-muted); padding: 3rem; }
.empty      { text-align: center; color: var(--text-muted); padding: 3rem;
              font-size: .95rem; }

.hidden     { display: none !important; }

.btn-ms     { display: flex; align-items: center; justify-content: center; gap: .6rem;
              width: 100%; padding: .65rem; background: var(--surface); color: var(--text);
              border: 1px solid var(--border); border-radius: var(--radius);
              font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none;
              transition: background .15s, box-shadow .15s; }
.btn-ms:hover { background: var(--surface-2); box-shadow: 0 2px 6px rgba(0,0,0,.1); }

/* ── Alerts section ── */
.alerts-section { max-width: 800px; width: 100%; margin: 0 auto .75rem;
                  padding: 0 1rem; }
.alerts-toggle  { width: 100%; text-align: left; padding: .6rem .9rem;
                  background: #fffbeb; border: 1px solid #fcd34d;
                  border-radius: var(--radius); cursor: pointer;
                  font-size: .9rem; font-weight: 500; color: #92400e;
                  display: flex; align-items: center; gap: .4rem; }
.alerts-toggle:hover { background: #fef3c7; }
.toggle-arrow   { margin-left: auto; }
.alerts-body    { border: 1px solid #fcd34d; border-top: none;
                  border-radius: 0 0 var(--radius) var(--radius);
                  background: #fffdf0; }
.alert-row      { display: flex; align-items: center; gap: .6rem;
                  padding: .5rem .9rem; border-bottom: 1px solid #fef3c7;
                  font-size: .875rem; }
.alert-row:last-child { border-bottom: none; }
.alert-title    { flex: 1; color: var(--text); }
.alert-time     { color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
.alert-dismiss  { padding: .2rem .5rem; font-size: .8rem; color: #166534;
                  border-color: #86efac; }

/* ── Settings modal ── */
.settings-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5);
                    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
                    z-index: 100; opacity: 0; pointer-events: none;
                    transition: opacity .2s; }
.settings-overlay.open { opacity: 1; pointer-events: all; }

.settings-drawer  { position: fixed; top: 50%; left: 50%;
                    transform: translate(-50%, calc(-50% + 16px)) scale(.98);
                    width: min(680px, 95vw); max-height: min(85vh, 680px);
                    background: var(--surface); border: 1px solid var(--border);
                    border-radius: 16px; z-index: 101;
                    box-shadow: 0 24px 80px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.12);
                    display: flex; flex-direction: column;
                    opacity: 0; pointer-events: none;
                    transition: transform .22s cubic-bezier(.34,1.4,.64,1), opacity .2s;
                    overflow: hidden; }
.settings-drawer.open { transform: translate(-50%, -50%) scale(1);
                         opacity: 1; pointer-events: all; }

.settings-header  { display: flex; align-items: center; justify-content: space-between;
                    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
                    flex-shrink: 0; }
.settings-title   { font-size: 1.15rem; font-weight: 700; }
.settings-close   { background: none; border: none; cursor: pointer; font-size: 1.1rem;
                    color: var(--text-muted); padding: .3rem .45rem; border-radius: var(--radius);
                    line-height: 1; transition: background .15s, color .15s; }
.settings-close:hover { background: var(--surface-2); color: var(--text); }

/* ── Tab strip ── */
.settings-tabs    { display: flex; border-bottom: 1px solid var(--border);
                    flex-shrink: 0; padding: 0 1.5rem; gap: .25rem; }
.settings-tab     { padding: .75rem 1rem; background: none; border: none; outline: none;
                    border-bottom: 2px solid transparent; margin-bottom: -1px;
                    cursor: pointer; font-size: .9rem; font-weight: 500;
                    color: var(--text-muted); transition: color .15s, border-color .15s; }
.settings-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px;
                               border-radius: 4px; }
.settings-tab:hover  { color: var(--text); }
.settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ── Tab panels ── */
.settings-body    { flex: 1; min-height: 260px; overflow: hidden;
                    display: flex; flex-direction: column; }
.settings-panel   { display: none; flex-direction: column; flex: 1;
                    overflow: hidden; min-height: 0; }
.settings-panel.active { display: flex; }

.settings-hint    { font-size: .82rem; color: var(--text-muted); line-height: 1.5;
                    padding: 1rem 1.5rem .5rem; flex-shrink: 0; }

.settings-list    { list-style: none; flex: 1; overflow-y: auto; min-height: 0;
                    padding: .75rem 1.5rem 1rem;
                    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
                    align-content: start; }
.settings-list:empty::after { content: "Nothing added yet."; grid-column: 1/-1;
                    font-size: .85rem; color: var(--text-muted); padding: .5rem 0; }

/* Single-column for priority senders (fewer items, simpler layout) */
#priority-senders-list { grid-template-columns: 1fr; }

.settings-item    { display: flex; align-items: center; gap: .5rem;
                    background: var(--surface-2); border: 1px solid var(--border);
                    border-radius: var(--radius); padding: .6rem .85rem;
                    font-size: .875rem; transition: border-color .15s; }
.settings-item:hover { border-color: var(--primary); }
.settings-item-info { flex: 1; overflow: hidden; }
.settings-item-name  { font-weight: 600; white-space: nowrap; overflow: hidden;
                        text-overflow: ellipsis; font-size: .875rem; }
.settings-item-email { font-size: .78rem; color: var(--text-muted); white-space: nowrap;
                        overflow: hidden; text-overflow: ellipsis; }
.settings-remove  { background: none; border: none; cursor: pointer; color: var(--text-muted);
                    font-size: 1rem; line-height: 1; padding: .15rem .3rem;
                    border-radius: 4px; transition: color .15s, background .15s; flex-shrink: 0; }
.settings-remove:hover { color: var(--danger); background: #fef2f2; }
.settings-item-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }

/* Role badges */
.role-badge   { display: inline-flex; align-items: center; padding: .15rem .55rem;
                border-radius: 999px; font-size: .72rem; font-weight: 600;
                white-space: nowrap; }
.role-manager { background: color-mix(in srgb, var(--primary) 12%, transparent);
                color: var(--primary);
                border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.role-member  { background: var(--surface-2); color: var(--text-muted);
                border: 1px solid var(--border); }
.settings-hint .role-badge { margin-left: .5rem; vertical-align: middle; }

.role-toggle-btn { padding: .18rem .5rem; border-radius: 999px; font-size: .72rem;
                   font-weight: 500; cursor: pointer; white-space: nowrap;
                   border: 1px solid var(--border); background: none; color: var(--text-muted);
                   transition: all .12s; }
.role-toggle-btn:hover { border-color: var(--primary); color: var(--primary); }

.settings-add-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
                     padding: .85rem 1.5rem; border-top: 1px solid var(--border);
                     flex-shrink: 0; background: var(--surface); }
.settings-input   { padding: .45rem .7rem; border: 1px solid var(--border);
                    border-radius: var(--radius); font-size: .875rem;
                    background: var(--surface-2); color: var(--text);
                    transition: border-color .15s, box-shadow .15s; flex: 1; min-width: 120px; }
.settings-input:focus { outline: none; border-color: var(--primary);
                         box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.btn-add          { padding: .45rem 1.1rem; white-space: nowrap;
                    background: var(--primary); color: var(--primary-text); border: none;
                    border-radius: var(--radius); font-size: .875rem; font-weight: 600;
                    cursor: pointer; transition: background .15s; flex-shrink: 0; }
.btn-add:hover    { background: var(--primary-hover); }

.settings-footer  { padding: 1rem 1.5rem; border-top: 1px solid var(--border);
                    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }

/* ── Top nav ── */
.topnav       { display: flex; gap: .25rem; }
.topnav-link  { padding: .35rem .75rem; border-radius: var(--radius);
                font-size: .875rem; font-weight: 500; color: var(--text-muted);
                text-decoration: none; transition: all .15s; }
.topnav-link:hover { background: var(--surface-2); color: var(--text); }
.topnav-link.active { background: var(--primary); color: var(--primary-text); }

/* ── Dashboard ── */
.dash-main    { padding: 1.5rem; max-width: 1100px; width: 100%;
                margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }

.stat-grid    { display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 1rem; }

.stat-card    { background: var(--surface); border: 1px solid var(--border);
                border-radius: 12px; padding: 1.5rem 1.75rem;
                box-shadow: var(--shadow); text-decoration: none; display: block; }
.stat-link    { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.stat-link:hover { border-color: var(--primary);
                   box-shadow: 0 4px 14px rgba(37,99,235,.12); }
.stat-value   { font-size: 2.75rem; font-weight: 800; line-height: 1;
                margin-bottom: .4rem; color: var(--text); }
.stat-label   { font-size: .85rem; color: var(--text-muted); font-weight: 500; }

.stat-high  .stat-value  { color: var(--high); }
.stat-alert .stat-value  { color: #d97706; }
.stat-done  .stat-value  { color: #16a34a; }

.dash-section       { display: flex; flex-direction: column; gap: .75rem; }
.dash-section-title { font-size: 1rem; font-weight: 700; color: var(--text);
                      display: flex; align-items: center; gap: .6rem; }
.dash-section-link  { margin-left: auto; font-size: .8rem; font-weight: 500;
                      color: var(--primary); text-decoration: none; }
.dash-section-link:hover { text-decoration: underline; }
.dash-section-count { font-size: .8rem; font-weight: 500; background: var(--surface-2);
                      border: 1px solid var(--border); border-radius: 999px;
                      padding: .1rem .55rem; color: var(--text-muted); }

/* High-priority task strip */
.top-tasks     { display: flex; flex-direction: column; gap: .5rem; }
.top-task-row  { background: var(--surface); border: 1px solid var(--border);
                 border-left: 4px solid var(--high); border-radius: var(--radius);
                 padding: .75rem 1rem; display: flex; align-items: center;
                 gap: .75rem; box-shadow: var(--shadow); }
.top-task-title { flex: 1; font-weight: 600; font-size: .9rem; }
.top-task-due   { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.top-task-due.overdue { color: var(--high); font-weight: 600; }

/* Alert grid */
.alert-grid   { display: grid;
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: .75rem; }

.alert-card   { background: var(--surface); border: 1px solid var(--border);
                border-radius: var(--radius); padding: 1rem;
                box-shadow: var(--shadow); display: flex; flex-direction: column;
                gap: .5rem; transition: box-shadow .15s; }
.alert-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.alert-card.priority-high   { border-left: 4px solid var(--high); }
.alert-card.priority-medium { border-left: 4px solid var(--medium); }
.alert-card.priority-low    { border-left: 4px solid var(--low); }

.alert-card-header { display: flex; align-items: center; gap: .5rem; }
.alert-service     { font-size: .7rem; font-weight: 700; text-transform: uppercase;
                     letter-spacing: .06em; color: var(--text-muted);
                     background: var(--surface-2); border: 1px solid var(--border);
                     border-radius: 999px; padding: .1rem .5rem; white-space: nowrap; }
.alert-card-title  { font-size: .9rem; font-weight: 600; line-height: 1.35;
                     color: var(--text); }
.alert-card-desc   { font-size: .8rem; color: var(--text-muted); line-height: 1.4;
                     display: -webkit-box; -webkit-line-clamp: 2;
                     -webkit-box-orient: vertical; overflow: hidden; }
.alert-card-footer { display: flex; align-items: center; gap: .5rem;
                     margin-top: auto; padding-top: .25rem; }
.alert-card-time   { font-size: .75rem; color: var(--text-muted); flex: 1; }
.alert-dismiss-btn { padding: .25rem .6rem; font-size: .8rem; border-radius: var(--radius);
                     border: 1px solid #86efac; color: #166534; background: none;
                     cursor: pointer; transition: background .15s; }
.alert-dismiss-btn:hover { background: #dcfce7; }

.dash-empty   { color: var(--text-muted); font-size: .9rem; padding: 1rem 0; }

/* recent tasks list on dashboard (reuse top-task-row style) */
.dash-task-list { display: flex; flex-direction: column; gap: .5rem; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .auth-card { padding: 1.5rem; }
  .task-list { padding: .75rem; }
  .task-card { padding: .85rem; }
  .dash-main { padding: .75rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .alert-grid { grid-template-columns: 1fr; }
  .settings-list { grid-template-columns: 1fr; }
  .settings-drawer { max-height: 95vh; }
}

/* ── New task modal ── */
.ntask-overlay  { position: fixed; inset: 0; background: rgba(0,0,0,.5);
                  backdrop-filter: blur(4px); z-index: 100;
                  opacity: 0; pointer-events: none; transition: opacity .2s; }
.ntask-overlay.open { opacity: 1; pointer-events: all; }

.ntask-modal    { position: fixed; top: 50%; left: 50%;
                  transform: translate(-50%, calc(-50% + 16px)) scale(.98);
                  width: min(480px, 95vw); background: var(--surface);
                  border: 1px solid var(--border); border-radius: 16px; z-index: 101;
                  box-shadow: 0 24px 80px rgba(0,0,0,.2);
                  display: flex; flex-direction: column;
                  opacity: 0; pointer-events: none;
                  transition: transform .22s cubic-bezier(.34,1.4,.64,1), opacity .2s; }
.ntask-modal.open { transform: translate(-50%, -50%) scale(1);
                    opacity: 1; pointer-events: all; }

.ntask-header   { display: flex; align-items: center; justify-content: space-between;
                  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border); }
.ntask-title    { font-size: 1.05rem; font-weight: 700; }

.ntask-body     { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.ntask-field    { display: flex; flex-direction: column; gap: .35rem; }
.ntask-label    { font-size: .82rem; font-weight: 600; text-transform: uppercase;
                  letter-spacing: .05em; color: var(--text-muted); }
.ntask-required { color: var(--danger); }
.ntask-input    { padding: .5rem .7rem; border: 1px solid var(--border);
                  border-radius: var(--radius); font-size: .9rem;
                  background: var(--surface-2); color: var(--text);
                  transition: border-color .15s; font-family: inherit; width: 100%; }
.ntask-input:focus { outline: none; border-color: var(--primary);
                     box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.ntask-textarea { resize: vertical; min-height: 70px; }

.ntask-seg      { display: flex; border: 1px solid var(--border);
                  border-radius: var(--radius); overflow: hidden; width: fit-content; }
.ntask-seg-btn  { padding: .35rem 1rem; background: none; border: none;
                  border-right: 1px solid var(--border); cursor: pointer;
                  font-size: .85rem; font-weight: 500; color: var(--text-muted);
                  transition: background .15s, color .15s; }
.ntask-seg-btn:last-child { border-right: none; }
.ntask-seg-btn:hover      { background: var(--surface-2); color: var(--text); }
.ntask-seg-btn.active[data-val="high"]   { background: #fee2e2; color: #991b1b; }
.ntask-seg-btn.active[data-val="medium"] { background: #fef3c7; color: #92400e; }
.ntask-seg-btn.active[data-val="low"]    { background: #dcfce7; color: #166534; }
[data-theme="dark"] .ntask-seg-btn.active[data-val="high"]   { background: #3d1212; color: #f87171; }
[data-theme="dark"] .ntask-seg-btn.active[data-val="medium"] { background: #3d2c0a; color: #fbbf24; }
[data-theme="dark"] .ntask-seg-btn.active[data-val="low"]    { background: #0a3d1a; color: #4ade80; }

.ntask-error    { font-size: .85rem; color: var(--danger); margin-top: -.25rem; }
.ntask-footer   { display: flex; justify-content: flex-end; gap: .75rem;
                  padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.ntask-submit   { width: auto; padding: .5rem 1.4rem; }

/* ── Weekly Report ── */
.report-main        { padding: 1.5rem; max-width: 820px; width: 100%; margin: 0 auto; }

.report-card        { background: var(--surface); border: 1px solid var(--border);
                      border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }

.report-card-header { padding: 1.75rem 2rem 1.5rem; border-bottom: 1px solid var(--border);
                      background: var(--surface-2); }
.report-title       { font-size: 1.35rem; font-weight: 800; margin-bottom: 1rem; }

.report-meta-row    { display: flex; gap: 2rem; flex-wrap: wrap; }
.report-meta-field  { display: flex; flex-direction: column; gap: .3rem; }
.report-meta-label  { font-size: .78rem; font-weight: 600; text-transform: uppercase;
                      letter-spacing: .06em; color: var(--text-muted); }
.report-meta-value  { font-size: .95rem; font-weight: 500; }
.report-meta-input  { font-size: .95rem; padding: .4rem .65rem; border: 1px solid var(--border);
                      border-radius: var(--radius); background: var(--surface); color: var(--text);
                      min-width: 220px; transition: border-color .15s; }
.report-meta-input:focus { outline: none; border-color: var(--primary);
                            box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.report-week-input  { min-width: 160px; cursor: pointer; }
.report-week-input::-webkit-calendar-picker-indicator { cursor: pointer;
                      filter: var(--calendar-icon-filter, none); }
[data-theme="dark"] { --calendar-icon-filter: invert(1); }

.report-section     { padding: 1.5rem 2rem; border-bottom: 1px solid var(--border); }
.report-section:last-of-type { border-bottom: none; }

.report-section-header { display: flex; align-items: center; gap: .75rem;
                          flex-wrap: wrap; margin-bottom: 1rem; }
.report-section-title  { font-size: 1rem; font-weight: 700; display: flex;
                          align-items: center; gap: .5rem; }
.report-sec-num     { display: inline-flex; align-items: center; justify-content: center;
                      width: 1.5rem; height: 1.5rem; background: var(--primary);
                      color: var(--primary-text); border-radius: 50%;
                      font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.report-section-hint { font-size: .8rem; font-weight: 400; color: var(--text-muted); }
.report-prefill-badge { font-size: .75rem; color: var(--primary); background: rgba(37,99,235,.08);
                         border: 1px solid rgba(37,99,235,.2); border-radius: 999px;
                         padding: .15rem .6rem; white-space: nowrap; }
[data-theme="dark"] .report-prefill-badge { background: rgba(88,166,255,.1);
                                             border-color: rgba(88,166,255,.25); }

/* Bullet list */
.bullet-list        { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .75rem; }
.bullet-row         { display: flex; align-items: center; gap: .5rem; }
.bullet-input       { flex: 1; padding: .4rem .65rem; border: 1px solid var(--border);
                      border-radius: var(--radius); font-size: .9rem;
                      background: var(--surface); color: var(--text); transition: border-color .15s; }
.bullet-input:focus { outline: none; border-color: var(--primary);
                      box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.bullet-remove      { background: none; border: none; cursor: pointer; color: var(--text-muted);
                      font-size: .85rem; padding: .25rem .35rem; border-radius: 4px;
                      line-height: 1; transition: color .15s, background .15s; flex-shrink: 0; }
.bullet-remove:hover { color: var(--danger); background: #fef2f2; }
[data-theme="dark"] .bullet-remove:hover { background: #2d1215; }

.bullet-controls    { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }

/* ── Custom task dropdown ── */
.task-dropdown      { position: relative; flex: 1; min-width: 0; }

.task-dd-trigger    { width: 100%; display: flex; align-items: center; gap: .5rem;
                      padding: .45rem .75rem; background: var(--surface-2);
                      border: 1px solid var(--border); border-radius: var(--radius);
                      cursor: pointer; font-size: .875rem; color: var(--text);
                      transition: border-color .15s, box-shadow .15s; text-align: left; }
.task-dd-trigger:hover  { border-color: var(--primary); }
.task-dropdown.open .task-dd-trigger { border-color: var(--primary);
                                        box-shadow: 0 0 0 3px rgba(37,99,235,.12);
                                        border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.task-dd-label      { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-dd-caret      { font-size: .7rem; color: var(--text-muted); flex-shrink: 0;
                      transition: transform .15s; }
.task-dropdown.open .task-dd-caret { transform: rotate(180deg); }

.task-dd-panel      { position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
                      background: var(--surface); border: 1px solid var(--primary);
                      border-top: none; border-radius: 0 0 var(--radius) var(--radius);
                      box-shadow: 0 8px 24px rgba(0,0,0,.15);
                      display: none; flex-direction: column; }
.task-dropdown.open .task-dd-panel { display: flex; }

.task-dd-search-wrap { padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
.task-dd-search     { width: 100%; padding: .35rem .6rem; border: 1px solid var(--border);
                      border-radius: var(--radius); font-size: .85rem;
                      background: var(--surface-2); color: var(--text); }
.task-dd-search:focus { outline: none; border-color: var(--primary); }

.task-dd-list       { list-style: none; max-height: 220px; overflow-y: auto;
                      padding: .3rem 0; margin: 0; }
.task-dd-item       { display: flex; align-items: center; gap: .6rem;
                      padding: .5rem .75rem; cursor: pointer; font-size: .875rem;
                      transition: background .1s; }
.task-dd-item:hover { background: var(--surface-2); }
.task-dd-badge      { font-size: .7rem; flex-shrink: 0; }
.task-dd-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-dd-empty      { padding: .75rem; font-size: .85rem; color: var(--text-muted);
                      text-align: center; }

.add-bullet-btn     { white-space: nowrap; background: none;
                      border: 1px dashed var(--border); border-radius: var(--radius);
                      padding: .4rem .85rem; font-size: .85rem; color: var(--text-muted);
                      cursor: pointer; transition: border-color .15s, color .15s; flex-shrink: 0; }
.add-bullet-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Time grid */
.time-grid          { display: flex; flex-direction: column; gap: 0;
                      border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.time-row           { display: flex; align-items: center; padding: .6rem .9rem;
                      border-bottom: 1px solid var(--border); gap: 1rem; }
.time-row:last-child { border-bottom: none; }
.time-label         { flex: 1; font-size: .9rem; color: var(--text); }
.time-input-wrap    { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.pct-input          { width: 60px; padding: .3rem .5rem; text-align: right;
                      border: 1px solid var(--border); border-radius: var(--radius);
                      font-size: .9rem; background: var(--surface-2); color: var(--text); }
.pct-input:focus    { outline: none; border-color: var(--primary); }
.pct-symbol         { font-size: .85rem; color: var(--text-muted); }
.time-total-row     { background: var(--surface-2); font-weight: 600; }
.pct-total          { font-size: .95rem; font-weight: 700; color: var(--primary); }
.pct-warn           { color: var(--danger) !important; }

/* Textarea */
.report-textarea    { width: 100%; padding: .65rem .8rem; border: 1px solid var(--border);
                      border-radius: var(--radius); font-size: .9rem; line-height: 1.6;
                      background: var(--surface); color: var(--text); resize: vertical;
                      font-family: inherit; transition: border-color .15s; }
.report-textarea:focus { outline: none; border-color: var(--primary);
                          box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* Actions bar */
.report-actions     { display: flex; align-items: center; gap: 1rem;
                      padding: 1.25rem 2rem; border-top: 1px solid var(--border);
                      background: var(--surface-2); }
.report-dl-btn      { width: auto; padding: .6rem 1.5rem; font-size: .95rem; }
.report-status      { font-size: .875rem; color: var(--text-muted); }
.report-status-ok   { color: var(--low); }
.report-status-err  { color: var(--danger); }

/* ── Theme segment control ── */
.settings-appearance { display: flex; align-items: center; justify-content: space-between;
                       padding: .85rem 1.5rem; border-top: 1px solid var(--border);
                       flex-shrink: 0; }
.appearance-label    { font-size: .875rem; font-weight: 500; color: var(--text-muted); }
.theme-seg           { display: flex; border: 1px solid var(--border); border-radius: var(--radius);
                       overflow: hidden; }
.theme-seg-btn       { padding: .35rem .8rem; background: none; border: none;
                       border-right: 1px solid var(--border); cursor: pointer;
                       font-size: .825rem; font-weight: 500; color: var(--text-muted);
                       transition: background .15s, color .15s; white-space: nowrap; }
.theme-seg-btn:last-child { border-right: none; }
.theme-seg-btn:hover      { background: var(--surface-2); color: var(--text); }
.theme-seg-btn.active     { background: var(--primary); color: var(--primary-text);
                             font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════════
   Dark theme — applied by JS setting data-theme="dark" on <html>.
   "Auto" mode uses matchMedia to resolve to dark or light and sets the same attr.
   ══════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2128;
  --border: #30363d;
  --text: #e6edf3;
  --text-muted: #7d8590;
  --primary: #58a6ff;
  --primary-hover: #79c0ff;
  --primary-text: #0d1117;
  --danger: #f85149;
  --high: #f85149;
  --medium: #d29922;
  --low: #3fb950;
  --shadow: 0 1px 4px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);
}

/* Badges */
[data-theme="dark"] .badge.email  { background: #1c2d4a; color: #79c0ff; }
[data-theme="dark"] .badge.jira   { background: #2a1f47; color: #c084fc; }
[data-theme="dark"] .badge.high   { background: #3d1212; color: #f87171; }
[data-theme="dark"] .badge.medium { background: #3d2c0a; color: #fbbf24; }
[data-theme="dark"] .badge.low    { background: #0a3d1a; color: #4ade80; }

/* Task cards */
[data-theme="dark"] .task-card:hover   { box-shadow: 0 4px 20px rgba(0,0,0,.5); }
[data-theme="dark"] .task-card.expanded { box-shadow: 0 0 0 2px rgba(88,166,255,.2); }
[data-theme="dark"] .task-assignee  { background: #1c2128; border-color: #30363d; }
[data-theme="dark"] .assignee-jira  { background: rgba(88,166,255,.15); color: #79c0ff; }
[data-theme="dark"] .assignee-badge { background: rgba(88,166,255,.15); color: #79c0ff; }
[data-theme="dark"] .btn-assign    { border-color: #58a6ff; color: #58a6ff; }
[data-theme="dark"] .btn-assign:hover { background: #58a6ff; color: #0d1117; }
[data-theme="dark"] .status-select,
[data-theme="dark"] .priority-select { background: var(--surface-2); border-color: var(--border); }

/* Auth error */
[data-theme="dark"] .error { background: #2d1215; border-color: #7f1d1d; color: #f87171; }

/* MS sign-in */
[data-theme="dark"] .btn-ms       { background: var(--surface-2); }
[data-theme="dark"] .btn-ms:hover { background: var(--border); box-shadow: none; }

/* Alerts section */
[data-theme="dark"] .alerts-toggle       { background: #2a2000; border-color: #6b5000; color: #d29922; }
[data-theme="dark"] .alerts-toggle:hover { background: #382a00; }
[data-theme="dark"] .alerts-body         { border-color: #6b5000; background: #1e1800; }
[data-theme="dark"] .alert-row           { border-color: #2a2000; }

/* Alert dismiss */
[data-theme="dark"] .alert-dismiss             { color: #3fb950; border-color: #238636; }
[data-theme="dark"] .alert-dismiss-btn         { border-color: #238636; color: #3fb950; }
[data-theme="dark"] .alert-dismiss-btn:hover   { background: #0a3d1a; }

/* Dashboard stat accents */
[data-theme="dark"] .stat-alert .stat-value { color: #d29922; }
[data-theme="dark"] .stat-done  .stat-value { color: #3fb950; }
[data-theme="dark"] .stat-link:hover        { box-shadow: 0 4px 20px rgba(88,166,255,.15); }

/* Settings */
[data-theme="dark"] .settings-drawer        { box-shadow: 0 32px 100px rgba(0,0,0,.6), 0 8px 32px rgba(0,0,0,.4); }
[data-theme="dark"] .settings-remove:hover  { background: #2d1215; }

/* Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar       { width: 6px; height: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Section labels (notes, jira comments) ────────────────────────────────── */
.section-label { font-size: .75rem; font-weight: 600; text-transform: uppercase;
                 letter-spacing: .05em; color: var(--text-muted);
                 margin: .75rem 0 .4rem; }

/* ── Recurrence row ───────────────────────────────────────────────────────── */
.recurrence-row { display: flex; align-items: center; gap: .75rem;
                  padding: .4rem 0; border-top: 1px solid var(--border);
                  margin-top: .5rem; }
.recurrence-select { padding: .3rem .5rem; border: 1px solid var(--border);
                     border-radius: var(--radius); font-size: .82rem;
                     background: var(--surface); color: var(--text); cursor: pointer; }
[data-theme="dark"] .recurrence-row    { border-color: var(--border); }
[data-theme="dark"] .recurrence-select { background: var(--surface-2); }

/* ── Jira comments ────────────────────────────────────────────────────────── */
.jira-comments-section { margin-top: .25rem; }
.note-empty          { font-size: .82rem; color: var(--text-muted); padding: .25rem 0; }
.jira-comment-author { font-size: .75rem; color: var(--text-muted); flex-shrink: 0; }
.jira-comment-input  { flex: 1; padding: .4rem .6rem; border: 1px solid var(--border);
                       border-radius: var(--radius); font-size: .85rem; font-family: inherit;
                       background: var(--surface); color: var(--text); resize: vertical; }
.jira-comment-input:focus { outline: none; border-color: var(--primary); }
.jira-comment-save-btn { padding: .4rem .75rem; background: var(--surface-2);
                         border: 1px solid var(--border); border-radius: var(--radius);
                         font-size: .82rem; cursor: pointer; white-space: nowrap;
                         color: var(--text); transition: border-color .15s; }
.jira-comment-save-btn:hover { border-color: var(--primary); color: var(--primary); }
[data-theme="dark"] .jira-comment-input    { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .jira-comment-save-btn { background: var(--surface-2); }

/* ── Bulk select & task checkbox ──────────────────────────────────────────── */
.task-summary     { display: flex; align-items: flex-start; gap: .6rem; }
.task-checkbox    { margin-top: .35rem; flex-shrink: 0; cursor: pointer;
                    accent-color: var(--primary); width: 15px; height: 15px; }


/* ── Notes section ────────────────────────────────────────────────────────── */
.notes-section  { margin-top: .75rem; padding-top: .75rem;
                  border-top: 1px solid var(--border); }
.note-row       { display: flex; align-items: baseline; gap: .5rem;
                  padding: .35rem 0; border-bottom: 1px solid var(--border);
                  font-size: .85rem; }
.note-body      { flex: 1; white-space: pre-wrap; word-break: break-word; }
.note-meta      { font-size: .75rem; color: var(--text-muted); flex-shrink: 0; }
.note-del       { background: none; border: none; cursor: pointer; color: var(--text-muted);
                  font-size: .8rem; padding: 0 .2rem; opacity: .5; }
.note-del:hover { color: var(--danger); opacity: 1; }
.notes-add      { display: flex; gap: .5rem; margin-top: .5rem; align-items: flex-end; }
.notes-input    { flex: 1; padding: .4rem .6rem; border: 1px solid var(--border);
                  border-radius: var(--radius); font-size: .85rem; font-family: inherit;
                  background: var(--surface); color: var(--text); resize: vertical; }
.notes-input:focus { outline: none; border-color: var(--primary); }
.notes-save-btn { padding: .4rem .75rem; background: var(--surface-2);
                  border: 1px solid var(--border); border-radius: var(--radius);
                  font-size: .82rem; cursor: pointer; white-space: nowrap;
                  color: var(--text); transition: border-color .15s; }
.notes-save-btn:hover { border-color: var(--primary); color: var(--primary); }

[data-theme="dark"] .notes-section  { border-color: var(--border); }
[data-theme="dark"] .note-row       { border-color: #21262d; }
[data-theme="dark"] .notes-input    { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .notes-save-btn { background: var(--surface-2); }

/* ── Calendar ─────────────────────────────────────────────────────────────── */
.cal-main         { padding: 1rem; max-width: 1100px; width: 100%; margin: 0 auto; }

.cal-header       { display: flex; align-items: center; gap: .75rem;
                    margin-bottom: .75rem; }
.cal-month-title  { font-size: 1.2rem; font-weight: 700; flex: 1; text-align: center; }
.cal-nav-btn      { padding: .35rem .75rem; border: 1px solid var(--border);
                    border-radius: var(--radius); background: none; cursor: pointer;
                    font-size: 1rem; color: var(--text); transition: background .15s; }
.cal-nav-btn:hover { background: var(--surface-2); }
.cal-today-btn    { font-size: .85rem; padding: .35rem .85rem; }

.cal-overdue-strip { display: flex; align-items: flex-start; gap: .75rem;
                     background: #fef2f2; border: 1px solid #fca5a5;
                     border-radius: var(--radius); padding: .5rem .85rem;
                     margin-bottom: .75rem; flex-wrap: wrap; }
[data-theme="dark"] .cal-overdue-strip { background: #2d1215; border-color: #7f1d1d; }
.cal-overdue-label { font-size: .75rem; font-weight: 700; text-transform: uppercase;
                     letter-spacing: .05em; color: var(--danger); white-space: nowrap;
                     padding-top: .2rem; }
.cal-overdue-list  { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; }

.cal-grid         { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow-row      { margin-bottom: 2px; }
.cal-dow          { text-align: center; font-size: .75rem; font-weight: 600;
                    text-transform: uppercase; letter-spacing: .04em;
                    color: var(--text-muted); padding: .3rem 0; }

.cal-body         { background: var(--border); border: 1px solid var(--border);
                    border-radius: var(--radius); overflow: hidden; }

.cal-cell         { background: var(--surface); min-height: 90px;
                    padding: .4rem .45rem; display: flex; flex-direction: column;
                    gap: .2rem; transition: background .1s; min-width: 0; overflow: hidden; }
.cal-cell:hover   { background: var(--surface-2); }
.cal-cell-empty   { background: var(--surface-2); opacity: .4; min-height: 40px; }
.cal-today        { background: rgba(37,99,235,.06); }
.cal-today .cal-day-num { background: var(--primary); color: var(--primary-text);
                           border-radius: 50%; width: 22px; height: 22px;
                           display: inline-flex; align-items: center;
                           justify-content: center; font-weight: 700; }
[data-theme="dark"] .cal-today { background: rgba(88,166,255,.08); }

.cal-day-num      { font-size: .8rem; font-weight: 600; color: var(--text-muted);
                    margin-bottom: .1rem; line-height: 1; }

.cal-chip         { font-size: .73rem; padding: .15rem .4rem; border-radius: 4px;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                    cursor: pointer; line-height: 1.4; }
.cal-chip-high    { background: #fee2e2; color: #991b1b; }
.cal-chip-medium  { background: #fef3c7; color: #92400e; }
.cal-chip-low     { background: #dcfce7; color: #166534; }
.cal-chip-done    { opacity: .45; text-decoration: line-through; }
[data-theme="dark"] .cal-chip-high   { background: #3d1212; color: #f87171; }
[data-theme="dark"] .cal-chip-medium { background: #3d2c0a; color: #fbbf24; }
[data-theme="dark"] .cal-chip-low    { background: #0a3d1a; color: #4ade80; }

.cal-more         { font-size: .7rem; color: var(--text-muted); padding: 0 .2rem; }

/* Calendar popup */
.cal-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4);
                     z-index: 200; display: none; }
.cal-popup-overlay.open { display: block; }
.cal-popup        { position: fixed; top: 50%; left: 50%;
                    transform: translate(-50%, -50%);
                    background: var(--surface); border: 1px solid var(--border);
                    border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,.2);
                    z-index: 201; width: min(480px, 95vw);
                    max-height: 80vh; overflow-y: auto;
                    display: none; flex-direction: column; }
.cal-popup.open   { display: flex; }
.cal-popup-header { display: flex; align-items: center; justify-content: space-between;
                    padding: .85rem 1.1rem; border-bottom: 1px solid var(--border);
                    position: sticky; top: 0; background: var(--surface); z-index: 1; }
.cal-popup-date   { font-weight: 700; font-size: .95rem; }
.cal-popup-close  { background: none; border: none; cursor: pointer;
                    font-size: 1rem; color: var(--text-muted); padding: .2rem .4rem; }
.cal-popup-row    { display: flex; align-items: center; gap: .65rem;
                    padding: .65rem 1.1rem; border-bottom: 1px solid var(--border); }
.cal-popup-row:last-child { border-bottom: none; }
.cal-popup-dot    { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cal-popup-title  { flex: 1; font-size: .9rem; }
.cal-popup-actions { display: flex; gap: .4rem; flex-shrink: 0; }

/* ── Pagination bar ───────────────────────────────────────────────────────── */
.pagination-bar { display: flex; align-items: center; justify-content: center;
                  gap: .4rem; padding: 1rem; flex-wrap: wrap; }
.page-btn       { padding: .35rem .65rem; border: 1px solid var(--border);
                  border-radius: var(--radius); background: none; cursor: pointer;
                  font-size: .85rem; color: var(--text-muted); transition: all .15s; }
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); border-color: var(--primary);
                   color: var(--primary-text); font-weight: 600; cursor: default; }
.page-btn:disabled { opacity: .4; cursor: default; }
.page-btn:disabled:hover { border-color: var(--border); color: var(--text-muted); }
.page-ellipsis  { font-size: .85rem; color: var(--text-muted); padding: 0 .2rem; }
.page-info      { font-size: .8rem; color: var(--text-muted); margin-left: .5rem; }

/* ── Task history section ─────────────────────────────────────────────────── */
.history-section { margin-top: .75rem; padding-top: .75rem;
                   border-top: 1px solid var(--border); }
.history-row    { display: flex; align-items: baseline; gap: .5rem;
                  padding: .3rem 0; border-bottom: 1px solid var(--border);
                  font-size: .82rem; flex-wrap: wrap; }
.history-row:last-child { border-bottom: none; }
.history-desc   { flex: 1; min-width: 0; }
.history-old    { text-decoration: line-through; color: var(--text-muted); }
.history-arrow  { color: var(--text-muted); font-size: .75rem; flex-shrink: 0; }
.history-new    { font-weight: 500; color: var(--text); }
.history-meta   { font-size: .72rem; color: var(--text-muted); flex-shrink: 0;
                  white-space: nowrap; }

[data-theme="dark"] .history-section { border-color: var(--border); }
[data-theme="dark"] .history-row     { border-color: #21262d; }
[data-theme="dark"] .history-new     { color: var(--text); }

/* ── Mobile responsive ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .topbar       { padding: .5rem .75rem; gap: .5rem; flex-wrap: wrap; }
  .topnav       { order: 3; width: 100%; gap: .25rem; }
  .topnav-link  { font-size: .8rem; padding: .25rem .4rem; }
  .search-box   { order: 2; width: auto; flex: 1; min-width: 0; }
  .user-name-btn { order: 1; }

  .filter-bar   { padding: .4rem .75rem; gap: .35rem; flex-wrap: wrap; }
  .filter-btn   { font-size: .8rem; padding: .25rem .5rem; }

  .main-content, .task-list { padding: .5rem .75rem; }

  .task-card    { padding: .6rem .75rem; }
  .task-meta    { flex-wrap: wrap; gap: .3rem; }
  .task-title   { font-size: .92rem; }

  .task-actions { flex-wrap: wrap; gap: .4rem; }
  .status-select, .priority-select { font-size: .8rem; }

  .ntask-modal  { width: calc(100% - 2rem); max-height: 90dvh; overflow-y: auto; }

  /* Settings modal full-width on mobile */
  .settings-drawer { width: calc(100% - 2rem); max-height: 90dvh; }

  /* Dashboard */
  .stat-grid    { grid-template-columns: 1fr 1fr; }
  .top-task-row { flex-wrap: wrap; gap: .3rem; }

  /* Report */
  .time-grid    { grid-template-columns: 1fr; }
  .report-actions { flex-direction: column; }
}