/* KMSS Online Support - theme layer over Bootstrap 5.3 + DataTables 2.
   Indigo accent on slate neutrals (light theme only).
----------------------------------------------------------------------------------------------------*/

:root {
  --app-bg: #f6f7fb;
  --app-surface: #ffffff;
  --app-surface-2: #f8fafc;
  --app-border: #e5e7eb;
  --app-text: #0f172a;
  --app-muted: #64748b;
  --app-accent: #4f46e5;
  --app-accent-hover: #4338ca;
  --app-accent-soft: #eef2ff;
  --app-accent-rgb: 79, 70, 229;
  --app-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px -6px rgba(15, 23, 42, .08);

  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-secondary-color: var(--app-muted);
  --bs-border-color: var(--app-border);
  --bs-primary: var(--app-accent);
  --bs-primary-rgb: var(--app-accent-rgb);
  --bs-link-color: var(--app-accent);
  --bs-link-color-rgb: var(--app-accent-rgb);
  --bs-link-hover-color: var(--app-accent-hover);
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-focus-ring-color: rgba(var(--app-accent-rgb), .25);
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--app-bg);
  color: var(--app-text);
  -webkit-font-smoothing: antialiased;
}

.min-w-0 { min-width: 0; }

/* Bootstrap component tweaks ---------------------------------------------------------------------*/

.btn { font-weight: 500; border-radius: .5rem; }

.btn-primary {
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent-hover);
  --bs-btn-hover-border-color: var(--app-accent-hover);
  --bs-btn-active-bg: var(--app-accent-hover);
  --bs-btn-active-border-color: var(--app-accent-hover);
  --bs-btn-disabled-bg: var(--app-accent);
  --bs-btn-disabled-border-color: var(--app-accent);
  --bs-btn-focus-shadow-rgb: var(--app-accent-rgb);
  box-shadow: 0 1px 2px rgba(var(--app-accent-rgb), .25);
}
.btn-light { --bs-btn-bg: var(--app-surface); --bs-btn-hover-bg: var(--app-surface-2); --bs-btn-color: var(--app-text); --bs-btn-hover-color: var(--app-text); }
.btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  color: var(--app-muted);
  background: transparent;
}
.btn-icon:hover, .btn-icon:focus-visible { background: var(--app-surface-2); color: var(--app-text); }
.btn-icon.btn-sm { width: 1.9rem; height: 1.9rem; }

.btn-segment {
  --bs-btn-color: var(--app-muted);
  --bs-btn-border-color: var(--app-border);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--app-surface-2);
  --bs-btn-hover-border-color: var(--app-border);
  --bs-btn-active-color: var(--app-accent);
  --bs-btn-active-bg: var(--app-accent-soft);
  --bs-btn-active-border-color: var(--app-border);
}
.btn-check:checked + .btn-segment { color: var(--app-accent); background: var(--app-accent-soft); border-color: var(--app-border); font-weight: 600; }

.btn-filters { --bs-btn-color: var(--app-text); --bs-btn-border-color: var(--app-border); --bs-btn-hover-bg: var(--app-surface-2); --bs-btn-hover-color: var(--app-text); --bs-btn-hover-border-color: var(--app-border); --bs-btn-active-bg: var(--app-accent-soft); --bs-btn-active-color: var(--app-accent); }

.form-control, .form-select { border-color: var(--app-border); background-color: var(--app-surface); }
.form-control:focus, .form-select:focus { border-color: var(--app-accent); box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .2); background-color: var(--app-surface); }
.form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }
.form-check-input:focus { border-color: var(--app-accent); box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .2); }
.form-label { font-size: .8125rem; font-weight: 600; color: var(--app-text); margin-bottom: .35rem; }
.input-group-text { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-muted); font-size: .8rem; }

