/* ── Reset & Variables ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary:      #2563eb;
    --primary-dark: #1d4ed8;
    --danger:       #dc2626;
    --success:      #16a34a;
    --text:         #111827;
    --muted:        #6b7280;
    --border:       #e5e7eb;
    --bg:           #f3f4f6;
    --surface:      #ffffff;
    --radius:       10px;
    --shadow:       0 4px 16px rgba(0,0,0,0.08);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* ── Utility ─────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Auth layout ─────────────────────────────────────────── */
.auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.auth-card {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 420px;
    padding: 44px 36px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.5px;
}

.auth-logo p {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
}

.auth-step { display: none; }
.auth-step.active { display: block; }

.auth-step h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.auth-step .subtitle {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

/* ── Form elements ───────────────────────────────────────── */
.field { 
    margin-bottom: 16px;
    box-sizing: border-box;
    overflow: hidden;
}

.field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 6px;
}

.field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    color: var(--text);
    background: #f9fafb;
    transition: border-color 0.2s, background 0.2s;
}

.field input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
}

.field input::placeholder { color: #9ca3af; }

/* PIN / OTP cell rows */
.pin-row, .otp-row {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
}

.pin-row input, .otp-row input {
    flex: 1;
    min-width: 0;
    width: 48px;
    height: 56px;
    box-sizing: border-box;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #f9fafb;
    transition: border-color 0.2s, background 0.2s;
}

.otp-row input { width: 44px; height: 52px; font-size: 20px; }

.pin-row input:focus, .otp-row input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
}

/* Buttons */
.btn {
    display: block;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    margin-top: 20px;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-ghost {
    background: none;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
    width: auto;
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    cursor: pointer;
}
.btn-ghost:hover { text-decoration: underline; }

/* Alert */
.alert {
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 18px;
    display: none;
}
.alert.show { display: block; }
.alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: var(--danger); }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--success); }

/* Back link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    margin-bottom: 20px;
    background: none;
    border: none;
    padding: 0;
}


/* Auth footer */
.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--muted);
}
.auth-footer button {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}
.auth-footer button:hover { text-decoration: underline; }

/* Play Store badge (inline beside the title) */
.auth-logo h1 .store-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 8px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: box-shadow .15s ease, transform .15s ease;
}
.auth-logo h1 .store-badge:hover {
    border-color: #00c853;
    box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.25);
    transform: translateY(-1px);
}

/* Privacy policy note */
.privacy-note {
    text-align: center;
    margin: 12px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
}
.privacy-note a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}
.privacy-note a:hover { text-decoration: none; }

.resend-row {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--muted);
}

/* ── Dashboard nav ───────────────────────────────────────── */
.dash-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dash-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.dash-nav .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.3px;
}

