/* Task Management — redesigned layout (matches task-management.html mockup) */
.tm-page {
  --tm-ink: #0a0e14;
  --tm-blue: #1470c0;
  --tm-blue-deep: #0858a8;
  --tm-blue-br: #2888d8;
  --tm-sky: #dbeaf7;
  --tm-mist: #eef4fb;
  --tm-paper: #f6f9fc;
  --tm-line: rgba(10, 14, 20, 0.10);
  --tm-line-2: rgba(10, 14, 20, 0.18);
  --tm-txt: #1c2430;
  --tm-txt-2: #586274;
  --tm-txt-3: #9aa4b4;
  --tm-green: #1a7f4b;
  --tm-green-soft: #e4f3ec;
  --tm-amber: #c47f1a;
  --tm-amber-soft: #fdf4e3;
  --tm-red: #c0392b;
  --tm-red-soft: #fbeae8;
  --tm-purple: #5e35b1;
  --tm-purple-soft: #ede7f6;
  color: var(--tm-txt);
  font-family: inherit;
  font-size: inherit;
  -webkit-font-smoothing: antialiased;
  margin: 0 -0.5rem;
  padding-bottom: 24px;
}

.tm-head {
  padding: 8px 22px 0;
}

.tm-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tm-head-row h1 {
  font-size: 20px;
  margin: 0;
  font-weight: inherit;
  color: inherit;
}

.tm-cnt {
  font-size: 12.5px;
  color: var(--tm-txt-3);
  background: var(--tm-paper);
  border: 0.5px solid var(--tm-line);
  border-radius: 20px;
  padding: 2px 9px;
}

.tm-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.tm-search {
  position: relative;
}

.tm-search input {
  width: 200px;
  height: 34px;
  border: 0.5px solid var(--tm-line-2);
  border-radius: 8px;
  padding: 0 11px 0 32px;
  font-size: 13px;
  background: var(--tm-paper);
  color: var(--tm-txt);
}

.tm-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--tm-txt-3);
}

.tm-daterange {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--tm-txt-2);
}

.tm-daterange .tm-di {
  height: 34px;
  min-width: 125px;
}

.tm-daterange .tm-di .e-input-group,
.tm-daterange .tm-di .e-control-wrapper {
  height: 34px !important;
  border-radius: 8px !important;
  border: 0.5px solid var(--tm-line-2) !important;
  background: #fff !important;
}

.tm-daterange .tm-di .e-input-group input {
  font-size: 12.5px !important;
  height: 32px !important;
}