.text-bg-primary { background-color: var(--app-accent) !important; color: #fff !important; }
.modal-content, .offcanvas, .dropdown-menu {
  --bs-modal-bg: var(--app-surface);
  --bs-offcanvas-bg: var(--app-surface);
  --bs-dropdown-bg: var(--app-surface);
  --bs-dropdown-border-color: var(--app-border);
  --bs-dropdown-link-active-bg: var(--app-accent);
  border-color: var(--app-border);
}
.modal-content { border-radius: 1rem; box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .25); }
.modal-header, .modal-footer { border-color: var(--app-border); }
.modal-header { align-items: flex-start; }
.modal-footer { background: var(--app-surface-2); }


/* Login -------------------------------------------------------------------------------------------*/
/* Layout after Webpixels' "Login and Register Page": split-colour backdrop, one large rounded card,
   a pale showcase panel on the left and the form on its own soft panel on the right. */

:root { --login-backdrop: #e4e9f4; --login-pale: #f5f8fc; --login-card: #ffffff; --login-split: var(--app-accent); }
.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  background: linear-gradient(90deg, var(--login-split) 0 50%, var(--login-backdrop) 50% 100%);
}
.login.d-none { display: none !important; }

.login-card {
  width: 100%;
  max-width: 1320px;
  min-height: min(760px, calc(100vh - 8rem));
  display: flex;
  background: var(--login-card);
  border-radius: 2rem;
  box-shadow: 0 40px 80px -30px rgba(15, 23, 42, .35);
  overflow: hidden;
}

/* Showcase (left) */
.login-showcase {
  flex: 1 1 50%;
  flex-direction: column;
  padding: 2.75rem 3rem 3rem;
  background: var(--login-pale);
  position: relative;
  overflow: hidden;
}

/* kmss-spocs.png is 300x300 with transparent padding; the artwork sits at x79-229, y97-208.
   Negative margins crop to it (scale 1.2 -> 181x135 visible), centred above the illustration. */
.login-brand { display: block; width: 360px; height: 360px; margin: -116px -84px -109px -95px; position: relative; z-index: 2; align-self: center; }

.showcase-art { position: relative; flex: 1; display: grid; place-items: center; margin: 1rem 0; min-height: 360px; }
.showcase-ring { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--app-accent) 4%, transparent); }
.showcase-ring-1 { width: 620px; height: 620px; }
.showcase-ring-2 { width: 460px; height: 460px; background: color-mix(in srgb, var(--app-accent) 5%, transparent); }
.showcase-disc {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--app-accent);
}

