:root{
  --bg:#f3f6fa; --paper:#fff; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --brand:#2563eb; --brand-2:#1d4ed8; --warn:#f59e0b; --bad:#dc2626; --ok:#059669;
  --sel:#fff6e5; --sel-border:#f59e0b; --row-even:#f8fafc; --chip:#eef2ff;
}
html,body{height:100%}
body{margin:0;background:var(--bg);font:13px/1.45 "Segoe UI",Arial,sans-serif;color:var(--ink)}
#app{width:100%;max-width:none;margin:8px 0 18px 0;padding:12px 14px;background:var(--paper);border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.05);box-sizing:border-box}
h2{margin:0 0 8px 0;font-size:16px}
label{font-weight:600;color:#2d3a4a}
input[type=text],input[type=date],input[type=number],select{
  height:26px;border:1px solid #b0b8c1;border-radius:4px;background:#f8fafc;padding:3px 6px;font:12px "Segoe UI",Arial
}
button{height:28px;border:none;border-radius:6px;background:var(--brand);color:#fff;padding:0 12px;cursor:pointer}
button:hover{background:var(--brand-2)}
.btn-gray{background:#e5e7eb;color:#111827}
.btn-gray:hover{background:#d1d5db}
.btn-danger{background:#ef4444;color:#fff}
.btn-danger:hover{background:#dc2626}
.btn, .btn-gray{display:inline-flex;align-items:center;gap:6px}
.toolbar a.btn-gray{display:inline-flex;align-items:center;gap:6px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.toolbar .spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#f3f4f6;border-radius:8px;padding:4px 8px;white-space:nowrap}
.toggle-pill{gap:8px;cursor:pointer}
.toggle-pill input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.toggle-track{position:relative;width:34px;height:18px;border-radius:999px;background:#cbd5e1;display:inline-flex;align-items:center;transition:background .2s ease}
.toggle-thumb{width:14px;height:14px;border-radius:50%;background:#fff;transform:translateX(2px);transition:transform .2s ease;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle-pill input:checked + .toggle-track{background:#22c55e}
.toggle-pill input:checked + .toggle-track .toggle-thumb{transform:translateX(18px)}

.table-scroll{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:auto}
table{border-collapse:separate;border-spacing:0;min-width:1200px;width:100%;table-layout:fixed}
thead th{position:sticky;top:0;background:linear-gradient(#f7f9fe,#eaf1fb);z-index:5;font-weight:700}
th,td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 6px;white-space:nowrap;vertical-align:middle;overflow:hidden}
tbody tr:nth-child(even){background:var(--row-even)}
tbody tr.selected{background:var(--sel);box-shadow:inset 0 0 0 2px var(--sel-border)}

/* NEW: visual for "cut" rows (Ctrl+X not yet pasted) */
tbody tr.cutting{opacity:.45; filter:saturate(.7);}

td input, td select{
  border:none;background:transparent;height:22px;min-width:0;padding:0 2px;box-sizing:border-box;display:block
}
td.depCol input[type=text]{width:100%;min-width:0;font-size:11px}
td.durationCol input[type=text]{width:100%;min-width:0;font-size:11px;text-align:center;padding:0 2px}
td input:focus,td select:focus{outline:1px solid var(--brand);background:#eaf4ff}

/* Manual vs auto date indicator (bold text only) */
.dateCol .date-wrap{position:relative; display:inline-block; width:100%}
.dateCol .date-wrap input[type=text]{width:100%; padding-right:26px}
.dateCol .date-wrap.manual input[type=text]{font-weight:400}
.dateCol .date-wrap.auto   input[type=text]{font-weight:400}
.dateCol .date-wrap .date-picker-native{position:absolute; inset:0; opacity:0; pointer-events:none}
.dateCol .date-wrap .date-picker-btn{
  position:absolute;
  top:50%;
  right:2px;
  height:20px;
  width:20px;
  padding:0;
  border:none;
  background:transparent;
  color:#9ca3af;
  border-radius:0;
  font-size:11px;
  line-height:20px;
  cursor:pointer;
  transform:translateY(-50%);
}
.dateCol .date-wrap .date-picker-btn:hover{background:rgba(15,23,42,0.06)}

/* Allow selecting grid text while keeping controls stable */
#gridBody{user-select:text}
#gridBody input,#gridBody select,#gridBody textarea{user-select:text}

.serialCol{width:56px;text-align:center;position:sticky;left:0;background:inherit;z-index:3}
.warnCol{width:20px;text-align:center;padding:0 1px}
.warnCol span,.warnCol i{font-size:10px;line-height:1}
.subCol{width:20px;text-align:center}
.assignedCol{width:28px;text-align:center;padding:0 2px}
.assignedCol svg{width:12px;height:12px}
.assignee-wrap{position:relative;width:18px;height:18px;margin:0 auto}
.assignee-avatar{width:18px;height:18px;border-radius:50%;background:#e5e7eb;color:#111827;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:9px;overflow:hidden}
.assignee-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.assignee-select{position:absolute;inset:0;opacity:0;cursor:pointer}
.assignee-stack{display:flex;align-items:center;justify-content:center;gap:4px}
.assignee-avatar--sm{width:18px;height:18px;font-size:9px;border:1px solid #e5e7eb;margin-left:0}
.assignee-more{width:18px;height:18px;border-radius:50%;background:#e2e8f0;color:#0f172a;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-left:0;border:1px solid #e5e7eb}
.taskCol{min-width:260px}
.taskCol .wrap{display:flex;align-items:center;gap:4px}
.taskCol .wrap input{flex:1;min-width:60px;width:auto}
.sub-toggle{width:14px;height:14px;border:none;background:transparent;color:#0f172a;border-radius:0;font-weight:700;cursor:pointer;line-height:14px;padding:0;font-size:12px}
.sub-toggle:hover{background:transparent}
.sub-toggle:focus{outline:1px solid #93c5fd;outline-offset:1px}
.statusCol{width:120px}
.percCol{width:70px;text-align:center}
.dateCol{width:86px;max-width:86px}
.dateCol .date-wrap input[type=text]{padding-right:22px;font-size:11px}
.dateCol .date-wrap .date-picker-btn{
  height:18px;
  width:18px;
  font-size:10px;
  line-height:16px;
}
th[data-col="start"],th[data-col="finish"],th[data-col="aStart"],th[data-col="aEnd"]{width:86px;max-width:86px}
td[data-col="start"],td[data-col="finish"],td[data-col="aStart"],td[data-col="aEnd"]{width:86px;max-width:86px}
.durationCol{width:40px}
.depCol{width:60px;padding:0 2px}
.abar{position:absolute;top:3px;height:12px;border-radius:6px;background:#f59e0b; z-index:3}
.bar.bar-under{background:#22c55e}
.bar.bar-eq{background:#f59e0b}
.bar.bar-over{background:#ef4444}
.abar.abar-under{background:#22c55e}
.abar.abar-eq{background:#f59e0b}
.abar.abar-over{background:#ef4444}

.serialGrip{display:flex;align-items:center;justify-content:center;gap:6px;cursor:grab;user-select:none}
.serialGrip:active{cursor:grabbing}

.indent-0 .taskName{font-weight:700}
.indent-gt0 .taskName{font-weight:700}
.indent-leaf .taskName{font-weight:400}
.pad{display:inline-block}

/* inline gantt column */
.timelineHead{position:sticky;top:0;background:#f3f4f6;border-left:1px solid var(--line);z-index:4;overflow:hidden}
.timelineCol{min-width:600px}
.ruler{position:relative;height:38px}
.ruler .mon{position:absolute;top:2px;font-size:12px;font-weight:700;color:#1f2937}
.ruler .day{position:absolute;top:20px;font-size:11px;color:#374151;transform:translateX(-50%)}
.ruler::after{content:"";position:absolute;top:0;bottom:0;width:var(--today-w,0px);background:rgba(255, 182, 193, .35);left:var(--today-x, -9999px);pointer-events:none}
.timeline{position:relative;height:18px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:6px}
.timeline::after{content:"";position:absolute;top:0;bottom:0;width:var(--today-w,0px);background:rgba(255, 182, 193, .35);left:var(--today-x, -9999px);pointer-events:none}
.tick{position:absolute;top:0;bottom:0;width:1px;background:#e5e7eb;z-index:1}
/* Increase contrast for non-working day shading and ensure it sits behind grid/bars */
.shade{position:absolute;top:0;bottom:0;background:rgba(17,24,39,.06) !important;z-index:0}
.shade.holiday{background:rgba(251,191,36,.22) !important;}
.bar{position:absolute;top:3px;height:12px;border-radius:6px;background:#b6d6ff;z-index:2}
.prog{position:absolute;top:3px;height:12px;border-radius:6px;background:#2563eb;opacity:.45;z-index:3}
.bar.parent{background:#e5e7eb;border:2px solid #2563eb;box-sizing:border-box}
.abar.parent{background:#e5e7eb;border:2px solid #f59e0b;box-sizing:border-box}

/* context menus */
.context{position:fixed;display:none;z-index:1000;background:#fff;border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.2);border-radius:8px;min-width:180px;overflow:hidden}
.context button{display:block;background:#fff;color:#111827;width:100%;text-align:left;border-radius:0;padding:8px 10px;border-bottom:1px solid #f1f5f9}
.context button:hover{background:#f3f4f6}
.hidden-col{display:none}

th.resizable{position:sticky}
.resize-handle{position:absolute;right:-3px;top:0;width:6px;height:100%;cursor:col-resize;user-select:none}

/* modals */
#teamModal,#paramsModal,#ganttModal,#allocModal,#rolesModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:2000;align-items:center;justify-content:center}
#teamModal .modal{ width:1100px; max-width:95vw; }
.modal{background:#fff;border-radius:12px;max-width:95vw;max-height:92vh;width:1200px;display:flex;flex-direction:column;box-shadow:0 12px 38px rgba(0,0,0,.25)}
.modal .head{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}
.modal .body{padding:10px 12px;overflow:auto}

/* Track Sheet popovers + dialogs */
.filter-popover{position:absolute;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.12);padding:10px;min-width:220px;z-index:2100}
.filter-popover__header{font-weight:700;margin-bottom:6px;color:var(--brand-2)}
.filter-popover__body{margin-bottom:8px}
.filter-popover input.filter-input,.filter-popover select.filter-input{width:100%;height:32px;padding:0 8px;border:1px solid var(--line);border-radius:6px}
.filter-popover__footer{display:flex;gap:8px;justify-content:flex-end}
.filter-popover.column-menu{min-width:260px}
.filter-popover.edit-col{min-width:260px;width:280px}
.col-menu-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid transparent;border-radius:10px}
.col-menu-item:hover{background:rgba(15,23,42,0.03)}
.col-menu-item.is-fixed .col-drag-handle{opacity:0.4;cursor:not-allowed}
.col-menu-item.is-drag-over{background:rgba(37,99,235,0.06);border-color:rgba(37,99,235,0.25)}
.col-menu-item.drop-before{box-shadow:inset 0 3px 0 #2563eb}
.col-menu-item.drop-after{box-shadow:inset 0 -3px 0 #2563eb}
.dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.35);display:none;z-index:2200}
.dialog{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2201}
.dialog.open,.dialog-backdrop.open{display:flex}
.dialog__panel{width:100%;max-width:560px;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.2);border:1px solid var(--line)}
.dialog__panel.leave-list{max-width:900px}
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.dialog__title{font-size:16px;font-weight:600;margin:0}
.dialog__body{padding:16px;display:grid;gap:12px}
.dialog__footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 16px;border-top:1px solid var(--line)}
.dialog__opt{display:flex;align-items:center;gap:8px;font-weight:600;color:#1f2937}
.dialog__note{font-size:12px;color:var(--muted)}
.leave-list-body{padding:12px 16px}
.leave-list-table{width:100%;min-width:700px}
.leave-list-table thead th{position:sticky;top:0;background:#f8fafc;z-index:1}
.leave-list-table td,.leave-list-table th{white-space:nowrap}

/* Leave dialog */
.leave-panel{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.leave-panel__title{font-weight:700;color:#0f172a;margin-bottom:12px}
.leave-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.leave-field{display:flex;flex-direction:column;gap:6px}
.leave-field label{font-size:12px;color:#374151;font-weight:600}
.leave-actions{display:flex;gap:10px;align-items:center;justify-content:flex-start;flex-wrap:wrap;margin-top:6px}
.leave-panel .select,.leave-panel .input{
  height:32px;border:1px solid #cbd5e1;border-radius:8px;padding:0 10px;background:#fff;font-size:13px;
}
@media (max-width:700px){
  .leave-grid{grid-template-columns:1fr}
}

/* Track Sheet table sizing (prevent column compression on resize/add) */
.pm-track-sheet .table-wrap{overflow-x:auto;overflow-y:hidden;width:100%}
.pm-track-sheet .table{border:none;border-radius:12px;background:#fff;width:max-content;min-width:760px;table-layout:auto}
.pm-track-sheet .table thead th,.pm-track-sheet .table tbody td{border-bottom:1px solid var(--line)}
.pm-track-sheet .table tbody tr:last-child td{border-bottom:none}
.pm-track-sheet .table thead th:first-child,.pm-track-sheet .table tbody td:first-child{padding-left:4px;width:56px}
.pm-track-sheet .table [data-col-id="name"]{min-width:180px}
.pm-track-sheet .table [data-col-id="status"]{min-width:120px}
.pm-track-sheet .table [data-col-id="iterationNo"]{min-width:140px}
.pm-track-sheet .table [data-col-id="assignedTo"],
.pm-track-sheet .table [data-col-id="closedBy"]{min-width:140px}
.pm-track-sheet .table [data-col-id="receivedDate"],
.pm-track-sheet .table [data-col-id="completedDate"]{min-width:140px;white-space:nowrap}
.pm-track-sheet .table [data-col-id="iterationStatus"]{min-width:140px}
.pm-track-sheet .table [data-col-id="comment"]{min-width:240px;white-space:normal}
.pm-track-sheet .table [data-col-type="number"]{min-width:120px!important;max-width:160px}
.team-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.team-title{font-weight:700;color:#1d4ed8}
.team-table{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;width:100%;max-width:1200px;margin:0 auto}
.team-head,.team-row{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,180px);
  gap:8px;
  align-items:center;
}
.team-head{padding:12px;font-weight:600;color:#475569;background:#f8fafc}
.team-row{padding:12px;border-top:1px solid #eef2f7}
.team-cell{min-width:0}
.member-cell{display:flex;align-items:center;gap:10px;min-width:0}
.member-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.team-actions{display:flex;gap:8px;justify-content:flex-start}
.team-row input,
.team-row select{
  width:100%;
  min-width:0;
}
.team-row input[disabled],
.team-row select[disabled]{
  background:transparent;
  border:none;
  padding-left:0;
  color:#111827;
}
.team-row input[disabled]::placeholder{color:#9ca3af}
.team-upload{height:26px;font-size:12px;padding:0 10px}
.team-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#e5e7eb;
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:12px;
  overflow:hidden;
}
.team-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:980px){
  .team-head{display:none}
  .team-head,.team-row{grid-template-columns:1fr}
  .team-cell{display:flex;flex-direction:column;gap:6px}
  .team-cell::before{content:attr(data-label);font-size:12px;color:#64748b;font-weight:600}
  .team-actions{justify-content:flex-start}
}
.chip{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;border:1px solid #dbeafe;border-radius:999px;padding:4px 8px;white-space:nowrap}

/* Settings: Per-person Daily Hours table should size to content */
.modal .body .simple-table{ min-width:auto; width:auto; table-layout:auto; }
.modal .body .simple-table thead th{ position:static; background:#f8fafc; }
.modal .body .simple-table th:nth-child(1),
.modal .body .simple-table td:nth-child(1){ width:auto; max-width:260px; }
.modal .body .simple-table th:nth-child(2),
.modal .body .simple-table td:nth-child(2){ width:90px; text-align:center; }
.modal .body .simple-table th:nth-child(3),
.modal .body .simple-table td:nth-child(3){ width:110px; }

/* Mini brand link in Project bar */
.brand-mini{display:inline-flex;align-items:center;gap:6px;margin-right:10px;color:#1f2937;text-decoration:none;font-weight:800}
.brand-mini img{display:inline-block;width:50px;height:50px;border-radius:8px}
.brand-mini span{font-size:20px;line-height:1.1;font-weight:600}
.brand-mini:hover{opacity:.9}

/* drag hint */
.drag-hint{
  position:fixed; z-index:2000; display:none;
  background:#111827; color:#fff; padding:3px 6px; border-radius:6px;
  font:11px "Segoe UI",Arial; pointer-events:none; opacity:.9;
}

/* fatal */
#fatal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:3000;align-items:center;justify-content:center}
#fatal .box{background:#fff;border-radius:12px;padding:16px 18px;max-width:520px}

/* minimalist pages (gantt.html/alloc.html) */
.page-wrap{max-width:1800px;margin:20px auto;background:#fff;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.08);padding:14px}
.page-head{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}
.page-tools{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.page-tools #gvDefaultWrap{margin-left:auto}
.page-tools #raDefaultWrap{margin-left:auto}
.gantt-head{justify-content:flex-start}
.gantt-head .page-tools{flex:1;min-width:0;justify-content:flex-start}
.gantt-head .page-tools #gvDefaultWrap{margin-left:auto}
.alloc-head{justify-content:flex-start}
.alloc-head .page-tools{flex:1;min-width:0;justify-content:flex-start}
.page-tools-right{justify-content:flex-end}
.page-tools-bottom{margin-top:10px}
.gantt-options-label{font-weight:700;color:#1f2937}
#fullCanvas{overflow:auto;border:1px solid var(--line);border-radius:10px}
/* Context menus (shared across pages) */
.context{position:fixed;display:none;z-index:1000;background:#fff;border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.2);border-radius:8px;min-width:200px;max-height:70vh;overflow-y:auto;overflow-x:hidden}
.context .ctx-title{padding:8px 10px;border-bottom:1px solid #f1f5f9;font-weight:700}
.context button{display:block;background:#fff;color:#111827;width:100%;text-align:left;border-radius:0;padding:8px 10px;border-bottom:1px solid #f1f5f9}
.context button:hover{background:#f3f4f6}
.context .danger{color:#b91c1c}
.context .ctx-foot{font-size:12px;color:#6b7280}
/* Settings modal tabs */
.settings-tabset{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.settings-tab-input{position:absolute;opacity:0;pointer-events:none}
.settings-tab-label{flex:0 0 auto;padding:6px 16px;border-radius:999px;border:1px solid var(--line);background:#f3f4f6;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s ease}
.settings-tab-label:hover{color:var(--ink)}
.settings-tab-input:checked + .settings-tab-label{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 2px 6px rgba(37,99,235,.25)}
.settings-panel{display:none;flex:1 0 100%;padding:14px;border:1px solid var(--line);border-radius:10px;background:#f9fafb}
#settingsTabCalendar:checked ~ #settingsPanelCalendar,
#settingsTabHours:checked ~ #settingsPanelHours,
#settingsTabConfig:checked ~ #settingsPanelConfig,
#settingsTabStorage:checked ~ #settingsPanelStorage{display:block}
.settings-panel > .section-title:first-child{margin-top:0}
.settings-panel label.row{display:block;margin:6px 0;font-weight:600}
.settings-panel label.row input{margin-right:8px}
.settings-panel div.row{display:flex;align-items:center;gap:10px;margin:10px 0}
.settings-panel div.row label{margin:0;font-weight:600}

/* Combined above for all tabs */

/* --- Header + Sidebar shell (aligned with Track Sheet feel) --- */
.pm-shell{min-height:100vh;background:#f6f7fb;}
.pm-topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 2px 8px rgba(15,23,42,0.06);}
.pm-topbar__left{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.pm-topbar__center{flex:1;display:flex;justify-content:center;min-width:240px;}
.pm-brand{display:inline-flex;align-items:center;gap:10px;color:#0f172a;font-weight:700;text-decoration:none;}
.pm-brand img{border-radius:0;box-shadow:none;}
.pm-brand__title{font-size:15px;}
.pm-brand__subtitle{font-size:12px;color:#6b7280;font-weight:500;}
.pm-topbar__right{display:flex;align-items:center;gap:14px;flex-shrink:0;position:relative;}
.pm-notif-btn{position:relative;}
.pm-notif__badge{
  position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;
  border-radius:999px;min-width:16px;height:16px;font-size:10px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px;
}
.pm-notif-menu{
  position:absolute;top:44px;right:12px;min-width:300px;max-width:380px;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  box-shadow:0 14px 36px rgba(15,23,42,0.14);padding:10px;display:none;z-index:120;
  max-height:70vh;overflow:auto;
}
.pm-notif-head{padding:6px 6px 10px 6px;border-bottom:1px solid #eef2f7;margin-bottom:8px;}
.pm-notif-titlebar{font-weight:700;color:#0f172a;}
.pm-notif-sub{font-size:12px;color:#6b7280;margin-top:2px;}
.pm-notif-section{display:grid;gap:8px;margin-bottom:10px;}
.pm-notif-section-title{
  font-size:12px;font-weight:700;color:#475569;display:flex;align-items:center;gap:6px;
  background:transparent;border:none;padding:2px 0;cursor:pointer;width:100%;text-align:left;
}
.pm-notif-caret{margin-left:auto;color:#94a3b8;}
.pm-notif-list{display:grid;gap:8px;margin-top:6px;}
.pm-notif-count{background:#e2e8f0;color:#0f172a;border-radius:999px;padding:1px 6px;font-size:11px;}
.pm-notif-item{
  width:100%;text-align:left;background:#f8fafc;border:1px solid #eef2f7;border-radius:10px;
  padding:8px 10px;display:flex;flex-direction:column;gap:4px;cursor:pointer;color:#0f172a;
  line-height:1.3;
  height:auto;
}
.pm-notif-title,.pm-notif-meta{white-space:normal;word-break:break-word;}
.pm-notif-item:hover{background:#eef2ff;border-color:#dbeafe;}
.pm-notif-title{font-weight:600;}
.pm-notif-meta{font-size:12px;color:#64748b;}
.pm-notif-item.is-overdue{background:#fee2e2;color:#7f1d1d;}
.pm-notif-item.is-overdue .pm-notif-meta{color:#b91c1c;}
.pm-notif-item.is-soon{background:#fff7ed;color:#9a3412;}
.pm-notif-item.is-soon .pm-notif-meta{color:#c2410c;}
.pm-notif-item.is-holiday{background:#ecfeff;color:#155e75;}
.pm-notif-item.is-holiday .pm-notif-meta{color:#0e7490;}
.pm-notif-item.is-leave{background:#e0f2fe;color:#0c4a6e;}
.pm-notif-item.is-leave .pm-notif-meta{color:#0369a1;}
.pm-notif-empty{padding:10px;color:#64748b;font-size:12px;}
.pm-current-project{display:flex;align-items:center;gap:6px;font-weight:700;color:#0f172a;max-width:320px;padding:0;background:transparent;border:none;}
.pm-current-project #projectHeaderName{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pm-nav-toggle{display:none;flex-direction:column;gap:4px;padding:8px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;}
.pm-nav-toggle span{display:block;width:18px;height:2px;background:#0f172a;border-radius:4px;}
.pm-layout{display:flex;min-height:calc(100vh - 64px);padding-left:200px;box-sizing:border-box;}
.pm-sidebar{width:200px;background:#fff;color:#0f172a;padding:16px;position:fixed;top:56px;left:0;bottom:0;border-right:1px solid #e5e7eb;box-shadow:2px 0 12px rgba(0,0,0,0.04);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;transition:width .2s ease,padding .2s ease;z-index:50;}
.pm-menu{display:grid;gap:6px;}
.pm-menu__header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.pm-menu__title{font-size:12px;text-transform:uppercase;letter-spacing:0.4px;color:#64748b;}
.pm-menu__link{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;color:#0f172a;text-decoration:none;font-weight:600;transition:background 0.2s, color 0.2s;}
.pm-menu__link:hover{background:#f1f5f9;}
.pm-menu__link.active{background:#e6edff;color:#1d4ed8;}
.pm-menu__icon{width:18px;height:18px;color:inherit;}
.pm-main{flex:1;min-width:0;padding:6px 10px;}
.pm-shell #app{margin:4px 0 12px 0;}
.pm-sidebar__footer{margin-top:auto;padding-top:12px;border-top:1px solid #e5e7eb;}
.pm-project-switch{display:flex;flex-direction:column;gap:6px;}
.pm-project-switch__label{font-size:12px;text-transform:uppercase;letter-spacing:0.3px;color:#64748b;}
.pm-project-switch button{justify-content:space-between;width:100%;height:40px;box-sizing:border-box;}
.pm-project-switch__name{font-weight:700;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pm-project-switch__hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.pm-auto-btn{display:inline-flex;align-items:center;justify-content:center;min-width:0;height:auto;border:none;border-radius:0;background:transparent;cursor:pointer;color:#0f172a;font-weight:700;padding:0 6px;font-size:14px;}
.pm-auto-btn:focus-visible{outline:2px solid #7aa7ff;outline-offset:2px;}
body.pm-sidebar-auto .pm-sidebar{width:56px;padding:12px 8px;}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-auto-btn{display:none;}
body.pm-sidebar-auto .pm-sidebar.pm-hover .pm-auto-btn{display:inline-flex;}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-menu__label{display:none;}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-menu__title{display:none;}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-menu__header{justify-content:center;}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-menu__link{justify-content:center;}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-project-switch__label{display:none;}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-project-switch__hint{display:none;}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-project-switch__name{display:none;}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-project-switch button{
  padding:0;
  justify-content:center;
  font-weight:700;
  letter-spacing:0.4px;
}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-project-switch button::before{
  content:'PRJ';
}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-project-switch button{padding:0;justify-content:center;}
body.pm-sidebar-auto .pm-sidebar.pm-hover{width:200px;transition:width 0.2s ease;}
body.pm-sidebar-auto .pm-layout{padding-left:56px;}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover){padding-top:16px;padding-bottom:16px;}
body.pm-sidebar-auto .pm-sidebar:not(.pm-hover) .pm-sidebar__footer{margin-top:auto;}
@media(max-width:1100px){
  .pm-topbar{flex-wrap:wrap;}
  .pm-topbar__center{order:3;width:100%;justify-content:flex-start;}
}
@media(max-width:900px){
  .pm-layout{flex-direction:column;padding-left:0;}
  .pm-sidebar{position:fixed;top:56px;left:0;right:0;width:100%;transform:translateY(-120%);transition:transform 0.25s ease;min-height:auto;box-shadow:0 12px 30px rgba(0,0,0,0.18);border-bottom-left-radius:14px;border-bottom-right-radius:14px;z-index:55;}
  .pm-sidebar.open{transform:translateY(0);}
  .pm-nav-toggle{display:flex;}
}

/* Header search */
.pm-search-wrap{position:relative;width:100%;max-width:620px;}
.pm-search{display:flex;align-items:center;gap:8px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:6px 12px;min-width:260px;max-width:620px;width:100%;box-shadow:0 1px 2px rgba(0,0,0,0.04) inset;}
.pm-search__icon{color:#6b7280;display:inline-flex;}
.pm-search input{flex:1;border:none;background:transparent;font-size:13px;height:22px;outline:none;}
.pm-search-results{position:absolute;top:40px;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.12);padding:6px;display:grid;gap:4px;z-index:80;max-height:260px;overflow:auto;}
.pm-search-results[hidden], .pm-search-results:empty{display:none !important;border:none;box-shadow:none;padding:0;}
.pm-search-result{width:100%;text-align:left;border:none;background:#f3f4f6;border-radius:8px;padding:8px 10px;color:#0f172a;cursor:pointer;}
.pm-search-result:hover,.pm-search-result:focus{background:#e6edff;outline:none;}