/* =========================================================
   Team Pro Manager — Frontend Stylesheet v1.0.0
   ========================================================= */

/* ── Reset / base ─────────────────────────────────────── */
.tpm *, .tpm *::before, .tpm *::after { box-sizing: border-box; }
.tpm { --clr-primary:#6366f1; --clr-primary-d:#4f46e5; --clr-success:#10b981;
       --clr-warning:#f59e0b; --clr-danger:#ef4444; --clr-info:#3b82f6;
       --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
       --shadow-sm:0 1px 3px rgba(0,0,0,.08);
       --shadow-md:0 4px 16px rgba(0,0,0,.12);
       --shadow-lg:0 12px 40px rgba(0,0,0,.18);
       --border:#e5e7eb;
       font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
       color:#111827; font-size:15px; line-height:1.6; }

/* ── Login notice ─────────────────────────────────────── */
.tpm-login-notice { background:#fff7ed; border:1px solid #fed7aa; border-radius:var(--radius-md);
    padding:20px 24px; margin:20px 0; color:#92400e; }
.tpm-login-notice a { color:var(--clr-primary); font-weight:600; }

/* ── Notices ──────────────────────────────────────────── */
.tpm-notice { padding:12px 18px; border-radius:var(--radius-md); margin:12px 0; border:1px solid transparent; }
.tpm-notice--success { background:#d1fae5; border-color:#6ee7b7; color:#065f46; }
.tpm-notice--error   { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
.tpm-notice--info    { background:#dbeafe; border-color:#93c5fd; color:#1e40af; }

/* ── Top bar ──────────────────────────────────────────── */
.tpm-topbar { display:flex; align-items:center; justify-content:space-between;
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:12px 20px; margin-bottom:24px; box-shadow:var(--shadow-sm); }
.tpm-topbar__logo { font-weight:700; font-size:17px; color:var(--clr-primary); margin-right:24px; }
.tpm-topbar__left { display:flex; align-items:center; gap:8px; }
.tpm-topbar__right { display:flex; align-items:center; gap:10px; }
.tpm-topbar__name  { font-weight:500; font-size:14px; }

/* ── Nav ──────────────────────────────────────────────── */
.tpm-nav { display:flex; gap:4px; flex-wrap:wrap; }
.tpm-nav--bar { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:10px 16px; margin-bottom:20px; display:flex; gap:4px; flex-wrap:wrap;
    box-shadow:var(--shadow-sm); }
.tpm-nav__link { padding:6px 14px; border-radius:var(--radius-sm); font-size:14px;
    font-weight:500; color:#374151; text-decoration:none; transition:all .15s; }
.tpm-nav__link:hover { background:#f3f4f6; color:#111827; }
.tpm-nav__link--active { background:var(--clr-primary); color:#fff !important; }

/* ── Notifications ────────────────────────────────────── */
.tpm-notif-btn { background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:6px 12px; cursor:pointer; font-size:15px; position:relative; }
.tpm-notif-badge { position:absolute; top:-6px; right:-6px; background:var(--clr-danger);
    color:#fff; font-size:11px; font-weight:700; min-width:18px; height:18px;
    border-radius:9px; display:flex; align-items:center; justify-content:center;
    padding:0 4px; }
.tpm-notif-panel { position:absolute; right:20px; top:70px; width:340px; background:#fff;
    border:1px solid var(--border); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg); z-index:1000; }
.tpm-notif-panel__header { display:flex; justify-content:space-between; align-items:center;
    padding:14px 16px; border-bottom:1px solid var(--border); }
.tpm-notif-panel__header button { background:none; border:none; color:var(--clr-primary);
    font-size:13px; cursor:pointer; }
#tpm-notif-list { max-height:340px; overflow-y:auto; }
.tpm-notif-item { padding:12px 16px; border-bottom:1px solid #f3f4f6; font-size:13px; }
.tpm-notif-item--unread { background:#faf5ff; }
.tpm-notif-item__title { font-weight:600; margin-bottom:2px; }
.tpm-notif-item__time  { color:#9ca3af; font-size:12px; }

/* ── Stat cards ───────────────────────────────────────── */
.tpm-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:16px; margin-bottom:28px; }
.tpm-stat-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:20px; text-align:center; box-shadow:var(--shadow-sm); }
.tpm-stat-card--warn { border-color:#fcd34d; background:#fffbeb; }
.tpm-stat-card__num  { font-size:32px; font-weight:700; color:var(--clr-primary); line-height:1; }
.tpm-stat-card__label{ font-size:13px; color:#6b7280; margin-top:4px; }

/* ── Attendance widget ────────────────────────────────── */
.tpm-attendance-widget, .tpm-checkin-widget {
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
    border-radius:var(--radius-lg); padding:24px 28px; margin-bottom:28px;
    color:#fff; }
.tpm-att-widget__date, .tpm-checkin-widget__date  { font-size:14px; opacity:.8; }
.tpm-att-widget__clock, .tpm-checkin-widget__clock { font-size:42px; font-weight:700;
    letter-spacing:2px; margin:8px 0; font-variant-numeric:tabular-nums; }
.tpm-att-widget__actions, .tpm-checkin-widget__buttons { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.tpm-att-widget__status, .tpm-checkin-widget__log { display:flex; flex-wrap:wrap; gap:12px;
    font-size:13px; opacity:.9; }
.tpm-att-done { font-size:14px; }
.tpm-att-widget__timer { background:rgba(255,255,255,.15); border-radius:var(--radius-sm);
    padding:8px 14px; margin-top:8px; font-size:13px; display:flex; align-items:center; gap:10px; }
.tpm-att-log-row { display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border-bottom:1px solid rgba(255,255,255,.15); font-size:14px; }
.tpm-att-log-row:last-child { border-bottom:none; }
.tpm-att-log-row--total strong { font-size:18px; }

/* ── Section ──────────────────────────────────────────── */
.tpm-section { margin-bottom:36px; }
.tpm-section__header { display:flex; align-items:center; justify-content:space-between;
    margin-bottom:16px; }
.tpm-section__header h2 { margin:0; font-size:18px; }

/* ── Page header ──────────────────────────────────────── */
.tpm-page-header { display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px; }
.tpm-page-header h1 { margin:0; font-size:22px; }

/* ── Project cards ────────────────────────────────────── */
.tpm-project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:20px; }
.tpm-project-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
    transition:box-shadow .2s, transform .2s; }
.tpm-project-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.tpm-project-card__stripe { height:5px; }
.tpm-project-card__body { padding:18px 20px; flex:1; }
.tpm-project-card__header { display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:8px; }
.tpm-project-card__header h3 { margin:0; font-size:16px; }
.tpm-project-card__badges { display:flex; gap:4px; flex-wrap:wrap; }
.tpm-project-card__desc { font-size:13px; color:#6b7280; margin:6px 0 12px; }
.tpm-project-card__progress { margin:12px 0 8px; display:flex; align-items:center; gap:10px; }
.tpm-project-card__progress span { font-size:13px; font-weight:600; white-space:nowrap; }
.tpm-project-card__counts { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; }
.tpm-project-card__meta { display:flex; flex-wrap:wrap; gap:8px; font-size:12px;
    color:#6b7280; margin:8px 0; }
.tpm-project-card__avatars { display:flex; gap:2px; flex-wrap:wrap; margin-top:10px; }
.tpm-avatar-more { width:28px; height:28px; border-radius:50%; background:#e5e7eb;
    display:flex; align-items:center; justify-content:center; font-size:11px; color:#6b7280; }
.tpm-project-card__footer { padding:12px 20px; border-top:1px solid var(--border);
    background:#fafafa; display:flex; gap:8px; }

/* ── Avatar ───────────────────────────────────────────── */
.tpm-avatar { border-radius:50%; display:inline-flex; align-items:center;
    justify-content:center; color:#fff; font-weight:700; flex-shrink:0;
    vertical-align:middle; }

/* ── Progress bar ─────────────────────────────────────── */
.tpm-progress-bar { flex:1; background:#f3f4f6; border-radius:99px; height:8px; overflow:hidden; }
.tpm-progress-bar__fill { height:100%; border-radius:99px; transition:width .5s; min-width:2px; }
.tpm-progress-bar--lg { height:12px; }

/* ── Progress circle ──────────────────────────────────── */
.tpm-progress-circle { width:80px; height:80px; border-radius:50%;
    background:conic-gradient(var(--clr,#6366f1) var(--pct,0%), #e5e7eb var(--pct,0%));
    display:flex; align-items:center; justify-content:center; position:relative; }
.tpm-progress-circle::before { content:''; position:absolute; inset:8px;
    background:#fff; border-radius:50%; }
.tpm-progress-circle span { position:relative; font-weight:700; font-size:14px; z-index:1; }

/* ── Badges ───────────────────────────────────────────── */
.tpm-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px;
    font-size:12px; font-weight:600; white-space:nowrap; }
.tpm-badge--todo        { background:#f3f4f6; color:#374151; }
.tpm-badge--in-progress { background:#dbeafe; color:#1e40af; }
.tpm-badge--review      { background:#fef3c7; color:#92400e; }
.tpm-badge--done        { background:#d1fae5; color:#065f46; }
.tpm-badge--low         { background:#f0fdf4; color:#166534; }
.tpm-badge--medium      { background:#eff6ff; color:#1e40af; }
.tpm-badge--high        { background:#fff7ed; color:#c2410c; }
.tpm-badge--crit        { background:#fef2f2; color:#991b1b; }
.tpm-badge--active      { background:#dcfce7; color:#166534; }
.tpm-badge--on_hold     { background:#fef3c7; color:#92400e; }
.tpm-badge--completed   { background:#e0e7ff; color:#3730a3; }
.tpm-badge--archived    { background:#f3f4f6; color:#6b7280; }
.tpm-count-chip { font-size:12px; padding:2px 8px; border-radius:6px; font-weight:500; }
.tpm-count-chip--todo        { background:#f3f4f6; color:#374151; }
.tpm-count-chip--in-progress { background:#dbeafe; color:#1e40af; }
.tpm-count-chip--review      { background:#fef3c7; color:#92400e; }
.tpm-count-chip--done        { background:#d1fae5; color:#065f46; }

/* ── Buttons ──────────────────────────────────────────── */
.tpm-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:8px 16px; border-radius:var(--radius-sm); font-size:14px; font-weight:600;
    border:none; cursor:pointer; transition:all .15s; text-decoration:none; }
.tpm-btn--primary { background:var(--clr-primary); color:#fff; }
.tpm-btn--primary:hover { background:var(--clr-primary-d); }
.tpm-btn--success { background:var(--clr-success); color:#fff; }
.tpm-btn--success:hover { background:#059669; }
.tpm-btn--warning { background:var(--clr-warning); color:#fff; }
.tpm-btn--warning:hover { background:#d97706; }
.tpm-btn--danger  { background:var(--clr-danger); color:#fff; }
.tpm-btn--danger:hover  { background:#dc2626; }
.tpm-btn--outline { background:transparent; color:var(--clr-primary); border:1px solid var(--clr-primary); }
.tpm-btn--sm  { padding:5px 12px; font-size:13px; }
.tpm-btn--xs  { padding:3px 8px; font-size:12px; }
.tpm-btn--block { width:100%; }

/* ── Inputs ───────────────────────────────────────────── */
.tpm-input, .tpm-select { width:100%; padding:9px 12px; border:1px solid var(--border);
    border-radius:var(--radius-sm); font-size:14px; color:#111827;
    background:#fff; transition:border-color .15s; }
.tpm-input:focus, .tpm-select:focus { border-color:var(--clr-primary);
    outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.tpm-input--sm, .tpm-select--sm { padding:6px 10px; font-size:13px; }
.tpm-input--readonly { background:#f9fafb; color:#6b7280; }
.tpm-color { padding:4px; height:38px; cursor:pointer; }
.tpm-field-group { margin-bottom:14px; }
.tpm-field-group label { display:block; font-size:13px; font-weight:600;
    color:#374151; margin-bottom:5px; }
.tpm-form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }

/* ── Filter bar ───────────────────────────────────────── */
.tpm-filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    margin-bottom:20px; }
.tpm-filter-pill { padding:5px 14px; border-radius:99px; font-size:13px; font-weight:500;
    border:1px solid var(--border); text-decoration:none; color:#374151;
    background:#fff; transition:all .15s; }
.tpm-filter-pill:hover, .tpm-filter-pill.active { background:var(--clr-primary);
    color:#fff; border-color:var(--clr-primary); }

/* ── Project hero ─────────────────────────────────────── */
.tpm-project-hero { display:grid; grid-template-columns:1fr auto;
    gap:20px; background:#fff; border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:24px 28px; margin-bottom:24px;
    box-shadow:var(--shadow-sm); }
.tpm-project-hero__left .tpm-back-link { font-size:13px; color:#6b7280;
    text-decoration:none; display:inline-block; margin-bottom:6px; }
.tpm-project-hero__left h1 { margin:0 0 8px; font-size:22px; }
.tpm-project-hero__desc { color:#6b7280; font-size:14px; margin:4px 0 12px; }
.tpm-project-hero__meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tpm-project-hero__right { display:flex; flex-direction:column; align-items:center; gap:10px; }
.tpm-task-chips { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.tpm-back-link { color:#6b7280; text-decoration:none; font-size:14px; }

/* ── Tabs ─────────────────────────────────────────────── */
.tpm-tabs { display:flex; gap:2px; flex-wrap:wrap; border-bottom:2px solid var(--border);
    margin-bottom:20px; }
.tpm-tab { padding:10px 18px; background:none; border:none; border-bottom:3px solid transparent;
    font-size:14px; font-weight:500; cursor:pointer; color:#6b7280;
    transition:all .15s; margin-bottom:-2px; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.tpm-tab:hover { color:#111827; background:#f9fafb; }
.tpm-tab.active { color:var(--clr-primary); border-bottom-color:var(--clr-primary);
    background:#f0f0ff; }
.tpm-tab-panel { display:none; }
.tpm-tab-panel.active { display:block; }
.tpm-panel-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    margin-bottom:16px; }

/* ── Task table ───────────────────────────────────────── */
.tpm-task-table { border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; background:#fff; }
.tpm-task-table__head { display:grid;
    grid-template-columns:2fr 1fr 1.2fr 1fr 1fr 0.7fr 1fr;
    padding:10px 16px; background:#f9fafb; border-bottom:1px solid var(--border);
    font-size:12px; font-weight:700; color:#6b7280; text-transform:uppercase;
    letter-spacing:.04em; }
.tpm-task-row { display:grid;
    grid-template-columns:2fr 1fr 1.2fr 1fr 1fr 0.7fr 1fr;
    padding:12px 16px; border-bottom:1px solid #f3f4f6; align-items:center;
    font-size:14px; transition:background .15s; }
.tpm-task-row:last-child { border-bottom:none; }
.tpm-task-row:hover { background:#fafafa; }
.tpm-task-row--main { cursor:default; }
.tpm-task-row__title { font-weight:500; }
.tpm-task-row__project { font-size:12px; font-weight:500; }
.tpm-task-row__assignees { display:flex; gap:2px; flex-wrap:wrap; }
.tpm-task-row__actions { display:flex; gap:4px; }
.tpm-task-row__status select { font-size:13px; }
.tpm-sub-count { background:#e5e7eb; color:#374151; font-size:11px; padding:1px 5px;
    border-radius:99px; margin-left:6px; }
.tpm-inline-status { padding:4px 8px; border:1px solid var(--border); border-radius:var(--radius-sm);
    font-size:13px; background:#fff; cursor:pointer; }

/* ── Kanban ───────────────────────────────────────────── */
.tpm-kanban { display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
    overflow-x:auto; padding-bottom:12px; }
.tpm-kanban__col { background:#f9fafb; border:1px solid var(--border);
    border-radius:var(--radius-lg); min-height:400px; display:flex; flex-direction:column; }
.tpm-kanban__col-hd { display:flex; justify-content:space-between; align-items:center;
    padding:12px 14px; border-bottom:1px solid var(--border); }
.tpm-kanban__col-label { font-size:13px; font-weight:700; padding:3px 10px;
    border-radius:99px; }
.tpm-kanban__col-label--todo        { background:#f3f4f6; color:#374151; }
.tpm-kanban__col-label--in-progress { background:#dbeafe; color:#1e40af; }
.tpm-kanban__col-label--review      { background:#fef3c7; color:#92400e; }
.tpm-kanban__col-label--done        { background:#d1fae5; color:#065f46; }
.tpm-kanban__col-count { font-size:13px; font-weight:700; background:#e5e7eb;
    color:#6b7280; min-width:22px; height:22px; border-radius:99px;
    display:flex; align-items:center; justify-content:center; padding:0 6px; }
.tpm-kanban__drop { flex:1; padding:10px; display:flex; flex-direction:column; gap:8px;
    min-height:300px; }
.tpm-kanban__drop.drag-over { background:rgba(99,102,241,.06); border-radius:var(--radius-md); }
.tpm-kanban__card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
    padding:12px 14px; cursor:grab; position:relative; transition:box-shadow .15s, transform .15s; }
.tpm-kanban__card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.tpm-kanban__card.dragging { opacity:.5; cursor:grabbing; }
.tpm-kanban__card-title { font-weight:600; font-size:14px; margin-bottom:4px; padding-right:24px; }
.tpm-kanban__card-desc { font-size:12px; color:#6b7280; margin-bottom:8px; }
.tpm-kanban__card-subtasks { margin-bottom:8px; }
.tpm-mini-progress { height:4px; background:#f3f4f6; border-radius:99px; overflow:hidden;
    margin-bottom:3px; }
.tpm-mini-progress div { height:100%; background:var(--clr-primary); border-radius:99px; }
.tpm-kanban__card-foot { display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:4px; }
.tpm-kanban__card-date { font-size:11px; color:#6b7280; }
.tpm-kanban__card-avs { display:flex; gap:2px; }
.tpm-kanban__card-open { position:absolute; top:8px; right:8px; background:none;
    border:none; cursor:pointer; font-size:13px; color:#9ca3af; padding:2px 4px; }
.tpm-kanban__card-open:hover { color:var(--clr-primary); }

/* ── Gantt ────────────────────────────────────────────── */
.tpm-gantt-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:12px;
    flex-wrap:wrap; }
#tpm-gantt-range { font-weight:600; font-size:14px; }
#tpm-gantt-container { overflow-x:auto; }
.tpm-gantt-wrap { min-width:700px; }
.tpm-gantt-header { display:flex; margin-left:220px; border-bottom:2px solid var(--border);
    margin-bottom:2px; }
.tpm-gantt-header-cell { flex:1; text-align:center; font-size:11px; font-weight:600;
    color:#6b7280; padding:4px 2px; border-right:1px solid #f3f4f6; }
.tpm-gantt-row { display:flex; align-items:center; min-height:38px;
    border-bottom:1px solid #f3f4f6; }
.tpm-gantt-row:hover { background:#fafafa; }
.tpm-gantt-label { width:220px; min-width:220px; padding:6px 12px; font-size:13px;
    font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    border-right:1px solid var(--border); }
.tpm-gantt-label--milestone { font-weight:700; color:#7c3aed; }
.tpm-gantt-track { flex:1; position:relative; height:38px; }
.tpm-gantt-bar { position:absolute; height:22px; top:8px; border-radius:4px;
    cursor:pointer; transition:filter .15s; min-width:6px; }
.tpm-gantt-bar:hover { filter:brightness(1.1); }
.tpm-gantt-bar--todo        { background:#d1d5db; }
.tpm-gantt-bar--in_progress { background:#93c5fd; }
.tpm-gantt-bar--review      { background:#fcd34d; }
.tpm-gantt-bar--done        { background:#6ee7b7; }
.tpm-gantt-milestone { position:absolute; top:50%; transform:translateY(-50%);
    font-size:16px; cursor:pointer; }
.tpm-gantt-today { position:absolute; top:0; bottom:0; width:2px;
    background:rgba(239,68,68,.5); pointer-events:none; }

/* ── Milestones ───────────────────────────────────────── */
.tpm-milestones-list { display:flex; flex-direction:column; gap:12px; }
.tpm-milestone { display:flex; align-items:flex-start; gap:14px; background:#fff;
    border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 20px;
    box-shadow:var(--shadow-sm); }
.tpm-milestone--done { opacity:.7; border-style:dashed; }
.tpm-milestone--done .tpm-milestone__title { text-decoration:line-through; }
.tpm-milestone__icon { font-size:22px; }
.tpm-milestone__body { flex:1; }
.tpm-milestone__title { font-weight:700; font-size:15px; margin-bottom:4px; }
.tpm-milestone__desc  { font-size:13px; color:#6b7280; margin:4px 0 8px; }
.tpm-milestone__meta  { display:flex; flex-wrap:wrap; gap:10px; font-size:13px; color:#6b7280; }
.tpm-milestone__progress { margin:6px 0 8px; display:flex; align-items:center; gap:10px; }
.tpm-milestone__progress small { font-size:12px; color:#6b7280; }
.tpm-milestone__actions { display:flex; gap:6px; flex-direction:column; align-items:flex-end; }

/* ── Members grid ─────────────────────────────────────── */
.tpm-members-add { display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    margin-bottom:16px; background:#f9fafb; padding:14px; border-radius:var(--radius-md);
    border:1px solid var(--border); }
.tpm-members-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:12px; }
.tpm-member-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:16px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-sm); }
.tpm-member-card__info { flex:1; display:flex; flex-direction:column; gap:2px; }
.tpm-member-card__info strong { font-size:14px; }
.tpm-member-card__info span { font-size:12px; color:#6b7280; }

/* ── Tables ───────────────────────────────────────────── */
.tpm-table-wrap { overflow-x:auto; }
.tpm-table { width:100%; border-collapse:collapse; font-size:14px; }
.tpm-table th { background:#f9fafb; padding:10px 14px; text-align:left;
    font-size:12px; font-weight:700; color:#6b7280; text-transform:uppercase;
    letter-spacing:.04em; border-bottom:2px solid var(--border); white-space:nowrap; }
.tpm-table td { padding:11px 14px; border-bottom:1px solid #f3f4f6; }
.tpm-table tr:last-child td { border-bottom:none; }
.tpm-table tr:hover td { background:#fafafa; }
.tpm-table__empty { text-align:center; color:#9ca3af; padding:32px !important; }
.tpm-att-table { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; }

/* ── Reports ──────────────────────────────────────────── */
.tpm-report-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.tpm-report-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:20px 24px; box-shadow:var(--shadow-sm); }
.tpm-report-card--wide { grid-column:1/-1; }
.tpm-report-card h3 { margin:0 0 16px; font-size:15px; font-weight:700; }
.tpm-rpt-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.tpm-rpt-row__name { width:140px; font-size:13px; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; flex-shrink:0; }
.tpm-rpt-row__bar { flex:1; background:#f3f4f6; border-radius:99px; height:8px;
    overflow:hidden; }
.tpm-rpt-row__bar div { height:100%; border-radius:99px; min-width:4px; }
.tpm-rpt-row__val { font-size:13px; font-weight:700; min-width:40px; text-align:right; }

/* ── Modal ────────────────────────────────────────────── */
.tpm-modal { position:fixed; inset:0; z-index:9000; display:flex;
    align-items:center; justify-content:center; padding:20px; }
.tpm-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45);
    cursor:pointer; }
.tpm-modal__box { position:relative; background:#fff; border-radius:var(--radius-lg);
    padding:28px 32px; max-width:540px; width:100%; max-height:90vh;
    overflow-y:auto; box-shadow:var(--shadow-lg); }
.tpm-modal__box--task { max-width:780px; padding:0; }
.tpm-modal__close { position:absolute; top:14px; right:16px; background:none;
    border:none; font-size:22px; cursor:pointer; color:#6b7280; line-height:1;
    z-index:10; }
.tpm-modal__close:hover { color:#111827; }
.tpm-modal__actions { display:flex; gap:8px; margin-top:20px; }
.tpm-modal__box h2 { margin:0 0 20px; font-size:18px; }
.tpm-modal-loading { padding:40px; text-align:center; color:#9ca3af; }

/* ── Task detail modal content ────────────────────────── */
.tpm-task-detail { display:grid; grid-template-columns:1fr 300px; min-height:500px; }
.tpm-task-detail__main { padding:28px; border-right:1px solid var(--border); }
.tpm-task-detail__side { padding:20px; background:#fafafa; border-radius:0 var(--radius-lg) var(--radius-lg) 0; }
.tpm-task-detail__title { font-size:20px; font-weight:700; margin-bottom:8px; }
.tpm-task-detail__desc  { color:#374151; font-size:14px; line-height:1.7; margin-bottom:20px; }
.tpm-task-detail__section { margin-bottom:24px; }
.tpm-task-detail__section h4 { font-size:13px; font-weight:700; color:#6b7280;
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.tpm-side-field { margin-bottom:14px; font-size:13px; }
.tpm-side-field__label { color:#6b7280; font-weight:600; margin-bottom:3px; font-size:12px; }
.tpm-side-field__value { font-weight:500; }

/* ── Comments ─────────────────────────────────────────── */
.tpm-comment { display:flex; gap:10px; margin-bottom:16px; }
.tpm-comment__body { flex:1; background:#f9fafb; border-radius:var(--radius-md);
    padding:10px 14px; font-size:14px; }
.tpm-comment__author { font-weight:700; font-size:13px; }
.tpm-comment__time   { font-size:12px; color:#9ca3af; margin-left:8px; }
.tpm-comment__text   { margin-top:4px; }
.tpm-comment-form { display:flex; gap:8px; align-items:flex-end; margin-top:12px; }
.tpm-comment-form textarea { resize:vertical; min-height:60px; }

/* ── Subtasks ─────────────────────────────────────────── */
.tpm-subtask-row { display:flex; align-items:center; gap:8px; padding:6px 0;
    border-bottom:1px solid #f3f4f6; font-size:13px; }
.tpm-subtask-row:last-child { border-bottom:none; }
.tpm-subtask-row input[type=checkbox] { cursor:pointer; width:16px; height:16px; }
.tpm-subtask-row span { flex:1; }
.tpm-subtask-row--done span { text-decoration:line-through; color:#9ca3af; }
.tpm-subtask-add { display:flex; gap:6px; margin-top:8px; }

/* ── Attachments ──────────────────────────────────────── */
.tpm-attachment { display:flex; align-items:center; gap:8px; padding:6px 10px;
    background:#f3f4f6; border-radius:var(--radius-sm); margin-bottom:6px;
    font-size:13px; }
.tpm-attachment__icon { font-size:18px; }
.tpm-attachment__info { flex:1; min-width:0; }
.tpm-attachment__name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tpm-attachment__meta { font-size:11px; color:#6b7280; }

/* ── Time tracking ────────────────────────────────────── */
.tpm-time-actions { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.tpm-time-manual  { display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.tpm-time-manual input { width:80px; }
.tpm-time-log-row { display:flex; justify-content:space-between; font-size:12px;
    padding:4px 0; border-bottom:1px solid #f3f4f6; color:#374151; }

/* ── Invite page ──────────────────────────────────────── */
.tpm-invite-page { display:flex; justify-content:center; padding:40px 20px; }
.tpm-invite-box { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:36px 40px; max-width:440px; width:100%; box-shadow:var(--shadow-md);
    text-align:center; }
.tpm-invite-box h2 { margin-bottom:8px; font-size:22px; }
.tpm-invite-box p  { color:#6b7280; font-size:14px; margin-bottom:16px; }
.tpm-invite-form { text-align:left; margin-top:20px; }

/* ── Status text ──────────────────────────────────────── */
.tpm-overdue { color:#ef4444 !important; font-weight:600; }
.tpm-soon    { color:#f59e0b !important; font-weight:600; }
.tpm-date    { color:#6b7280; }
.tpm-done-label { color:#10b981; font-weight:600; }
.tpm-empty   { background:#fafafa; border:2px dashed #e5e7eb; border-radius:var(--radius-lg);
    padding:40px; text-align:center; color:#9ca3af; }
.tpm-empty-msg { color:#9ca3af; font-size:13px; }

/* ── Toast notifications ──────────────────────────────── */
.tpm-toast-container { position:fixed; bottom:24px; right:24px; z-index:9999;
    display:flex; flex-direction:column; gap:8px; }
.tpm-toast { display:flex; align-items:center; gap:10px; padding:12px 18px;
    border-radius:var(--radius-md); font-size:14px; font-weight:500;
    box-shadow:var(--shadow-md); animation:tpmSlideIn .3s ease; min-width:260px;
    max-width:400px; }
.tpm-toast--success { background:#d1fae5; color:#065f46; border-left:4px solid #10b981; }
.tpm-toast--error   { background:#fee2e2; color:#991b1b; border-left:4px solid #ef4444; }
.tpm-toast--info    { background:#dbeafe; color:#1e40af; border-left:4px solid #3b82f6; }
@keyframes tpmSlideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes tpmFadeOut { to { opacity:0; transform:translateX(20px); } }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:900px) {
    .tpm-kanban { grid-template-columns:repeat(2,1fr); }
    .tpm-task-table__head,
    .tpm-task-row { grid-template-columns:2fr 1fr 1fr 0.7fr 1fr; }
    .tpm-task-row > *:nth-child(4),
    .tpm-task-table__head > *:nth-child(4) { display:none; }
    .tpm-report-grid { grid-template-columns:1fr; }
    .tpm-project-hero { grid-template-columns:1fr; }
    .tpm-task-detail { grid-template-columns:1fr; }
    .tpm-task-detail__side { border-radius:0 0 var(--radius-lg) var(--radius-lg); border-right:none; border-top:1px solid var(--border); }
}
@media (max-width:600px) {
    .tpm-kanban { grid-template-columns:1fr; }
    .tpm-task-table__head { display:none; }
    .tpm-task-row { grid-template-columns:1fr; gap:4px; }
    .tpm-modal__box { padding:20px; }
    .tpm-modal__box--task { max-width:100%; }
    .tpm-stats { grid-template-columns:repeat(2,1fr); }
    .tpm-att-widget__clock, .tpm-checkin-widget__clock { font-size:32px; }
}