.showcase-frame {
  position: relative;
  padding: 1.1rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .45);
  backdrop-filter: blur(4px);
}
.showcase-panel {
  width: 430px;
  padding: 1.25rem 1.4rem;
  border-radius: 1rem;
  background: var(--app-surface);
  box-shadow: 0 24px 48px -20px rgba(15, 23, 42, .3);
}
.showcase-heading { font-weight: 700; font-size: 1rem; }
.showcase-link { font-size: .75rem; font-weight: 600; color: var(--app-accent); }
.showcase-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: .9rem; align-items: center; }
.showcase-donut-wrap { display: grid; justify-items: center; gap: .9rem; }
.showcase-donut {
  position: relative;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 600;
}
.showcase-donut::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--app-accent) 0 30%, #f472b6 30% 62%, #94a3b8 62% 100%);
  -webkit-mask: radial-gradient(circle, transparent 36px, #000 37px);
          mask: radial-gradient(circle, transparent 36px, #000 37px);
}
.showcase-tags { display: flex; gap: .3rem; }
.showcase-tags .pill { font-size: .65rem; padding: .1rem .45rem; }
.showcase-stat {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  padding: .8rem .9rem;
  border: 1px solid var(--app-border);
  border-radius: .8rem;
}
.showcase-stat-label { font-size: .72rem; font-weight: 600; color: var(--app-muted); }
.showcase-stat-value { font-size: 1.25rem; font-weight: 600; margin-top: .1rem; }
.showcase-stat-note { margin-top: .35rem; }
.showcase-stat-note .pill { font-size: .65rem; padding: .05rem .4rem; }
.showcase-stat-icon { width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.icon-violet { background: linear-gradient(135deg, #818cf8, #6366f1); }
.icon-pink { background: linear-gradient(135deg, #f9a8d4, #f472b6); }

.showcase-caption { position: relative; z-index: 2; text-align: center; }
.showcase-caption p {
  max-width: 28rem;
  min-height: 3.2em;
  margin: 0 auto 1.4rem;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.55;
  color: color-mix(in srgb, var(--app-text) 80%, transparent);
  text-wrap: balance;
  transition: opacity .25s ease;
}
.showcase-caption p.is-fading { opacity: 0; }
.showcase-dots { display: flex; justify-content: center; gap: .75rem; }
.showcase-dots button {
  width: 5.5rem;
  height: .3rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-muted) 35%, transparent);
  transition: background .25s ease;
}
.showcase-dots button.active { background: var(--app-accent); }
.showcase-dots button:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 3px; }

/* Form (right) */
.login-side {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem 1.5rem;
}
.login-form-panel {
  width: 100%;
  max-width: 26rem;
  padding: 2.75rem 2.5rem 2.25rem;
  border-radius: 1.25rem;
  background: var(--login-pale);
}
.login-heading { font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; text-align: center; margin-bottom: .35rem; }
.login-sub { text-align: center; color: var(--app-muted); margin-bottom: 2.25rem; }
.login-form-panel .form-label { font-weight: 500; font-size: .875rem; }
.login-input { height: 3rem; background: var(--app-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.login-submit { height: 3rem; font-weight: 600; }

.login-divider { display: flex; align-items: center; gap: .75rem; margin: 1.75rem 0 .75rem; color: var(--app-muted); font-size: .75rem; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--app-border); }
.login-help { text-align: center; font-size: .8rem; color: var(--app-muted); margin: 0; }
.login-contact { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.25rem; font-size: .85rem; }
.login-contact li { display: inline-flex; align-items: center; gap: .4rem; }
.login-contact i { color: var(--app-accent); }
.login-contact a { color: var(--app-text); font-weight: 500; text-decoration: none; }
.login-contact a:hover, .login-contact a:focus-visible { color: var(--app-accent); text-decoration: underline; }
.login-copy { margin: 1.5rem 0 0; font-size: .75rem; color: var(--app-muted); }

/* Logo above the form when the showcase is hidden: same artwork crop at 0.643 scale (97x72 visible). */
.login-logo { display: block; width: 193px; height: 193px; margin: -62px auto -40px; position: relative; left: 3px; }

.btn-reveal { position: absolute; top: .375rem; right: .4rem; height: 2.25rem; color: var(--app-muted); z-index: 5; }

/* Laptop-height screens: keep the whole card in view. */
@media (min-width: 992px) and (max-height: 880px) {
  .login { padding-block: 1.25rem; }
  .login-card { min-height: 0; }
  .login-showcase { padding-block: 1.75rem 2rem; }
  .showcase-art { min-height: 0; margin: .5rem 0 1rem; }
  .showcase-caption p { margin-bottom: 1rem; }
  .login-side { padding-block: 1.75rem 1.25rem; }
  .login-form-panel { padding-block: 2rem 1.75rem; }
  .login-sub { margin-bottom: 1.5rem; }
}

@media (max-width: 1199.98px) {
  .showcase-panel { width: 380px; }
  .showcase-ring-1 { width: 520px; height: 520px; }
}
@media (max-width: 991.98px) {
  .login { background: var(--login-backdrop); }
  .login-card { min-height: 0; max-width: 32rem; border-radius: 1.5rem; }
  .login-side { padding: 1.75rem 1rem 1rem; }
  .login-form-panel { padding: 1.75rem 1.25rem 1.25rem; background: transparent; }
  .login-sub { margin-bottom: 1.5rem; }
}

/* App bar -----------------------------------------------------------------------------------------*/

.appbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  padding: .6rem 0;
  background: color-mix(in srgb, var(--app-surface) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--app-border);
}

.appbar-logo { height: 34px; width: auto; display: block; }

.btn-user { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .25rem; border-radius: 999px; color: var(--app-text); font-size: .875rem; }
.btn-user:hover, .btn-user.show { background: var(--app-surface-2); color: var(--app-text); }

.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--app-accent);
  background: var(--app-accent-soft);
}
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: .7rem; }

