/* =========================================================================
   ProjectMU — Brand layer on top of MatDash (styles.css)
   Brand: White canvas + Deep Navy ("biru dongker"). Typeface: Poppins.
   Tone: professional & elegant — disciplined spacing, soft depth, hairlines.
   ========================================================================= */

:root {
  /* Navy scale ------------------------------------------------------------ */
  --pm-navy-900: #0E1A30;   /* sidebar base            */
  --pm-navy-800: #14213D;
  --pm-navy-700: #1B2C4F;
  --pm-navy-600: #21386A;   /* primary action          */
  --pm-navy-500: #2E4E8C;   /* hover / links           */
  --pm-navy-400: #5C77A8;

  /* Neutrals -------------------------------------------------------------- */
  --pm-ink:    #18233B;     /* headings                */
  --pm-body:   #586079;     /* body copy               */
  --pm-muted:  #8A93A8;     /* meta / captions         */
  --pm-line:   #E9EDF4;     /* hairline borders        */
  --pm-line-2: #F1F4F9;
  --pm-canvas: #F5F7FB;     /* app background          */
  --pm-white:  #FFFFFF;

  /* Functional status ----------------------------------------------------- */
  --pm-backlog: #64748B;
  --pm-todo:    #3B82F6;
  --pm-progress:#F59E0B;
  --pm-review:  #8B5CF6;
  --pm-done:    #10B981;
  --pm-danger:  #E5484D;

  /* Map Bootstrap / MatDash primary to navy ------------------------------- */
  --bs-primary: #21386A;
  --bs-primary-rgb: 33, 56, 106;
  --bs-link-color: #21386A;
  --bs-link-color-rgb: 33, 56, 106;
  --bs-link-hover-color: #2E4E8C;
  --bs-body-color: #586079;
  --bs-body-color-rgb: 88, 96, 121;
  --bs-body-bg: #F5F7FB;
  --bs-border-color: #E9EDF4;

  --pm-shadow-sm: 0 1px 2px rgba(20, 33, 61, .04), 0 1px 3px rgba(20, 33, 61, .06);
  --pm-shadow-md: 0 6px 24px rgba(20, 33, 61, .07);
  --pm-radius: 14px;
}

/* Typography -------------------------------------------------------------- */
html, body {
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  background: var(--pm-canvas) !important;
  color: var(--pm-body);
  letter-spacing: -0.1px;
}
h1,h2,h3,h4,h5,h6,.fw-semibold { font-family: 'Poppins', sans-serif; color: var(--pm-ink); }
h1,h2,h3,h4,h5,h6 { font-weight: 600; letter-spacing: -0.4px; }
.text-ink { color: var(--pm-ink) !important; }
.text-muted, .text-secondary { color: var(--pm-muted) !important; }
a { text-decoration: none; }

/* Bootstrap primary remap ------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--pm-navy-600);
  --bs-btn-border-color: var(--pm-navy-600);
  --bs-btn-hover-bg: var(--pm-navy-700);
  --bs-btn-hover-border-color: var(--pm-navy-700);
  --bs-btn-active-bg: var(--pm-navy-800);
  --bs-btn-active-border-color: var(--pm-navy-800);
  --bs-btn-disabled-bg: var(--pm-navy-400);
  --bs-btn-disabled-border-color: var(--pm-navy-400);
  box-shadow: 0 6px 16px rgba(33, 56, 106, .22);
  font-weight: 500;
}
.btn-outline-primary {
  --bs-btn-color: var(--pm-navy-600);
  --bs-btn-border-color: #D5DCEA;
  --bs-btn-hover-bg: var(--pm-navy-600);
  --bs-btn-hover-border-color: var(--pm-navy-600);
  --bs-btn-active-bg: var(--pm-navy-700);
  font-weight: 500;
}
.btn-light {
  --bs-btn-bg: #fff; --bs-btn-border-color: var(--pm-line);
  --bs-btn-hover-bg: #F3F6FB; --bs-btn-hover-border-color: #D5DCEA;
  color: var(--pm-ink);
}
.btn { border-radius: 10px; }
.text-primary { color: var(--pm-navy-600) !important; }
.bg-primary { background-color: var(--pm-navy-600) !important; }
.link-primary { color: var(--pm-navy-600) !important; }
.badge.text-bg-primary { background: var(--pm-navy-600) !important; }

/* App shell --------------------------------------------------------------- */
#pm-wrapper { display: flex; min-height: 100vh; }

