/* =============================================================================
   app.css — Honeywell Change Control Board Tool styles
   ============================================================================= */

:root {
  --brand:#D22630; --brand-dark:#A81C24; --brand-l:#FDEDEF; --brand-p:#FFF6F6;
  --sidebar:#111111;
  --orange:#D22630; --orange-l:#FDEDEF;
  --ink:#111111; --ink2:#374151; --ink3:#6B7280;
  --rule:#E5E7EB; --surface:#F9FAFB;
  --green:#15803D; --green-l:#F0FDF4;
  --amber:#B45309; --amber-l:#FFFBEB;
  --red:#DC2626; --red-l:#FEF2F2;
  --blue:#1D4ED8; --blue-l:#EFF6FF;
  --mono:'IBM Plex Mono',monospace;
  --sans:'Inter',sans-serif;
  --cond:'Inter',sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:var(--sans); background:var(--surface); color:var(--ink); font-size:14px; line-height:1.5; height:100vh; overflow:hidden; }

/* ── LOGIN ── */
.login-overlay {
  position:fixed; inset:0; background:#EBEBEB;
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.login-overlay.hidden { display:none; }
.login-box {
  background:white; border-radius:2px; width:400px;
  box-shadow:0 8px 32px rgba(0,0,0,0.12); overflow:hidden;
  border-top:4px solid var(--brand);
}
.login-header {
  background:white; padding:28px 28px 20px;
  border-bottom:1px solid var(--rule);
}
.login-hw-logo {
  height:26px; display:block; margin-bottom:12px;
}
.login-header .product-name {
  font-family:var(--sans); font-weight:700; font-size:15px; color:var(--ink); letter-spacing:0.01em;
}
.login-header .product-tag {
  font-family:var(--mono); font-size:10px; color:var(--ink3);
  letter-spacing:0.08em; margin-top:4px; text-transform:uppercase;
}
.login-body { padding:28px; }
.login-err {
  display:none; background:var(--red-l); color:var(--red);
  border:1px solid #fca5a5; border-radius:2px;
  padding:9px 13px; font-size:12px; margin-bottom:16px; font-family:var(--mono);
}
.login-err.show { display:block; }
.login-btn {
  width:100%; padding:11px; background:var(--brand); color:white;
  border:none; border-radius:2px; font-size:14px; font-weight:600;
  font-family:var(--sans); cursor:pointer; transition:background .15s; margin-top:6px;
}
.login-btn:hover { background:var(--brand-dark); }
.login-btn:disabled { opacity:0.6; cursor:not-allowed; }

/* ── CHROME ── */
.chrome{ display:flex; height:100vh; overflow:hidden; }
.chrome.hidden { display:none; }

/* ── SIDEBAR ── */
.sidebar{ width:230px; min-width:230px; background:white; border-right:1px solid var(--rule); display:flex; flex-direction:column; }
.sidebar-logo{ padding:20px 20px 16px; border-bottom:1px solid var(--rule); }
.sidebar-hw-logo{ height:20px; display:block; margin-bottom:8px; }
.sidebar-logo .product-name{ font-family:var(--sans); font-weight:600; font-size:12px; color:var(--ink); letter-spacing:.01em; line-height:1.3; }
.sidebar-logo .program-tag{ font-family:var(--mono); font-size:9px; color:var(--ink3); letter-spacing:.08em; margin-top:3px; text-transform:uppercase; }
.sidebar-section{ padding:14px 0 6px; }
.sidebar-section-label{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); padding:0 20px; margin-bottom:4px; }
.nav-item{ display:flex; align-items:center; gap:10px; padding:9px 20px; cursor:pointer; font-size:13px; color:var(--ink2); border-left:3px solid transparent; transition:all .15s; }
.nav-item:hover{ background:var(--surface); color:var(--ink); }
.nav-item.active{ background:var(--brand-l); color:var(--brand); font-weight:600; border-left-color:var(--brand); }
.nav-icon{ width:15px; height:15px; flex-shrink:0; color:var(--ink3); transition:color .15s; }
.nav-item:hover .nav-icon{ color:var(--ink); }
.nav-item.active .nav-icon{ color:var(--brand); }
.nav-badge{ margin-left:auto; background:var(--brand); color:white; font-family:var(--mono); font-size:10px; padding:1px 6px; border-radius:10px; min-width:20px; text-align:center; }
.sidebar-footer{ margin-top:auto; padding:14px 20px; border-top:1px solid var(--rule); }
.user-block{ display:flex; align-items:center; gap:10px; }
.user-avatar{ width:30px; height:30px; border-radius:50%; background:var(--brand-l); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--brand); flex-shrink:0; border:1px solid var(--brand); }
.signout-btn{ background:none; border:none; cursor:pointer; color:var(--ink3); padding:4px; border-radius:2px; display:flex; align-items:center; flex-shrink:0; transition:color .15s; }
.signout-btn:hover{ color:var(--brand); }
.user-name{ font-size:12px; font-weight:500; color:var(--ink); }
.user-role{ font-size:10px; color:var(--ink3); font-family:var(--mono); }