/* Surfaces and toolbar -----------------------------------------------------------------------------*/

.surface {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: .875rem;
  box-shadow: var(--app-shadow);
}


/* Issues summary: stacked bar of issues per progress stage ----------------------------------------*/

.issue-summary { position: relative; flex: 1 1 22rem; max-width: 36rem; min-width: 0; }
@media (max-width: 991.98px) { .issue-summary { flex-basis: 100%; max-width: none; } }

.summary-head { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .35rem; }
.summary-total { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.summary-caption { font-size: .8125rem; color: var(--app-muted); }

/* Segments are 10px bars inside an 18px hit area; the 2px flex gap shows the page surface between them. */
.summary-bar { display: flex; gap: 2px; height: 18px; transition: opacity .2s; }
.summary-bar.is-loading { opacity: .45; }
.summary-bar.is-empty { background: linear-gradient(var(--app-border), var(--app-border)) center / 100% 10px no-repeat; border-radius: 4px; }
.summary-seg {
  flex: 1 1 0;
  min-width: 4px;
  padding-block: 4px;
  background: var(--c) content-box;
  cursor: default;
  outline: none;
}
.summary-seg:first-child { border-radius: 4px 0 0 4px; }
.summary-seg:last-child { border-radius: 0 4px 4px 0; }
.summary-seg:only-child { border-radius: 4px; }
.summary-seg:first-child, .summary-seg:last-child { background-clip: content-box; }
.summary-bar:hover .summary-seg:not(:hover), .summary-bar:focus-within .summary-seg:not(:focus) { opacity: .45; }
.summary-seg:focus-visible { box-shadow: inset 0 0 0 2px var(--app-accent); border-radius: 4px; }

.summary-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .45rem 0 0; padding: 0; font-size: .75rem; color: var(--app-muted); }
.summary-legend li { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.summary-swatch { width: .6rem; height: .6rem; border-radius: 2px; background: var(--c); flex-shrink: 0; }
.summary-count { color: var(--app-text); font-weight: 600; }

.summary-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, calc(-100% - 6px));
  padding: .3rem .55rem;
  border-radius: .4rem;
  background: var(--app-text);
  color: #fff;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}

/* Grid toolbar + column filters ------------------------------------------------------------------*/

.grid-toolbar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--app-border); }

#tblIssues > thead > tr.filter-row > th {
  padding-top: 0;
  padding-bottom: .65rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  cursor: default;
}
#tblIssues > thead > tr:first-child > th { border-bottom: 0; }
.filter-row .form-control, .filter-row .form-select { min-width: 5.5rem; font-size: .8rem; }
.filter-row [data-label="Subject"] .form-control { min-width: 12rem; }
.filter-row [data-label="Progress"] .form-select, .filter-row [data-label="Type"] .form-select { min-width: 8rem; }

.date-range-btn { min-width: 8.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-muted); font-size: .8rem; }
.date-range-btn.is-set { color: var(--app-accent); font-weight: 600; }
.date-range-menu { min-width: 15rem; }

/* Checkbox dropdowns (Progress, Type) */
.ms-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-muted); font-size: .8rem; }
.ms-btn.is-set { color: var(--app-accent); font-weight: 600; border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-border)); }
.ms-menu { min-width: 14rem; max-height: 22rem; overflow-y: auto; font-size: .875rem; }
.ms-option { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.ms-option .form-check-input { margin: 0; flex-shrink: 0; }
.ms-option:active { background: var(--app-accent-soft); color: var(--app-text); }
.mobile-filter-host .ms-btn { width: 100%; }
.date-range-menu .form-label { font-size: .75rem; }
.filter-row .form-control:not(:placeholder-shown), .filter-row .form-select:has(option:checked:not([value=""])) { border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-border)); }