.tm-tbtn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 0.5px solid var(--tm-line-2);
  background: #fff;
  color: var(--tm-txt-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tm-gobtn {
  width: auto;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  background: var(--tm-blue);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.tm-tbtn:hover {
  border-color: var(--tm-blue);
  color: var(--tm-blue);
}

.tm-gobtn:hover {
  background: var(--tm-blue-deep);
  color: #fff;
}

.tm-tbtn i {
  font-size: 16px;
}

.tm-addbtn {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--tm-blue);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tm-addbtn:hover {
  background: var(--tm-blue-deep);
}

.tm-addbtn i {
  font-size: 15px;
}

.tm-filters {
  display: flex;
  gap: 9px;
  padding: 16px 18px 14px;
  flex-wrap: wrap;
}

.tm-fstat {
  border: 0.5px solid var(--tm-line);
  border-radius: 11px;
  padding: 10px 14px;
  cursor: pointer;
  background: #fff;
  min-width: 104px;
  transition: 0.12s;
  user-select: none;
}

.tm-fstat:hover {
  border-color: var(--tm-line-2);
}

.tm-fstat.on {
  border-color: var(--tm-blue);
  box-shadow: 0 0 0 3px rgba(20, 112, 192, 0.1);
}

.tm-fstat .n {
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.tm-fstat .l {
  font-size: 11.5px;
  color: var(--tm-txt-2);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.tm-fstat .l i {
  font-size: 14px;
}

.tm-fstat.all.on {
  border-color: var(--tm-ink);
}

.tm-fstat.all .n {
  color: var(--tm-ink);
}

.tm-fstat.overdue {
  border-color: rgba(192, 57, 43, 0.25);
  background: linear-gradient(160deg, #fff, var(--tm-red-soft));
}

.tm-fstat.overdue .n {
  color: var(--tm-red);
}

.tm-fstat.overdue .l {
  color: var(--tm-red);
  font-weight: 600;
}

.tm-fstat.overdue.on {
  border-color: var(--tm-red);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.tm-fstat.prog .l i {
  color: var(--tm-blue);
}

.tm-fstat.done .l i {
  color: var(--tm-green);
}

.tm-fstat.wait .l i {
  color: var(--tm-purple);
}

.tm-fstat.defer .l i {
  color: var(--tm-amber);
}

.tm-fstat.notstarted .l i {
  color: var(--tm-txt-3);
}

.tm-tablewrap {
  padding: 0 22px 8px;
}

.tm-tablewrap .cleintlisttablecard {
  box-shadow: none;
  border: none;
  background: transparent;
}

.tm-tablewrap .e-grid {
  border: 0.5px solid var(--tm-line) !important;
  border-radius: 10px;
  overflow: hidden;
}

.tm-tablewrap .e-grid .e-gridheader,
.tm-tablewrap .e-grid .e-headercell {
  background: var(--tm-paper) !important;
}

.tm-tablewrap .e-grid .e-headercelldiv,
.tm-tablewrap .e-grid .e-headercell .e-headertext {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tm-txt-3) !important;
}

.tm-tablewrap .e-grid .e-rowcell {
  font-size: 13.5px;
  padding: 10px 12px !important;
  border-bottom: 0.5px solid var(--tm-line) !important;
  vertical-align: middle;
}

.tm-tablewrap .e-grid .e-altrow {
  background-color: #fff !important;
}

.tm-tablewrap .e-grid .e-row:hover .e-rowcell {
  background: var(--tm-paper) !important;
}

.tm-tablewrap .e-grid .e-groupcaption,
.tm-tablewrap .e-grid .e-recordplusexpand,
.tm-tablewrap .e-grid .e-indentcell,
.tm-tablewrap .e-grid td.e-groupcaptionrow {
  background: #f0f4f9 !important;
}

.tm-tablewrap .e-grid .e-groupcaption {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--tm-txt-2) !important;
  letter-spacing: 0.2px;
  padding: 7px 12px !important;
}

.tm-assignee {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tm-assignee .av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tm-ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.tm-assignee .muted {
  color: var(--tm-txt-3);
  font-size: 12.5px;
}

.tm-subject {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--tm-txt);
}

.tm-stage {
  font-size: 12.5px;
  color: var(--tm-txt-2);
}

.tm-prio {
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  padding: 2px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tm-prio .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.tm-prio.low {
  background: var(--tm-paper);
  color: var(--tm-txt-2);
  border: 0.5px solid var(--tm-line);
}

.tm-prio.low .dot {
  background: var(--tm-txt-3);
}

.tm-prio.med {
  background: var(--tm-amber-soft);
  color: var(--tm-amber);
}

.tm-prio.med .dot {
  background: var(--tm-amber);
}

.tm-prio.high {
  background: var(--tm-red-soft);
  color: var(--tm-red);
}

.tm-prio.high .dot {
  background: var(--tm-red);
}

.tm-statustag {
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 5px;
  padding: 2px 8px;
  display: inline-block;
  white-space: nowrap;
}

.tm-statustag.notstarted {
  background: var(--tm-paper);
  color: var(--tm-txt-3);
  border: 0.5px solid var(--tm-line);
}

.tm-statustag.prog {
  background: var(--tm-mist);
  color: var(--tm-blue);
}

.tm-statustag.done {
  background: var(--tm-green-soft);
  color: var(--tm-green);
}

.tm-statustag.wait {
  background: var(--tm-purple-soft);
  color: var(--tm-purple);
}

.tm-statustag.defer {
  background: var(--tm-amber-soft);
  color: var(--tm-amber);
}

.tm-due {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--tm-txt-2);
}

.tm-due.overdue {
  color: var(--tm-red);
  font-weight: 600;
}

.tm-due .odflag {
  font-size: 10px;
  font-weight: 700;
  background: var(--tm-red-soft);
  color: var(--tm-red);
  border-radius: 4px;
  padding: 1px 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tm-prog {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tm-prog .track {
  width: 56px;
  height: 6px;
  border-radius: 3px;
  background: #e8edf3;
  overflow: hidden;
}

.tm-prog .fill {
  height: 100%;
  border-radius: 3px;
  background: var(--tm-blue);
}

.tm-prog .fill.empty {
  background: var(--tm-line-2);
}

.tm-prog span {
  font-size: 12px;
  color: var(--tm-txt-2);
  min-width: 30px;
}

.tm-editbtn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 0.5px solid var(--tm-line-2);
  background: #fff;
  color: var(--tm-txt-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.tm-editbtn:hover {
  border-color: var(--tm-blue);
  color: var(--tm-blue);
}

.tm-groupref {
  color: var(--tm-blue-deep);
  font-weight: 700;
}

.tm-groupcount {
  color: var(--tm-txt-3);
  font-weight: 500;
  margin-left: 6px;
}

.tm-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 160px;
  color: var(--tm-txt-2);
  font-size: 14px;
}

/* Center edit dialog in the visible viewport */
.e-dialog.tm-edit-dialog.e-popup {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

.e-dialog.tm-edit-dialog .e-dlg-header,
.e-dialog.tm-edit-dialog .e-dlg-content,
.e-dialog.tm-edit-dialog label {
  font-size: 13.5px;
}

.e-dialog.tm-edit-dialog .e-dlg-header {
  font-size: 15px !important;
  font-weight: 600;
}

@media (max-width: 992px) {
  .tm-tools {
    margin-left: 0;
    width: 100%;
  }

  .tm-search input {
    width: 100%;
    min-width: 160px;
  }
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
.dark-mode .tm-page {
  --tm-ink: #e9ecef;
  --tm-blue: #4ea3e0;
  --tm-blue-deep: #6bb3e8;
  --tm-blue-br: #2888d8;
  --tm-sky: #1d3550;
  --tm-mist: #1d3550;
  --tm-paper: #2d3338;
  --tm-line: rgba(255, 255, 255, 0.10);
  --tm-line-2: rgba(255, 255, 255, 0.16);
  --tm-txt: #e9ecef;
  --tm-txt-2: #adb5bd;
  --tm-txt-3: #8a929a;
  --tm-green: #6bcf8e;
  --tm-green-soft: rgba(107, 207, 142, 0.16);
  --tm-amber: #e8a84c;
  --tm-amber-soft: rgba(232, 168, 76, 0.16);
  --tm-red: #e57373;
  --tm-red-soft: rgba(229, 115, 115, 0.16);
  --tm-purple: #b39ddb;
  --tm-purple-soft: rgba(179, 157, 219, 0.16);
  color: var(--tm-txt);
}

.dark-mode .tm-page .content-header h1,
.dark-mode .tm-page .tm-head-row h1 {
  color: #f8f9fa !important;
}

.dark-mode .tm-cnt {
  background: #2d3338;
  color: #adb5bd;
  border-color: rgba(255, 255, 255, 0.12);
}

.dark-mode .tm-search input {
  background: #1e2428 !important;
  color: #e9ecef !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.dark-mode .tm-search input::placeholder {
  color: #6c757d;
}

.dark-mode .tm-search i {
  color: #8a929a;
}

.dark-mode .tm-daterange {
  color: #adb5bd;
}

.dark-mode .tm-daterange .tm-di .e-input-group,
.dark-mode .tm-daterange .tm-di .e-control-wrapper {
  background: #1e2428 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.dark-mode .tm-daterange .tm-di .e-input-group input,
.dark-mode .tm-daterange .tm-di .e-input-group .e-input {
  background: transparent !important;
  color: #e9ecef !important;
}

.dark-mode .tm-tbtn {
  background: #2d3338 !important;
  color: #adb5bd !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.dark-mode .tm-tbtn:hover {
  border-color: var(--tm-blue) !important;
  color: var(--tm-blue) !important;
  background: #1d3550 !important;
}

.dark-mode .tm-fstat {
  background: #2d3338 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #e9ecef;
}

.dark-mode .tm-fstat:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: #343a40 !important;
}

.dark-mode .tm-fstat .n {
  color: #f8f9fa;
}

.dark-mode .tm-fstat .l {
  color: #adb5bd;
}

.dark-mode .tm-fstat.all .n {
  color: #f8f9fa;
}

.dark-mode .tm-fstat.all.on {
  border-color: #6bb3e8 !important;
  box-shadow: 0 0 0 3px rgba(78, 163, 224, 0.18);
}

.dark-mode .tm-fstat.on {
  border-color: var(--tm-blue) !important;
  box-shadow: 0 0 0 3px rgba(78, 163, 224, 0.18);
  background: #1d3550 !important;
}

.dark-mode .tm-fstat.overdue {
  background: linear-gradient(160deg, #2d3338, rgba(229, 115, 115, 0.14)) !important;
  border-color: rgba(229, 115, 115, 0.35) !important;
}

.dark-mode .tm-fstat.overdue .n,
.dark-mode .tm-fstat.overdue .l {
  color: #e57373 !important;
}

.dark-mode .tm-fstat.overdue.on {
  border-color: #e57373 !important;
  box-shadow: 0 0 0 3px rgba(229, 115, 115, 0.2);
}

/* Grid */
.dark-mode .tm-tablewrap .e-grid {
  background: #252b30 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #e9ecef !important;
}

.dark-mode .tm-tablewrap .e-grid .e-gridcontent,
.dark-mode .tm-tablewrap .e-grid .e-content,
.dark-mode .tm-tablewrap .e-grid .e-table {
  background: #252b30 !important;
}

.dark-mode .tm-tablewrap .e-grid .e-pager,
.dark-mode .tm-tablewrap .cleintlisttablecard .e-pager {
  background: #1e2428 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #adb5bd !important;
}

.dark-mode .tm-tablewrap .e-grid .e-pager .e-numericitem,
.dark-mode .tm-tablewrap .cleintlisttablecard .e-pager .e-numericitem {
  color: #ced4da !important;
  background: transparent !important;
}

.dark-mode .tm-tablewrap .e-grid .e-pager .e-currentitem,
.dark-mode .tm-tablewrap .cleintlisttablecard .e-pager .e-currentitem {
  background: #1d3550 !important;
  color: #fff !important;
  border-color: #4ea3e0 !important;
}

.dark-mode .tm-tablewrap .cleintlisttablecard {
  background: transparent !important;
  border: none !important;
}

.dark-mode .tm-tablewrap .e-grid .e-gridheader,
.dark-mode .tm-tablewrap .e-grid .e-headercell,
.dark-mode .tm-tablewrap .cleintlisttablecard .e-headercell {
  background: #1e2428 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .tm-tablewrap .e-grid .e-headercelldiv,
.dark-mode .tm-tablewrap .e-grid .e-headercell .e-headertext,
.dark-mode .tm-tablewrap .cleintlisttablecard .e-grid .e-headertext {
  color: #9aa4b4 !important;
}

.dark-mode .tm-tablewrap .e-grid .e-rowcell {
  background-color: #252b30 !important;
  color: #e9ecef !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

.dark-mode .tm-tablewrap .e-grid .e-altrow,
.dark-mode .tm-tablewrap .e-grid .e-altrow .e-rowcell {
  background-color: #2a3036 !important;
}

.dark-mode .tm-tablewrap .e-grid .e-row:hover .e-rowcell {
  background: #32383e !important;
}

.dark-mode .tm-tablewrap .e-grid .e-groupcaption,
.dark-mode .tm-tablewrap .e-grid .e-recordplusexpand,
.dark-mode .tm-tablewrap .e-grid .e-indentcell,
.dark-mode .tm-tablewrap .e-grid td.e-groupcaptionrow {
  background: #1d3550 !important;
  color: #ced4da !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .tm-tablewrap .e-grid .e-groupcaption {
  color: #ced4da !important;
}

.dark-mode .tm-groupref {
  color: #6bb3e8 !important;
}

.dark-mode .tm-groupcount {
  color: #8a929a !important;
}

.dark-mode .tm-subject {
  color: #f1f3f5 !important;
}

.dark-mode .tm-stage,
.dark-mode .tm-due {
  color: #adb5bd !important;
}

.dark-mode .tm-due.overdue {
  color: #e57373 !important;
}

.dark-mode .tm-prio.low,
.dark-mode .tm-statustag.notstarted {
  background: #343a40 !important;
  color: #adb5bd !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.dark-mode .tm-prio.med {
  background: rgba(232, 168, 76, 0.16) !important;
  color: #e8a84c !important;
}

.dark-mode .tm-prio.high {
  background: rgba(229, 115, 115, 0.16) !important;
  color: #e57373 !important;
}

.dark-mode .tm-statustag.prog {
  background: rgba(78, 163, 224, 0.16) !important;
  color: #6bb3e8 !important;
}

.dark-mode .tm-statustag.done {
  background: rgba(107, 207, 142, 0.16) !important;
  color: #6bcf8e !important;
}

.dark-mode .tm-statustag.wait {
  background: rgba(179, 157, 219, 0.16) !important;
  color: #b39ddb !important;
}

.dark-mode .tm-statustag.defer {
  background: rgba(232, 168, 76, 0.16) !important;
  color: #e8a84c !important;
}

.dark-mode .tm-due .odflag {
  background: rgba(229, 115, 115, 0.18) !important;
  color: #e57373 !important;
}

.dark-mode .tm-assignee .av {
  background: #4ea3e0 !important;
  color: #fff !important;
}

.dark-mode .tm-assignee .muted {
  color: #8a929a !important;
}

.dark-mode .tm-prog .track {
  background: #3a4148 !important;
}

.dark-mode .tm-prog span {
  color: #adb5bd !important;
}

.dark-mode .tm-editbtn {
  background: #2d3338 !important;
  color: #adb5bd !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.dark-mode .tm-editbtn:hover {
  border-color: var(--tm-blue) !important;
  color: var(--tm-blue) !important;
  background: #1d3550 !important;
}

.dark-mode .tm-loading {
  color: #adb5bd;
}

.dark-mode .e-dialog.tm-edit-dialog {
  background: #2d3338 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark-mode .e-dialog.tm-edit-dialog .e-dlg-header-content,
.dark-mode .e-dialog.tm-edit-dialog .e-dlg-content {
  background: #2d3338 !important;
  color: #e9ecef !important;
}

.dark-mode .e-dialog.tm-edit-dialog label {
  color: #adb5bd !important;
}