/* TaskFlow - custom theme layered on top of Bootstrap 5. GitLab x Jira-inspired direction:
   blue-violet accent, neutral cool grays, Jira-style type colors, tighter radius. */

:root {
  --tf-bg: #F7F8FA;
  --tf-surface: #ffffff;
  --tf-border: #DFE1E6;
  --tf-border-soft: #EBECF0;
  --tf-text: #172B4D;
  --tf-text-muted: #8993A4;
  --tf-primary: #5843E4;
  --tf-primary-rgb: 88, 67, 228;
  --tf-primary-dark: #4735C7;
  --tf-primary-soft: #EEECFD;
  --tf-sidebar-bg: #FFFFFF;
  --tf-sidebar-border: #DFE1E6;
  --tf-sidebar-text: #42526E;
  --tf-sidebar-active-bg: #EEECFD;
  --tf-sidebar-active-text: #4735C7;
  --tf-radius: 0.75rem;

  /* Jira-style issue-type colors -- used by the type-icon squares (see Issue type utilities
     below) and reused by chips/labels where a type needs to be recognizable at a glance. */
  --type-bug: #DE350B;      --type-bug-soft: #FFEBE6;
  --type-task: #0C66E4;     --type-task-soft: #E9F2FF;
  --type-story: #36B37E;    --type-story-soft: #E3FCEF;
  --type-epic: #6E49CB;     --type-epic-soft: #F1EBFB;

  /* Dashboard stat-tile semantic colors: bg / icon */
  --tile-blue-bg: #dbeafe;    --tile-blue-icon: #2563eb;
  --tile-green-bg: #dcfce7;   --tile-green-icon: #16a34a;
  --tile-yellow-bg: #fef9c3;  --tile-yellow-icon: #ca8a04;
  --tile-violet-bg: #ede9fe;  --tile-violet-icon: #7c3aed;
  --tile-orange-bg: #ffedd5;  --tile-orange-icon: #ea580c;
  --tile-red-bg: #fee2e2;     --tile-red-icon: #dc2626;
  --tile-amber-bg: #fef3c7;   --tile-amber-icon: #d97706;
  --tile-sky-bg: #e0f2fe;     --tile-sky-icon: #0284c7;
  --tile-emerald-bg: #d1fae5; --tile-emerald-icon: #059669;
}

html, body {
  background: var(--tf-bg);
  color: var(--tf-text);
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.form-label { font-weight: 500; }

/* ---------- App shell ---------- */

.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--tf-sidebar-bg);
  color: var(--tf-sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--tf-sidebar-border);
  transition: width .15s ease;
  overflow: hidden;
}

.sidebar-header { display: flex; flex-direction: column; gap: .5rem; padding: .6rem 1rem 1rem; border-bottom: 1px solid var(--tf-sidebar-border); }
.sidebar-header-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-width: 0; }
.sidebar-logo { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-logo img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-title { font-weight: 700; color: var(--tf-sidebar-active-text); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sidebar-subtitle { font-size: .72rem; color: var(--tf-sidebar-text); }
.sidebar-header-titles { min-width: 0; max-width: 100%; text-align: center; }
.sidebar-header-actions { display: flex; gap: .4rem; flex-shrink: 0; }

/* Collapse / pin controls */
.sidebar-icon-btn { flex-shrink: 0; width: 28px; height: 28px; border-radius: .4rem; border: 1px solid var(--tf-sidebar-border); background: transparent; color: var(--tf-sidebar-text); display: flex; align-items: center; justify-content: center; padding: 0; font-size: .9rem; }
.sidebar-icon-btn:hover { background: rgba(var(--tf-primary-rgb),.08); color: var(--tf-sidebar-active-text); }
.sidebar-icon-btn.pinned { background: var(--tf-sidebar-active-bg); color: var(--tf-primary); border-color: transparent; }
.sidebar-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.sidebar-icon-btn:disabled:hover { background: transparent; color: var(--tf-sidebar-text); }

.sidebar-create-task { margin: 1rem 1rem .25rem; text-decoration: none; }
.sidebar-create-task:hover { text-decoration: none; }
.sidebar-create-task .btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }

.sidebar-workspace-label { padding: .9rem 1.2rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tf-text-muted); white-space: nowrap; }

.sidebar-nav { flex: 1; padding: 0 .6rem .75rem; overflow-y: auto; overflow-x: hidden; }
/* Category labels now render as the first child of each group inside .sidebar-nav itself (see
   Site.Master's rptNav ItemTemplate) rather than as a single sibling above it -- .sidebar-nav's
   own .6rem padding already contributes half the original 1.2rem left offset, so the label's own
   horizontal padding is reduced here to land in the same spot as before. The first label also
   loses its top padding so it doesn't leave extra gap under "New Issue". */
.sidebar-nav .sidebar-workspace-label { padding-left: .6rem; padding-right: .6rem; }
.sidebar-nav .sidebar-workspace-label:first-child { padding-top: .2rem; }
.sidebar-nav .nav-link { display: flex; align-items: center; gap: .7rem; color: var(--tf-sidebar-text); padding: .55rem .75rem; border-radius: .5rem; font-size: .9rem; margin-bottom: .15rem; text-decoration: none; white-space: nowrap; }
.sidebar-nav .nav-link:hover { background: rgba(var(--tf-primary-rgb),.08); color: var(--tf-sidebar-active-text); }
.sidebar-nav .nav-link.active { background: var(--tf-sidebar-active-bg); color: var(--tf-sidebar-active-text); font-weight: 600; }
.sidebar-nav .nav-link i { font-size: 1rem; width: 1.1rem; text-align: center; flex-shrink: 0; }

.sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.2rem; border-top: 1px solid var(--tf-sidebar-border); }
.sidebar-user-name { font-weight: 600; color: var(--tf-sidebar-active-text); font-size: .88rem; white-space: nowrap; }
.sidebar-user-role { font-size: .76rem; color: var(--tf-sidebar-text); white-space: nowrap; }
.sidebar-logout-btn { flex-shrink: 0; width: 34px; height: 34px; border-radius: .5rem; border: 1px solid var(--tf-sidebar-border); background: transparent; color: var(--tf-sidebar-text); display: flex; align-items: center; justify-content: center; }
.sidebar-logout-btn:hover { background: rgba(var(--tf-primary-rgb),.08); color: var(--tf-sidebar-active-text); }

/* Collapsed rail: icons only, text hidden -- desktop only, see toggleCollapse() in Site.Master
   (mobile's off-canvas open/close below is a separate, existing mechanism). */
.app-sidebar.collapsed { width: 64px; }
.app-sidebar.collapsed .sidebar-header { padding-left: .5rem; padding-right: .5rem; }
.app-sidebar.collapsed .sidebar-header-top { flex-direction: column; justify-content: center; }
.app-sidebar.collapsed .sidebar-header-actions { justify-content: center; }
.app-sidebar.collapsed .sidebar-pin-btn,
.app-sidebar.collapsed .sidebar-header-titles,
.app-sidebar.collapsed .sidebar-workspace-label,
.app-sidebar.collapsed .nav-link span,
.app-sidebar.collapsed .sidebar-create-task .btn span,
.app-sidebar.collapsed .sidebar-user { display: none; }
.app-sidebar.collapsed .sidebar-create-task { margin-left: .5rem; margin-right: .5rem; }
.app-sidebar.collapsed .nav-link { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
.app-sidebar.collapsed .sidebar-footer { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
.app-sidebar.collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }

.app-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-header { display: flex; align-items: center; gap: .9rem; padding: .6rem 1.25rem; background: var(--tf-surface); border-bottom: 1px solid var(--tf-border); position: sticky; top: 0; z-index: 10; }
.app-header-spacer { flex: 1; }
.notif-count { position: absolute; top: -6px; right: -6px; font-size: .65rem; }

/* Topbar crumb/search/actions -- sits inside .app-header alongside the existing mobile
   sidebar-toggle button and spacer, purely additive so nothing about the header's existing
   markup/behavior changes. */
.topbar-crumb { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--tf-sidebar-text); white-space: nowrap; }
.topbar-crumb .topbar-crumb-current { color: var(--tf-text); }
.topbar-crumb .topbar-crumb-sep { color: var(--tf-text-muted); font-weight: 400; }
.topbar-search { display: flex; align-items: center; gap: .5rem; background: var(--tf-bg); border: 1px solid var(--tf-border); border-radius: .5rem; padding: .4rem .7rem; color: var(--tf-text-muted); font-size: .82rem; max-width: 320px; flex: 1; }
.topbar-search i { font-size: .85rem; flex-shrink: 0; }
.topbar-search input { border: none; background: none; outline: none; font-size: .82rem; color: var(--tf-text); flex: 1; min-width: 0; }
.topbar-search input::placeholder { color: var(--tf-text-muted); }
.topbar-actions { display: flex; align-items: center; gap: .5rem; }
.topbar-icon-btn { position: relative; width: 34px; height: 34px; border-radius: .5rem; border: none; background: transparent; color: var(--tf-text-muted); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.topbar-icon-btn:hover { background: var(--tf-bg); color: var(--tf-text); }

/* Users.aspx's "All users" card search box -- same pill look as .topbar-search above (icon +
   soft background, no visible border until focused), but as a real server postback control
   (asp:TextBox + asp:Button) rather than the topbar's plain client-side <input>, so it also
   carries a small primary Search button on the right. */
.tf-search-box {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--tf-bg);
    border: 1px solid #d0d0d0;
    border-radius: .5rem;
    padding: .15rem .15rem .15rem .75rem;
    max-width: 320px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tf-search-box:focus-within { border-color: var(--tf-primary); box-shadow: 0 0 0 .2rem rgba(var(--tf-primary-rgb),.15); background: var(--tf-surface); }
.tf-search-box i { color: var(--tf-text-muted); font-size: .85rem; flex-shrink: 0; }
.tf-search-box .form-control { border: none !important; background: transparent !important; box-shadow: none !important; padding: .5rem .25rem; font-size: .85rem; }
.tf-search-box .btn { border-radius: .4rem; padding: .35rem .8rem; font-size: .78rem; flex-shrink: 0; }

/* Users.aspx grid row -- status badge + Edit/Access/Activate-Deactivate actions. Same soft-tint
   chip language as badge-status/.chip elsewhere, rather than Bootstrap's plain link text +
   boxy btn-outline-secondary default. Markup/CommandName/CommandArgument are unchanged -- this
   is styling only, gvUsers_RowCommand still matches the same three CommandNames. */
.badge-user-status { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; font-size: .68rem; font-weight: 600; }
.badge-user-status .status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-user-status-active { background: #d1fae5; color: #065f46; }
.badge-user-status-active .status-dot { background: #10b981; }
.badge-user-status-inactive { background: #f3f4f6; color: #6b7280; }
.badge-user-status-inactive .status-dot { background: #9ca3af; }

.user-row-actions { display: inline-flex; align-items: center; gap: .35rem; }
.user-row-action { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: .5rem; font-size: .78rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.user-row-action i { font-size: .8rem; }
.user-row-action:hover { text-decoration: none; }
.user-row-action-edit { color: var(--tf-primary); }
.user-row-action-edit:hover { background: var(--tf-primary-soft); color: var(--tf-primary-dark); }
.user-row-action-access { color: var(--tf-text-muted); border-color: var(--tf-border); }
.user-row-action-access:hover { background: var(--tf-bg); color: var(--tf-text); border-color: var(--tf-text-muted); }
.user-row-action-danger { color: #b91c1c; }
.user-row-action-danger:hover { background: #fee2e2; color: #991b1b; }
.user-row-action-success { color: #15803d; }
.user-row-action-success:hover { background: #dcfce7; color: #166534; }

/* Jira-style issue-type icon square -- a small colored badge with a white glyph, used
   anywhere an issue's type needs to be recognizable at a glance without reading text.
   Pair with an existing bi-* icon: <span class="type-icon type-icon-bug"><i class="bi
   bi-bug-fill"></i></span>. Sizing is deliberately compact (20px) to sit inline with text. */
.type-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; color: #fff; font-size: .68rem; flex-shrink: 0; vertical-align: -4px; }
.type-icon-bug { background: var(--type-bug); }
.type-icon-task { background: var(--type-task); }
.type-icon-story { background: var(--type-story); }
.type-icon-epic { background: var(--type-epic); }

/* GitLab-style label/status chip -- a small rounded pill for a status or label name, paired
   with a soft-tinted background and a matching darker text color for contrast. Use the
   type/status *-soft variable as background and the solid variable as color. */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 600; white-space: nowrap; }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.app-main { flex: 1; }
.main-container {  padding: 1.5rem 1.25rem 3rem; }

/* Horizontal icon/label tab strip -- reusable wherever a filter reads better as tabs than a
   dropdown (e.g. the Type filter on AllIssues.aspx). */
.top-tabs { display: flex; align-items: center; gap: 1.4rem; border-bottom: 1px solid var(--tf-border); overflow-x: auto; white-space: nowrap; }
.top-tab { display: flex; align-items: center; gap: .4rem; padding: .6rem .05rem; color: var(--tf-text-muted); text-decoration: none; font-size: .85rem; font-weight: 500; border: none; border-bottom: 2px solid transparent; background: transparent; flex-shrink: 0; }
.top-tab i { font-size: .95rem; }
.top-tab:hover { color: var(--tf-sidebar-active-text); text-decoration: none; }
.top-tab.active { color: var(--tf-primary); border-bottom-color: var(--tf-primary); font-weight: 600; }

@media (max-width: 991.98px) {
  .app-sidebar { position: fixed; left: -260px; z-index: 1050; transition: left .2s ease; }
  .app-sidebar.open { left: 0; }
}

/* ---------- Cards / surfaces ---------- */

.tf-card { background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); margin-bottom: 1.25rem; }
.tf-card h5, .tf-card h6 { margin-bottom: 1rem; font-weight: 600; }

.form-control, .form-select, textarea.form-control { font-size: .875rem; border-radius: .5rem; }
textarea.form-control { min-height: 60px; }
.form-control:focus, .form-select:focus { border-color: var(--tf-primary); box-shadow: 0 0 0 .2rem rgba(var(--tf-primary-rgb),.15); }
.form-check-input:checked { background-color: var(--tf-primary); border-color: var(--tf-primary); }
.form-check-input:focus { border-color: var(--tf-primary); box-shadow: 0 0 0 .2rem rgba(var(--tf-primary-rgb),.15); }

.stat-tile { display: block; background: var(--tf-surface); border: 1px solid var(--tf-border); border-top: 3px solid var(--tf-border); border-radius: var(--tf-radius); padding: .6rem .65rem; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .2s ease, transform .2s ease, border-color .15s ease; }
.stat-tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-2px); color: inherit; }
.stat-tile:focus-visible { outline: 2px solid var(--tf-primary); outline-offset: 2px; }
.stat-tile.active { border-color: var(--tf-primary); box-shadow: 0 0 0 2px rgba(var(--tf-primary-rgb),.25); }
.stat-tile .stat-tile-top { display: flex; align-items: flex-start; gap: .5rem; }
.stat-tile .stat-tile-text { flex: 1; min-width: 0; }
.stat-tile .stat-value { font-size: 1.15rem; font-weight: 700; line-height: 1; margin-top: .2rem; }
.stat-tile .stat-label { font-size: .72rem; font-weight: 600; line-height: 1.15; color: var(--tf-text); }
.stat-tile .stat-caption { font-size: .66rem; color: var(--tf-text-muted); margin-top: .2rem; }
.stat-tile .stat-tile-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .82rem; flex-shrink: 0; }

.dashboard-tile-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; max-width: 900px; }
/* Dashboard.aspx's "My team" table -- can run to one row per direct report, which for a
   manager with a lot of reports pushed the whole Dashboard page very long. Capped height +
   vertical scroll keeps it contained; sticky header keeps the column names visible while
   scrolling through it. */
.dashboard-team-table-wrap { max-height: 320px; overflow-y: auto; }
.dashboard-team-table-wrap thead th { position: sticky; top: 0; background: var(--tf-surface); z-index: 1; }
/* AllIssues.aspx's issues grid -- same idea as the team table above (capped height + vertical
   scroll + sticky header), paired with the GridView's own AllowPaging so a large result set is
   both paged (20/page) and, within a page, kept to a manageable height rather than growing the
   whole card. The GridView's built-in numeric pager row renders as an ordinary <tr> with plain
   <a> links (no CSS hooks of its own beyond the PagerStyle-CssClass on its wrapping cell), so
   it's styled here to look like a normal pagination control instead of a row of bare blue links.
   Sticky header uses HeaderStyle-CssClass rather than a "thead th" selector -- GridView doesn't
   reliably wrap its header row in an actual <thead> the way the Dashboard's hand-written table
   above does, so a thead-based selector silently matched nothing; HeaderStyle-CssClass instead
   puts this class directly on each header <th>/<td>, which always works regardless of table
   structure. */
.issues-table-wrap { max-height: 640px; overflow-y: auto; }
.issues-table-sticky-head { position: sticky; top: 0; z-index: 2; background: var(--tf-surface); }
.issues-pager { padding: 0; text-align: center; }
.issues-pager table {
  margin: .7rem auto 0; padding-top: .7rem; border-top: 1px solid var(--tf-border);
  border-collapse: separate; border-spacing: .3rem 0;
}
.issues-pager table td { padding: 0; color: var(--tf-text-muted); font-size: .82rem; }
.issues-pager a, .issues-pager span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.15rem; height: 2.15rem;
  padding: 0 .55rem; border-radius: .5rem; font-size: .82rem; font-weight: 500; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.issues-pager a { color: var(--tf-text-muted); border: 1px solid transparent; }
.issues-pager a:hover { background: var(--tf-bg); color: var(--tf-text); border-color: var(--tf-border); text-decoration: none; }
.issues-pager span { background: var(--tf-primary); color: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(var(--tf-primary-rgb),.35); }
/* The pager is just another <tr> in the same table as the data rows, so Bootstrap's
   .table-hover would otherwise highlight it like a data row on hover -- switch that off. */
.issues-table-wrap .table-hover > tbody > tr.issues-pager:hover > *,
.issues-table-wrap .table-hover tr.issues-pager:hover > * { background-color: transparent; }

/* Backlog.aspx's backlog list -- same capped-height/scroll idea as the two table wraps above
   (no sticky header here since the row list has no header row to pin), plus manual paging
   (Backlog.aspx.cs's PagerItem/BuildPagerItems) since asp:Repeater has no built-in pager like
   GridView does. Reuses .issues-pager's a/span sizing above -- .pager-row is just the
   non-<table> equivalent of that rule's <table> layout, and .pager-disabled/.pager-ellipsis
   override the plain-span ("current page") look for the two states that aren't the current
   page: a grayed-out Prev/Next at either end of the list, and the "..." gap-filler. */
.backlog-list-wrap { max-height: 600px; overflow-y: auto; padding-right: .25rem; }
.issues-pager .pager-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .3rem; padding-top: .7rem; border-top: 1px solid var(--tf-border); }
.issues-pager span.pager-disabled { background: transparent; color: var(--tf-text-muted); opacity: .4; box-shadow: none; cursor: default; }
.issues-pager span.pager-ellipsis { background: transparent; color: var(--tf-text-muted); box-shadow: none; cursor: default; font-weight: 400; }
@media (max-width: 767.98px) { .dashboard-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 991.98px) { .dashboard-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* SprintReport.aspx's Sprint summary card -- reuses the same .stat-tile component as the
   Dashboard tiles above, just auto-fit to whatever width the card has (it sits in a col-lg-7,
   not the full page) instead of Dashboard's fixed breakpoints, and non-clickable since these are
   pure read-outs, not links. */
.sprint-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.stat-tile.stat-tile-static { cursor: default; }
.stat-tile.stat-tile-static:hover { transform: none; box-shadow: none; }

.stat-tile.tile-blue { border-top-color: var(--tile-blue-icon); }
.stat-tile.tile-blue .stat-tile-icon { background: var(--tile-blue-bg); color: var(--tile-blue-icon); }
.stat-tile.tile-green { border-top-color: var(--tile-green-icon); }
.stat-tile.tile-green .stat-tile-icon { background: var(--tile-green-bg); color: var(--tile-green-icon); }
.stat-tile.tile-yellow { border-top-color: var(--tile-yellow-icon); }
.stat-tile.tile-yellow .stat-tile-icon { background: var(--tile-yellow-bg); color: var(--tile-yellow-icon); }
.stat-tile.tile-violet { border-top-color: var(--tile-violet-icon); }
.stat-tile.tile-violet .stat-tile-icon { background: var(--tile-violet-bg); color: var(--tile-violet-icon); }
.stat-tile.tile-orange { border-top-color: var(--tile-orange-icon); }
.stat-tile.tile-orange .stat-tile-icon { background: var(--tile-orange-bg); color: var(--tile-orange-icon); }
.stat-tile.tile-red { border-top-color: var(--tile-red-icon); }
.stat-tile.tile-red .stat-tile-icon { background: var(--tile-red-bg); color: var(--tile-red-icon); }
.stat-tile.tile-amber { border-top-color: var(--tile-amber-icon); }
.stat-tile.tile-amber .stat-tile-icon { background: var(--tile-amber-bg); color: var(--tile-amber-icon); }
.stat-tile.tile-sky { border-top-color: var(--tile-sky-icon); }
.stat-tile.tile-sky .stat-tile-icon { background: var(--tile-sky-bg); color: var(--tile-sky-icon); }
.stat-tile.tile-emerald { border-top-color: var(--tile-emerald-icon); }
.stat-tile.tile-emerald .stat-tile-icon { background: var(--tile-emerald-bg); color: var(--tile-emerald-icon); }

/* Allocations.aspx's 5 summary tiles -- deliberately its own component rather than reusing
   .dashboard-tile-grid/.stat-tile above: that grid caps at max-width:900px and uses compact
   padding/icon sizing built for Dashboard.aspx's narrower tile count, which read as small and
   cramped stretched full-width across this page's wider filter card. This one has no width cap
   (fills whatever container it's in) and bigger icon/number/padding to match. */
.resource-tile-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.resource-tile { display: flex; align-items: center; gap: .9rem; background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 1.1rem 1.25rem; }
.resource-tile-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.resource-tile-label { font-size: .82rem; font-weight: 600; color: var(--tf-text); }
.resource-tile-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.resource-tile-caption { font-size: .75rem; color: var(--tf-text-muted); }
@media (max-width: 1199.98px) { .resource-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .resource-tile-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

/* Allocations.aspx's Employee Availability Summary pager -- a custom PagerTemplate (not the
   default NumericFirstLast pager) so the "Showing X to Y of Z entries" text and the compact
   page-number links can sit in one row, entries text on the left, buttons on the right. Built
   with explicit classes/padding throughout (not reusing .issues-pager's <table>-based layout)
   because Bootstrap 5's own `.table > :not(caption) > * > *` cell-padding rule has higher CSS
   specificity than a single custom class and was silently winning over an earlier attempt at
   trimming this pager's padding down -- this version avoids table cells entirely for the pager
   row so there's nothing for that rule to apply to. */
.allocation-pager-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; margin-top: .25rem; border-top: 1px solid var(--tf-border); }
.allocation-pager-btn, .allocation-pager-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; border-radius: .35rem; font-size: .72rem; font-weight: 500; text-decoration: none; }
.allocation-pager-btn { color: var(--tf-text-muted); border: 1px solid transparent; }
.allocation-pager-btn:hover { background: var(--tf-bg); color: var(--tf-text); border-color: var(--tf-border); text-decoration: none; }
.allocation-pager-btn.active { background: var(--tf-primary); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(var(--tf-primary-rgb),.3); }
.allocation-pager-btn.disabled { opacity: .35; }
.allocation-pager-ellipsis { color: var(--tf-text-muted); }

.admin-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 991.98px) { .admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .admin-overview-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

.admin-stat-tile { background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 1.25rem; display: flex; align-items: center; gap: .85rem; }
.admin-stat-tile .stat-tile-icon { width: 40px; height: 40px; border-radius: .5rem; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; background: var(--tf-primary-soft); color: var(--tf-primary); flex-shrink: 0; }
.admin-stat-tile .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.admin-stat-tile .stat-label { font-size: .85rem; color: var(--tf-text-muted); }

.nav-tile { display: flex; align-items: center; gap: .85rem; background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 1.25rem; text-decoration: none; color: var(--tf-text); transition: box-shadow .15s ease, border-color .15s ease; }
.nav-tile:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); border-color: rgba(var(--tf-primary-rgb),.5); color: var(--tf-text); }
.nav-tile .nav-tile-icon { width: 40px; height: 40px; border-radius: .5rem; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; background: var(--tf-primary-soft); color: var(--tf-primary); flex-shrink: 0; }
.nav-tile .nav-tile-body { min-width: 0; }
.nav-tile .nav-tile-title { font-weight: 600; margin-bottom: .1rem; }
.nav-tile:hover .nav-tile-title { color: var(--tf-primary); }
.nav-tile .nav-tile-desc { font-size: .82rem; color: var(--tf-text-muted); }

.link-card { display: block; background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 1rem 1.15rem; text-decoration: none; color: var(--tf-text); margin-bottom: .75rem; }
.link-card:hover { border-color: var(--tf-primary); color: var(--tf-text); }
.link-card .lc-title { font-weight: 600; }
.link-card .lc-meta { font-size: .8rem; color: var(--tf-text-muted); }
.link-card.link-card-overdue { border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.05); }
.link-card.link-card-overdue-outline { border-color: rgba(220,38,38,.4); }