/* Phone filter sheet: the moved .col-filter blocks get their label from data-label. */
.filters-sheet { --bs-offcanvas-height: auto; max-height: 85vh; border-radius: 1rem 1rem 0 0; }
.mobile-filter-host { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: .9rem 1.25rem; }
.mobile-filter-host .col-filter::before { content: attr(data-label); display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .35rem; }
.mobile-filter-host .form-control, .mobile-filter-host .form-select { font-size: .9rem; }
.mobile-filter-host .date-range-btn { width: 100%; }
.filters-sheet-footer { display: flex; gap: .5rem; padding: .75rem 1rem 1rem; border-top: 1px solid var(--app-border); }


/* DataTables -------------------------------------------------------------------------------------*/

#tblIssues { font-size: .875rem; --bs-table-bg: var(--app-surface); --bs-table-hover-bg: var(--app-surface-2); --bs-table-color: var(--app-text); --bs-table-hover-color: var(--app-text); --bs-table-border-color: var(--app-border); }
#tblIssues > thead > tr > th {
  background: var(--app-surface-2);
  color: var(--app-muted);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom-width: 1px;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
#tblIssues > tbody > tr > td { padding-top: .7rem; padding-bottom: .7rem; }
#tblIssues > tbody > tr { cursor: pointer; }
#tblIssues > tbody > tr:last-child > td { border-bottom: 0; }
#tblIssues th:first-child, #tblIssues td:first-child { padding-left: 1.25rem; }
#tblIssues th:last-child, #tblIssues td:last-child { padding-right: 1.25rem; }

/* The Bootstrap 5 integration renders each layout row as ".row mt-2" (not .dt-layout-row). */
#tblIssues_wrapper > .row { margin: 0 !important; }
#tblIssues_wrapper table.dataTable { margin: 0 !important; }
#tblIssues_wrapper > .dt-layout-table > div { overflow-x: auto; padding: 0; }
#tblIssues_wrapper > .row:last-child:not(.dt-layout-table) {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface);
  font-size: .8125rem;
  color: var(--app-muted);
  align-items: center;
  row-gap: .5rem;
}
#tblIssues_wrapper > .row:last-child > div { padding: 0; }
.dt-container .dt-info { padding-top: 0 !important; }
.dt-container .dt-length { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1.25rem; }
.dt-container .dt-length select { width: auto; display: inline-block; }
.dt-container .dt-paging .pagination { margin: 0; --bs-pagination-color: var(--app-text); --bs-pagination-bg: var(--app-surface); --bs-pagination-border-color: var(--app-border); --bs-pagination-hover-bg: var(--app-surface-2); --bs-pagination-hover-color: var(--app-text); --bs-pagination-hover-border-color: var(--app-border); --bs-pagination-active-bg: var(--app-accent); --bs-pagination-active-border-color: var(--app-accent); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .2); --bs-pagination-disabled-bg: var(--app-surface); --bs-pagination-disabled-color: var(--app-muted); --bs-pagination-disabled-border-color: var(--app-border); --bs-pagination-font-size: .8125rem; }
.dt-container .dt-paging .page-link { min-width: 2rem; text-align: center; }
/* Sort arrows in the accent colour */
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover { outline: none; color: var(--app-text); }
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after { color: var(--app-accent); opacity: 1; }

div.dt-container div.dt-processing {
  z-index: 3;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  width: auto;
  padding: .6rem 1rem !important;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  box-shadow: var(--app-shadow);
  font-size: .8125rem;
  color: var(--app-muted);
}
div.dt-container div.dt-processing > div:last-child { display: none; }

/* Issue column: just wide enough for a 5-digit number (width: 1% stops the table spreading spare space into it). */
#tblIssues th.cell-id, #tblIssues td.cell-id { text-align: left; width: 1%; white-space: nowrap; }
.filter-row [data-label="Issue"] .form-control { min-width: 0; width: 4.5rem; }
.cell-id { font-weight: 600; color: var(--app-muted); font-variant-numeric: tabular-nums; }
.cell-subject { font-weight: 500; min-width: 14rem; }
.cell-date { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--app-muted); }
.row-chevron { color: var(--app-muted); transition: transform .15s ease, color .15s ease; }
#tblIssues tbody tr:hover .row-chevron { color: var(--app-accent); transform: translateX(2px); }

