body { background: #ffffff; }

/* SortableJS's ghostClass — the placeholder shown where a dragged item
   would land. Referenced by both the project board's card drag-drop
   and the task detail page's sub-task drag-to-reorder; was never
   actually styled before (just fell back to the browser's plain
   default), so this is shared rather than duplicated per feature. */
.board-card-ghost { opacity: 0.4; background: #e7f1ff !important; }

/* `.min-w-0` is used across ~7 view files to let a flex child (usually
   one holding a title that should text-truncate, or a badge row that
   should wrap) shrink below its own content's natural width — the
   standard flexbox pattern for that. It is NOT an actual Bootstrap 5.3.3
   utility class, though — Bootstrap only ships min-width helpers for
   viewport units (.min-vw-100/.min-vh-100), nothing for min-width:0 on
   a flex child. Every "min-w-0" in this app's templates has therefore
   been silently doing nothing since it was first used; this is the
   real definition, applied globally rather than patched per-page,
   since the same silent-no-op affects every one of those 7 files
   identically, not just the ones two screenshots happened to surface.
*/
.min-w-0 { min-width: 0 !important; }

/* Content containers (task cards, Bootstrap .card and .list-group items
   used across Settings/Circle/Rewards/Points/Admin pages) all share the
   same light-gray fill, so the whole app reads consistently regardless
   of which specific component a given page happens to use. */
.card, .list-group-item {
    background-color: #f7f8fa;
}

.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.avatar-circle.lg { width: 44px; height: 44px; font-size: 1rem; }

.task-card {
    background: #f7f8fa;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.65rem;
    transition: box-shadow .12s;
}
.task-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.06); }

.task-title { font-weight: 600; font-size: 0.95rem; }
.task-meta-badges .badge { font-weight: 500; }