.dashboard-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .15rem; }

.btn-ghost-back { display: inline-flex; align-items: center; gap: .25rem; background: none; border: none; padding: .25rem .5rem; margin-left: -.5rem; font-size: .75rem; font-weight: 500; color: var(--tf-text); text-decoration: none; border-radius: .375rem; }
.btn-ghost-back:hover { background: rgba(0,0,0,.05); color: var(--tf-text); text-decoration: none; }
.dashboard-subtitle { color: var(--tf-text-muted); }
.dashboard-subtitle-caps { text-transform: capitalize; }

.badge-outline { display: inline-flex; align-items: center; padding: .2rem .55rem; border: 1px solid var(--tf-border); border-radius: 999px; font-size: .72rem; color: var(--tf-text); }
.badge-neutral { padding: .25rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 600; background: #e5e7eb; color: #374151; }

.priority-pill-list { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.priority-pill-list input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.priority-pill-list label { display: inline-block; padding: .3rem .75rem; border: 1px solid var(--tf-border); border-radius: 999px; font-size: .78rem; cursor: pointer; }
.priority-pill-list input[type="checkbox"]:checked + label { background: var(--tf-primary); color: #fff; border-color: var(--tf-primary); }

.clear-filter-link { font-size: .72rem; color: var(--tf-text-muted); background: none; border: none; padding: 0; text-decoration: none; }
.clear-filter-link:hover { color: var(--tf-text); text-decoration: none; }

/* ---------- Badges ---------- */

.badge-status { display: inline-block; padding: .3rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.badge-status-yettostart { background: #e5e7eb; color: #374151; }
.badge-status-inprogress { background: #dbeafe; color: #1d4ed8; }
.badge-status-onhold { background: #fef3c7; color: #92400e; }
.badge-status-submittedforreview { background: #ede9fe; color: #6d28d9; }
.badge-status-closed { background: #d1fae5; color: #065f46; }
/* GitProject issue statuses (Open/InProgress/InReview/Closed) -- InProgress/Closed reuse the
   TaskMangementModule-style classes above; these two are new. */
.badge-status-open { background: #e5e7eb; color: #374151; }
.status-color-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); vertical-align: middle; }
.badge-status-inreview { background: #ede9fe; color: #6d28d9; }

.badge-priority { padding: .3rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.badge-priority-high { background: #fee2e2; color: #b91c1c; }
.badge-priority-medium { background: #fef3c7; color: #92400e; }
.badge-priority-low { background: #e0e7ff; color: #3730a3; }

.badge-flag { padding: .25rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 600; background: #fef2f2; color: #b91c1c; }
.badge-recurring { padding: .25rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 600; background: #ecfeff; color: #0e7490; }
.badge-self { padding: .25rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 600; background: #f5f3ff; color: #6d28d9; }

/* ---------- Rating stars ---------- */

.rating-stars .star { font-size: 1.3rem; color: #d1d5db; cursor: pointer; }
.rating-stars .star.filled { color: #f59e0b; }
.rating-stars.readonly .star { cursor: default; }

/* ---------- Misc ---------- */

.tf-table { font-size: .85rem; }
.tf-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; color: var(--tf-text-muted); border-bottom-width: 1px; }
.tf-table td { vertical-align: middle; }

.activity-item { border-left: 2px solid var(--tf-border); padding: .1rem 0 .85rem 1rem; margin-left: .25rem; position: relative; }
.activity-item::before { content: ""; position: absolute; left: -5px; top: .35rem; width: 8px; height: 8px; border-radius: 50%; background: var(--tf-primary); }
.activity-item .activity-action { font-weight: 600; font-size: .87rem; }
.activity-item .activity-meta { font-size: .76rem; color: var(--tf-text-muted); }

.hierarchy-tree ul { list-style: none; padding-left: 1.5rem; }
.hierarchy-tree > ul { padding-left: 0; }
.hierarchy-node { padding: .4rem .1rem; }

.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #EEECFD, #F7F8FA); padding: 1.5rem; }
.auth-card { background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); box-shadow: 0 10px 30px rgba(0,0,0,.06); padding: 2rem; max-width: 440px; width: 100%; }
.auth-logo { width: 52px; height: 52px; margin-bottom: 1rem; }
.auth-logo img { width: 100%; height: 100%; object-fit: contain; }
.demo-account-btn { text-align: left; }

.btn-primary { background: var(--tf-primary); border-color: var(--tf-primary); }
.btn-primary:hover { background: var(--tf-primary-dark); border-color: var(--tf-primary-dark); }

.btn-icon-ghost { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; background: transparent; border-radius: .4rem; color: var(--tf-text-muted); }
.btn-icon-ghost:hover { background: var(--tf-bg); color: var(--tf-text); }
.btn-icon-ghost.text-danger:hover { background: #fee2e2; color: #b91c1c; }

.modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-dialog-custom { background: var(--tf-surface); border-radius: var(--tf-radius); padding: 1.5rem; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal-dialog-fullpage { max-width: 96vw; width: 96vw; max-height: 94vh; }

.wizard-step-card { display: block; height: 100%; border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 1.5rem; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.wizard-step-card:hover { border-color: var(--tf-primary); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.wizard-step-card.selected { border-color: var(--tf-primary); background: var(--tf-primary-soft); }
.wizard-step-icon { width: 40px; height: 40px; border-radius: .5rem; background: var(--tf-primary-soft); color: var(--tf-primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: .75rem; }

.wizard-bordered-box { border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 1rem; }

.assignee-picker { display: flex; flex-direction: column; gap: .6rem; }
.assignee-search-box { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--tf-border); border-radius: .5rem; padding: .5rem .75rem; color: var(--tf-text-muted); }
.assignee-search-box input { flex: 1; border: none; outline: none; font-size: .875rem; color: var(--tf-text); background: transparent; }
.assignee-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.assignee-chip-tag { display: inline-flex; align-items: center; background: var(--tf-sidebar-active-bg); color: var(--tf-sidebar-active-text); border-radius: 999px; padding: .3rem .5rem .3rem .75rem; font-size: .8rem; font-weight: 500; }
.assignee-chip-remove { border: none; background: none; color: inherit; opacity: .65; font-size: 1rem; line-height: 1; padding: 0 .3rem; cursor: pointer; }
.assignee-chip-remove:hover { opacity: 1; }
.assignee-avail-badge { cursor: default; }
.assignee-member-row { padding: .5rem 0; }
.assignee-member-row .assignee-member-fields { flex-wrap: wrap; }
.assignee-member-row .assignee-member-fields select,
.assignee-member-row .assignee-member-fields input { max-width: 108px; font-size: .78rem; }
.assignee-member-row .assignee-member-fields input[type="number"] { max-width: 64px; }
.assignee-availability-popover { display: none; position: absolute; z-index: 2000; min-width: 220px; max-width: 340px; background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: .5rem; padding: .6rem .75rem; box-shadow: 0 12px 30px rgba(0,0,0,.18); font-size: .8rem; }
.assignee-availability-popover .avail-pop-title { font-weight: 600; color: var(--tf-text); margin-bottom: .35rem; }
.assignee-availability-popover .avail-pop-table { width: 100%; border-collapse: collapse; }
.assignee-availability-popover .avail-pop-table td { padding: .2rem 0; color: var(--tf-text-muted); vertical-align: top; }
.assignee-availability-popover .avail-pop-table td:last-child { text-align: right; white-space: nowrap; padding-left: .5rem; color: var(--tf-text); font-weight: 500; }
.assignee-availability-popover .avail-pop-empty { color: var(--tf-text-muted); }
.assignee-list { border: 1px solid var(--tf-border); border-radius: .5rem; max-height: 260px; overflow-y: auto; }
.assignee-list.assignee-list-empty { border-style: dashed; }
.assignee-list.assignee-list-empty::before { content: "Start typing to search people..."; display: block; padding: .75rem; color: var(--tf-text-muted); font-size: .8rem; }
.assignee-list.assignee-list-no-results::before { content: "No matching people (or everyone matching is already picked)."; display: block; padding: .75rem; color: var(--tf-text-muted); font-size: .8rem; }
.assignee-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; cursor: pointer; border-bottom: 1px solid var(--tf-border); }
.assignee-row:last-child { border-bottom: none; }
.assignee-row:hover { background: var(--tf-bg); }
.assignee-row.selected { background: var(--tf-primary-soft); }
.assignee-row-name { font-weight: 600; font-size: .875rem; }
.assignee-row-subtitle { font-size: .78rem; color: var(--tf-text-muted); text-transform: capitalize; }
.assignee-row .bi-check-lg { color: var(--tf-primary); font-size: 1.1rem; }

.assignment-tabs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; background: var(--tf-bg); border-radius: .6rem; padding: .25rem; }
.assignment-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: .45rem; font-size: .85rem; font-weight: 500; color: var(--tf-text-muted); text-decoration: none; white-space: nowrap; }
.assignment-tab:hover { color: var(--tf-text); }
.assignment-tab.active { background: var(--tf-surface); color: var(--tf-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.combo-box { position: relative; }
.combo-box .form-control { cursor: text; }
/* z-index matches .row-action-menu/.gf-menu below (1100) rather than a lower one-off value --
   this is the shared floating popup for every searchable dropdown site-wide, so it needs to
   reliably paint above ordinary page content on any page, not just the ones that happened not
   to expose a stacking issue (e.g. MonthlyKpi.aspx's header card, which sits directly above
   another card and would otherwise interleave with the open dropdown). */
.combo-menu { display: none; position: absolute; z-index: 1100; top: calc(100% + 4px); left: 0; right: 0; max-height: 220px; overflow-y: auto; background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: .5rem; box-shadow: 0 4px 12px rgba(0,0,0,.1); padding: .25rem; }
.combo-menu.open { display: block; }
.combo-option { padding: .4rem .6rem; border-radius: .35rem; font-size: .85rem; cursor: pointer; }
.combo-option:hover { background: var(--tf-bg); }
.combo-option.selected { background: var(--tf-primary-soft); color: var(--tf-sidebar-active-text); font-weight: 600; }
.combo-option.active { background: var(--tf-primary); color: #fff; }
.combo-empty { padding: .4rem .6rem; font-size: .8rem; color: var(--tf-text-muted); }

/* Scripts/combo-select.js's enhancement of a plain <select> into the searchable .combo-box
   above -- the native select stays in the DOM (still what actually drives the page) but is
   hidden once the fake text input is inserted in front of it. */
.combo-box .gp-combo-native { display: none; }
.combo-box .gp-combo-input { cursor: pointer; background: var(--tf-surface); }

.reminder-committed-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--tf-border); border-radius: .5rem; padding: .4rem .75rem; font-size: .875rem; margin-bottom: .4rem; }
.reminder-remove-btn { border: none; background: none; color: var(--tf-text-muted); padding: 0; line-height: 1; }
.reminder-remove-btn:hover { color: #b91c1c; }

.attachment-dropzone {
  display: flex; align-items: center; gap: .5rem; border: none; border-radius: .5rem; padding: 1rem .75rem;
  cursor: pointer; color: var(--tf-text-muted); font-size: .875rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23e5e7eb' stroke-width='2' stroke-dasharray='6%2c 6'/%3e%3c/svg%3e");
}
.attachment-dropzone:hover { background-color: var(--tf-bg); }
.attachment-file-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.attachment-file-item { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--tf-border); border-radius: .5rem; padding: .4rem .75rem; font-size: .875rem; margin-bottom: .4rem; }
.attachment-file-item button { border: none; background: none; color: var(--tf-text-muted); padding: 0 0 0 .5rem; line-height: 1; }
.attachment-file-item button:hover { color: #b91c1c; }

/* Attachment pin: a small paperclip shown on Board.aspx cards / AllIssues.aspx rows when an
   issue has at least one attachment -- click toggles the popover doc list. See
   Scripts/attach-pin.js for the click-delegation logic. */
.attach-pin-wrap { position: relative; display: inline-flex; }
.attach-pin { cursor: pointer; color: var(--tf-text-muted); }
.attach-pin:hover { color: var(--tf-text); }
.attach-pin-popover {
  display: none; position: absolute; top: 100%; right: 0; z-index: 20; margin-top: .25rem;
  background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .5rem; min-width: 200px; max-width: 280px;
}
.attach-pin-popover.show { display: block; }
.attach-pin-popover a {
  display: block; padding: .25rem 0; font-size: .8rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}

/* Board card link icon: click opens the linked-issues modal (Scripts/hierarchy.js). */
.link-pin { cursor: pointer; color: var(--tf-text-muted); }
.link-pin:hover { color: var(--tf-text); }

/* Backlog.aspx / Planning.aspx row "..." action menu (Jira-style two-level flyout: Assignee /
   Priority / Move work item / Parent, each opening its own list of choices) -- see
   Scripts/row-actions.js. Shared by both pages' rows (.backlog-row, .plan-issue-row). */
.backlog-row, .plan-issue-row { position: relative; }
.row-action-kebab { opacity: 0; border: none; background: transparent; width: 28px; height: 28px; border-radius: .4rem; color: var(--tf-text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.backlog-row:hover .row-action-kebab, .plan-issue-row:hover .row-action-kebab, .backlog-table-row:hover .row-action-kebab, .row-action-kebab:focus { opacity: 1; }
.row-action-kebab:hover { background: var(--tf-bg); color: var(--tf-text); }
.row-action-menu, .row-action-submenu {
  display: none; position: absolute; z-index: 1100; min-width: 190px; max-height: 280px; overflow-y: auto;
  background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: .3rem;
}
.row-action-menu.show, .row-action-submenu.show { display: block; }
.row-action-item, .row-action-option {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .6rem;
  border-radius: .35rem; font-size: .83rem; color: var(--tf-text); cursor: pointer; white-space: nowrap;
}
.row-action-item:hover, .row-action-option:hover { background: var(--tf-bg); }
.row-action-item i { color: var(--tf-text-muted); font-size: .8rem; }
.row-action-empty { padding: .45rem .6rem; font-size: .78rem; color: var(--tf-text-muted); white-space: normal; max-width: 220px; }

/* Board.aspx GitLab-style token filter bar (Assignee / Milestone, "is"/"is not one of", None,
   Any, searchable values) -- see Scripts/board-filter.js. */
.gf-wrap { position: relative; }
.gf-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; border: 1px solid var(--tf-border); border-radius: .5rem; padding: .4rem .6rem; background: var(--tf-surface); cursor: text; min-height: 2.375rem; }
.gf-bar-icon { color: var(--tf-text-muted); font-size: .85rem; flex-shrink: 0; }
.gf-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--tf-primary-soft); color: var(--tf-sidebar-active-text); border-radius: .35rem; padding: .2rem .4rem; font-size: .78rem; font-weight: 500; white-space: nowrap; }
.gf-chip-remove { border: none; background: none; color: inherit; opacity: .6; padding: 0; line-height: 1; display: inline-flex; }
.gf-chip-remove:hover { opacity: 1; }
.gf-pending {
    display: inline-flex;
    align-items: center;
    background: #e7e6eb;
    color: #878b94;
    border: 1px dashed #a4a6a8;
    border-radius: .35rem;
    padding: .2rem .4rem;
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
}
.gf-input { border: none; outline: none; background: transparent; flex: 1; min-width: 140px; font-size: .85rem; color: var(--tf-text); }
.gf-input::placeholder { color: var(--tf-text-muted); }
.gf-menu { display: none; position: absolute; z-index: 1100; top: calc(100% + 4px); left: 0; min-width: 240px; max-width: 320px; max-height: 300px; overflow-y: auto; background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: .3rem; }
.gf-menu.show { display: block; }
.gf-option { padding: .45rem .6rem; border-radius: .35rem; font-size: .83rem; color: var(--tf-text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-option:hover, .gf-option.active { background: #5843e4; color:white;}
.gf-op-symbol { display: inline-block; width: 24px; font-weight: 600; color: var(--tf-text-muted); }
    .gf-op-symbol:hover{color:white; }
    .gf-empty {
        padding: .45rem .6rem;
        font-size: .78rem;
        color: var(--tf-text-muted);
        white-space: normal;
    }

.toggle-btn-list { display: flex; gap: .5rem; flex-wrap: wrap; }
.toggle-btn-list input[type="radio"],
.toggle-btn-list input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-btn-list label { display: inline-block; padding: .35rem .9rem; border: 1px solid var(--tf-border); border-radius: .4rem; font-size: .8rem; font-weight: 500; cursor: pointer; background: var(--tf-surface); color: var(--tf-text); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.toggle-btn-list label:hover { border-color: var(--tf-primary); }
.toggle-btn-list input[type="radio"]:checked + label,
.toggle-btn-list input[type="checkbox"]:checked + label { background: var(--tf-primary); color: #fff; border-color: var(--tf-primary); }

.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.tf-toast { pointer-events: auto; min-width: 240px; max-width: 360px; background: var(--tf-surface); border: 1px solid var(--tf-border); border-left: 4px solid #16a34a; border-radius: .5rem; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: .75rem 1rem; font-size: .85rem; font-weight: 500; color: var(--tf-text); display: flex; align-items: center; gap: .55rem; animation: tf-toast-in .2s ease; }
.tf-toast.tf-toast-error { border-left-color: #dc2626; }
.tf-toast.tf-toast-warning { border-left-color: #d97706; }
.tf-toast i { font-size: 1rem; flex-shrink: 0; }
.tf-toast.tf-toast-success i { color: #16a34a; }
.tf-toast.tf-toast-error i { color: #dc2626; }
.tf-toast.tf-toast-warning i { color: #d97706; }
.tf-toast.tf-toast-fade-out { animation: tf-toast-out .2s ease forwards; }
@keyframes tf-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tf-toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } }

.text-overdue { color: #b91c1c; font-weight: 600; }
.due-soon, .board-card-meta.due-soon { color: #b45309; font-weight: 600; }
.due-today, .board-card-meta.due-today { color: #dc3545; font-weight: 600; }

/* Matches the reference app's outline Button (bg-background/border-input/shadow-sm) exactly --
   same oklch tokens as its src/styles.css -- on TaskDetail's status-action row (e.g. "Put On
   Hold" / "Request Extension") instead of Bootstrap's default transparent .btn-outline-secondary. */
.btn-status-outline {
  background: oklch(0.99 0.005 240);
  border: 1px solid oklch(0.92 0.01 240);
  color: var(--tf-text);
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-status-outline:hover {
  background: oklch(0.94 0.03 200);
  border-color: oklch(0.92 0.01 240);
  color: oklch(0.25 0.06 220);
}

/* Issue Board (Board.aspx) -- Kanban columns/cards, drag-and-drop driven by Scripts/board-dnd.js.
   .board-column is a flex column so its header (flex-shrink:0) stays pinned while only
   .board-column-cards scrolls once a column has more cards than fit -- previously the whole
   column just grew taller with no cap, pushing the rest of the page down as cards piled up.
   align-items: stretch (the default, stated explicitly here) makes every column match the
   tallest one in the row up to that cap, instead of each column only growing to fit its own
   card count -- a column with one card now fills the same height as a full one. */
.board-columns { display: flex; gap: 1rem; align-items: stretch; overflow-x: auto; padding-bottom: .5rem; }
.board-column { flex: 1 1 240px; min-width: min(240px, 100%); max-width: 280px; background: var(--tf-surface-muted, #f8fafc); border: 1px solid var(--tf-border); border-radius: .5rem; padding: .5rem; display: flex; flex-direction: column; max-height: calc(100vh - 280px); min-height: 200px; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease; }
.board-column.drag-over { border-color: var(--tf-primary); background: rgba(var(--tf-primary-rgb), .08); }
/* Column-header reordering (drag the whole column to reposition it) -- distinct classes from
   .drag-over above so a card-drop highlight and a column-reorder highlight never look identical
   or fight over the same class. See Scripts/board-dnd.js's onColumnDrop. draggable="true" lives
   on .board-column itself (the same spot .board-card carries its own), not just the header. */
.board-column.column-dragging { opacity: .5; }
.board-column.column-drag-over { border-color: var(--tf-primary); box-shadow: 0 0 0 2px rgba(var(--tf-primary-rgb),.25); }
.board-column[draggable="true"] { cursor: grab; }
.board-column[draggable="true"]:active { cursor: grabbing; }
.board-column-header { display: flex; align-items: center; gap: .4rem; padding: .25rem .35rem .6rem; flex-shrink: 0; }
.board-column-cards { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: .15rem; }
.board-column-name { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--tf-sidebar-text); }
.board-column-header-right { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.board-column-count { font-size: .75rem; color: var(--tf-text-muted); }
.board-column-reorder { display: flex; align-items: center; }
.board-column-reorder a { color: var(--tf-text-muted); padding: 0 .1rem; font-size: .85rem; text-decoration: none; }
.board-column-reorder a:hover { color: var(--tf-primary); }
.board-card { background: var(--tf-surface); border: 1px solid var(--tf-border); border-left: 3px solid transparent; border-radius: .4rem; padding: .6rem .7rem; margin-bottom: .5rem; font-size: .85rem; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.board-card:active { cursor: grabbing; }
.board-card.dragging { opacity: .45; }
.board-card-priority-high { border-left-color: #dc2626; }
.board-card-priority-medium { border-left-color: #d97706; }
.board-card-priority-low { border-left-color: #16a34a; }
.board-card-title { font-weight: 600; color: var(--tf-text); text-decoration: none; display: block; margin-bottom: .45rem; }
.board-card-title:hover { text-decoration: underline; }
.board-card-meta { font-size: .75rem; color: var(--tf-text-muted); margin-top: .35rem; }
.board-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.board-card-info { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; font-size: .72rem; color: var(--tf-text-muted); }
.board-card-info-item { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
/* Milestone/sprint names (unlike the short #id/project/hours items) can be long -- e.g.
   "[DEMO-JUL] ERP Sprint Jul-2026" -- and the shared nowrap above forces that whole string onto
   one unbreakable line, which is wide enough to push the card past the column's width even
   though .board-card-info itself already wraps between items. Let just this one item wrap. */
.board-card-info-item-wrap { white-space: normal; word-break: break-word; }
.board-card-info-item i { font-size: .85rem; }
.assignee-stack { display: inline-flex; align-items: center; }
.assignee-stack .board-card-avatar { border: 2px solid var(--tf-surface, #fff); box-sizing: content-box; }
.assignee-stack .board-card-avatar + .board-card-avatar { margin-left: -8px; }
.assignee-stack-more { margin-left: 4px; font-size: .7rem; letter-spacing: -1px; color: var(--tf-text, #334155); font-weight: 700; cursor: default; }
.board-card-avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .68rem; font-weight: 600; text-transform: uppercase; }

/* IssueDetail.aspx activity log -- one compact line per entry instead of a tall two-column
   flex row, so a busy issue's history doesn't dominate the page. */
.activity-row { display: flex; gap: .5rem; align-items: baseline; font-size: .8rem; padding: .2rem 0; border-bottom: 1px solid var(--tf-border); }
.activity-row:last-child { border-bottom: none; }
.activity-row .text-muted { flex-shrink: 0; min-width: 120px; font-size: .75rem; }

/* Collapsible section header (Activity log) -- chevron rotates via Bootstrap's
   [aria-expanded] attribute toggling, no extra JS needed. */
.collapse-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
.collapse-toggle .bi-chevron-down { transition: transform .15s ease; }
.collapse-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* GitHub-style comment editor (IssueDetail.aspx) -- Write/Preview tabs + a markdown-insert
   toolbar over a plain textarea. See Scripts/md-editor.js. */
.md-editor { border: 1px solid var(--tf-border); border-radius: .5rem; overflow: hidden; }
.md-editor-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .4rem .5rem; background: var(--tf-surface-muted, #f8fafc); border-bottom: 1px solid var(--tf-border); }
.md-editor-tabs { display: flex; gap: .25rem; }
.md-tab { border: none; background: none; padding: .3rem .7rem; font-size: .8rem; font-weight: 500; color: var(--tf-text-muted); border-radius: .35rem; cursor: pointer; }
.md-tab:hover { background: rgba(0,0,0,.04); }
.md-tab.active { background: var(--tf-surface); color: var(--tf-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.md-editor-actions { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }
.md-btn { border: none; background: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: .35rem; color: var(--tf-text-muted); cursor: pointer; font-size: .9rem; }
.md-btn:hover { background: rgba(0,0,0,.06); color: var(--tf-text); }
.md-sep { width: 1px; height: 18px; background: var(--tf-border); margin: 0 .3rem; }
.md-editor-write, .md-editor-preview { background: var(--tf-surface); }
.md-textarea { border: none !important; border-radius: 0 !important; box-shadow: none !important; resize: vertical; font-family: inherit; }
.md-textarea:focus { box-shadow: none !important; }
.md-editor-preview { min-height: 100px; padding: .65rem .75rem; font-size: .9rem; }

.sidebar-footer-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.app-sidebar.collapsed .sidebar-footer { flex-direction: column; }
.app-sidebar.collapsed .sidebar-footer-actions { flex-direction: column; }
a.sidebar-user:hover .sidebar-user-name { text-decoration: underline; }
.sidebar-footer .sidebar-user { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; }
.sidebar-footer .sidebar-user-name, .sidebar-footer .sidebar-user-role { overflow: hidden; text-overflow: ellipsis; }

/* Non-admins see assignees as a read-only summary: no dropdown, no chevron. */
.combo-box.assignee-locked #assigneeDropdownPanel{display:none!important}
.combo-box.assignee-locked #assigneeDisplayBox{cursor:default!important;background-image:none;background-color:var(--bs-secondary-bg,#e9ecef)}

/* Admin-only click-to-change assignee avatar on All Issues rows and Board cards. */
.assignee-pick{cursor:pointer}
.assignee-pick:hover .board-card-avatar{box-shadow:0 0 0 2px var(--bs-primary,#4f46e5)}

/* Search box at the top of the assignee flyout (stays visible while the list scrolls). */
.row-action-search{position:sticky;top:0;display:block;width:100%;margin:0 0 .3rem;padding:.35rem .5rem;font-size:.83rem;border:1px solid var(--tf-border);border-radius:.35rem;background:var(--tf-surface);color:var(--tf-text)}
.row-action-search:focus{outline:none;border-color:var(--bs-primary,#4f46e5)}

/* Issue hierarchy popup tree. */
.hierarchy-tree{list-style:none;margin:0;padding-left:1.1rem;border-left:1px dashed var(--tf-border)}
.modal-body > .hierarchy-tree{padding-left:0;border-left:0}
.hierarchy-tree li{margin:.3rem 0}
.hierarchy-node{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.88rem}
.hierarchy-node.current{background:var(--tf-primary-soft,#eef2ff);border-radius:.4rem;padding:.2rem .4rem}

/* Small hierarchy icon button on issue rows / cards. */
.hier-btn{border:0;background:transparent;color:var(--tf-text-muted);padding:.1rem .3rem;border-radius:.3rem;line-height:1;cursor:pointer;flex-shrink:0}
.hier-btn:hover{background:var(--tf-bg);color:var(--bs-primary,#4f46e5)}

/* Drag-and-drop target highlight on the markdown editor (files dropped onto the Description). */
.md-editor.md-editor-dragging{outline:2px dashed var(--bs-primary,#4f46e5);outline-offset:-2px;background:var(--tf-primary-soft,#eef2ff)}
.md-drop-hint{padding:.25rem .6rem .4rem}

/* Inline images/videos in an issue description and in the editor preview. */
.issue-description{white-space:pre-wrap}
.md-media{display:block;max-width:100%;max-height:420px;margin:.4rem 0;border-radius:.4rem;border:1px solid var(--tf-border)}
.md-editor-preview .md-media{max-height:320px}

/* Time in each status (issue page). */
.status-time-bar{height:8px;background:var(--tf-bg,#eef0f4);border-radius:4px;overflow:hidden;min-width:80px}
.status-time-bar>span{display:block;height:100%;border-radius:4px}

/* Status chips: the earlier statuses of an issue (colour dot, name, time) as small wrapping pills. */
.status-chips{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem}
.status-chips-label{font-size:.68rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--tf-text-muted)}
.status-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.05rem .45rem;border:1px solid var(--tf-border);border-radius:999px;background:var(--tf-surface);color:var(--tf-text);font-size:.72rem;line-height:1.5;white-space:nowrap}
.status-chip i{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}
.status-chip b{font-weight:600;color:var(--tf-text-muted)}

/* Issue Detail header: the status badge is a dropdown (see IssueDetail.aspx ddlHeaderStatus). */
.status-pill { padding: 0; }
.status-pill .status-select option { color: #212529; background: #fff; font-weight: 400; }
.status-pill .status-select:disabled { cursor: default; opacity: 1; }
.status-pill .status-select { -webkit-appearance: none; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .55rem center; color: inherit; border: 0; font: inherit; font-weight: 600; padding: .3rem 1.6rem .3rem .75rem; cursor: pointer; border-radius: 999px; outline: none; }

/* "Start with" number next to the priority badge (Board cards, Backlog rows) -- see IssueOrderService.BadgeHtml. */
.order-badge { display: inline-block; min-width: 1.7rem; text-align: center; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .15rem .5rem; background: #eef2ff; color: #4338ca; cursor: help; }

/* Hours + minutes entry (Scripts/hours-input.js): two compact whole-number boxes in place of one decimal box. */
.hm-input { flex-wrap: nowrap; min-width: 7.5rem; }
.hm-input .form-control { min-width: 0; padding-left: .5rem; padding-right: .25rem; }
.hm-input .input-group-text { padding-left: .35rem; padding-right: .35rem; font-size: .8rem; color: var(--tf-text-muted); }
.hm-input input[type=number] { -moz-appearance: textfield; }

/* "Already on this project" on the project form: one collapsible block per role, people listed under it. */
.role-group { border: 1px solid var(--tf-border); border-radius: .6rem; margin-bottom: .5rem; background: var(--tf-surface); overflow: hidden; }
.role-group-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem; cursor: pointer; list-style: none; user-select: none; }
.role-group-head::-webkit-details-marker { display: none; }
.role-group-head:hover { background: var(--tf-surface-muted); }
.role-chip { width: 1.65rem; height: 1.65rem; border-radius: .45rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem; flex: none; }
.role-name { font-weight: 600; font-size: .85rem; flex: 1; min-width: 0; color: var(--tf-text); }
.role-count { font-size: .72rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; background: var(--tf-primary-soft); color: var(--tf-primary); white-space: nowrap; }
.role-count.over { background: #fee2e2; color: #b91c1c; }
.role-chevron { color: var(--tf-text-muted); font-size: .75rem; transition: transform .15s; }
.role-group[open] > .role-group-head .role-chevron { transform: rotate(180deg); }
.role-group[open] > .role-group-head { border-bottom: 1px solid var(--tf-border-soft); }
.role-member { display: flex; align-items: center; gap: .6rem; padding: .45rem .65rem; border-bottom: 1px solid var(--tf-border-soft); }
.role-member:last-child { border-bottom: 0; }
.role-member-body { flex: 1; min-width: 0; }
.role-member-name { font-size: .82rem; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.role-member-meta { font-size: .72rem; line-height: 1.3; }
.role-member-remove { font-size: .75rem; color: #dc2626; text-decoration: none; white-space: nowrap; flex: none; }
.role-member-remove:hover { text-decoration: underline; color: #b91c1c; }
.role-toggle-all { text-decoration: none; white-space: nowrap; }

/* Board: compact header + filter bar so the columns get the room (the page was mostly title and filters). */
.board-head .dashboard-title { font-size: 1.25rem; margin-bottom: 0; }
.board-head .dashboard-subtitle { margin-bottom: 0; }
.board-filters { padding: .5rem .65rem; margin-bottom: .6rem; }
.board-filters .form-select, .board-filters .form-control, .board-filters .btn { font-size: .85rem; padding-top: .28rem; padding-bottom: .28rem; }
.board-filters .gf-bar { min-height: 2rem; padding: .2rem .5rem; }
.board-filters .gf-input { font-size: .85rem; }
.board-columns .board-column { max-height: calc(100vh - 200px); }

/* "Deactivate status" dialog: the issues that still use the status, scrollable when there are many. */
.deactivate-issues { max-height: 220px; overflow-y: auto; border: 1px solid var(--tf-border); border-radius: .5rem; background: var(--tf-surface-muted); }
.deactivate-issue-list { list-style: none; margin: 0; padding: .35rem .6rem; }
.deactivate-issue-list li { font-size: .82rem; padding: .25rem 0; border-bottom: 1px solid var(--tf-border-soft); }
.deactivate-issue-list li:last-child { border-bottom: 0; }

/* Statuses dialog: "Auto-assign" picker per status -- a summary line that opens a small checklist of the project's people. */
.auto-assign { position: relative; }
.auto-assign > summary { list-style: none; cursor: pointer; border: 1px solid var(--tf-border); border-radius: .4rem; padding: .2rem .55rem; font-size: .8rem; width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--tf-surface); color: var(--tf-text); }
.auto-assign > summary::-webkit-details-marker { display: none; }
.auto-assign[open] > summary { border-color: var(--tf-primary); }
.auto-assign-body { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: 250px; background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: .6rem; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: .6rem; }
.auto-assign-list { display: block; max-height: 190px; overflow-y: auto; }
.auto-assign-list input { margin-right: .4rem; vertical-align: middle; }
.auto-assign-list label { font-size: .82rem; vertical-align: middle; }
.auto-assign-list br { display: block; content: ""; margin-bottom: .25rem; }

/* Project form: "Who can change assignees" -- the roles as a two-column checklist. */
.assign-roles-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.5rem; }
.assign-roles-list li { break-inside: avoid; padding: .15rem 0; }
.assign-roles-list input { margin-right: .45rem; vertical-align: middle; }
.assign-roles-list label { font-size: .85rem; vertical-align: middle; }

/* =====================================================================================
   UI REFRESH v3 - Atlassian Jira look (Oct 2026). Override layer appended after the original
   rules. Visual only: ids, server controls and behaviour are untouched.
   Remove this block (and the jira-* markup in Site.Master) to return to the previous look.
   ===================================================================================== */

:root {
  --jira-text: #172B4D;
  --jira-subtle: #44546F;
  --jira-muted: #626F86;
  --jira-border: #DCDFE4;
  --jira-input-border: #8C8F97;
  --jira-n20: #F1F2F4;
  --jira-n10: #F7F8F9;
  --jira-blue: #0C66E4;
  --jira-blue-hover: #0055CC;
  --jira-blue-pressed: #09326C;
  --jira-blue-bg: #E9F2FF;
  --jira-focus: #388BFF;
  --jira-hover: rgba(9, 30, 66, .06);
  --jira-pressed: rgba(9, 30, 66, .14);
  --jira-raised: 0 1px 1px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31);
  --jira-overlay: 0 8px 12px rgba(9,30,66,.15), 0 0 1px rgba(9,30,66,.31);
  --jira-top: 56px;

  --tf-bg: #FFFFFF;
  --tf-surface: #FFFFFF;
  --tf-surface-muted: #F7F8F9;
  --tf-border: #DCDFE4;
  --tf-text: #172B4D;
  --tf-text-muted: #626F86;
  --tf-primary: #0C66E4;
  --tf-primary-rgb: 12, 102, 228;
  --tf-primary-dark: #0055CC;
  --tf-primary-soft: #E9F2FF;
  --tf-sidebar-bg: #FFFFFF;
  --tf-sidebar-border: #DCDFE4;
  --tf-sidebar-text: #44546F;
  --tf-sidebar-active-bg: #E9F2FF;
  --tf-sidebar-active-text: #0C66E4;
  --tf-radius: 3px;
  --type-bug: #E5493A;
  --type-task: #4BADE8;
  --type-story: #63BA3C;
  --type-epic: #904EE2;

  --bs-body-color: #172B4D;
  --bs-body-bg: #FFFFFF;
  --bs-border-color: #DCDFE4;
  --bs-link-color: #0C66E4;
  --bs-link-color-rgb: 12, 102, 228;
  --bs-link-hover-color: #0055CC;
  --bs-link-hover-color-rgb: 0, 85, 204;
}

html, body, .form-control, .form-select, .btn, input, select, textarea, button {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
html, body { background: #FFFFFF; color: #172B4D; }
body { font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(12,102,228,.2); }
a { color: #0C66E4; text-decoration: none; }
a:hover { color: #0055CC; text-decoration: underline; }
code { font-family: inherit; font-size: inherit; color: #626F86; background: none; padding: 0; }
.text-muted { color: #626F86 !important; }
hr { border-color: #DCDFE4; opacity: 1; }
h1, h2, h3, h4, h5, h6 { color: #172B4D; font-weight: 500; }

/* ================= Top navigation bar ================= */
.jira-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--jira-top); z-index: 1100; display: flex; align-items: center; gap: .25rem; padding: 0 .75rem; background: #FFFFFF; border-bottom: 1px solid #DCDFE4; box-shadow: 0 1px 0 rgba(9,30,66,.04); }
.jira-tb-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 3px; background: transparent; color: #44546F; font-size: 1.1rem; text-decoration: none; }
.jira-tb-btn:hover { background: rgba(9,30,66,.06); color: #172B4D; text-decoration: none; }
.jira-brand { display: inline-flex; align-items: center; gap: .5rem; padding: 0 .6rem 0 .25rem; height: 32px; border-radius: 3px; color: #172B4D; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; }
.jira-brand:hover { background: rgba(9,30,66,.06); color: #172B4D; text-decoration: none; }
.jira-brand img { width: 28px; height: 28px; object-fit: contain; }
.jira-topnav { align-items: center; gap: .1rem; margin-left: .25rem; }
.jira-topnav a { display: inline-flex; align-items: center; height: 32px; padding: 0 .65rem; border-radius: 3px; color: #44546F; font-size: .875rem; font-weight: 500; text-decoration: none; }
.jira-topnav a:hover { background: rgba(9,30,66,.06); color: #172B4D; text-decoration: none; }
.jira-topnav a.active { background: #E9F2FF; color: #0C66E4; }
.jira-create { margin: 0 .25rem 0 .5rem; text-decoration: none; }
.jira-create:hover { text-decoration: none; }
.jira-create .btn { height: 32px; padding: 0 .75rem; display: inline-flex; align-items: center; font-weight: 500; }
.topbar-search { display: flex; align-items: center; gap: .4rem; width: 100%; max-width: 280px; margin-left: .5rem; height: 32px; padding: 0 .6rem; border: 1px solid #8C8F97; border-radius: 3px; background: #FFFFFF; color: #626F86; }
.topbar-search:hover { background: #F7F8F9; }
.topbar-search:focus-within { border-color: #388BFF; box-shadow: 0 0 0 1px #388BFF; background: #fff; }
.topbar-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font-size: .875rem; color: #172B4D; }
.topbar-search input::placeholder { color: #626F86; }
.app-header-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: .15rem; }
.topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #44546F; font-size: 1.05rem; text-decoration: none; }
.topbar-icon-btn:hover { background: rgba(9,30,66,.06); color: #172B4D; text-decoration: none; }
.jira-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: .35rem; border-radius: 50%; background: #0C66E4; color: #fff; font-size: .75rem; font-weight: 600; text-decoration: none; }
.jira-avatar:hover { color: #fff; text-decoration: none; box-shadow: 0 0 0 2px #CCE0FF; }

/* ================= Shell / left navigation ================= */
.app-shell { min-height: 100vh; padding-top: var(--jira-top); }
.app-sidebar { width: 240px; top: var(--jira-top); height: calc(100vh - var(--jira-top)); background: #FFFFFF; border-right: 1px solid #DCDFE4; }
.sidebar-header { padding: .9rem .75rem .6rem; gap: 0; border-bottom: 0; }
.sidebar-header-top { gap: .6rem; }
.sidebar-logo { width: 32px; height: 32px; border-radius: 3px; border: 1px solid #DCDFE4; padding: 3px; background: #fff; }
.sidebar-header-titles { flex: 1; text-align: left; }
.sidebar-title { font-size: .875rem; font-weight: 600; color: #172B4D; }
.sidebar-subtitle { display: block; font-size: .75rem; color: #626F86; white-space: nowrap; }
.sidebar-header-actions { gap: .1rem; }
.sidebar-icon-btn { width: 24px; height: 24px; border: 0; border-radius: 3px; color: #626F86; font-size: .8rem; }
.sidebar-icon-btn:hover { background: rgba(9,30,66,.06); color: #172B4D; }
.sidebar-icon-btn.pinned { background: #E9F2FF; color: #0C66E4; }
.sidebar-icon-btn:disabled:hover { background: transparent; color: #626F86; }

.sidebar-nav { padding: 0 .5rem .75rem; }
.sidebar-workspace-label, .sidebar-nav .sidebar-workspace-label { padding: 1rem .75rem .35rem; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #626F86; }
.sidebar-nav .nav-link { gap: .75rem; padding: 0 .75rem; height: 32px; border-radius: 3px; color: #172B4D; font-size: .875rem; font-weight: 400; margin-bottom: 1px; text-decoration: none; }
.sidebar-nav .nav-link i { font-size: 1rem; color: #44546F; width: 1.1rem; }
.sidebar-nav .nav-link:hover { background: rgba(9,30,66,.06); color: #172B4D; }
.sidebar-nav .nav-link:hover i { color: #172B4D; }
.sidebar-nav .nav-link.active { background: #E9F2FF; color: #0C66E4; font-weight: 500; position: relative; }
.sidebar-nav .nav-link.active i { color: #0C66E4; }
.sidebar-nav .nav-link.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0 3px 3px 0; background: #0C66E4; }
.app-sidebar.collapsed { width: 64px; }
.app-sidebar.collapsed .sidebar-header-top { flex-direction: column; }
.app-sidebar.collapsed .sidebar-subtitle { display: none; }
.app-sidebar.collapsed .sidebar-nav .nav-link::before { display: none; }

.sidebar-footer { padding: .6rem .75rem; border-top: 1px solid #DCDFE4; }
.sidebar-user-name { font-size: .8125rem; font-weight: 600; color: #172B4D; }
.sidebar-user-role { font-size: .75rem; color: #626F86; }
.sidebar-logout-btn { width: 28px; height: 28px; border: 0; border-radius: 3px; color: #626F86; text-decoration: none; }
.sidebar-logout-btn:hover { background: rgba(9,30,66,.06); color: #172B4D; text-decoration: none; }

.main-container { padding: 1rem 2rem 3rem; max-width: none; }
.jira-breadcrumbs { display: flex; align-items: center; gap: .35rem; margin: .25rem 0 .35rem; font-size: .875rem; color: #626F86; }
.jira-breadcrumbs i { font-size: .6rem; }

/* ================= Page header ================= */
.dashboard-title { font-size: 1.5rem; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; color: #172B4D; }
.dashboard-subtitle { font-size: .875rem; color: #626F86; margin-top: .15rem; }

/* ================= Panels ================= */
.tf-card { background: #fff; border: 1px solid #DCDFE4; border-radius: 3px; box-shadow: none; padding: .85rem 1rem; }
.tf-card h5, .tf-card h6 { font-size: .875rem; font-weight: 600; color: #172B4D; }
.table-responsive { border-radius: 0; }

/* ================= Buttons ================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; height: 32px; padding: 0 .75rem; border-radius: 3px; font-size: .875rem; font-weight: 500; line-height: 1; box-shadow: none; transition: background-color .1s ease; }
.btn-sm { height: 28px; padding: 0 .55rem; font-size: .8125rem; border-radius: 3px; }
.btn-lg { height: 40px; padding: 0 1rem; }
.btn-primary { --bs-btn-bg: #0C66E4; --bs-btn-border-color: #0C66E4; background: #0C66E4; border-color: #0C66E4; color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: #0055CC; border-color: #0055CC; color: #fff; text-decoration: none; }
.btn-primary:active { background: #09326C; border-color: #09326C; color: #fff; }
.btn-primary:disabled, .btn-primary.disabled { background: rgba(9,30,66,.04); border-color: transparent; color: #8590A2; }
.btn:focus-visible { outline: 2px solid #388BFF; outline-offset: 1px; box-shadow: none; }
.btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-dark { background: rgba(9,30,66,.04); border-color: transparent; color: #172B4D; }
.btn-outline-secondary:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-dark:hover { background: rgba(9,30,66,.08); border-color: transparent; color: #172B4D; text-decoration: none; }
.btn-outline-secondary:active, .btn-secondary:active, .btn-light:active { background: rgba(9,30,66,.14); border-color: transparent; color: #172B4D; }
.btn-outline-danger, .btn-danger { border-radius: 3px; }
.btn-danger { background: #C9372C; border-color: #C9372C; }
.btn-danger:hover { background: #AE2E24; border-color: #AE2E24; }
.btn-link { font-weight: 500; color: #0C66E4; background: transparent; }
.btn-link:hover { background: rgba(9,30,66,.06); text-decoration: none; }
.btn-link.text-dark { color: #172B4D !important; }
.btn-icon-ghost { border-radius: 3px; color: #44546F; }
.btn-icon-ghost:hover { background: rgba(9,30,66,.06); }

/* ================= Form controls ================= */
.form-control, .form-select { height: 32px; min-height: 32px; padding: 0 .6rem; border: 1px solid #8C8F97; border-radius: 3px; background-color: #fff; color: #172B4D; font-size: .875rem; line-height: 1.43; box-shadow: none; }
textarea.form-control { height: auto; padding: .4rem .6rem; }
.form-control-sm, .form-select-sm { height: 28px; font-size: .8125rem; }
.form-control:hover, .form-select:hover { background-color: #F7F8F9; }
.form-control:focus, .form-select:focus { background-color: #fff; border-color: #388BFF; box-shadow: 0 0 0 1px #388BFF; outline: 0; }
.form-control::placeholder { color: #626F86; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: #F7F8F9; border-color: #DCDFE4; color: #8590A2; }
.form-label { font-size: .75rem; font-weight: 600; color: #626F86; margin-bottom: .25rem; }
.form-check-input { border-color: #8C8F97; border-radius: 3px; }
.form-check-input[type=radio] { border-radius: 50%; }
.form-check-input:checked { background-color: #0C66E4; border-color: #0C66E4; }
.form-check-input:focus { border-color: #388BFF; box-shadow: 0 0 0 1px #388BFF; }
.form-select { padding-right: 2rem; background-position: right .6rem center; background-size: 12px 10px; }
.input-group { flex-wrap: nowrap; }
.input-group > .form-control { height: 32px; border-radius: 3px 0 0 3px; }
.input-group > .btn { height: 32px; border-radius: 0 3px 3px 0; margin-left: -1px; }
.tf-card > .row { align-items: center; }
.gf-bar { padding: 2px 8px; gap: .3rem; }
.gf-input { height: 26px; font-size: .875rem; }
.gf-chip { height: 22px; font-size: .75rem; }
.gf-pending { border-radius: 3px; height: 22px; }
.tf-search-box { height: 32px; max-width: none; padding: 0 0 0 .6rem; }
.tf-search-box .form-control { height: 30px; padding: 0 .25rem; }
.tf-search-box .btn { height: 26px; margin: 0 2px 0 0; border-radius: 3px; }
.gf-bar-icon, .topbar-search i { font-size: .875rem; }
.gf-bar, .tf-search-box { min-height: 32px; border: 1px solid #8C8F97; border-radius: 3px; background: #fff; }
.gf-bar:focus-within, .tf-search-box:focus-within { border-color: #388BFF; box-shadow: 0 0 0 1px #388BFF; }
.alert { border-radius: 3px; border-width: 0 0 0 4px; font-size: .875rem; }
.alert-danger { background: #FFEDEB; border-color: #C9372C; color: #172B4D; }
.alert-warning { background: #FFF7D6; border-color: #CF9F02; color: #172B4D; }
.alert-success { background: #DCFFF1; border-color: #22A06B; color: #172B4D; }
.alert-info { background: #E9F2FF; border-color: #0C66E4; color: #172B4D; }

/* ================= Tabs ================= */
.top-tabs { gap: 1.25rem; border-bottom: 2px solid #DCDFE4; margin-bottom: 1rem; }
.top-tab { padding: .55rem .1rem; margin-bottom: -2px; color: #44546F; font-size: .875rem; font-weight: 500; border-bottom: 2px solid transparent; text-decoration: none; }
.top-tab:hover { color: #172B4D; text-decoration: none; border-bottom-color: #8C8F97; }
.top-tab.active { color: #0C66E4; border-bottom-color: #0C66E4; font-weight: 600; }

/* ================= Tables ================= */
.tf-table { font-size: .875rem; --bs-table-bg: transparent; --bs-table-hover-bg: #F1F2F4; }
.tf-table th { font-size: .75rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: #626F86; background: #fff; padding: .45rem .75rem; border-bottom: 2px solid #DCDFE4; white-space: nowrap; }
.tf-table td { padding: .45rem .75rem; vertical-align: middle; }
.tf-table > :not(caption) > * > * { border-bottom-color: #DCDFE4; }
.tf-table a { color: #172B4D; }
.tf-table a:hover { color: #0C66E4; text-decoration: underline; }
.issues-table-sticky-head, .dashboard-team-table-wrap thead th { background: #fff; }

/* ================= Lozenges / labels ================= */
.badge-status { display: inline-flex; align-items: center; height: 16px; padding: 0 .3rem; border-radius: 3px; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.badge-status-yettostart, .badge-status-open { background: #DCDFE4; color: #44546F; }
.badge-status-inprogress { background: #CCE0FF; color: #0055CC; }
.badge-status-onhold { background: #FFF7D6; color: #7F5F01; }
.badge-status-submittedforreview, .badge-status-inreview { background: #DFD8FD; color: #5E4DB2; }
.badge-status-closed { background: #BAF3DB; color: #216E4E; }
.badge-priority { display: inline-flex; align-items: center; gap: .25rem; height: 20px; padding: 0 .2rem; border-radius: 3px; font-size: .75rem; font-weight: 500; background: transparent; }
.badge-priority::before { font-size: .65rem; line-height: 1; }
.badge-priority-high { color: #C9372C; background: transparent; }
.badge-priority-high::before { content: "\25B2"; }
.badge-priority-medium { color: #CF9F02; background: transparent; }
.badge-priority-medium::before { content: "\25AC"; }
.badge-priority-low { color: #0C66E4; background: transparent; }
.badge-priority-low::before { content: "\25BC"; }
.chip, .status-chip, .gf-chip, .badge-neutral, .badge-flag, .badge-recurring, .badge-self, .badge-outline, .badge-user-status { border-radius: 3px; }
.type-icon { width: 16px; height: 16px; border-radius: 3px; font-size: .62rem; vertical-align: -3px; }

/* ================= Backlog / Planning (sprint panels + rows) ================= */
.plan-sprint.tf-card { background: #F7F8F9; border: 1px solid #DCDFE4; border-radius: 3px; padding: .35rem .5rem .5rem; margin-bottom: 1rem !important; }
.plan-sprint > summary { padding: .45rem .35rem; min-height: 40px; }
.plan-sprint > summary strong { font-size: .9375rem; font-weight: 700; }
.plan-sprint-chevron { color: #44546F; font-size: .75rem; }
.plan-sprint .plan-dropzone { margin-top: .25rem !important; max-height: 55vh; padding-right: 0; }
.plan-issue-row, .backlog-row { background: #fff; border: 1px solid #DCDFE4 !important; border-radius: 0 !important; margin-bottom: -1px !important; padding: 0 .75rem !important; min-height: 40px; gap: .6rem !important; }
.plan-issue-row:first-child, .backlog-row:first-child { border-radius: 3px 3px 0 0 !important; }
.plan-issue-row:last-child, .backlog-row:last-child { border-radius: 0 0 3px 3px !important; margin-bottom: 0 !important; }
.plan-issue-row:only-child, .backlog-row:only-child { border-radius: 3px !important; }
.plan-issue-row:hover, .backlog-row:hover { background: #F1F2F4; }
/* Planning's table rows: the All Issues table styling replaces the box look of the old list rows. */
tr.plan-issue-row.plan-table-row, tr.plan-issue-row.plan-table-row:first-child, tr.plan-issue-row.plan-table-row:last-child, tr.plan-issue-row.plan-table-row:only-child { border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; min-height: 0; background: transparent; }
tr.plan-issue-row.plan-table-row:hover { background: #F1F2F4; }
.plan-dropzone .table-responsive { margin-top: .25rem; }
.plan-issue-row a.flex-grow-1, .backlog-row a.flex-grow-1 { color: #172B4D; font-size: .875rem; }
.plan-issue-row a.flex-grow-1:hover, .backlog-row a.flex-grow-1:hover { color: #0C66E4; text-decoration: underline; }
.plan-issue-row code, .backlog-row code { font-size: .8125rem; color: #626F86; white-space: nowrap; }
.plan-dropzone.drag-over, .plan-dropzone.dz-over { outline: 2px dashed #388BFF; outline-offset: -2px; background: #E9F2FF; }
.backlog-list-wrap { max-height: 600px; }
.row-action-kebab { width: 24px; height: 24px; border-radius: 3px; color: #44546F; }
.row-action-kebab:hover { background: rgba(9,30,66,.1); color: #172B4D; }
.hier-btn { border-radius: 3px; color: #626F86; }
.hier-btn:hover { background: rgba(9,30,66,.08); color: #172B4D; }
.board-card-avatar { width: 24px; height: 24px; border-radius: 50%; font-size: .625rem; font-weight: 600; }

/* ================= Board ================= */
.board-columns { gap: .5rem; }
.board-column { background: #F7F8F9; border: 0; border-radius: 3px; padding: .35rem; }
.board-column.drag-over { background: #E9F2FF; border: 0; box-shadow: inset 0 0 0 2px #388BFF; }
.board-column-header { padding: .35rem .5rem .6rem; }
.board-column-name { font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: #626F86; }
.board-column-count { font-size: .75rem; color: #626F86; }
.board-card { background: #fff; border: 0; border-radius: 3px; padding: .6rem .75rem; margin-bottom: .4rem; box-shadow: 0 1px 1px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31); }
.board-card:hover { background: #F7F8F9; }
.board-card.dragging { box-shadow: 0 8px 12px rgba(9,30,66,.15), 0 0 1px rgba(9,30,66,.31); transform: rotate(2deg); }
.board-card-title { font-weight: 400; color: #172B4D; font-size: .875rem; }
.board-card-title:hover { color: #0C66E4; }
.board-card-meta { color: #626F86; }

/* ================= Tiles / dashboard ================= */
.dashboard-tile-grid { max-width: none; gap: .75rem; }
.stat-tile, .admin-stat-tile, .resource-tile, .nav-tile { border: 1px solid #DCDFE4; border-radius: 3px; box-shadow: none; }
.stat-tile { padding: .8rem 1rem; }
.stat-tile:hover, .nav-tile:hover { box-shadow: 0 1px 1px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31); transform: none; border-color: #DCDFE4; }
.stat-tile .stat-tile-icon, .admin-stat-tile .stat-tile-icon, .nav-tile .nav-tile-icon { width: 32px; height: 32px; border-radius: 3px; font-size: .95rem; }
.stat-tile .stat-value { font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; }
.stat-tile .stat-label { font-size: .8125rem; color: #626F86; font-weight: 400; }
.link-card { border-radius: 3px; }
.link-card:hover { background: #F7F8F9; border-color: #DCDFE4; }

/* ================= Menus / dialogs ================= */
.modal-backdrop-custom { background: rgba(9,30,66,.54); }
.modal-dialog-custom { border-radius: 3px; border: 0; box-shadow: 0 8px 12px rgba(9,30,66,.15), 0 0 1px rgba(9,30,66,.31); padding: 1.5rem; }
.modal-dialog-custom h5 { font-size: 1.25rem; font-weight: 500; }
.combo-menu, .gf-menu, .row-action-menu, .row-action-submenu { border: 0; border-radius: 3px; box-shadow: 0 8px 12px rgba(9,30,66,.15), 0 0 1px rgba(9,30,66,.31); }
.combo-option, .gf-option, .row-action-item, .row-action-option { border-radius: 0; font-size: .875rem; color: #172B4D; }
.combo-option:hover, .row-action-item:hover, .row-action-option:hover { background: #F1F2F4; }
.combo-option.selected { background: #E9F2FF; color: #0C66E4; }
.combo-option.active { background: #F1F2F4; color: #172B4D; }
.gf-option:hover, .gf-option.active { background: #F1F2F4; color: #172B4D; }
.issues-pager a, .issues-pager span, .allocation-pager-btn { border-radius: 3px; }

/* ================= Sign in ================= */
.auth-page { background: #F7F8F9; }
.auth-card { max-width: 400px; padding: 2.5rem; border: 0; border-radius: 3px; box-shadow: 0 8px 12px rgba(9,30,66,.15), 0 0 1px rgba(9,30,66,.31); text-align: center; }
.auth-card .form-label, .auth-card .alert { text-align: left; display: block; }
.auth-logo { margin: 0 auto 1rem; width: 48px; height: 48px; }
.auth-card h4 { font-size: 1rem; font-weight: 600; margin-bottom: 0 !important; }
.auth-card .text-muted { margin-bottom: 1.5rem !important; }
.auth-card .btn-primary { height: 40px; }

/* ================= Sidebar: Starred / Recent / More projects ================= */
.sidebar-projects { padding: 0 .5rem .5rem; border-bottom: 1px solid #DCDFE4; }
.sb-row { display: flex; align-items: center; gap: .75rem; width: 100%; height: 36px; padding: 0 .75rem; border: 0; border-radius: 3px; background: transparent; color: #172B4D; font-size: .875rem; text-align: left; white-space: nowrap; outline: 0; }
.sb-row i:first-child { font-size: 1rem; color: #44546F; width: 1.1rem; text-align: center; flex-shrink: 0; }
.sb-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sb-row .sb-chev { font-size: .7rem; color: #626F86; }
.sb-row:hover, .sb-row.open { background: rgba(9,30,66,.06); }
.sb-row.open { background: #E9F2FF; color: #0C66E4; }
.sb-row.open i { color: #0C66E4 !important; }
.sb-row:focus-visible { box-shadow: inset 0 0 0 2px #388BFF; }
.sidebar-projects .sb-proj-label { padding: .85rem .75rem .3rem; }
.sb-recent-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 2px; }
.sb-proj { position: relative; display: flex; align-items: center; gap: .65rem; min-height: 36px; padding: 0 .4rem 0 .75rem; border-radius: 3px; color: #172B4D; font-size: .875rem; text-decoration: none; }
.sb-proj:hover { background: rgba(9,30,66,.06); color: #172B4D; text-decoration: none; }
.sb-proj.active { background: #E9F2FF; color: #0C66E4; font-weight: 500; }
.sb-proj-tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; color: #fff; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.sb-proj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-proj-code { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: #626F86; background: #F1F2F4; border-radius: 3px; padding: 1px 6px; flex-shrink: 0; }
.sb-star { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 3px; background: transparent; color: #626F86; opacity: 0; flex-shrink: 0; font-size: .85rem; }
.sb-proj:hover .sb-star, .sb-star.on, .sb-star:focus-visible { opacity: 1; }
.sb-star.on { color: #E2B203; }
.sb-star:hover { background: rgba(9,30,66,.1); color: #172B4D; }
.sb-star.on:hover { color: #CF9F02; }
.sb-empty { padding: .4rem .75rem; font-size: .8125rem; color: #626F86; }

/* Flyout lives at body level (outside the sticky sidebar) so no page control can paint over it */
.sb-flyout { position: fixed; z-index: 1300; width: 340px; max-height: min(70vh, 460px); flex-direction: column; background: #fff; border: 0; border-radius: 6px; box-shadow: 0 8px 12px rgba(9,30,66,.15), 0 0 1px rgba(9,30,66,.31); padding: .5rem; }
.sb-flyout-head { display: flex; align-items: center; justify-content: space-between; padding: .45rem .6rem .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #626F86; }
.sb-flyout-count { min-width: 20px; padding: 0 6px; border-radius: 10px; background: #F1F2F4; color: #44546F; font-size: .6875rem; text-align: center; line-height: 18px; }
.sb-flyout-count:empty { display: none; }
.sb-flyout-search { display: flex; align-items: center; gap: .5rem; height: 36px; margin: 0 .25rem .5rem; padding: 0 .65rem; border: 1px solid #8C8F97; border-radius: 3px; color: #626F86; background: #fff; }
.sb-flyout-search:focus-within { border-color: #388BFF; box-shadow: 0 0 0 1px #388BFF; }
.sb-flyout-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; font-size: .875rem; color: #172B4D; background: transparent; }
.sb-flyout-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 0 .25rem .25rem; }
.sb-flyout-list .sb-proj { min-height: 44px; padding: 0 .5rem; gap: .75rem; }
.sb-flyout-list .sb-proj-tile { width: 28px; height: 28px; border-radius: 4px; font-size: .8125rem; }
.sb-flyout-list .sb-proj-name { font-weight: 500; }
.sb-flyout-list .sb-star { opacity: .55; }
.sb-flyout-list .sb-proj:hover .sb-star, .sb-flyout-list .sb-star.on { opacity: 1; }
.sb-flyout-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: 1.5rem 1rem 1.25rem; color: #626F86; }
.sb-flyout-empty i { font-size: 1.5rem; color: #8590A2; margin-bottom: .35rem; }
.sb-flyout-empty-title { font-size: .875rem; font-weight: 600; color: #172B4D; }
.sb-flyout-empty-sub { font-size: .8125rem; }
.app-sidebar.collapsed .sb-row span, .app-sidebar.collapsed .sb-row .sb-chev, .app-sidebar.collapsed .sb-proj-label, .app-sidebar.collapsed .sb-recent-list { display: none; }
.app-sidebar.collapsed .sb-row { justify-content: center; padding: 0; }

/* ================= Create issue page ================= */
.req { color: #C9372C; margin-left: 2px; font-weight: 700; }
.ic-head, .ic-grid, .ic-actions { max-width: 1120px; }
.ic-head { margin-bottom: 1.1rem; }
.ic-back { display: inline-flex; align-items: center; gap: .4rem; padding: 2px 0; color: #44546F; font-size: .875rem; font-weight: 500; text-decoration: none; }
.ic-back:hover { color: #0C66E4; text-decoration: none; }
.ic-title { margin-top: .5rem; font-size: 1.5rem; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; color: #172B4D; }
.ic-sub { margin-top: .2rem; font-size: .8125rem; color: #626F86; }
.ic-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.tf-card.ic-card { padding: 0; overflow: visible; border-radius: 6px; }
.ic-card-head { display: flex; align-items: center; gap: .55rem; padding: .85rem 1.25rem; border-bottom: 1px solid #DCDFE4; background: #F7F8F9; border-radius: 6px 6px 0 0; font-size: .875rem; font-weight: 600; color: #172B4D; }
.ic-card-head i { color: #0C66E4; font-size: 1rem; }
.ic-body { padding: 1.25rem; }
.ic-field { margin-bottom: 1.15rem; min-width: 0; }
.ic-body > :last-child, .ic-body > .ic-field:last-child { margin-bottom: 0; }
.ic-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.ic-body .form-label, .ic-body .form-label.small { display: block; font-size: .75rem; font-weight: 600; color: #44546F; margin-bottom: .3rem; }
.ic-body .form-control, .ic-body .form-select, .ic-body .combo-box { width: 100%; }
.ic-body .form-text { margin-top: .3rem; font-size: .75rem; color: #626F86; }
.ic-body .mb-3 { margin-bottom: 1.15rem !important; }
.ic-body .text-danger { display: block; margin-top: .25rem; }

.ic-main .md-editor { border: 1px solid #8C8F97; border-radius: 3px; background: #fff; }
.ic-main .md-editor:focus-within { border-color: #388BFF; box-shadow: 0 0 0 1px #388BFF; }
.ic-main .md-editor-toolbar { padding: .3rem .5rem; background: #F7F8F9; border-bottom: 1px solid #DCDFE4; }
.ic-main .md-tab { border-radius: 3px; font-size: .8125rem; font-weight: 500; color: #44546F; padding: .3rem .75rem; }
.ic-main .md-tab:hover { background: rgba(9,30,66,.06); }
.ic-main .md-tab.active { background: #E9F2FF; color: #0C66E4; box-shadow: none; font-weight: 600; }
.ic-main .md-btn { border-radius: 3px; color: #44546F; }
.ic-main .md-btn:hover { background: rgba(9,30,66,.08); color: #172B4D; }
.ic-main .md-textarea { min-height: 170px; padding: .6rem .75rem; font-size: .875rem; line-height: 1.5; background: #fff !important; }
.ic-main .md-editor-preview { min-height: 170px; }

.ic-main .attachment-dropzone { justify-content: center; flex-direction: column; gap: .15rem; padding: 1.1rem .75rem; border: 2px dashed #DCDFE4; border-radius: 3px; background-image: none; background-color: #fff; color: #44546F; text-align: center; transition: border-color .12s ease, background-color .12s ease; }
.ic-main .attachment-dropzone i { font-size: 1.25rem; color: #0C66E4; }
.ic-main .attachment-dropzone:hover { border-color: #388BFF; background-color: #F7F8F9; }
.ic-main .attachment-file-item { border-radius: 3px; background: #F7F8F9; border-color: #DCDFE4; }

.ic-labels { position: relative; }
.ic-labels > span, .ic-labels > table { display: flex !important; flex-wrap: wrap; gap: .4rem !important; }
.ic-labels input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ic-labels label { display: inline-flex; align-items: center; height: 28px; margin: 0; padding: 0 .7rem; border: 1px solid #8C8F97; border-radius: 3px; background: #fff; color: #172B4D; font-size: .8125rem; font-weight: 500; cursor: pointer; transition: background-color .1s ease; }
.ic-labels label:hover { background: #F1F2F4; }
.ic-labels input:checked + label { background: #E9F2FF; border-color: #0C66E4; color: #0C66E4; font-weight: 600; }
.ic-labels input:focus-visible + label { outline: 2px solid #388BFF; outline-offset: 1px; }

.ic-side #assigneeDisplayBox { min-height: 32px; height: auto; display: flex; align-items: center; }
.ic-side #assigneeDropdownPanel { border: 0 !important; border-radius: 3px; box-shadow: 0 8px 12px rgba(9,30,66,.15), 0 0 1px rgba(9,30,66,.31); background: #fff; }

.ic-actions { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin-top: 1.25rem; padding: .8rem 0; background: #fff; border-top: 1px solid #DCDFE4; }
.ic-actions .btn { min-width: 84px; }

@media (max-width: 991.98px) {
  .ic-grid { grid-template-columns: minmax(0, 1fr); }
  .ic-row-2 { grid-template-columns: 1fr; }
}

/* ================= Small screens ================= */
@media (max-width: 991.98px) {
  .app-sidebar { width: 260px; top: var(--jira-top); height: calc(100vh - var(--jira-top)); }
  .main-container { padding: 1rem 1rem 2.5rem; }
  .topbar-search { max-width: none; flex: 1; }
  .dashboard-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   ALL ISSUES TABLE - Jira-style issue list (visual only, scoped to .issues-table-wrap)
   ========================================================================== */
.issues-table-wrap {
  max-height: calc(100vh - 280px); min-height: 420px;
  overflow: auto; container-type: inline-size;
  border: 1px solid #DCDFE4; border-radius: 3px; background: #fff;
  scrollbar-width: thin; scrollbar-color: #B3B9C4 transparent;
}
.issues-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.issues-table-wrap::-webkit-scrollbar-thumb { background: #B3B9C4; border-radius: 6px; border: 2px solid #fff; }
.issues-table-wrap::-webkit-scrollbar-thumb:hover { background: #8590A2; }
.issues-table-wrap::-webkit-scrollbar-track { background: transparent; }

.issues-table-wrap .tf-table { width: 100%; min-width: 1500px; margin: 0; table-layout: auto; border-collapse: separate; border-spacing: 0; font-size: 14px; }

/* header: stays visible, one line per heading */
.issues-table-wrap .tf-table tr.issues-table-sticky-head > th {
  position: sticky; top: 0; z-index: 3; background: #F7F8F9;
  padding: .6rem .7rem; white-space: nowrap; text-align: left;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; color: #626F86;
  border-top: 0; border-bottom: 2px solid #DCDFE4;
}
.issues-table-wrap .tf-table tr.issues-table-sticky-head > th:first-child { padding-left: 1rem; }

/* rows */
.issues-table-wrap .tf-table > tbody > tr:not(.issues-table-sticky-head):not(.issues-pager) > td {
  padding: .7rem .7rem; vertical-align: middle; line-height: 1.45; color: #172B4D;
  border-top: 0; border-bottom: 1px solid #EBECF0; background: #fff;
}
.issues-table-wrap .tf-table > tbody > tr:not(.issues-table-sticky-head):not(.issues-pager) > td:first-child { padding-left: 1rem; }
.issues-table-wrap .tf-table > tbody > tr:not(.issues-table-sticky-head):not(.issues-pager):hover > td { background: #F7F8F9; }

/* column sizes: small fixed columns stay on one line, Title gets the room */
.issues-table-wrap .tf-table > tbody > tr > :nth-child(1)  { min-width: 100px; white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(2)  { min-width: 84px;  white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(3)  { min-width: 300px; width: 28%; max-width: 480px; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(4)  { min-width: 92px;  white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(5)  { min-width: 170px; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(6)  { min-width: 76px;  white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(7)  { min-width: 76px;  white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(8)  { min-width: 120px; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(9)  { min-width: 84px;  white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(10) { min-width: 140px; white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(11) { min-width: 200px; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(12) { min-width: 96px;  white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(13) { min-width: 100px; white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(14) { min-width: 60px;  white-space: nowrap; text-align: center; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(15) { min-width: 100px; }
.issues-table-wrap .tf-table tr.issues-table-sticky-head > :nth-child(14) { text-align: center; }

/* type: icon and name side by side */
.issues-table-wrap .type-icon { width: 20px; height: 20px; margin-right: .4rem; vertical-align: middle; }
.issues-table-wrap td:nth-child(1) .small { font-size: 13px; color: #44546F; vertical-align: middle; }

/* code: quiet grey key, not pink Bootstrap code */
.issues-table-wrap td code { padding: 0; background: transparent; color: #626F86; font-size: 13px; font-weight: 500; font-family: inherit; white-space: nowrap; }
.issues-table-wrap td a code { color: #0C66E4; }
.issues-table-wrap td a:hover code { text-decoration: underline; }

/* title */
.issues-table-wrap td:nth-child(3) > a { color: #172B4D; font-weight: 500; line-height: 1.45; text-decoration: none; }
.issues-table-wrap td:nth-child(3) > a:hover { color: #0C66E4; text-decoration: underline; }
.issues-table-wrap td:nth-child(3) .hier-btn { margin-left: .25rem; vertical-align: middle; }

/* "No parent" - a quiet placeholder, not a button */
.issues-table-wrap .badge-outline {
  display: inline-flex; align-items: center; height: 20px; padding: 0 .45rem; border-radius: 3px;
  border: 1px dashed #B3B9C4; background: transparent; color: #8590A2; font-size: 12px; font-weight: 500; white-space: nowrap;
}

/* project / created by / dates / numbers */
.issues-table-wrap td:nth-child(5) { color: #172B4D; }
.issues-table-wrap td:nth-child(6), .issues-table-wrap td:nth-child(8), .issues-table-wrap td:nth-child(12) { color: #44546F; }
.issues-table-wrap td:nth-child(12) .fw-semibold { color: #C9372C; }
.issues-table-wrap td:nth-child(13) .small { font-size: 13px; color: #44546F !important; }
.issues-table-wrap td:nth-child(13) .bi { color: #8590A2; margin-right: .15rem; }
.issues-table-wrap td:nth-child(14) .small { font-size: 13px; font-weight: 600; color: #172B4D !important; }

/* assignee avatars */
.issues-table-wrap td:nth-child(7) .board-card-avatar { width: 28px; height: 28px; font-size: .7rem; }

/* in status: duration, then the earlier statuses as small chips underneath */
.issues-table-wrap td:nth-child(11) > div:first-child { font-size: 13px; color: #626F86; }
.issues-table-wrap td:nth-child(11) > div:first-child strong { color: #172B4D; font-weight: 600; }
.issues-table-wrap td:nth-child(11) > div + div { margin-top: .3rem; max-width: 280px !important; }
.issues-table-wrap .status-chips { gap: .3rem; }
.issues-table-wrap .status-chips-label { font-size: 10.5px; letter-spacing: .04em; color: #8590A2; }
.issues-table-wrap .status-chip { padding: .05rem .5rem; border-radius: 3px; border: 1px solid #DCDFE4; background: #F7F8F9; font-size: 12px; }

/* status dropdown pill keeps a steady width so the column reads as one block */
.issues-table-wrap td:nth-child(10) .status-pill { display: inline-block; min-width: 132px; }

/* labels */
.issues-table-wrap td:nth-child(15) { font-size: 12px; }

/* pager: centred in the visible area (not the full scroll width), Jira page buttons */
.issues-table-wrap tr.issues-pager > td { padding: 0 !important; border: 0 !important; border-top: 1px solid #DCDFE4 !important; background: #fff !important; position: sticky; left: 0; bottom: 0; z-index: 3; }
.issues-table-wrap tr.issues-pager > td > table { position: sticky; left: 0; width: 100cqw; margin: 0; border-collapse: separate; }
.issues-table-wrap tr.issues-pager > td > table td { padding: .9rem 0 !important; }
.issues-table-wrap tr.issues-pager > td > table, .issues-table-wrap tr.issues-pager > td > table > tbody { display: block; }
.issues-table-wrap tr.issues-pager > td > table > tbody > tr { display: flex; justify-content: center; align-items: center; padding: .75rem 0; }
.issues-table-wrap tr.issues-pager > td > table td { padding: 0 !important; }
.issues-table-wrap .issues-pager a, .issues-table-wrap .issues-pager span {
  min-width: 32px; height: 32px; line-height: 30px; padding: 0 .55rem; border-radius: 3px; font-size: 14px; font-weight: 500; margin: 0 2px;
}
.issues-table-wrap .issues-pager a { color: #44546F; }
.issues-table-wrap .issues-pager a:hover { background: #F1F2F4; color: #172B4D; border-color: transparent; }
.issues-table-wrap .issues-pager span { background: #0C66E4; color: #fff; box-shadow: none; }

/* heading row of the card */
.tf-card > .d-flex > h6 { font-size: 16px; font-weight: 600; color: #172B4D; }

/* ---- All Issues: status dropdown + "In status" cell, cleaned up ---- */
.issues-table-wrap td:nth-child(10) { min-width: 156px; }
.issues-table-wrap td:nth-child(10) .badge-status,
.issues-table-wrap td:nth-child(10) .status-pill {
  position: relative; display: inline-flex; align-items: center; height: 28px; min-width: 132px; padding: 0;
  border-radius: 3px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; line-height: 1; overflow: hidden;
}
.issues-table-wrap td:nth-child(10) span.badge-status:not(.status-pill) { padding: 0 .75rem; }
.issues-table-wrap td:nth-child(10) .status-select {
  width: 100%; height: 28px; padding: 0 1.9rem 0 .75rem; margin: 0; border: 0; border-radius: 3px; outline: none;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 28px; color: inherit; cursor: pointer;
  background-position: right .6rem center; text-overflow: ellipsis;
}
.issues-table-wrap td:nth-child(10) .status-pill:hover { filter: brightness(.94); }
.issues-table-wrap td:nth-child(10) .status-pill:focus-within { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #388BFF; }

/* In status: one quiet line for the current stay, earlier statuses as plain dotted text under it */
.issues-table-wrap td:nth-child(11) { min-width: 270px; }
.issues-table-wrap td:nth-child(11) > div:first-child { display: flex; align-items: center; gap: .35rem; font-size: 13px; color: #626F86; }
.issues-table-wrap td:nth-child(11) > div:first-child .bi { color: #8590A2; font-size: 12px; }
.issues-table-wrap td:nth-child(11) > div + div { margin-top: .35rem; max-width: 300px !important; }
.issues-table-wrap .status-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .85rem; }
.issues-table-wrap .status-chips-label { flex: 0 0 100%; font-size: 10px; font-weight: 600; letter-spacing: .06em; color: #8590A2; line-height: 1; margin-bottom: .1rem; }
.issues-table-wrap .status-chip { padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 12px; font-weight: 500; color: #44546F; gap: .35rem; }
.issues-table-wrap .status-chip i { width: 7px; height: 7px; }
.issues-table-wrap .status-chip b { font-weight: 500; color: #8590A2; }

/* row hover: a light tint, text stays regular weight */
.issues-table-wrap .tf-table > tbody > tr:not(.issues-table-sticky-head):not(.issues-pager):hover > td { background: #F7F8F9; }
.issues-table-wrap td:nth-child(3) > a { font-weight: 500; }

/* ---- Type tabs + search (All Issues and any page using .top-tabs) ---- */
.top-tabs { overflow: visible; flex-wrap: wrap; gap: 0; flex: 1 1 auto; min-width: 0; }
.top-tab { padding: .7rem 1.25rem; margin-bottom: -2px; font-size: .9375rem; border-radius: 3px 3px 0 0; transition: background .12s, color .12s; }
.top-tab:hover { background: #F1F2F4; border-bottom-color: #8C8F97; }
.top-tab.active { background: transparent; }
.top-tab.active:hover { background: #E9F2FF; border-bottom-color: #0C66E4; }
.d-flex > .input-group[style*="max-width:280px"] { max-width: 420px !important; flex: 0 1 420px; }
.input-group > input[type="submit"].btn-outline-secondary,
.input-group > button.btn-outline-secondary[type="submit"] {
  background: #0C66E4; border-color: #0C66E4; color: #fff; font-weight: 600; padding-left: 1.1rem; padding-right: 1.1rem;
}
.input-group > input[type="submit"].btn-outline-secondary:hover,
.input-group > button.btn-outline-secondary[type="submit"]:hover { background: #0055CC; border-color: #0055CC; color: #fff; }
.input-group > input[type="submit"].btn-outline-secondary:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #388BFF; }
.d-flex > .top-tabs { margin-bottom: 0; }

/* ---- All Issues table: fit the page, no sideways scroll (columns share the width, long text wraps) ---- */
.issues-table-wrap .tf-table { min-width: 0; width: 100%; font-size: 13px; }
.issues-table-wrap .tf-table tr.issues-table-sticky-head > th { padding: .6rem .5rem; }
.issues-table-wrap .tf-table > tbody > tr:not(.issues-table-sticky-head):not(.issues-pager) > td { padding: .65rem .5rem; }
.issues-table-wrap .tf-table tr.issues-table-sticky-head > th:first-child,
.issues-table-wrap .tf-table > tbody > tr:not(.issues-table-sticky-head):not(.issues-pager) > td:first-child { padding-left: .75rem; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(1)  { min-width: 58px; max-width: none; white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(2)  { min-width: 64px; white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(3)  { min-width: 170px; width: auto; max-width: none; white-space: normal; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(4)  { min-width: 72px; white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(5)  { min-width: 84px; white-space: normal; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(6)  { min-width: 58px; white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(7)  { min-width: 52px; white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(8)  { min-width: 72px; white-space: normal; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(9)  { min-width: 66px; white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(10) { min-width: 108px; white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(11) { min-width: 150px; white-space: normal; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(12) { min-width: 82px; white-space: nowrap; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(13) { min-width: 80px; white-space: normal; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(14) { min-width: 46px; white-space: nowrap; text-align: center; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(15) { min-width: 60px; white-space: normal; }

/* type: icon over its name keeps the column narrow */
.issues-table-wrap td:nth-child(1) .type-icon { display: flex; margin: 0 0 .25rem 0; }
.issues-table-wrap td:nth-child(1) .small { display: block; font-size: 12px; line-height: 1.2; }

/* title: blue link so it reads as clickable */
.issues-table-wrap td:nth-child(3) > a { color: #0C66E4; font-weight: 500; text-decoration: none; }
.issues-table-wrap td:nth-child(3) > a:hover { color: #0055CC; text-decoration: underline; }
.issues-table-wrap .tf-table td:nth-child(3) > a:visited { color: #0C66E4; }

/* parent / status / in-status sized for the shared width */
.issues-table-wrap td:nth-child(10) .badge-status,
.issues-table-wrap td:nth-child(10) .status-pill { min-width: 104px; }
.issues-table-wrap td:nth-child(11) { min-width: 150px; }
.issues-table-wrap td:nth-child(11) > div + div { max-width: 100% !important; }
.issues-table-wrap td:nth-child(11) > div:first-child { flex-wrap: wrap; }
.issues-table-wrap td:nth-child(13) .small { display: inline-block; line-height: 1.35; }

.issues-table-wrap td:nth-child(8) .text-nowrap { white-space: normal !important; }
.issues-table-wrap .tf-table tr.issues-table-sticky-head > th { padding-left: .45rem; padding-right: .45rem; }
.issues-table-wrap .tf-table > tbody > tr:not(.issues-table-sticky-head):not(.issues-pager) > td { padding-left: .45rem; padding-right: .45rem; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(3) { min-width: 150px; }
.issues-table-wrap td:nth-child(7) .board-card-avatar { width: 26px; height: 26px; }

.issues-table-wrap .tf-table > tbody > tr > :nth-child(8) { min-width: 96px; }
.issues-table-wrap td:nth-child(8) { line-height: 1.35; }
.issues-table-wrap td:nth-child(10) .badge-status, .issues-table-wrap td:nth-child(10) .status-pill { min-width: 116px; }
.issues-table-wrap .tf-table > tbody > tr > :nth-child(10) { min-width: 120px; }
.issues-table-wrap .issues-pager a:visited { color: #44546F; }

/* ==========================================================================
   FORM CONTROLS - polished inputs for every card/form (Issue Detail, New Issue, masters, modals)
   ========================================================================== */
:is(.tf-card, .modal-body, .ic-body) :is(.form-control, .form-select):not(.form-control-sm, .form-select-sm, .gf-input, .md-textarea, [type="file"], [type="checkbox"], [type="radio"]):not(.tf-search-box *, .gf-bar *, .board-filters *) {
  height: 38px; min-height: 38px; padding: 0 .8rem; border: 1px solid #C1C7D0; border-radius: 6px;
  background-color: #fff; color: #172B4D; font-size: 14px; line-height: 1.4;
  box-shadow: 0 1px 1px rgba(9,30,66,.04);
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
:is(.tf-card, .modal-body, .ic-body) textarea.form-control:not(.md-textarea) { height: auto; min-height: 96px; padding: .6rem .8rem; line-height: 1.5; }
:is(.tf-card, .modal-body, .ic-body) :is(.form-control, .form-select):not(.form-control-sm, .form-select-sm, .gf-input, [type="file"], .tf-search-box *, .gf-bar *, .board-filters *):hover:not(:disabled):not([readonly]) { border-color: #8590A2; background-color: #FAFBFC; }
:is(.tf-card, .modal-body, .ic-body) :is(.form-control, .form-select):not(.form-control-sm, .form-select-sm, .gf-input, [type="file"], .tf-search-box *, .gf-bar *, .board-filters *):focus { border-color: #388BFF; background-color: #fff; box-shadow: 0 0 0 3px rgba(56,139,255,.25); outline: 0; }
:is(.tf-card, .modal-body, .ic-body) :is(.form-control, .form-select):not(.tf-search-box *, .gf-bar *, .board-filters *):is(:disabled, [readonly]) { background-color: #F1F2F4; border-color: #DCDFE4; color: #8590A2; box-shadow: none; cursor: not-allowed; }
:is(.tf-card, .modal-body, .ic-body) .form-control::placeholder { color: #8590A2; }
:is(.tf-card, .modal-body, .ic-body) .form-select:not(.form-select-sm) { padding-right: 2.25rem; background-position: right .8rem center; }

/* date: quieter calendar icon with a hover target; number: no spinner arrows */
input[type="date"].form-control::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; padding: 3px; border-radius: 4px; }
input[type="date"].form-control::-webkit-calendar-picker-indicator:hover { opacity: 1; background: #F1F2F4; }
input[type="number"].form-control { -moz-appearance: textfield; }
input[type="number"].form-control::-webkit-outer-spin-button, input[type="number"].form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* labels */
.tf-card .form-label, .modal-body .form-label { font-size: 12px; font-weight: 600; color: #44546F; margin-bottom: .35rem; letter-spacing: .01em; }
.tf-card .form-text { font-size: 12px; color: #626F86; margin-top: .35rem; }

/* file pickers: a real button instead of the grey browser default */
:is(.tf-card, .modal-body) input[type="file"].form-control {
  height: 40px; min-height: 40px; padding: 0 .45rem; line-height: 38px; border: 1px dashed #8590A2; border-radius: 6px;
  background-color: #F7F8F9; color: #44546F; font-size: 13px; box-shadow: none; cursor: pointer; transition: border-color .12s, background-color .12s;
}
:is(.tf-card, .modal-body) input[type="file"].form-control:hover { border-color: #0C66E4; background-color: #E9F2FF; }
:is(.tf-card, .modal-body) input[type="file"].form-control:focus { border-style: solid; border-color: #388BFF; box-shadow: 0 0 0 3px rgba(56,139,255,.25); outline: 0; }
:is(.tf-card, .modal-body) input[type="file"].form-control::file-selector-button {
  height: 28px; margin: 5px .8rem 5px 0; padding: 0 .9rem; border: 0; border-radius: 4px;
  background: #fff; color: #172B4D; font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: 0 0 0 1px #C1C7D0 inset; transition: background .12s;
}
:is(.tf-card, .modal-body) input[type="file"].form-control::file-selector-button:hover { background: #F1F2F4; }

/* hours + minutes (hours-input.js): one joined field with h / m caps */
.tf-card .hm-input { flex-wrap: nowrap; min-width: 9rem; }
.tf-card .hm-input > .form-control { border-radius: 0; text-align: right; padding-right: .5rem; height: 38px; }
.tf-card .hm-input > .form-control:first-child { border-radius: 6px 0 0 6px; }
.tf-card .hm-input > .input-group-text {
  height: 38px; display: inline-flex; align-items: center; padding: 0 .65rem; border: 1px solid #C1C7D0; border-radius: 0;
  background: #F1F2F4; color: #626F86; font-size: 13px; font-weight: 600;
}
.tf-card .hm-input > .input-group-text:last-child { border-radius: 0 6px 6px 0; }
.tf-card .hm-input > * + * { margin-left: -1px; }
.tf-card .hm-input > .form-control:focus { position: relative; z-index: 2; }
.tf-card .hm-input > .form-control:disabled ~ .input-group-text, .tf-card .hm-input > .form-control:disabled + .input-group-text { background: #EBECF0; border-color: #DCDFE4; color: #8590A2; }

/* form buttons line up with the 38px fields */
.tf-card .row .btn.w-100, .tf-card .row .btn.btn-primary.w-100 { height: 38px; border-radius: 6px; font-weight: 600; }
.tf-card input[type="file"].form-control ~ .btn { height: 40px; border-radius: 6px; padding: 0 1.1rem; font-weight: 600; color: #0C66E4; border: 1px solid #0C66E4; background: #fff; }
.tf-card input[type="file"].form-control ~ .btn:hover { background: #E9F2FF; color: #0055CC; border-color: #0055CC; }

/* checkboxes / radios pick up the Jira blue */
.form-check-input:checked { background-color: #0C66E4; border-color: #0C66E4; }
.form-check-input:focus { border-color: #388BFF; box-shadow: 0 0 0 3px rgba(56,139,255,.25); }

:is(.tf-card, .modal-body) input[type="file"].form-control { padding: 5px 6px; line-height: 28px; }
:is(.tf-card, .modal-body) input[type="file"].form-control::file-selector-button { margin: 0 .8rem 0 0; }
.tf-card .hm-input > .form-control { text-align: left; padding-left: .8rem; padding-right: .4rem; }

/* ==========================================================================
   ISSUE DETAIL - Jira-style issue view: summary header, main column, Details panel
   ========================================================================== */
.idv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.idv-head-main { flex: 1 1 480px; min-width: 0; }
.idv-keyline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.idv-keyline code { padding: 0; background: transparent; color: #626F86; font-size: 14px; font-weight: 600; font-family: inherit; }
.idv-keyline .badge-outline { height: 24px; padding: 0 .55rem; border: 1px solid #DCDFE4; border-radius: 3px; background: #fff; color: #172B4D; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.idv-title { font-size: 1.75rem !important; line-height: 1.25; font-weight: 600; color: #172B4D; margin: 0 0 .3rem !important; word-break: break-word; }
.idv-head .dashboard-subtitle { color: #626F86; font-size: 13px; }
.idv-head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.idv-head-actions .btn-sm { height: 32px; padding: 0 .75rem; font-weight: 600; display: inline-flex; align-items: center; }
.idv-head-actions .badge-priority { height: 32px; padding: 0 .75rem; border: 1px solid #DCDFE4; border-radius: 3px; background: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
.idv-head-actions .status-pill { position: relative; display: inline-flex; align-items: center; height: 32px; min-width: 136px; padding: 0; border-radius: 3px; overflow: hidden; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.idv-head-actions .status-pill .status-select { width: 100%; height: 32px; padding: 0 2rem 0 .8rem; border: 0; border-radius: 3px; font-size: 13px; font-weight: 600; line-height: 32px; background-position: right .65rem center; outline: 0; cursor: pointer; }
.idv-head-actions .status-pill:hover { filter: brightness(.94); }

.idv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; align-items: start; }
.idv-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.idv-main > .tf-card, .idv-main > .tf-card.mb-3 { margin-bottom: 0 !important; padding: 1.1rem 1.25rem; border-radius: 6px; }
.idv-main .tf-card h6 { font-size: 15px; font-weight: 600; color: #172B4D; }
.idv-main .tf-card h6 .bi { color: #0C66E4; }
.idv-main .issue-description { font-size: 14px; line-height: 1.65; color: #172B4D; }
.idv-main .border.rounded.p-2 { border-color: #EBECF0 !important; border-radius: 6px !important; padding: .65rem .85rem !important; transition: background .12s; }
.idv-main .d-flex.border.rounded.p-2:hover { background: #F7F8F9; }
.idv-main .d-flex.border.rounded.p-2 a { color: #172B4D; text-decoration: none; font-weight: 500; }
.idv-main .d-flex.border.rounded.p-2 a:hover { color: #0C66E4; text-decoration: underline; }

.idv-side { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; scrollbar-width: thin; }
.idv-panel { border: 1px solid #DCDFE4; border-radius: 6px; background: #fff; }
.idv-panel-title { padding: .85rem 1.1rem; font-size: 14px; font-weight: 600; color: #172B4D; background: #F7F8F9; border-bottom: 1px solid #DCDFE4; border-radius: 6px 6px 0 0; }
.idv-panel .tf-card { margin: 0 !important; padding: .9rem 1.1rem; border: 0; border-bottom: 1px solid #EBECF0; border-radius: 0; box-shadow: none; background: transparent; }
.idv-panel > .tf-card:last-child, .idv-panel > .idv-pair:last-child .tf-card { border-bottom: 0; }
.idv-panel .tf-card > h6 { margin: 0 0 .5rem !important; font-size: 12px; font-weight: 600; color: #44546F; letter-spacing: .01em; }
.idv-panel .tf-card > h6 .bi { color: #626F86; }
.idv-pair { display: block; }
.idv-pair-item { margin: 0; }
.idv-panel .combo-box, .idv-panel .form-select, .idv-panel .form-control { width: 100%; max-width: 100%; }
.idv-panel .d-flex[style*="max-width:320px"] { max-width: 100% !important; }
/* due date / estimate: one stacked form inside the narrow panel */
.idv-panel .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
.idv-panel .row > [class*="col-md-"] { flex: 0 0 100%; width: 100%; max-width: 100%; }
.idv-panel .row > .col-md-2:nth-child(2), .idv-panel .row > .col-md-2:nth-child(3) { flex: 0 0 50%; width: 50%; max-width: 50%; }
.idv-panel .row > .col-md-2:last-child .btn { height: 36px; }
.idv-panel .row .hm-input { min-width: 0; }
.idv-panel .tf-card .d-flex.align-items-start.gap-2 { flex-wrap: wrap; }
.idv-panel .tf-card .btn-outline-secondary.text-nowrap { height: 34px; padding: 0 1rem; font-weight: 600; }

@media (max-width: 1180px) {
  .idv-layout { grid-template-columns: minmax(0, 1fr); }
  .idv-side { position: static; max-height: none; overflow: visible; order: -1; }
}

/* ---- Issue Detail "Details" panel: friendlier, with icons, tidy checkbox lists and a coloured Save ---- */
.idv-panel { border-top: 3px solid #0C66E4; box-shadow: 0 1px 3px rgba(9,30,66,.12), 0 0 1px rgba(9,30,66,.2); border-color: #DCDFE4; }
.idv-panel-title { display: flex; align-items: center; gap: .5rem; background: #fff; font-size: 15px; font-weight: 700; padding: .9rem 1.1rem; border-radius: 3px 3px 0 0; }
.idv-panel-title::before { font-family: "bootstrap-icons" !important; content: "\f56b"; font-weight: 400; color: #0C66E4; font-size: 16px; line-height: 1; }

/* section captions: small caps with a blue icon */
.idv-panel .tf-card > h6, .idv-panel .tf-card > label.form-label, .idv-panel .tf-card .form-label.small.mb-0, .idv-panel .tf-card .form-label.small {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #626F86; margin-bottom: .5rem;
}
.idv-panel .tf-card > h6::before, .idv-panel .tf-card > label.form-label::before, .idv-panel .tf-card .d-flex > label.form-label::before {
  font-family: "bootstrap-icons" !important; font-weight: 400; color: #0C66E4; font-size: 13px; margin-right: .45rem; vertical-align: -1px; letter-spacing: 0;
}
.idv-panel > .tf-card:nth-child(2) > h6::before { content: "\f270"; }                       /* status */
.idv-panel .idv-pair-item:first-child .form-label::before { content: "\f4d0"; }               /* assignees */
.idv-panel .idv-pair-item + .idv-pair-item > .tf-card > label.form-label::before { content: "\f1f1"; } /* sprint */
.idv-panel > .tf-card:nth-child(4) > label.form-label::before { content: "\f5b2"; }           /* labels */
.idv-panel > .tf-card:nth-child(5) > h6 > .bi { display: none; }
.idv-panel > .tf-card:nth-child(5) > h6::before { content: "\f1e8"; }                         /* due date */
.idv-panel .tf-card { padding: 1rem 1.1rem; }

/* Self Assign as a small pill */
.idv-panel [id$="lnkAssignToMe"] { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px; background: #E9F2FF; color: #0C66E4; font-size: 12px; font-weight: 600; text-decoration: none; transition: background .12s; }
.idv-panel [id$="lnkAssignToMe"]:hover { background: #CCE0FF; color: #0055CC; }

/* assignee picker list: space between box and name, roomy hover rows */
#assigneeDropdownPanel { margin-top: .4rem !important; padding: .6rem !important; border: 1px solid #DCDFE4 !important; border-radius: 6px !important; background: #fff; box-shadow: 0 8px 12px rgba(9,30,66,.15), 0 0 1px rgba(9,30,66,.31); }
#assigneeDropdownPanel #assigneeSearchInput { height: 34px; margin-bottom: .5rem !important; border-radius: 6px; }
#assigneeDropdownPanel table { width: 100%; border-collapse: separate; border-spacing: 0 2px; }
#assigneeDropdownPanel td { padding: .3rem .5rem; border-radius: 4px; white-space: nowrap; transition: background .1s; }
#assigneeDropdownPanel td:hover { background: #F1F2F4; }
#assigneeDropdownPanel input[type="checkbox"] { width: 16px; height: 16px; margin: 0 .65rem 0 0; vertical-align: middle; accent-color: #0C66E4; cursor: pointer; }
#assigneeDropdownPanel label { display: inline-block; vertical-align: middle; padding: .1rem 0; font-size: 14px; color: #172B4D; cursor: pointer; }
#assigneeDropdownPanel td:has(input:checked) { background: #E9F2FF; }
#assigneeDropdownPanel td:has(input:checked) label { font-weight: 600; }

/* issue labels (and any label tick-list): pill choices */
[id$="cblLabels"] { gap: .5rem !important; }
[id$="cblLabels"] > span { display: inline-flex; align-items: center; padding: .3rem .8rem .3rem .6rem; border: 1px solid #DCDFE4; border-radius: 999px; background: #fff; transition: background .12s, border-color .12s; }
[id$="cblLabels"] > span:hover { border-color: #8590A2; background: #F7F8F9; }
[id$="cblLabels"] > span:has(input:checked) { border-color: #0C66E4; background: #E9F2FF; }
[id$="cblLabels"] input[type="checkbox"] { width: 16px; height: 16px; margin: 0 .5rem 0 0; accent-color: #0C66E4; cursor: pointer; vertical-align: middle; }
[id$="cblLabels"] label { margin: 0; font-size: 13px; font-weight: 500; color: #172B4D; cursor: pointer; vertical-align: middle; }

/* the labels Save button: primary blue like the other form buttons */
[id$="btnSaveLabels"] { background: #0C66E4 !important; border: 1px solid #0C66E4 !important; color: #fff !important; font-weight: 600; border-radius: 6px; height: 34px; padding: 0 1.1rem; transition: background .12s; }
[id$="btnSaveLabels"]:hover { background: #0055CC !important; border-color: #0055CC !important; }
.idv-panel .tf-card .d-flex.align-items-start.gap-2 { align-items: center !important; }
#assigneeDropdownPanel table.d-flex { align-items: stretch !important; }
#assigneeDropdownPanel tbody, #assigneeDropdownPanel tr { display: block; }

/* Tagging people in comments: the tag as shown in a posted comment, and the "@" list under the comment box. */
.mention { background: var(--tf-primary-soft, #eef2ff); color: var(--tf-primary, #4f46e5); padding: 0 .3rem; border-radius: .3rem; font-weight: 500; white-space: nowrap; }
.mention-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-width: 320px; margin-top: 2px; background: var(--tf-surface, #fff); border: 1px solid var(--tf-border, #e5e7eb); border-radius: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: .25rem; }
.mention-item { padding: .35rem .6rem; border-radius: .35rem; font-size: .85rem; cursor: pointer; }
.mention-item.active, .mention-item:hover { background: var(--tf-primary-soft, #eef2ff); color: var(--tf-primary, #4f46e5); }

/* The top-bar bell: unread count on the bell and the dropdown of "you were tagged" entries. */
.notif-wrap { position: relative; display: inline-flex; }
.notif-wrap .topbar-icon-btn { position: relative; }
.notif-badge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dc2626; color: #fff; font-size: .65rem; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; }
.notif-panel { position: absolute; right: 0; top: calc(100% + 6px); width: 360px; max-width: 92vw; background: var(--tf-surface, #fff); border: 1px solid var(--tf-border, #e5e7eb); border-radius: .6rem; box-shadow: 0 12px 32px rgba(0,0,0,.18); z-index: 1100; overflow: hidden; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: .6rem .85rem; border-bottom: 1px solid var(--tf-border-soft, #eef0f3); font-weight: 600; font-size: .9rem; }
.notif-head a { font-weight: 400; font-size: .78rem; text-decoration: none; }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-empty { padding: 1.2rem .85rem; font-size: .83rem; color: var(--tf-text-muted, #6b7280); text-align: center; }
.notif-item { display: flex; gap: .6rem; padding: .6rem .85rem; border-bottom: 1px solid var(--tf-border-soft, #eef0f3); text-decoration: none; color: inherit; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--tf-surface-muted, #f8fafc); }
.notif-item.unread { background: var(--tf-primary-soft, #eef2ff); }
.notif-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: .4rem; background: transparent; }
.notif-item.unread .notif-dot { background: var(--tf-primary, #4f46e5); }
.notif-body { min-width: 0; }
.notif-line { font-size: .84rem; }
.notif-title { font-size: .78rem; color: var(--tf-text-muted, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-when { font-size: .72rem; color: var(--tf-text-muted, #6b7280); margin-top: .1rem; }

/* Bootstrap modals (the issue hierarchy popup ...) open above the fixed top bar (z-index 1100); at the stock 1055 the top of the dialog sat behind the bar. */
.modal { --bs-modal-zindex: 1200; z-index: 1200; }
.modal-backdrop { --bs-backdrop-zindex: 1190; z-index: 1190; }

/* Assignee Breakdown (issue page): the hours + minutes box needs its full width -- the column used to be capped at 90px, so the box spilled over the Points field. Its height matches the small fields beside it. */
.assignee-grid td.assignee-grid-hm { min-width: 9.5rem; }
.tf-card .assignee-grid .hm-input { min-width: 9rem; }
.tf-card .assignee-grid .hm-input > .form-control,
.tf-card .assignee-grid .hm-input > .input-group-text { height: 31px; font-size: .875rem; }
.tf-card .assignee-grid .hm-input > .form-control { padding-top: .25rem; padding-bottom: .25rem; }
.tf-card .assignee-grid .hm-input > .input-group-text { padding: 0 .5rem; }

/* "Who takes this issue?" dialog (Board, issue page, All Issues): one checkbox per member the status names */
.pick-assignee-list { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; }
.pick-assignee-list li { padding: .3rem 0; }
.pick-assignee-list label { margin-left: .45rem; cursor: pointer; }

/* The issue code on a Board card (e.g. PMT-025) stands out from the other small details beside it. */
.board-card-info-item.board-card-code { padding: .1rem .4rem; border-radius: 4px; background: #E9F2FF; color: #0C66E4; font-weight: 700; letter-spacing: .01em; }
.board-card-info-item.board-card-code i { color: #0C66E4; }

/* A file attached to a description or comment: icon + file name as a small chip. */
.md-file { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .15rem .55rem; margin: .1rem 0; border: 1px solid #DCDFE4; border-radius: 4px; background: #F7F8F9; color: #172B4D; font-size: .85rem; line-height: 1.5; text-decoration: none; white-space: normal; word-break: break-all; }
.md-file i { color: #0C66E4; font-size: 1rem; flex-shrink: 0; }
.md-file:hover { background: #E9F2FF; border-color: #0C66E4; color: #0C66E4; text-decoration: none; }

/* Under a comment/description box: the names of the files attached to the text (one chip per attached file). */
.md-attachments { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; }
.md-attachments-label { font-size: .78rem; color: #626F86; font-weight: 600; }

/* Remove button on a file listed under a comment (the author only). */
.md-file-remove { display: inline-flex; align-items: center; margin-left: .15rem; padding: 0 .2rem; border: 0; background: transparent; color: #626F86; font-size: .75rem; line-height: 1; border-radius: 3px; text-decoration: none; }
.md-file-remove:hover { background: #FFECEB; color: #C9372C; text-decoration: none; }
.md-file > a { color: inherit; text-decoration: none; }
.md-file > a:hover { text-decoration: underline; }
.md-file-delete:hover { background: #FFECEB; color: #C9372C; }

/* A quote (the quote button, or a line starting with ">"): set apart with a bar on the left. */
.issue-description blockquote, .md-editor-preview blockquote { display: block; margin: .2rem 0; padding: .05rem .75rem; border-left: 3px solid #C1C7D0; color: #626F86; white-space: pre-wrap; }

/* Markdown in descriptions, comments and the editor preview: headings, fenced code blocks, rules (as on GitHub). */
.issue-description .md-h, .md-editor-preview .md-h { font-weight: 600; margin: .6rem 0 .25rem; line-height: 1.25; color: #172B4D; }
.md-h1 { font-size: 1.5rem; padding-bottom: .2rem; border-bottom: 1px solid #DCDFE4; }
.md-h2 { font-size: 1.25rem; padding-bottom: .15rem; border-bottom: 1px solid #DCDFE4; }
.md-h3 { font-size: 1.1rem; }
.md-h4, .md-h5, .md-h6 { font-size: 1rem; }
.issue-description pre, .md-editor-preview pre { margin: .4rem 0; padding: .6rem .75rem; background: #F1F2F4; border-radius: 6px; overflow-x: auto; white-space: pre; }
.issue-description pre code, .md-editor-preview pre code { background: none; padding: 0; color: #172B4D; font-size: .85rem; }
.issue-description hr, .md-editor-preview hr { margin: .6rem 0; border-top: 1px solid #DCDFE4; opacity: 1; }

/* Sprint report "Time by task": the arrow that opens a parent's sub-tasks. */
.tt-toggle { border: 0; background: #F1F2F4; color: #44546F; border-radius: 4px; padding: 0 .35rem; height: 22px; line-height: 22px; cursor: pointer; font-size: .75rem; margin-right: .25rem; }
.tt-toggle:hover { background: #DCDFE4; }
.tt-toggle .bi-chevron-down { transition: transform .15s ease; display: inline-block; }
.tt-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.tt-toggle .tt-count { margin-left: .2rem; font-weight: 600; }
.tt-toggle-space { display: inline-block; width: 32px; }

/* Activity log rows: the person's name keeps its width instead of wrapping when the text beside it is long. */
.activity-row strong { flex-shrink: 0; }
.activity-row > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* "Time in each status": the issue's path as a row of steps (each stay in a status, in order). */
.stt-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem; }
.stt-total { font-size: 1.5rem; font-weight: 700; color: #172B4D; line-height: 1; }
.stt-total-label { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: #626F86; }
.stt-pipe { display: flex; align-items: stretch; overflow-x: auto; padding: .25rem .1rem .7rem; }
.stt-step { position: relative; flex: 1 1 auto; min-width: 92px; padding: .6rem .4rem .5rem; background: #fff; border: 1px solid #DCDFE4; border-top: 0; border-radius: 0 0 6px 6px; text-align: center; }
.stt-bar { position: absolute; left: -1px; right: -1px; top: 0; height: 3px; border-radius: 2px; }
.stt-step.stt-current { box-shadow: 0 4px 12px rgba(9,30,66,.16); border-color: #B3B9C4; }
.stt-name { font-size: .7rem; letter-spacing: .03em; text-transform: uppercase; color: #44546F; line-height: 1.2; }
.stt-now { font-size: .62rem; font-weight: 700; color: #0C66E4; letter-spacing: .04em; }
.stt-dur { font-size: 1.05rem; font-weight: 700; color: #172B4D; line-height: 1.35; white-space: nowrap; }
.stt-when { font-size: .68rem; color: #8590A2; line-height: 1.25; white-space: nowrap; }
.stt-arrow { flex: 0 0 24px; align-self: center; position: relative; height: 36px; }
.stt-arrow::before { content: ""; position: absolute; left: 4px; top: 50%; width: 14px; height: 14px; border-top: 2px solid #C1C7D0; border-right: 2px solid #C1C7D0; transform: translateY(-50%) rotate(45deg); }

/* The steps as arrows (chevrons) pointing right, like a pipeline: each step is notched on the left and pointed on the right, and tucks into the one before. */
.stt-pipe { align-items: stretch; padding: .25rem .1rem .7rem; }
.stt-step { flex: 1 1 auto; min-width: 118px; margin-left: -14px; padding: .65rem 1.5rem .55rem 1.7rem; background: #F1F2F4; border: 0; border-radius: 0;
            clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); box-shadow: none; }
.stt-step.stt-first { margin-left: 0; padding-left: .9rem; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.stt-step.stt-current { background: #E9F2FF; box-shadow: none; }
.stt-bar { left: 0; right: 0; height: 3px; border-radius: 0; }
.stt-arrow { display: none; }

/* Advanced search results: one line per cell, except the summary, which wraps in a readable width (the table scrolls sideways when it is wider than the card). */
.jql-table th, .jql-table td { white-space: nowrap; }
.jql-table td:nth-child(2) { white-space: normal; min-width: 260px; max-width: 420px; }
.jql-table th.text-end, .jql-table td.text-end { min-width: 56px; }
/* ---- Dashboard "Workspace overview": all four tiles in one row ---- */
.admin-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 1100px) { .admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .admin-overview-grid { grid-template-columns: minmax(0, 1fr); } }
.admin-stat-tile { padding: .85rem 1rem; gap: .8rem; min-width: 0; }
.admin-stat-tile .stat-value { font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
.admin-stat-tile .stat-label { font-size: .8125rem; color: #626F86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-stat-tile:nth-child(1) .stat-tile-icon { background: #E9F2FF; color: #0C66E4; }
.admin-stat-tile:nth-child(2) .stat-tile-icon { background: #DCFFF1; color: #1F845A; }
.admin-stat-tile:nth-child(3) .stat-tile-icon { background: #FFF1D6; color: #B65C02; }
.admin-stat-tile:nth-child(4) .stat-tile-icon { background: #F3F0FF; color: #6E5DC6; }

/* Planning: the Title is the 4th column (a select box comes first), so it gets the same link style All Issues gives its 3rd. */
.plan-dropzone .issues-table-wrap td:nth-child(4) > a { color: #0C66E4; font-weight: 500; line-height: 1.45; text-decoration: none; }
.plan-dropzone .issues-table-wrap td:nth-child(4) > a:hover { color: #0055CC; text-decoration: underline; }
.plan-dropzone .issues-table-wrap td:nth-child(4) .hier-btn { margin-left: .25rem; vertical-align: middle; }

/* Jira-style assignee filter: overlapping initials circles (Scripts/avatar-filter.js). The picked person gets a ring; the rest dim. */
.af-strip { display: flex; align-items: center; flex-wrap: wrap; padding-left: 8px; margin-top: .5rem; }
.af-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--tf-surface, #fff); margin-left: -8px; padding: 0; color: #fff; font-size: .72rem; font-weight: 600; line-height: 1; cursor: pointer; text-transform: uppercase; box-sizing: border-box; transition: transform .12s ease, box-shadow .12s ease; position: relative; }
.af-avatar:hover { transform: translateY(-2px); z-index: 2; }
.af-avatar.af-on { box-shadow: 0 0 0 2px #0C66E4; z-index: 3; }
.af-strip:has(.af-on) .af-avatar:not(.af-on) { opacity: .55; }
.af-more, .af-clear { margin-left: .4rem; border: 0; background: transparent; color: #44546F; font-size: .78rem; font-weight: 600; padding: .15rem .4rem; border-radius: 4px; cursor: pointer; }
.af-more { width: 32px; height: 32px; border-radius: 50%; background: #DCDFE4; margin-left: -8px; border: 2px solid var(--tf-surface, #fff); padding: 0; box-sizing: border-box; }
.af-more:hover, .af-clear:hover { background: #CFD3D9; }
.af-avatar.af-locked { cursor: default; }
.af-avatar.af-locked:hover { transform: none; }
.af-strip .af-avatar.af-off { opacity: .35; filter: grayscale(.6); cursor: not-allowed; }
.af-strip .af-avatar.af-off:hover { transform: none; }

/* The "+N" list: everyone, with a search box and a tick on the people picked (Scripts/avatar-filter.js). */
.af-menu { position: fixed; z-index: 1080; width: 280px; max-height: 340px; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; background: #fff; border: 1px solid #DFE1E6; border-radius: 8px; box-shadow: 0 8px 24px rgba(9,30,66,.25); padding: .4rem; }
.af-menu .af-search { box-sizing: border-box; width: 100%; border: 1px solid #DFE1E6; border-radius: 6px; padding: .3rem .5rem; font-size: .85rem; margin-bottom: .3rem; outline: 0; }
.af-menu .af-search:focus { border-color: #388BFF; box-shadow: 0 0 0 1px #388BFF; }
.af-item { display: flex; align-items: center; gap: .6rem; width: 100%; border: 0; background: transparent; padding: .3rem .4rem; border-radius: 6px; text-align: left; font-size: .85rem; color: #172B4D; cursor: pointer; }
.af-item:hover { background: #F1F2F4; }
.af-item.af-on { background: #E9F2FF; }
.af-item .af-dot { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: .65rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; text-transform: uppercase; }
.af-item .af-check { margin-left: auto; color: #0C66E4; visibility: hidden; }
.af-item.af-on .af-check { visibility: visible; }
.af-item.af-off { opacity: .45; cursor: not-allowed; }
.af-item.af-off:hover { background: transparent; }

/* the "+N" list with checkboxes (tick several people, then Apply) */
.af-menu { display: flex; flex-direction: column; overflow: visible; max-height: none; }
.af-menu-list { overflow-y: auto; overflow-x: hidden; max-height: 260px; }
.af-item input.af-pick { width: 16px; height: 16px; flex: none; margin: 0; cursor: pointer; accent-color: #0C66E4; }
.af-item.af-off input.af-pick { cursor: not-allowed; }
.af-menu-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; border-top: 1px solid #DFE1E6; margin-top: .35rem; padding-top: .4rem; }
.af-menu-foot .af-untick { border: 0; background: transparent; color: #44546F; font-size: .8rem; font-weight: 600; padding: .2rem .4rem; border-radius: 4px; cursor: pointer; }
.af-menu-foot .af-untick:hover { background: #F1F2F4; }
.af-menu-foot .af-apply { border: 0; background: #0C66E4; color: #fff; font-size: .8rem; font-weight: 600; padding: .3rem .8rem; border-radius: 4px; cursor: pointer; }
.af-menu-foot .af-apply:hover { background: #0055CC; }