/* Phone rows: two-line summary cell (see mobileSummaryHtml in app.js). */
#tblIssues td.cell-mobile { width: 100%; max-width: 0; padding-left: 1rem; }
.m-line1 { display: flex; align-items: baseline; gap: .5rem; min-width: 0; margin-bottom: .35rem; }
.m-id { flex-shrink: 0; font-weight: 600; color: var(--app-muted); font-variant-numeric: tabular-nums; }
.m-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-line2 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .78rem; color: var(--app-muted); }
.m-meta { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.m-meta .pill { padding: 0 .45rem; font-size: .72rem; }
.m-meta .cell-date { color: inherit; }

@media (max-width: 767.98px) {
  #tblIssues > thead { display: none; }
  #tblIssues td:last-child { padding-right: .85rem; padding-left: 0; width: 1%; }
}

.empty-state { padding: 3rem 1rem; text-align: center; color: var(--app-muted); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* Status badges: soft tint + coloured dot, readable in both modes -----------------------------------*/

.pill {
  --c: #64748b;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c) 78%, var(--app-text));
  background: color-mix(in srgb, var(--c) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
}
.pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--c); }
.pill-nodot::before { display: none; }

.pill-blue    { --c: #3b82f6; }
.pill-slate   { --c: #64748b; }
.pill-amber   { --c: #f59e0b; }
.pill-green   { --c: #10b981; }
.pill-red     { --c: #ef4444; }
.pill-violet  { --c: #8b5cf6; }
.pill-yellow  { --c: #eab308; }
.pill-teal    { --c: #14b8a6; }
.pill-pink    { --c: #ec4899; }
.pill-indigo  { --c: #6366f1; }
.pill-cyan    { --c: #06b6d4; }
.pill-orange  { --c: #f97316; }

.attach-chip { display: inline-flex; align-items: center; gap: .25rem; color: var(--app-muted); font-size: .8rem; font-weight: 500; }

/* Rich text editor ---------------------------------------------------------------------------------*/

.editor { border: 1px solid var(--app-border); border-radius: .5rem; background: var(--app-surface); transition: border-color .15s, box-shadow .15s; }
.editor:focus-within { border-color: var(--app-accent); box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .2); }
.editor.is-invalid { border-color: var(--bs-form-invalid-border-color); }
.editor.is-invalid + .invalid-feedback { display: block; }
.editor-toolbar { display: flex; align-items: center; gap: .125rem; padding: .3rem .4rem; border-bottom: 1px solid var(--app-border); background: var(--app-surface-2); border-radius: .5rem .5rem 0 0; }
.editor-sep { width: 1px; height: 1.1rem; background: var(--app-border); margin: 0 .3rem; }
.editor-area { min-height: 11rem; max-height: 22rem; overflow-y: auto; padding: .75rem .9rem; outline: none; font-size: .9rem; }
.editor-area:empty::before { content: attr(data-placeholder); color: var(--app-muted); pointer-events: none; }

/* Dropzone + file lists ----------------------------------------------------------------------------*/

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: 1.25rem;
  border: 1.5px dashed var(--app-border);
  border-radius: .75rem;
  background: var(--app-surface-2);
  color: var(--app-muted);
  text-align: center;
  font-size: .875rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone > i { font-size: 1.6rem; color: var(--app-accent); }
.dropzone strong { color: var(--app-accent); font-weight: 600; }
.dropzone small { font-size: .75rem; }
.dropzone:hover, .dropzone.is-dragover { border-color: var(--app-accent); background: var(--app-accent-soft); }
.dropzone-sm { flex-direction: row; justify-content: center; gap: .5rem; padding: .7rem; }
.dropzone-sm > i { font-size: 1.1rem; }

.file-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .4rem; }
.file-list:empty { display: none; }
.file-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--app-border); border-radius: .6rem; background: var(--app-surface); font-size: .85rem; }
.file-icon { width: 2rem; height: 2rem; border-radius: .45rem; display: grid; place-items: center; flex-shrink: 0; background: var(--app-accent-soft); color: var(--app-accent); }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file-size { flex-shrink: 0; font-size: .75rem; color: var(--app-muted); font-variant-numeric: tabular-nums; }

/* Downloadable attachments in the issue details */
.file-download { width: 100%; text-align: left; color: var(--app-text); cursor: pointer; transition: border-color .15s, background .15s; }
.file-download:hover, .file-download:focus-visible { border-color: var(--app-accent); background: var(--app-accent-soft); outline: none; }
.file-download .file-action { flex-shrink: 0; color: var(--app-muted); }
.file-download:hover .file-action, .file-download:focus-visible .file-action { color: var(--app-accent); }
.file-download.is-busy { opacity: .6; cursor: progress; }
.file-list + .btn { margin-top: .6rem; }

/* Issue details panel ------------------------------------------------------------------------------*/

.details-panel { --bs-offcanvas-width: min(720px, 100vw); }
.details-panel .offcanvas-header { border-bottom: 1px solid var(--app-border); padding: 1rem 1.25rem; }
.details-panel .offcanvas-body { padding: 1.25rem; }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 40%), 1fr));
  gap: .75rem;
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: .75rem;
  background: var(--app-surface-2);
}
.meta-grid dt { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); margin-bottom: .2rem; }
.meta-grid dd { margin: 0; font-size: .875rem; font-weight: 500; word-break: break-word; }

.section-title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--app-muted); margin: 1.5rem 0 .75rem; display: flex; align-items: center; }

.report { font-size: .9rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; padding: 1rem; border-radius: .75rem; border: 1px solid var(--app-border); }
.report.is-html { white-space: normal; }
.report :last-child { margin-bottom: 0; }

.status-banner { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .75rem; margin-bottom: 1rem; font-size: .875rem; }
.status-banner i { font-size: 1.2rem; }
.status-closed { background: color-mix(in srgb, #64748b 12%, transparent); border: 1px solid color-mix(in srgb, #64748b 25%, transparent); }

.timeline { list-style: none; padding: 0; margin: 0 0 1rem; position: relative; }
.timeline::before { content: ""; position: absolute; left: .875rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--app-border); }
.timeline:empty::before { display: none; }
.timeline-item { position: relative; display: flex; gap: .75rem; padding-bottom: 1rem; }
.timeline-item .avatar { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--app-surface); }
.timeline-body { flex: 1; min-width: 0; border: 1px solid var(--app-border); border-radius: .75rem; padding: .6rem .85rem; background: var(--app-surface); }
.timeline-meta { font-size: .78rem; color: var(--app-muted); margin-bottom: .2rem; }
.timeline-meta strong { color: var(--app-text); font-weight: 600; }
.timeline-text { font-size: .875rem; white-space: pre-wrap; word-break: break-word; }
.timeline-empty { font-size: .875rem; color: var(--app-muted); padding: .25rem 0 1rem; }

.composer { border: 1px solid var(--app-border); border-radius: .75rem; background: var(--app-surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: var(--app-accent); box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .2); }
.composer textarea { resize: vertical; background: transparent; }
.composer-actions { display: flex; align-items: center; padding: .5rem .6rem; border-top: 1px solid var(--app-border); background: var(--app-surface-2); }

/* Toasts ------------------------------------------------------------------------------------------*/

.toast-container { z-index: 1100; }
.app-toast { --bs-toast-bg: var(--app-surface); --bs-toast-border-color: var(--app-border); border-radius: .75rem; box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .35); }
.app-toast .toast-body { display: flex; gap: .65rem; align-items: flex-start; font-size: .875rem; }
.app-toast .toast-body > i { font-size: 1.1rem; line-height: 1.2; }
.app-toast.is-error .toast-body > i { color: #ef4444; }
.app-toast.is-success .toast-body > i { color: #10b981; }
.app-toast.is-warning .toast-body > i { color: #f59e0b; }

/* Start-up overlay --------------------------------------------------------------------------------*/

.wait-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--app-bg); }
.wait-overlay.d-none { display: none !important; }

@media (max-width: 575.98px) {
  .details-panel .offcanvas-body { padding: 1rem; }
}