/* ── MAIN ── */
.main{ flex:1; display:flex; flex-direction:column; overflow:hidden; }
.topbar{ height:52px; background:white; border-bottom:2px solid var(--brand); display:flex; align-items:center; padding:0 28px; gap:16px; flex-shrink:0; }
.topbar-title{ font-family:var(--sans); font-weight:700; font-size:15px; color:var(--ink); letter-spacing:.00em; flex:1; }
.topbar-btn{ display:flex; align-items:center; gap:7px; padding:7px 16px; border-radius:2px; font-size:12px; font-weight:600; cursor:pointer; border:none; transition:all .15s; font-family:var(--sans); }
.topbar-btn.primary{ background:var(--brand); color:white; }
.topbar-btn.primary:hover{ background:var(--brand-dark); }
.topbar-btn.secondary{ background:white; color:var(--ink2); border:1px solid var(--rule); }
.topbar-btn.secondary:hover{ background:var(--surface); border-color:#9CA3AF; }
.content{ flex:1; overflow-y:auto; padding:28px; }

/* ── SCREENS ── */
.screen{ display:none; height:100%; } .screen.active{ display:block; overflow-y:auto; }

/* ── DASHBOARD ── */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.stat-card{ background:white; border:1px solid var(--rule); border-radius:2px; padding:16px 18px; position:relative; overflow:hidden; }
.stat-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.stat-card.open::before{ background:var(--brand); }
.stat-card.pending::before{ background:var(--amber); }
.stat-card.approved::before{ background:var(--green); }
.stat-card.aging::before{ background:var(--red); }
.stat-label{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:6px; }
.stat-value{ font-family:var(--sans); font-size:34px; font-weight:700; color:var(--ink); line-height:1; }
.stat-sub{ font-size:11px; color:var(--ink3); margin-top:4px; }
.panel-row{ display:grid; grid-template-columns:1.6fr 1fr; gap:14px; margin-bottom:24px; }

/* ── PANELS ── */
.panel{ background:white; border:1px solid var(--rule); border-radius:2px; overflow:hidden; }
.panel-header{ padding:13px 18px; border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:10px; }
.panel-title{ font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.05em; color:var(--brand); text-transform:uppercase; }
.panel-count{ font-family:var(--mono); font-size:11px; color:var(--ink3); margin-left:auto; }

/* ── TABLE ── */
table{ width:100%; border-collapse:collapse; }
thead th{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); padding:10px 16px; text-align:left; border-bottom:2px solid var(--rule); background:#F9FAFB; }
tbody tr{ border-bottom:1px solid var(--rule); cursor:pointer; transition:background .1s; }
tbody tr:hover{ background:#F9FAFB; }
tbody tr:last-child{ border-bottom:none; }
td{ padding:10px 16px; font-size:12px; color:var(--ink); vertical-align:middle; }
.td-id{ font-family:var(--mono); font-size:11px; color:var(--brand); font-weight:500; }
.td-mono{ font-family:var(--mono); font-size:11px; }
th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover{ color:var(--brand); }
.sort-arrow{ color:var(--brand); font-size:9px; margin-left:2px; font-weight:700; }

/* ── PILLS ── */
.pill{ display:inline-block; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.04em; padding:3px 9px; border-radius:2px; text-transform:uppercase; }
.pill-draft{ background:#F3F4F6; color:#6B7280; }
.pill-open{ background:var(--brand-l); color:var(--brand); }
.pill-review{ background:var(--amber-l); color:var(--amber); }
.pill-approved{ background:var(--green-l); color:var(--green); }
.pill-rejected{ background:var(--red-l); color:var(--red); }
.pill-closed{ background:#F3F4F6; color:#9CA3AF; }

/* ── TYPE TAGS ── */
.type-tag{ font-family:var(--mono); font-size:10px; font-weight:500; padding:2px 7px; border-radius:2px; border:1px solid; white-space:nowrap; }
.type-1{ background:#EEF7FB; color:#0E6080; border-color:#B3D8E8; }
.type-2a{ background:#F0F4FE; color:#2040A0; border-color:#BCC8F0; }
.type-2b{ background:#F5EEF8; color:#6A2090; border-color:#D4B0E4; }
.type-3{ background:var(--amber-l); color:var(--amber); border-color:#FCD34D; }
.type-23{ background:#F0FDF4; color:#15803D; border-color:#86EFAC; }

/* ── QUEUE ── */
.queue-item{ padding:12px 18px; border-bottom:1px solid var(--rule); cursor:pointer; transition:background .1s; display:flex; align-items:center; gap:12px; }
.queue-item:hover{ background:#F9FAFB; }
.queue-item:last-child{ border-bottom:none; }
.queue-left{ flex:1; min-width:0; }
.queue-id{ font-family:var(--mono); font-size:11px; color:var(--brand); font-weight:500; }
.queue-name{ font-size:12px; color:var(--ink); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-meta{ font-size:10px; color:var(--ink3); margin-top:2px; font-family:var(--mono); }
.queue-age{ font-family:var(--mono); font-size:10px; flex-shrink:0; }
.age-warn{ color:var(--red); } .age-ok{ color:var(--ink3); }

/* ── FILTERS ── */
.filter-row{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.filter-label{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink3); }
.filter-select{ border:1px solid var(--rule); border-radius:2px; padding:7px 28px 7px 11px; font-size:12px; font-family:var(--sans); color:var(--ink); background:white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center; appearance:none; outline:none; cursor:pointer; }
.filter-search{ border:1px solid var(--rule); border-radius:2px; padding:7px 11px; font-size:12px; font-family:var(--sans); color:var(--ink); outline:none; flex:1; min-width:180px; }
.filter-search:focus{ border-color:var(--brand); }
.log-table-wrap{ background:white; border:1px solid var(--rule); border-radius:2px; overflow:hidden; }

/* ── FORM ── */
.form-layout{ display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
.form-card{ background:white; border:1px solid var(--rule); border-radius:2px; overflow:hidden; }
.form-section{ padding:20px 24px; border-bottom:1px solid var(--rule); }
.form-section:last-child{ border-bottom:none; }
.form-section-title{ font-family:var(--sans); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--brand); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--brand-l); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.form-row.full{ grid-template-columns:1fr; }
.form-row.three{ grid-template-columns:1fr 1fr 1fr; }
.form-group{ display:flex; flex-direction:column; gap:5px; }
.form-label{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); }
.form-label .req{ color:var(--brand); margin-left:2px; }
.form-input,.form-select,.form-textarea{ border:1px solid var(--rule); border-radius:2px; padding:8px 11px; font-family:var(--sans); font-size:13px; color:var(--ink); background:white; outline:none; transition:border-color .15s; width:100%; }
.form-input:focus,.form-select:focus,.form-textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(210,38,48,.08); }
.form-textarea{ resize:vertical; min-height:80px; line-height:1.5; }
.form-select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; }
.type-selector{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.type-opt{ border:1.5px solid var(--rule); border-radius:2px; padding:10px 8px; cursor:pointer; text-align:center; transition:all .15s; background:white; }
.type-opt:hover{ border-color:var(--brand); background:var(--brand-p); }
.type-opt.selected{ border-color:var(--brand); background:var(--brand-l); }
.type-opt-code{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--brand); margin-bottom:3px; }
.type-opt-name{ font-size:10px; color:var(--ink3); }

/* ── IMPACT TABLE ── */
.impact-input{ border:1px solid var(--rule); border-radius:2px; padding:4px 8px; font-size:12px; width:80px; font-family:var(--mono); text-align:right; outline:none; transition:border-color .15s; }
.impact-input:focus{ border-color:var(--brand); }
.impacted-check{ accent-color:var(--brand); width:14px; height:14px; cursor:pointer; }

/* ── INFO PANEL (sidebar card) ── */
.info-panel{ background:white; border:1px solid var(--rule); border-radius:2px; overflow:hidden; position:sticky; top:0; }
.info-panel-header{ background:var(--brand); padding:14px 16px; }
.info-panel-title{ font-family:var(--sans); font-weight:700; font-size:12px; color:white; text-transform:uppercase; letter-spacing:.04em; }
.info-row{ padding:10px 16px; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.info-row:last-child{ border-bottom:none; }
.info-key{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink3); flex-shrink:0; }
.info-val{ font-size:12px; font-weight:500; color:var(--ink); text-align:right; }

/* ── DETAIL ── */
.detail-header{ background:white; border:1px solid var(--rule); border-radius:2px; padding:20px 24px; margin-bottom:18px; display:flex; align-items:flex-start; gap:20px; }
.detail-id-block{ flex:1; }
.detail-id{ font-family:var(--mono); font-size:20px; font-weight:500; color:var(--brand); }
.detail-title{ font-family:var(--sans); font-weight:700; font-size:20px; color:var(--ink); margin-top:2px; }
.detail-meta{ display:flex; gap:16px; margin-top:8px; flex-wrap:wrap; }
.detail-meta-item{ font-family:var(--mono); font-size:11px; color:var(--ink3); }
.detail-meta-item span{ color:var(--ink); font-weight:500; }
.detail-actions{ display:flex; gap:8px; flex-shrink:0; }
.action-btn{ padding:8px 18px; border-radius:2px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid; font-family:var(--sans); transition:all .15s; }
.action-approve{ background:var(--green); color:white; border-color:var(--green); }
.action-approve:hover{ background:#166534; }
.action-reject{ background:white; color:var(--red); border-color:var(--red); }
.action-reject:hover{ background:var(--red-l); }
.action-return{ background:white; color:var(--amber); border-color:var(--amber); }
.action-return:hover{ background:var(--amber-l); }
.detail-grid{ display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
.detail-section{ background:white; border:1px solid var(--rule); border-radius:2px; margin-bottom:16px; overflow:hidden; }
.detail-section-title{ font-family:var(--sans); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--brand); padding:11px 18px; background:#F9FAFB; border-bottom:1px solid var(--rule); }
.detail-body{ padding:16px 18px; font-size:13px; line-height:1.6; color:var(--ink2); }

/* ── TIMELINE ── */
.timeline{ padding:16px 18px; }
.tl-item{ display:flex; gap:14px; padding-bottom:18px; position:relative; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:''; position:absolute; left:14px; top:26px; bottom:0; width:1px; background:var(--rule); }
.tl-item:last-child::before{ display:none; }
.tl-dot{ width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; font-weight:500; position:relative; z-index:1; }
.tl-dot-create{ background:var(--brand-l); color:var(--brand); border:1.5px solid var(--brand); }
.tl-dot-submit{ background:var(--blue-l); color:var(--blue); border:1.5px solid var(--blue); }
.tl-dot-review{ background:var(--amber-l); color:var(--amber); border:1.5px solid var(--amber); }
.tl-dot-approve{ background:var(--green-l); color:var(--green); border:1.5px solid var(--green); }
.tl-dot-reject{ background:var(--red-l); color:var(--red); border:1.5px solid var(--red); }
.tl-dot-current{ background:var(--brand-l); color:var(--brand); border:2px solid var(--brand); }
.tl-content{ flex:1; }
.tl-action{ font-size:12px; font-weight:500; color:var(--ink); }
.tl-who{ font-size:11px; color:var(--ink3); font-family:var(--mono); }
.tl-comment{ margin-top:6px; font-size:11px; color:var(--ink2); background:#F9FAFB; border-left:2px solid var(--brand); padding:6px 10px; border-radius:0 2px 2px 0; line-height:1.5; }

/* ── PROGRAMS ── */
.ph{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:16px; }
.pt2{ font-family:var(--sans); font-weight:700; font-size:20px; color:var(--ink); letter-spacing:.00em; }
.ps{ font-size:12px; color:var(--ink3); margin-top:3px; font-family:var(--mono); }
.prog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
.prog-card{ background:white; border:1px solid var(--rule); border-radius:2px; overflow:hidden; cursor:pointer; transition:border-color .15s; }
.prog-card:hover{ border-color:var(--brand); }
.pct{ padding:14px 16px; border-bottom:1px solid var(--rule); background:#F9FAFB; }
.pkc{ font-family:var(--mono); font-size:10px; color:var(--ink3); letter-spacing:.06em; }
.pname{ font-family:var(--sans); font-weight:700; font-size:14px; color:var(--brand); margin-top:2px; }
.pcb{ padding:12px 16px; }
.psr{ display:flex; gap:16px; }
.psv{ font-family:var(--mono); font-size:18px; font-weight:500; color:var(--ink); }
.psl{ font-size:10px; color:var(--ink3); margin-top:1px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; }
.pbw{ margin-top:10px; height:4px; background:var(--rule); border-radius:2px; overflow:hidden; }
.pb{ height:100%; border-radius:2px; background:var(--brand); }

/* ── USERS ── */
.ugrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:24px; }
.ucard{ background:white; border:1px solid var(--rule); border-radius:2px; padding:16px 18px; display:flex; align-items:center; gap:14px; }
.ucard-av{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:500; flex-shrink:0; }
.av-pmo_admin,.av-admin{ background:var(--brand-l); color:var(--brand); border:2px solid var(--brand); }
.av-approver{ background:var(--green-l); color:var(--green); border:2px solid var(--green); }
.av-reviewer{ background:var(--amber-l); color:var(--amber); border:2px solid var(--amber); }
.av-requester{ background:var(--blue-l); color:var(--blue); border:2px solid var(--blue); }
.uinfo{ flex:1; min-width:0; }
.uname2{ font-size:13px; font-weight:500; color:var(--ink); }
.uemail{ font-family:var(--mono); font-size:10px; color:var(--ink3); margin-top:1px; }
.umeta{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.rb{ font-family:var(--mono); font-size:9px; font-weight:500; padding:2px 8px; border-radius:2px; letter-spacing:.04em; text-transform:uppercase; }
.rb-pmo_admin,.rb-admin{ background:var(--brand-l); color:var(--brand); }
.rb-approver{ background:var(--green-l); color:var(--green); }
.rb-reviewer{ background:var(--amber-l); color:var(--amber); }
.rb-requester{ background:var(--blue-l); color:var(--blue); }
.uprog{ font-size:11px; color:var(--ink3); margin-top:5px; }
.uactions{ display:flex; flex-direction:column; gap:6px; }
.ubtn{ font-size:11px; padding:4px 12px; border-radius:2px; cursor:pointer; border:1px solid var(--rule); background:white; color:var(--ink2); font-family:var(--sans); white-space:nowrap; transition:all .12s; }
.ubtn:hover{ border-color:var(--brand); color:var(--brand); }
.perm-th{ background:var(--sidebar); color:white; font-family:var(--mono); font-size:10px; letter-spacing:.06em; padding:10px 14px; text-align:center; }
.perm-th:first-child{ text-align:left; }
.perm-td{ padding:9px 14px; font-size:12px; border-bottom:1px solid var(--rule); text-align:center; }
.perm-td:first-child{ text-align:left; font-weight:500; }
.perm-y{ color:var(--green); font-size:14px; } .perm-n{ color:var(--rule); font-size:14px; }

/* ── REPORTS ── */
.rtabs{ display:flex; gap:0; margin-bottom:20px; background:white; border:1px solid var(--rule); border-radius:2px; overflow:hidden; }
.rtab{ flex:1; padding:11px 16px; text-align:center; cursor:pointer; font-size:12px; font-weight:500; color:var(--ink3); border-right:1px solid var(--rule); transition:all .15s; font-family:var(--sans); }
.rtab:last-child{ border-right:none; }
.rtab:hover{ background:#F9FAFB; color:var(--ink); }
.rtab.active{ background:var(--brand); color:white; font-weight:600; }
.rpanel{ display:none; } .rpanel.active{ display:block; }
.mstrip{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }
.mtile{ background:white; border:1px solid var(--rule); border-radius:2px; padding:14px 16px; border-top:3px solid; }
.mt-teal{ border-top-color:var(--brand); }
.mt-green{ border-top-color:var(--green); }
.mt-amber{ border-top-color:var(--amber); }
.mt-orange{ border-top-color:var(--brand); }
.mt-red{ border-top-color:var(--red); }
.mval{ font-family:var(--sans); font-weight:700; font-size:26px; color:var(--ink); line-height:1; }
.mlbl{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink3); margin-top:4px; }
.mdelta{ font-size:11px; margin-top:4px; font-family:var(--mono); }
.du{ color:var(--green); } .dd{ color:var(--red); } .df{ color:var(--ink3); }
.cgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.ccard{ background:white; border:1px solid var(--rule); border-radius:2px; overflow:hidden; }
.ccard.wide{ grid-column:1/-1; }
.ccard-hdr{ padding:13px 18px; border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; }
.ccard-title{ font-family:var(--sans); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--brand); }
.ccard-sub{ font-family:var(--mono); font-size:10px; color:var(--ink3); }
.cbody{ padding:16px 18px; }
.irow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.icard{ background:white; border:1px solid var(--rule); border-radius:2px; overflow:hidden; }
.ihdr{ padding:12px 16px; background:#F9FAFB; border-bottom:1px solid var(--rule); font-family:var(--sans); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); }
.iitem{ display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--rule); }
.iitem:last-child{ border-bottom:none; }
.irank{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ink3); width:18px; flex-shrink:0; text-align:right; }
.ilabel{ flex:1; font-size:12px; color:var(--ink); }
.ival{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--brand); }
.aging-row{ display:flex; align-items:center; padding:9px 16px; border-bottom:1px solid var(--rule); gap:12px; cursor:pointer; transition:background .1s; }
.aging-row:hover{ background:#F9FAFB; }
.aging-row:last-child{ border-bottom:none; }
.aid{ font-family:var(--mono); font-size:11px; color:var(--brand); width:70px; flex-shrink:0; }
.aname{ flex:1; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aprog{ font-family:var(--mono); font-size:10px; color:var(--ink3); width:130px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adays{ font-family:var(--mono); font-size:11px; font-weight:500; width:36px; text-align:right; flex-shrink:0; }
.erow{ display:flex; gap:10px; margin-top:16px; justify-content:flex-end; }
.ebtn{ display:flex; align-items:center; gap:6px; padding:8px 16px; border-radius:2px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid var(--rule); background:white; color:var(--ink2); font-family:var(--sans); transition:all .12s; }
.ebtn:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-p); }

/* ── PROGRESS BAR ── */
.progress-bar{ display:flex; align-items:center; margin-bottom:24px; background:white; border:1px solid var(--rule); border-radius:2px; overflow:hidden; padding:14px 20px; }
.progress-step{ display:flex; align-items:center; gap:8px; flex:1; position:relative; }
.progress-step::after{ content:'→'; color:var(--rule); font-size:14px; margin:0 8px; }
.progress-step:last-child::after{ display:none; }
.ps-dot{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; font-weight:500; flex-shrink:0; }
.ps-done{ background:var(--green-l); color:var(--green); border:1.5px solid var(--green); }
.ps-active{ background:var(--brand); color:white; }
.ps-future{ background:var(--surface); color:var(--ink3); border:1.5px solid var(--rule); }
.ps-label{ font-size:11px; font-weight:500; color:var(--ink3); }

/* ── PROGRAM HEALTH CARDS ── */
.ph-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.ph-card{ background:white; border:1px solid var(--rule); border-radius:2px; overflow:hidden; transition:box-shadow .15s; }
.ph-card:hover{ box-shadow:0 4px 16px rgba(0,0,0,0.08); }
.ph-card-hdr{ padding:14px 16px 10px; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.ph-card-name{ font-size:15px; font-weight:700; color:var(--ink); font-family:var(--sans); letter-spacing:.00em; }
.ph-card-kc{ font-family:var(--mono); font-size:10px; color:var(--brand); padding:3px 8px; background:var(--brand-p); border-radius:2px; flex-shrink:0; }
.ph-bar{ height:8px; display:flex; margin:0 16px 8px; border-radius:2px; overflow:hidden; background:var(--surface); }
.ph-seg{ height:100%; }
.ph-counts{ display:flex; gap:10px; padding:0 16px 12px; flex-wrap:wrap; }
.ph-count{ font-size:10px; font-family:var(--mono); color:var(--ink3); display:flex; align-items:center; gap:4px; }
.ph-count b{ color:var(--ink); }
.ph-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ph-body{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:4px 16px 14px; border-top:1px solid var(--rule); }
.ph-stat{ padding:10px 12px; background:var(--surface); border-radius:2px; }
.ph-stat-lbl{ font-size:9px; color:var(--ink3); font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; }
.ph-stat-val{ font-size:20px; font-weight:700; font-family:var(--mono); color:var(--ink); line-height:1; }
.ph-stat-sub{ font-size:10px; color:var(--ink3); margin-top:3px; font-family:var(--mono); }
.ph-footer{ padding:8px 16px 12px; display:flex; justify-content:space-between; font-size:10px; color:var(--ink3); font-family:var(--mono); }
.ph-empty{ padding:40px; text-align:center; color:var(--ink3); font-size:13px; }

/* ── DISCUSSION THREAD ── */
.discussion{ display:flex; flex-direction:column; }
.disc-empty{ padding:20px 0; text-align:center; color:var(--ink3); font-size:12px; }
.disc-msg{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--rule); }
.disc-msg:last-child{ border-bottom:none; }
.disc-av{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; font-weight:700; flex-shrink:0; background:var(--brand-p); color:var(--brand); border:1.5px solid var(--brand); }
.disc-av.av-approve{ background:var(--green-l); color:var(--green); border-color:var(--green); }
.disc-av.av-reject{ background:var(--red-l); color:var(--red); border-color:var(--red); }
.disc-av.av-return{ background:var(--amber-l); color:var(--amber); border-color:var(--amber); }
.disc-body{ flex:1; min-width:0; }
.disc-header{ display:flex; align-items:center; gap:8px; margin-bottom:5px; flex-wrap:wrap; }
.disc-name{ font-size:12px; font-weight:600; color:var(--ink); }
.disc-tag{ font-size:10px; font-weight:600; padding:2px 8px; border-radius:10px; font-family:var(--mono); letter-spacing:.03em; }
.disc-tag-approve{ background:var(--green-l); color:var(--green); }
.disc-tag-reject{ background:var(--red-l); color:var(--red); }
.disc-tag-return{ background:var(--amber-l); color:var(--amber); }
.disc-time{ font-size:10px; color:var(--ink3); font-family:var(--mono); margin-left:auto; white-space:nowrap; }
.disc-text{ font-size:12px; color:var(--ink2); line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.disc-compose{ display:flex; gap:10px; padding-top:16px; border-top:2px solid var(--rule); margin-top:4px; align-items:flex-end; }
.disc-compose textarea{ flex:1; min-height:64px; padding:10px 12px; border:1px solid var(--rule); border-radius:2px; font-family:var(--sans); font-size:12px; color:var(--ink); resize:vertical; line-height:1.5; }
.disc-compose textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-p); }
.disc-compose textarea::placeholder{ color:var(--ink3); }

/* ── APPROVER PICKER ── */
.approver-picker{ border:1px solid var(--rule); border-radius:2px; padding:8px; background:white; }
.approver-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.approver-chips:empty{ margin-bottom:0; }
.approver-chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px 3px 4px; background:var(--brand-p); border:1px solid var(--brand); border-radius:20px; font-size:11px; color:var(--brand); font-family:var(--mono); }
.approver-chip .chip-init{ width:20px; height:20px; border-radius:50%; background:var(--brand); color:white; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; flex-shrink:0; }
.approver-chip .chip-name{ font-weight:500; }
.approver-chip .chip-rm{ cursor:pointer; font-size:14px; line-height:1; padding:0 1px; opacity:0.6; }
.approver-chip .chip-rm:hover{ opacity:1; }
.approver-dropdown{ position:absolute; top:calc(100% + 2px); left:0; right:0; background:white; border:1px solid var(--rule); border-radius:2px; z-index:50; max-height:200px; overflow-y:auto; box-shadow:0 4px 16px rgba(0,0,0,0.1); }
.approver-opt{ display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; }
.approver-opt:hover{ background:#F9FAFB; }
.approver-opt .opt-init{ width:26px; height:26px; border-radius:50%; background:var(--brand); color:white; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; flex-shrink:0; }
.approver-opt .opt-name{ font-size:12px; font-weight:500; color:var(--ink); }
.approver-opt .opt-email{ font-size:10px; color:var(--ink3); }
.approver-opt.disabled{ opacity:0.35; pointer-events:none; }

/* ── REPORT FILTER BAR ── */
.rpt-filter-bar{ display:flex; align-items:center; gap:6px; padding:10px 24px; flex-wrap:wrap; border-bottom:1px solid var(--rule); background:white; }
.rpt-filter-lbl{ font-size:10px; color:var(--ink3); font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; flex-shrink:0; margin-right:4px; }
.rpt-chip{ font-size:12px; padding:4px 12px; border-radius:20px; border:1.5px solid var(--rule); background:white; color:var(--ink2); cursor:pointer; font-family:var(--sans); font-weight:500; transition:all .12s; }
.rpt-chip:hover{ border-color:var(--brand); color:var(--brand); }
.rpt-chip.active{ background:var(--brand); border-color:var(--brand); color:white; }
.rpt-chip-all{ font-weight:700; }

/* ── MODAL ── */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(17,17,17,0.6); z-index:100; align-items:center; justify-content:center; }
.modal-overlay.open{ display:flex; }
.modal{ background:white; border-radius:2px; width:520px; max-width:95vw; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.modal-header{ padding:18px 22px; border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:12px; }
.modal-title{ font-family:var(--sans); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--brand); flex:1; }
.modal-close{ width:28px; height:28px; border-radius:2px; background:none; border:none; cursor:pointer; font-size:16px; color:var(--ink3); display:flex; align-items:center; justify-content:center; }
.modal-close:hover{ background:#F3F4F6; color:var(--ink); }
.modal-body{ padding:20px 22px; }
.modal-footer{ padding:14px 22px; border-top:1px solid var(--rule); display:flex; justify-content:flex-end; gap:10px; }
.modal-ccb-ref{ font-family:var(--mono); font-size:12px; background:var(--brand-l); color:var(--brand); padding:4px 10px; border-radius:2px; }
.radio-group{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.radio-opt{ display:flex; align-items:center; gap:10px; padding:10px 14px; border:1.5px solid var(--rule); border-radius:2px; cursor:pointer; transition:all .12s; }
.radio-opt:hover{ border-color:var(--brand); background:var(--brand-p); }
.radio-opt.selected-approve{ border-color:var(--green); background:var(--green-l); }
.radio-opt.selected-reject{ border-color:var(--red); background:var(--red-l); }
.radio-opt.selected-return{ border-color:var(--amber); background:var(--amber-l); }
.radio-opt input{ accent-color:var(--brand); }
.radio-label{ font-size:13px; font-weight:500; }
.radio-desc{ font-size:11px; color:var(--ink3); margin-top:1px; }

/* ── TOAST ── */
.toast{ display:none; position:fixed; bottom:24px; right:24px; background:var(--green); color:white; padding:12px 20px; border-radius:2px; font-size:13px; font-weight:500; z-index:200; box-shadow:0 4px 20px rgba(0,0,0,.15); font-family:var(--sans); }
.toast.show{ display:block; animation:slideUp .25s ease; }
@keyframes slideUp{ from{ transform:translateY(12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* ── MULTI-SELECT DROPDOWN ── */
.ms-wrap{ position:relative; display:inline-block; min-width:120px; }
.ms-trigger{ display:flex !important; align-items:center; gap:6px; justify-content:space-between; width:100%; text-align:left; min-width:120px; max-width:220px; }
.ms-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-dropdown{ position:absolute; top:calc(100% + 3px); left:0; background:white; border:1px solid var(--rule); border-radius:2px; box-shadow:0 4px 20px rgba(0,0,0,.12); z-index:100; padding:4px 0; min-width:160px; max-height:280px; overflow-y:auto; }
.ms-opt{ display:flex; align-items:center; gap:8px; padding:6px 12px; cursor:pointer; font-size:12px; color:var(--ink2); white-space:nowrap; }
.ms-opt:hover{ background:var(--brand-p); }
.ms-opt-all{ font-weight:600; color:var(--ink); border-bottom:none; }
.ms-opt input[type="checkbox"]{ accent-color:var(--brand); width:13px; height:13px; cursor:pointer; flex-shrink:0; margin:0; }
.ms-divider{ height:1px; background:var(--rule); margin:2px 0; }

/* ── ACTIVITY LOG ── */
.act-badge{ display:inline-block; font-size:10px; font-family:var(--mono); padding:2px 7px; border-radius:2px; font-weight:500; letter-spacing:.02em; }
.act-green  { background:#EDFAF0; color:#1A7A3A; border:1px solid #A5D6B5; }
.act-red    { background:var(--brand-l); color:var(--brand-dark); border:1px solid #F5B0B4; }
.act-amber  { background:var(--amber-l); color:#8A5E00; border:1px solid #EAC880; }
.act-default{ background:var(--page); color:var(--ink2); border:1px solid var(--rule); }

/* ── FEEDBACK BADGES ── */
.fb-type-badge{ display:inline-block; font-size:10px; font-weight:600; padding:2px 7px; border-radius:2px; text-transform:uppercase; letter-spacing:.04em; }
.fb-type-bug  { background:var(--brand-l); color:var(--brand-dark); border:1px solid #F5B0B4; }
.fb-type-feat { background:#EAF0FF; color:#2D4E9E; border:1px solid #B0C4F5; }

.fb-sev-badge{ display:inline-block; font-size:10px; font-weight:600; padding:2px 8px; border-radius:2px; text-transform:uppercase; letter-spacing:.04em; }
.fb-sev-critical{ background:#3B0000; color:#FFE4E4; }
.fb-sev-high    { background:var(--brand-l); color:var(--brand-dark); border:1px solid #F5B0B4; }
.fb-sev-medium  { background:var(--amber-l); color:#8A5E00; border:1px solid #EAC880; }
.fb-sev-low     { background:#EDFAF0; color:#1A7A3A; border:1px solid #A5D6B5; }

.fb-status-badge{ display:inline-block; font-size:10px; font-weight:500; padding:2px 8px; border-radius:2px; text-transform:uppercase; letter-spacing:.04em; }
.fb-status-new        { background:var(--page); color:var(--ink2); border:1px solid var(--rule); }
.fb-status-open       { background:#EAF0FF; color:#2D4E9E; border:1px solid #B0C4F5; }
.fb-status-in-progress{ background:var(--amber-l); color:#8A5E00; border:1px solid #EAC880; }
.fb-status-resolved   { background:#EDFAF0; color:#1A7A3A; border:1px solid #A5D6B5; }
.fb-status-closed     { background:var(--page); color:var(--ink3); border:1px solid var(--rule); }

/* ── MISC ── */
.empty-state{ padding:40px; text-align:center; color:var(--ink3); font-family:var(--mono); font-size:12px; }
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:3px; }

/* ══════════════════════════════════════════════════════════════
   PSware theme  [data-theme="psware"]
   Colors sourced from PSW_CRM design system
   ══════════════════════════════════════════════════════════════ */
[data-theme="psware"] {
  --brand:#e74a20; --brand-dark:#c73d18; --brand-l:rgba(231,74,32,0.10); --brand-p:#fef5f2;
  --surface:#f1efee;
  --sans:'Barlow',sans-serif; --cond:'Barlow Condensed',sans-serif;
}

/* Login */
[data-theme="psware"] .login-box { border-top-color:#e74a20; }
[data-theme="psware"] .login-header { background:#154f5f; border-bottom-color:rgba(255,255,255,0.12); }
[data-theme="psware"] .login-header .product-name { color:#fff; }
[data-theme="psware"] .login-header .product-tag { color:rgba(255,255,255,0.55); }
[data-theme="psware"] .login-hw-logo { filter:brightness(0) invert(1); opacity:.9; }

/* Sidebar */
[data-theme="psware"] .sidebar { background:#154f5f; border-right-color:#1a6070; }
[data-theme="psware"] .sidebar-logo { background:#154f5f; border-bottom-color:rgba(255,255,255,0.12); }
[data-theme="psware"] .sidebar-hw-logo { filter:brightness(0) invert(1); opacity:.9; }
[data-theme="psware"] .sidebar-logo .product-name { color:rgba(255,255,255,0.92); }
[data-theme="psware"] .sidebar-logo .program-tag { color:rgba(255,255,255,0.45); }
[data-theme="psware"] .sidebar-section-label { color:rgba(255,255,255,0.38); }
[data-theme="psware"] .nav-item { color:rgba(255,255,255,0.72); border-left-color:transparent; }
[data-theme="psware"] .nav-item:hover { background:rgba(255,255,255,0.07); color:#fff; }
[data-theme="psware"] .nav-item.active { background:rgba(231,74,32,0.18); color:#fff; border-left-color:#e74a20; font-weight:600; }
[data-theme="psware"] .nav-icon { color:rgba(255,255,255,0.45); }
[data-theme="psware"] .nav-item:hover .nav-icon { color:rgba(255,255,255,0.8); }
[data-theme="psware"] .nav-item.active .nav-icon { color:#e74a20; }
[data-theme="psware"] .sidebar-footer { border-top-color:rgba(255,255,255,0.12); }
[data-theme="psware"] .user-name { color:rgba(255,255,255,0.88); }
[data-theme="psware"] .user-role { color:rgba(255,255,255,0.45); }
[data-theme="psware"] .user-avatar { background:rgba(231,74,32,0.22); border-color:#e74a20; color:#e74a20; }
[data-theme="psware"] .signout-btn { color:rgba(255,255,255,0.45); }
[data-theme="psware"] .signout-btn:hover { color:#fff; }
[data-theme="psware"] .nav-badge { background:#e74a20; }