.pm-sidebar {
  width: 264px; flex: 0 0 264px;
  background: var(--pm-navy-900);
  color: #C8D2E4;
  position: fixed; inset: 0 auto 0 0; z-index: 1040;
  display: flex; flex-direction: column;
  transition: transform .25s ease, width .2s ease, flex-basis .2s ease;
}
.pm-sidebar .pm-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 22px 18px;
}
.pm-brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: #fff;
  display: grid; place-items: center; overflow: hidden;
  font-weight: 700; font-size: 18px; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); padding: 4px;
}
.pm-brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pm-brand-name { color: #fff; font-weight: 600; font-size: 18px; line-height: 1; }
.pm-brand-name span { color: #7E96C4; }
.pm-brand-sub { color: #6E80A6; font-size: 11px; letter-spacing: .3px; }

.pm-nav { padding: 6px 14px 24px; overflow-y: auto; flex: 1 1 auto; }
.pm-nav .pm-section {
  color: #5A6C92; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.1px;
  padding: 18px 12px 8px;
}
.pm-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px;
  color: #BAC5DC; font-size: 14px; font-weight: 400;
  margin-bottom: 2px; position: relative;
  transition: background .15s, color .15s;
}
.pm-nav a iconify-icon { font-size: 19px; color: #8395BC; transition: color .15s; }
.pm-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.pm-nav a:hover iconify-icon { color: #C7D3EC; }
.pm-nav a.active { background: linear-gradient(90deg, rgba(46,78,140,.55), rgba(46,78,140,.15)); color: #fff; }
.pm-nav a.active iconify-icon { color: #fff; }
.pm-nav a.active::before {
  content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: #5C8BE6;
}
.pm-nav a .pm-badge {
  margin-left: auto; font-size: 10px; font-weight: 600;
  background: rgba(255,255,255,.1); color: #C7D3EC;
  padding: 1px 7px; border-radius: 20px;
}
.pm-nav a.soon { opacity: .55; }
.pm-nav a.soon .pm-badge { background: rgba(124,150,196,.18); color: #8FA3CC; }

.pm-side-foot { padding: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.pm-side-foot .pm-plan {
  background: rgba(46,78,140,.22); border: 1px solid rgba(92,139,230,.18);
  border-radius: 12px; padding: 13px 14px;
}
.pm-side-foot .pm-plan h6 { color: #fff; font-size: 13px; margin: 0 0 3px; }
.pm-side-foot .pm-plan p { color: #8FA3CC; font-size: 11.5px; margin: 0 0 10px; }

/* Main column ------------------------------------------------------------- */
.pm-main { margin-left: 264px; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; transition: margin-left .2s ease; }
.pm-topbar {
  height: 68px; background: rgba(255,255,255,.82); backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--pm-line);
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: 14px; padding: 0 26px;
}
.pm-burger { display: none; background: none; border: 0; color: var(--pm-ink); font-size: 22px; }
.pm-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--pm-canvas); border: 1px solid var(--pm-line);
  border-radius: 10px; padding: 8px 13px; min-width: 230px; color: var(--pm-muted);
}
.pm-search input { border: 0; background: none; outline: none; font-size: 13.5px; width: 100%; color: var(--pm-ink); }
.pm-search kbd { background: #fff; border: 1px solid var(--pm-line); border-radius: 5px; font-size: 10px; padding: 1px 5px; color: var(--pm-muted); }
.pm-top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pm-icon-btn {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--pm-line);
  background: #fff; color: var(--pm-body); display: grid; place-items: center;
  font-size: 19px; position: relative; transition: .15s;
}
.pm-icon-btn:hover { color: var(--pm-navy-600); border-color: #D5DCEA; }
.pm-icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--pm-danger); border: 2px solid #fff; }
.pm-avatar { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; }
.pm-prof { display: flex; align-items: center; gap: 10px; cursor: pointer; padding-left: 6px; }
.pm-prof .nm { font-size: 13.5px; font-weight: 600; color: var(--pm-ink); line-height: 1.1; }
.pm-prof .rl { font-size: 11.5px; color: var(--pm-muted); }

.pm-content { padding: 26px; flex: 1 1 auto; }
.pm-page-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.pm-page-head .crumb { font-size: 12px; color: var(--pm-muted); margin-bottom: 6px; }
.pm-page-head .crumb a { color: var(--pm-muted); }
.pm-page-head h1 { font-size: 23px; margin: 0; }
.pm-page-head .sub { color: var(--pm-body); font-size: 13.5px; margin-top: 4px; }
.pm-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Cards ------------------------------------------------------------------- */
.pm-card {
  background: #fff; border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius); box-shadow: var(--pm-shadow-sm);
}
.pm-card.pad, .pad { padding: 20px; }
.pm-card-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--pm-line-2); }
.pm-card-head h5 { margin: 0; font-size: 15px; }
.pm-card-head .sub { font-size: 12.5px; color: var(--pm-muted); }

/* Stat tiles -------------------------------------------------------------- */
.pm-stat { background: #fff; border: 1px solid var(--pm-line); border-radius: var(--pm-radius); padding: 18px 20px; box-shadow: var(--pm-shadow-sm); height: 100%; }
.pm-stat .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; }
.pm-stat .lbl { font-size: 12.5px; color: var(--pm-muted); font-weight: 500; }
.pm-stat .val { font-size: 28px; font-weight: 600; color: var(--pm-ink); line-height: 1.1; letter-spacing: -1px; }
.pm-stat .delta { font-size: 12px; font-weight: 500; }
.tone-navy   { background: rgba(33,56,106,.09);  color: var(--pm-navy-600); }
.tone-blue   { background: rgba(59,130,246,.10);  color: var(--pm-todo); }
.tone-amber  { background: rgba(245,158,11,.12);  color: var(--pm-progress); }
.tone-green  { background: rgba(16,185,129,.11);  color: var(--pm-done); }
.tone-violet { background: rgba(139,92,246,.11);  color: var(--pm-review); }
.tone-red    { background: rgba(229,72,77,.10);   color: var(--pm-danger); }
.up { color: var(--pm-done); } .down { color: var(--pm-danger); }

/* Status & priority chips ------------------------------------------------- */
.pm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: 20px; line-height: 1.4; }
.pm-chip .d { width: 7px; height: 7px; border-radius: 50%; }
.st-backlog  { background: rgba(100,116,139,.12); color: #51607a; } .st-backlog .d{background:var(--pm-backlog);}
.st-todo     { background: rgba(59,130,246,.12);  color: #2563eb; } .st-todo .d{background:var(--pm-todo);}
.st-progress { background: rgba(245,158,11,.14);  color: #b45309; } .st-progress .d{background:var(--pm-progress);}
.st-review   { background: rgba(139,92,246,.13);  color: #7c3aed; } .st-review .d{background:var(--pm-review);}
.st-done     { background: rgba(16,185,129,.13);  color: #059669; } .st-done .d{background:var(--pm-done);}
.pr-low    { color: #64748b; } .pr-medium { color: #2563eb; } .pr-high { color: #b45309; } .pr-urgent { color: var(--pm-danger); }
.pm-pri { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; }

/* Avatars stack ----------------------------------------------------------- */
.pm-ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.pm-ava-stack { display: inline-flex; }
.pm-ava-stack .pm-ava:not(:first-child) { margin-left: -9px; }
.pm-ava-txt { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; border: 2px solid #fff; box-sizing: border-box; }

/* Progress ---------------------------------------------------------------- */
.pm-prog { height: 7px; background: var(--pm-line); border-radius: 20px; overflow: hidden; }
.pm-prog > span { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg,#2E4E8C,#21386A); }

/* Tables ------------------------------------------------------------------ */
.pm-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pm-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--pm-muted); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--pm-line); background: #FBFCFE; text-align: left; }
.pm-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--pm-line-2); font-size: 13.5px; color: var(--pm-body); vertical-align: middle; }
.pm-table tbody tr:hover { background: #FAFBFE; }
.pm-table .t-title { font-weight: 500; color: var(--pm-ink); }

/* Kanban ------------------------------------------------------------------ */
.pm-board { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; }
.pm-col { flex: 0 0 300px; background: #F8FAFD; border: 1px solid var(--pm-line); border-radius: var(--pm-radius); display: flex; flex-direction: column; max-height: calc(100vh - 210px); }
.pm-col-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px 12px; }
.pm-col-head .nm { font-weight: 600; font-size: 13.5px; color: var(--pm-ink); }
.pm-col-head .ct { font-size: 11px; color: var(--pm-muted); background: #fff; border: 1px solid var(--pm-line); border-radius: 20px; padding: 0 8px; }
.pm-col-head .bar { width: 8px; height: 8px; border-radius: 50%; }
.pm-col-body { padding: 4px 12px 12px; overflow-y: auto; flex: 1 1 auto; }
.pm-task { background: #fff; border: 1px solid var(--pm-line); border-radius: 12px; padding: 13px 14px; margin-bottom: 10px; box-shadow: var(--pm-shadow-sm); cursor: grab; transition: box-shadow .15s, transform .05s; }
.pm-task:hover { box-shadow: var(--pm-shadow-md); }
.pm-task.dragging { opacity: .5; }
.pm-task .tag { font-size: 10.5px; font-weight: 600; letter-spacing: .3px; padding: 2px 8px; border-radius: 6px; }
.pm-task .ttl { font-size: 13.5px; font-weight: 500; color: var(--pm-ink); margin: 8px 0 9px; line-height: 1.35; }
.pm-task .meta { display: flex; align-items: center; gap: 12px; color: var(--pm-muted); font-size: 12px; }
.pm-task .meta .mi { display: inline-flex; align-items: center; gap: 4px; }
.pm-col-add { margin: 0 12px 12px; }
.pm-col-add button { width: 100%; border: 1px dashed #C9D3E4; background: transparent; color: var(--pm-navy-500); border-radius: 10px; padding: 9px; font-size: 13px; font-weight: 500; }
.pm-col-add button:hover { background: #fff; }
.tag-design{background:rgba(139,92,246,.12);color:#7c3aed;} .tag-dev{background:rgba(33,56,106,.1);color:#21386a;}
.tag-bug{background:rgba(229,72,77,.1);color:#c0383c;} .tag-research{background:rgba(16,185,129,.12);color:#059669;}
.tag-content{background:rgba(245,158,11,.14);color:#b45309;}

/* Gantt ------------------------------------------------------------------- */
.pm-gantt { overflow-x: auto; }
.pm-gantt-grid { min-width: 920px; }
.pm-gantt-row { display: grid; grid-template-columns: 240px 1fr; align-items: center; border-bottom: 1px solid var(--pm-line-2); }
.pm-gantt-row.head { border-bottom: 1px solid var(--pm-line); position: sticky; top: 0; background: #fff; z-index: 2; }
.pm-gantt-name { padding: 12px 16px; font-size: 13px; color: var(--pm-ink); font-weight: 500; }
.pm-gantt-name.sub { padding-left: 32px; font-weight: 400; color: var(--pm-body); font-size: 12.5px; }
.pm-gantt-track { position: relative; height: 46px; }
.pm-gantt-months { display: grid; }
.pm-gantt-months > div { font-size: 11px; color: var(--pm-muted); text-align: center; padding: 12px 0; border-left: 1px solid var(--pm-line-2); }
.pm-gantt-cells { position: absolute; inset: 0; display: grid; }
.pm-gantt-cells > div { border-left: 1px solid var(--pm-line-2); }
.pm-gantt-bar { position: absolute; top: 12px; height: 22px; border-radius: 7px; display: flex; align-items: center; padding: 0 9px; font-size: 11px; color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; box-shadow: var(--pm-shadow-sm); }
.pm-milestone { position: absolute; top: 10px; width: 16px; height: 16px; background: var(--pm-progress); transform: rotate(45deg); border: 2px solid #fff; box-shadow: var(--pm-shadow-sm); }

/* Calendar (FullCalendar polish) ----------------------------------------- */
.fc { --fc-border-color: var(--pm-line); --fc-today-bg-color: rgba(33,56,106,.04); --fc-page-bg-color:#fff; font-family: 'Poppins', sans-serif; }
.fc .fc-toolbar-title { font-size: 18px; color: var(--pm-ink); font-weight: 600; }
.fc .fc-button { background: #fff; border: 1px solid var(--pm-line); color: var(--pm-body); font-weight: 500; box-shadow: none; text-transform: capitalize; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button:hover { background: var(--pm-navy-600); border-color: var(--pm-navy-600); color: #fff; }
.fc .fc-col-header-cell-cushion { color: var(--pm-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: 10px; }
.fc .fc-daygrid-day-number { color: var(--pm-body); font-size: 13px; padding: 8px; }
.fc-event { border: 0; border-radius: 6px; padding: 2px 6px; font-size: 11.5px; font-weight: 500; }

/* Misc -------------------------------------------------------------------- */
.pm-seg { display: inline-flex; background: #fff; border: 1px solid var(--pm-line); border-radius: 10px; padding: 3px; }
.pm-seg a { padding: 6px 13px; font-size: 13px; font-weight: 500; color: var(--pm-body); border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.pm-seg a.active { background: var(--pm-navy-600); color: #fff; }
.pm-divider { height: 1px; background: var(--pm-line); margin: 18px 0; }
.dropdown-menu { border: 1px solid var(--pm-line); border-radius: 12px; box-shadow: var(--pm-shadow-md); font-size: 13.5px; padding: 6px; }
.dropdown-item { border-radius: 8px; padding: 8px 12px; }
.dropdown-item:active { background: var(--pm-navy-600); }
.form-control, .form-select { border-color: var(--pm-line); border-radius: 10px; color: var(--pm-ink); font-size: 14px; padding: 10px 13px; }
.form-control:focus, .form-select:focus { border-color: var(--pm-navy-500); box-shadow: 0 0 0 3px rgba(46,78,140,.12); }
.form-label { font-size: 13px; font-weight: 500; color: var(--pm-ink); margin-bottom: 6px; }

/* Scrollbars -------------------------------------------------------------- */
.pm-nav::-webkit-scrollbar, .pm-col-body::-webkit-scrollbar, .pm-board::-webkit-scrollbar { width: 6px; height: 8px; }
.pm-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 8px; }
.pm-col-body::-webkit-scrollbar-thumb, .pm-board::-webkit-scrollbar-thumb { background: #D5DCEA; border-radius: 8px; }

/* Sidebar collapse -------------------------------------------------------- */
.pm-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; border: 0;
  background: transparent; color: var(--pm-muted); font-size: 20px; cursor: pointer;
  transition: background .15s, color .15s; flex: 0 0 auto;
}
.pm-collapse:hover { background: var(--pm-line-2); color: var(--pm-ink); }

@media (min-width: 992px) {
  #pm-wrapper.sb-collapsed .pm-sidebar { width: 76px; flex-basis: 76px; }
  #pm-wrapper.sb-collapsed .pm-main { margin-left: 76px; }
  #pm-wrapper.sb-collapsed .pm-brand { justify-content: center; padding: 22px 0 18px; }
  #pm-wrapper.sb-collapsed .pm-brand > div { display: none; }
  #pm-wrapper.sb-collapsed .pm-nav { padding: 6px 10px 24px; }
  #pm-wrapper.sb-collapsed .pm-nav .pm-section { display: none; }
  #pm-wrapper.sb-collapsed .pm-nav a { justify-content: center; gap: 0; padding: 11px 0; }
  #pm-wrapper.sb-collapsed .pm-nav a span,
  #pm-wrapper.sb-collapsed .pm-nav a .pm-badge { display: none; }
  #pm-wrapper.sb-collapsed .pm-nav a.active::before { display: none; }
  #pm-wrapper.sb-collapsed .pm-nav a iconify-icon { font-size: 21px; }
}
@media (max-width: 991.98px) { .pm-collapse { display: none; } }

/* Responsive -------------------------------------------------------------- */
.pm-overlay { display: none; position: fixed; inset: 0; background: rgba(14,26,48,.4); z-index: 1039; }
@media (max-width: 991.98px) {
  .pm-sidebar { transform: translateX(-100%); }
  .pm-sidebar.open { transform: translateX(0); }
  .pm-main { margin-left: 0; }
  .pm-burger { display: block; }
  .pm-overlay.show { display: block; }
  .pm-search { min-width: 0; }
}
@media (max-width: 575.98px) {
  .pm-content { padding: 18px; }
  .pm-search { display: none; }
  .pm-prof .nm, .pm-prof .rl { display: none; }
}


/* ===== Tombol Absensi di topbar — warna kuning logo PAGS ===== */
/* Bootstrap .btn-warning memakai teks putih di atas #F8C20A (kontras ~1.9:1,
   sulit dibaca). Kelas ini memakai teks navy agar kontras ~8:1. */
.btn-pags-yellow{
  --bs-btn-color:#21386A;
  --bs-btn-bg:#F8C20A;
  --bs-btn-border-color:#F8C20A;
  --bs-btn-hover-color:#21386A;
  --bs-btn-hover-bg:#E3AF07;
  --bs-btn-hover-border-color:#E3AF07;
  --bs-btn-active-color:#21386A;
  --bs-btn-active-bg:#D3A106;
  --bs-btn-active-border-color:#D3A106;
  --bs-btn-focus-shadow-rgb:248,194,10;
  font-weight:600;
}

/* ===== To Do List (checklist) di modal detail task ===== */
.pm-cl{border:1px solid #EEF1F7;border-radius:12px;padding:13px 14px;margin-bottom:10px;background:#fff}
.pm-cl-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.pm-cl-head b{font-size:13.5px;color:#0E1A30}
.pm-cl-head iconify-icon{font-size:18px;color:#21386A}
.pm-cl-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pm-cl-bar .pct{font-size:11px;color:#94A3B8;font-weight:600;min-width:34px}
.pm-cl-bar .track{flex:1;height:7px;border-radius:5px;background:#EEF1F7;overflow:hidden}
.pm-cl-bar .fill{height:100%;border-radius:5px;background:#21386A;transition:width .25s ease}
.pm-cl-item{display:flex;align-items:center;gap:15px;padding:9px 8px;margin:0;border-radius:8px}
.pm-cl-item:hover{background:#F8FAFF}
/* Disempitkan ke [type=checkbox]: selektor `.pm-cl-item input` menyasar SEMUA
   input di dalam baris, termasuk kolom edit inline, sehingga kolomnya ikut
   menyusut jadi 17x17px dan tampak seperti lingkaran. */
.pm-cl-item input[type="checkbox"]{width:17px;height:17px;flex:0 0 17px;margin:0;cursor:pointer;accent-color:#21386A}
.pm-cl-item .tx{flex:1;min-width:0;font-size:13px;color:#0E1A30;line-height:1.45;cursor:pointer;
                padding-right:6px;word-break:break-word}
.pm-cl-item.done .tx{text-decoration:line-through;color:#94A3B8}
/* Tombol aksi selalu terlihat: opacity 0 sampai hover membuatnya mustahil
   dijangkau di perangkat sentuh yang tidak punya status hover. */
.pm-cl-item .act{display:flex;gap:10px;flex:0 0 auto;align-items:center}
.pm-cl-item .act iconify-icon{font-size:16px;color:#B9C0D4;cursor:pointer;transition:color .15s}
.pm-cl-item .act iconify-icon:hover{color:#21386A}
.pm-cl-item .act .del:hover{color:#DC2626}
.pm-cl-head .ren{font-size:15px;color:#B9C0D4;cursor:pointer;transition:color .15s}
.pm-cl-head .ren:hover{color:#21386A}
.pm-cl-item .pm-cl-edit,
.pm-cl-head .pm-cl-edit,
.pm-cl-edit{flex:1 1 auto;min-width:0;width:auto;height:auto;font-size:13px;
            padding:5px 10px;border-radius:8px}
.pm-cl-add{display:flex;gap:8px;margin-top:9px}
.pm-cl-add input[type="text"], .pm-cl-add > input:not([type]){flex:1}