.dash-nav .nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-user {
    font-size: 13px;
    color: var(--muted);
    /* The nav also carries the bell, the menu button and Logout, so a long
       name truncates instead of pushing them off a narrow screen. */
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.btn-create-team {
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: var(--primary);
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-create-team:hover { background: #1d4ed8; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2); }
.create-team-icon {
    font-weight: 700;
    font-size: 16px;
}
.create-team-text {
    display: inline;
}

.btn-logout {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-logout:hover { background: var(--bg); }

/* ── Home page ───────────────────────────────────────────── */
.home-main {
    flex: 1;
    padding: 16px 24px;
    width: 100%;
    box-sizing: border-box;
}

.home-heading {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.home-sub {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 24px;
}

.home-hint {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Draggable item list ─────────────────────────────────── */
.item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.15s;
    position: relative;
}

.item-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.09);
    border-color: #d1d5db;
}

.item-card:active { transform: scale(0.99); }

/* drag handle */
.drag-handle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 2px;
    opacity: 0.35;
    cursor: grab;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.drag-handle:active { cursor: grabbing; }
.item-card:hover .drag-handle { opacity: 0.65; }

.drag-handle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
}

/* icon circle */
.item-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.item-icon.personal { background: #ede9fe; }
.item-icon.team     { background: #dbeafe; }

/* body: 2-row layout */
.item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.item-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.item-row2 {
    display: flex;
    justify-content: flex-end;
}

/* text */
.item-text { flex: 1; min-width: 0; }

.item-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-meta {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

/* role pill */
.role-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 99px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.role-owner  { background: #ede9fe; color: #7c3aed; }
.role-admin  { background: #dbeafe; color: #2563eb; }
.role-member { background: #dcfce7; color: #16a34a; }
.role-icon   { font-size: 13px; line-height: 1; }

/* chevron arrow */
.item-arrow {
    background: #1e3a8a;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.item-arrow:hover {
    background: #1d4ed8;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}
.item-arrow svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

/* ── Todo count badges ────────────────────────────── */
.todo-counts {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
    align-items: center;
}

.count-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}

.count-pending  { background: #fee2e2; color: #dc2626; }
.count-progress { background: #fef9c3; color: #ca8a04; }
.count-done     { background: #dcfce7; color: #16a34a; }

.count-badge svg { flex-shrink: 0; }

/* dragging state */
.item-card.dragging {
    opacity: 0.4;
    border: 2px dashed var(--primary);
    box-shadow: none;
}

.item-card.drag-over {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

/* loading / empty state */
.list-state {
    text-align: center;
    padding: 40px 0;
    color: var(--muted);
    font-size: 14px;
}

.list-state .spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   TODOS PAGE
   ══════════════════════════════════════════════════════════ */

/* Nav extras */
.back-link {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    margin: 0;
    border-radius: 8px;
    border: none;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
    padding: 0;
    line-height: 1;
}

.back-link:hover {
    background: #1d4ed8;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
    transform: translateY(-1px);
}

.back-link:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.15);
}

.back-link svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Login back button */
.login-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
    margin-bottom: 20px;
}

.login-back-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.login-back-btn:active {
    transform: translateY(0);
}

.brand { display: flex; align-items: center; gap: 4px; }
.brand-text { font-size: 18px; font-weight: 700; color: var(--primary); }
.brand-text-link { 
    text-decoration: none; 
    display: flex; 
    align-items: center;
    transition: opacity 0.15s;
}
.brand-text-link:hover {
    opacity: 0.8;
}

/* Main layout */
.todos-main {
    flex: 1;
    padding: 28px 5%;
    width: 100%;
    box-sizing: border-box;
}

/* Page header */
.todos-header {
    margin-bottom: 20px;
}
.todos-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.todos-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.todos-subtitle {
    font-size: 13px;
    color: var(--muted);
    margin-top: 2px;
}

/* Add button */
.btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.18s, box-shadow 0.18s;
}
.btn-add:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(37,99,235,0.25); }

/* Filter pills */
.filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    align-items: center;
    justify-content: space-between;
}
.filter-pills-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--muted);
    transition: all 0.15s;
}
.filter-pill:hover  { border-color: var(--primary); color: var(--primary); }
.filter-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-pending  { background: #dc2626; }
.dot-progress { background: #ca8a04; }
.dot-done     { background: #16a34a; }
.pill-count { font-weight: 500; opacity: 0.85; }
.pill-sort-hint { font-weight: 600; font-size: 12px; opacity: 0.9; }

/* Member selector */
.member-selector-wrap {
    position: relative;
    flex-shrink: 0;
}
.member-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--muted);
    white-space: nowrap;
    transition: all 0.15s;
}
.member-selector-btn:hover { border-color: var(--primary); color: var(--primary); }
.member-label { display: inline; }

.member-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 30;
    overflow: hidden;
}
.member-option {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s;
}
.member-option:hover { background: var(--bg); }
.member-option.is-active { background: #eff6ff; color: var(--primary); font-weight: 600; }

/* Task search — collapsed to an icon, expands to an input in place.
   The pill sizing matches .filter-pill / .member-selector-btn so the tools
   strip keeps one row height whether the search is open or closed. */
.task-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.task-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
}
.task-search-btn:hover { border-color: var(--primary); color: var(--primary); }

.task-search-field {
    position: relative;
    display: none;
    align-items: center;
    width: 230px;
    max-width: 100%;
}
.task-search-wrap.is-open .task-search-field { display: flex; }
.task-search-wrap.is-open .task-search-btn   { display: none; }

.task-search-field > svg {
    position: absolute;
    left: 12px;
    color: var(--muted);
    pointer-events: none;
}
.task-search-field input {
    width: 100%;
    height: 32px;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 0 56px 0 32px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
    transition: border-color 0.16s, box-shadow 0.16s;
    -webkit-appearance: none;
    appearance: none;
}
.task-search-field input::-webkit-search-cancel-button { display: none; }
.task-search-field input::placeholder { color: #9ca3af; }
.task-search-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
/* Live match count, so "so many tasks" stays legible while typing. */
.task-search-count {
    position: absolute;
    right: 28px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    pointer-events: none;
}
.task-search-clear {
    position: absolute;
    right: 4px;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
}
.task-search-clear:hover { background: var(--border); color: var(--text); }

/* Phones: an open field takes its own line above the pills, otherwise the
   pills get squeezed to nothing. The row only wraps while search is open. */
@media (max-width: 560px) {
    .filter-row { flex-wrap: wrap; row-gap: 8px; }
    .task-search-wrap.is-open { flex: 1 1 100%; order: -1; }
    .task-search-field { width: 100%; }
}

.hidden { display: none !important; }

/* Progress bar */
.progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.progress-track {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: var(--success);
    border-radius: 99px;
    transition: width 0.4s ease;
    width: 0%;
}
.progress-label {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

/* Task list */
.task-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.task-empty {
    text-align: center;
    padding: 48px 0;
    color: var(--muted);
    font-size: 14px;
}
.task-empty .spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: 0 auto 12px;
}

/* Footer row for the completed view: "Load more" (left) + clear icon (right) */
.completed-footer {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px 4px;
}
.footer-spacer { flex: 1; }
.btn-load-more {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-load-more:hover:not(:disabled) {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 3px 10px rgba(37,99,235,0.20);
}
.btn-load-more:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Clear-completed trash icon + dropdown menu (right-aligned) */
.clear-completed-wrap {
    position: relative;
    margin-left: auto;
}
.btn-clear-completed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-clear-completed:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}
.clear-completed-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    padding: 6px;
    z-index: 50;
}
.clear-completed-menu.hidden { display: none; }
.clear-menu-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px 6px;
}
.clear-menu-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-size: 14px;
    color: var(--text, #111827);
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.clear-menu-option:hover { background: #fef2f2; color: #dc2626; }

/* Task card */
.task-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    position: relative;
    overflow: visible;
    transition: box-shadow 0.18s, border-color 0.18s;
}
.task-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: #d1d5db; }

/* Left priority stripe */
.task-priority-bar { width: 4px; flex-shrink: 0; }
.priority-high   .task-priority-bar { background: #dc2626; }
.priority-medium .task-priority-bar { background: #f59e0b; }
.priority-low    .task-priority-bar { background: #6b7280; }

.task-body { flex: 1; padding: 14px 16px; min-width: 0; position: relative; }
.task-top  { display: flex; align-items: flex-start; gap: 12px; }
.task-left { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }

/* Status toggle button */
.status-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
    border-radius: 50%;
    transition: transform 0.15s;
    margin-top: 1px;
}
.status-toggle:hover { transform: scale(1.15); }
.status-toggle.st-pending  svg { stroke: #9ca3af; }
.status-toggle.st-progress svg { stroke: #ca8a04; }
.status-toggle.st-done     svg { stroke: #16a34a; }

/* Task info */
.task-info { flex: 1; min-width: 0; }
.task-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
    line-height: 1.4;
}
.done-title { text-decoration: line-through; color: var(--muted); }
.task-title-clickable { cursor: pointer; }
.task-title-clickable:hover { color: #4f46e5; }
.task-chat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 22px; height: 22px;
    margin-left: 5px;
    padding: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s, color .12s;
}
.task-chat-btn:hover { background: #eef2ff; color: #4f46e5; }
.task-desc {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
    line-height: 1.5;
    word-break: break-word;
}
.task-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
    justify-content: flex-end;
}

/* Badges */
.task-badge, .status-badge, .task-assigned, .task-due {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 99px;
}
.task-badge  { cursor: pointer; user-select: none; }
.status-badge { cursor: pointer; user-select: none; }
.pr-high   { background: #fee2e2; color: #dc2626; }
.pr-med    { background: #fef3c7; color: #d97706; }
.pr-low    { background: #f3f4f6; color: #6b7280; }
.st-pending  { background: #fef2f2; color: #dc2626; }
.st-progress { background: #fefce8; color: #ca8a04; }
.st-done     { background: #f0fdf4; color: #16a34a; }
.task-assigned { background: #eff6ff; color: #2563eb; font-weight: 500; }
.task-due      { background: #f3f4f6; color: var(--muted); font-weight: 500; }
.task-due.overdue { background: #fee2e2; color: #dc2626; }

/* Priority selector popover */
.priority-popover {
    position: fixed;
    z-index: 20;
    min-width: 170px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
    padding: 10px;
}

/* ── Reminder icon + popover ─────────────────────────────── */
.reminder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.reminder-btn:hover { background: #eef2ff; color: #4f46e5; }
.reminder-btn.has-reminder { color: #4f46e5; }
.reminder-popover {
    position: fixed;
    z-index: 20;
    min-width: 210px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.16);
    padding: 12px;
}
.reminder-popover-header { font-size: 13px; font-weight: 700; color: #0f172a; padding: 0 2px 10px; }
.reminder-row { display: flex; gap: 8px; margin-bottom: 8px; }
.reminder-row .rem-amount { width: 70px; }
.reminder-row .rem-amount, .reminder-row .rem-unit, .reminder-row .rem-target {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: var(--text);
}
.reminder-row .rem-unit, .reminder-row .rem-target { flex: 1; cursor: pointer; }
.reminder-row .rem-target { width: 100%; }
.reminder-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.reminder-actions button { padding: 7px 14px; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.reminder-actions .rem-set { background: var(--primary); color: #fff; }
.reminder-actions .rem-remove { background: #fff; color: #ef4444; border-color: #fecaca; }

/* ── Instant notification icon + popover ─────────────────── */
.instant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.instant-btn:hover { background: #fff1eb; color: #ea580c; }
.instant-popover {
    position: fixed;
    z-index: 20;
    width: 250px;
    max-width: calc(100vw - 24px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.16);
    padding: 12px;
}
.instant-popover-header { font-size: 13px; font-weight: 700; color: #0f172a; padding: 0 2px 2px; }
.instant-sub { font-size: 11px; color: #64748b; padding: 0 2px 8px; }
.instant-members { max-height: 220px; overflow-y: auto; margin: 0 -2px 8px; }
.instant-member {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 6px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
}
.instant-member:hover { background: #f8fafc; }
.instant-member .instant-check { width: 16px; height: 16px; accent-color: #ea580c; cursor: pointer; flex-shrink: 0; }
.instant-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #ffedd5;
    color: #c2410c;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.instant-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.instant-empty { font-size: 12px; color: #94a3b8; padding: 8px 4px; }
.instant-actions { display: flex; justify-content: flex-end; }
.instant-send {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: #ea580c;
    color: #fff;
}
.instant-send:disabled { opacity: .6; cursor: default; }
.priority-popover-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    padding: 2px 6px 8px;
}
.priority-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.priority-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.priority-option:hover {
    transform: translateY(-1px);
    border-color: currentColor;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.priority-option.is-active {
    box-shadow: inset 0 0 0 1px currentColor;
}
.priority-option.pr-low { color: #6b7280; background: #f9fafb; }
.priority-option.pr-med { color: #d97706; background: #fffbeb; }
.priority-option.pr-high { color: #dc2626; background: #fff1f2; }
.priority-check { font-size: 12px; }

/* Status selector popover */
.status-popover {
    position: fixed;
    z-index: 20;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
    padding: 10px;
}
.status-popover-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    padding: 2px 6px 8px;
}
.status-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.status-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.status-option:hover {
    transform: translateY(-1px);
    border-color: #2563eb;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.1);
}
.status-option.is-active {
    box-shadow: inset 0 0 0 1px #2563eb;
    background: #eff6ff;
}
.status-check { font-size: 12px; color: #16a34a; }

/* Member assignment popover */
.member-assign-btn {
    border: none;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 99px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.member-assign-btn:hover {
    background: #dbeafe;
}
.member-chip-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.member-arrow {
    font-weight: 800;
    color: #374151;
    font-size: 12px;
    background: transparent;
    padding: 0 3px;
    line-height: 1;
}

.task-info-btn {
    border: none;
    background: transparent;
    color: #6b7280;
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.task-info-btn:hover {
    background: #f0fdf4;
    color: #16a34a;
}

.assign-popover {
    position: fixed;
    z-index: 20;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
    padding: 10px;
}
.assign-popover-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    padding: 2px 6px 8px;
}
.assign-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.assign-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.assign-option:hover {
    transform: translateY(-1px);
    border-color: #2563eb;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.1);
}
.assign-option.assign-unassign {
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
    padding-top: 8px;
}
.assign-check {
    font-size: 12px;
    color: #16a34a;
}

/* Task information popover */
.info-popover {
    position: fixed;
    z-index: 20;
    min-width: 280px;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
    padding: 12px;
}
.info-popover-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.info-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.info-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 6px 0;
}
.info-label {
    font-weight: 600;
    color: var(--muted);
    flex: 0 0 auto;
    margin-right: 8px;
}
.info-value {
    font-size: 12px;
    color: var(--text);
    text-align: right;
    flex: 1;
    word-break: break-word;
}

/* Action buttons */
.task-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.task-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--muted);
}
.btn-edit:hover   { background: #eff6ff; color: var(--primary); }
.btn-delete:hover { background: #fee2e2; color: var(--danger); }

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 16px;
}
.modal-card {
    background: var(--surface);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    max-height: 90vh;
    overflow-y: auto;
}
.modal-sm { max-width: 360px; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}
.modal-title { font-size: 17px; font-weight: 700; }
.modal-close {
    background: none; border: none;
    font-size: 22px; line-height: 1;
    cursor: pointer; color: var(--muted);
    padding: 4px 6px; border-radius: 6px;
}
.modal-close:hover { background: var(--bg); }

/* Form */
.form-group  { padding: 12px 24px 0; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.req { color: var(--danger); }
.form-input {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 14px; font-family: inherit;
    background: var(--surface); color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    box-sizing: border-box;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.form-error {
    margin: 10px 24px 0;
    padding: 8px 12px;
    background: #fee2e2;
    border-radius: 8px;
    color: var(--danger);
    font-size: 13px;
}

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px 20px;
}
.btn-ghost {
    padding: 9px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: none;
    font-size: 14px;
    cursor: pointer;
    color: var(--text);
    font-weight: 500;
}
.btn-ghost:hover { background: var(--bg); }
.btn-primary {
    padding: 9px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
}
.btn-primary:hover    { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-danger {
    padding: 9px 20px;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.btn-danger:hover { background: #b91c1c; }

.delete-msg { padding: 12px 24px; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ── Toast ──────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 9999;
    white-space: nowrap;
}
.toast-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-error { background: var(--danger); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .count-label { display: none; }
    .count-badge { padding: 3px 6px; }
    .role-text   { display: none; }
    .role-pill   { padding: 3px 6px; }
    .todos-main  { padding: 20px 3px; }
    .home-main   { padding: 12px 3px; }
    .dash-nav    { padding: 0 10px; }
    .form-row    { grid-template-columns: 1fr; }
    .task-btn    { width: 28px; height: 28px; }
    .member-label { display: none; }
}

@media (max-width: 480px) {
    .auth-card { padding: 32px 20px; }
    .pin-row, .otp-row { gap: 4px; }
    .pin-row input, .otp-row input { width: 40px; height: 48px; font-size: 18px; }
    .dash-nav { padding: 0 10px; }
    .home-main { padding: 12px 3px; }
    .todos-title { font-size: 18px; }
    .btn-add span { display: none; }
    .nav-user { max-width: 90px; }
    .dash-nav .nav-right { gap: 8px; }
}

/* ══════════════════════════════════════════════════════════
   TEAM SETTINGS PAGE
   ══════════════════════════════════════════════════════════ */

.settings-main {
    flex: 1;
    padding: 28px 5%;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
}

.settings-container {
    max-width: 700px;
    margin: 0 auto;
}

.settings-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.settings-section h2 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text);
}

.form-group {
    margin-bottom: 12px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #f9fafb;
    color: var(--text);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.form-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.form-group input {
    flex: 1;
    min-width: 200px;
}

.form-group select {
    flex: 0 0 130px;
}

.form-group button {
    flex: 0 0 auto;
}

.team-code-display {
    display: flex;
    gap: 8px;
}

.team-code-display input {
    flex: 1;
}

.btn-primary,
.btn-secondary {
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 2px 8px rgba(37,99,235,0.2);
}

.btn-secondary {
    background: #f3f4f6;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--border);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-danger:hover {
    background: #b91c1c;
}

.members-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f9fafb;
}

.member-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.member-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}

.member-role-display {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.member-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: #dbeafe;
    color: #2563eb;
    white-space: nowrap;
}

.member-role-badge.owner-badge {
    background: #ede9fe;
    color: #7c3aed;
}

.member-role-select {
    width: 100px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

.member-role-select:focus {
    border-color: var(--primary);
}

.member-role-wrapper {
    flex: 0 0 130px;
}

.role-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

.role-select:focus {
    border-color: var(--primary);
}

.danger-zone {
    border-color: var(--danger);
    background: #fff5f5;
}

.danger-zone h2 {
    color: var(--danger);
}

.danger-action {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.danger-action p {
    font-size: 13px;
    color: var(--text);
    margin: 0;
}

@media (max-width: 640px) {
    .settings-main {
        padding: 16px 5%;
    }
    
    .settings-section {
        padding: 16px;
    }
    
    .form-group {
        flex-direction: column;
    }
    
    .form-group input {
        flex: 1;
        min-width: auto;
    }
    
    .form-group select {
        flex: 1;
    }
}

/* ── Roles: five-tier model ──────────────────────────────────────────────
   Owner › Admin › Manager › Team Leader › Member. Colours run warm-to-cool
   down the ladder so a glance at a member list reads as a hierarchy. */

.role-manager     { background: #ffedd5; color: #c2410c; }
.role-team_leader { background: #cffafe; color: #0e7490; }

/* "Team Leader" needs more room than the old 100px two-role dropdown. */
.member-role-select {
    width: auto;
    min-width: 118px;
}

.member-role-badge.manager-badge     { background: #ffedd5; color: #c2410c; }
.member-role-badge.team_leader-badge { background: #cffafe; color: #0e7490; }
.member-role-badge.member-badge      { background: #dcfce7; color: #16a34a; }

/* ── Member lock ─────────────────────────────────────────────
   A locked member keeps their role but loses the right to change existing work
   (see api/member_lock.php). Same padlock language as a locked task — amber,
   closed when it holds — so the two locks read as the same idea in two places.
   Sits to the LEFT of the role control: the role is what they are, the lock is
   a condition on it. */
.member-lock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.member-lock-btn:hover {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #b45309;
}

.member-lock-btn.locked-on {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #b45309;
}

/* Shown to people who cannot flip it — the locked person included — so the row
   still explains itself. Tapping opens the explainer instead of toggling, so it
   stays a pointer: on a phone that tap is the only way to read the title. */
.member-lock-btn.lock-static:hover {
    background: #fef3c7;
    border-color: #fcd34d;
}

.member-lock-btn:disabled { opacity: 0.5; cursor: default; }

/* The whole row carries the state, so a long member list can be scanned. */
.member-item.is-locked {
    border-color: #fde68a;
    background: #fffbeb;
}

/* Remove-member button — rendered only for owner/admin, and never against the
   owner, a peer or yourself. Sits to the right of the role dropdown. */
.member-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 8px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.member-remove-btn:hover {
    background: #fee2e2;
    border-color: #f87171;
}

.member-remove-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Section heading with a trailing info affordance */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.section-head h2 {
    margin-bottom: 0;
}

.info-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.info-btn:hover,
.info-btn:focus-visible {
    background: var(--primary);
    color: #fff;
    outline: none;
}

/* Two info buttons can share a heading — the padlock one and the roles one. */
.section-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* The padlock question, in the lock's own amber rather than the roles blue, so
   the two buttons are told apart at a glance and each matches what it opens.
   The glyph is an emoji, so the serif italic face .info-btn sets is dropped. */
.lock-info-btn {
    border-color: #fcd34d;
    background: #fffbeb;
    font-family: inherit;
    font-style: normal;
    font-size: 11px;
}

.lock-info-btn:hover,
.lock-info-btn:focus-visible {
    background: #fef3c7;
    border-color: #f59e0b;
    color: inherit;
}

/* ── Roles explained popup ─────────────────────────────────────────────── */

.role-info-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.role-info-card {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.role-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.role-info-head h3 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.role-info-close {
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 4px;
}

.role-info-close:hover {
    color: #0f172a;
}

.role-info-body {
    padding: 6px 18px 12px;
    overflow-y: auto;
}

.role-info-item {
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

.role-info-item:last-child {
    border-bottom: none;
}

/* The headline block of the lock popup gets the amber rail, so the card opens
   on the thing the reader tapped a padlock to find out about. */
.role-info-item.role-info-lock {
    border-left: 3px solid #f59e0b;
    padding-left: 12px;
    margin-left: -12px;
    background: #fffbeb;
    border-radius: 0 8px 8px 0;
}

/* Foot of the roles popup: the lock is not a sixth role, so it is named here
   and explained in its own card. One copy of the rules, reachable from both. */
.role-info-item.role-info-jump {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: #475569;
    border-top: 1px solid #e2e8f0;
    border-bottom: none;
    margin-top: 6px;
}

.role-info-jump-btn {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}

/* The viewer's own role gets a rail so they can find themselves instantly. */
.role-info-item.is-you {
    border-left: 3px solid var(--primary);
    padding-left: 12px;
    margin-left: -12px;
    background: #f8fafc;
    border-radius: 0 8px 8px 0;
}

.role-info-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #0f172a;
}

.role-info-icon {
    font-size: 15px;
    line-height: 1;
}

.role-info-you {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--primary);
    color: #fff;
    padding: 2px 6px;
    border-radius: 99px;
}

.role-info-tagline {
    font-size: 12px;
    color: #64748b;
    margin: 4px 0 8px;
}

.role-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.role-info-list li {
    position: relative;
    font-size: 12.5px;
    line-height: 1.5;
    padding-left: 20px;
    margin-bottom: 3px;
}

.role-info-list li::before {
    position: absolute;
    left: 2px;
    font-weight: 700;
}

.role-info-list.can li        { color: #334155; }
.role-info-list.can li::before    { content: '✓'; color: #16a34a; }
.role-info-list.cannot li     { color: #94a3b8; }
.role-info-list.cannot li::before { content: '✕'; color: #cbd5e1; }

.role-info-foot {
    padding: 14px 18px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 480px) {
    .role-info-card { max-height: 90vh; }
    .member-role-select { min-width: 106px; font-size: 11px; }
    .member-remove-btn { width: 24px; height: 24px; margin-left: 6px; }
    .member-lock-btn   { width: 24px; height: 24px; margin-right: 6px; }
}

/* ══════════════════════════════════════════════════════════
   WORKSPACE SPLIT SHELL  —  WhatsApp-Web style two-pane layout
   Sidebar (workspace list) on the left, task pane on the right.
   Used by home.php (intro pane) and todos.php (task pane).
   ══════════════════════════════════════════════════════════ */

:root {
    --tp-nav-h:   60px;
    --tp-side-w:  380px;
    --tp-hover:   #f4f6f8;
    --tp-active:  #e8f0fe;
    --tp-line:    #eef0f3;
}

/* The shell owns the viewport: the page itself never scrolls, each pane does. */
/* NOTE: style.css opens with a DUPLICATED UTF-8 BOM. The first is consumed as
   the BOM; the second survives as a stray character that invalidates the very
   first rule - the global reset - so body still carries the browser default 8px
   margin. Zeroing it just for the shell keeps the panes flush with the viewport
   without repairing the reset site-wide, which would shift every other page. */
/* The dead reset also means border-box is not global, so the shell sets it on
   its own containers - widths here are declared with padding/border included. */
.tp-shell, .tp-sidebar, .tp-pane, .tp-side-head, .tp-side-foot, .tp-pane-head,
.tp-pane-tools, .tp-pane-body, .tp-intro, .tp-list, .tp-row, .tp-search,
.tp-search input, .tp-chip, .tp-new-btn, .tp-join-btn { box-sizing: border-box; }

body.tp-app {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.dash-wrap-fixed {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
.dash-wrap-fixed .dash-nav { flex: 0 0 var(--tp-nav-h); }

.tp-shell {
    flex: 1;
    display: flex;
    min-height: 0;
    min-width: 0;
    background: var(--bg);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.tp-sidebar {
    flex: 0 0 var(--tp-side-w);
    width: var(--tp-side-w);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.tp-side-head {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.tp-side-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tp-side-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text);
}

.tp-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: 99px;
    padding: 7px 14px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s, box-shadow 0.16s, transform 0.12s;
}
.tp-new-btn:hover  { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(37,99,235,0.25); }
.tp-new-btn:active { transform: scale(0.97); }

/* Two ways into a workspace sit here: create one, or join an existing one with
   its code. Creating is the primary act, so Join stays a quieter outline. */
.tp-side-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.tp-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 99px;
    padding: 6px 13px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s;
}
.tp-join-btn svg   { color: var(--muted); transition: color 0.16s; }
.tp-join-btn:hover { background: #eff6ff; border-color: var(--primary); color: var(--primary-dark); }
.tp-join-btn:hover svg { color: var(--primary); }
.tp-join-btn:active    { transform: scale(0.97); }

/* Team codes are 8 uppercase alphanumerics - space them out so a mistyped
   character is easy to spot before submitting. */
.tp-code-input {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    text-indent: 3px;   /* offset the trailing letter-space so it reads centred */
}
.tp-code-input::placeholder {
    letter-spacing: 3px;
    font-weight: 500;
    color: #c3c9d4;
}
.tp-join-hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}
/* Sits under a label rather than under a field, so it needs less air above. */
.tp-hint-tight { margin-top: 0; margin-bottom: 8px; }

/* Further down this file the settings page redefines `.form-group` as a flex
   row with nothing scoping it to that page, which lays a label out beside its
   field instead of above it. Inside this dialog every field is a column. */
#tpNewForm .form-group { display: block; }
/* A `display:` rule outranks the hidden attribute's UA style, which is how the
   chip row and the folded box would stay on screen while empty. */
#tpNewForm [hidden] { display: none !important; }

/* ── Create Team: the folded description ─────────────────────────
   Drawn as the field it becomes, so the row reads as somewhere to write
   rather than as a button. Clicking it opens the box underneath. */
.tp-desc-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    /* The same field grey the inputs above and below it are painted. */
    background: #f9fafb;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}
.tp-desc-toggle:hover { border-color: var(--primary); background: var(--bg); }
.tp-desc-toggle > svg:first-child { color: var(--muted); flex-shrink: 0; }
.tp-desc-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Nothing written yet: read as a placeholder, not as content. */
.tp-desc-text.is-empty { color: var(--muted); }
.tp-desc-caret { color: var(--muted); flex-shrink: 0; transition: transform 0.16s; }
.tp-desc-toggle[aria-expanded="true"] .tp-desc-caret { transform: rotate(180deg); }
.tp-desc-toggle[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}
.tp-desc-box {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px;
    background: #f9fafb;
}
.tp-desc-box:focus { background: var(--surface); }

/* ── Create Team: people picked to invite ────────────────────────
   They are only invited once the team exists, so until then they live here
   as chips that can be taken off again. */
.tp-mem-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.tp-mem-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 4px 6px 4px 4px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--bg);
    font-size: 13px;
    color: var(--text);
}
.tp-mem-av {
    width: 24px; height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e0e7ff;
    color: #4338ca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.tp-mem-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.tp-mem-x {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
    padding: 0 3px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tp-mem-x:hover { color: var(--danger); }

/* Search */
.tp-search { position: relative; display: flex; align-items: center; }
.tp-search > svg {
    position: absolute;
    left: 13px;
    color: var(--muted);
    pointer-events: none;
}
.tp-search input {
    width: 100%;
    height: 38px;
    border-radius: 99px;
    border: 1px solid transparent;
    background: var(--bg);
    padding: 0 34px 0 36px;
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    outline: none;
    transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
    -webkit-appearance: none;
    appearance: none;
}
.tp-search input::-webkit-search-cancel-button { display: none; }
.tp-search input::placeholder { color: #9ca3af; }
.tp-search input:focus {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.tp-search-clear {
    position: absolute;
    right: 8px;
    width: 24px; height: 24px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
}
.tp-search-clear:hover { background: var(--border); color: var(--text); }

/* Filter chips */
.tp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-chip {
    border: none;
    background: var(--bg);
    color: var(--muted);
    border-radius: 99px;
    padding: 5px 13px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tp-chip:hover        { background: #e6e9ee; color: var(--text); }
.tp-chip.active       { background: #dbeafe; color: var(--primary-dark); }
.tp-chip.active:hover { background: #cfe0fd; }

/* ── Start a new conversation (Chat chip only) ─────────────── */
.tp-chat-new { margin-top: 10px; }
.tp-chat-new[hidden] { display: none; }
.tp-new-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.tp-new-chat-btn:hover { background: var(--primary-dark); }
.tp-chat-search { margin-top: 8px; }
.tp-chat-search[hidden] { display: none; }
.tp-chat-search input {
    /* Explicit for the same reason `.tp-search input` declares it: something
       later in this file puts inputs back to content-box, and without this the
       padding pushes the field past the edge of the sidebar. */
    box-sizing: border-box;
    width: 100%;
    padding: 8px 11px;
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    outline: none;
}
.tp-chat-search input:focus { border-color: var(--primary); background: var(--surface); }

/* Where dragging is not on offer the grip keeps its width, so avatars stay in
   a line, but it is never shown — a handle that does nothing reads as broken. */
.tp-row.tp-nodrag .tp-drag { visibility: hidden; }

/* What was last said, which is the whole point of a conversation row — so
   unlike .tp-sub it survives a narrow sidebar. */
.tp-chat-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-row-unread .tp-chat-sub { color: var(--text); font-weight: 500; }

/* The time a conversation last moved, opposite its name. */
.tp-when {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}
.tp-row-unread .tp-when { color: var(--primary); font-weight: 600; }

/* Scrolling row list */
.tp-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.tp-list::-webkit-scrollbar         { width: 7px; }
.tp-list::-webkit-scrollbar-thumb   { background: #d3d8e0; border-radius: 99px; }
.tp-list::-webkit-scrollbar-thumb:hover { background: #b9c1cc; }
.tp-list::-webkit-scrollbar-track   { background: transparent; }

.tp-side-state {
    padding: 40px 20px;
    text-align: center;
    font-size: 13.5px;
    color: var(--muted);
}
.tp-side-state .spinner {
    width: 26px; height: 26px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: 0 auto 12px;
}

.tp-side-foot {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--muted);
    text-align: center;
    background: var(--surface);
}

/* ── Workspace row ────────────────────────────────────────── */
.tp-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--tp-line);
    transition: background 0.13s;
    -webkit-tap-highlight-color: transparent;
}
.tp-row:hover  { background: var(--tp-hover); }
.tp-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tp-row.active { background: var(--tp-active); }
.tp-row.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--primary);
}

/* Drag handle: quiet until the row is hovered */
.tp-drag {
    flex: 0 0 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    opacity: 0;
    cursor: grab;
    transition: opacity 0.15s;
    padding: 4px 0;
    margin-left: -6px;
}
.tp-drag span { display: block; width: 10px; height: 2px; border-radius: 2px; background: #b6bcc6; }
.tp-row:hover .tp-drag { opacity: 1; }
.tp-drag:active { cursor: grabbing; }

.tp-av {
    flex: 0 0 46px;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    user-select: none;
}
.tp-av-personal { background: linear-gradient(135deg, #22c55e, #16a34a); }

.tp-row-body { flex: 1; min-width: 0; }

.tp-row-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
}
.tp-name {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.15px;
}
.tp-role {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.tp-role-ico { font-size: 10px; line-height: 1; }

.tp-row-bot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}
/* Everything except the badge shares one truncating line, like a chat preview. */
.tp-preview {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-sub       { overflow: hidden; text-overflow: ellipsis; }
.tp-dot-sep   { color: #c3c9d2; flex-shrink: 0; }

/* The row is in the list because a TASK matched: the preview says so and
   shows the match, so it never looks like a stray workspace. */
.tp-row-hit { background: #f8fbff; }
.tp-preview-hit > svg { color: var(--primary); flex-shrink: 0; }
.tp-hit-count { color: var(--primary); font-weight: 600; flex-shrink: 0; }
.tp-hit-top   { overflow: hidden; text-overflow: ellipsis; font-style: italic; }

/* Pending count doubles as WhatsApp's unread badge */
.tp-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 99px;
    background: var(--primary);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.tp-badge-clear {
    background: #dcfce7;
    color: #16a34a;
    font-size: 12px;
}

/* Icon button in the pane header (team settings) */
.tp-head-btn {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tp-head-btn:hover { background: var(--bg); color: var(--primary); border-color: var(--primary); }

.tp-row.tp-dragging { opacity: 0.45; }
.tp-row.tp-drop     { box-shadow: inset 0 3px 0 var(--primary); background: var(--tp-active); }

/* ── Resizable split ────────────────────────── */
/* The divider between the two panes is draggable, so the workspace list can be
   widened for long team names or narrowed to give the tasks more room. The
   handle takes up no space of its own — it is a zero-width flex item whose
   grab strip is absolute, straddling the sidebar's border. Dragging therefore
   never nudges the layout, it only changes --tp-side-w. */
.tp-resizer {
    position: relative;
    flex: 0 0 0px;
    width: 0;
    align-self: stretch;
    z-index: 15;
    touch-action: none;          /* the pointer is ours: never scroll on drag */
    outline: none;
}
.tp-resizer::before {            /* grab strip — wider than the line it moves */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /* Leans into the pane rather than back over the sidebar: the list's
       7px scrollbar sits just inside that border and must stay grabbable. */
    left: -1px;
    width: 9px;
    cursor: col-resize;
}
.tp-resizer::after {             /* the line itself, lit while you hold it */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 3px;
    border-radius: 2px;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.tp-resizer:hover::after,
.tp-resizer:focus-visible::after,
body.tp-resizing .tp-resizer::after { opacity: 1; }

/* One cursor for the whole page while dragging, and nothing else may claim the
   pointer — a text selection or the chat iframe would swallow the drag. */
body.tp-resizing {
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
}
body.tp-resizing iframe { pointer-events: none; }

/* ── Right pane ───────────────────────────────────────────── */
.tp-pane {
    position: relative;          /* the task-chat layer is absolute inside it */
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

/* Chat-style pane header */
.tp-pane-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.tp-pane-head .tp-av { flex-basis: 42px; width: 42px; height: 42px; font-size: 14px; }

.tp-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    margin-left: -6px;
    border: none;
    background: transparent;
    color: var(--text);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}
.tp-back:hover { background: var(--bg); }

.tp-pane-id { flex: 1; min-width: 0; }
.tp-pane-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.tp-pane-sub {
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 1px 0 0;
}

/* Sticky filter/progress strip under the header */
.tp-pane-tools {
    flex: 0 0 auto;
    padding: 12px 18px 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.tp-pane-tools .filter-row    { margin-bottom: 10px; }
.tp-pane-tools .progress-wrap { margin-bottom: 0; }

/* Scrolling task area, with WhatsApp's faint textured backdrop */
.tp-pane-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 18px 32px;
    background-color: var(--bg);
    background-image: radial-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px);
    background-size: 22px 22px;
}
.tp-pane-body::-webkit-scrollbar         { width: 9px; }
.tp-pane-body::-webkit-scrollbar-thumb   { background: #ccd2db; border-radius: 99px; }
.tp-pane-body::-webkit-scrollbar-thumb:hover { background: #b3bbc7; }
.tp-pane-body::-webkit-scrollbar-track   { background: transparent; }

/* Inside the shell the old page-level padding is handled by the pane. */
.tp-pane .todos-main { padding: 0; flex: none; }

/* ── Intro / empty pane (no workspace selected) ───────────── */
.tp-intro {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 40px 32px;
    background-color: var(--bg);
    background-image: radial-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px);
    background-size: 22px 22px;
    border-bottom: 6px solid var(--primary);
}
.tp-intro-art {
    width: 116px; height: 116px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dbeafe, #eef2ff);
    color: var(--primary);
    margin-bottom: 18px;
}
.tp-intro h2 {
    font-size: 26px;
    font-weight: 300;
    color: #3f4a5a;
    letter-spacing: -0.4px;
}
.tp-intro p {
    font-size: 13.5px;
    color: var(--muted);
    max-width: 460px;
    line-height: 1.6;
}
.tp-intro-hint {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Responsive: one pane at a time below 900px ───────────── */
@media (max-width: 900px) {
    .tp-sidebar {
        flex: 1 1 auto;
        width: 100%;
        border-right: none;
    }
    .tp-pane { display: none; }

    .tp-shell.has-selection .tp-sidebar { display: none; }
    .tp-shell.has-selection .tp-pane    { display: flex; }

    /* One pane at a time — there is no divider left to drag. */
    .tp-resizer { display: none; }

    .tp-back        { display: flex; }
    .tp-pane-head   { padding: 9px 12px; gap: 10px; }
    .tp-pane-tools  { padding: 10px 12px 9px; }
    .tp-pane-body   { padding: 12px 10px 28px; }

    /* The nav already has a back arrow on desktop; the pane owns it here. */
    .dash-wrap-fixed .dash-nav .back-link { display: none; }
}

@media (min-width: 901px) {
    /* Desktop keeps both panes, so the nav back arrow is redundant. */
    .dash-wrap-fixed .dash-nav .back-link { display: none; }
}

@media (max-width: 640px) {
    /* The crown, the pill colour and the title attribute still carry the
       meaning, and the name gets the width back. */
    .tp-role-txt   { display: none; }
    .tp-role       { padding: 2px 5px; }

    .tp-side-head  { padding: 10px 10px; gap: 9px; }
    .tp-row        { padding: 9px 10px 9px 12px; gap: 10px; }
    .tp-av         { flex-basis: 42px; width: 42px; height: 42px; font-size: 14px; }
    .tp-drag       { opacity: 0.5; }        /* no hover on touch — keep it visible */
    .tp-gear       { opacity: 0.65; }
    .tp-new-btn span, .tp-join-btn span { display: none; }
    .tp-new-btn    { padding: 8px; border-radius: 50%; }
    .tp-join-btn   { padding: 7px; border-radius: 50%; }
    .tp-side-actions { gap: 6px; }
    .tp-pane-name  { font-size: 15px; }
    .tp-intro h2   { font-size: 21px; }
}

/* On short screens the tools strip eats too much room — tighten it. */
@media (max-height: 620px) {
    .tp-pane-tools { padding: 8px 18px 7px; }
    .tp-pane-tools .filter-row { margin-bottom: 7px; }
}

/* The shell pins the nav to 60px, so the brand must never wrap to two lines. */
.dash-wrap-fixed .dash-nav .brand           { min-width: 0; flex-shrink: 1; }
.dash-wrap-fixed .dash-nav .brand-text-link { min-width: 0; overflow: hidden; }
.dash-wrap-fixed .dash-nav .brand-text      { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-wrap-fixed .dash-nav .nav-right  { flex-shrink: 0; }

@media (max-width: 480px) {
    .dash-wrap-fixed .dash-nav .brand-text { font-size: 15px; }
    .dash-wrap-fixed .dash-nav .nav-user   { display: none; }
}

/* ══════════════════════════════════════════════════════════
   OFFLINE STATE
   A single banner explains what you are looking at, and the controls that
   need the server are visibly stood down. Offline is read-only by design.
   ══════════════════════════════════════════════════════════ */

.tp-offline-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border-radius: 99px;
    background: #1f2937;
    color: #f9fafb;
    font-size: 13px;
    line-height: 1.35;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    animation: tpOfflineIn 0.22s ease;
}
.tp-offline-bar svg    { flex: 0 0 auto; color: #fca5a5; }
.tp-offline-bar strong { color: #fca5a5; font-weight: 700; }

@keyframes tpOfflineIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Stand down anything that needs the server. The JS guards are what actually
   enforce this; these rules just stop the UI from inviting the attempt. */
body.tp-is-offline .btn-add,
body.tp-is-offline .tp-new-btn,
body.tp-is-offline .tp-join-btn,
body.tp-is-offline .btn-edit,
body.tp-is-offline .btn-delete,
body.tp-is-offline .btn-lock,
body.tp-is-offline .status-toggle,
body.tp-is-offline .task-badge,
body.tp-is-offline .member-assign-btn,
body.tp-is-offline .member-arrow,
body.tp-is-offline .reminder-btn,
body.tp-is-offline .instant-btn {
    opacity: 0.4;
    pointer-events: none;
}

/* The task list stays fully readable and scrollable — that is the point. */
body.tp-is-offline .task-card { opacity: 1; }

/* Leave room for the banner so it never sits on top of the last task. */
body.tp-is-offline .tp-pane-body { padding-bottom: 76px; }

@media (max-width: 640px) {
    .tp-offline-bar {
        left: 8px;
        right: 8px;
        bottom: 8px;
        max-width: none;
        transform: none;
        border-radius: 12px;
        animation: none;
    }
}

/* ══════════════════════════════════════════════════════════
   TASK CHAT LAYER
   Slides in over the whole right pane, header included, the way a chat replaces
   the list in WhatsApp Web. The workspace sidebar stays visible throughout, so
   you never lose your place.
   ══════════════════════════════════════════════════════════ */

.tp-chat {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    background: var(--bg);
    background-image: radial-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.tp-chat[hidden]     { display: none; }
.tp-chat.is-open     { opacity: 1; transform: none; }

.tp-chat iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* Opaque, matching the wallpaper chat.php now paints for itself. A
       transparent frame puts its text on greyscale antialiasing instead of
       ClearType, which reads as thin, washed-out message text. */
    background: var(--bg);
}

/* Covers the frame until chat.php has painted, so you never see a white flash. */
.tp-chat-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}
.tp-chat-loading[hidden] { display: none; }
.tp-chat-loading .spinner {
    width: 30px; height: 30px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* Users on a touch screen expect momentum scrolling inside the frame. */
@media (max-width: 900px) {
    .tp-chat { -webkit-overflow-scrolling: touch; }
}

/* ── Unread task chat ─────────────────────────────────────
   The green count sits inside the chat button, right after the task title, so
   the number and the bubble are one target: whatever you aim at opens the
   thread and clears the count. Green, not the priority red/amber, because it
   is not a severity — it is "someone is waiting on you". */
.task-chat-btn.has-unread {
    width: auto;
    gap: 4px;
    padding: 0 5px 0 4px;
    color: #16a34a;
    background: #dcfce7;
}
.task-chat-btn.has-unread:hover { background: #bbf7d0; color: #15803d; }
.task-chat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* The card itself, once it has been lifted to the top of the list: a green
   rail on the left so the reason it jumped is visible without reading. */
.task-card.has-new-chat .task-priority-bar { background: #16a34a; }
.task-card.has-new-chat {
    background: linear-gradient(90deg, rgba(22,163,74,.06), transparent 220px);
}

/* Unread chat on a status pill: small and green, so the task count beside it
   still reads first. It is a signpost, not a button — the badge on the task
   itself is the thing you click. */
.pill-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 99px;
    background: #16a34a;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pill-chat[hidden] { display: none; }
/* The active pill is solid blue — green on blue does not read, so invert. */
.filter-pill.active .pill-chat { background: #fff; color: #15803d; }

/* ── Sidebar stat chips ───────────────────────────────────
   Each chip is icon + number + word. The word carries a wide list; the icon
   carries a narrow one. Both are always in the markup and CSS picks — the
   number is the one part that never moves. */
.tp-mini {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    font-weight: 600;
}
.tp-mini .pill-dot, .tp-mini-emoji { display: none; }
.tp-mini-emoji { font-size: 10px; line-height: 1; }
.tp-mini-mem  { color: var(--muted); }
.tp-mini-pend { color: #b91c1c; }
.tp-mini-prog { color: #b45309; }
.tp-mini-done { color: #15803d; }

/* Narrow list: words out, icons in. Set by the ResizeObserver in
   sidebar_teams.php, because the width comes from the divider, not the
   viewport, so a media query would never see it. */
.tp-side-narrow .tp-mini-word { display: none; }
.tp-side-narrow .tp-mini .pill-dot,
.tp-side-narrow .tp-mini-emoji { display: inline-block; }
.tp-side-narrow .tp-sub        { display: none; }
.tp-side-narrow .tp-row-bot    { gap: 6px; }
.tp-side-narrow .tp-preview    { gap: 4px; }
/* The separators are noise once the line is four short glyph+number pairs. */
.tp-side-narrow .tp-preview .tp-dot-sep { display: none; }

/* New chat messages in a workspace — the slot the pending count used to own.
   Green, matching the badge next to the task title it will take you to. */
.tp-badge-chat {
    background: #16a34a;
    color: #fff;
}
.tp-row-unread .tp-name { font-weight: 700; }

/* ── Task lock ───────────────────────────────────────────────
   A locked task is frozen: team leaders and members cannot edit or delete it
   (see api/task_lock.php). The padlock is a one-click toggle for owners,
   admins and managers and a plain indicator for everyone else, and the amber
   wash marks the whole row so the state reads without hovering anything.
   Placed last on purpose — a lock outranks the unread-chat tint above. */
.btn-lock:hover           { background: #fef3c7; color: #b45309; }
.btn-lock.locked-on       { color: #b45309; }
.btn-lock.lock-static     { cursor: default; }
.btn-lock.lock-static:hover { background: none; }

/* Edit and Delete stay put on a locked card instead of vanishing: pressing one
   is how you find out why it will not open. */
.task-btn.is-blocked        { opacity: 0.45; cursor: not-allowed; }
.task-btn.is-blocked:hover  { background: #fef3c7; color: #b45309; }

/* The wash is layered OVER the card's own surface, not instead of it: a
   gradient that fades to transparent would let the grey list background show
   through the right-hand half of every locked card. */
.task-card.is-locked {
    border-color: #fde68a;
    background: linear-gradient(270deg, rgba(245,158,11,0.12), rgba(245,158,11,0) 300px), var(--surface);
}
.task-card.is-locked:hover { border-color: #fcd34d; }

.info-value.info-locked { color: #b45309; font-weight: 600; }

/* ── Mobile number field (intl-tel-input) ─────────────────────────────────
   The widget wraps our own <input> in a .iti div and pushes the flag +
   dial code into the input's left padding, so the box itself keeps whatever
   the page already styles it with (.field input here, .prof-input on the
   profile page). Only the wrapper needs teaching. */
.iti { width: 100%; display: block; }

/* style.css opens with a doubled BOM, which costs us the global box-sizing
   reset on the first rule — without it the widget's inline padding-left
   would push a width:100% input straight out of its card. */
.iti, .iti * { box-sizing: border-box; }

/* .field clips its overflow (it hides the same padding problem), which would
   also cut off the country dropdown. The phone row opts out. */
.field-phone { overflow: visible; }

/* The dropdown is the one thing here that must sit above the card. */
.iti__dropdown-content { z-index: 5; }

/* The flag button borrows the field's own resting background so it does not
   read as a separate control glued to the left edge. */
.iti__selected-country { border-radius: var(--radius) 0 0 var(--radius); }

/* The "+91" is the library's own markup, and its rules read font-size, colour
   and line-height as `inherit` — which means the wrapper, not the input beside
   it. Left alone the wrapper inherits <body>'s 16px, so the dial code sits a
   size larger than the number typed next to it and the two look off-kilter.
   Setting the wrapper to the input's own type puts them on one line in one
   style; each page states the size its input actually uses. */
.field .iti     { font-size: 15px; color: var(--text); line-height: normal; }
.prof-row .iti  { font-size: 14px; color: #0f172a;     line-height: normal; }

/* Breathing room between the dial code and the number. This has to be padding
   on the button rather than a margin on the dial code: the library sets the
   input's left padding from the button's offsetWidth, which counts padding but
   would ignore a child's margin, and the number would then sit under the +91.
   The flag's own inset matches the 14px the other fields indent their text by
   (1px of it comes from .iti__country-container's border-width padding). */
.iti { --iti-spacer-horizontal: 13px; }
.iti__selected-country { padding-right: 8px; }