.btn-complete {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eafaf1;
    color: #1f9d55;
    border: none;
}
.btn-complete:hover { background: #1f9d55; color: #fff; }

/* Pill-style multi/single select, used on the task form */
.pill-select { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill-option {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    background: #eef0f2;
    color: #444;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid transparent;
    user-select: none;
}
.pill-option input { display: none; }
.pill-option.selected {
    background: #d6f0fb;
    color: #0d7ba8;
    border-color: #8fd4f0;
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}

.badge.due-soon { background: #fde2c8; color: #a15c1e; }

/* Priority badges — P1 (most urgent) down to P4 (least), red through
   blue, so which task matters most reads at a glance. See
   Ui::priorityBadgeClass(). No Priority deliberately isn't in here —
   it stays the plain default badge, nothing to signal. */
.priority-p1 { background-color: #f8d7da !important; color: #842029 !important; border: 1px solid #f1aeb5 !important; }
.priority-p2 { background-color: #ffe5d0 !important; color: #a8460a !important; border: 1px solid #ffc999 !important; }
.priority-p3 { background-color: #fff3cd !important; color: #997404 !important; border: 1px solid #ffe69c !important; }
.priority-p4 { background-color: #cff4fc !important; color: #055160 !important; border: 1px solid #9eeaf9 !important; }
.badge.pending-approval { background: #fff3cd; color: #8a6100; }
.section-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #8a92a3;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 1.25rem 0 0.65rem;
}
.section-divider .badge { text-transform: none; letter-spacing: normal; }

/* ---- New grouped / collapsible task view ---- */
.task-row-new {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
    transition: box-shadow .15s ease;
    position: relative;
}
.task-row-new:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
/* When a row's action menu is open, lift the whole row above the rows
   that follow it, so the dropdown menu (which overflows past the row's
   bottom edge) paints on top of the next row instead of behind its
   three-dot button. The :has() rule covers modern browsers; the
   .menu-open class (toggled by JS on dropdown show/hide) covers the
   rest. */
.task-row-new:has(.dropdown-menu.show),
.task-row-new.menu-open { z-index: 1030; }
.task-row-new .dropdown-menu { z-index: 1031; }

/* Applies to every dropdown in the app, not just task rows. Bootstrap's
   dropdown (via Popper) flips a menu upward when there's more room
   above than below, but on a short page — few tasks, a small browser
   window, whatever — there can be too little room in BOTH directions
   to fit the whole menu, and flipping alone can't fix that. Without a
   cap, the menu just renders past the bottom of the viewport with no
   way to reach the rest of it. Capping the height and letting it
   scroll internally means it can never do that, regardless of how
   little room is actually available. */
.dropdown-menu { max-height: 90vh; overflow-y: auto; }

.task-title-new { color: #1f2937; line-height: 1.25; }
.task-info-new { font-size: 0.875rem; color: #6b7280; }
.task-info-new .badge { font-size: 0.8rem; }

/* Projected (predicted future) calendar occurrences render dashed/lighter
   to visually distinguish them from a confirmed due date. */
.fc-projected-event {
    border: 1px dashed rgba(0,0,0,0.35) !important;
    opacity: 0.85;
}

@media (max-width: 575.98px) {
    .task-card { padding: 0.7rem 0.8rem; }
    .task-row-new { padding: 0.6rem 0.7rem; }
    main.container-fluid { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

    /* .task-row-new is an 80/20 grid on mobile: the left column (80%)
       is .task-row-main — avatar, title, and badges, always grouped
       together as one unit so the avatar can never end up stranded
       away from its own title. The right column (20%) is the action
       cluster (checkmark/approve-reject + three-dot menu), stacked
       vertically rather than side-by-side — 20% of a typical phone
       width works out to roughly 55-70px after the row's own padding,
       too narrow for two comfortable touch targets side by side.
       Desktop is untouched (this block only applies below 575.98px) —
       there .task-row-new keeps its normal single-line flex layout
       with plenty of room for everything inline.
       Bootstrap's utility classes (.d-flex etc., still present in the
       HTML for desktop) set display/flex-shrink with !important, so
       these overrides need !important too or they'd silently lose. */
    .task-row-new {
        display: grid !important;
        grid-template-columns: 80% 20%;
        gap: 0.5rem;
        align-items: start !important;
    }
    .task-row-new > .task-row-main {
        grid-column: 1;
        min-width: 0;
    }
    .task-row-new > .flex-shrink-0:last-child {
        grid-column: 2;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
    }

    /* Simple list-group rows (icon/text/chevron menus like Settings, the
       Manage-FAQ question rows, the Super-Admins list, and the archived
       task/project rows with View/Unarchive buttons) all share one shape:
       a growing text block between fixed-size edges. Keep them on a SINGLE
       line — the text block shrinks and wraps (or ellipsizes via
       .text-truncate) inside its own column instead of the whole row
       breaking apart. `min-width: 0` is the key: a flex child won't shrink
       below its content width without it, so a long/2-line label used to
       force the row to wrap, dropping the icon and the trailing control onto
       their own lines (the "funky" mobile stacking). The trailing actions
       stay flush right. */
    .list-group-item.d-flex { flex-wrap: nowrap; }
    .list-group-item.d-flex > * { min-width: 0; }
    .list-group-item.d-flex > .flex-shrink-0:last-child { margin-left: auto; }

    /* Bootstrap's .badge sets white-space: nowrap by default, so a
       single long label (e.g. "Keep Last Assigned") can't shrink or
       wrap internally — if that one badge alone is wider than the
       available column, it overflows on its own regardless of the
       flex-wrap fixes above. Letting badge text wrap keeps a long label
       inside its own pill (wrapping onto two lines) rather than forcing
       the row wider than the screen. */
    .task-info-new .badge { white-space: normal; text-align: left; }
}

/* Unconditional safety net, not just a mobile-width rule: nothing on
   any page should ever be able to create a page-wide horizontal
   scrollbar / bleed content past the viewport edge, even from a future
   one-off layout mistake somewhere we haven't audited. This clips an
   over-wide element rather than letting it spill off-screen — a much
   better failure mode than what these two screenshots showed. */


/* Unconditional safety net, not just a mobile-width rule: nothing on
   any page should ever be able to create a page-wide horizontal
   scrollbar / bleed content past the viewport edge, even from a future
   one-off layout mistake somewhere we haven't audited. This clips an
   over-wide element rather than letting it spill off-screen — a much
   better failure mode than what these two screenshots showed. */
html, body { overflow-x: hidden; min-height: 100vh; max-width: 100%; }

/* Subtask progress chip on task rows (see tasks/index.php). border-radius
   matches the comment bell (.follow-bell, 8px) so the row's chips and the
   right-hand action icons share the same corner rounding. */
.subtask-chip-progress { background:#fff7e6; color:#8a6412; border:1px solid #f0c56b; border-radius:8px; }
.subtask-chip-done     { background:#e4f6e8; color:#2f9e63; border:1px solid #bfe6cc; border-radius:8px; }

/* --- Follow bell (gold) + unread comment bubble --------------------------- */
.follow-bell{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#9aa1ab;cursor:pointer;padding:0;line-height:1}
.follow-bell:hover{color:#c78a00;border-color:#efd08a}
.follow-bell.is-following{color:#d99a00;background:#fdf5e1;border-color:#efd08a}   /* gold = following */
.follow-pill{display:inline-flex;align-items:center;gap:7px;border-radius:18px;padding:5px 12px;
  border:1px solid #e5e7eb;background:#fff;color:#6b7280;font-size:.8rem;font-weight:600;cursor:pointer;line-height:1}
.follow-pill:hover{color:#c78a00;border-color:#efd08a}
.follow-pill.is-following{color:#c78a00;background:#fdf5e1;border-color:#efd08a}
/* non-interactive bell indicator (board cards, where the whole card is a link) */
.follow-bell-static{color:#d99a00}

.comment-bubble{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:.75rem;font-weight:500;
  color:#6b7280;border:1px solid #e5e7eb;border-radius:16px;height:32px;padding:0 12px;background:#fff;
  white-space:nowrap;text-decoration:none;line-height:1}
.comment-bubble:hover{border-color:#3b82f6}
.comment-bubble.has-unread{color:#2563eb;border-color:#bcd4fb;background:#eff5ff;font-weight:700}

/* new (unread-on-open) comments on the detail page */
.comment-new{background:#f5f9ff;border-left:3px solid #3b82f6;border-radius:6px;padding-left:10px}
.comment-new-divider{display:flex;align-items:center;gap:10px;color:#2563eb;font-size:.72rem;font-weight:700;
  letter-spacing:.04em;margin:10px 0 4px}
.comment-new-divider::before,.comment-new-divider::after{content:"";height:1px;background:#dbe7fb;flex:1}

/* Notify (comments) as an action-row item on the task detail page — matches
   the borderless icon+label style of History/Edit; gold when active. */
.follow-action{background:none;border:0;padding:0;color:#6b7280;cursor:pointer;line-height:1.2}
.follow-action small{display:block}
.follow-action:hover{color:#c78a00}
.follow-action.is-following{color:#d99a00}
.follow-bell-form{display:inline-block}

/* Task-detail action row (Priority · Daily digest · History · Edit) —
   equal-width columns so every item is the same size and vertically aligned.
   The digest item is a form>button; the rest are div/a — all normalized here. */
.task-actions{display:flex;align-items:flex-start}
.task-actions > *{flex:1 1 0;min-width:0;text-align:center;text-decoration:none;color:#6b7280;margin:0}
.task-actions form{display:block}
.task-actions .task-action-btn{display:block;width:100%;background:none;border:0;padding:0;margin:0;color:#6b7280;cursor:pointer;font:inherit}
.task-actions .task-action-btn:hover{color:#0d6efd}
.task-actions .task-action-btn.is-on{color:#d99a00}          /* included in digest = gold */
.task-actions i{font-size:1.25rem;line-height:1}
.task-actions small{display:block;font-size:.8125rem;margin-top:3px}

/* Tables kept from an emailed-in (or migrated) task description. HtmlSanitizer
   tags every allowed <table> with .desc-table and strips presentational
   attributes, so this is the one place their look is defined: light borders and
   padding so rows/cells read as a grid instead of running together, and a
   horizontal scroll for anything wider than its container (e.g. on mobile). */
.desc-table{border-collapse:collapse;margin:.35rem 0;max-width:100%;display:block;overflow-x:auto;
  font-size:.9375rem;color:inherit}
.desc-table td,.desc-table th{border:1px solid #dee2e6;padding:.3rem .5rem;vertical-align:top;
  text-align:left;word-break:break-word}
.desc-table th{background:#f6f8fa;font-weight:600}
.desc-table caption{caption-side:top;text-align:left;color:#6b7280;font-size:.8125rem;padding:.15rem 0}

/* ---- Task detail: two-column layout with a collapsible details panel ---- */
/* The right panel holds the metadata + actions; collapsing it (the "Details"
   toggle) hides the panel and reflows the key facts into a chip row under the
   title. On narrow screens it defaults collapsed (chips), expandable inline. */
.td-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:14px;color:#5a616a;}
.td-toolbar .spacer{margin-left:auto;}
/* Gated "Mark as done" keeps full-strength green (#198754, not Bootstrap's
   faded 0.65-opacity disabled look) — the lock icon + "N left" label carry the
   blocked signal instead of a washed-out color. */
#markDoneBtn:disabled{opacity:1;background-color:#198754;border-color:#198754;color:#fff;cursor:not-allowed;}
.td-toolbar .td-back{color:#0d6efd;}
.td-toolbar .td-back:hover{color:#0a58ca;text-decoration:underline !important;}
.td-collapse-btn{border:1px solid #dde1e6;background:#fff;color:#41474e;border-radius:8px;padding:5px 11px;font-weight:600;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.td-collapse-btn:hover{background:#f5f6f8;}
.td-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start;}
.td-grid.td-collapsed{grid-template-columns:minmax(0,1fr);}
.td-grid.td-collapsed .td-side{display:none;}
.td-title{font-size:1.7rem;font-weight:700;margin:0;line-height:1.2;}
.td-chips{display:none;gap:8px;flex-wrap:wrap;margin:12px 0 4px;}
.td-grid.td-collapsed .td-chips{display:flex;}
.td-chip{display:inline-flex;align-items:center;gap:6px;background:#f3f5f7;border:1px solid #e6e9ee;border-radius:20px;padding:5px 11px;font-size:13px;color:#3a4048;text-decoration:none;}
.td-side{border:1px solid #e9ecef;border-radius:12px;background:#fbfbfc;overflow:hidden;position:sticky;top:16px;}
.td-side-h{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#8a919b;border-bottom:1px solid #f0f2f5;}
.td-side-h .btn-link{font-size:15px;line-height:1;}
.td-fld{padding:11px 15px;border-bottom:1px solid #f2f4f6;}
.td-fld .k{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#666;margin-bottom:5px;display:flex;align-items:center;gap:6px;}
.td-fld .v{font-size:14px;color:#666;}
.td-fld .v .sub{color:#666;font-size:14px;margin-top:3px;}
.td-side-actions{padding:12px 15px;border-bottom:1px solid #f0f2f5;}
/* Undo control — a contextual amber block pinned to the bottom of the Details
   panel; only shows when your own complete/skip is the most recent record. */
.td-fld.td-undo{background:#fff8e6;border-bottom:0;}
.td-undo .td-undo-msg{font-size:13px;color:#8a6100;display:flex;align-items:flex-start;gap:7px;margin-bottom:9px;}
.td-undo .td-undo-msg .bi{color:#b58a2b;line-height:1.3;}
.td-undo form{margin:0;}
.td-undo-btn{width:100%;background:#fff;border:1px solid #e6d59a;color:#7a5600;border-radius:8px;padding:7px 12px;font-weight:600;font-size:13px;display:inline-flex;gap:7px;align-items:center;justify-content:center;cursor:pointer;}
.td-undo-btn:hover{background:#fdf6e3;border-color:#dcc477;}
/* Late-completion notice on the Mark-as-done section (only when overdue). */
.td-late{background:#fff8e6;border:1px solid #f3e2b3;border-radius:10px;padding:11px 13px;margin-bottom:14px;}
.td-late-msg{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:#8a6100;}
.td-late-msg .bi{font-size:15px;margin-top:1px;color:#b58a2b;}
.td-late-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;}
.td-late-row .form-control{max-width:230px;}
.td-late-use{background:#fff;border:1px solid #e6d59a;color:#7a5600;font-weight:600;}
.td-late-use:hover{background:#fdf6e3;color:#5f4300;border-color:#dcc477;}
.td-late-now{color:#8a6100;font-weight:600;text-decoration:none;font-size:12.5px;}
.td-late-now:hover{color:#5f4300;}
/* Main-column content sections (Description / Subtasks / Mark as done / Comments)
   — one consistent style: bold sentence-case heading, colored icon, thin divider
   before each section. Keeps every section left-aligned with the same spacing. */
.td-sec{margin-top:18px;padding-top:18px;border-top:1px solid #eceef1;}
.td-sec:first-child{margin-top:6px;padding-top:0;border-top:0;}
.td-sec-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.td-sec-head .bi{color:#0d6efd;font-size:16px;line-height:1;}
.td-sec-title{font-size:16px;font-weight:700;color:#2b2f36;}
.td-sec-count{color:#6b7280;font-weight:600;font-size:14px;}
@media (max-width:991.98px){
  .td-grid{grid-template-columns:minmax(0,1fr);}
  .td-side{position:static;}
}