/*
 * CaseGo — Pengurusan Kes & Rekod Digital
 * Original system concept and workflow coordination: Frankly F. C.
 * Jabatan Kerja Raya Daerah Tuaran.
 */
:root{--y:#f2c500;--ys:#fff8d8;--bg:#f8fafc;--card:#fff;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--soft:#f1f5f9;--blue:#1e3a8a;--bs:#e0f2fe;--green:#16a34a;--red:#dc2626;--warn:#d97706;--h:64px;--side:252px;--bottom:66px;--r:8px;--shadow:0 1px 3px rgba(15,23,42,.06);--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--font)}button,input,select,textarea{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin-top:0}input,select,textarea{width:100%;min-height:42px;border:1px solid var(--border);border-radius:6px;background:#fff;padding:9px 11px;color:var(--text)}textarea{resize:vertical}label{display:block;font-weight:650;margin-bottom:6px}.hidden{display:none!important}
.cg-app{min-height:100vh}.cg-header{position:fixed;top:0;left:0;right:0;height:var(--h);z-index:40;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 20px}.cg-brand{display:inline-flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text);text-align:left;padding:0}.cg-brand-mark{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--y);color:#111;font-weight:600;letter-spacing:-.04em}.cg-brand strong,.cg-brand small{display:block}.cg-brand strong{font-size:14px;line-height:1.1}.cg-brand small{font-size:11.5px;line-height:1.2;color:var(--muted)}.cg-search{flex:1;max-width:560px;margin:0 auto;height:40px;display:flex;align-items:center;border:1px solid var(--border);border-radius:999px;background:#fff;padding:0 6px 0 16px}.cg-search input{height:100%;min-height:auto;border:0;outline:0;background:transparent;padding:0;font-size:13px}.cg-search button,.cg-icon-btn{width:34px;height:34px;border:0;border-radius:999px;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center}.cg-search button:hover,.cg-icon-btn:hover{background:var(--soft);color:var(--blue)}.cg-user{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;white-space:nowrap}.cg-dot{width:9px;height:9px;border-radius:999px;display:inline-block;background:var(--muted)}.cg-dot.online{background:var(--green)}.cg-dot.offline{background:var(--red)}
.cg-sidebar{position:fixed;top:var(--h);left:0;bottom:0;width:var(--side);background:#fff;border-right:1px solid var(--border);padding:16px;z-index:30}.cg-sidebar-brand{display:flex;gap:10px;align-items:center;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border)}.cg-sidebar-brand strong,.cg-sidebar-brand small{display:block}.cg-sidebar-brand small{color:var(--muted);font-size:11.5px}.cg-side-nav{display:grid;gap:6px}.cg-side-nav button{min-height:40px;border:0;border-radius:6px;background:transparent;color:var(--text);text-align:left;padding:0 12px}.cg-side-nav button:hover,.cg-side-nav button.active{background:var(--ys);color:#3f3000}.cg-main{min-height:100vh;padding-top:var(--h);padding-left:var(--side)}.cg-bottom-nav{display:none}
.cg-screen{padding:24px;gap:16px}.cg-center{min-height:calc(100vh - var(--h));display:grid;place-items:center;text-align:center}.cg-card,.cg-panel,.cg-head,.cg-kpi,.cg-op-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}.cg-panel,.cg-op-card{}.cg-panel-head{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}.cg-panel-head h2{margin:0}.cg-panel-head p{margin:3px 0 0;color:var(--muted);font-size:12px}.cg-btn,.cg-text-btn{min-height:36px;border:1px solid var(--border);background:#fff;color:var(--text);padding:0 12px}.cg-btn.primary,.cg-text-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.cg-btn.warn{background:var(--warn);border-color:var(--warn);color:#fff}.cg-btn.danger{background:var(--red);border-color:var(--red);color:#fff}.cg-badge{display:inline-flex;align-items:center;border-radius:999px;background:var(--ys);color:#5b4500;padding:4px 9px;font-size:11px;text-transform:uppercase}.cg-badge.blue{background:var(--bs);color:var(--blue)}.cg-badge.green{background:#dcfce7;color:#166534}.cg-badge.red{background:#fee2e2;color:#991b1b}.cg-badge.gray{background:var(--soft);color:#475569}.cg-empty{padding:20px;border:1px dashed var(--border);border-radius:8px;background:#fff;color:var(--muted)}.cg-empty strong{display:block;color:var(--text);margin-bottom:4px}.cg-spinner{width:32px;height:32px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--y);animation:spin .8s linear infinite;margin:0 auto 12px}@keyframes spin{to{transform:rotate(360deg)}}.cg-toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--text);color:#fff;padding:10px 14px;border-radius:999px;box-shadow:0 10px 24px rgba(15,23,42,.2);z-index:90;font-size:13px}
.cg-head{display:flex;justify-content:space-between;gap:14px}.cg-head h1{margin:8px 0 4px}.cg-head p{margin:0;color:var(--muted);font-size:13px}.cg-head-actions{display:flex;gap:8px;align-items:flex-start}.cg-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.cg-kpi{text-align:left;display:grid;align-content:start}.cg-kpi:hover{border-color:var(--y);background:#fffdf1}.cg-kpi span{color:var(--muted);font-size:12px}.cg-kpi strong{}.cg-kpi small{color:var(--muted);font-size:11.5px}.cg-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;align-items:start}.cg-main-col,.cg-side-col{display:grid;gap:16px;min-width:0}.cg-work{display:grid;place-items:center;padding:18px;border-radius:8px;background:var(--bs);color:var(--blue)}.cg-work strong{font-size:34px;line-height:1}.cg-work span{font-size:12px;font-weight:700}.cg-division-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cg-division{border:1px solid var(--border);border-radius:6px;padding:12px}.cg-division strong{display:block;color:var(--blue);margin-bottom:8px}.cg-division dl{margin:0;display:grid;gap:6px}.cg-division div{display:flex;justify-content:space-between;gap:8px}.cg-division dt{color:var(--muted);font-size:12px}.cg-division dd{margin:0;font-weight:750}.cg-list{display:grid;gap:8px}.cg-row{border:1px solid var(--border);border-radius:6px;background:#fff;text-align:left;padding:10px 12px;display:grid;grid-template-columns:12px minmax(0,1fr);gap:9px;width:100%}.cg-row:hover,.cg-action:hover{background:var(--soft)}.cg-row strong,.cg-row small{display:block}.cg-row strong{font-size:12.5px}.cg-row small{color:var(--muted);font-size:11.5px}.cg-pin{width:7px;height:7px;border-radius:999px;background:var(--y);margin-top:6px}.cg-actions{display:grid;gap:8px}.cg-action{border:1px solid var(--border);border-radius:6px;background:#fff;text-align:left;padding:10px 12px;min-height:38px;font-weight:700}.cg-form{display:grid;gap:12px}.cg-form-row{display:grid;gap:6px}.cg-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cg-form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.cg-login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at top left,rgba(242,197,0,.22),transparent 34%),linear-gradient(135deg,#fff 0%,#f8fafc 100%)}.cg-login-card{width:min(430px,100%);background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:0 18px 50px rgba(15,23,42,.12)}.cg-login-card h1{margin:12px 0 4px;font-size:24px}.cg-login-card p{margin-bottom:18px;color:var(--muted)}.cg-demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}.cg-demo-grid button{min-height:34px;border-radius:6px;border:1px solid var(--border);background:#fff;font-size:12px}.cg-mobile-only{display:none}.cg-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cg-workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:start}.cg-status-box{display:grid;gap:8px;padding:16px;border:1px solid var(--border);border-radius:8px;background:linear-gradient(180deg,#fff,#fbfdff)}.cg-status-box strong{font-size:18px}.cg-primary-action{display:grid;gap:10px;padding:16px;border-radius:8px;background:var(--ys);border:1px solid #fde68a}.cg-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cg-info{border:1px solid var(--border);border-radius:6px;padding:10px;background:#fff}.cg-info small{display:block;color:var(--muted);font-size:11.5px;margin-bottom:3px}.cg-info strong{font-size:13px}.cg-collapse summary{cursor:pointer;font-weight:600;padding:10px 0}.cg-file-box{border:1px dashed var(--border);border-radius:8px;padding:14px;background:var(--bg);display:grid;gap:8px}.cg-file-box input{border:0;background:transparent;padding:0;min-height:auto}.cg-tabs{display:flex;gap:6px;flex-wrap:wrap}.cg-tabs button{border:1px solid var(--border);border-radius:999px;background:#fff;min-height:34px;padding:0 12px;font-size:12px}.cg-tabs button.active{background:var(--blue);border-color:var(--blue);color:#fff}
@media(max-width:980px){.cg-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cg-layout,.cg-workspace{grid-template-columns:1fr}.cg-side-col{grid-template-columns:repeat(2,minmax(0,1fr))}.cg-division-grid,.cg-info-grid{grid-template-columns:1fr}}@media(max-width:720px){.cg-mobile-only{display:inline-flex}.cg-header{padding:0 12px;gap:8px}.cg-brand small,.cg-user{display:none}.cg-search{height:36px;padding-left:12px}.cg-sidebar{display:none}.cg-main{padding-left:0;padding-bottom:var(--bottom)}.cg-screen{padding:12px}.cg-bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;height:var(--bottom);background:#fff;border-top:1px solid var(--border);z-index:50}.cg-bottom-nav button{border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:700}.cg-bottom-nav button.active{color:#5b4500;background:var(--ys)}.cg-head{display:grid;padding:15px}.cg-head-actions{display:grid;grid-template-columns:1fr 1fr}.cg-kpi-grid,.cg-side-col,.cg-demo-grid,.cg-form-grid{grid-template-columns:1fr}.cg-kpi{min-height:82px}.cg-form-actions{display:grid}.cg-status-box strong{font-size:16px}}@media(print){.cg-header,.cg-sidebar,.cg-bottom-nav,.cg-head-actions,.cg-btn,.cg-text-btn{display:none!important}.cg-main{padding:0}.cg-screen{padding:0}.cg-card,.cg-panel,.cg-head,.cg-kpi{box-shadow:none;border:1px solid #111827}}


.cg-skeleton{display:grid;gap:10px}
.cg-skeleton span{display:block;height:14px;border-radius:999px;background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);background-size:200% 100%;animation:skel 1.1s linear infinite}
.cg-skeleton span:nth-child(1){width:70%}.cg-skeleton span:nth-child(2){width:95%}.cg-skeleton span:nth-child(3){width:55%}
@keyframes skel{to{background-position:-200% 0}}
.cg-btn:focus-visible,.cg-action:focus-visible,.cg-row:focus-visible,.cg-kpi:focus-visible,.cg-side-nav button:focus-visible,.cg-bottom-nav button:focus-visible{outline:3px solid rgba(242,197,0,.45);outline-offset:2px}
.cg-btn:disabled{opacity:.58;cursor:not-allowed}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

.cg-complete-banner{padding:12px 14px;border:1px solid #bbf7d0;background:#f0fdf4;color:#166534;border-radius:8px;font-weight:750}

.cg-form[aria-busy="true"]{opacity:.72;pointer-events:none}
.cg-submit-note{font-size:12px;color:var(--muted);margin-top:6px}

/* CASEGO_LITE_ROLE_SUBMIT_WORKSPACE_007 */
.cg-role-focus{display:grid;gap:8px;border:1px solid var(--border);background:var(--soft);border-radius:10px;padding:14px}
.cg-role-focus strong{font-size:18px;color:var(--text)}
.cg-role-focus span{font-size:12px;color:var(--muted)}
.cg-role-note{padding:14px;border:1px dashed var(--border);border-radius:10px;background:var(--soft);color:var(--muted);font-size:13px;line-height:1.5}
.cg-primary-action{display:grid;gap:8px;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:10px;padding:14px;background:#fff}
.cg-primary-action strong{font-size:16px;color:var(--text)}
.cg-primary-action p{margin:0;color:var(--muted);font-size:13px}

/* CASEGO_LITE_ROLE_SUBMIT_WORKSPACE_008_HOTFIX: incoming reference label + PWA meta/install handling */


.cg-api-status {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--cg-border, #d8dee9);
  border-radius: 14px;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
  text-align: left;
  word-break: break-word;
}
.cg-api-status.hidden { display: none; }
.cg-api-status strong { display: block; margin-bottom: 4px; }
.cg-api-status p { margin: 0; color: #4b5563; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; white-space: pre-wrap; }
.cg-api-status.info { border-color: #93c5fd; background: #eff6ff; }
.cg-api-status.success { border-color: #86efac; background: #f0fdf4; }
.cg-api-status.error { border-color: #fca5a5; background: #fef2f2; }
.cg-btn:disabled { opacity: .65; cursor: not-allowed; }

.cg-form-note{border:1px solid var(--border);background:#fffdf1;border-radius:8px;padding:10px 12px;color:#4b5563;font-size:12.5px;line-height:1.45}.cg-form-note strong{color:#111827}


/* 017 Enterprise login shell */
body.cg-public-page .cg-header,
body.cg-public-page .cg-sidebar,
body.cg-public-page .cg-bottom-nav{display:none!important}
body.cg-public-page .cg-main{padding:0!important;min-height:100vh}
.cg-login-enterprise{min-height:100vh;display:grid;grid-template-columns:minmax(360px,1fr) minmax(420px,620px);background:#fff;overflow:hidden}
.cg-login-hero{position:relative;display:grid;place-items:center;padding:48px;background:radial-gradient(circle at 16% 12%,rgba(242,197,0,.38),transparent 32%),linear-gradient(135deg,#0f172a 0%,#1e293b 52%,#111827 100%);color:#fff}
.cg-login-hero:after{content:"";position:absolute;inset:auto -90px -120px auto;width:320px;height:320px;border-radius:999px;background:rgba(242,197,0,.18);filter:blur(6px)}
.cg-login-hero-inner{position:relative;z-index:1;max-width:540px}
.cg-login-bigmark{width:72px;height:72px;border-radius:18px;font-size:24px;margin-bottom:26px}
.cg-login-eyebrow{margin:0 0 10px;color:#facc15;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.cg-login-hero h1{margin:0 0 14px;font-size:44px;line-height:1.06;letter-spacing:-.04em}
.cg-login-hero p{color:#cbd5e1;font-size:16px;margin:0}
.cg-login-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.cg-login-points span{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800}
.cg-login-panel{display:grid;place-items:center;padding:42px;background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)}
.cg-login-enterprise .cg-login-card{width:min(440px,100%);border-radius:22px;padding:28px;box-shadow:0 24px 70px rgba(15,23,42,.15)}
.cg-login-card-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}.cg-login-card-head strong,.cg-login-card-head small{display:block}.cg-login-card-head small{color:var(--muted);font-size:12px}.cg-login-card h2{margin:0 0 6px;font-size:28px;letter-spacing:-.03em}.cg-login-submit{width:100%;height:46px}.cg-login-note{display:block;color:var(--muted);margin-top:12px}.cg-public-page .cg-toast{left:50%;transform:translateX(-50%)}
@media(max-width:860px){.cg-login-enterprise{grid-template-columns:1fr}.cg-login-hero{min-height:290px;padding:32px 22px}.cg-login-hero h1{font-size:32px}.cg-login-panel{padding:24px 16px 36px}}

/* 018B Public QR Tracking */
.cg-tracking-public {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: radial-gradient(circle at top left, rgba(245,197,24,.2), transparent 38%), #f6f8fb;
}
.cg-tracking-card {
  width: min(520px, 100%);
  background: #fff;
  border: 1px solid var(--cg-border, #dbe3ef);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .12);
}
.cg-api-status.success { background: #ecfdf3; border-color: #bbf7d0; color: #166534; }
.cg-api-status.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.cg-alert{border:1px solid var(--cg-border,#d8dee9);border-radius:14px;padding:12px 14px;margin:10px 0;background:#fff}.cg-alert.warning{border-color:#f59e0b;background:#fff7ed;color:#7c2d12}


/* 018F QR Print Slip Fix */
.cg-qr-slip-panel{display:grid;gap:12px}
.cg-optional-panel{border:1px solid var(--border);border-radius:14px;background:#fff;padding:0;margin-top:4px;overflow:hidden}
.cg-optional-panel summary{cursor:pointer;padding:14px 16px;font-weight:800;color:#111827;background:#f8fafc;border-bottom:1px solid var(--border)}
.cg-optional-panel[open] summary{background:#f1f5f9}
.cg-optional-panel .cg-form{padding:14px 16px 16px}
.cg-action.primary{background:#1f3f98;color:#fff;border-color:#1f3f98}
.cg-print-slip-root{display:none}
body.cg-printing-slip .cg-print-slip-root{display:block}
.cg-print-slip{width:105mm;min-height:148mm;padding:12mm;background:#fff;color:#111;font-family:Arial,sans-serif;border:1px solid #111}
.cg-print-slip-head{display:flex;align-items:center;gap:12px;border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:12px}
.cg-print-slip-head h1{font-size:16px;line-height:1.25;margin:0;color:#111}.cg-print-slip-head p{font-size:12px;margin:3px 0 0;color:#333}
.cg-print-qr-box{display:grid;place-items:center;border:1px dashed #111;padding:10px;margin:12px 0}.cg-print-qr-box img{width:44mm;height:44mm;object-fit:contain}
.cg-print-slip-info{font-size:12px;line-height:1.45}.cg-print-slip-info p{margin:6px 0;color:#111}.cg-print-slip-info span{font-size:10px;word-break:break-all}
.cg-print-slip-note{margin-top:14px;border-top:1px solid #111;padding-top:10px;font-size:11px;line-height:1.45;color:#111}
@media print{
  body.cg-printing-slip .cg-app > *{display:none!important}
  body.cg-printing-slip #cgPrintSlipRoot{display:block!important;position:static!important}
  body.cg-printing-slip{background:#fff!important;margin:0!important}
  body.cg-printing-slip .cg-print-slip{border:0;width:auto;min-height:auto;margin:0;padding:10mm;box-shadow:none}
  @page{size:A5;margin:8mm}
}


/* 018G QR print privacy/performance fix */
.cg-tracking-card .cg-form-note{line-height:1.45}
@media print{
  @page{size:A5 portrait;margin:8mm}
  html,body{width:auto!important;height:auto!important;overflow:hidden!important;background:#fff!important}
  body.cg-printing-slip *{visibility:hidden!important}
  body.cg-printing-slip #cgPrintSlipRoot,
  body.cg-printing-slip #cgPrintSlipRoot *{visibility:visible!important}
  body.cg-printing-slip #cgPrintSlipRoot{display:block!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;margin:0!important;padding:0!important}
  body.cg-printing-slip .cg-print-slip{display:block!important;width:100%!important;max-width:none!important;min-height:0!important;margin:0!important;padding:8mm!important;border:0!important;box-shadow:none!important;page-break-after:avoid!important;break-after:avoid!important}
  body.cg-printing-slip .cg-print-qr-box img{display:block!important;visibility:visible!important}
}


/* 018 Tracking receipt display fix */
.cg-receipt-summary {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 12px;
}

/* 019 Role Task Inbox + Dashboard Edit */
.cg-officer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.cg-officer-card {
  border: 1px solid var(--cg-border);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.cg-officer-card strong,
.cg-officer-card small {
  display: block;
}
.cg-officer-card small {
  color: var(--cg-muted);
  margin: 2px 0 10px;
}
.cg-officer-card div {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--cg-border-soft, #edf1f7);
  padding-top: 8px;
  margin-top: 8px;
}
.cg-form-row small {
  display: block;
  color: var(--cg-muted);
  margin-top: 6px;
  font-size: 12px;
}


/* 007 No Outgoing Workflow + UI Polish */
.cg-head{border-radius:22px;background:linear-gradient(135deg,#ffffff 0%,#fffbea 55%,#f8fafc 100%);box-shadow:0 12px 34px rgba(15,23,42,.06)}
.cg-panel,.cg-kpi,.cg-op-card{border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.055)}
.cg-kpi{position:relative;overflow:hidden;border:0;background:linear-gradient(180deg,#fff,#fbfdff)}
.cg-kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--y)}
.cg-status-box{border-radius:18px;background:linear-gradient(135deg,#fff 0%,#f8fafc 100%)}
.cg-primary-action{border-radius:18px;border-left:5px solid var(--y);background:linear-gradient(135deg,#fffdf1 0%,#fff 100%)}
.cg-form-note.cg-decision-note{background:#f8fafc;border-color:#cbd5e1;color:#0f172a;font-size:14px}.cg-form-note.cg-decision-note strong{font-size:16px}
.cg-btn.primary{background:#1e3a8a;border-color:#1e3a8a}.cg-btn.primary:hover,.cg-action.primary:hover{filter:brightness(.97);transform:translateY(-1px)}
.cg-btn,.cg-action,.cg-row,.cg-kpi{transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}.cg-row:hover,.cg-action:hover,.cg-kpi:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(15,23,42,.08)}
.cg-no-outgoing-box{border:1px solid #fde68a;background:#fffbeb;color:#713f12;border-radius:18px;padding:14px;display:grid;gap:8px}
.cg-dashboard-hero{padding:18px;border-radius:22px;background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff}.cg-dashboard-hero small{color:#facc15}


/* 007 Official Branding Restore */
.cg-official-logo,
.cg-login-logo-img,
.cg-splash-logo,
.cg-brand-logo-img {
  display: block;
  max-width: 148px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cg-brand-icon,
.cg-cg-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 12px;
}

.cg-login-logo-img {
  max-width: 180px;
  margin-bottom: 10px;
}

.cg-shell-brand img,
.cg-sidebar-brand img {
  max-width: 132px;
  height: auto;
}


/* ============================================================
   007 — Branding Display + Build Label Fix
   ============================================================ */
.cg-shell-wordmark-img,
.cg-sidebar-wordmark-img,
.cg-brand-logo-img,
.cg-official-logo {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cg-shell-wordmark-img {
  max-width: 92px;
  max-height: 34px;
}

.cg-sidebar-brand .cg-shell-wordmark-img,
.cg-shell-brand .cg-shell-wordmark-img {
  max-width: 126px;
  max-height: 46px;
}

.cg-shell-org {
  display: block;
  font-size: 11px;
  color: var(--cg-muted, #64748b);
  margin-top: 4px;
  line-height: 1.2;
}

.cg-login-logo-img,
.cg-login-hero-logo-img {
  display: block;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 16px;
}

.cg-login-card-logo-img {
  display: block;
  max-width: 108px;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cg-brand-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 12px;
  background: #ffffff;
}

.cg-topbar .cg-shell-wordmark-img {
  max-width: 96px;
  max-height: 34px;
}

.cg-sidebar .cg-shell-wordmark-img {
  max-width: 134px;
  max-height: 48px;
}

@media (max-width: 720px) {
  .cg-shell-wordmark-img {
    max-width: 86px;
  }

  .cg-sidebar-brand .cg-shell-wordmark-img {
    max-width: 118px;
  }

  .cg-login-logo-img,
  .cg-login-hero-logo-img {
    max-width: 158px;
  }
}


/* ============================================================
   007 — HARD visible branding fix
   Purpose: make logo replacement visible, not runtime-only.
   ============================================================ */

.cg-logo-wordmark,
.cg-logo-wordmark-shell,
.cg-login-logo-img,
.cg-login-hero-logo-img,
.cg-login-card-logo-img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.cg-logo-wordmark-shell {
  max-width: 132px !important;
  max-height: 46px !important;
}

.cg-topbar .cg-logo-wordmark-shell,
.cg-header .cg-logo-wordmark-shell {
  max-width: 80px !important;
  max-height: 60px !important;
}

.cg-sidebar .cg-logo-wordmark-shell,
.cg-sidebar-brand .cg-logo-wordmark-shell {
  max-width: 146px !important;
  max-height: 52px !important;
}

.cg-login-logo-img,
.cg-login-hero-logo-img {
  max-width: 210px !important;
  max-height: 74px !important;
  margin-bottom: 16px !important;
}

.cg-login-card-logo-img {
  max-width: 116px !important;
  max-height: 42px !important;
}

.cg-icon-img {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}

.cg-shell-org {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: var(--cg-muted, #64748b) !important;
  margin-top: 4px !important;
}

.cg-logo-replaced-020g {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* ============================================================
   007 — Branding Layout Correction
   ============================================================ */

/* General official logo */
.cg-logo-wordmark {
  display: block !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

/* Header: compact and horizontal */
.cg-logo-wordmark-header {
  max-width: 88px !important;
  max-height: 30px !important;
}

.cg-brand-org-inline {
  display: inline-block !important;
  margin-left: 10px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: var(--cg-muted, #64748b) !important;
  white-space: nowrap !important;
}

.cg-shell-brand,
.cg-app-brand,
.cg-topbar-brand,
.cg-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* Sidebar: logo on top, tagline below; prevents broken vertical text */
.cg-sidebar-brand,
aside .cg-brand,
aside .cg-app-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.cg-logo-wordmark-sidebar {
  max-width: 140px !important;
  max-height: 48px !important;
}

.cg-brand-tagline-block {
  display: block !important;
  max-width: 170px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: var(--cg-muted, #64748b) !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* Login hero: full CaseGo wordmark */
.cg-logo-wordmark-login-hero {
  max-width: 220px !important;
  max-height: 78px !important;
  margin-bottom: 22px !important;
}

/* Login card: compact wordmark */
.cg-logo-wordmark-login-card {
  max-width: 112px !important;
  max-height: 40px !important;
  margin-right: 10px !important;
}

.cg-login-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Small CG icon only */
.cg-small-icon-img,
.cg-icon-img {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  border-radius: 9px !important;
}

/* Hide visual clutter from old logo blocks when replaced */
.cg-logo-replaced-020g,
.cg-logo-replaced-020h {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

@media (max-width: 720px) {
  .cg-logo-wordmark-header {
    max-width: 78px !important;
  }

  .cg-brand-org-inline {
    display: none !important;
  }

  .cg-logo-wordmark-sidebar {
    max-width: 128px !important;
  }

  .cg-logo-wordmark-login-hero {
    max-width: 170px !important;
  }
}


/* ============================================================
   007 — Branding Placement Refinement
   ============================================================ */

/* Header: icon CG only */
.cg-header-icon-only {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}

.cg-shell-brand,
.cg-app-brand,
.cg-topbar-brand,
.cg-header-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
}

/* Sidebar top centered */
.cg-sidebar-brand,
aside .cg-brand,
aside .cg-app-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
}

.cg-logo-wordmark-sidebar-centered {
  display: block !important;
  max-width: 128px !important;
  max-height: 46px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

.cg-brand-tagline-centered {
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 170px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: var(--cg-muted, #64748b) !important;
}

/* Login hero */
.cg-logo-wordmark-login-hero-top {
  display: block !important;
  max-width: 190px !important;
  max-height: 68px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 0 18px 0 !important;
}

.cg-login-hero-inner .cg-eyebrow,
.cg-login-hero-inner .cg-login-eyebrow {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

/* Login panel right: text only, no icon/logo */
.cg-login-card-head {
  display: block !important;
  min-height: auto !important;
  margin-bottom: 18px !important;
}

.cg-login-panel-head-text-only {
  display: block !important;
}

.cg-login-panel-head-text-only small {
  display: block !important;
  color: var(--cg-muted, #64748b) !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

/* Hide residual title text inside sidebar if any */
.cg-sidebar-brand > strong,
.cg-sidebar-brand > .cg-brand-title,
aside .cg-brand > strong,
aside .cg-app-brand > strong {
  display: none !important;
}

@media (max-width: 720px) {
  .cg-logo-wordmark-login-hero-top {
    max-width: 158px !important;
  }
  .cg-logo-wordmark-sidebar-centered {
    max-width: 112px !important;
  }
}


/* ============================================================
   007 — Direct Login Branding Patch
   ============================================================ */

/* Login hero left: full logo replaces old CG icon */
.cg-logo-wordmark-login-hero-top {
  display: block !important;
  max-width: 210px !important;
  max-height: 76px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 0 16px 0 !important;
}

.cg-login-hero-inner .cg-login-bigmark,
.cg-login-hero-inner .cg-brand-icon,
.cg-login-hero-inner .cg-icon-img:not(.cg-header-icon-only) {
  display: none !important;
}

/* Login panel right: no logo/icon/header block */
.cg-login-card-head {
  display: none !important;
}

.cg-login-card > img,
.cg-login-card > .cg-logo-wordmark,
.cg-login-card > .cg-brand-icon,
.cg-login-card > .cg-icon-img {
  display: none !important;
}

.cg-login-card h2 {
  margin-top: 0 !important;
}

/* Header after login: CG icon only */
.cg-header-icon-only {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

/* Sidebar: centered wordmark + centered tagline */
.cg-sidebar-brand,
aside .cg-brand,
aside .cg-app-brand {
  align-items: center !important;
  text-align: center !important;
}

.cg-logo-wordmark-sidebar-centered {
  display: block !important;
  max-width: 130px !important;
  max-height: 46px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.cg-brand-tagline-centered {
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 170px !important;
}

/* Clean version text */
.cg-login-eyebrow {
  text-transform: none !important;
  letter-spacing: .02em !important;
}


/* ============================================================
   007 — Mobile-First PWA UX Redesign
   Goal: app-like smartphone experience, not website layout.
   ============================================================ */

.cg-login-enterprise {
  min-height: 100svh !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(242, 197, 0, 0.18), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(242, 197, 0, 0.18), transparent 24%),
    linear-gradient(135deg, #101827 0%, #172235 48%, #f8fafc 48%, #f8fafc 100%) !important;
}

.cg-login-hero {
  position: relative !important;
  overflow: hidden !important;
}

.cg-login-hero::after {
  content: "" !important;
  position: absolute !important;
  right: -120px !important;
  bottom: -140px !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 999px !important;
  background: rgba(242, 197, 0, 0.18) !important;
  pointer-events: none !important;
}

.cg-login-hero-inner { position: relative !important; z-index: 1 !important; }
.cg-logo-wordmark-login-hero-top { filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)) !important; }
.cg-login-eyebrow { color: #fff !important; opacity: .92 !important; text-transform: none !important; }
.cg-login-hero-inner h1, .cg-login-hero-inner > p { color: #fff !important; }

.cg-login-points span {
  backdrop-filter: blur(12px) !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
}

.cg-login-panel { background: transparent !important; }

.cg-login-card {
  border: 1px solid rgba(226,232,240,.92) !important;
  box-shadow: 0 26px 70px rgba(15,23,42,.16) !important;
}

.cg-login-card h2 { letter-spacing: -0.03em !important; }
.cg-login-card input { background: #eaf2ff !important; border-color: #d8e3f5 !important; }
.cg-login-submit { box-shadow: 0 14px 26px rgba(29,78,216,.24) !important; }

@media (max-width: 720px) {
  html, body { background: #f8fafc !important; }

  body.cg-route-login #cgHeader,
  body.cg-route-login #cgSidebar,
  body.cg-route-login #cgBottomNav,
  body.cg-route-login .cg-header,
  body.cg-route-login .cg-sidebar,
  body.cg-route-login .cg-bottom-nav {
    display: none !important;
  }

  body.cg-route-login .cg-main,
  body.cg-route-login #cgMain {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100svh !important;
  }

  .cg-login-enterprise {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100svh !important;
    background: #f8fafc !important;
  }

  .cg-login-hero {
    min-height: auto !important;
    padding: calc(28px + env(safe-area-inset-top)) 20px 22px !important;
    border-radius: 0 0 32px 32px !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(242,197,0,.23), transparent 32%),
      radial-gradient(circle at 100% 100%, rgba(242,197,0,.18), transparent 30%),
      linear-gradient(145deg, #111827 0%, #18243a 100%) !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.22) !important;
  }

  .cg-login-hero::after {
    width: 210px !important;
    height: 210px !important;
    right: -74px !important;
    bottom: -94px !important;
    opacity: .85 !important;
  }

  .cg-login-hero-inner { max-width: 100% !important; }

  .cg-logo-wordmark-login-hero-top {
    max-width: 152px !important;
    max-height: 54px !important;
    margin: 0 0 14px 0 !important;
  }

  .cg-login-eyebrow {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
  }

  .cg-login-hero-inner h1 {
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.055em !important;
    margin: 0 0 12px 0 !important;
    max-width: 340px !important;
  }

  .cg-login-hero-inner > p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 0 18px 0 !important;
    opacity: .92 !important;
  }

  .cg-login-points {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 1px 0 2px !important;
    scrollbar-width: none !important;
  }

  .cg-login-points::-webkit-scrollbar { display: none !important; }

  .cg-login-points span {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .cg-login-panel {
    flex: 1 !important;
    display: block !important;
    padding: 18px 14px calc(26px + env(safe-area-inset-bottom)) !important;
    background: #f8fafc !important;
  }

  .cg-login-card {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 25px 24px 24px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(226,232,240,.96) !important;
    box-shadow: 0 22px 60px rgba(15,23,42,.12) !important;
  }

  .cg-login-card h2 {
    font-size: 25px !important;
    line-height: 1.12 !important;
    margin: 0 0 9px 0 !important;
    letter-spacing: -0.045em !important;
  }

  .cg-login-card > p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 0 18px 0 !important;
  }

  .cg-form-row { margin-bottom: 15px !important; }

  .cg-form-row label {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-bottom: 7px !important;
  }

  .cg-form-row input {
    min-height: 48px !important;
    border-radius: 11px !important;
    padding: 11px 13px !important;
    font-size: 14px !important;
  }

  .cg-login-submit {
    min-height: 50px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  .cg-login-note {
    display: block !important;
    margin-top: 14px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #64748b !important;
  }
}

@media (max-width: 390px) {
  .cg-login-hero { padding: calc(22px + env(safe-area-inset-top)) 18px 18px !important; }
  .cg-logo-wordmark-login-hero-top { max-width: 138px !important; margin-bottom: 11px !important; }
  .cg-login-hero-inner h1 { font-size: 24px !important; }
  .cg-login-card { padding: 23px 22px 22px !important; }
  .cg-login-panel { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 860px) {
  body.cg-route-app .cg-sidebar,
  body.cg-route-app #cgSidebar { display: none !important; }

  body.cg-route-app .cg-header,
  body.cg-route-app #cgHeader {
    position: sticky !important;
    top: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 0 14px !important;
    backdrop-filter: blur(18px) !important;
    background: rgba(255,255,255,.88) !important;
    border-bottom: 1px solid rgba(226,232,240,.82) !important;
    z-index: 50 !important;
  }

  body.cg-route-app .cg-brand {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
  }

  body.cg-route-app .cg-brand small { display: none !important; }

  body.cg-route-app .cg-brand img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
  }

  body.cg-route-app .cg-search {
    flex: 1 !important;
    max-width: none !important;
    margin: 0 10px !important;
  }

  body.cg-route-app .cg-search input {
    min-height: 38px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    background: #f8fafc !important;
  }

  body.cg-route-app .cg-user { font-size: 0 !important; }
  body.cg-route-app .cg-user #cgCurrentUser { display: none !important; }

  body.cg-route-app .cg-main,
  body.cg-route-app #cgMain {
    margin-left: 0 !important;
    padding: 14px 12px calc(86px + env(safe-area-inset-bottom)) !important;
    background: radial-gradient(circle at 0% 0%, rgba(242,197,0,.09), transparent 20%), #f6f8fb !important;
    min-height: calc(100svh - 58px) !important;
  }

  body.cg-route-app .cg-bottom-nav,
  body.cg-route-app #cgBottomNav {
    display: flex !important;
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    height: 62px !important;
    border-radius: 22px !important;
    background: rgba(15,23,42,.94) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 18px 44px rgba(15,23,42,.30) !important;
    backdrop-filter: blur(16px) !important;
    z-index: 80 !important;
    padding: 7px !important;
  }

  body.cg-route-app .cg-bottom-nav button,
  body.cg-route-app #cgBottomNav button {
    color: rgba(255,255,255,.72) !important;
    border-radius: 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  body.cg-route-app .cg-bottom-nav button.active,
  body.cg-route-app #cgBottomNav button.active {
    background: #f2c500 !important;
    color: #111827 !important;
  }

  body.cg-route-app .cg-card,
  body.cg-route-app .cg-panel,
  body.cg-route-app .cg-workspace-card,
  body.cg-route-app .cg-dashboard-card {
    border-radius: 22px !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
  }
}

@media (min-width: 861px) {
  body.cg-route-app .cg-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e5eaf1 !important;
    box-shadow: 10px 0 35px rgba(15,23,42,.035) !important;
  }

  body.cg-route-app .cg-main {
    background: radial-gradient(circle at 8% 0%, rgba(242,197,0,.08), transparent 22%),
      linear-gradient(180deg, #f8fafc 0%, #f3f6fa 100%) !important;
  }

  body.cg-route-app .cg-side-nav button.active {
    background: #fff6cc !important;
    color: #111827 !important;
    border-left: 4px solid #f2c500 !important;
  }
}


/* ============================================================
   007 — Mobile App Shell & Dashboard Polish
   Focus: After-login PWA app feel, mobile dashboard readability,
   floating bottom nav, distinct desktop sidebar.
   ============================================================ */

body.cg-route-app { background: #f6f8fb !important; }
body.cg-route-app .cg-main { transition: background .18s ease, padding .18s ease !important; }

@media (max-width: 860px) {
  body.cg-route-app { overflow-x: hidden !important; }
  body.cg-route-app .cg-sidebar, body.cg-route-app #cgSidebar { display: none !important; }
  body.cg-route-app .cg-header, body.cg-route-app #cgHeader {
    position: sticky !important; top: 0 !important;
    height: calc(60px + env(safe-area-inset-top)) !important;
    min-height: calc(60px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 14px 0 !important;
    display: grid !important; grid-template-columns: 38px minmax(0, 1fr) auto !important;
    gap: 9px !important; align-items: center !important;
    background: rgba(255,255,255,.92) !important; backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(226,232,240,.82) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.06) !important; z-index: 80 !important;
  }
  body.cg-route-app .cg-brand { width:38px!important; min-width:38px!important; height:38px!important; padding:0!important; border-radius:13px!important; display:grid!important; place-items:center!important; background:rgba(242,197,0,.12)!important; }
  body.cg-route-app .cg-brand img { width:30px!important; height:30px!important; object-fit:contain!important; }
  body.cg-route-app .cg-brand small { display:none!important; }
  body.cg-route-app .cg-search { max-width:none!important; margin:0!important; min-width:0!important; }
  body.cg-route-app .cg-search input { width:100%!important; min-height:40px!important; border-radius:999px!important; background:#f8fafc!important; border:1px solid #e2e8f0!important; font-size:12px!important; padding-left:14px!important; }
  body.cg-route-app .cg-search button { min-width:36px!important; }
  body.cg-route-app .cg-user { min-width:18px!important; justify-content:flex-end!important; }
  body.cg-route-app .cg-user #cgCurrentUser { display:none!important; }
  body.cg-route-app .cg-main, body.cg-route-app #cgMain { margin-left:0!important; padding:14px 12px calc(92px + env(safe-area-inset-bottom))!important; min-height:calc(100svh - 60px)!important; background:radial-gradient(circle at 0% 0%, rgba(242,197,0,.10), transparent 20%), linear-gradient(180deg,#f7f9fc 0%,#eef3f8 100%)!important; }

  body.cg-route-app .cg-bottom-nav, body.cg-route-app #cgBottomNav { display:flex!important; position:fixed!important; left:12px!important; right:12px!important; bottom:calc(10px + env(safe-area-inset-bottom))!important; height:64px!important; padding:7px!important; border-radius:24px!important; background:rgba(15,23,42,.94)!important; border:1px solid rgba(255,255,255,.10)!important; box-shadow:0 20px 54px rgba(15,23,42,.34)!important; backdrop-filter:blur(18px)!important; z-index:100!important; gap:4px!important; }
  body.cg-route-app .cg-bottom-nav button, body.cg-route-app #cgBottomNav button { min-height:48px!important; border-radius:17px!important; color:rgba(255,255,255,.72)!important; font-size:10.5px!important; line-height:1.12!important; font-weight:800!important; padding:5px 6px!important; }
  body.cg-route-app .cg-bottom-nav button.active, body.cg-route-app #cgBottomNav button.active { background:#f2c500!important; color:#111827!important; box-shadow:inset 0 -1px 0 rgba(0,0,0,.08), 0 10px 18px rgba(242,197,0,.20)!important; }

  body.cg-route-app .cg-screen, body.cg-route-app section { max-width:100%!important; }
  body.cg-route-app .cg-dashboard, body.cg-route-app .cg-dashboard-shell, body.cg-route-app .cg-workspace, body.cg-route-app .cg-page { gap:12px!important; }
  body.cg-route-app .cg-card, body.cg-route-app .cg-panel, body.cg-route-app .cg-dashboard-card, body.cg-route-app .cg-workspace-card, body.cg-route-app .cg-mobile-polish-card { border-radius:22px!important; border:1px solid rgba(226,232,240,.92)!important; box-shadow:0 14px 34px rgba(15,23,42,.075)!important; background:rgba(255,255,255,.96)!important; }
  body.cg-route-app .cg-card, body.cg-route-app .cg-panel { padding:16px!important; }
  body.cg-route-app .cg-dashboard-hero, body.cg-route-app .cg-hero, body.cg-route-app .cg-workspace-hero { border-radius:24px!important; padding:17px 16px!important; margin-bottom:12px!important; background:linear-gradient(145deg,#ffffff 0%,#fffaf0 100%)!important; border:1px solid rgba(226,232,240,.92)!important; box-shadow:0 14px 34px rgba(15,23,42,.07)!important; }
  body.cg-route-app .cg-dashboard-hero h1, body.cg-route-app .cg-hero h1, body.cg-route-app .cg-workspace-hero h1, body.cg-route-app h1 { font-size:22px!important; line-height:1.15!important; letter-spacing:-0.04em!important; }
  body.cg-route-app h2 { font-size:18px!important; line-height:1.22!important; letter-spacing:-0.025em!important; }
  body.cg-route-app h3 { font-size:15px!important; }
  body.cg-route-app p, body.cg-route-app small { line-height:1.45!important; }

  body.cg-route-app .cg-kpi-grid, body.cg-route-app .cg-stat-grid, body.cg-route-app .cg-dashboard-grid, body.cg-route-app .cg-summary-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; }
  body.cg-route-app .cg-kpi-card, body.cg-route-app .cg-stat-card, body.cg-route-app .cg-summary-card { min-height:86px!important; padding:14px!important; border-radius:20px!important; }
  body.cg-route-app .cg-kpi-card strong, body.cg-route-app .cg-stat-card strong, body.cg-route-app .cg-summary-card strong { font-size:24px!important; line-height:1!important; }

  body.cg-route-app .cg-task-list, body.cg-route-app .cg-list, body.cg-route-app .cg-activity-list { display:grid!important; gap:9px!important; }
  body.cg-route-app .cg-list-item, body.cg-route-app .cg-task-item, body.cg-route-app .cg-activity-item { border-radius:18px!important; padding:13px 14px!important; background:#ffffff!important; border:1px solid rgba(226,232,240,.88)!important; }
  body.cg-route-app button, body.cg-route-app .cg-btn, body.cg-route-app a.cg-btn { min-height:42px!important; }
  body.cg-route-app .cg-btn.primary, body.cg-route-app button.primary { border-radius:13px!important; }
  body.cg-route-app .cg-content-grid, body.cg-route-app .cg-two-column, body.cg-route-app .cg-layout-grid { display:grid!important; grid-template-columns:1fr!important; gap:12px!important; }
  body.cg-route-app .cg-desktop-only { display:none!important; }
}

@media (max-width:390px){
  body.cg-route-app .cg-main, body.cg-route-app #cgMain { padding-left:10px!important; padding-right:10px!important; }
  body.cg-route-app .cg-kpi-grid, body.cg-route-app .cg-stat-grid, body.cg-route-app .cg-dashboard-grid, body.cg-route-app .cg-summary-grid { gap:8px!important; }
  body.cg-route-app .cg-card, body.cg-route-app .cg-panel { padding:14px!important; }
  body.cg-route-app .cg-bottom-nav, body.cg-route-app #cgBottomNav { left:9px!important; right:9px!important; }
}

@media (min-width:861px){
  body.cg-route-app .cg-sidebar, body.cg-route-app #cgSidebar { background:#fff!important; border-right:1px solid #e5eaf1!important; box-shadow:14px 0 40px rgba(15,23,42,.04)!important; }
  body.cg-route-app .cg-sidebar-brand { padding-top:20px!important; padding-bottom:18px!important; border-bottom:1px solid #eef2f7!important; }
  body.cg-route-app .cg-side-nav { padding-top:12px!important; }
  body.cg-route-app .cg-side-nav button { border-radius:12px!important; margin:3px 12px!important; }
  body.cg-route-app .cg-side-nav button.active { background:linear-gradient(90deg,#fff2b0 0%,#fff8dd 100%)!important; color:#111827!important; border-left:4px solid #f2c500!important; box-shadow:0 8px 18px rgba(242,197,0,.13)!important; }
  body.cg-route-app .cg-main, body.cg-route-app #cgMain { background:radial-gradient(circle at 6% 0%, rgba(242,197,0,.075), transparent 22%), linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%)!important; }
  body.cg-route-app .cg-header { background:rgba(255,255,255,.92)!important; backdrop-filter:blur(14px)!important; border-bottom:1px solid #e5eaf1!important; }
}


/* ============================================================
   007 — Global Search + Smart Search Result
   ============================================================ */
.cg-search-workspace{display:grid!important;gap:16px!important}
.cg-search-hero{padding:24px!important;border-radius:28px!important;background:radial-gradient(circle at 10% 0%,rgba(242,197,0,.22),transparent 30%),linear-gradient(145deg,#111827 0%,#1f2937 100%)!important;color:#fff!important;box-shadow:0 18px 46px rgba(15,23,42,.18)!important}
.cg-search-hero span{display:inline-flex!important;padding:6px 10px!important;border-radius:999px!important;background:rgba(242,197,0,.18)!important;color:#f8fafc!important;font-size:12px!important;font-weight:800!important;margin-bottom:12px!important}
.cg-search-hero h1{color:#fff!important;margin:0 0 8px 0!important;letter-spacing:-.045em!important}
.cg-search-hero p{color:rgba(255,255,255,.78)!important;margin:0!important}
.cg-search-page-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;padding:10px!important;border-radius:22px!important;background:#fff!important;border:1px solid #e2e8f0!important;box-shadow:0 14px 34px rgba(15,23,42,.075)!important}
.cg-search-page-form input{min-height:48px!important;border:0!important;background:#f8fafc!important;border-radius:16px!important;padding:0 15px!important}
.cg-search-page-form button{min-height:48px!important;border-radius:16px!important;padding:0 18px!important;border:0!important;background:#f2c500!important;color:#111827!important;font-weight:900!important}
.cg-search-quick-tips{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.cg-search-quick-tips span{padding:7px 10px!important;border-radius:999px!important;background:#fff!important;border:1px solid #e2e8f0!important;color:#64748b!important;font-size:12px!important;font-weight:700!important}
.cg-search-results{display:grid!important;gap:14px!important}
.cg-search-bucket{display:grid!important;gap:10px!important}
.cg-search-bucket-head{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:0 2px!important}
.cg-search-bucket-head h3{margin:0!important;font-size:15px!important}
.cg-search-bucket-head span{display:inline-grid!important;place-items:center!important;min-width:28px!important;height:28px!important;border-radius:999px!important;background:#111827!important;color:#fff!important;font-size:12px!important;font-weight:900!important}
.cg-search-result-list{display:grid!important;gap:9px!important}
.cg-search-result-card{width:100%!important;text-align:left!important;display:grid!important;gap:6px!important;padding:15px 16px!important;border-radius:20px!important;background:#fff!important;border:1px solid rgba(226,232,240,.95)!important;box-shadow:0 10px 26px rgba(15,23,42,.06)!important}
.cg-search-result-card strong{color:#111827!important;font-size:15px!important;line-height:1.25!important}
.cg-search-result-card small{color:#64748b!important;line-height:1.35!important}
.cg-search-result-card em{justify-self:start!important;font-style:normal!important;padding:5px 8px!important;border-radius:999px!important;background:#f1f5f9!important;color:#334155!important;font-size:11px!important;font-weight:800!important}
.cg-search-result-type{justify-self:start!important;padding:5px 8px!important;border-radius:999px!important;background:#fff4bd!important;color:#3f3100!important;font-size:11px!important;font-weight:900!important}
.cg-search-empty-state,.cg-search-loading{display:grid!important;place-items:center!important;text-align:center!important;min-height:220px!important;padding:30px 20px!important;border-radius:26px!important;background:#fff!important;border:1px solid #e2e8f0!important;box-shadow:0 14px 34px rgba(15,23,42,.06)!important}
.cg-search-empty-state.error .cg-search-empty-icon{background:#fee2e2!important;color:#991b1b!important}
.cg-search-empty-icon{width:56px!important;height:56px!important;border-radius:20px!important;display:grid!important;place-items:center!important;background:#fff4bd!important;color:#111827!important;font-size:26px!important;font-weight:900!important;margin-bottom:12px!important}
.cg-mini-spinner{width:32px!important;height:32px!important;border:3px solid #e2e8f0!important;border-top-color:#f2c500!important;border-radius:50%!important;animation:cgSpin .75s linear infinite!important;margin-bottom:12px!important}
@keyframes cgSpin{to{transform:rotate(360deg)}}
@media(max-width:720px){.cg-search-workspace{gap:12px!important}.cg-search-hero{padding:19px 17px!important;border-radius:24px!important}.cg-search-hero h1{font-size:24px!important}.cg-search-page-form{grid-template-columns:1fr!important;padding:9px!important;border-radius:22px!important}.cg-search-page-form button{width:100%!important}.cg-search-quick-tips{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important}.cg-search-quick-tips::-webkit-scrollbar{display:none!important}.cg-search-quick-tips span{flex:0 0 auto!important}.cg-search-result-card{border-radius:18px!important;padding:14px!important}}


/* ============================================================
   007 — Branding Cleanup + Search Click Hotfix
   ============================================================ */

/* Reduce CaseGo repetition after login */
.cg-logo-wordmark-sidebar-clean {
  display: block !important;
  max-width: 118px !important;
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto 7px !important;
}

.cg-sidebar-tagline-clean {
  display: block !important;
  text-align: center !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  max-width: 170px !important;
  margin: 0 auto !important;
}

.cg-header-icon-only {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
}

/* Header brand should not visually compete with sidebar brand */
.cg-header .cg-brand,
#cgHeader .cg-brand {
  gap: 8px !important;
}

.cg-header .cg-brand small,
#cgHeader .cg-brand small {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

/* Search result card click clarity */
.cg-search-result-card {
  cursor: pointer !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}

.cg-search-result-card:hover {
  transform: translateY(-1px) !important;
  border-color: #f2c500 !important;
  box-shadow: 0 14px 30px rgba(15,23,42,.09) !important;
}

/* Fallback detail page instead of harsh error screen */
.cg-fallback-detail {
  min-height: 60vh !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
}

.cg-fallback-card {
  width: min(520px, 100%) !important;
  padding: 28px !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 22px 60px rgba(15,23,42,.10) !important;
  text-align: center !important;
}

.cg-fallback-card span {
  display: inline-flex !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #fff4bd !important;
  color: #3f3100 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
}

.cg-fallback-card h1 {
  margin-bottom: 8px !important;
}

.cg-fallback-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 18px !important;
}

.cg-fallback-actions button {
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  font-weight: 800 !important;
}

.cg-fallback-actions button:first-child {
  background: #1e3a8a !important;
  color: #ffffff !important;
  border-color: #1e3a8a !important;
}

@media (max-width: 720px) {
  .cg-logo-wordmark-sidebar-clean {
    max-width: 104px !important;
  }

  .cg-fallback-card {
    padding: 24px 20px !important;
    border-radius: 24px !important;
  }
}


/* ============================================================
   007 — Search Click Persistence Hotfix
   ============================================================ */
.cg-search-click-safe {
  position: relative !important;
}

.cg-search-click-safe::after {
  content: "Buka" !important;
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  pointer-events: none !important;
}

.cg-search-click-safe:hover::after {
  background: #fff4bd !important;
  color: #111827 !important;
  border-color: #f2c500 !important;
}

@media (max-width: 720px) {
  .cg-search-click-safe::after {
    right: 12px !important;
    top: 12px !important;
  }
}


/* ============================================================
   007 — Incoming Form Alignment Hotfix
   Fix Tarikh Surat box stretching beside multi-line No. Rujukan field
   ============================================================ */

/* Desktop/tablet: prevent form-grid children from stretching vertically */
@media (min-width: 721px) {
  .cg-form-grid,
  .cg-detail-grid,
  .cg-register-grid,
  .cg-workspace-form-grid,
  .cg-two-column-form,
  .cg-form-section .cg-grid,
  .cg-card .cg-grid {
    align-items: start !important;
  }

  /* Common date inputs must remain normal height */
  input[type="date"],
  .cg-form-row input[type="date"],
  .cg-field input[type="date"] {
    min-height: 52px !important;
    height: 52px !important;
    max-height: 52px !important;
    align-self: start !important;
  }

  /* If a date field is inside a card/grid cell, do not stretch it */
  .cg-form-row:has(input[type="date"]),
  .cg-field:has(input[type="date"]),
  .cg-input-group:has(input[type="date"]) {
    align-self: start !important;
    min-height: auto !important;
  }

  .cg-form-row:has(input[type="date"]) input,
  .cg-field:has(input[type="date"]) input,
  .cg-input-group:has(input[type="date"]) input {
    margin-top: 0 !important;
  }

  /* Multi-line No. Rujukan field can be tall without forcing neighbour field */
  .cg-form-row textarea,
  .cg-field textarea,
  textarea {
    align-self: start !important;
  }
}

/* Specific incoming registration polish */
@media (min-width: 721px) {
  /* The left No. Rujukan textarea should look intentional, not overlarge */
  textarea[placeholder*="MDTRN"],
  textarea[placeholder*="Contoh:"],
  textarea[placeholder*="Rujukan"] {
    min-height: 132px !important;
    resize: vertical !important;
  }

  /* Tarikh Surat visual balance */
  input[type="date"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Smartphone: keep clean single-column form */
@media (max-width: 720px) {
  .cg-form-grid,
  .cg-detail-grid,
  .cg-register-grid,
  .cg-workspace-form-grid,
  .cg-two-column-form,
  .cg-form-section .cg-grid,
  .cg-card .cg-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  input[type="date"],
  .cg-form-row input[type="date"],
  .cg-field input[type="date"] {
    min-height: 48px !important;
    height: 48px !important;
  }

  textarea[placeholder*="MDTRN"],
  textarea[placeholder*="Contoh:"],
  textarea[placeholder*="Rujukan"] {
    min-height: 112px !important;
  }
}


/* 007 runtime-targeted incoming register form */
.cg-incoming-register-form-007d .cg-grid,
.cg-incoming-register-form-007d .cg-form-grid,
.cg-incoming-register-form-007d .cg-detail-grid,
.cg-incoming-register-form-007d .cg-register-grid {
  align-items: start !important;
}

.cg-incoming-register-form-007d input[type="date"],
.cg-date-normal-007d {
  min-height: 52px !important;
  height: 52px !important;
  max-height: 52px !important;
  align-self: start !important;
}


/* ============================================================
   007 — Notification Center
   ============================================================ */

.cg-notification-workspace {
  display: grid !important;
  gap: 16px !important;
}

.cg-notification-hero {
  padding: 24px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(242,197,0,.20), transparent 30%),
    linear-gradient(145deg, #111827 0%, #1f2937 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 46px rgba(15,23,42,.18) !important;
}

.cg-notification-hero span {
  display: inline-flex !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(242,197,0,.18) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
}

.cg-notification-hero h1 {
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.045em !important;
}

.cg-notification-hero p {
  color: rgba(255,255,255,.78) !important;
  margin: 0 !important;
}

.cg-notification-toolbar {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.cg-notification-toolbar button {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-weight: 900 !important;
}

.cg-notification-toolbar button.active {
  background: #f2c500 !important;
  color: #111827 !important;
  border-color: #f2c500 !important;
}

.cg-notification-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.cg-notification-summary > div {
  padding: 16px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.06) !important;
}

.cg-notification-summary strong {
  display: block !important;
  font-size: 26px !important;
  line-height: 1 !important;
  color: #111827 !important;
}

.cg-notification-summary small {
  color: #64748b !important;
  font-weight: 700 !important;
}

.cg-notification-results {
  display: grid !important;
  gap: 12px !important;
}

.cg-notification-list {
  display: grid !important;
  gap: 10px !important;
}

.cg-notification-item {
  position: relative !important;
  width: 100% !important;
  text-align: left !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 15px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
}

.cg-notification-item.unread {
  border-color: rgba(242,197,0,.75) !important;
  background: linear-gradient(145deg, #ffffff 0%, #fffaf0 100%) !important;
}

.cg-notification-icon {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: #f1f5f9 !important;
  color: #111827 !important;
  font-weight: 900 !important;
}

.cg-notification-icon.warning,
.cg-notification-icon.task,
.cg-notification-icon.assignment {
  background: #fff4bd !important;
  color: #3f3100 !important;
}

.cg-notification-icon.error {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

.cg-notification-icon.success {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.cg-notification-content {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.cg-notification-topline {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  align-items: start !important;
}

.cg-notification-topline strong {
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.cg-notification-topline em {
  flex: 0 0 auto !important;
  font-style: normal !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.cg-notification-content small {
  color: #64748b !important;
  line-height: 1.35 !important;
}

.cg-notification-content time {
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.cg-notification-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #f2c500 !important;
  margin-top: 6px !important;
}

.cg-notification-empty,
.cg-notification-loading {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  min-height: 220px !important;
  padding: 30px 20px !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.06) !important;
}

.cg-notification-empty-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 20px !important;
  display: grid !important;
  place-items: center !important;
  background: #fff4bd !important;
  color: #111827 !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
}

.cg-notification-empty.error .cg-notification-empty-icon {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

/* nav notification badge */
.has-notification {
  position: relative !important;
}

.has-notification::after {
  content: attr(data-count) !important;
  position: absolute !important;
  top: 4px !important;
  right: 8px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

@media (max-width: 720px) {
  .cg-notification-workspace {
    gap: 12px !important;
  }

  .cg-notification-hero {
    padding: 19px 17px !important;
    border-radius: 24px !important;
  }

  .cg-notification-hero h1 {
    font-size: 24px !important;
  }

  .cg-notification-item {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .cg-notification-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }

  .cg-notification-topline {
    display: grid !important;
    gap: 6px !important;
  }

  .cg-notification-topline em {
    justify-self: start !important;
  }
}


/* ============================================================
   007 — Safe System Stabilization
   ============================================================ */

/* Header: icon only; remove repeated CaseGo text */
.cg-brand-minimal-007 {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: rgba(242,197,0,.10) !important;
}

.cg-brand-minimal-007 .cg-header-icon-only {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Sidebar: navigation only, not a second branding area */
.cg-sidebar-brand-minimal-007 {
  padding: 14px 14px 10px !important;
  border-bottom: 1px solid #eef2f7 !important;
  text-align: left !important;
}

.cg-sidebar-mini-title {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 10px !important;
  padding: 0 40px !important;
  border-radius: 999px !important;
  background: #fff4bd !important;
  color: #3f3100 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}

/* Search result: static result display, no broken navigation */
.cg-search-result-static-007 {
  cursor: default !important;
  pointer-events: auto !important;
  border-color: rgba(226,232,240,.95) !important;
}

.cg-search-result-static-007::after {
  content: none !important;
}

.cg-search-result-static-007:hover {
  transform: none !important;
  border-color: rgba(226,232,240,.95) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
}

.cg-search-result-tapped-007 {
  outline: 2px solid #f2c500 !important;
  outline-offset: 2px !important;
}

.cg-search-static-note {
  display: block !important;
  margin-top: 4px !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

@media (max-width: 860px) {
  .cg-brand-minimal-007 {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  .cg-sidebar-brand-minimal-007 {
    display: none !important;
  }
}


/* ============================================================
   007 — Profile & User Settings Center
   ============================================================ */

.cg-profile-workspace {
  display: grid !important;
  gap: 16px !important;
}

.cg-profile-hero {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 24px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(242,197,0,.20), transparent 30%),
    linear-gradient(145deg, #111827 0%, #1f2937 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 46px rgba(15,23,42,.18) !important;
}

.cg-profile-avatar {
  width: 76px !important;
  height: 76px !important;
  border-radius: 26px !important;
  display: grid !important;
  place-items: center !important;
  background: #f2c500 !important;
  color: #111827 !important;
  font-weight: 950 !important;
  font-size: 24px !important;
  box-shadow: 0 14px 30px rgba(242,197,0,.20) !important;
}

.cg-profile-hero span {
  display: inline-flex !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(242,197,0,.18) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
}

.cg-profile-hero h1 {
  color: #ffffff !important;
  margin: 0 0 5px 0 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.045em !important;
}

.cg-profile-hero p {
  color: rgba(255,255,255,.78) !important;
  margin: 0 !important;
}

.cg-profile-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.cg-profile-card {
  padding: 20px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.065) !important;
}

.cg-profile-card h2 {
  margin: 0 0 14px 0 !important;
  font-size: 18px !important;
  letter-spacing: -0.025em !important;
}

.cg-profile-info-list {
  display: grid !important;
  gap: 10px !important;
}

.cg-profile-info-list > div {
  display: grid !important;
  gap: 3px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  border: 1px solid #eef2f7 !important;
}

.cg-profile-info-list small {
  color: #64748b !important;
  font-weight: 700 !important;
}

.cg-profile-info-list strong {
  color: #111827 !important;
  font-weight: 900 !important;
}

.cg-profile-prefs-form {
  display: grid !important;
  gap: 12px !important;
}

.cg-profile-prefs-form label {
  display: grid !important;
  gap: 7px !important;
}

.cg-profile-prefs-form label span {
  color: #334155 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

.cg-profile-prefs-form select {
  min-height: 46px !important;
  border-radius: 14px !important;
  border: 1px solid #dbe4ef !important;
  background: #f8fafc !important;
  padding: 0 12px !important;
  font-weight: 700 !important;
}

.cg-profile-note {
  margin-top: 12px !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.cg-profile-action-list {
  display: grid !important;
  gap: 9px !important;
}

.cg-profile-action-list button {
  min-height: 44px !important;
  border-radius: 15px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-weight: 850 !important;
  text-align: left !important;
  padding: 0 14px !important;
}

.cg-profile-message {
  margin-top: 12px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #eff6ff !important;
  color: #1e3a8a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.cg-profile-message.success {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.cg-profile-message.error {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

/* local preferences */
body.cg-pref-compact .cg-card,
body.cg-pref-compact .cg-panel,
body.cg-pref-compact .cg-profile-card {
  padding: 14px !important;
}

body.cg-pref-large-text {
  font-size: 106% !important;
}

@media (max-width: 860px) {
  .cg-profile-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .cg-profile-hero {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 13px !important;
    padding: 19px 17px !important;
    border-radius: 24px !important;
  }

  .cg-profile-avatar {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
    font-size: 18px !important;
  }

  .cg-profile-hero h1 {
    font-size: 23px !important;
  }

  .cg-profile-card {
    padding: 17px !important;
    border-radius: 22px !important;
  }
}


/* ============================================================
   007 — Premium Centered Login Experience
   Inspired by modern official mobile-first PWA login.
   ============================================================ */

.cg-login-premium-centered {
  position: relative !important;
  min-height: 100svh !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 20px !important;
  padding: calc(26px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(242,197,0,.34), transparent 30%),
    radial-gradient(circle at 96% 18%, rgba(15,23,42,.06), transparent 24%),
    linear-gradient(135deg, #fff8d6 0%, #ffffff 42%, #f5f7fb 100%) !important;
}

.cg-login-premium-centered::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(115deg, rgba(242,197,0,.20), transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(148,163,184,.14), transparent 35%) !important;
  pointer-events: none !important;
}

.cg-login-premium-bg {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .55 !important;
}

.cg-login-premium-bg::before {
  content: "" !important;
  position: absolute !important;
  left: -120px !important;
  bottom: 60px !important;
  width: 520px !important;
  height: 360px !important;
  border-radius: 48px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)),
    linear-gradient(145deg, rgba(15,23,42,.06), rgba(15,23,42,.02)) !important;
  transform: rotate(-10deg) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35) !important;
  filter: blur(.2px) !important;
}

.cg-login-premium-bg::after {
  content: "" !important;
  position: absolute !important;
  right: -180px !important;
  bottom: -120px !important;
  width: 620px !important;
  height: 390px !important;
  border-radius: 999px !important;
  background:
    repeating-linear-gradient(135deg, rgba(148,163,184,.14) 0 1px, transparent 1px 12px) !important;
  transform: rotate(-14deg) !important;
}

.cg-login-premium-brand {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 8px !important;
}

.cg-login-premium-icon {
  width: 62px !important;
  height: 62px !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 34px rgba(242,197,0,.32) !important;
}

.cg-login-premium-logo {
  width: 168px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  margin-top: 2px !important;
  filter: drop-shadow(0 10px 18px rgba(15,23,42,.10)) !important;
}

.cg-login-premium-brand p {
  margin: 0 !important;
  color: #475569 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.cg-login-premium-brand strong {
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

.cg-login-premium-card {
  position: relative !important;
  z-index: 2 !important;
  width: min(530px, 100%) !important;
  padding: 31px 38px 30px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(242,197,0,.35) !important;
  box-shadow:
    0 26px 76px rgba(15,23,42,.13),
    inset 0 1px 0 rgba(255,255,255,.68) !important;
  backdrop-filter: blur(18px) !important;
  display: grid !important;
  gap: 12px !important;
  justify-items: center !important;
  text-align: center !important;
}

.cg-login-premium-shield {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #fff4bd !important;
  color: #9b7500 !important;
  border: 1px solid rgba(242,197,0,.36) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  margin-bottom: 2px !important;
}

.cg-login-premium-card h2 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 21px !important;
  line-height: 1.14 !important;
  letter-spacing: -0.025em !important;
}

.cg-login-premium-card > p {
  margin: -2px 0 8px !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.cg-login-premium-form {
  width: 100% !important;
  display: grid !important;
  gap: 12px !important;
}

.cg-login-premium-field {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid #dbe4ef !important;
  overflow: hidden !important;
}

.cg-login-premium-field > span {
  width: 42px !important;
  display: grid !important;
  place-items: center !important;
  color: #64748b !important;
  font-weight: 900 !important;
}

.cg-login-premium-field input {
  min-height: 46px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 10px !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.cg-login-eye {
  width: 42px !important;
  height: 46px !important;
  border: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  font-weight: 900 !important;
}

.cg-login-premium-options {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.cg-login-premium-options label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.cg-login-premium-options input {
  accent-color: #f2c500 !important;
}

.cg-login-link {
  border: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.cg-login-premium-submit {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #f2c500, #ffd84d) !important;
  color: #111827 !important;
  font-weight: 950 !important;
  font-size: 15px !important;
  box-shadow: 0 15px 26px rgba(242,197,0,.25) !important;
}

.cg-login-premium-separator {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
}

.cg-login-premium-separator::before,
.cg-login-premium-separator::after {
  content: "" !important;
  height: 1px !important;
  background: #e2e8f0 !important;
}

.cg-login-premium-help {
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.cg-login-premium-help strong {
  color: #c29400 !important;
}

.cg-login-premium-footer {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 7px !important;
  text-align: center !important;
  color: #64748b !important;
}

.cg-login-premium-footer span {
  font-size: 13px !important;
  font-weight: 800 !important;
}

.cg-login-premium-footer small {
  font-size: 12px !important;
  color: #64748b !important;
}

body.cg-login-premium-active #cgHeader,
body.cg-login-premium-active #cgSidebar,
body.cg-login-premium-active #cgBottomNav {
  display: none !important;
}

body.cg-login-premium-active #cgMain,
body.cg-login-premium-active .cg-main {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100svh !important;
  width: 100% !important;
}

@media (max-width: 720px) {
  .cg-login-premium-centered {
    align-content: start !important;
    gap: 14px !important;
    padding: calc(28px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 0% 0%, rgba(242,197,0,.32), transparent 34%),
      linear-gradient(180deg, #fff9db 0%, #ffffff 46%, #f5f7fb 100%) !important;
  }

  .cg-login-premium-bg::before {
    left: -220px !important;
    bottom: auto !important;
    top: 80px !important;
    width: 460px !important;
    height: 250px !important;
    opacity: .45 !important;
  }

  .cg-login-premium-bg::after {
    right: -240px !important;
    bottom: -80px !important;
    width: 520px !important;
    height: 260px !important;
    opacity: .55 !important;
  }

  .cg-login-premium-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
  }

  .cg-login-premium-logo {
    width: 142px !important;
    max-height: 52px !important;
  }

  .cg-login-premium-brand {
    gap: 5px !important;
  }

  .cg-login-premium-brand p {
    font-size: 12.5px !important;
  }

  .cg-login-premium-brand strong {
    font-size: 12px !important;
  }

  .cg-login-premium-card {
    width: 100% !important;
    padding: 24px 18px 22px !important;
    border-radius: 24px !important;
    gap: 10px !important;
  }

  .cg-login-premium-shield {
    width: 42px !important;
    height: 42px !important;
    font-size: 19px !important;
  }

  .cg-login-premium-card h2 {
    font-size: 18px !important;
  }

  .cg-login-premium-card > p {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }

  .cg-login-premium-field {
    min-height: 45px !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
  }

  .cg-login-premium-field input {
    min-height: 43px !important;
    font-size: 13px !important;
  }

  .cg-login-premium-options {
    font-size: 10.5px !important;
  }

  .cg-login-premium-submit {
    min-height: 46px !important;
    font-size: 14px !important;
  }

  .cg-login-premium-footer {
    gap: 4px !important;
  }

  .cg-login-premium-footer span,
  .cg-login-premium-footer small {
    font-size: 10.5px !important;
  }
}

@media (max-width: 380px) {
  .cg-login-premium-centered {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .cg-login-premium-card {
    padding: 22px 15px 20px !important;
  }

  .cg-login-premium-options {
    display: grid !important;
    gap: 7px !important;
    justify-items: start !important;
  }
}


/* CASEGO 008B6 — Professional Login Recovery */
body.cg-login-page,
body.cg-route-login {
  background: #f6f8fb;
}

.cg-login-official {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 9px;
  background:
    radial-gradient(circle at top left, rgba(242,197,0,.14), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f6f8fb 58%, #eef3f9 100%);
}

.cg-login-official-card {
  width: min(400px, 100%);
}

.cg-login-official-brand {
  text-align: center;
  margin-bottom: 10px;
}

.cg-login-official-logo {
  width: 100px;
  height: auto;
  display: block;
  margin: 0 auto 0px;
}

.cg-login-official-brand h1 {
  margin: 0;
  color: #16346b;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
}

.cg-login-official-brand p {
  margin: 0px 0 0;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.cg-login-official-panel {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(226,232,240,.95);
  border-top: 4px solid #f2c500;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15,23,42,.13);
  padding: 15px;
}

.cg-login-official-lock {
  width: 80px;
  height: 60px;
  border-radius: 1px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid;
  place-items: center;
  margin: 0 auto 1px;
}

.cg-login-official-lock img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.cg-login-official-panel h2 {
  text-align: center;
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.cg-login-official-subtitle {
  text-align: center;
  color: #64748b;
  margin: opx 0 0px;
  font-size: 7px;
}

.cg-login-official-form {
  display: grid;
  gap: 10px;
}

.cg-login-official-field label {
  display: block;
  margin: 0 0 0px;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.cg-login-official-field input {
  width: 100%;
  height: 35px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  padding: 0 10px;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}

.cg-login-official-field input:focus {
  outline: none;
  border-color: #d7ad00;
  box-shadow: 0 0 0 4px rgba(242,197,0,.18);
}

.cg-login-password-wrap {
  position: relative;
}

.cg-login-password-wrap input {
  padding-right: 76px;
}

.cg-login-eye {
  position: absolute;
  right: 8px;
  top: 8px;
  height: 32px;
  min-width: 68px;
  border: 0;
  border-radius: 5px;
  background: #f1f5f9;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
}

.cg-login-official-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #64748b;
  font-size: 13px;
}

.cg-login-remember {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 700;
}

.cg-login-remember input {
  width: 16px;
  min-height: 16px;
  height: 16px;
  accent-color: #f2c500;
}

.cg-login-link {
  border: 0;
  background: transparent;
  color: #16346b;
  font-weight: 800;
  padding: 0;
}

.cg-login-official-submit {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #f2c500, #ffd84d);
  color: #111827;
  font-weight: 600;
  box-shadow: 0 12px 26px rgba(242,197,0,.28);
}

.cg-login-official-submit:disabled {
  opacity: .72;
  cursor: wait;
}

.cg-login-official-footer {
  text-align: center;
  display: grid;
  gap: 0px;
  margin-top: 18px;
  color: #64748b;
  font-size: 12px;
}

.cg-login-official-footer strong {
  color: #16346b;
}

.cg-row-static {
  cursor: default;
  background: #f8fafc;
}

@media (max-width: 520px) {
  .cg-login-official {
    align-items: start;
    padding: 24px 28px;
  }

  .cg-login-official-logo {
    width: 158px;
  }

  .cg-login-official-panel {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .cg-login-official-options {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ============================================================
   CASEGO 008B8 — Login UX/UI Accessibility Polish
   Scope: typography contrast, logo clarity, input focus, button tone, footer readability.
   ============================================================ */

.cg-login-official-brand {
  margin-bottom: 22px !important;
}

.cg-login-official-logo {
  width: 190px !important;

}

.cg-login-official-brand h1 {
  color: #0f2f63 !important;
  font-size: 16px !important;
  line-height: 1.38 !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

.cg-login-official-brand p {
  color: #f2a900 !important;
  font-size: 14px !important;
  line-height: 1.38 !important;
  font-weight: 800 !important;
}

.cg-login-official-subtitle {
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.cg-login-official-field label {
  color: #1f2937 !important;
  font-size: 13.5px !important;
}

.cg-login-official-field input {
  border-color: #c5d3e3 !important;
  background: #f8fbff !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

.cg-login-official-field input:hover {
  border-color: #94a9c3 !important;
  background: #ffffff !important;
}

.cg-login-official-field input:focus {
  outline: none !important;
  border-color: #16346b !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(22,52,107,.16) !important;
}

/* 008B10 — Login Papar Button Polish */
.cg-login-eye {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  height: 30px !important;
  min-height: 30px !important;
  min-width: 68px !important;
  padding: 0 14px !important;

  border: 1px solid rgba(22, 52, 107, 0.14) !important;
  border-radius: 999px !important;

  color: #16346b !important;
  background: #eaf1fb !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.cg-login-eye:hover,
.cg-login-eye:focus-visible {
  background: #dbe8f8 !important;
  color: #0f2f63 !important;
  border-color: rgba(22, 52, 107, 0.26) !important;
  outline: 2px solid rgba(22, 52, 107, .22) !important;
  outline-offset: 1px !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
}

/* Pastikan teks password tidak bertindih dengan button Papar */
.cg-login-password-wrap input,
.cg-login-password-field input,
.cg-login-password-input {
  padding-right: 92px !important;
}

.cg-login-official-submit {
  background: linear-gradient(135deg, #f2c500 0%, #ffd84d 100%) !important;
  color: #0b2d5c !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.34) !important;
  box-shadow: 0 14px 28px rgba(22,52,107,.16), 0 10px 22px rgba(242,197,0,.24) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.cg-login-official-submit:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  filter: saturate(1.04) !important;
  box-shadow: 0 18px 34px rgba(22,52,107,.18), 0 12px 26px rgba(242,197,0,.28) !important;
}

.cg-login-official-submit:focus-visible {
  outline: 3px solid rgba(22,52,107,.26) !important;
  outline-offset: 3px !important;
}

.cg-login-official-footer {
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.cg-login-official-footer strong {
  color: #0f2f63 !important;
  font-size: 13.5px !important;
}

.cg-login-official-footer span {
  color: #334155 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

@media (max-width: 520px) {
  .cg-login-official-brand h1 {
    font-size: 15px !important;
  }

  .cg-login-official-brand p {
    font-size: 13px !important;
  }

  .cg-login-official-footer,
  .cg-login-official-footer strong,
  .cg-login-official-footer span {
    font-size: 12.5px !important;
  }
}


/* ============================================================
   008B9 — Command Center Dark Sidebar + App Shell Polish
   Scope: visual-only desktop/mobile shell refinement.
   No runtime helper, observer or backend logic added.
   ============================================================ */
:root {
  --cg-command-navy: #0B192C;
  --cg-command-navy-2: #0F172A;
  --cg-command-panel: #1E293B;
  --cg-command-muted: #94A3B8;
  --cg-command-gold: #F59E0B;
  --cg-command-line: rgba(148, 163, 184, .22);
}

body:not(.cg-public-page) {
  background: #f4f7fb !important;
}

/* Desktop sidebar: dark visual anchor */
body:not(.cg-public-page) .cg-sidebar,
body:not(.cg-public-page) #cgSidebar {
  background: linear-gradient(180deg, var(--cg-command-navy) 0%, var(--cg-command-navy-2) 100%) !important;
  border-right: 0 !important;
  box-shadow: 16px 0 42px rgba(15, 23, 42, .10) !important;
  padding: 18px 14px !important;
}

body:not(.cg-public-page) .cg-sidebar-brand {
  display: grid !important;
  place-items: center !important;
  gap: 8px !important;
  text-align: center !important;
  margin-bottom: 10px !important;
  border-bottom: 4px solid var(--cg-command-line) !important;
}

body:not(.cg-public-page) .cg-sidebar-brand img,
body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-shell,
body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-sidebar-clean,
body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-sidebar-centered {
  max-width: 240px !important;
  width: 198px !important;
  height: auto !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)) !important;
}

body:not(.cg-public-page) .cg-sidebar-brand span {
  display: block !important;
}

body:not(.cg-public-page) .cg-sidebar-brand strong {
  color: #ffffff !important;
  font-weight: 600 !important;
}

body:not(.cg-public-page) .cg-sidebar-brand small,
body:not(.cg-public-page) .cg-sidebar-tagline-clean {
  color: #f2a900 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body:not(.cg-public-page) .cg-side-nav {
  gap: 7px !important;
}

body:not(.cg-public-page) .cg-side-nav button {
  position: relative !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  color: var(--cg-command-muted) !important;
  background: transparent !important;
  padding: 0 14px 0 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  transition: background-color .16s ease, color .16s ease, transform .16s ease !important;
}

body:not(.cg-public-page) .cg-side-nav button::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 9px !important;
  bottom: 9px !important;
  width: 4px !important;
  border-radius: 0 999px 999px 0 !important;
  background: transparent !important;
}

body:not(.cg-public-page) .cg-side-nav button:hover {
  background: rgba(255,255,255,.065) !important;
  color: #ffffff !important;
  transform: translateX(1px) !important;
}

body:not(.cg-public-page) .cg-side-nav button.active {
  background: var(--cg-command-panel) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

body:not(.cg-public-page) .cg-side-nav button.active::before {
  background: var(--cg-command-gold) !important;
}

/* Top bar: clean white command bar */
body:not(.cg-public-page) .cg-header {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #e5ebf3 !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.03) !important;
}

body:not(.cg-public-page) .cg-brand-minimal-007,
body:not(.cg-public-page) .cg-brand {
  background: transparent !important;
  border-radius: 999px !important;
}

body:not(.cg-public-page) .cg-search {
  max-width: 590px !important;
  height: 42px !important;
  background: #ffffff !important;
  border-color: #d8e1ec !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.045) !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}

body:not(.cg-public-page) .cg-search:focus-within {
  border-color: #17386f !important;
  box-shadow: 0 0 0 4px rgba(23,56,111,.10), 0 10px 26px rgba(15,23,42,.06) !important;
}

body:not(.cg-public-page) .cg-search input {
  color: #0f172a !important;
}

body:not(.cg-public-page) .cg-search button {
  color: #17386f !important;
}

body:not(.cg-public-page) .cg-user {
  min-height: 34px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  font-weight: 750 !important;
}

/* Hero/banner refinement */
body:not(.cg-public-page) .cg-head {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #dce5ef !important;
  border-left: 5px solid var(--cg-command-gold) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(245,190,11,.50), transparent 90%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.06) !important;
}

body:not(.cg-public-page) .cg-head h1 {
  color: #081f45 !important;
  font-size: 22px !important;
  letter-spacing: -.03em !important;
}

body:not(.cg-public-page) .cg-head p {
  color: #475569 !important;
  font-weight: 600 !important;
}

body:not(.cg-public-page) .cg-head .cg-badge {
  background: #fff4c2 !important;
  color: #3f3100 !important;
  border: 1px solid rgba(245,158,11,.20) !important;
}

body:not(.cg-public-page) .cg-head-actions .cg-btn,
body:not(.cg-public-page) .cg-head-actions button {
  border-radius: 999px !important;
  border-color: #cdd9e8 !important;
  color: #17386f !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.06) !important;
}

body:not(.cg-public-page) .cg-head-actions .cg-btn:hover,
body:not(.cg-public-page) .cg-head-actions button:hover {
  background: #f8fafc !important;
  border-color: #17386f !important;
}

/* Dashboard cards: cleaner command-center surfaces */
body:not(.cg-public-page) .cg-kpi,
body:not(.cg-public-page) .cg-panel,
body:not(.cg-public-page) .cg-op-card,
body:not(.cg-public-page) .cg-card {
  border-color: #dce5ef !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 32px rgba(15,23,42,.055) !important;
}

body:not(.cg-public-page) .cg-kpi {
  border-left: 5px solid var(--cg-command-gold) !important;
  background: #ffffff !important;
}

body:not(.cg-public-page) .cg-kpi:hover {
  border-color: #dce5ef !important;
  border-left-color: #d97706 !important;
  background: #fffdf5 !important;
  transform: translateY(-1px) !important;
}

body:not(.cg-public-page) .cg-kpi span,
body:not(.cg-public-page) .cg-panel-head p,
body:not(.cg-public-page) .cg-division span,
body:not(.cg-public-page) .cg-info span {
  color: #52647a !important;
}

body:not(.cg-public-page) .cg-kpi strong,
body:not(.cg-public-page) .cg-info strong {
  color: #081f45 !important;
}

body:not(.cg-public-page) .cg-panel-head h2 {
  color: #0f172a !important;
  font-weight: 900 !important;
}

body:not(.cg-public-page) .cg-actions .cg-action,
body:not(.cg-public-page) .cg-action {
  position: relative !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  border-color: #dbe5f0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 850 !important;
  text-align: left !important;
}

body:not(.cg-public-page) .cg-actions .cg-action::after,
body:not(.cg-public-page) .cg-action::after {
  content: "›" !important;
  position: absolute !important;
  right: 14px !important;
  color: #94a3b8 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

body:not(.cg-public-page) .cg-actions .cg-action:hover,
body:not(.cg-public-page) .cg-action:hover {
  background: #f8fafc !important;
  border-color: var(--cg-command-gold) !important;
}

/* Mobile PWA: dark bottom navigation aligned with manifest theme */
@media (max-width: 720px) {
  body:not(.cg-public-page) .cg-header {
    background: #ffffff !important;
  }

  body:not(.cg-public-page) .cg-bottom-nav {
    background: var(--cg-command-navy) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 -14px 34px rgba(15,23,42,.18) !important;
  }

  body:not(.cg-public-page) .cg-bottom-nav button {
    color: #94a3b8 !important;
    font-weight: 850 !important;
  }

  body:not(.cg-public-page) .cg-bottom-nav button.active {
    color: var(--cg-command-gold) !important;
    background: rgba(245,158,11,.12) !important;
  }

  body:not(.cg-public-page) .cg-head {
    border-left-width: 0 !important;
    border-top: 4px solid var(--cg-command-gold) !important;
    border-radius: 20px !important;
  }

  body:not(.cg-public-page) .cg-user {
    display: none !important;
  }
}


/* ============================================================
   008B10E — Tracking + Outgoing Detail Important Info Restore
   Add-only visual polish. No logo/img rules touched.
   ============================================================ */
.cg-tracking-card-wide {
  width: min(760px, 100%) !important;
}
.cg-tracking-search-form {
  margin-top: 14px !important;
}
.cg-tracking-record {
  display: grid !important;
  gap: 14px !important;
}
.cg-tracking-record-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.cg-tracking-record-head strong {
  color: #0f172a !important;
  font-size: 14px !important;
}
.cg-tracking-receive-form {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid #e2e8f0 !important;
}
.cg-receipt-summary {
  margin-top: 12px !important;
  padding: 13px !important;
  border: 1px solid #bbf7d0 !important;
  background: #f0fdf4 !important;
  color: #14532d !important;
  border-radius: 14px !important;
}
.cg-receipt-summary strong {
  display: block !important;
  margin-bottom: 10px !important;
}
.cg-status-box span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}
@media (max-width: 720px) {
  .cg-tracking-card-wide {
    width: 100% !important;
  }
  .cg-tracking-record-head {
    display: grid !important;
    justify-content: start !important;
  }
}

/* ============================================================
   008B10F — QR Print + Public Tracking Polish
   Scope: print slip QR loading, public scan view spacing.
   No global logo/img rule changed.
   ============================================================ */
.cg-print-slip-official {
  width: 210mm !important;
  min-height: 99mm !important;
  padding: 10mm 12mm !important;
  border: 1px solid #111827 !important;
  border-radius: 0 !important;
}

.cg-print-slip-main {
  display: grid !important;
  grid-template-columns: 58mm minmax(0, 1fr) !important;
  gap: 10mm !important;
  align-items: start !important;
}

.cg-print-qr-box strong {
  display: block !important;
  margin-top: 4mm !important;
  font-size: 10px !important;
  color: #111827 !important;
  text-align: center !important;
}

.cg-print-slip-info p {
  margin: 0 0 5mm !important;
  padding-bottom: 3mm !important;
  border-bottom: 1px solid #d1d5db !important;
}

.cg-print-slip-info small,
.cg-print-slip-info strong,
.cg-print-slip-info span {
  display: block !important;
}

.cg-print-slip-info small {
  font-size: 9px !important;
  color: #4b5563 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  margin-bottom: 1mm !important;
}

.cg-print-slip-info strong {
  font-size: 12px !important;
  color: #111827 !important;
}

.cg-print-slip-info span {
  font-size: 9px !important;
  color: #111827 !important;
  word-break: break-all !important;
}

.cg-tracking-card-wide .cg-tracking-search-form.hidden {
  display: none !important;
}

.cg-tracking-card-wide > h1 {
  letter-spacing: -0.035em !important;
}

.cg-tracking-record {
  margin-top: 14px !important;
}

@media print {
  body.cg-printing-slip .cg-print-slip-official {
    width: 210mm !important;
    min-height: 99mm !important;
    padding: 9mm 11mm !important;
  }

  body.cg-printing-slip .cg-print-slip-main {
    grid-template-columns: 56mm minmax(0, 1fr) !important;
  }

  @page { size: 210mm 99mm; margin: 0; }
}

@media (max-width: 720px) {
  .cg-tracking-card-wide .cg-api-status.success {
    padding: 10px !important;
  }
}

/* Public Tracking Slip — JKR Sabah Logo */
.cg-tracking-jkr-logo {
  display: block !important;
  width: 82px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 0 10px 0 !important;
  filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.10)) !important;
}

@media (max-width: 520px) {
  .cg-tracking-jkr-logo {
    width: 72px !important;
  }
}

/* ============================================================
   008B10I — Profile Center Upgrade + Local Photo Upload
   Scope: profile page only. Does not touch CaseGo logo/image rules.
   ============================================================ */
.cg-profile-page-008b10i {
  gap: 18px !important;
}

.cg-profile-hero-008b10i {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 24px !important;
  border-radius: 26px !important;
  border: 1px solid #dce5ef !important;
  border-left: 5px solid #f59e0b !important;
  background:
    radial-gradient(circle at 46% 42%, rgba(245,190,11,.46), transparent 42%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.06) !important;
}

.cg-profile-avatar-008b10i,
.cg-profile-photo-preview-008b10i {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #0b192c, #1e293b) !important;
  color: #f59e0b !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 30px rgba(15,23,42,.14) !important;
}

.cg-profile-avatar-008b10i {
  width: 96px !important;
  height: 96px !important;
  border-radius: 30px !important;
  font-size: 28px !important;
}

.cg-profile-avatar-008b10i img,
.cg-profile-photo-preview-008b10i img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.cg-profile-hero-text-008b10i h1 {
  margin: 9px 0 4px !important;
  color: #081f45 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
  letter-spacing: -.04em !important;
}

.cg-profile-hero-text-008b10i p {
  margin: 0 !important;
  color: #334155 !important;
  font-weight: 850 !important;
}

.cg-profile-status-row-008b10i {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
}

.cg-profile-status-row-008b10i span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.cg-profile-status-row-008b10i i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #16a34a !important;
}

.cg-profile-hero-actions-008b10i {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
}

.cg-profile-grid-008b10i {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.cg-profile-card-008b10i {
  border-radius: 24px !important;
}

.cg-profile-info-grid-008b10i,
.cg-profile-security-grid-008b10i {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.cg-profile-info-grid-008b10i .cg-info,
.cg-profile-security-grid-008b10i .cg-info {
  border-radius: 16px !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  min-height: 70px !important;
}

.cg-profile-photo-box-008b10i {
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

.cg-profile-photo-preview-008b10i {
  width: 108px !important;
  height: 108px !important;
  border-radius: 28px !important;
  font-size: 28px !important;
}

.cg-profile-photo-control-008b10i {
  display: grid !important;
  gap: 8px !important;
}

.cg-profile-photo-control-008b10i label {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.cg-profile-photo-control-008b10i input[type="file"] {
  min-height: 44px !important;
  padding: 9px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1px solid #dbe5f0 !important;
}

.cg-profile-photo-control-008b10i small,
.cg-profile-note-008b10i {
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.cg-profile-photo-actions-008b10i {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.cg-profile-note-008b10i {
  margin-top: 14px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: #fffdf1 !important;
  border: 1px solid #fde68a !important;
  color: #713f12 !important;
  font-weight: 650 !important;
}

@media (max-width: 980px) {
  .cg-profile-hero-008b10i,
  .cg-profile-grid-008b10i {
    grid-template-columns: 1fr !important;
  }

  .cg-profile-hero-actions-008b10i {
    justify-content: start !important;
  }
}

@media (max-width: 620px) {
  .cg-profile-hero-008b10i {
    padding: 20px !important;
    border-radius: 22px !important;
  }

  .cg-profile-avatar-008b10i {
    width: 82px !important;
    height: 82px !important;
    border-radius: 26px !important;
  }

  .cg-profile-hero-text-008b10i h1 {
    font-size: 23px !important;
  }

  .cg-profile-info-grid-008b10i,
  .cg-profile-security-grid-008b10i,
  .cg-profile-photo-box-008b10i {
    grid-template-columns: 1fr !important;
  }

  .cg-profile-photo-preview-008b10i {
    width: 96px !important;
    height: 96px !important;
  }
}


/* ============================================================
   CG-PERF-001C/001D/001E — Performance Helpers
   Scope: cache refresh note, load-more list, mobile low-power rendering.
   Does not change logo, sidebar wording, header wording, or branding.
   ============================================================ */
.cg-perf-refresh-note {
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid #bfdbfe !important;
  background: #eff6ff !important;
  color: #1e3a8a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.cg-load-more-box {
  display: grid !important;
  place-items: center !important;
  padding-top: 10px !important;
}

.cg-load-more-box .cg-btn {
  min-width: min(220px, 100%) !important;
}

@media (max-width: 860px) {
  body:not(.cg-login-page) .cg-panel,
  body:not(.cg-login-page) .cg-card,
  body:not(.cg-login-page) .cg-kpi,
  body:not(.cg-login-page) .cg-op-card,
  body:not(.cg-login-page) .cg-row,
  body:not(.cg-login-page) .cg-action {
    box-shadow: 0 6px 16px rgba(15,23,42,.055) !important;
  }

  body:not(.cg-login-page) .cg-header,
  body:not(.cg-login-page) .cg-bottom-nav {
    backdrop-filter: none !important;
  }

  body:not(.cg-login-page) .cg-btn,
  body:not(.cg-login-page) .cg-action,
  body:not(.cg-login-page) .cg-row,
  body:not(.cg-login-page) .cg-kpi {
    transition: none !important;
  }

  body:not(.cg-login-page) .cg-row:hover,
  body:not(.cg-login-page) .cg-action:hover,
  body:not(.cg-login-page) .cg-kpi:hover,
  body:not(.cg-login-page) .cg-btn.primary:hover {
    transform: none !important;
  }
}


/* CG-FIX-001 — PJ Receive Incoming Softcopy Preview */
.cg-softcopy-panel {
  display: grid !important;
  gap: 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
  padding: 14px !important;
}

.cg-softcopy-head {
  display: grid !important;
  gap: 3px !important;
}

.cg-softcopy-head strong {
  color: #111827 !important;
  font-size: 14px !important;
}

.cg-softcopy-head small {
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.cg-softcopy-box,
.cg-softcopy-list {
  display: grid !important;
  gap: 8px !important;
}

.cg-softcopy-loading,
.cg-softcopy-empty {
  border: 1px dashed #cbd5e1 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #64748b !important;
  padding: 12px !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

.cg-softcopy-empty strong {
  display: block !important;
  color: #111827 !important;
  margin-bottom: 4px !important;
}

.cg-softcopy-empty p {
  margin: 0 0 10px 0 !important;
}

.cg-softcopy-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  padding: 12px !important;
}

.cg-softcopy-item strong,
.cg-softcopy-item small {
  display: block !important;
}

.cg-softcopy-item strong {
  color: #111827 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.cg-softcopy-item small {
  color: #64748b !important;
  font-size: 11.5px !important;
  margin-top: 3px !important;
}

.cg-softcopy-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: #1e3a8a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.cg-softcopy-unavailable {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

@media (max-width: 520px) {
  .cg-softcopy-item {
    grid-template-columns: 1fr !important;
  }

  .cg-softcopy-link {
    width: 100% !important;
  }
}

/* ============================================================
   CG-UI-001 — Role Dashboard Compact + Lazy Panels
   Purpose: reduce large boxes, remove non-essential dashboard space,
   keep smartphone app feel and preserve existing branding.
   ============================================================ */
.cg-dashboard-lite {
  gap: 14px !important;
}

.cg-dashboard-lite .cg-head {
  padding: 16px 18px !important;
  min-height: auto !important;
}

.cg-dashboard-lite .cg-head h1 {
  margin: 7px 0 3px !important;
}

.cg-kpi-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.cg-kpi-compact {
  min-height: 78px !important;
  padding: 13px 14px !important;
  border-radius: 18px !important;
}

.cg-kpi-compact span {
  font-size: 12px !important;
  line-height: 1.22 !important;
}

.cg-kpi-compact strong {
  font-size: 27px !important;
  line-height: 1 !important;
}

.cg-kpi-compact small {
  font-size: 11px !important;
}

.cg-mini-stat-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: -2px !important;
}

.cg-mini-stat-strip button {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid #e2e8f0 !important;
  background: rgba(255,255,255,.88) !important;
  color: #334155 !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.045) !important;
}

.cg-mini-stat-strip span {
  font-size: 12px !important;
  font-weight: 800 !important;
}

.cg-mini-stat-strip strong {
  min-width: 22px !important;
  min-height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #fff4bd !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.cg-dashboard-grid-lite {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 14px !important;
  align-items: start !important;
}

.cg-dashboard-grid-lite .cg-main-col,
.cg-dashboard-grid-lite .cg-side-col {
  gap: 14px !important;
}

.cg-dashboard-lite .cg-panel {
  padding: 14px !important;
  border-radius: 18px !important;
}

.cg-dashboard-lite .cg-panel-head {
  padding-bottom: 9px !important;
  margin-bottom: 10px !important;
}

.cg-dashboard-lite .cg-panel-head h2 {
  font-size: 14px !important;
}

.cg-dashboard-lite .cg-panel-head p {
  font-size: 12px !important;
}

.cg-dashboard-task-list .cg-row,
.cg-activity-compact {
  min-height: 52px !important;
}

.cg-role-focus-compact {
  padding: 12px !important;
  gap: 7px !important;
}

.cg-role-focus-compact strong {
  font-size: 16px !important;
}

.cg-role-focus-compact span {
  font-size: 12px !important;
}

.cg-quick-compact {
  display: grid !important;
  gap: 8px !important;
}

.cg-quick-compact .cg-action {
  min-height: 40px !important;
  border-radius: 13px !important;
  padding: 9px 12px !important;
}

.cg-session-mini {
  display: grid !important;
  gap: 3px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1px solid #eef2f7 !important;
}

.cg-session-mini strong {
  color: #111827 !important;
  font-size: 14px !important;
}

.cg-session-mini small {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.cg-lazy-panel .cg-lazy-content {
  min-height: 42px !important;
}

.cg-mini-skeleton {
  display: grid !important;
  gap: 8px !important;
}

.cg-mini-skeleton span {
  height: 11px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,#f8fafc,#e2e8f0,#f8fafc) !important;
  background-size: 200% 100% !important;
  animation: skel 1.1s linear infinite !important;
}

.cg-mini-skeleton span:nth-child(1) { width: 72% !important; }
.cg-mini-skeleton span:nth-child(2) { width: 92% !important; }
.cg-mini-skeleton span:nth-child(3) { width: 50% !important; }

.cg-activity-compact-list {
  display: grid !important;
  gap: 8px !important;
}

.cg-activity-compact {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) !important;
  gap: 2px !important;
  text-align: left !important;
  align-items: start !important;
  padding: 10px 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.cg-activity-compact:hover {
  border-color: #f2c500 !important;
  background: #fffdf1 !important;
}

.cg-activity-compact span {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #f2c500 !important;
  margin-top: 6px !important;
}

.cg-activity-compact strong,
.cg-activity-compact small {
  grid-column: 2 !important;
  display: block !important;
}

.cg-activity-compact strong {
  font-size: 11.2px !important;
  line-height: 1.3 !important;
  color: #111827 !important;
}

.cg-activity-compact small {
  font-size: 11.2px !important;
  line-height: 1.3 !important;
  color: #64748b !important;
}

.cg-dashboard-empty-small {
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px dashed #e2e8f0 !important;
  background: #ffffff !important;
  color: #64748b !important;
  font-size: 12.5px !important;
}

.cg-dashboard-lazy-grid {
  gap: 9px !important;
}

/* Fix empty desktop column when a workspace has only one main column. */
@supports selector(:has(*)) {
  .cg-workspace:has(> .cg-main-col:only-child) {
    grid-template-columns: minmax(0, 980px) !important;
  }
}

.cg-workspace > .cg-main-col:only-child {
  width: 100% !important;
  max-width: 980px !important;
}

@media (max-width: 980px) {
  .cg-dashboard-grid-lite {
    grid-template-columns: 1fr !important;
  }

  .cg-dashboard-grid-lite .cg-side-col {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .cg-dashboard-lite {
    gap: 10px !important;
    padding: 10px !important;
  }

  .cg-dashboard-lite .cg-head {
    padding: 14px !important;
    border-radius: 21px !important;
  }

  .cg-dashboard-lite .cg-head h1 {
    font-size: 22px !important;
    line-height: 1.12 !important;
  }

  .cg-dashboard-lite .cg-head p {
    font-size: 12.5px !important;
  }

  .cg-kpi-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .cg-kpi-compact {
    min-height: 72px !important;
    padding: 10px 9px !important;
    border-radius: 17px !important;
  }

  .cg-kpi-compact span {
    font-size: 10.5px !important;
    line-height: 1.15 !important;
  }

  .cg-kpi-compact strong {
    font-size: 23px !important;
  }

  .cg-kpi-compact small {
    display: none !important;
  }

  .cg-mini-stat-strip {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 7px !important;
  }

  .cg-mini-stat-strip::-webkit-scrollbar {
    display: none !important;
  }

  .cg-mini-stat-strip button {
    flex: 0 0 auto !important;
    min-height: 34px !important;
  }

  .cg-dashboard-lite .cg-panel {
    padding: 13px !important;
    border-radius: 20px !important;
  }

  .cg-dashboard-grid-lite,
  .cg-dashboard-grid-lite .cg-main-col,
  .cg-dashboard-grid-lite .cg-side-col {
    gap: 10px !important;
  }

  .cg-quick-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cg-quick-compact .cg-action {
    min-height: 40px !important;
    text-align: center !important;
  }

  .cg-session-mini {
    display: none !important;
  }

  .cg-workspace,
  .cg-workspace > .cg-main-col:only-child {
    max-width: none !important;
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  .cg-kpi-grid-compact {
    grid-template-columns: 1fr !important;
  }

  .cg-kpi-compact {
    min-height: 58px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  .cg-kpi-compact small {
    display: block !important;
    grid-column: 1 / -1 !important;
  }
}


/* ============================================================
   CG-FIX-004 — Officer Assignment + JKR Sabah Tracking Logo
   ============================================================ */
.cg-assign-helper {
  display: block !important;
  margin-top: 6px !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.cg-tracking-jkr-logo-wrap,
.cg-print-jkr-logo-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 0 12px 0 !important;
}

.cg-tracking-jkr-logo {
  display: block !important;
  width: 96px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 6px 10px rgba(15,23,42,.10)) !important;
}

.cg-print-jkr-logo {
  display: block !important;
  width: 24mm !important;
  max-height: 22mm !important;
  height: auto !important;
  object-fit: contain !important;
}

.cg-print-slip-head .cg-print-jkr-logo-wrap {
  width: 28mm !important;
  min-width: 28mm !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}

@media (max-width: 520px) {
  .cg-tracking-jkr-logo {
    width: 82px !important;
  }
}


/* CG-FILE-001 — Senarai Fail JKR compact registry */
.cg-file-registry-screen { gap: 12px !important; }
.cg-file-registry-search-form { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 10px !important; align-items: center !important; }
.cg-file-registry-note { display: block !important; margin-top: 8px !important; color: #64748b !important; font-weight: 700 !important; font-size: 12px !important; }
.cg-file-registry-list { display: grid !important; gap: 10px !important; }
.cg-file-registry-card { display: flex !important; justify-content: space-between !important; gap: 12px !important; align-items: center !important; padding: 14px 15px !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 8px 22px rgba(15,23,42,.055) !important; }
.cg-file-registry-card strong { display: block !important; color: #111827 !important; font-size: 14px !important; line-height: 1.25 !important; }
.cg-file-registry-card small, .cg-file-registry-card em { display: block !important; color: #64748b !important; font-style: normal !important; font-size: 12px !important; margin-top: 3px !important; }
.cg-file-registry-actions { display: flex !important; gap: 8px !important; flex: 0 0 auto !important; }
@media (max-width: 720px) {
  .cg-file-registry-search-form { grid-template-columns: 1fr !important; }
  .cg-file-registry-card { align-items: stretch !important; flex-direction: column !important; border-radius: 20px !important; }
  .cg-file-registry-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; }
}

/* CG-DASH-003 — Workflow Task Clarity Dashboard */
.cg-workflow-task-board {
  display: grid !important;
  gap: 12px !important;
}

.cg-workflow-task-group {
  display: grid !important;
  gap: 8px !important;
}

.cg-workflow-task-group-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 3px 2px !important;
}

.cg-workflow-task-group-head h3 {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  color: #0b192c !important;
}

.cg-workflow-task-group-head span {
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: #f8fafc !important;
  border: 1px solid #e5edf6 !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.cg-workflow-task-list {
  display: grid !important;
  gap: 8px !important;
}

.cg-workflow-task-wrap.is-hidden {
  display: none !important;
}

.cg-workflow-task-card {
  width: 100% !important;
  border: 1px solid #dbe6f3 !important;
  border-radius: 15px !important;
  background: #fff !important;
  text-align: left !important;
  padding: 11px 12px !important;
  display: grid !important;
  gap: 5px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.04) !important;
}

.cg-workflow-task-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.08) !important;
}

.cg-workflow-task-card strong {
  display: block !important;
  color: #0b192c !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

.cg-workflow-task-card small,
.cg-workflow-task-card em {
  display: block !important;
  color: #64748b !important;
  font-size: 11.5px !important;
  font-style: normal !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
}

.cg-workflow-task-card em {
  color: #334155 !important;
}

.cg-workflow-badge {
  width: fit-content !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  border: 1px solid transparent !important;
}

.cg-workflow-task-red .cg-workflow-badge { background: #fff1f2 !important; color: #be123c !important; border-color: #fecdd3 !important; }
.cg-workflow-task-amber .cg-workflow-badge { background: #fffbeb !important; color: #b45309 !important; border-color: #fde68a !important; }
.cg-workflow-task-blue .cg-workflow-badge { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
.cg-workflow-task-purple .cg-workflow-badge { background: #f5f3ff !important; color: #6d28d9 !important; border-color: #ddd6fe !important; }
.cg-workflow-task-green .cg-workflow-badge { background: #ecfdf5 !important; color: #047857 !important; border-color: #bbf7d0 !important; }
.cg-workflow-task-gray .cg-workflow-badge { background: #f8fafc !important; color: #475569 !important; border-color: #e2e8f0 !important; }

.cg-workflow-load-more {
  justify-self: start !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

@media (max-width: 760px) {
  .cg-workflow-task-card {
    padding: 12px !important;
  }
  .cg-workflow-task-card strong {
    font-size: 13.5px !important;
  }
}


/* CG-NTF-001 — compact notification cards */
.cg-notification-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.cg-notification-card + .cg-notification-card { margin-top: 10px; }
.cg-notification-card.unread { border-color: rgba(245, 158, 11, .36); background: rgba(255, 251, 235, .95); }
.cg-notification-card-main { flex: 1; cursor: pointer; min-width: 0; }
.cg-notification-card-main strong { display: block; margin: 8px 0 4px; color: #0f172a; }
.cg-notification-card-main p { margin: 0 0 8px; color: #475569; line-height: 1.45; }
.cg-notification-card-main small { color: #64748b; font-size: .78rem; }
.cg-notification-card-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cg-btn.tiny { padding: 7px 10px; border-radius: 999px; font-size: .78rem; }
[data-notification-count] { position: relative; }
.has-notification::after { content: attr(data-notification-count); }
@media (max-width: 640px) {
  .cg-notification-card { flex-direction: column; }
  .cg-notification-card-actions { flex-direction: row; align-items: center; }
}


/* CG-DASH-004 — Admin dashboard separation + dedicated heavy-data menus */
.cg-admin-health-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 18px}
.cg-admin-health-card{background:var(--cg-card,#fff);border:1px solid var(--cg-border,#e5e7eb);border-radius:18px;padding:16px;box-shadow:0 12px 28px rgba(15,23,42,.06)}
.cg-admin-health-card span,.cg-admin-health-card small{display:block;color:var(--cg-muted,#64748b);font-size:.82rem}.cg-admin-health-card strong{display:block;font-size:1.7rem;margin:6px 0;color:var(--cg-text,#0f172a)}
.cg-admin-health-checks .cg-row-static{cursor:default}.cg-admin-note{padding:6px 2px}.cg-admin-note strong{display:block;margin-bottom:6px}.cg-admin-note p{margin:0;color:var(--cg-muted,#64748b);line-height:1.45}
.cg-admin-operation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cg-admin-operation-card{border:1px solid var(--cg-border,#e5e7eb);background:var(--cg-card,#fff);border-radius:16px;padding:14px;text-align:left;cursor:pointer}.cg-admin-operation-card strong{display:block;margin-bottom:5px}.cg-admin-operation-card small{display:block;color:var(--cg-muted,#64748b);line-height:1.35}
.cg-officer-kpi-row{display:grid;grid-template-columns:1.2fr .7fr .45fr .45fr;gap:10px;align-items:center;border:1px solid var(--cg-border,#e5e7eb);border-radius:14px;background:var(--cg-card,#fff);padding:12px;margin-bottom:10px}.cg-officer-kpi-row small{color:var(--cg-muted,#64748b)}.cg-officer-kpi-row div{display:flex;justify-content:space-between;gap:6px}.cg-officer-kpi-row span{color:var(--cg-muted,#64748b)}
@media(max-width:720px){.cg-admin-health-grid,.cg-admin-operation-grid{grid-template-columns:1fr}.cg-officer-kpi-row{grid-template-columns:1fr 1fr}.cg-officer-kpi-row strong{grid-column:1/-1}}

/* CG-DASH-005 — cleaner records/list typography and table presentation */
body:not(.cg-public-page) .cg-panel-head h2,
body:not(.cg-public-page) .cg-head h1,
body:not(.cg-public-page) .cg-row strong,
body:not(.cg-public-page) .cg-action,
body:not(.cg-public-page) .cg-kpi strong,
body:not(.cg-public-page) .cg-workflow-task-card strong,
body:not(.cg-public-page) .cg-search-result-card strong {
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
}
body:not(.cg-public-page) .cg-panel-head p,
body:not(.cg-public-page) .cg-row small,
body:not(.cg-public-page) .cg-head p,
body:not(.cg-public-page) .cg-muted-text {
  font-weight: 400 !important;
}
body:not(.cg-public-page) .cg-badge,
body:not(.cg-public-page) .cg-status-chip,
body:not(.cg-public-page) .cg-record-type-chip {
  font-weight: 650 !important;
}
.cg-record-screen .cg-panel { overflow:hidden; }
.cg-record-table-wrap,
.cg-search-result-table-wrap {
  width:100%;
  overflow:auto;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
}
.cg-record-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:760px;
  font-size:13px;
}
.cg-record-table th {
  position:sticky;
  top:0;
  z-index:1;
  text-align:left;
  padding:10px 12px;
  background:#f8fafc;
  color:#475569;
  border-bottom:1px solid #e5e7eb;
  font-size:11.5px;
  font-weight:650;
  text-transform:none;
  white-space:nowrap;
}
.cg-record-table td {
  padding:11px 12px;
  border-bottom:1px solid #eef2f7;
  color:#1f2937;
  vertical-align:top;
  font-weight:400;
}
.cg-record-table tbody tr:last-child td { border-bottom:0; }
.cg-record-table tbody tr[data-route] { cursor:pointer; }
.cg-record-table tbody tr[data-route]:hover { background:#fffbeb; }
.cg-record-table .title-col {
  min-width:280px;
  max-width:460px;
  white-space:normal;
  line-height:1.35;
  color:#111827;
  font-weight:500;
}
.cg-record-table td strong {
  display:block;
  font-weight:600 !important;
  font-size:13px;
  line-height:1.3;
  color:#111827;
}
.cg-record-table td small {
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:11.5px;
  line-height:1.3;
  font-weight:400 !important;
}
.cg-record-type-chip {
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 8px;
  background:#f1f5f9;
  color:#334155;
  font-size:11.5px;
}
.cg-tabs-soft button { font-weight:500 !important; }
.cg-admin-viewer-clean-grid { align-items:start; }
.cg-admin-viewer-clean-grid .cg-main-col .cg-lazy-panel { min-height:240px; }
@media(max-width:720px){
  .cg-record-table-wrap,
  .cg-search-result-table-wrap { border:0; background:transparent; overflow:visible; }
  .cg-record-table { min-width:0; display:block; font-size:13px; }
  .cg-record-table thead { display:none; }
  .cg-record-table tbody { display:grid; gap:10px; }
  .cg-record-table tr { display:grid; gap:6px; border:1px solid #e5e7eb; border-radius:14px; background:#fff; padding:10px 12px; }
  .cg-record-table td { display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px; padding:0; border:0; }
  .cg-record-table td::before { content:attr(data-label); color:#64748b; font-size:11.5px; font-weight:600; }
  .cg-record-table .title-col { min-width:0; max-width:none; }
}

/* CG-KPI-001 — Received / Filed Only / Replied KPI */
.cg-officer-kpi-row.cg-officer-kpi-rfr{
  grid-template-columns:1.35fr .55fr .55fr .55fr .55fr;
}
.cg-officer-kpi-rfr div b,
.cg-officer-kpi-rfr div span{display:block;}
.cg-officer-kpi-rfr div{align-items:center;}
@media(max-width:720px){
  .cg-officer-kpi-row.cg-officer-kpi-rfr{grid-template-columns:1fr 1fr;}
  .cg-officer-kpi-row.cg-officer-kpi-rfr strong{grid-column:1/-1;}
}


/* CG-ABOUT-001 — Panduan & Tentang CaseGo */
.cg-about-page .cg-panel h2 { font-weight: 650; }
.cg-about-hero { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.cg-about-mark { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(135deg, #0b192c, #1e3a8a); color: #fff; box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18); }
.cg-about-eyebrow { display: inline-flex; margin-bottom: 8px; color: #64748b; font-size: 0.85rem; font-weight: 600; }
.cg-about-hero h2 { margin: 0 0 8px; font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 700; color: #0f172a; }
.cg-about-hero p, .cg-about-text, .cg-about-credit p { margin: 0; color: #475569; line-height: 1.75; font-weight: 400; }
.cg-about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cg-about-credit { display: grid; gap: 12px; }
.cg-about-credit strong { color: #0f172a; font-weight: 650; }
.cg-about-principles { display: flex; flex-wrap: wrap; gap: 10px; }
.cg-about-principles span { padding: 9px 12px; border-radius: 999px; background: #eff6ff; color: #1e3a8a; font-weight: 600; font-size: 0.9rem; }
.cg-about-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cg-about-guide-grid article { padding: 14px; border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 16px; background: #f8fafc; }
.cg-about-guide-grid strong { display: block; margin-bottom: 6px; font-weight: 650; color: #0f172a; }
.cg-about-guide-grid span { display: block; color: #64748b; line-height: 1.6; font-size: 0.92rem; }
.cg-about-signature { margin-top: 14px; padding: 14px; border-radius: 16px; background: #f8fafc; border: 1px dashed rgba(100, 116, 139, 0.35); display: grid; gap: 4px; color: #475569; }
.cg-about-signature strong { color: #0f172a; font-weight: 650; }
@media (max-width: 760px) {
  .cg-about-hero { grid-template-columns: 1fr; }
  .cg-about-grid, .cg-about-guide-grid { grid-template-columns: 1fr; }
  .cg-about-mark { width: 56px; height: 56px; border-radius: 18px; }
}

/* ============================================================
   CG-UI-005 — Desktop Sidebar Scroll + Compact Height Guard
   Purpose: keep every sidebar menu reachable at 100% browser zoom,
   especially on MacBook/Chrome where vertical space is limited.
   Original system concept, workflow model and operational coordination:
   Frankly F. C., Pembantu Tadbir Gred N.2, Bahagian Pentadbiran.
   ============================================================ */
body:not(.cg-public-page) .cg-sidebar,
body:not(.cg-public-page) #cgSidebar {
  height: calc(100vh - var(--h)) !important;
  max-height: calc(100vh - var(--h)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148, 163, 184, .42) transparent !important;
  padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
}

body:not(.cg-public-page) .cg-sidebar::-webkit-scrollbar,
body:not(.cg-public-page) #cgSidebar::-webkit-scrollbar {
  width: 7px !important;
}

body:not(.cg-public-page) .cg-sidebar::-webkit-scrollbar-track,
body:not(.cg-public-page) #cgSidebar::-webkit-scrollbar-track {
  background: transparent !important;
}

body:not(.cg-public-page) .cg-sidebar::-webkit-scrollbar-thumb,
body:not(.cg-public-page) #cgSidebar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .34) !important;
  border-radius: 999px !important;
}

body:not(.cg-public-page) .cg-side-nav button {
  min-height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (min-width: 721px) and (max-height: 860px) {
  body:not(.cg-public-page) .cg-sidebar,
  body:not(.cg-public-page) #cgSidebar {
    padding-top: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body:not(.cg-public-page) .cg-sidebar-brand {
    gap: 5px !important;
    margin-bottom: 7px !important;
    padding-bottom: 10px !important;
  }

  body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-shell,
  body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-sidebar-clean,
  body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-sidebar-centered {
    width: 168px !important;
    max-width: 190px !important;
  }

  body:not(.cg-public-page) .cg-sidebar-brand small,
  body:not(.cg-public-page) .cg-sidebar-tagline-clean {
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  body:not(.cg-public-page) .cg-side-nav {
    gap: 3px !important;
    padding-top: 5px !important;
  }

  body:not(.cg-public-page) .cg-side-nav button {
    min-height: 36px !important;
    border-radius: 10px !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    padding-left: 14px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 721px) and (max-height: 740px) {
  body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-shell,
  body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-sidebar-clean,
  body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-sidebar-centered {
    width: 142px !important;
  }

  body:not(.cg-public-page) .cg-side-nav button {
    min-height: 32px !important;
    font-size: 12.5px !important;
  }
}

/* CG-DASH-007 — PJ/EE dashboard task table cleanup */
.cg-workflow-task-board-table {
  gap: 14px !important;
}

.cg-workflow-task-group-table {
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  padding: 12px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .045) !important;
}

.cg-workflow-table-wrap {
  border: 1px solid #e5edf6 !important;
  border-radius: 14px !important;
  overflow: auto !important;
  background: #fff !important;
}

.cg-workflow-table {
  width: 100% !important;
  min-width: 760px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
}

.cg-workflow-table th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  text-align: left !important;
  padding: 11px 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  white-space: nowrap !important;
}

.cg-workflow-table td {
  padding: 12px !important;
  border-bottom: 1px solid #eef2f7 !important;
  color: #0f172a !important;
  vertical-align: top !important;
  line-height: 1.35 !important;
}

.cg-workflow-table tr:last-child td {
  border-bottom: 0 !important;
}

.cg-workflow-table-row {
  cursor: pointer !important;
}

.cg-workflow-table-row:hover td {
  background: #f8fafc !important;
}

.cg-workflow-table td strong {
  display: block !important;
  max-width: 520px !important;
  color: #0b192c !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
}

.cg-workflow-table td small {
  display: block !important;
  margin-top: 3px !important;
  color: #64748b !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
}

.cg-workflow-table .cg-workflow-badge {
  font-size: 10px !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

.cg-workflow-table tr.is-hidden {
  display: none !important;
}

@media (max-width: 760px) {
  .cg-workflow-task-group-table {
    padding: 10px !important;
    border-radius: 16px !important;
  }
  .cg-workflow-table {
    min-width: 680px !important;
  }
  .cg-workflow-table th,
  .cg-workflow-table td {
    padding: 10px !important;
  }
}


/* CG-UI-006 — Professional Table, Search, KPI, About and Profile Cleanup */
.cg-kpi-table-wrap .cg-record-table,
.cg-kpi-table { min-width: 620px; }
.cg-kpi-table td:not(.title-col) { font-size: 18px; font-weight: 650; color: #0b192c; }
.cg-kpi-table .title-col strong { font-size: 13.5px; font-weight: 650 !important; }
.cg-kpi-table .title-col small { text-transform: uppercase; letter-spacing: .02em; }
.cg-search-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; color:#64748b; font-size:13px; }
.cg-search-summary strong { color:#0f172a; font-weight:650; }
.cg-search-table-pro .title-col { max-width: 720px; }
.cg-search-table-pro .title-col strong { font-size:13.5px; line-height:1.35; font-weight:650 !important; text-transform:none; }
.cg-search-table-pro .title-col small { max-width: 760px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-search-table-pro .cg-ref-col { font-size: 12.5px; color:#334155; white-space: normal; max-width: 240px; }
.cg-file-registry-card-detail { display:grid; grid-template-columns:minmax(280px,1.2fr) minmax(360px,1.8fr) auto; gap:18px; align-items:center; }
.cg-file-registry-main { display:grid; gap:5px; }
.cg-mini-label { font-size:10.5px; color:#64748b; font-weight:700; letter-spacing:.08em; }
.cg-file-registry-card-detail strong { font-size:14.5px; line-height:1.35; font-weight:650 !important; color:#0f172a; }
.cg-file-registry-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.cg-file-registry-detail-grid div { border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; background:#f8fafc; }
.cg-file-registry-detail-grid span { display:block; color:#64748b; font-size:11.5px; margin-bottom:4px; }
.cg-file-registry-detail-grid b { display:block; color:#0f172a; font-size:13px; font-weight:650; line-height:1.3; }
.cg-about-page-pro .cg-panel { padding:18px; }
.cg-about-section-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.cg-about-block { background:#fff; border:1px solid #dbe5f0; border-radius:18px; padding:18px; box-shadow:0 14px 30px rgba(15,23,42,.04); }
.cg-about-block h3 { margin:0 0 8px; font-size:15px; font-weight:650; color:#0f172a; }
.cg-about-block p { margin:0; color:#475569; line-height:1.65; font-size:13.5px; }
.cg-about-page-pro .cg-about-credit { gap:10px; }
.cg-about-page-pro .cg-about-guide-grid article { display:grid; gap:5px; }
.cg-about-page-pro .cg-about-principles { gap:8px; }
.cg-about-page-pro .cg-about-principles span { padding:8px 11px; font-size:12.5px; }
.cg-profile-grid-008b10i { grid-template-columns: minmax(0,1.5fr) minmax(320px,.85fr) !important; align-items:start !important; }
.cg-profile-photo-box-008b10i { grid-template-columns:78px minmax(0,1fr) !important; gap:12px !important; }
.cg-profile-photo-preview-008b10i { width:78px !important; height:78px !important; border-radius:22px !important; font-size:22px !important; }
.cg-profile-photo-control-008b10i input[type="file"] { min-height:38px !important; padding:6px 8px !important; }
.cg-profile-note-008b10i { margin-top:10px !important; padding:10px 12px !important; font-size:11.5px !important; }
.cg-record-table td .cg-status-chip, .cg-record-table td .cg-badge { white-space:normal; }
@media(max-width:900px){
  .cg-file-registry-card-detail { grid-template-columns:1fr; gap:12px; }
  .cg-file-registry-detail-grid { grid-template-columns:1fr; }
  .cg-about-section-grid { grid-template-columns:1fr; }
  .cg-profile-grid-008b10i { grid-template-columns:1fr !important; }
}

/* ============================================================
   CG-UI-009 — Official Profile Photo Assets
   Remove user-side upload UI and present fixed staff photos cleanly.
   ============================================================ */
.cg-profile-grid-official {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .7fr) !important;
}

.cg-profile-official-photo-card .cg-panel-head {
  margin-bottom: 10px !important;
}

.cg-profile-photo-official-box {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

.cg-profile-photo-official {
  width: 96px !important;
  height: 112px !important;
  border-radius: 22px !important;
  background: #f8fafc !important;
  border: 1px solid #dbe5f0 !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.10) !important;
}

.cg-profile-photo-official img {
  object-fit: cover !important;
  object-position: center top !important;
}

.cg-profile-photo-official-meta {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.cg-profile-photo-official-meta strong {
  display: block !important;
  color: #0b1f3f !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  overflow-wrap: anywhere !important;
}

.cg-profile-photo-official-meta span {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

.cg-profile-photo-official-meta p {
  margin: 3px 0 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.cg-profile-note-official {
  background: #f8fafc !important;
  border-color: #dbe5f0 !important;
  color: #475569 !important;
  font-weight: 600 !important;
}

@media (max-width: 900px) {
  .cg-profile-grid-official {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .cg-profile-photo-official-box {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }
  .cg-profile-photo-official {
    width: 84px !important;
    height: 96px !important;
    border-radius: 20px !important;
  }
}


/* ============================================================
   CG-UI-012 — Profile duplicate photo card removal
   Official photo remains in the profile hero; repeated photo panel removed.
   ============================================================ */
.cg-profile-grid-single-info {
  grid-template-columns: 1fr !important;
}
.cg-profile-grid-single-info .cg-profile-card-008b10i {
  max-width: none !important;
}


/* CG-UI-013 — Header logout shortcut
   Adds a compact logout button to the top header so users do not need to open Profile. */
.cg-header-logout {
  appearance: none !important;
  border: 1px solid #dbe3ef !important;
  background: #ffffff !important;
  color: #0f2f63 !important;
  border-radius: 14px !important;
  padding: 9px 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  margin-left: 8px !important;
}
.cg-header-logout:hover {
  border-color: #f2c500 !important;
  background: #fff9db !important;
}
body.cg-route-login .cg-header-logout,
body.cg-public-page .cg-header-logout {
  display: none !important;
}
@media (max-width: 760px) {
  .cg-header-logout {
    padding: 8px 10px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }
  .cg-header .cg-user {
    max-width: 92px !important;
  }
}
@media (max-width: 420px) {
  .cg-header-logout {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-indent: -999px !important;
    position: relative !important;
  }
  .cg-header-logout::after {
    content: '↪' !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    text-indent: 0 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
  }
}

/* CG-WF-001 — EE Assignment Branch Workflow */
.cg-ee-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.cg-ee-decision-card {
  border: 1px solid var(--cg-border, #d9e2ef);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.cg-ee-decision-card h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--cg-ink, #08204a);
}
.cg-ee-decision-card p {
  margin: 0;
  color: var(--cg-muted, #51627a);
  font-size: 13px;
  line-height: 1.45;
}
.cg-ee-decision-card .cg-btn {
  margin-top: auto;
  width: 100%;
}
@media (max-width: 1100px) {
  .cg-ee-decision-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CG-UI-016 — QR Slip Print Reliability
   Scope: QR image must load before print and slip should fit one 210mm x 99mm sheet.
   ============================================================ */
.cg-print-slip-root {
  display: none;
}

body.cg-printing-slip .cg-print-slip-root {
  display: block;
}

body.cg-printing-slip .cg-print-slip-official {
  box-sizing: border-box !important;
  width: 210mm !important;
  min-height: 99mm !important;
  max-height: 99mm !important;
  padding: 8mm 10mm !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  page-break-after: avoid !important;
  break-after: avoid !important;
}

body.cg-printing-slip .cg-print-slip-main {
  display: grid !important;
  grid-template-columns: 50mm minmax(0, 1fr) !important;
  gap: 8mm !important;
  align-items: start !important;
}

body.cg-printing-slip .cg-print-qr-box {
  display: grid !important;
  place-items: center !important;
  width: 48mm !important;
  min-height: 55mm !important;
  margin: 0 !important;
  padding: 2mm !important;
  border: 1px dashed #6b7280 !important;
  background: #ffffff !important;
}

body.cg-printing-slip .cg-print-qr-box img {
  display: block !important;
  width: 42mm !important;
  height: 42mm !important;
  max-width: 42mm !important;
  max-height: 42mm !important;
  object-fit: contain !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.cg-printing-slip .cg-print-qr-box strong {
  display: block !important;
  margin-top: 2mm !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

body.cg-printing-slip .cg-print-slip-info p {
  margin: 0 0 3mm !important;
  padding-bottom: 2mm !important;
  border-bottom: 1px solid #d1d5db !important;
}

body.cg-printing-slip .cg-print-slip-note {
  margin-top: 4mm !important;
  padding-top: 3mm !important;
  border-top: 1px solid #111827 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

@media print {
  @page { size: 210mm 99mm; margin: 0; }
  html, body {
    width: 210mm !important;
    height: 99mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  body.cg-printing-slip * {
    visibility: hidden !important;
  }

  body.cg-printing-slip #cgPrintSlipRoot,
  body.cg-printing-slip #cgPrintSlipRoot * {
    visibility: visible !important;
  }

  body.cg-printing-slip #cgPrintSlipRoot {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    height: 99mm !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.cg-printing-slip .cg-print-slip-official {
    width: 210mm !important;
    min-height: 99mm !important;
    max-height: 99mm !important;
    margin: 0 !important;
    padding: 8mm 10mm !important;
    box-shadow: none !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
}


/* ============================================================
   CG-UI-018 — QR Scan Reliability
   Larger high-resolution QR, stronger quiet zone and Netlify-safe tracking URL.
   ============================================================ */
body.cg-printing-slip .cg-print-slip-official {
  width: 210mm !important;
  height: 99mm !important;
  min-height: 99mm !important;
  max-height: 99mm !important;
  padding: 6mm 8mm !important;
  overflow: hidden !important;
}

body.cg-printing-slip .cg-print-slip-main {
  display: grid !important;
  grid-template-columns: 70mm minmax(0, 1fr) !important;
  gap: 7mm !important;
  align-items: start !important;
}

body.cg-printing-slip .cg-print-qr-box {
  width: 66mm !important;
  min-height: 72mm !important;
  padding: 3mm !important;
  border: 1px solid #111827 !important;
  background: #ffffff !important;
}

body.cg-printing-slip .cg-print-qr-box img {
  width: 58mm !important;
  height: 58mm !important;
  max-width: 58mm !important;
  max-height: 58mm !important;
  image-rendering: auto !important;
}

body.cg-printing-slip .cg-print-qr-box strong {
  margin-top: 2mm !important;
  font-size: 10px !important;
  color: #111827 !important;
}

body.cg-printing-slip .cg-print-slip-head {
  margin-bottom: 4mm !important;
  padding-bottom: 3mm !important;
}

body.cg-printing-slip .cg-print-slip-head h1 {
  font-size: 14px !important;
}

body.cg-printing-slip .cg-print-slip-info {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

body.cg-printing-slip .cg-print-slip-info p {
  margin: 0 0 2mm !important;
  padding-bottom: 1.5mm !important;
}

body.cg-printing-slip .cg-print-slip-info span {
  font-size: 8.5px !important;
  line-height: 1.15 !important;
}

body.cg-printing-slip .cg-print-slip-note {
  margin-top: 2mm !important;
  padding-top: 2mm !important;
  font-size: 9px !important;
}

@media print {
  @page { size: 210mm 99mm; margin: 0; }
  body.cg-printing-slip #cgPrintSlipRoot { width: 210mm !important; height: 99mm !important; }
  body.cg-printing-slip .cg-print-slip-official { page-break-after: avoid !important; break-after: avoid !important; }
}


/* CG-WF-002 — PU two-stage registration and multi-officer assignment */
.cg-id-success{max-width:680px;margin:0 auto;text-align:center;display:grid;gap:10px;padding:28px!important}
.cg-id-success>span{color:var(--muted);font-weight:700}.cg-id-success>strong{font-size:34px;color:var(--blue);letter-spacing:.04em}.cg-id-success .cg-short-id{font-size:54px;color:#111827;background:var(--ys);border:2px dashed var(--y);border-radius:18px;padding:12px}
.cg-officer-multi-group{border:1px solid var(--border);border-radius:16px;padding:14px;margin:0}.cg-officer-multi-group legend{font-weight:850;color:var(--blue);padding:0 7px}.cg-officer-checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}.cg-officer-check{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:12px;padding:10px;background:#fff;cursor:pointer;margin:0}.cg-officer-check:has(input:checked){border-color:var(--y);background:var(--ys)}.cg-officer-check input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--y)}.cg-officer-check span,.cg-officer-check strong,.cg-officer-check small{display:block}.cg-officer-check small{color:var(--muted)}
@media(max-width:720px){.cg-officer-checkbox-grid{grid-template-columns:1fr}.cg-id-success .cg-short-id{font-size:42px}}


/* CG-WF-003 — Incoming ID visibility */
.cg-record-table .cg-id-col{font-weight:850;color:#173a63;white-space:nowrap;letter-spacing:.01em}
@media(max-width:720px){.cg-record-table td.cg-id-col{font-size:13px;background:#f8fafc}}


/* CG-WF-005A — Incoming search, softcopy column and first-login password */
.cg-incoming-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}.cg-incoming-search-result{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.cg-search-result-priority{display:grid;gap:10px;padding:14px;border:1px solid #f2c500;border-radius:16px;background:#fffdf1}.cg-id-col{white-space:nowrap;font-weight:850;color:#173a63}.cg-table-softcopy{display:inline-flex;align-items:center;justify-content:center;min-height:30px;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800}.cg-table-softcopy.available{border:1px solid #86efac;background:#f0fdf4;color:#166534}.cg-table-softcopy.pending{border:1px solid #e2e8f0;background:#f8fafc;color:#64748b}.cg-password-change-screen{max-width:720px;margin:0 auto}.cg-password-change-card{max-width:520px;width:100%;margin:0 auto}.cg-password-change-card input{min-height:48px}@media(max-width:720px){.cg-incoming-search-form{grid-template-columns:1fr}.cg-incoming-search-form .cg-btn{width:100%}.cg-record-table td[data-label="Softcopy"]{display:flex;align-items:center;justify-content:space-between}.cg-password-change-screen{padding-top:12px}}


/* CG-WF-006 — Outgoing reopen edit and anytime softcopy upload */
.cg-outgoing-immutable{border:1px solid #dbeafe;background:#eff6ff;border-radius:16px;padding:14px}
.cg-form-row input[type=file]{min-height:48px;padding:10px;background:#f8fafc;border-style:dashed}


/* CG-WF-007 — personal assignment visibility */
.cg-record-table .cg-assigned-col{min-width:170px;font-weight:750;color:#334155}
.cg-incoming-view-tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.cg-incoming-view-tabs button{min-height:42px}
@media(max-width:760px){.cg-record-table .cg-assigned-col{min-width:145px}.cg-incoming-view-tabs button{flex:1 1 150px}}


/* CG-WF-007A — incoming list and PJ dashboard polish */
.cg-list-count{margin:0 0 12px;color:#64748b;font-size:12px;font-weight:750}
.cg-dashboard-lite .cg-mini-stat-strip{margin-top:10px}
.cg-dashboard-lite .cg-workflow-table td:nth-child(2) strong{line-height:1.35}
.cg-dashboard-lite .cg-workflow-table tr[data-route]{cursor:pointer}
.cg-dashboard-lite .cg-workflow-table tr[data-route]:hover{background:#f8fbff}
@media(max-width:760px){.cg-list-count{font-size:11px}.cg-dashboard-lite .cg-workflow-table td:nth-child(4){font-weight:750;color:#173a63}}


/* CG-WF-008 — Incoming & Outgoing Full Pagination */
.cg-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--cg-border,#dbe3ee)}
.cg-pagination-summary{font-size:.88rem;color:var(--cg-muted,#64748b)}
.cg-pagination-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cg-page-btn{min-width:38px;height:38px;border:1px solid var(--cg-border,#dbe3ee);background:#fff;border-radius:10px;font-weight:750;cursor:pointer}
.cg-page-btn.active{background:#1e3a8a;color:#fff;border-color:#1e3a8a}
.cg-page-btn:disabled,.cg-pagination .cg-btn:disabled{opacity:.45;cursor:not-allowed}
.cg-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.cg-search-row input{width:100%;min-height:42px}
.cg-tab-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
@media (max-width:640px){.cg-search-row{grid-template-columns:1fr 1fr}.cg-search-row input{grid-column:1/-1}.cg-pagination{align-items:flex-start}.cg-pagination-controls{width:100%}}

/* CG-DASH-008 — Super Admin Command Centre */
.cg-admin-command-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.cg-admin-command-card{position:relative;overflow:hidden;border:1px solid var(--cg-border,#e2e8f0);background:var(--cg-card,#fff);border-radius:18px;padding:16px;text-align:left;cursor:pointer;box-shadow:0 10px 26px rgba(15,23,42,.055);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.cg-admin-command-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#f59e0b}
.cg-admin-command-card:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(15,23,42,.09);border-color:#cbd5e1}
.cg-admin-command-card span,.cg-admin-command-card small{display:block;color:var(--cg-muted,#64748b)}
.cg-admin-command-card span{font-size:.78rem;font-weight:750}.cg-admin-command-card strong{display:block;margin:7px 0 5px;font-size:1.65rem;color:var(--cg-text,#0f172a)}.cg-admin-command-card small{font-size:.75rem;line-height:1.3}
.cg-admin-command-pending:before{background:#ef4444}.cg-admin-command-users:before{background:#2563eb}.cg-admin-command-incoming:before{background:#0ea5e9}.cg-admin-command-outgoing:before{background:#8b5cf6}.cg-admin-command-attachments:before{background:#10b981}.cg-admin-command-audit:before{background:#64748b}
.cg-admin-command-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:16px;align-items:start}.cg-admin-command-main,.cg-admin-command-side{display:grid;gap:16px}
.cg-admin-health-compact{margin:0}.cg-admin-health-pill{display:inline-flex;align-items:center;border-radius:999px;padding:7px 11px;font-size:.75rem;font-weight:850;background:#dcfce7;color:#166534}.cg-admin-health-pill.is-warning{background:#fef3c7;color:#92400e}.cg-admin-health-pill.is-critical{background:#fee2e2;color:#991b1b}
.cg-admin-health-list{display:grid;gap:8px;margin-bottom:12px}.cg-admin-health-item{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--cg-border,#e2e8f0)}.cg-admin-health-item:last-child{border-bottom:0}.cg-admin-health-item>span{width:9px;height:9px;border-radius:50%;background:#22c55e}.cg-admin-health-item>span.is-warning{background:#f59e0b}.cg-admin-health-item>span.is-critical{background:#ef4444}.cg-admin-health-item strong,.cg-admin-health-item small{display:block}.cg-admin-health-item small{margin-top:2px;color:var(--cg-muted,#64748b);font-size:.75rem}.cg-admin-health-item b{font-size:.7rem;color:var(--cg-muted,#64748b)}
.cg-admin-alert-list{display:grid;gap:9px}.cg-admin-alert-list button{display:grid;grid-template-columns:10px minmax(0,1fr);gap:11px;align-items:start;width:100%;border:1px solid var(--cg-border,#e2e8f0);background:#fff;border-radius:14px;padding:12px;text-align:left;cursor:pointer}.cg-admin-alert-list button:hover{background:#f8fafc}.cg-admin-alert-list span{width:9px;height:9px;margin-top:4px;border-radius:50%;background:#f59e0b}.cg-admin-alert-list span.is-critical{background:#ef4444}.cg-admin-alert-list span.is-action{background:#2563eb}.cg-admin-alert-list strong,.cg-admin-alert-list small{display:block}.cg-admin-alert-list small{margin-top:3px;color:var(--cg-muted,#64748b)}
.cg-admin-shortcuts{display:grid;gap:9px}.cg-admin-shortcuts button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;border:1px solid var(--cg-border,#e2e8f0);background:#fff;border-radius:13px;padding:12px;text-align:left;cursor:pointer}.cg-admin-shortcuts button:hover{background:#f8fafc}.cg-admin-shortcuts strong{grid-column:1}.cg-admin-shortcuts small{grid-column:1;color:var(--cg-muted,#64748b)}.cg-admin-shortcuts span{grid-column:2;grid-row:1/3;font-size:1.3rem;color:#94a3b8}
@media(max-width:1180px){.cg-admin-command-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.cg-admin-command-grid{grid-template-columns:1fr}.cg-admin-command-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.cg-admin-command-metrics{grid-template-columns:1fr 1fr}.cg-admin-command-card{padding:13px}.cg-admin-command-card strong{font-size:1.35rem}}

/* CG-WF-009 Makluman Recipient Separation */
.cg-info-recipient-group{border-color:#d8b34b;background:#fffdf5}.cg-info-recipient-group legend{color:#785c00}.cg-info-recipient-check{background:#fffaf0}.cg-field-help{margin:0 0 12px;color:#64748b;font-size:12px}


/* CG-UI-001A-CLEAN START */
/* Integrated PASS-approved desktop width and typography foundation. */
:root {
  --cg-content-max: 1440px;
  --cg-content-wide: 1680px;
  --cg-space-1: 4px;
  --cg-space-2: 4px;
  --cg-space-3: 8px;
  --cg-space-4: 12px;
  --cg-space-5: 16px;
  --cg-space-6: 20px;
  --cg-space-8: 28px;
  --cg-font-regular: 400;
  --cg-font-medium: 500;
  --cg-font-semibold: 600;
  --cg-radius-control: 10px;
  --cg-radius-card: 16px;
  --cg-shadow-card: 0 8px 24px rgba(15, 23, 42, .055);
}

/* Controlled type scale: large monitors gain breathing room, not oversized text. */
body {
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.cg-head h1,
.cg-panel-head h2,
.cg-dashboard-lite .cg-head h1 {
  font-weight: var(--cg-font-semibold) !important;
  letter-spacing: -.015em;
}

.cg-head h1,
.cg-dashboard-lite .cg-head h1 {
  font-size: clamp(1.28rem, 1.18rem + .28vw, 1.62rem) !important;
  line-height: 1.25;
}

.cg-panel-head h2,
.cg-dashboard-lite .cg-panel-head h2 {
  font-size: .95rem !important;
  line-height: 1.35;
}

p,
.cg-head p,
.cg-panel-head p,
.cg-dashboard-lite .cg-panel-head p {
  line-height: 1.55;
}

label,
.cg-btn,
.cg-text-btn,
.cg-side-nav button,
.cg-action,
.cg-tabs button {
  font-weight: var(--cg-font-medium) !important;
}

.cg-badge,
.cg-mini-label,
.cg-kpi span,
.cg-kpi-compact span,
.cg-kpi-table .title-col small {
  font-weight: var(--cg-font-semibold) !important;
}

/* Main content is centered and visually controlled on wide displays. */
.cg-main {
  min-width: 0;
}

.cg-main > .cg-screen:not(.cg-center):not(.cg-login):not(.cg-login-enterprise) {
  width: min(100%, var(--cg-content-max));
  margin-inline: auto;
  padding: clamp(18px, 1.6vw, 28px);
  gap: var(--cg-space-4);
}

/* Dense operational pages can use available width without becoming limitless. */
.cg-main > .cg-screen.cg-wide,
.cg-main > .cg-screen:has(.cg-record-table),
.cg-main > .cg-screen:has(.cg-kpi-table) {
  width: min(100%, var(--cg-content-wide));
}

/* Shared surface rhythm. */
.cg-card,
.cg-panel,
.cg-head,
.cg-kpi,
.cg-op-card,
.cg-about-block {
  border-radius: var(--cg-radius-card) !important;
  box-shadow: var(--cg-shadow-card) !important;
}

.cg-head {
  padding: var(--cg-space-5) var(--cg-space-6) !important;
  align-items: center;
}

.cg-panel,
.cg-op-card,
.cg-dashboard-lite .cg-panel {
  padding: var(--cg-space-4) !important;
}

.cg-panel-head,
.cg-dashboard-lite .cg-panel-head {
  align-items: flex-start;
  padding-bottom: var(--cg-space-3) !important;
  margin-bottom: var(--cg-space-4) !important;
}

/* Dashboard metric cards: consolidated after CG-UI-001B PASS.
 * Legacy generic height overrides were removed to avoid affecting non-dashboard screens.
 */
.cg-dashboard-lite .cg-kpi-grid,
.cg-dashboard-lite .cg-kpi-grid-compact,
.cg-admin-command-centre .cg-admin-command-metrics {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.cg-dashboard-lite .cg-kpi,
.cg-dashboard-lite .cg-kpi-compact {
  display: grid;
  grid-template-rows: minmax(18px, auto) minmax(36px, auto) 1fr;
  align-content: stretch;
  min-width: 0;
  min-height: 100px !important;
  height: 100%;
  padding: 16px 18px !important;
  gap: var(--cg-space-2) !important;
}

.cg-dashboard-lite .cg-kpi > span,
.cg-dashboard-lite .cg-kpi-compact > span {
  min-height: 18px;
  display: flex;
  align-items: flex-start;
  line-height: 1.35;
}

.cg-dashboard-lite .cg-kpi > strong,
.cg-dashboard-lite .cg-kpi-compact > strong {
  min-height: 36px;
  display: flex;
  align-items: center;
  margin: 6px 0 0;
  font-size: clamp(1.65rem, 1.52rem + .32vw, 2rem) !important;
  font-weight: var(--cg-font-semibold) !important;
  line-height: 1;
  letter-spacing: -.025em;
}

.cg-dashboard-lite .cg-kpi > small,
.cg-dashboard-lite .cg-kpi-compact > small {
  display: flex;
  align-items: flex-end;
  min-height: 34px;
  margin-top: auto;
  line-height: 1.4;
}

.cg-admin-command-centre .cg-admin-command-card {
  display: grid;
  grid-template-rows: minmax(20px, auto) minmax(40px, auto) 1fr;
  align-content: stretch;
  min-width: 0;
  min-height: 132px;
  height: 100%;
  padding: 16px 18px;
}

.cg-admin-command-centre .cg-admin-command-card > span {
  min-height: 20px;
  display: flex;
  align-items: flex-start;
  line-height: 1.35;
  font-weight: var(--cg-font-semibold);
}

.cg-admin-command-centre .cg-admin-command-card > strong {
  min-height: 40px;
  display: flex;
  align-items: center;
  margin: 2px 0 0;
  font-size: clamp(1.55rem, 1.45rem + .28vw, 1.9rem);
  font-weight: var(--cg-font-semibold);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.cg-admin-command-centre .cg-admin-command-card > small {
  display: flex;
  align-items: flex-end;
  min-height: 34px;
  margin-top: auto;
  line-height: 1.4;
}

.cg-dashboard-lite .cg-mini-stat-strip {
  align-items: stretch;
}

.cg-dashboard-lite .cg-mini-stat-strip > button {
  height: 100%;
  min-height: 68px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: stretch;
}

.cg-dashboard-grid-lite,
.cg-layout,
.cg-workspace {
  gap: var(--cg-space-4) !important;
}

/* Inputs and controls remain familiar, but visually calmer. */
input,
select,
textarea,
.cg-btn,
.cg-text-btn {
  border-radius: var(--cg-radius-control) !important;
}

input,
select,
textarea {
  font-weight: var(--cg-font-regular);
}

/* Prevent technical or status text from becoming visually harsh. */
.cg-row strong,
.cg-info strong,
.cg-division strong,
.cg-file-registry-card-detail strong,
.cg-file-registry-detail-grid b,
.cg-record-table .cg-id-col,
.cg-kpi-table td:not(.title-col),
.cg-kpi-table .title-col strong {
  font-weight: var(--cg-font-semibold) !important;
}

/* Large-screen control. */
@media (min-width: 1600px) {
  .cg-header {
    padding-inline: 24px;
  }

  .cg-screen {
    font-size: 14px;
  }

  .cg-search {
    max-width: 620px;
  }
}

@media (min-width: 2200px) {
  :root {
    --cg-content-max: 1500px;
    --cg-content-wide: 1760px;
  }
}

/* Tablet: preserve hierarchy without wide-screen spacing. */
@media (max-width: 980px) {
  .cg-main > .cg-screen:not(.cg-center):not(.cg-login):not(.cg-login-enterprise) {
    width: 100%;
    padding: 18px;
  }

  .cg-dashboard-lite .cg-kpi,
  .cg-dashboard-lite .cg-kpi-compact,
  .cg-admin-command-centre .cg-admin-command-card {
    min-height: 116px !important;
    padding: 14px !important;
  }
}

/* Smartphone: compact, readable and touch-safe. */
@media (max-width: 720px) {
  .cg-main > .cg-screen:not(.cg-center):not(.cg-login):not(.cg-login-enterprise) {
    padding: 14px 12px calc(var(--bottom, 66px) + 18px);
    gap: 12px;
  }

  .cg-head {
    padding: 16px !important;
    gap: 12px;
  }

  .cg-head h1,
  .cg-dashboard-lite .cg-head h1 {
    font-size: 1.28rem !important;
  }

  .cg-panel,
  .cg-op-card,
  .cg-dashboard-lite .cg-panel {
    padding: 14px !important;
  }

  .cg-dashboard-lite .cg-kpi,
  .cg-dashboard-lite .cg-kpi-compact,
  .cg-admin-command-centre .cg-admin-command-card {
    min-height: 108px !important;
    padding: 14px !important;
  }

  .cg-dashboard-lite .cg-kpi > strong,
  .cg-dashboard-lite .cg-kpi-compact > strong {
    font-size: 1.65rem !important;
  }

  .cg-dashboard-lite .cg-kpi > small,
  .cg-dashboard-lite .cg-kpi-compact > small,
  .cg-admin-command-centre .cg-admin-command-card > small {
    min-height: 28px;
  }
}

@media (max-width: 420px) {
  .cg-main > .cg-screen:not(.cg-center):not(.cg-login):not(.cg-login-enterprise) {
    padding-inline: 10px;
  }
}

/* Login remains isolated from authenticated workspace width rules. */
.cg-login,
.cg-login-enterprise,
.cg-login-panel,
.cg-login-card {
  max-width: none;
}
/* CG-UI-001A-CLEAN END */

/* CG-UI-001B-CLEAN — legacy dashboard card overrides consolidated above. */



/* ========================================================================== 
   CG-UI-001C — Modern Table System
   Layout-only refinement. Preserves table markup, routes, actions and data.
   ========================================================================== */
:root {
  --cg-table-surface: #ffffff;
  --cg-table-head: #f3f6fa;
  --cg-table-head-text: #526173;
  --cg-table-text: #243244;
  --cg-table-muted: #738196;
  --cg-table-line: #e4e9f0;
  --cg-table-line-soft: #edf1f5;
  --cg-table-hover: #f7f9fc;
  --cg-table-focus: #fff9e8;
}

body:not(.cg-public-page) .cg-record-table-wrap,
body:not(.cg-public-page) .cg-search-result-table-wrap,
body:not(.cg-public-page) .cg-workflow-table-wrap {
  border: 1px solid var(--cg-table-line) !important;
  border-radius: 16px !important;
  background: var(--cg-table-surface) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .035) !important;
  overflow: auto !important;
}

body:not(.cg-public-page) .cg-record-table,
body:not(.cg-public-page) .cg-workflow-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  color: var(--cg-table-text) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

body:not(.cg-public-page) .cg-record-table th,
body:not(.cg-public-page) .cg-workflow-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cg-table-line) !important;
  background: var(--cg-table-head) !important;
  color: var(--cg-table-head-text) !important;
  text-align: left !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
}

body:not(.cg-public-page) .cg-record-table th:first-child,
body:not(.cg-public-page) .cg-workflow-table th:first-child {
  padding-left: 16px !important;
}
body:not(.cg-public-page) .cg-record-table th:last-child,
body:not(.cg-public-page) .cg-workflow-table th:last-child {
  padding-right: 16px !important;
}

body:not(.cg-public-page) .cg-record-table td,
body:not(.cg-public-page) .cg-workflow-table td {
  padding: 13px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cg-table-line-soft) !important;
  background: transparent !important;
  color: var(--cg-table-text) !important;
  vertical-align: middle !important;
  font-weight: 400 !important;
}

body:not(.cg-public-page) .cg-record-table td:first-child,
body:not(.cg-public-page) .cg-workflow-table td:first-child {
  padding-left: 16px !important;
}
body:not(.cg-public-page) .cg-record-table td:last-child,
body:not(.cg-public-page) .cg-workflow-table td:last-child {
  padding-right: 16px !important;
}

body:not(.cg-public-page) .cg-record-table tbody tr:last-child td,
body:not(.cg-public-page) .cg-workflow-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

body:not(.cg-public-page) .cg-record-table tbody tr,
body:not(.cg-public-page) .cg-workflow-table tbody tr {
  transition: background-color .14s ease, box-shadow .14s ease;
}

body:not(.cg-public-page) .cg-record-table tbody tr[data-route],
body:not(.cg-public-page) .cg-workflow-table-row {
  cursor: pointer !important;
}

body:not(.cg-public-page) .cg-record-table tbody tr:hover td,
body:not(.cg-public-page) .cg-workflow-table tbody tr:hover td {
  background: var(--cg-table-hover) !important;
}

body:not(.cg-public-page) .cg-record-table tbody tr[data-route]:focus-visible td,
body:not(.cg-public-page) .cg-workflow-table-row:focus-visible td {
  background: var(--cg-table-focus) !important;
  box-shadow: inset 3px 0 0 #f2c500 !important;
}

body:not(.cg-public-page) .cg-record-table .title-col {
  min-width: 260px !important;
  max-width: 520px !important;
  white-space: normal !important;
  line-height: 1.38 !important;
}

body:not(.cg-public-page) .cg-record-table td strong,
body:not(.cg-public-page) .cg-workflow-table td strong {
  display: block !important;
  margin: 0 !important;
  color: #162235 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

body:not(.cg-public-page) .cg-record-table td small,
body:not(.cg-public-page) .cg-workflow-table td small {
  display: block !important;
  margin-top: 3px !important;
  color: var(--cg-table-muted) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

body:not(.cg-public-page) .cg-id-col,
body:not(.cg-public-page) .cg-ref-col {
  color: #334155 !important;
  font-weight: 550 !important;
  letter-spacing: 0 !important;
}

body:not(.cg-public-page) .cg-table-softcopy,
body:not(.cg-public-page) .cg-record-type-chip,
body:not(.cg-public-page) .cg-workflow-badge,
body:not(.cg-public-page) .cg-status-chip {
  min-height: 26px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: 10.75px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

body:not(.cg-public-page) .cg-kpi-table td:not(.title-col) {
  color: #17263a !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

body:not(.cg-public-page) .cg-search-summary {
  color: var(--cg-table-muted) !important;
  font-size: 12.5px !important;
}

@media (min-width: 761px) {
  body:not(.cg-public-page) .cg-record-table tbody tr:nth-child(even) td,
  body:not(.cg-public-page) .cg-workflow-table tbody tr:nth-child(even) td {
    background: rgba(247, 249, 252, .42) !important;
  }
  body:not(.cg-public-page) .cg-record-table tbody tr:nth-child(even):hover td,
  body:not(.cg-public-page) .cg-workflow-table tbody tr:nth-child(even):hover td {
    background: var(--cg-table-hover) !important;
  }
}

@media (max-width: 760px) {
  body:not(.cg-public-page) .cg-record-table-wrap,
  body:not(.cg-public-page) .cg-search-result-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:not(.cg-public-page) .cg-record-table {
    display: block !important;
    min-width: 0 !important;
  }

  body:not(.cg-public-page) .cg-record-table thead {
    display: none !important;
  }

  body:not(.cg-public-page) .cg-record-table tbody {
    display: grid !important;
    gap: 11px !important;
  }

  body:not(.cg-public-page) .cg-record-table tr {
    display: grid !important;
    gap: 8px !important;
    padding: 13px 14px !important;
    border: 1px solid var(--cg-table-line) !important;
    border-radius: 15px !important;
    background: var(--cg-table-surface) !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .035) !important;
  }

  body:not(.cg-public-page) .cg-record-table td,
  body:not(.cg-public-page) .cg-record-table td:first-child,
  body:not(.cg-public-page) .cg-record-table td:last-child {
    display: grid !important;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    min-width: 0 !important;
  }

  body:not(.cg-public-page) .cg-record-table td::before {
    content: attr(data-label) !important;
    color: var(--cg-table-muted) !important;
    font-size: 10.75px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  body:not(.cg-public-page) .cg-record-table .title-col {
    min-width: 0 !important;
    max-width: none !important;
  }

  body:not(.cg-public-page) .cg-record-table tr:hover td {
    background: transparent !important;
  }

  /* Workflow task tables retain horizontal scrolling because their compact
     action layout does not expose data-label attributes on every cell. */
  body:not(.cg-public-page) .cg-workflow-table-wrap {
    border-radius: 14px !important;
  }
  body:not(.cg-public-page) .cg-workflow-table {
    min-width: 680px !important;
  }
}


/* ========================================================================== 
   CG-UI-001D-CLEAN — Form & Background Visual Standard
   Consolidated after visual PASS. Preserves form IDs, names, events and payloads.
   ========================================================================== */

html,
body,
body:not(.cg-public-page),
body.cg-route-app {
  background: var(--cg-bg) !important;
}

body:not(.cg-public-page) .cg-main,
body:not(.cg-public-page) #cgMain,
body.cg-route-app .cg-main,
body.cg-route-app #cgMain {
  background:
    radial-gradient(circle at 4% 0%, rgba(242, 197, 0, .055), transparent 22%),
    linear-gradient(180deg, #e4e9f0 0%, var(--cg-bg) 46%, var(--cg-bg-deep) 100%) !important;
}

/* Login remains a light theme, but its surrounding canvas is less glaring. */
body.cg-login-page,
body.cg-route-login,
body.cg-login-premium-active {
  background: #dbe2ea !important;
}

.cg-login-premium-centered,
.cg-login-official {
  background:
    radial-gradient(circle at 14% 8%, rgba(242, 197, 0, .105), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(71, 85, 105, .09), transparent 32%),
    linear-gradient(145deg, #d7dee7 0%, #e1e7ee 48%, #d5dde6 100%) !important;
}

/* Shared form controls for PU, PB, PJ, EE and administrative workspaces. */
body:not(.cg-public-page) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
body:not(.cg-public-page) select,
body:not(.cg-public-page) textarea,
body:not(.cg-public-page) .cg-form-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body:not(.cg-public-page) .cg-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body:not(.cg-public-page) .cg-form-row select,
body:not(.cg-public-page) .cg-field select,
body:not(.cg-public-page) .cg-form-row textarea,
body:not(.cg-public-page) .cg-field textarea {
  background: var(--cg-field-bg) !important;
  border-color: var(--cg-field-border) !important;
  color: #162235 !important;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, .025) !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

body:not(.cg-public-page) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):hover,
body:not(.cg-public-page) select:hover,
body:not(.cg-public-page) textarea:hover {
  background: var(--cg-field-bg-hover) !important;
  border-color: #aebccc !important;
}

body:not(.cg-public-page) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus,
body:not(.cg-public-page) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus-visible,
body:not(.cg-public-page) select:focus,
body:not(.cg-public-page) select:focus-visible,
body:not(.cg-public-page) textarea:focus,
body:not(.cg-public-page) textarea:focus-visible {
  outline: none !important;
  background: #f8fafc !important;
  border-color: var(--cg-field-focus) !important;
  box-shadow: 0 0 0 3px var(--cg-field-focus-ring), inset 0 1px 1px rgba(15, 23, 42, .02) !important;
}

body:not(.cg-public-page) input::placeholder,
body:not(.cg-public-page) textarea::placeholder {
  color: var(--cg-field-placeholder) !important;
  opacity: .9 !important;
  font-weight: 400 !important;
}

body:not(.cg-public-page) input:disabled,
body:not(.cg-public-page) select:disabled,
body:not(.cg-public-page) textarea:disabled,
body:not(.cg-public-page) input[readonly],
body:not(.cg-public-page) textarea[readonly] {
  background: #e3e8ef !important;
  border-color: #c8d1dc !important;
  color: #64748b !important;
  opacity: 1 !important;
}

/* Keep search controls visually distinct from data-entry forms. */
body:not(.cg-public-page) .cg-search input,
body:not(.cg-public-page) .cg-search-page-form input {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Softcopy state must remain readable in narrow table columns. */
body:not(.cg-public-page) .cg-table-softcopy {
  max-width: 126px !important;
  height: auto !important;
  min-height: 28px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

@media (max-width: 760px) {
  body:not(.cg-public-page) .cg-main,
  body:not(.cg-public-page) #cgMain,
  body.cg-route-app .cg-main,
  body.cg-route-app #cgMain {
    background: linear-gradient(180deg, #e4e9f0 0%, #dce3eb 100%) !important;
  }

  body:not(.cg-public-page) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body:not(.cg-public-page) select,
  body:not(.cg-public-page) textarea {
    font-size: 16px !important;
  }
}
/* CG-UI-001D-CLEAN END */


/* ============================================================
   CG-UI-002A — Professional Header Refinement
   Layout-only. Existing IDs, routes and events remain unchanged.
   ============================================================ */
body.cg-route-app .cg-header,
body.cg-route-app #cgHeader {
  height: 66px !important;
  padding: 0 22px !important;
  gap: 14px !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid rgba(203,213,225,.88) !important;
  box-shadow: 0 5px 18px rgba(15,23,42,.045) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
}

body.cg-route-app .cg-header .cg-brand,
body.cg-route-app #cgHeader .cg-brand {
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
  background: rgba(242,197,0,.13) !important;
  border: 1px solid rgba(242,197,0,.28) !important;
  box-shadow: none !important;
}

body.cg-route-app .cg-header .cg-brand img,
body.cg-route-app #cgHeader .cg-brand img {
  width: 29px !important;
  height: 29px !important;
}

body.cg-route-app .cg-header .cg-search,
body.cg-route-app #cgHeader .cg-search {
  flex: 1 1 520px !important;
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  height: 42px !important;
  margin: 0 auto !important;
  padding: 0 6px 0 15px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  background: #f1f4f7 !important;
  box-shadow: inset 0 1px 1px rgba(15,23,42,.025) !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

body.cg-route-app .cg-header .cg-search:focus-within,
body.cg-route-app #cgHeader .cg-search:focus-within {
  background: #fff !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.09) !important;
}

body.cg-route-app .cg-header .cg-search input,
body.cg-route-app #cgHeader .cg-search input {
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #1e293b !important;
  background: transparent !important;
}

body.cg-route-app .cg-header .cg-search input::placeholder,
body.cg-route-app #cgHeader .cg-search input::placeholder {
  color: #7b8798 !important;
  opacity: 1 !important;
}

body.cg-route-app .cg-header .cg-search button,
body.cg-route-app #cgHeader .cg-search button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
  color: #475569 !important;
}

body.cg-route-app .cg-header .cg-user,
body.cg-route-app #cgHeader .cg-user {
  min-height: 40px !important;
  max-width: 210px !important;
  padding: 0 12px !important;
  gap: 9px !important;
  border: 1px solid #d7dee8 !important;
  border-radius: 13px !important;
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  overflow: hidden !important;
}

body.cg-route-app #cgCurrentUser {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.cg-route-app .cg-header .cg-dot,
body.cg-route-app #cgHeader .cg-dot {
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.11) !important;
}

body.cg-route-app .cg-header-logout,
body.cg-route-app #cgHeaderLogout {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 13px !important;
  border: 1px solid #d7dee8 !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  white-space: nowrap !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}

body.cg-route-app .cg-header-logout:hover,
body.cg-route-app #cgHeaderLogout:hover {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #9f1239 !important;
}

/* Dashboard no longer reserves a side column for Pintasan. */
.cg-dashboard-grid-lite.cg-dashboard-grid-no-shortcuts {
  display: block !important;
  grid-template-columns: minmax(0,1fr) !important;
}

.cg-dashboard-grid-lite.cg-dashboard-grid-no-shortcuts > .cg-main-col {
  width: 100% !important;
  max-width: none !important;
}

@media (min-width: 1440px) {
  body.cg-route-app .cg-header,
  body.cg-route-app #cgHeader {
    padding-left: 24px !important;
    padding-right: 28px !important;
  }
}

@media (max-width: 980px) {
  body.cg-route-app .cg-header .cg-search,
  body.cg-route-app #cgHeader .cg-search {
    max-width: none !important;
  }
  body.cg-route-app .cg-header .cg-user,
  body.cg-route-app #cgHeader .cg-user {
    max-width: 150px !important;
  }
}

@media (max-width: 720px) {
  body.cg-route-app .cg-header,
  body.cg-route-app #cgHeader {
    height: 60px !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }
  body.cg-route-app .cg-header .cg-brand,
  body.cg-route-app #cgHeader .cg-brand {
    flex-basis: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }
  body.cg-route-app .cg-header .cg-brand img,
  body.cg-route-app #cgHeader .cg-brand img {
    width: 26px !important;
    height: 26px !important;
  }
  body.cg-route-app .cg-header .cg-search,
  body.cg-route-app #cgHeader .cg-search {
    height: 38px !important;
    min-width: 0 !important;
    padding-left: 11px !important;
    border-radius: 12px !important;
  }
  body.cg-route-app .cg-header .cg-search input,
  body.cg-route-app #cgHeader .cg-search input {
    min-height: 36px !important;
    font-size: 12px !important;
  }
  body.cg-route-app .cg-header .cg-user,
  body.cg-route-app #cgHeader .cg-user,
  body.cg-route-app .cg-header-logout,
  body.cg-route-app #cgHeaderLogout {
    display: none !important;
  }
}

/* ============================================================
   CG-UI-002B — Unified Professional Workspace Refinement
   Sidebar, content grid, forms, information panels and activity.
   ============================================================ */
:root {
  --cg-shell-content-max: 1240px;
  --cg-shell-gutter: clamp(18px, 2vw, 30px);
}

/* Sidebar: compact professional navigation with clear active state. */
body.cg-route-app .cg-sidebar,
body.cg-route-app #cgSidebar {
  width: 260px !important;
  padding: 17px 14px 20px !important;
  background: linear-gradient(180deg, #0b192c 0%, #0c1728 100%) !important;
  border-right: 1px solid rgba(148,163,184,.16) !important;
  box-shadow: 10px 0 30px rgba(15,23,42,.08) !important;
}
body.cg-route-app .cg-main,
body.cg-route-app #cgMain { padding-left: 260px !important; }
body.cg-route-app .cg-sidebar-brand {
  margin: 0 4px 13px !important;
  padding: 5px 5px 15px !important;
  border-bottom: 1px solid rgba(148,163,184,.22) !important;
}
body.cg-route-app .cg-side-nav { gap: 3px !important; }
body.cg-route-app .cg-side-nav button {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 0 9px !important;
  border-radius: 10px !important;
  color: #a9b7ca !important;
  font-size: 12.5px !important;
  font-weight: 560 !important;
  letter-spacing: .002em !important;
  transition: background .14s ease, color .14s ease, transform .14s ease !important;
}
body.cg-route-app .cg-side-nav button:hover {
  color: #f8fafc !important;
  background: rgba(148,163,184,.105) !important;
}
body.cg-route-app .cg-side-nav button.active {
  color: #fff !important;
  background: #1e293b !important;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.12) !important;
}
body.cg-route-app .cg-side-nav button.active::after {
  content: "" !important;
  position: absolute !important;
  left: -14px !important;
  top: 9px !important;
  bottom: 9px !important;
  width: 4px !important;
  border-radius: 0 999px 999px 0 !important;
  background: #f59e0b !important;
}
.cg-nav-icon { width: 19px; height: 19px; display:grid; place-items:center; color:#8fa2b9; font-size:15px; line-height:1; }
.cg-side-nav button.active .cg-nav-icon { color:#f59e0b; }
[data-nav-key="dashboard"] .cg-nav-icon::before { content:"⌂"; }
[data-nav-key="incoming"] .cg-nav-icon::before { content:"↙"; }
[data-nav-key="outgoing"] .cg-nav-icon::before { content:"↗"; }
[data-nav-key="cases"] .cg-nav-icon::before { content:"▣"; }
[data-nav-key="reports"] .cg-nav-icon::before { content:"▤"; }
[data-nav-key="attachments"] .cg-nav-icon::before { content:"◇"; }
[data-nav-key="admin-operations"] .cg-nav-icon::before { content:"⚙"; }
[data-nav-key="officer-kpi"] .cg-nav-icon::before { content:"▥"; }
[data-nav-key="notifications"] .cg-nav-icon::before { content:"●"; font-size:9px; }
[data-nav-key="search"] .cg-nav-icon::before { content:"⌕"; }
[data-nav-key="file-registry"] .cg-nav-icon::before { content:"▦"; }
[data-nav-key="about"] .cg-nav-icon::before { content:"?"; }
[data-nav-key="profile"] .cg-nav-icon::before { content:"○"; }
[data-nav-key="settings"] .cg-nav-icon::before { content:"⚙"; }
[data-nav-key="self-test"] .cg-nav-icon::before { content:"✓"; }

/* Content grid: readable width, disciplined gutters, no full-screen stretching. */
body.cg-route-app .cg-screen {
  width: min(100%, calc(var(--cg-shell-content-max) + (var(--cg-shell-gutter) * 2))) !important;
  margin-inline: auto !important;
  padding: 24px var(--cg-shell-gutter) 34px !important;
  gap: 16px !important;
}
body.cg-route-app .cg-workspace,
body.cg-route-app .cg-layout {
  grid-template-columns: minmax(0,1fr) minmax(250px, 310px) !important;
  gap: 16px !important;
}
body.cg-route-app .cg-workspace > .cg-main-col:only-child,
body.cg-route-app .cg-layout > .cg-main-col:only-child { max-width: 100% !important; }

/* Panels and headings: quieter surfaces and stronger hierarchy. */
body.cg-route-app .cg-panel { border-color:#d3dbe6 !important; box-shadow:0 8px 24px rgba(15,23,42,.045) !important; }
body.cg-route-app .cg-panel-head { padding-bottom:13px !important; margin-bottom:14px !important; }
body.cg-route-app .cg-panel-head h2 { font-size:15px !important; line-height:1.35 !important; font-weight:680 !important; }
body.cg-route-app .cg-panel-head p { font-size:11.75px !important; line-height:1.45 !important; }

/* Forms: comfortable measure and closer relation between fields/actions. */
body.cg-route-app form.cg-form { max-width: 1040px !important; margin-inline:auto !important; gap:15px !important; }
body.cg-route-app .cg-form-grid { gap:14px 16px !important; }
body.cg-route-app .cg-form-row { gap:7px !important; }
body.cg-route-app .cg-form-row label { color:#172033 !important; font-size:12.5px !important; font-weight:650 !important; }
body.cg-route-app .cg-form-row textarea { min-height:110px !important; line-height:1.5 !important; }
body.cg-route-app .cg-form-row textarea[rows="3"] { min-height:92px !important; }
body.cg-route-app .cg-form-actions { padding-top:4px !important; margin-top:0 !important; }
body.cg-route-app .cg-form-actions .cg-btn { min-width:108px !important; }

/* Read-only information: less like editable form fields. */
body.cg-route-app .cg-info-grid { gap:0 !important; border:1px solid #dbe2eb !important; border-radius:12px !important; overflow:hidden !important; background:#fff !important; }
body.cg-route-app .cg-info {
  min-height:68px !important;
  padding:12px 14px !important;
  border:0 !important;
  border-right:1px solid #e4e9f0 !important;
  border-bottom:1px solid #e4e9f0 !important;
  border-radius:0 !important;
  background:#fbfcfe !important;
}
body.cg-route-app .cg-info:nth-child(2n) { border-right:0 !important; }
body.cg-route-app .cg-info small { margin-bottom:5px !important; font-size:11px !important; color:#6b7b91 !important; }
body.cg-route-app .cg-info strong { display:block !important; color:#14213a !important; font-size:12.75px !important; line-height:1.45 !important; font-weight:650 !important; overflow-wrap:anywhere !important; }

/* Activity and task rows: compact, calm and scannable. */
body.cg-route-app .cg-list { gap:7px !important; }
body.cg-route-app .cg-row {
  min-height:58px !important;
  padding:10px 13px !important;
  border-color:#dbe2eb !important;
  border-radius:11px !important;
  box-shadow:none !important;
}
body.cg-route-app .cg-row:hover { border-color:#b9c5d4 !important; background:#f8fafc !important; }
body.cg-route-app .cg-row:focus-visible { outline:2px solid #2563eb !important; outline-offset:2px !important; }
body.cg-route-app .cg-row strong { font-size:12.25px !important; line-height:1.4 !important; font-weight:650 !important; }
body.cg-route-app .cg-row small { margin-top:4px !important; font-size:11px !important; line-height:1.4 !important; }
body.cg-route-app .cg-pin { width:7px !important; height:7px !important; margin-top:6px !important; }
body.cg-route-app .cg-load-more-box { padding-top:10px !important; }
body.cg-route-app .cg-load-more-box .cg-btn { min-height:36px !important; border-radius:10px !important; background:#f8fafc !important; }

/* Long operational cards: prevent metadata from competing with title. */
body.cg-route-app .cg-op-card strong,
body.cg-route-app .cg-task-card strong { line-height:1.35 !important; }
body.cg-route-app .cg-op-card small,
body.cg-route-app .cg-task-card small { color:#64748b !important; line-height:1.45 !important; }

@media (min-width: 1500px) {
  :root { --cg-shell-content-max: 1320px; }
}
@media (max-width: 1100px) {
  body.cg-route-app .cg-workspace,
  body.cg-route-app .cg-layout { grid-template-columns:1fr !important; }
  body.cg-route-app .cg-side-col { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 720px) {
  body.cg-route-app .cg-main,
  body.cg-route-app #cgMain { padding-left:0 !important; }
  body.cg-route-app .cg-screen { width:100% !important; padding:14px 12px 86px !important; }
  body.cg-route-app .cg-side-col,
  body.cg-route-app .cg-form-grid { grid-template-columns:1fr !important; }
  body.cg-route-app .cg-info-grid { grid-template-columns:1fr !important; }
  body.cg-route-app .cg-info { border-right:0 !important; }
  body.cg-route-app .cg-bottom-nav button { display:grid !important; place-content:center !important; gap:2px !important; }
  body.cg-route-app .cg-bottom-nav .cg-nav-icon { margin:auto !important; font-size:14px !important; }
  body.cg-route-app .cg-bottom-nav .cg-nav-label { font-size:9.5px !important; }
}
/* CG-UI-002B END */

/* ============================================================
   CG-UI-002B-R1 — Professional Workspace Visual Rebuild
   Visible app-shell, navigation, dashboard, table and panel reset.
   ============================================================ */
:root {
  --cg-shell-sidebar: 232px;
  --cg-shell-content-max: 1380px;
  --cg-shell-gutter: clamp(18px, 2.2vw, 34px);
  --cg-r-lg: 18px;
  --cg-r-md: 13px;
  --cg-r-sm: 9px;
}

/* Compact app shell */
body.cg-route-app .cg-sidebar,
body.cg-route-app #cgSidebar {
  width: var(--cg-shell-sidebar) !important;
  padding: 14px 10px 18px !important;
  background: linear-gradient(180deg,#07182a 0%,#0b1728 100%) !important;
  box-shadow: 7px 0 22px rgba(15,23,42,.10) !important;
}
body.cg-route-app .cg-main,
body.cg-route-app #cgMain { padding-left: var(--cg-shell-sidebar) !important; }
body.cg-route-app .cg-sidebar-brand {
  margin: 0 2px 10px !important;
  padding: 4px 6px 13px !important;
}
body.cg-route-app .cg-sidebar-brand img,
body.cg-route-app .cg-sidebar .cg-logo-wordmark { max-width: 150px !important; max-height: 50px !important; }
body.cg-route-app .cg-sidebar-brand h2 { font-size: 13px !important; line-height: 1.25 !important; margin-top: 7px !important; }
body.cg-route-app .cg-sidebar-brand p { font-size: 10.5px !important; margin-top: 3px !important; }

/* Real icon-like navigation: uniform, inline, no random glyph appearance */
body.cg-route-app .cg-side-nav { gap: 2px !important; }
body.cg-route-app .cg-side-nav button {
  grid-template-columns: 18px minmax(0,1fr) auto !important;
  gap: 9px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
body.cg-route-app .cg-side-nav button.active {
  background: rgba(51,65,85,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.12), 0 4px 12px rgba(0,0,0,.08) !important;
}
body.cg-route-app .cg-side-nav button.active::after { left:-10px !important; top:7px !important; bottom:7px !important; width:3px !important; }
.cg-nav-icon {
  width:18px !important; height:18px !important; display:block !important;
  background-color: currentColor !important;
  -webkit-mask-repeat:no-repeat !important; mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important; mask-position:center !important;
  -webkit-mask-size:16px 16px !important; mask-size:16px 16px !important;
  font-size:0 !important;
}
.cg-nav-icon::before { content:none !important; }
[data-nav-key="dashboard"] .cg-nav-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E"); }
[data-nav-key="incoming"] .cg-nav-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v13M7 11l5 5 5-5M4 21h16'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v13M7 11l5 5 5-5M4 21h16'/%3E%3C/svg%3E"); }
[data-nav-key="outgoing"] .cg-nav-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 21V8M7 13l5-5 5 5M4 3h16'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 21V8M7 13l5-5 5 5M4 3h16'/%3E%3C/svg%3E"); }
[data-nav-key="cases"] .cg-nav-icon,[data-nav-key="file-registry"] .cg-nav-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 5V3h8v2M8 10h8M8 14h8M8 18h5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 5V3h8v2M8 10h8M8 14h8M8 18h5'/%3E%3C/svg%3E"); }
[data-nav-key="reports"] .cg-nav-icon,[data-nav-key="officer-kpi"] .cg-nav-icon,[data-nav-key="analytics"] .cg-nav-icon,[data-nav-key="receipt-evidence"] .cg-nav-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
[data-nav-key="attachments"] .cg-nav-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='m21 12-8.5 8.5a6 6 0 0 1-8.5-8.5l9-9a4 4 0 1 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='m21 12-8.5 8.5a6 6 0 0 1-8.5-8.5l9-9a4 4 0 1 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E"); }
[data-nav-key="notifications"] .cg-nav-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4'/%3E%3C/svg%3E"); }
[data-nav-key="search"] .cg-nav-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }
[data-nav-key="about"] .cg-nav-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.7 2.7 0 1 1 4.6 2c-1.1.9-2.1 1.4-2.1 3M12 18h.01'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.7 2.7 0 1 1 4.6 2c-1.1.9-2.1 1.4-2.1 3M12 18h.01'/%3E%3C/svg%3E"); }
[data-nav-key="profile"] .cg-nav-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
[data-nav-key="settings"] .cg-nav-icon,[data-nav-key="admin-operations"] .cg-nav-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z'/%3E%3C/svg%3E"); }

/* Header is visibly tighter and grouped */
body.cg-route-app .cg-header, body.cg-route-app #cgHeader {
  height: 58px !important;
  padding: 0 18px !important;
  grid-template-columns: 210px minmax(260px,640px) 1fr !important;
  gap: 18px !important;
  border-bottom: 1px solid #d8e0ea !important;
  box-shadow: 0 3px 12px rgba(15,23,42,.045) !important;
}
body.cg-route-app .cg-header .cg-brand, body.cg-route-app #cgHeader .cg-brand { width: 42px !important; height:42px !important; }
body.cg-route-app .cg-header .cg-search, body.cg-route-app #cgHeader .cg-search { height:40px !important; max-width:640px !important; border-radius:12px !important; background:#eef2f6 !important; }
body.cg-route-app .cg-header-actions, body.cg-route-app #cgHeaderActions { gap:8px !important; }

/* Page density and hero differentiation */
body.cg-route-app .cg-screen { padding-top: 20px !important; gap: 14px !important; }
body.cg-route-app .cg-head,
body.cg-route-app .cg-dashboard-head-clean {
  min-height: 108px !important;
  padding: 22px 26px !important;
  border-radius: var(--cg-r-lg) !important;
  background: linear-gradient(102deg,#fffaf0 0%,#fde7a5 38%,#f7f9fc 100%) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.07) !important;
}
body.cg-route-app .cg-head h1,
body.cg-route-app .cg-dashboard-head-clean h1 { font-size: 23px !important; line-height:1.15 !important; letter-spacing:-.02em !important; }
body.cg-route-app .cg-head p,
body.cg-route-app .cg-dashboard-head-clean p { max-width:760px !important; font-size:12.5px !important; }

/* Reduce box-in-box feeling */
body.cg-route-app .cg-panel {
  border-radius: var(--cg-r-lg) !important;
  padding: 20px !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.055) !important;
}
body.cg-route-app .cg-panel + .cg-panel { margin-top: 0 !important; }
body.cg-route-app .cg-panel-head { margin-bottom: 12px !important; padding-bottom: 11px !important; }

/* KPI compact cards, less empty space */
body.cg-route-app .cg-kpi-grid,
body.cg-route-app .cg-kpi-grid-compact { gap: 12px !important; }
body.cg-route-app .cg-kpi,
body.cg-route-app .cg-kpi-compact {
  min-height: 112px !important;
  padding: 16px 18px !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.05) !important;
}
body.cg-route-app .cg-kpi::before,
body.cg-route-app .cg-kpi-compact::before { width:4px !important; }
body.cg-route-app .cg-kpi b,
body.cg-route-app .cg-kpi-compact b { font-size: 30px !important; line-height:1 !important; margin:8px 0 6px !important; }
body.cg-route-app .cg-kpi small,
body.cg-route-app .cg-kpi-compact small { margin-top:auto !important; font-size:10.8px !important; }
body.cg-route-app .cg-mini-stat-strip { margin-top:10px !important; gap:7px !important; }

/* Tables: clearer columns and less report-like appearance */
body.cg-route-app .cg-record-table-wrap,
body.cg-route-app .cg-table-wrap,
body.cg-route-app .cg-kpi-table-wrap { border-radius: 13px !important; overflow:hidden !important; }
body.cg-route-app .cg-record-table,
body.cg-route-app .cg-kpi-table,
body.cg-route-app .cg-workflow-table { table-layout:auto !important; }
body.cg-route-app .cg-record-table th,
body.cg-route-app .cg-kpi-table th,
body.cg-route-app .cg-workflow-table th {
  padding: 12px 14px !important;
  background:#f1f4f8 !important;
  font-size:10.5px !important;
  text-transform:uppercase !important;
  letter-spacing:.045em !important;
  color:#5f6f84 !important;
}
body.cg-route-app .cg-record-table td,
body.cg-route-app .cg-kpi-table td,
body.cg-route-app .cg-workflow-table td {
  padding: 14px !important;
  font-size:11.8px !important;
  line-height:1.45 !important;
  vertical-align:top !important;
}
body.cg-route-app .cg-record-table tbody tr:hover,
body.cg-route-app .cg-kpi-table tbody tr:hover { background:#f8fafc !important; }
body.cg-route-app .cg-record-table td:nth-last-child(-n+2) { white-space:normal !important; min-width:96px !important; }
body.cg-route-app .cg-record-table .cg-status-chip,
body.cg-route-app .cg-record-table .cg-badge { max-width:150px !important; white-space:normal !important; text-align:center !important; line-height:1.25 !important; }
body.cg-route-app .cg-softcopy-empty { min-width:82px !important; padding:7px 9px !important; font-size:10.5px !important; }

/* Activity becomes a clean timeline/list, not boxes everywhere */
body.cg-route-app .cg-activity-compact-list,
body.cg-route-app .cg-list { gap:0 !important; border:1px solid #dde4ed !important; border-radius:13px !important; overflow:hidden !important; background:#fff !important; }
body.cg-route-app .cg-row,
body.cg-route-app .cg-activity-compact {
  min-height:52px !important;
  padding:11px 14px !important;
  border:0 !important;
  border-bottom:1px solid #e6ebf1 !important;
  border-radius:0 !important;
  background:#fff !important;
}
body.cg-route-app .cg-row:last-child,
body.cg-route-app .cg-activity-compact:last-child { border-bottom:0 !important; }
body.cg-route-app .cg-row:hover,
body.cg-route-app .cg-activity-compact:hover { background:#f8fafc !important; }
body.cg-route-app .cg-pin { width:6px !important; height:6px !important; }

/* Notifications: flatter cards and better action alignment */
body.cg-route-app .cg-notification-list { gap:10px !important; }
body.cg-route-app .cg-notification-card {
  border-radius:13px !important;
  padding:16px !important;
  box-shadow:none !important;
  background:#fffdf7 !important;
}
body.cg-route-app .cg-notification-card-actions { gap:7px !important; align-self:center !important; }

/* Read-only metadata is a description list, not fake fields */
body.cg-route-app .cg-info-grid {
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  gap:1px !important;
  overflow:visible !important;
}
body.cg-route-app .cg-info {
  min-height:64px !important;
  padding:12px 14px !important;
  border:0 !important;
  border-bottom:1px solid #e3e8ef !important;
  background:transparent !important;
}
body.cg-route-app .cg-info:nth-last-child(-n+2) { border-bottom:0 !important; }
body.cg-route-app .cg-info small { text-transform:uppercase !important; letter-spacing:.04em !important; font-size:9.5px !important; }
body.cg-route-app .cg-info strong { font-size:12.5px !important; }

/* Form widths and action relationship */
body.cg-route-app form.cg-form { max-width: 980px !important; }
body.cg-route-app .cg-form-actions { justify-content:flex-end !important; border-top:1px solid #e3e8ef !important; padding-top:13px !important; }
body.cg-route-app .cg-form-row textarea { min-height:96px !important; }

@media (min-width: 1500px) {
  :root { --cg-shell-content-max: 1440px; }
}
@media (max-width: 980px) {
  body.cg-route-app .cg-header, body.cg-route-app #cgHeader { grid-template-columns:48px 1fr auto !important; }
}
@media (max-width: 720px) {
  body.cg-route-app .cg-main, body.cg-route-app #cgMain { padding-left:0 !important; }
  body.cg-route-app .cg-head, body.cg-route-app .cg-dashboard-head-clean { min-height:auto !important; padding:18px !important; }
  body.cg-route-app .cg-panel { padding:15px !important; border-radius:14px !important; }
  body.cg-route-app .cg-kpi, body.cg-route-app .cg-kpi-compact { min-height:96px !important; }
}
/* CG-UI-002B-R1 END */

/* CG-DATA-010 — compact Surat Masuk softcopy state */
body.cg-route-app .cg-record-table td .cg-softcopy-empty,
body.cg-route-app .cg-record-table td .cg-softcopy-ready {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 118px !important;
  min-height: 30px !important;
  padding: 6px 9px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
body.cg-route-app .cg-record-table td .cg-softcopy-empty {
  border: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #64748b !important;
}
body.cg-route-app .cg-record-table td .cg-softcopy-ready {
  border: 1px solid #bfdbfe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}


/* CG-DATA-010A — Surat Masuk softcopy column layout correction */
body.cg-route-app .cg-record-table th:nth-last-child(2),
body.cg-route-app .cg-record-table td:nth-last-child(2) {
  width: 92px !important;
  min-width: 92px !important;
  text-align: center !important;
}
body.cg-route-app .cg-record-table td .cg-softcopy-empty,
body.cg-route-app .cg-record-table td .cg-softcopy-ready {
  display: inline-flex !important;
  width: auto !important;
  min-width: 64px !important;
  max-width: 88px !important;
  min-height: 28px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
}
body.cg-route-app .cg-record-table td .cg-softcopy-empty {
  border: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  font-weight: 600 !important;
}
body.cg-route-app .cg-record-table td .cg-softcopy-ready {
  border: 1px solid #bfdbfe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

/* CG-CORE-011 — clean government workspace shell */
:root{--cg-sidebar-bg:#17324d;--cg-sidebar-bg-2:#1d3b59;--cg-sidebar-text:#eaf1f7;--cg-sidebar-muted:#b9c8d6;}
.cg-sidebar{background:linear-gradient(180deg,var(--cg-sidebar-bg-2),var(--cg-sidebar-bg));box-shadow:8px 0 24px rgba(15,23,42,.16);}
.cg-side-nav button{display:grid!important;grid-template-columns:22px minmax(0,1fr);align-items:center;column-gap:10px;min-height:42px;padding:9px 14px!important;border-radius:10px!important;color:var(--cg-sidebar-muted)!important;}
.cg-side-nav button .cg-nav-icon,.cg-side-nav button .cg-nav-label{display:block!important;margin:0!important;line-height:1.2!important;}
.cg-side-nav button .cg-nav-icon{width:20px;height:20px;align-self:center;}
.cg-side-nav button:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;transform:none!important;}
.cg-side-nav button.active{background:rgba(255,255,255,.13)!important;color:#fff!important;box-shadow:inset 3px 0 0 #f59e0b!important;}
.cg-side-nav button.active:before{display:none!important;}
.cg-side-brand{padding-bottom:14px!important;margin-bottom:10px!important;}
.cg-dashboard-lite .cg-kpi{box-shadow:0 8px 20px rgba(15,23,42,.07)!important;}
.cg-panel,.cg-head{box-shadow:0 10px 28px rgba(15,23,42,.07)!important;}


/* CG-DASH-014B — DE Dashboard Grid Recovery Hotfix */
.cg-de-dashboard .cg-de-summary-grid,
.cg-de-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 14px 0 18px !important;
  align-items: stretch !important;
}

.cg-de-dashboard .cg-de-summary-card,
.cg-de-summary-card {
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 112px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--cg-border, #d7dee8) !important;
  border-left: 4px solid #f59e0b !important;
  border-radius: 15px !important;
  background: var(--cg-surface, #ffffff) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}

.cg-de-dashboard .cg-de-summary-card > span,
.cg-de-summary-card > span {
  display: block !important;
  margin: 0 !important;
  font-size: 0.84rem !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  color: #475569 !important;
}

.cg-de-dashboard .cg-de-summary-card > strong,
.cg-de-summary-card > strong {
  display: block !important;
  align-self: center !important;
  margin: 0 !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #0f2a54 !important;
}

.cg-de-dashboard .cg-de-summary-card > small,
.cg-de-summary-card > small {
  display: block !important;
  margin: 0 !important;
  font-size: 0.76rem !important;
  line-height: 1.3 !important;
  color: #64748b !important;
}

.cg-de-dashboard .cg-de-dashboard-grid,
.cg-de-dashboard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.85fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.cg-de-dashboard-grid > .cg-panel {
  min-width: 0 !important;
  margin: 0 !important;
}

.cg-de-record-list { display: flex !important; flex-direction: column !important; }
.cg-de-record-item { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 12px 0 !important; border-bottom: 1px solid #e4eaf1 !important; }
.cg-de-record-item:last-child { border-bottom: 0 !important; }
.cg-de-record-item > div { min-width: 0 !important; display: grid !important; gap: 4px !important; }
.cg-de-record-item strong { font-size: 0.82rem !important; line-height: 1.35 !important; color: #172033 !important; }
.cg-de-record-item small { color: #64748b !important; line-height: 1.35 !important; }
.cg-de-record-item .cg-btn { flex: 0 0 auto !important; }
.cg-de-attention-dot { width: 8px !important; height: 8px !important; border-radius: 999px !important; background: #f59e0b !important; display: inline-block !important; margin-right: 6px !important; }

@media (max-width: 980px) {
  .cg-de-dashboard .cg-de-summary-grid,
  .cg-de-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cg-de-dashboard .cg-de-dashboard-grid,
  .cg-de-dashboard-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 520px) {
  .cg-de-dashboard .cg-de-summary-grid,
  .cg-de-summary-grid { grid-template-columns: 1fr !important; }
  .cg-de-dashboard .cg-de-summary-card,
  .cg-de-summary-card { min-height: 96px !important; }
  .cg-de-record-item { align-items: flex-start !important; flex-direction: column !important; }
  .cg-de-record-item .cg-btn { width: 100% !important; }
}
/* CG-DASH-014B END */

/* CG-UI-015 — Modern Sidebar + DE/EE Dashboard Refinement */
:root {
  --cg-sidebar-expanded: 272px;
  --cg-sidebar-collapsed: 78px;
  --cg-sidebar-navy-1: #102a46;
  --cg-sidebar-navy-2: #173a5c;
  --cg-sidebar-line: rgba(226, 236, 246, .15);
  --cg-sidebar-text: #edf5fb;
  --cg-sidebar-muted: #b7c8d8;
  --cg-sidebar-active: rgba(72, 128, 202, .22);
  --cg-sidebar-accent: #55a2ff;
}

body:not(.cg-public-page) .cg-sidebar {
  width: var(--cg-sidebar-expanded) !important;
  padding: 18px 14px 14px !important;
  display: flex !important;
  flex-direction: column;
  overflow-x: visible !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, var(--cg-sidebar-navy-2) 0%, var(--cg-sidebar-navy-1) 56%, #0d223a 100%) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 12px 0 32px rgba(15, 23, 42, .18) !important;
  transition: width .22s ease, padding .22s ease;
}
body:not(.cg-public-page) .cg-main {
  padding-left: var(--cg-sidebar-expanded) !important;
  transition: padding-left .22s ease;
}
body:not(.cg-public-page).cg-sidebar-collapsed .cg-sidebar {
  width: var(--cg-sidebar-collapsed) !important;
  padding-inline: 10px !important;
}
body:not(.cg-public-page).cg-sidebar-collapsed .cg-main {
  padding-left: var(--cg-sidebar-collapsed) !important;
}

.cg-sidebar-brand {
  display: block !important;
  padding: 0 4px 16px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid var(--cg-sidebar-line) !important;
  flex: 0 0 auto;
}
.cg-sidebar-brand-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
}
.cg-sidebar-brand .cg-logo-wordmark-shell {
  width: auto !important;
  max-width: 170px !important;
  height: 48px !important;
  object-fit: contain !important;
  object-position: center;
  margin: 0 auto !important;
  transition: opacity .18s ease, width .22s ease;
}
.cg-sidebar-brand-copy { display: block; margin-top: 0px; text-align: center; }
.cg-sidebar-brand-copy strong,
.cg-sidebar-brand-copy small {
  display: block;
  color: var(--cg-sidebar-text) !important;
  line-height: 1.1;
}
.cg-sidebar-brand-copy strong { font-size: 13px !important; font-weight: 650 !important; }
.cg-sidebar-brand-copy small { margin-top: 0px; color: #f5bd36 !important; font-size: 11.5px !important; font-weight: 650; }
.cg-sidebar-toggle-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 0px;
  padding: 0 5px 0px;
  margin: 0px 0 0px;
  flex: 0 0 auto;
}
.cg-sidebar-toggle {
  margin: 0;
  width: 25px;
  height: 25px;
  border: 0px solid rgba(255,255,255,.16);
  border-radius: 0px;
  background: rgba(5, 20, 38, .28);
  color: #fff;
  font-size: 35px;
  line-height: 0;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(1, 9, 21, .18);
}
.cg-sidebar-toggle:hover { background: rgba(85,162,255,.22); border-color: rgba(117,183,255,.5); }

.cg-sidebar-search-wrap {
  position: relative;
  margin: 0 2px 2px;
  flex: 0 0 auto;
}
.cg-sidebar-search-wrap input {
  width: 100%;
  min-height: 20px;
  padding: 0 12px 0 38px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  color: var(--cg-sidebar-text);
  background: rgba(2, 14, 30, .24);
  outline: none;
}
.cg-sidebar-search-wrap input::placeholder { color: #9fb3c5; }
.cg-sidebar-search-wrap input:focus { border-color: rgba(85,162,255,.7); box-shadow: 0 0 0 3px rgba(85,162,255,.12); }
.cg-sidebar-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #c7d7e5; font-size: 18px; pointer-events: none; }

body:not(.cg-public-page) .cg-side-nav {
  display: block !important;
  min-height: 0;
  flex: 1 1 auto;
  overflow: visible;
}
.cg-nav-group-label {
  margin: 16px 10px 7px;
  color: #86a6c2;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
  line-height: 1;
}
body:not(.cg-public-page) .cg-side-nav button {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100%;
  min-height: 20px !important;
  margin: 0px 0;
  padding: 0 0px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--cg-sidebar-muted) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}
body:not(.cg-public-page) .cg-side-nav button:hover {
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.07) !important;
  transform: translateX(2px);
}
body:not(.cg-public-page) .cg-side-nav button.active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(52,111,187,.34), rgba(52,111,187,.18)) !important;
  border-color: rgba(101,169,255,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 7px 16px rgba(1,12,27,.12) !important;
}
body:not(.cg-public-page) .cg-side-nav button.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 4px;
  background: var(--cg-sidebar-accent);
  box-shadow: 0 0 10px rgba(85,162,255,.65);
}
body:not(.cg-public-page) .cg-side-nav .cg-nav-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: currentColor;
}
body:not(.cg-public-page) .cg-side-nav .cg-nav-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body:not(.cg-public-page) .cg-side-nav button.has-notification::after {
  content: attr(data-notification-count);
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #4f8cff;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(55,112,220,.34);
}

.cg-sidebar-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  margin-top: 14px;
  padding: 11px 9px 2px;
  border-top: 1px solid var(--cg-sidebar-line);
  color: var(--cg-sidebar-text);
  flex: 0 0 auto;
}
.cg-sidebar-avatar {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg,#e8f2ff,#a8c8ef);
  color: #153655;
  font-size: 15px;
  font-weight: 800;
  border: 2px solid rgba(255,255,255,.7);
}
.cg-sidebar-avatar i { position:absolute; right:-1px; bottom:0; width:10px; height:10px; border-radius:50%; background:#27c56d; border:2px solid #143451; }
.cg-sidebar-avatar .cg-sidebar-avatar-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.cg-sidebar-avatar.has-photo > span { display:none !important; }
.cg-sidebar-avatar.has-photo i { z-index:2; }
.cg-sidebar-profile-copy { min-width: 0; flex: 1; }
.cg-sidebar-profile-copy strong,
.cg-sidebar-profile-copy small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cg-sidebar-profile-copy strong { color:#fff; font-size:12.5px; }
.cg-sidebar-profile-copy small { margin-top:2px; color:#9eb5c8; font-size:10.5px; }
.cg-sidebar-profile-caret { color:#9eb5c8; }

body.cg-sidebar-collapsed .cg-sidebar-brand-copy,
body.cg-sidebar-collapsed .cg-sidebar-search-wrap,
body.cg-sidebar-collapsed .cg-nav-group-label,
body.cg-sidebar-collapsed .cg-side-nav .cg-nav-label,
body.cg-sidebar-collapsed .cg-sidebar-profile-copy,
body.cg-sidebar-collapsed .cg-sidebar-profile-caret { display: none !important; }
body.cg-sidebar-collapsed .cg-sidebar-brand { padding-inline: 0 !important; }
body.cg-sidebar-collapsed .cg-sidebar-brand-main { display: grid; justify-items: center; gap: 8px; }
body.cg-sidebar-collapsed .cg-sidebar-brand .cg-logo-wordmark-shell { width: 46px !important; max-width: 46px !important; height: 46px !important; object-fit: cover !important; object-position: left center; border-radius: 10px; }
body.cg-sidebar-collapsed .cg-sidebar-toggle-row { justify-content: center; padding-inline: 0; }
body.cg-sidebar-collapsed .cg-sidebar-toggle { margin: 0; width: 34px; height: 34px; }
body.cg-sidebar-collapsed .cg-side-nav button { justify-content: center !important; padding: 0 !important; min-height: 46px !important; overflow: visible; }
body.cg-sidebar-collapsed .cg-side-nav button:hover { transform: none; }
body.cg-sidebar-collapsed .cg-side-nav button::after { pointer-events:none; }
body.cg-sidebar-collapsed .cg-side-nav button:not(.has-notification):hover::after {
  content: attr(data-menu-label);
  position: absolute;
  z-index: 90;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 190px;
  padding: 9px 12px;
  border-radius: 9px;
  background: #112a46;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(15,23,42,.25);
}
body.cg-sidebar-collapsed .cg-side-nav button.has-notification::after {
  position:absolute;
  top:4px;
  right:3px;
  margin:0;
  min-width:17px;
  height:17px;
  padding:0 4px;
  font-size:9px;
}
body.cg-sidebar-collapsed .cg-sidebar-profile { justify-content:center; padding-inline:0; }

/* DE dashboard: clean full-width record list */
.cg-de-dashboard-grid-full { grid-template-columns: minmax(0, 1fr) !important; }
.cg-de-dashboard-grid-full > .cg-panel { width: 100%; }

/* EE dashboard: own-work view while mapping remains unconfirmed */
.cg-ee-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin: 16px 0;
}
.cg-ee-summary-card {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 19px;
  border: 1px solid #d7e0ea;
  border-left: 4px solid #4f8cff;
  border-radius: 15px;
  background: linear-gradient(145deg,#ffffff,#f8fbff);
  box-shadow: 0 10px 24px rgba(39,61,87,.07);
}
.cg-ee-summary-card span { color:#4f6279; font-size:13px; font-weight:700; }
.cg-ee-summary-card strong { color:#0f2d53; font-size:31px; line-height:1; }
.cg-ee-summary-card small { color:#6a7d92; font-size:11.5px; }
.cg-ee-mapping-note {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border:1px solid #d8e4f2;
  border-radius:12px;
  background:#f4f8fd;
  color:#496078;
}
.cg-ee-mapping-note strong { color:#183b64; font-size:12.5px; white-space:nowrap; }
.cg-ee-mapping-note span { font-size:12px; line-height:1.45; }
.cg-ee-task-list { display:grid; }
.cg-ee-task-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid #e1e8ef;
}
.cg-ee-task-item:last-child { border-bottom:0; }
.cg-ee-task-item strong,.cg-ee-task-item small { display:block; }
.cg-ee-task-item strong { color:#16263b; font-size:13.5px; line-height:1.35; }
.cg-ee-task-item small { margin-top:4px; color:#6b7f95; font-size:11.5px; }
.cg-ee-empty { min-height:170px; display:grid; place-items:center; align-content:center; text-align:center; color:#6b7f95; }
.cg-ee-empty-icon { width:46px; height:46px; display:grid; place-items:center; margin-bottom:10px; border-radius:50%; background:#e9f3ff; color:#3678cb; font-size:22px; font-weight:800; }
.cg-ee-empty strong { color:#243b56; font-size:14px; }
.cg-ee-empty p { margin:6px 0 0; font-size:12px; }

@media (max-width: 1180px) {
  .cg-ee-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  body:not(.cg-public-page) .cg-sidebar { display:none !important; }
  body:not(.cg-public-page) .cg-main,
  body:not(.cg-public-page).cg-sidebar-collapsed .cg-main { padding-left:0 !important; }
  .cg-ee-summary-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .cg-ee-summary-card { min-height:108px; padding:14px; }
  .cg-ee-mapping-note { display:block; }
  .cg-ee-mapping-note strong,.cg-ee-mapping-note span { display:block; white-space:normal; }
  .cg-ee-mapping-note span { margin-top:4px; }
}
@media (max-width: 460px) {
  .cg-ee-summary-grid { grid-template-columns:1fr; }
  .cg-ee-task-item { grid-template-columns:1fr; }
  .cg-ee-task-item .cg-btn { width:100%; }
}
/* CG-UI-015 END */


/* CG-UI-015A — Header, Sidebar, DE & EE Workspace Refinement */
body:not(.cg-public-page) .cg-header,
body.cg-route-app .cg-header,
body.cg-route-app #cgHeader {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  column-gap: 14px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
body:not(.cg-public-page) .cg-header > .cg-brand,
body.cg-route-app .cg-header > .cg-brand,
body.cg-route-app #cgHeader > .cg-brand { display:none !important; }
body:not(.cg-public-page) .cg-header .cg-search,
body.cg-route-app .cg-header .cg-search,
body.cg-route-app #cgHeader .cg-search {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}
body:not(.cg-public-page) .cg-header .cg-search input,
body.cg-route-app .cg-header .cg-search input { width:100% !important; }

.cg-sidebar-search-wrap { display:none !important; }
.cg-sidebar { box-shadow: 10px 0 26px rgba(19, 43, 68, .12) !important; }
.cg-sidebar-brand { padding-bottom: 14px !important; }
.cg-side-nav { padding-top: 10px !important; padding-bottom: 90px !important; }
.cg-sidebar-profile {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  margin: 0 !important;
  z-index: 5 !important;
  background: linear-gradient(180deg, rgba(16,42,70,.96), rgba(13,34,58,.98)) !important;
  border-radius: 12px !important;
  box-shadow: 0 -10px 24px rgba(13,34,58,.12) !important;
}
body.cg-sidebar-collapsed .cg-sidebar-profile { left:8px !important; right:8px !important; }

/* Incoming list: softcopy remains in detail view only */
.cg-record-screen .cg-record-table th[data-label="Softcopy"],
.cg-record-screen .cg-record-table td[data-label="Softcopy"] { display:none !important; }

/* DE: current records use full content width */
.cg-de-dashboard .cg-de-dashboard-grid-full,
.cg-de-dashboard .cg-de-dashboard-grid-full > .cg-panel { width:100% !important; max-width:none !important; }

/* EE: compact own-task panel with internal scrolling */
.cg-ee-dashboard .cg-ee-task-panel > .cg-panel { overflow:hidden !important; }
.cg-ee-dashboard .cg-ee-task-panel .cg-ee-task-list {
  max-height: 360px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-gutter: stable;
}
.cg-ee-dashboard .cg-ee-empty { min-height: 110px !important; }
.cg-ee-dashboard .cg-ee-empty-icon { width:38px !important; height:38px !important; margin-bottom:6px !important; }

/* Dashboard activity panels stay compact and scroll internally */
.cg-dashboard-lite #cgDashActivityPanel {
  max-height: 320px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 6px;
}

@media (max-width: 720px) {
  body:not(.cg-public-page) .cg-header,
  body.cg-route-app .cg-header,
  body.cg-route-app #cgHeader {
    grid-template-columns: 44px minmax(0,1fr) auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }
  body:not(.cg-public-page) .cg-header .cg-search,
  body.cg-route-app .cg-header .cg-search { min-width:0 !important; }
  .cg-ee-dashboard .cg-ee-task-panel .cg-ee-task-list,
  .cg-dashboard-lite #cgDashActivityPanel { max-height: 300px !important; }
}


/* CG-UI-015B — Refined Enterprise Dashboard & Sidebar */
:root {
  --cg-enterprise-sidebar-1:#10253d;
  --cg-enterprise-sidebar-2:#0b1d31;
  --cg-enterprise-accent:#1687c9;
  --cg-enterprise-accent-soft:rgba(22,135,201,.16);
  --cg-enterprise-line:rgba(195,215,232,.18);
}

/* Sidebar: softer enterprise navy, stable footer, aligned icon + label. */
body:not(.cg-public-page) .cg-sidebar {
  background:linear-gradient(180deg,var(--cg-enterprise-sidebar-1) 0%,var(--cg-enterprise-sidebar-2) 100%) !important;
  box-shadow:10px 0 28px rgba(20,42,66,.16) !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
  padding-bottom:82px !important;
  overflow:hidden !important;
}
body:not(.cg-public-page) .cg-sidebar-brand {
  border-bottom:1px solid var(--cg-enterprise-line) !important;
  padding-bottom:14px !important;
  margin-bottom:12px !important;
}
body:not(.cg-public-page) .cg-side-nav {
  height:calc(100% - 128px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:4px !important;
  padding-bottom:18px !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(157,183,205,.34) transparent;
}
body:not(.cg-public-page) .cg-side-nav::-webkit-scrollbar{width:5px;}
body:not(.cg-public-page) .cg-side-nav::-webkit-scrollbar-thumb{background:rgba(157,183,205,.34);border-radius:999px;}
body:not(.cg-public-page) .cg-side-nav button {
  display:grid !important;
  grid-template-columns:22px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  min-height:42px !important;
  padding:9px 12px !important;
  margin:1px 0 !important;
  border-radius:10px !important;
  color:#bfd0de !important;
  transition:background .16s ease,color .16s ease,transform .16s ease !important;
}
body:not(.cg-public-page) .cg-side-nav button:hover {
  background:rgba(255,255,255,.055) !important;
  color:#fff !important;
  transform:translateX(1px);
}
body:not(.cg-public-page) .cg-side-nav button.active,
body:not(.cg-public-page) .cg-side-nav button[aria-current="page"] {
  background:linear-gradient(90deg,rgba(22,135,201,.25),rgba(74,126,182,.14)) !important;
  color:#fff !important;
  box-shadow:inset 3px 0 0 var(--cg-enterprise-accent),inset 0 0 0 1px rgba(82,153,214,.22) !important;
}
body:not(.cg-public-page) .cg-sidebar-profile {
  position:absolute !important;
  left:10px !important;
  right:10px !important;
  bottom:10px !important;
  margin:0 !important;
  min-height:58px !important;
  background:rgba(32,76,113,.48) !important;
  border:1px solid rgba(133,177,213,.16) !important;
  border-radius:12px !important;
  box-shadow:0 8px 18px rgba(3,13,24,.14) !important;
  z-index:3;
}
body.cg-sidebar-collapsed .cg-sidebar-profile {left:8px !important;right:8px !important;}

/* Header: clean long global search, no duplicate brand. */
body:not(.cg-public-page) .cg-header,
body.cg-route-app .cg-header,
body.cg-route-app #cgHeader {
  grid-template-columns:minmax(320px,1fr) auto auto !important;
  gap:14px !important;
  padding-inline:24px !important;
  box-shadow:0 1px 0 rgba(43,64,86,.08),0 7px 20px rgba(51,71,92,.045) !important;
}
body:not(.cg-public-page) .cg-header .cg-search {
  width:100% !important;
  max-width:none !important;
}

/* Shared enterprise dashboard treatment. */
.cg-de-dashboard .cg-dashboard-head-clean,
.cg-ee-dashboard .cg-dashboard-head-clean {
  background:linear-gradient(100deg,#f4fbff 0%,#eefbf9 58%,#f8fbff 100%) !important;
  border-left:5px solid var(--cg-enterprise-accent) !important;
  box-shadow:0 10px 25px rgba(39,72,101,.065) !important;
}
.cg-de-dashboard .cg-dashboard-head-clean h1,
.cg-ee-dashboard .cg-dashboard-head-clean h1 {
  color:#12263d !important;
  letter-spacing:-.025em !important;
}

/* DE: full-width recent records with fixed panel height and internal scroll. */
.cg-de-dashboard .cg-de-dashboard-grid-full {
  display:block !important;
  width:100% !important;
  max-width:none !important;
}
.cg-de-dashboard .cg-de-dashboard-grid-full > .cg-panel {
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
.cg-de-dashboard .cg-de-dashboard-grid-full > .cg-panel > :last-child {
  max-height:420px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:8px !important;
  scrollbar-width:thin;
  scrollbar-color:#b8c8d7 transparent;
}
.cg-de-dashboard .cg-de-dashboard-grid-full > .cg-panel > :last-child::-webkit-scrollbar{width:6px;}
.cg-de-dashboard .cg-de-dashboard-grid-full > .cg-panel > :last-child::-webkit-scrollbar-thumb{background:#b8c8d7;border-radius:999px;}
.cg-de-dashboard .cg-de-record-item {
  min-height:74px !important;
  padding:13px 0 !important;
}

/* EE: refined KPI cards and fixed-height task panel with scroll. */
.cg-ee-summary-card {
  border-left:4px solid #2d8bd3 !important;
  border-top:1px solid #e4ebf2 !important;
  border-right:1px solid #e4ebf2 !important;
  border-bottom:1px solid #e4ebf2 !important;
  background:#fff !important;
  box-shadow:0 8px 20px rgba(37,60,84,.075) !important;
}
.cg-ee-summary-card span::before {
  content:'◯';
  display:inline-block;
  margin-right:8px;
  color:#6e8194;
  font-size:12px;
  vertical-align:1px;
}
.cg-ee-task-panel > .cg-panel {
  min-height:0 !important;
}
.cg-ee-task-panel > .cg-panel > :last-child {
  height:280px !important;
  max-height:280px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:8px !important;
  scrollbar-width:thin;
  scrollbar-color:#b8c8d7 transparent;
}
.cg-ee-task-panel > .cg-panel > :last-child::-webkit-scrollbar{width:6px;}
.cg-ee-task-panel > .cg-panel > :last-child::-webkit-scrollbar-thumb{background:#b8c8d7;border-radius:999px;}
.cg-ee-empty { min-height:250px !important; }

/* Compact scrolling for dashboard activity panels only; module tables keep pagination. */
.cg-dashboard-lite .cg-activity-list,
.cg-dashboard-lite .cg-activity-compact-list {
  max-height:360px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

@media (max-width:720px){
  .cg-de-dashboard .cg-de-dashboard-grid-full > .cg-panel > :last-child{max-height:360px !important;}
  .cg-ee-task-panel > .cg-panel > :last-child{height:260px !important;max-height:260px !important;}
}
/* CG-UI-015B END */

/* CG-UI-015C — Full Height Sidebar & Unified Role Header Rebuild */
:root {
  --cg-shell-sidebar-wide: 272px;
  --cg-shell-sidebar-narrow: 78px;
  --cg-shell-header-h: 66px;
  --cg-shell-navy-top: #122b46;
  --cg-shell-navy-bottom: #0b1d31;
  --cg-shell-accent: #1687c9;
}

/* App shell: sidebar owns the full left edge from top to bottom. */
body.cg-route-app .cg-sidebar,
body:not(.cg-public-page) .cg-sidebar {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: var(--cg-shell-sidebar-wide) !important;
  padding: 18px 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, var(--cg-shell-navy-top) 0%, var(--cg-shell-navy-bottom) 100%) !important;
  box-shadow: 10px 0 30px rgba(14, 31, 50, .18) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  z-index: 60 !important;
}
body.cg-route-app.cg-sidebar-collapsed .cg-sidebar,
body:not(.cg-public-page).cg-sidebar-collapsed .cg-sidebar {
  width: var(--cg-shell-sidebar-narrow) !important;
  padding-inline: 10px !important;
}

/* Header begins after the sidebar; it never crosses above the sidebar. */
body.cg-route-app .cg-header,
body.cg-route-app #cgHeader,
body:not(.cg-public-page) .cg-header {
  position: fixed !important;
  top: 0 !important;
  left: var(--cg-shell-sidebar-wide) !important;
  right: 0 !important;
  width: auto !important;
  height: var(--cg-shell-header-h) !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 680px) minmax(20px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 20px !important;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid #dbe3eb !important;
  box-shadow: 0 5px 18px rgba(35, 55, 76, .055) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  z-index: 50 !important;
  transition: left .22s ease !important;
}
body.cg-route-app.cg-sidebar-collapsed .cg-header,
body.cg-route-app.cg-sidebar-collapsed #cgHeader,
body:not(.cg-public-page).cg-sidebar-collapsed .cg-header {
  left: var(--cg-shell-sidebar-narrow) !important;
}

/* Search is intentionally balanced instead of stretching across the entire header. */
body.cg-route-app .cg-header .cg-search,
body.cg-route-app #cgHeader .cg-search,
body:not(.cg-public-page) .cg-header .cg-search {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 680px !important;
  min-width: 0 !important;
  justify-self: start !important;
  margin: 0 !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  border: 1px solid #cfd9e4 !important;
}
body.cg-route-app .cg-header .cg-user,
body.cg-route-app #cgHeader .cg-user {
  grid-column: 3 !important;
  justify-self: end !important;
}
body.cg-route-app .cg-header-logout,
body.cg-route-app #cgHeaderLogout {
  grid-column: 4 !important;
  justify-self: end !important;
}

/* Main content follows sidebar width and header height. */
body.cg-route-app .cg-main,
body:not(.cg-public-page) .cg-main {
  padding-left: var(--cg-shell-sidebar-wide) !important;
  padding-top: var(--cg-shell-header-h) !important;
  transition: padding-left .22s ease !important;
}
body.cg-route-app.cg-sidebar-collapsed .cg-main,
body:not(.cg-public-page).cg-sidebar-collapsed .cg-main {
  padding-left: var(--cg-shell-sidebar-narrow) !important;
}

/* Sidebar layout: only menu area scrolls; profile never overlays menu items. */
body.cg-route-app .cg-sidebar-brand,
body:not(.cg-public-page) .cg-sidebar-brand {
  flex: 0 0 auto !important;
  margin: 0 0 10px !important;
  padding: 0 2px 14px !important;
  border-bottom: 1px solid rgba(202,220,235,.17) !important;
}
body.cg-route-app .cg-side-nav,
body:not(.cg-public-page) .cg-side-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px 3px 10px 0 !important;
  margin: 0 !important;
}
body.cg-route-app .cg-sidebar-profile,
body:not(.cg-public-page) .cg-sidebar-profile {
  position: static !important;
  flex: 0 0 auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  min-height: 54px !important;
  margin: 8px 0 0 !important;
  padding: 10px 8px 2px !important;
  border: 0 !important;
  border-top: 1px solid rgba(202,220,235,.17) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: auto !important;
}
body.cg-sidebar-collapsed .cg-sidebar-profile {
  margin-top: 8px !important;
  padding: 10px 0 2px !important;
  justify-content: center !important;
}

/* Unified role dashboard header: clean neutral surface, no yellow/role gradient. */
body.cg-route-app .cg-dashboard-head-clean,
body.cg-route-app .cg-de-dashboard .cg-dashboard-head-clean,
body.cg-route-app .cg-ee-dashboard .cg-dashboard-head-clean,
body.cg-route-app .cg-dashboard-lite .cg-dashboard-head-clean {
  background: #ffffff !important;
  border: 1px solid #dce5ee !important;
  border-left: 4px solid var(--cg-shell-accent) !important;
  box-shadow: 0 8px 22px rgba(42, 63, 84, .065) !important;
  border-radius: 14px !important;
}
body.cg-route-app .cg-dashboard-head-clean h1 {
  color: #15263a !important;
  letter-spacing: -.025em !important;
}
body.cg-route-app .cg-dashboard-head-clean p {
  color: #66788c !important;
}

/* DE recent records: use all available width but keep dashboard height controlled. */
body.cg-route-app .cg-de-dashboard .cg-de-dashboard-grid-full,
body.cg-route-app .cg-de-dashboard .cg-de-dashboard-grid-full > .cg-panel {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
body.cg-route-app .cg-de-dashboard .cg-de-dashboard-grid-full > .cg-panel > :last-child {
  height: 420px !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

@media (max-width: 900px) {
  body.cg-route-app .cg-header,
  body.cg-route-app #cgHeader,
  body:not(.cg-public-page) .cg-header {
    grid-template-columns: minmax(220px, 1fr) auto auto !important;
    padding-inline: 14px !important;
  }
  body.cg-route-app .cg-header .cg-search,
  body.cg-route-app #cgHeader .cg-search { grid-column: 1 !important; max-width: 520px !important; }
  body.cg-route-app .cg-header .cg-user,
  body.cg-route-app #cgHeader .cg-user { grid-column: 2 !important; }
  body.cg-route-app .cg-header-logout,
  body.cg-route-app #cgHeaderLogout { grid-column: 3 !important; }
}

@media (max-width: 720px) {
  body.cg-route-app .cg-sidebar,
  body:not(.cg-public-page) .cg-sidebar { display: none !important; }
  body.cg-route-app .cg-header,
  body.cg-route-app #cgHeader,
  body:not(.cg-public-page) .cg-header,
  body.cg-route-app.cg-sidebar-collapsed .cg-header,
  body.cg-route-app.cg-sidebar-collapsed #cgHeader {
    left: 0 !important;
    grid-template-columns: 44px minmax(0,1fr) auto !important;
    gap: 8px !important;
    padding-inline: 10px !important;
  }
  body.cg-route-app .cg-main,
  body:not(.cg-public-page) .cg-main,
  body.cg-route-app.cg-sidebar-collapsed .cg-main {
    padding-left: 0 !important;
  }
  body.cg-route-app .cg-header .cg-search,
  body.cg-route-app #cgHeader .cg-search { grid-column: 2 !important; max-width: none !important; }
  body.cg-route-app .cg-header .cg-user,
  body.cg-route-app #cgHeader .cg-user { grid-column: 3 !important; }
  body.cg-route-app .cg-header-logout,
  body.cg-route-app #cgHeaderLogout { display: none !important; }
  body.cg-route-app .cg-de-dashboard .cg-de-dashboard-grid-full > .cg-panel > :last-child {
    height: 340px !important;
    max-height: 340px !important;
  }
}
/* CG-UI-015C END */

/* CG-UI-015D — Sidebar Collapse Recovery Hotfix */
:root {
  --cg-sidebar-collapsed-safe: 78px;
}

/* Keep collapsed rail self-contained and prevent any expanded content leaking out. */
body.cg-sidebar-collapsed .cg-sidebar {
  width: var(--cg-sidebar-collapsed-safe) !important;
  min-width: var(--cg-sidebar-collapsed-safe) !important;
  max-width: var(--cg-sidebar-collapsed-safe) !important;
  padding: 14px 8px 10px !important;
  overflow: hidden !important;
}

body.cg-sidebar-collapsed .cg-sidebar-brand {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 0 12px !important;
  margin: 0 0 10px !important;
  overflow: hidden !important;
}

body.cg-sidebar-collapsed .cg-sidebar-brand-main {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  overflow: hidden !important;
}

/* Full wordmark is unsuitable inside a 78px rail. Replace it with a compact CaseGo monogram. */
body.cg-sidebar-collapsed .cg-sidebar-brand .cg-logo-wordmark-shell {
  display: none !important;
}
body.cg-sidebar-collapsed .cg-sidebar-brand-main::before {
  content: "CG";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  background: linear-gradient(145deg, rgba(63,140,217,.42), rgba(24,70,112,.48));
  border: 1px solid rgba(151,199,239,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 14px rgba(2,12,27,.18);
}

body.cg-sidebar-collapsed .cg-sidebar-brand-copy,
body.cg-sidebar-collapsed .cg-nav-group-label,
body.cg-sidebar-collapsed .cg-side-nav .cg-nav-label,
body.cg-sidebar-collapsed .cg-sidebar-profile-copy,
body.cg-sidebar-collapsed .cg-sidebar-profile-caret {
  display: none !important;
}

body.cg-sidebar-collapsed .cg-sidebar-toggle {
  position: static !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
}

body.cg-sidebar-collapsed .cg-side-nav {
  width: 100% !important;
  min-width: 0 !important;
  padding: 4px 0 8px !important;
  overflow-x: hidden !important;
}

body.cg-sidebar-collapsed .cg-side-nav button {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 46px !important;
  margin: 3px 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  border-radius: 11px !important;
  overflow: visible !important;
}

body.cg-sidebar-collapsed .cg-side-nav .cg-nav-icon {
  margin: 0 !important;
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px !important;
}

/* Tooltips are sourced from data-menu-label/title already emitted by navigation rendering. */
body.cg-sidebar-collapsed .cg-side-nav button:hover::before {
  content: attr(data-menu-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 140;
  max-width: 220px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #122b46;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15,31,49,.22);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  pointer-events: none;
}
body.cg-sidebar-collapsed .cg-side-nav button:hover::after {
  content: "";
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid #122b46;
  pointer-events: none;
  z-index: 141;
}

/* Notification badge remains attached to the icon rail, not to hidden text. */
body.cg-sidebar-collapsed .cg-side-nav button.has-notification::after {
  content: attr(data-badge) !important;
  left: auto !important;
  right: 4px !important;
  top: 5px !important;
  transform: none !important;
  width: auto !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ef5350 !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 0 0 2px #102a46 !important;
}

body.cg-sidebar-collapsed .cg-sidebar-profile {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;
  margin: 8px 0 0 !important;
  padding: 10px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
body.cg-sidebar-collapsed .cg-sidebar-avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  flex: 0 0 42px !important;
}

/* Ensure app shell follows the recovered rail width exactly. */
body.cg-route-app.cg-sidebar-collapsed .cg-header,
body.cg-route-app.cg-sidebar-collapsed #cgHeader,
body:not(.cg-public-page).cg-sidebar-collapsed .cg-header {
  left: var(--cg-sidebar-collapsed-safe) !important;
}
body.cg-route-app.cg-sidebar-collapsed .cg-main,
body:not(.cg-public-page).cg-sidebar-collapsed .cg-main {
  padding-left: var(--cg-sidebar-collapsed-safe) !important;
}

@media (max-width: 900px) {
  /* Mobile continues to use the existing drawer/bottom navigation behavior. */
  body.cg-sidebar-collapsed .cg-side-nav button:hover::before,
  body.cg-sidebar-collapsed .cg-side-nav button:hover::after {
    display: none !important;
  }
}
/* CG-UI-015D END */

/* CG-UI-015E — Collapsed Sidebar Final Recovery */
:root {
  --cg-sidebar-collapsed-final: 70px;
}

/* Viewport-aware shell: sidebar always fills the visible browser height. */
body.cg-route-app .cg-sidebar,
body:not(.cg-public-page) .cg-sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  max-height: 100dvh !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Header/brand and profile are fixed-height zones; only navigation scrolls. */
body.cg-route-app .cg-sidebar-brand,
body:not(.cg-public-page) .cg-sidebar-brand,
body.cg-route-app .cg-sidebar-profile,
body:not(.cg-public-page) .cg-sidebar-profile {
  flex: 0 0 auto !important;
}
body.cg-route-app .cg-side-nav,
body:not(.cg-public-page) .cg-side-nav {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
}

/* Final collapsed rail dimensions. */
body.cg-sidebar-collapsed .cg-sidebar {
  width: var(--cg-sidebar-collapsed-final) !important;
  min-width: var(--cg-sidebar-collapsed-final) !important;
  max-width: var(--cg-sidebar-collapsed-final) !important;
  padding: 12px 8px 10px !important;
}

/* Completely suppress expanded branding copy in collapsed mode. */
body.cg-sidebar-collapsed .cg-sidebar-brand-copy,
body.cg-sidebar-collapsed .cg-sidebar-brand-copy *,
body.cg-sidebar-collapsed .cg-sidebar-brand > span,
body.cg-sidebar-collapsed .cg-sidebar-brand strong,
body.cg-sidebar-collapsed .cg-sidebar-brand small {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.cg-sidebar-collapsed .cg-sidebar-brand {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 0 10px !important;
  margin: 0 0 8px !important;
  overflow: hidden !important;
}
body.cg-sidebar-collapsed .cg-sidebar-brand-main {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: hidden !important;
}
body.cg-sidebar-collapsed .cg-sidebar-brand .cg-logo-wordmark,
body.cg-sidebar-collapsed .cg-sidebar-brand .cg-logo-wordmark-shell {
  display: none !important;
}
body.cg-sidebar-collapsed .cg-sidebar-brand-main::before {
  content: "CG" !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  background: linear-gradient(145deg, rgba(63,140,217,.42), rgba(24,70,112,.48)) !important;
  border: 1px solid rgba(151,199,239,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 14px rgba(2,12,27,.18) !important;
}
body.cg-sidebar-collapsed .cg-sidebar-toggle {
  position: static !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

/* Collapsed navigation: icon-only, vertically scrollable on short screens. */
body.cg-sidebar-collapsed .cg-nav-group-label,
body.cg-sidebar-collapsed .cg-side-nav .cg-nav-label,
body.cg-sidebar-collapsed .cg-sidebar-profile-copy,
body.cg-sidebar-collapsed .cg-sidebar-profile-caret {
  display: none !important;
}
body.cg-sidebar-collapsed .cg-side-nav {
  width: 100% !important;
  min-width: 0 !important;
  padding: 2px 0 6px !important;
  margin: 0 !important;
}
body.cg-sidebar-collapsed .cg-side-nav button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 44px !important;
  margin: 1px 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  border-radius: 11px !important;
}
body.cg-sidebar-collapsed .cg-side-nav .cg-nav-icon {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
}

/* Footer avatar always remains visible at the bottom, without covering the nav. */
body.cg-sidebar-collapsed .cg-sidebar-profile {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;
  margin: 6px 0 0 !important;
  padding: 8px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
body.cg-sidebar-collapsed .cg-sidebar-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex: 0 0 40px !important;
}

/* Shell alignment follows the final rail width. */
body.cg-route-app.cg-sidebar-collapsed .cg-header,
body.cg-route-app.cg-sidebar-collapsed #cgHeader,
body:not(.cg-public-page).cg-sidebar-collapsed .cg-header {
  left: var(--cg-sidebar-collapsed-final) !important;
}
body.cg-route-app.cg-sidebar-collapsed .cg-main,
body:not(.cg-public-page).cg-sidebar-collapsed .cg-main {
  padding-left: var(--cg-sidebar-collapsed-final) !important;
}

/* Short laptop screens: trim spacing, preserve full top-to-bottom behavior. */
@media (max-height: 760px) and (min-width: 901px) {
  body.cg-route-app .cg-sidebar,
  body:not(.cg-public-page) .cg-sidebar {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }
  body.cg-sidebar-collapsed .cg-sidebar-brand-main { gap: 2px !important; }
  body.cg-sidebar-collapsed .cg-sidebar-brand-main::before {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
  body.cg-sidebar-collapsed .cg-sidebar-toggle {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
  body.cg-sidebar-collapsed .cg-side-nav button { min-height: 40px !important; }
  body.cg-sidebar-collapsed .cg-sidebar-profile {
    min-height: 48px !important;
    flex-basis: 48px !important;
  }
  body.cg-sidebar-collapsed .cg-sidebar-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-basis: 36px !important;
  }
}

@media (max-width: 900px) {
  /* Preserve existing mobile drawer/bottom-navigation behavior. */
  body.cg-route-app .cg-sidebar,
  body:not(.cg-public-page) .cg-sidebar {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}
/* CG-UI-015E END */

/* CG-UI-016 — Unified CaseGo Design System */
:root {
  --cg-ds-page-bg: #e9eff5;
  --cg-ds-page-bg-2: #e4ebf2;
  --cg-ds-surface: #ffffff;
  --cg-ds-surface-soft: #f1f5f8;
  --cg-ds-surface-head: #edf3f7;
  --cg-ds-border: #d6e0e8;
  --cg-ds-border-strong: #c8d4df;
  --cg-ds-text: #10243d;
  --cg-ds-muted: #66788d;
  --cg-ds-accent: #2c8fd2;
  --cg-ds-accent-soft: #dfeef8;
  --cg-ds-radius-lg: 18px;
  --cg-ds-radius-md: 14px;
  --cg-ds-shadow: 0 10px 28px rgba(31, 54, 77, .07);
}

/* One calm canvas for every authenticated route. */
body.cg-route-app,
body:not(.cg-public-page) {
  background: linear-gradient(180deg, var(--cg-ds-page-bg) 0%, var(--cg-ds-page-bg-2) 100%) !important;
  color: var(--cg-ds-text) !important;
}
body.cg-route-app .cg-main,
body:not(.cg-public-page) .cg-main {
  background: transparent !important;
}

/* Unified page / dashboard header surface across all roles and modules. */
body.cg-route-app .cg-head,
body.cg-route-app .cg-dashboard-head-clean,
body:not(.cg-public-page) .cg-head,
body.cg-route-app .cg-profile-hero,
body.cg-route-app .cg-about-hero {
  background: var(--cg-ds-surface-head) !important;
  background-image: none !important;
  border: 1px solid var(--cg-ds-border) !important;
  border-left: 4px solid var(--cg-ds-accent) !important;
  border-radius: var(--cg-ds-radius-lg) !important;
  box-shadow: var(--cg-ds-shadow) !important;
  color: var(--cg-ds-text) !important;
}
body.cg-route-app .cg-head h1,
body.cg-route-app .cg-dashboard-head-clean h1,
body:not(.cg-public-page) .cg-head h1,
body.cg-route-app .cg-profile-hero h1,
body.cg-route-app .cg-about-hero h2 {
  color: var(--cg-ds-text) !important;
}
body.cg-route-app .cg-head p,
body.cg-route-app .cg-dashboard-head-clean p,
body:not(.cg-public-page) .cg-head p,
body.cg-route-app .cg-profile-hero p,
body.cg-route-app .cg-about-hero p {
  color: var(--cg-ds-muted) !important;
}
body.cg-route-app .cg-head .cg-badge,
body:not(.cg-public-page) .cg-head .cg-badge {
  background: var(--cg-ds-accent-soft) !important;
  color: #1f5f8a !important;
  border: 1px solid #c5dfef !important;
}

/* Shared cards/panels: same geometry and tone everywhere. */
body.cg-route-app .cg-panel,
body.cg-route-app .cg-card,
body.cg-route-app .cg-kpi,
body.cg-route-app .cg-op-card,
body:not(.cg-public-page) .cg-panel,
body:not(.cg-public-page) .cg-card,
body:not(.cg-public-page) .cg-kpi,
body:not(.cg-public-page) .cg-op-card {
  background: var(--cg-ds-surface) !important;
  border-color: var(--cg-ds-border) !important;
  border-radius: var(--cg-ds-radius-md) !important;
  box-shadow: var(--cg-ds-shadow) !important;
}
body.cg-route-app .cg-panel-head,
body:not(.cg-public-page) .cg-panel-head {
  border-bottom-color: var(--cg-ds-border) !important;
}

/* KPI cards: one equal visual language for DE, EE, PJ, PU, PB, Admin Viewer and Admin. */
body.cg-route-app .cg-de-summary-card,
body.cg-route-app .cg-ee-summary-card,
body.cg-route-app .cg-kpi,
body.cg-route-app .cg-mini-stat,
body.cg-route-app .cg-dashboard-metric,
body.cg-route-app .cg-stat-card {
  background: var(--cg-ds-surface) !important;
  border: 1px solid var(--cg-ds-border) !important;
  border-left: 4px solid var(--cg-ds-accent) !important;
  box-shadow: var(--cg-ds-shadow) !important;
  border-radius: var(--cg-ds-radius-md) !important;
}

/* Top header: keep search balanced and make user identity chip content-sized for every role. */
body.cg-route-app .cg-header,
body.cg-route-app #cgHeader,
body:not(.cg-public-page) .cg-header {
  grid-template-columns: minmax(320px, 680px) minmax(16px, 1fr) max-content max-content !important;
}
body.cg-route-app .cg-header .cg-user,
body.cg-route-app #cgHeader .cg-user,
body:not(.cg-public-page) .cg-header .cg-user {
  width: auto !important;
  min-width: 0 !important;
  max-width: 220px !important;
  padding: 0 14px !important;
  height: 40px !important;
  display: inline-flex !important;
  justify-content: flex-start !important;
  justify-self: end !important;
  border: 1px solid var(--cg-ds-border) !important;
  border-radius: 999px !important;
  background: #f7fafc !important;
  box-shadow: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.cg-route-app .cg-header .cg-user #cgCurrentUser,
body.cg-route-app #cgHeader .cg-user #cgCurrentUser {
  display: inline !important;
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  color: var(--cg-ds-text) !important;
}
body.cg-route-app .cg-header-logout,
body.cg-route-app #cgHeaderLogout {
  white-space: nowrap !important;
}

/* Keep the dashboard/action header button style neutral and consistent. */
body.cg-route-app .cg-head-actions .cg-btn,
body:not(.cg-public-page) .cg-head-actions .cg-btn {
  background: #ffffff !important;
  color: var(--cg-ds-text) !important;
  border-color: var(--cg-ds-border-strong) !important;
  box-shadow: 0 3px 10px rgba(31,54,77,.04) !important;
}

/* Forms stay readable but visually belong to the same system. */
body.cg-route-app input,
body.cg-route-app select,
body.cg-route-app textarea,
body:not(.cg-public-page) input,
body:not(.cg-public-page) select,
body:not(.cg-public-page) textarea {
  background: #f4f7fa !important;
  border-color: var(--cg-ds-border-strong) !important;
  color: var(--cg-ds-text) !important;
}
body.cg-route-app input:focus,
body.cg-route-app select:focus,
body.cg-route-app textarea:focus {
  background: #ffffff !important;
  border-color: #5ba7d7 !important;
  box-shadow: 0 0 0 3px rgba(44,143,210,.12) !important;
}

/* Empty states and read-only info remain soft, not stark white. */
body.cg-route-app .cg-empty,
body.cg-route-app .cg-dashboard-empty-small,
body.cg-route-app .cg-info,
body.cg-route-app .cg-status-box {
  background: var(--cg-ds-surface-soft) !important;
  border-color: var(--cg-ds-border) !important;
}

/* Lists and tables keep current pagination/functionality; only harmonize surfaces. */
body.cg-route-app table,
body.cg-route-app .cg-record-table,
body.cg-route-app .cg-table {
  background: var(--cg-ds-surface) !important;
}
body.cg-route-app thead th,
body.cg-route-app .cg-record-table thead th,
body.cg-route-app .cg-table thead th {
  background: #eef3f7 !important;
  color: #53667b !important;
  border-bottom-color: var(--cg-ds-border) !important;
}

/* Global section rhythm: avoid crowded transitions when navigating between modules. */
body.cg-route-app .cg-screen,
body:not(.cg-public-page) .cg-screen {
  gap: 18px !important;
}

@media (max-width: 900px) {
  body.cg-route-app .cg-header,
  body.cg-route-app #cgHeader,
  body:not(.cg-public-page) .cg-header {
    grid-template-columns: minmax(200px, 1fr) max-content max-content !important;
  }
  body.cg-route-app .cg-header .cg-user,
  body.cg-route-app #cgHeader .cg-user { max-width: 180px !important; }
}

@media (max-width: 720px) {
  body.cg-route-app .cg-header .cg-user,
  body.cg-route-app #cgHeader .cg-user {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  body.cg-route-app .cg-header .cg-user #cgCurrentUser,
  body.cg-route-app #cgHeader .cg-user #cgCurrentUser { display: none !important; }
  body.cg-route-app .cg-head,
  body.cg-route-app .cg-dashboard-head-clean,
  body:not(.cg-public-page) .cg-head { border-radius: 14px !important; }
}
/* CG-UI-016 END */

/* CG-UI-016B — Unified Dashboard Template + Dark Login Refinement */
:root {
  --cg-016b-accent: #2c8fd2;
  --cg-016b-accent-soft: #dcecf7;
  --cg-016b-page-head: #e8f0f5;
  --cg-016b-card: #ffffff;
  --cg-016b-border: #d4dfe8;
  --cg-016b-text: #10243d;
  --cg-016b-muted: #687b90;
  --cg-016b-shadow: 0 10px 26px rgba(31,54,77,.07);
}

/* One page-heading treatment for every authenticated role and module. */
body.cg-route-app .cg-dashboard-lite > .cg-dashboard-head-clean,
body.cg-route-app .cg-dashboard-lite > .cg-head,
body.cg-route-app .cg-screen > .cg-head,
body.cg-route-app .cg-profile-hero,
body.cg-route-app .cg-about-hero,
body:not(.cg-public-page) .cg-dashboard-lite > .cg-dashboard-head-clean,
body:not(.cg-public-page) .cg-screen > .cg-head {
  background: var(--cg-016b-page-head) !important;
  background-image: none !important;
  border: 1px solid var(--cg-016b-border) !important;
  border-left: 4px solid var(--cg-016b-accent) !important;
  border-radius: 18px !important;
  box-shadow: var(--cg-016b-shadow) !important;
  color: var(--cg-016b-text) !important;
}

/* One KPI/card language for DE, EE, PJ, PU, PB, Admin Viewer and system admins. */
body.cg-route-app .cg-dashboard-lite .cg-kpi,
body.cg-route-app .cg-dashboard-lite .cg-kpi-compact,
body.cg-route-app .cg-de-dashboard .cg-de-summary-card,
body.cg-route-app .cg-ee-dashboard .cg-ee-summary-card,
body.cg-route-app .cg-admin-command-centre .cg-admin-command-card,
body.cg-route-app .cg-admin-dashboard .cg-admin-command-card,
body:not(.cg-public-page) .cg-dashboard-lite .cg-kpi,
body:not(.cg-public-page) .cg-de-summary-card,
body:not(.cg-public-page) .cg-ee-summary-card {
  background: var(--cg-016b-card) !important;
  background-image: none !important;
  border: 1px solid var(--cg-016b-border) !important;
  border-left: 4px solid var(--cg-016b-accent) !important;
  border-radius: 15px !important;
  box-shadow: var(--cg-016b-shadow) !important;
  color: var(--cg-016b-text) !important;
}

body.cg-route-app .cg-dashboard-lite .cg-kpi > span,
body.cg-route-app .cg-dashboard-lite .cg-kpi-compact > span,
body.cg-route-app .cg-de-summary-card > span,
body.cg-route-app .cg-ee-summary-card > span,
body.cg-route-app .cg-admin-command-card > span {
  color: #4f6278 !important;
}
body.cg-route-app .cg-dashboard-lite .cg-kpi > strong,
body.cg-route-app .cg-dashboard-lite .cg-kpi-compact > strong,
body.cg-route-app .cg-de-summary-card > strong,
body.cg-route-app .cg-ee-summary-card > strong,
body.cg-route-app .cg-admin-command-card > strong {
  color: #0f2d53 !important;
}
body.cg-route-app .cg-dashboard-lite .cg-kpi > small,
body.cg-route-app .cg-dashboard-lite .cg-kpi-compact > small,
body.cg-route-app .cg-de-summary-card > small,
body.cg-route-app .cg-ee-summary-card > small,
body.cg-route-app .cg-admin-command-card > small {
  color: #6a7d92 !important;
}

/* Keep role dashboards balanced even when the number of KPI cards differs. */
body.cg-route-app .cg-kpi-grid,
body.cg-route-app .cg-kpi-grid-compact {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}
body.cg-route-app .cg-kpi-grid .cg-kpi,
body.cg-route-app .cg-kpi-grid-compact .cg-kpi {
  width: 100% !important;
  min-width: 0 !important;
}

/* Mini counters/chips use the same neutral accent instead of role-specific yellow. */
body.cg-route-app .cg-mini-stat-strip > button,
body.cg-route-app .cg-mini-stat,
body.cg-route-app .cg-list-count {
  background: #f7fafc !important;
  border-color: var(--cg-016b-border) !important;
  color: var(--cg-016b-text) !important;
  box-shadow: 0 4px 12px rgba(31,54,77,.04) !important;
}
body.cg-route-app .cg-mini-stat-strip > button strong,
body.cg-route-app .cg-mini-stat strong,
body.cg-route-app .cg-list-count strong {
  background: var(--cg-016b-accent-soft) !important;
  color: #1d5f8d !important;
}

/* Shared panel rhythm underneath all role dashboards. */
body.cg-route-app .cg-dashboard-lite .cg-panel,
body.cg-route-app .cg-dashboard-lite .cg-role-focus,
body.cg-route-app .cg-dashboard-lite .cg-workflow-task-group,
body.cg-route-app .cg-admin-command-centre .cg-panel {
  border-color: var(--cg-016b-border) !important;
  border-radius: 15px !important;
  box-shadow: var(--cg-016b-shadow) !important;
}

/* Compact identity chip in the top bar for every role. */
body.cg-route-app .cg-header .cg-user,
body.cg-route-app #cgHeader .cg-user,
body:not(.cg-public-page) .cg-header .cg-user {
  width: max-content !important;
  max-width: 190px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  justify-self: end !important;
}

/* CG-UI-016A merged: darker login canvas so the login panel is clearly elevated. */
body.cg-login-page,
body.cg-route-login,
body.cg-login-premium-active {
  background: #1c2738 !important;
}
.cg-login-premium-centered,
.cg-login-official {
  background:
    radial-gradient(circle at 50% 38%, rgba(71, 93, 124, .24), transparent 34%),
    radial-gradient(circle at 12% 10%, rgba(44, 143, 210, .08), transparent 28%),
    linear-gradient(145deg, #202c3f 0%, #29364a 48%, #1d2839 100%) !important;
}
.cg-login-premium-centered .cg-login-card,
.cg-login-official .cg-login-card,
.cg-login-panel,
.cg-login-card {
  background: #ffffff !important;
  box-shadow: 0 24px 60px rgba(4, 12, 24, .34) !important;
}
.cg-login-premium-centered .cg-login-brand h1,
.cg-login-premium-centered .cg-login-brand h2,
.cg-login-premium-centered .cg-login-brand p,
.cg-login-official .cg-login-brand h1,
.cg-login-official .cg-login-brand h2,
.cg-login-official .cg-login-brand p {
  color: #f5f8fc !important;
}
.cg-login-premium-centered .cg-login-brand strong,
.cg-login-official .cg-login-brand strong,
.cg-login-premium-centered .cg-brand-org,
.cg-login-official .cg-brand-org {
  color: #f4b400 !important;
}
.cg-login-premium-centered .cg-login-footer,
.cg-login-official .cg-login-footer,
.cg-login-premium-centered .cg-login-version,
.cg-login-official .cg-login-version {
  color: #d9e2ee !important;
}

@media (max-width: 760px) {
  body.cg-route-app .cg-kpi-grid,
  body.cg-route-app .cg-kpi-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  body.cg-route-app .cg-kpi-grid,
  body.cg-route-app .cg-kpi-grid-compact {
    grid-template-columns: 1fr !important;
  }
}
/* CG-UI-016B END */

/* CG-UI-016C — Optimized Visual Consistency Recovery */
:root {
  /* Palette & Brand Variables */
  --cg-016c-accent: #2c8fd2;
  --cg-016c-accent-hover: #1e73ae;
  --cg-016c-accent-soft: #eef6fc;
  --cg-016c-accent-text: #174e75;
  
  --cg-016c-head: #f4f8fb;
  --cg-016c-card: #ffffff;
  --cg-016c-border: #dbe4ed;
  --cg-016c-border-strong: #c8d7e6;
  
  --cg-016c-text: #10243d;
  --cg-016c-muted: #687b90;
  
  /* Modern Depth & Shadows */
  --cg-016c-shadow: 0 4px 20px -2px rgba(16, 36, 61, 0.05), 0 2px 6px -1px rgba(16, 36, 61, 0.03);
  --cg-016c-shadow-hover: 0 10px 25px -5px rgba(16, 36, 61, 0.1);
  --cg-016c-transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Helper Group Selector to reduce code repetition */
:is(body.cg-route-app, body:not(.cg-public-page)) {

  /* 1. Universal Hero / Header Treatment */
  .cg-head,
  .cg-dashboard-head-clean,
  .cg-profile-hero,
  .cg-about-hero {
    background: var(--cg-016c-head) !important;
    background-image: none !important;
    border: 1px solid var(--cg-016c-border) !important;
    border-left: 4px solid var(--cg-016c-accent) !important;
    border-radius: 16px !important;
    box-shadow: var(--cg-016c-shadow) !important;
    color: var(--cg-016c-text) !important;
    transition: var(--cg-016c-transition);
  }

  /* Clear Legacy Pseudo Elements on Hero Sections */
  .cg-profile-hero::before,
  .cg-profile-hero::after {
    background: none !important;
    box-shadow: none !important;
    content: none !important;
  }

  /* 2. Neutralize Legacy KPI Cards */
  .cg-kpi,
  .cg-kpi-compact,
  .cg-de-summary-card,
  .cg-ee-summary-card,
  .cg-admin-command-card {
    background: var(--cg-016c-card) !important;
    background-image: none !important;
    border: 1px solid var(--cg-016c-border) !important;
    border-left: 4px solid var(--cg-016c-accent) !important;
    border-radius: 14px !important;
    box-shadow: var(--cg-016c-shadow) !important;
    transition: var(--cg-016c-transition);

    /* Subtle hover effect for modern SaaS feel */
    &:hover {
      border-color: var(--cg-016c-border-strong) !important;
      box-shadow: var(--cg-016c-shadow-hover) !important;
      transform: translateY(-1px);
    }

    /* Neutralize legacy pseudo-elements */
    &::before {
      background: var(--cg-016c-accent) !important;
      width: 0 !important;
      display: none !important;
    }
  }

  /* 3. Mini Counters / Chips Style Optimization */
  .cg-mini-stat-strip > button,
  .cg-mini-stat,
  .cg-list-count {
    background: #f8fafc !important;
    border: 1px solid var(--cg-016c-border) !important;
    border-radius: 8px !important;
    color: var(--cg-016c-text) !important;
    transition: var(--cg-016c-transition);

    strong {
      background: var(--cg-016c-accent-soft) !important;
      color: var(--cg-016c-accent-text) !important;
      padding: 2px 8px;
      border-radius: 6px;
    }

    &:hover {
      background: #ffffff !important;
      border-color: var(--cg-016c-accent) !important;
    }
  }

  /* 4. Profile Badge Design System Alignment */
  .cg-profile-hero .cg-badge {
    background: var(--cg-016c-accent-soft) !important;
    color: var(--cg-016c-accent-text) !important;
    border: 1px solid rgba(44, 143, 210, 0.25) !important;
    border-radius: 20px !important;
    font-weight: 600;
  }
}

/* Login: correct contrast for the actual official login markup. */
body.cg-login-page .cg-login-official,
body.cg-route-login .cg-login-official,
body.cg-login-premium-active .cg-login-official {
min-height: 100dvh !important;
min-height: 100vh !important;
background: #03132e !important;
background-image: 
  radial-gradient(at 20% 20%, #0a3570 0px, transparent 50%),
  radial-gradient(at 80% 10%, #001f4d 0px, transparent 50%),
  radial-gradient(at 40% 80%, #052961 0px, transparent 50%),
  radial-gradient(at 90% 85%, #084295 0px, transparent 50%) !important;
}
body.cg-login-page .cg-login-official-brand h1,
body.cg-route-login .cg-login-official-brand h1,
body.cg-login-premium-active .cg-login-official-brand h1 {
  color: #f5f8fc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.22) !important;
}
body.cg-login-page .cg-login-official-brand p,
body.cg-route-login .cg-login-official-brand p,
body.cg-login-premium-active .cg-login-official-brand p,
body.cg-login-page .cg-login-official-brand strong,
body.cg-route-login .cg-login-official-brand strong,
body.cg-login-premium-active .cg-login-official-brand strong {
  color: #f4b400 !important;
}
body.cg-login-page .cg-login-official-footer,
body.cg-route-login .cg-login-official-footer,
body.cg-login-premium-active .cg-login-official-footer,
body.cg-login-page .cg-login-official-footer strong,
body.cg-route-login .cg-login-official-footer strong,
body.cg-login-premium-active .cg-login-official-footer strong {
  color: #dce6f2 !important;
}
body.cg-login-page .cg-login-official-footer span,
body.cg-route-login .cg-login-official-footer span,
body.cg-login-premium-active .cg-login-official-footer span {
  color: #bcc9d8 !important;
}

/* Keep top identity chip compact and consistent for every role. */
body.cg-route-app .cg-header .cg-user,
body.cg-route-app #cgHeader .cg-user,
body:not(.cg-public-page) .cg-header .cg-user {
  width: auto !important;
  max-width: 190px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  padding-inline: 14px !important;
}
/* CG-UI-016C END */

/* ============================================================
   CG-UI-016D — Typography Softening + Profile Neutralization
   Focus: Surat Masuk / Surat Keluar title refinement + remove remaining yellow from Profile.
   ============================================================ */

/* 1) Softer, more professional page-title hierarchy for Incoming/Outgoing workspaces. */
body:not(.cg-public-page) .cg-record-screen > .cg-head h1,
body:not(.cg-public-page) .cg-screen > .cg-head:has(+ .cg-workspace) h1 {
  font-size: clamp(16px, 1.7vw, 16px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
  text-wrap: balance !important;
  overflow-wrap: anywhere !important;
}

body:not(.cg-public-page) .cg-record-screen > .cg-head p,
body:not(.cg-public-page) .cg-screen > .cg-head:has(+ .cg-workspace) p {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

/* Detail page titles need to be calmer because subject lines can be very long. */
body:not(.cg-public-page) .cg-screen > .cg-head:has(+ .cg-workspace) h1 {
  max-width: 1120px !important;
}

/* 2) Remove remaining yellow theme from Profile page. */
body:not(.cg-public-page) .cg-profile-hero-008b10i {
  border-left: 5px solid #2f8fdd !important;
  border-color: #dce5ef !important;
  background: linear-gradient(135deg, #ffffff 0%, #f4f8fc 55%, #eef4fa 100%) !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.06) !important;
}

body:not(.cg-public-page) .cg-profile-hero-008b10i .cg-badge {
  background: #e7f1fb !important;
  color: #27598d !important;
  border: 1px solid #d1e2f2 !important;
}

body:not(.cg-public-page) .cg-profile-avatar-008b10i,
body:not(.cg-public-page) .cg-profile-photo-preview-008b10i {
  background: linear-gradient(135deg, #0b192c, #1e3352) !important;
  color: #f8fafc !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.14) !important;
}

body:not(.cg-public-page) .cg-profile-hero-text-008b10i h1 {
  color: #081f45 !important;
}

body:not(.cg-public-page) .cg-profile-hero-text-008b10i p {
  color: #475569 !important;
  font-weight: 750 !important;
}

body:not(.cg-public-page) .cg-profile-note-008b10i {
  background: #f8fbff !important;
  border: 1px solid #d9e5f2 !important;
  color: #475569 !important;
}

/* 3) Mobile refinement for professionalism and comfort. */
@media (max-width: 720px) {
  body:not(.cg-public-page) .cg-record-screen > .cg-head h1,
  body:not(.cg-public-page) .cg-screen > .cg-head:has(+ .cg-workspace) h1 {
    font-size: 15px !important;
    line-height: 1.28 !important;
    letter-spacing: -0.01em !important;
    font-weight: 600 !important;
  }

  body:not(.cg-public-page) .cg-record-screen > .cg-head p,
  body:not(.cg-public-page) .cg-screen > .cg-head:has(+ .cg-workspace) p {
    font-size: 11.25px !important;
    line-height: 1.5 !important;
  }

  body:not(.cg-public-page) .cg-profile-hero-008b10i {
    gap: 14px !important;
    padding: 20px !important;
  }

  body:not(.cg-public-page) .cg-profile-hero-text-008b10i h1 {
    font-size: 22px !important;
  }
}

/* CG-UI-016D END */

/* CG-UI-018C — PJ operational activity feed */
.cg-pj-activity-list{display:grid;gap:8px;max-height:360px;overflow:auto;padding-right:3px}
.cg-pj-activity-row{width:100%;display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--cg-border,#dbe3ec);border-left-width:4px;border-radius:10px;background:#fff;padding:10px 12px;text-align:left;cursor:pointer}
.cg-pj-activity-row strong{font-size:13px;font-weight:600;line-height:1.4;min-width:0}
.cg-pj-activity-row small{font-size:12px;font-weight:600;white-space:nowrap;color:#526174}
.cg-pj-activity-status{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:4px 7px;text-align:center}
.cg-pj-activity-row.is-yellow{border-left-color:#d8a400}.cg-pj-activity-row.is-yellow .cg-pj-activity-status{background:#fff4c2;color:#745900}
.cg-pj-activity-row.is-red{border-left-color:#d64545}.cg-pj-activity-row.is-red .cg-pj-activity-status{background:#fde7e7;color:#9b2525}
.cg-pj-activity-row.is-blue{border-left-color:#3978c5}.cg-pj-activity-row.is-blue .cg-pj-activity-status{background:#e8f1fc;color:#245c9d}
.cg-pj-activity-row.is-green{border-left-color:#32905c}.cg-pj-activity-row.is-green .cg-pj-activity-status{background:#e5f5eb;color:#236c45}
@media(max-width:720px){.cg-pj-activity-list{max-height:320px}.cg-pj-activity-row{grid-template-columns:auto 1fr;padding:9px 10px;gap:7px}.cg-pj-activity-row strong{font-size:12px}.cg-pj-activity-row small{grid-column:2;font-size:11px;white-space:normal}.cg-pj-activity-status{font-size:9px}}


/* CG-UI-018G — ADMIN_VIEWER compact 4-up KPI + operational activity */
body.cg-route-app .cg-admin-viewer-clean-grid { align-items:start; }
body.cg-route-app .cg-dashboard-lite:has(.cg-admin-viewer-clean-grid) .cg-kpi-grid-compact {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
}
body.cg-route-app .cg-dashboard-lite:has(.cg-admin-viewer-clean-grid) .cg-kpi-grid-compact .cg-kpi {
  min-height:108px !important;
  padding:16px 18px !important;
}
.cg-admin-op-activity-list{display:grid;gap:8px}
.cg-admin-op-activity-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:11px 14px;border:1px solid #d5e0eb;border-left:5px solid #2f86d2;border-radius:12px;background:#fff;text-align:left}
.cg-admin-op-activity-row strong{font-size:.78rem;line-height:1.45;color:#172033;font-weight:600}
.cg-admin-op-activity-row small{font-size:.72rem;color:#5f7085;white-space:nowrap}
.cg-admin-op-status{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 10px;border-radius:999px;font-size:.65rem;font-weight:700;text-align:center}
.cg-admin-op-activity-row.is-yellow{border-left-color:#e7b900}.cg-admin-op-activity-row.is-yellow .cg-admin-op-status{background:#fff2b9;color:#7b6200}
.cg-admin-op-activity-row.is-green{border-left-color:#28a66a}.cg-admin-op-activity-row.is-green .cg-admin-op-status{background:#e1f5e9;color:#17683f}
.cg-admin-op-activity-row.is-blue{border-left-color:#3186d5}.cg-admin-op-activity-row.is-blue .cg-admin-op-status{background:#e5f0fc;color:#205f9c}
.cg-admin-op-activity-row.is-orange{border-left-color:#e58a25}.cg-admin-op-activity-row.is-orange .cg-admin-op-status{background:#fff0df;color:#995414}
@media(max-width:760px){
  body.cg-route-app .cg-dashboard-lite:has(.cg-admin-viewer-clean-grid) .cg-kpi-grid-compact{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body.cg-route-app .cg-dashboard-lite:has(.cg-admin-viewer-clean-grid) .cg-kpi-grid-compact .cg-kpi{
    min-height:90px !important;padding:11px 10px !important;
  }
  .cg-admin-op-activity-row{grid-template-columns:1fr;gap:5px;padding:10px}
  .cg-admin-op-activity-row small{white-space:normal}
  .cg-admin-op-status{justify-self:start}
}
@media(max-width:480px){
  body.cg-route-app .cg-dashboard-lite:has(.cg-admin-viewer-clean-grid) .cg-kpi-grid-compact{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* CG-UI-018H1 — Unified compact dashboard metric layout FIX
   Fixes malformed escaped-newline CSS from 018H.
   Desktop: 4-up for 4+ cards; exactly 3 cards remain 3-up.
   Mobile: 2-up. */
@media (min-width: 981px) {
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid,
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid-compact,
  body.cg-route-app .cg-de-summary-grid,
  body.cg-route-app .cg-ee-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid:has(> :nth-child(3):last-child),
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid-compact:has(> :nth-child(3):last-child),
  body.cg-route-app .cg-de-summary-grid:has(> :nth-child(3):last-child),
  body.cg-route-app .cg-ee-summary-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

body.cg-route-app .cg-dashboard-lite .cg-kpi-grid .cg-kpi,
body.cg-route-app .cg-dashboard-lite .cg-kpi-grid-compact .cg-kpi,
body.cg-route-app .cg-de-summary-card,
body.cg-route-app .cg-ee-summary-card {
  min-height: 104px !important;
  padding: 14px 16px !important;
}

@media (max-width: 720px) {
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid,
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid-compact,
  body.cg-route-app .cg-de-summary-grid,
  body.cg-route-app .cg-ee-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid .cg-kpi,
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid-compact .cg-kpi,
  body.cg-route-app .cg-de-summary-card,
  body.cg-route-app .cg-ee-summary-card {
    min-height: 88px !important;
    padding: 10px !important;
  }
}
/* CG-UI-018H1 END */

/* CG-UI-018H2 — Desktop 4-up metrics + smartphone shell correction
   Desktop: 4 columns for 4+ cards; exact 3 remains 3.
   Smartphone: sidebar removed; metric cards intentionally remain 3-up (PASS). */
@media (min-width: 721px) {
  body.cg-route-app .cg-dashboard-lite .cg-unified-metric-grid,
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid,
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  body.cg-route-app .cg-dashboard-lite .cg-unified-metric-grid:has(> :nth-child(3):last-child),
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid:has(> :nth-child(3):last-child),
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid-compact:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.cg-route-app .cg-dashboard-lite .cg-unified-metric,
  body.cg-route-app .cg-dashboard-lite .cg-kpi {
    min-height: 104px !important;
    padding: 14px 16px !important;
  }
}

@media (max-width: 720px) {
  html body.cg-route-app .cg-sidebar,
  html body.cg-route-app #cgSidebar,
  html body:not(.cg-public-page) .cg-sidebar,
  html body:not(.cg-public-page) #cgSidebar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    transform: translateX(-110%) !important;
  }
  html body.cg-route-app #cgMain,
  html body.cg-route-app .cg-main,
  html body:not(.cg-public-page) #cgMain,
  html body:not(.cg-public-page) .cg-main {
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  body.cg-route-app .cg-dashboard-lite .cg-unified-metric-grid,
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid,
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid-compact,
  body.cg-route-app .cg-dashboard-lite .cg-de-summary-grid,
  body.cg-route-app .cg-dashboard-lite .cg-ee-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}
/* CG-UI-018H2 END */

/* ============================================================
   CASEGO — Mobile Login Vertical Center Fix
   UI ONLY — no functional changes
   ============================================================ */

@media (max-width: 520px) {

  .cg-login-official {
    min-height: 100dvh !important;

    display: grid !important;
    place-items: center !important;

    padding:
      calc(14px + env(safe-area-inset-top))
      24px
      calc(14px + env(safe-area-inset-bottom)) !important;

    box-sizing: border-box !important;
  }

  .cg-login-official-card {
    width: min(400px, 100%) !important;
    margin: 0 auto !important;
  }
}
/* CG-SEC-001 — subtle self-service profile controls */
.cg-profile-avatar-wrap-sec001{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto}
.cg-profile-avatar-008b10i img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.cg-profile-subtle-action{appearance:none;border:1px solid #d7e0ec;background:#f8fafc;color:#52647b;border-radius:999px;padding:6px 11px;font:inherit;font-size:12px;font-weight:600;line-height:1;cursor:pointer;box-shadow:none}
.cg-profile-subtle-action:hover{background:#eef4fa;color:#17345c}
.cg-profile-subtle-action:disabled{opacity:.6;cursor:wait}
.cg-profile-security-actions-sec001{display:flex;justify-content:flex-end;margin-top:12px}
@media(max-width:640px){.cg-profile-subtle-action{font-size:11px;padding:6px 9px}.cg-profile-security-actions-sec001{justify-content:flex-start}}

/* CG-SEC-002 — Pentadbiran/Admin Viewer dashboard */
.cg-admin-info-list{display:grid;gap:8px}.cg-admin-info-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid #d7e2ee;border-radius:12px;padding:11px 12px;background:#fff}.cg-admin-info-row.is-unread{background:#fffbea;border-left:5px solid #e7b900}.cg-admin-info-row.is-read{opacity:.88}.cg-admin-info-copy{min-width:0}.cg-admin-info-copy strong{display:block;font-size:.78rem;line-height:1.4;color:#172033}.cg-admin-info-copy small{display:block;margin-top:4px;font-size:.71rem;color:#64748b}.cg-admin-info-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap}.cg-admin-info-received{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border-radius:999px;background:#e8f5ee;color:#24724b;font-size:.68rem;font-weight:700}.cg-admin-op-activity-row.is-purple{border-left-color:#7c6fd1}.cg-admin-op-activity-row.is-purple .cg-admin-op-status{background:#efedff;color:#5648a8}
@media(max-width:720px){.cg-admin-info-row{grid-template-columns:1fr}.cg-admin-info-actions{justify-content:flex-start;white-space:normal;flex-wrap:wrap}}


/* CG-DASH-REBUILD-001 — Unified Operational Dashboard: DE / EE / PJ / Pendaftar Kedua */
body.cg-route-app .cg-operational-dashboard{background:linear-gradient(135deg,#f3f8fd 0%,#eef4fa 100%);padding:0!important;border-radius:24px;}
body.cg-route-app .cg-operational-dashboard .cg-dashboard-head-clean{background:rgba(255,255,255,.82)!important;border:1px solid rgba(207,220,234,.8)!important;border-left:4px solid #2797df!important;border-radius:18px!important;box-shadow:0 10px 28px rgba(39,71,104,.08)!important;padding:24px 28px!important;margin-bottom:18px!important;backdrop-filter:blur(10px);}
body.cg-route-app .cg-operational-dashboard .cg-dashboard-head-clean h1{font-size:25px!important;font-weight:650!important;color:#102b4d!important;letter-spacing:-.02em!important;}
body.cg-route-app .cg-operational-dashboard .cg-dashboard-head-clean p{font-size:13px!important;color:#647a94!important;margin-top:7px!important;}
body.cg-route-app .cg-operational-dashboard .cg-dashboard-head-clean .cg-btn{border:1px solid #d9e4ef!important;background:#fff!important;color:#17304f!important;border-radius:14px!important;box-shadow:0 4px 12px rgba(30,62,94,.06)!important;}
.cg-op-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 20px;}
.cg-op-kpi{position:relative;min-height:142px;padding:22px 24px 30px;border:1px solid #dce6f0;border-left:4px solid currentColor;border-radius:16px;background:#fff;text-align:left;overflow:hidden;box-shadow:0 9px 24px rgba(32,67,101,.08);cursor:pointer;color:#258fd4;transition:transform .16s ease,box-shadow .16s ease;}
.cg-op-kpi:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(32,67,101,.12);}
.cg-op-kpi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px;background:currentColor;opacity:.07;border-top:1px solid currentColor;}
.cg-op-kpi.is-green{color:#56b747}.cg-op-kpi.is-orange{color:#f69a1b}.cg-op-kpi.is-purple{color:#8951dc}
.cg-op-kpi-label{display:block;color:#4d6581;font-size:13px;font-weight:650;line-height:1.35;max-width:74%;}
.cg-op-kpi strong{display:block;color:#0b2b53;font-size:34px;font-weight:650;line-height:1;margin-top:24px;letter-spacing:-.025em;}
.cg-op-kpi-icon{position:absolute;right:24px;top:50%;transform:translateY(-38%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:currentColor;}
.cg-op-kpi-icon::before{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;opacity:.82;}
.cg-op-kpi-icon svg{position:relative;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;z-index:1;}
.cg-op-activity-panel{background:#fff;border:1px solid #dce6f0;border-radius:17px;padding:20px;box-shadow:0 10px 28px rgba(32,67,101,.08);}
.cg-op-panel-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:15px;}
.cg-op-panel-title{display:flex;align-items:center;gap:13px}.cg-op-panel-mark{font-size:32px;color:#2196df;line-height:1;transform:rotate(-8deg)}
.cg-op-panel-title h2{margin:0;color:#102b4d;font-size:17px;font-weight:650}.cg-op-panel-title p{margin:5px 0 0;color:#6d8198;font-size:12px}
.cg-op-view-all{white-space:nowrap;color:#168bd5!important;font-weight:650!important}.cg-op-view-all span{font-size:19px;margin-left:7px}
.cg-op-activity-list{display:grid;gap:4px}.cg-op-activity-row{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:52px;padding:6px 13px;border:1px solid #dbe5ef;border-radius:12px;background:#fff;text-align:left;cursor:pointer;transition:background .15s ease,transform .15s ease;}
.cg-op-activity-row:hover{background:#f9fbfd;transform:translateX(1px)}
.cg-op-activity-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:currentColor;position:relative}.cg-op-activity-icon::before{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;opacity:.82}.cg-op-activity-icon svg{position:relative;z-index:1;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cg-op-activity-copy{min-width:0}.cg-op-activity-copy strong{display:block;color:#102b4d;font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cg-op-activity-copy small{display:block;margin-top:3px;color:#6e8299;font-size:10.5px}
.cg-op-activity-badge{justify-self:end;border-radius:999px;padding:4px 10px;font-size:10px;font-weight:700;white-space:nowrap;background:currentColor;position:relative}.cg-op-activity-badge::before{content:"";position:absolute;inset:0;border-radius:999px;background:#fff;opacity:.82}.cg-op-activity-badge{isolation:isolate}.cg-op-activity-badge::before{z-index:-1}
.cg-op-activity-row.is-orange{color:#ed8a08}.cg-op-activity-row.is-blue{color:#168fd9}.cg-op-activity-row.is-green{color:#4ba83d}.cg-op-activity-row.is-purple{color:#8a4de0}.cg-op-activity-row.is-turquoise{color:#0ca9aa}.cg-op-activity-row.is-red{color:#e34b52}
.cg-op-updated{text-align:center;color:#71859b;font-size:10.5px;margin:10px 0 -4px;padding-top:2px}
@media(max-width:1100px){.cg-op-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){body.cg-route-app .cg-operational-dashboard .cg-dashboard-head-clean{padding:18px!important}.cg-op-kpi-grid{grid-template-columns:1fr;gap:10px}.cg-op-kpi{min-height:108px;padding:17px 18px 24px}.cg-op-kpi strong{font-size:28px;margin-top:15px}.cg-op-kpi-icon{width:46px;height:46px;right:18px}.cg-op-activity-panel{padding:14px}.cg-op-panel-head{align-items:flex-start}.cg-op-panel-title p{font-size:11px}.cg-op-view-all{padding:8px 10px!important;font-size:11px!important}.cg-op-activity-row{grid-template-columns:38px minmax(0,1fr);gap:9px;padding:8px 9px}.cg-op-activity-badge{grid-column:2;justify-self:start;margin-top:-2px}.cg-op-activity-copy strong{white-space:normal;font-size:11.5px}.cg-op-activity-icon{width:31px;height:31px}}


/* CG-DASH-REBUILD-002 — Unified Operational Activity workspace */
.cg-activity-workspace{display:grid;gap:18px}.cg-activity-page-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.cg-activity-page-head h1{margin:7px 0 5px}.cg-activity-back{border:0;background:transparent;padding:0;color:#168fd9;font-size:12px;font-weight:700;cursor:pointer}.cg-activity-page-panel{padding-top:16px}.cg-activity-filterbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.cg-activity-filter{border:1px solid #d9e5ef;background:#f8fbfd;color:#536d87;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:700;cursor:pointer}.cg-activity-filter:hover,.cg-activity-filter.is-active{border-color:#2297dd;background:#eaf6fd;color:#087fc6}.cg-activity-page-panel .cg-op-activity-list{gap:5px}.cg-activity-page-panel .cg-op-activity-row{min-height:56px}.cg-activity-page-panel .cg-dashboard-empty-small{padding:32px 18px;text-align:center}.cg-activity-refresh{white-space:nowrap}
@media(max-width:640px){.cg-activity-page-head{align-items:flex-start}.cg-activity-page-head .cg-activity-refresh{padding:8px 10px!important}.cg-activity-filterbar{gap:6px}.cg-activity-filter{padding:6px 9px;font-size:10px}}

/* CG-PERF-004 — Activity server pagination */
.cg-activity-result-meta{margin:0 0 10px;color:#71869a;font-size:11px;font-weight:600}
.cg-activity-pagination{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
.cg-activity-pages{display:flex;align-items:center;gap:6px}
.cg-activity-page{min-width:34px;height:34px;padding:0 9px;border:1px solid #d9e5ef;border-radius:9px;background:#fff;color:#536d87;font-size:12px;font-weight:700;cursor:pointer}
.cg-activity-page:hover,.cg-activity-page.is-active{border-color:#2297dd;background:#eaf6fd;color:#087fc6}
.cg-activity-pagination .cg-btn:disabled{opacity:.45;cursor:default;pointer-events:none}
@media(max-width:640px){.cg-activity-pagination{gap:7px}.cg-activity-pagination .cg-btn{padding:7px 9px!important;font-size:10px}.cg-activity-page{min-width:31px;height:31px;font-size:11px}}


/* CG-ACTIVITY-006 */
.cg-activity-page-head .cg-dashboard-head-clean{padding:1rem 1.25rem}


/* CASEGO-RENEWAL-001A — Activity workspace toolbar */
.cg-activity-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,320px) auto;gap:12px;align-items:center;margin-bottom:14px}
.cg-activity-toolbar .cg-input,.cg-activity-toolbar .cg-select{width:100%;min-height:42px;border:1px solid var(--cg-border,#d8e1eb);border-radius:12px;background:#fff;padding:0 12px;color:inherit}
@media (max-width:720px){.cg-activity-toolbar{grid-template-columns:1fr}.cg-activity-toolbar .cg-btn{width:100%}}

/* CASEGO-RENEWAL-001A1 — unified dashboard recent activity */
.cg-dashboard-recent-activity{margin-top:28px;}
.cg-dashboard-recent-activity .cg-lazy-content{min-height:72px;}
[data-nav-key="activity"] .cg-nav-icon::before{content:"";display:block;width:15px;height:15px;border:2px solid currentColor;border-radius:4px;box-shadow:inset 0 -4px 0 rgba(255,255,255,.12);}
[data-nav-key="activity"] .cg-nav-icon::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:currentColor;transform:translate(5px,-10px);}


/* CASEGO RENEWAL-001 MODULE 1 PART 3 — PB activation confirmation */
.cg-activation-note {
  border-left: 4px solid var(--cg-warning, #d89b00);
}
.cg-assignment-activation-summary {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  margin-top: 4px;
  border: 1px solid var(--cg-border, #dbe2ea);
  border-radius: 12px;
  background: var(--cg-surface-soft, #f8fafc);
}
.cg-assignment-activation-summary strong { font-size: 14px; }
.cg-assignment-activation-summary span { color: var(--cg-muted, #64748b); font-size: 13px; }


/* CASEGO RENEWAL-001 — MODULE 2 PART 1: PU WORKSPACE */
.cg-pu-workspace{max-width:1080px;margin:0 auto}.cg-pu-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 18px}.cg-pu-flow>div{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--muted)}.cg-pu-flow b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eef2f7;color:#334155}.cg-pu-flow .active{border-color:#f2c94c;background:#fffaf0;color:var(--text)}.cg-pu-flow .active b{background:#f2c94c;color:#111827}.cg-pu-register-card{padding:24px}.cg-pu-register-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border)}.cg-pu-register-intro h3{margin:4px 0 6px}.cg-pu-register-intro p{margin:0;color:var(--muted)}.cg-pu-auto-note{max-width:320px;padding:14px 16px;border-radius:14px;background:#f8fafc;border:1px solid var(--border)}.cg-pu-auto-note strong,.cg-pu-auto-note span{display:block}.cg-pu-auto-note span{margin-top:4px;color:var(--muted);font-size:13px}.cg-kicker{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8a6500}.cg-form-row label em{font-style:normal;color:#b91c1c}.cg-form-row label span{font-weight:500;color:var(--muted)}.cg-pu-next-step{display:grid;gap:7px;margin:18px 0;padding:16px;border-radius:14px;background:#f8fafc;text-align:left}.cg-pu-next-step b{font-size:14px}.cg-pu-next-step span{font-size:13px;color:var(--muted)}
@media(max-width:760px){.cg-pu-flow{grid-template-columns:1fr 1fr}.cg-pu-flow>div{padding:10px}.cg-pu-register-intro{display:block}.cg-pu-auto-note{max-width:none;margin-top:14px}.cg-pu-register-card{padding:16px}}

/* CASEGO RENEWAL-001 — MODULE 2 PART 2: PB WORKSPACE */
.cg-pb-workspace-form{display:grid;gap:20px}
.cg-pb-inherited{border:1px solid var(--cg-border,#dbe2ea);border-radius:18px;padding:18px;background:linear-gradient(180deg,#fff,#f8fafc)}
.cg-pb-inherited-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.cg-pb-inherited-head h4{margin:3px 0 0;font-size:18px}
.cg-pb-gate-badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#fff7ed;color:#9a3412;font-size:12px;font-weight:800;border:1px solid #fed7aa}
.cg-pb-inherited-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cg-pb-inherited-person{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid #e2e8f0}
.cg-pb-inherited-person span{font-size:12px;color:#64748b;font-weight:700}
.cg-pb-inherited-empty{padding:14px;border-radius:14px;background:#f8fafc;color:#64748b}
.cg-pb-inherited>p{margin:12px 0 0;color:#64748b;font-size:13px}
.cg-pb-section-title{display:flex;align-items:center;gap:12px;padding-top:4px}
.cg-pb-section-title>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0f172a;color:#fff;font-weight:800}
.cg-pb-section-title strong,.cg-pb-section-title small{display:block}
.cg-pb-section-title small{color:#64748b;margin-top:2px}
.cg-pb-workspace-form .cg-officer-check{transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.cg-pb-workspace-form .cg-officer-check.is-selected{border-color:#f59e0b;background:#fffbeb;box-shadow:0 0 0 2px rgba(245,158,11,.12)}
.cg-pb-live-summary{border:1px solid #cbd5e1;background:#f8fafc;border-radius:16px;padding:16px}
.cg-pb-live-summary>strong{display:block;margin-bottom:10px}
.cg-pb-live-summary-body{display:flex;flex-wrap:wrap;gap:10px}
.cg-pb-live-summary-body>span{display:flex;flex-direction:column;gap:2px;min-width:190px;padding:10px 12px;background:#fff;border:1px solid #e2e8f0;border-radius:12px}
.cg-pb-live-summary-body small{color:#64748b}
.cg-pb-activation-actions{border-top:1px solid #e2e8f0;padding-top:18px}
.cg-pb-activation-actions .cg-btn.primary{min-width:190px}
@media(max-width:720px){.cg-pb-inherited-grid{grid-template-columns:1fr}.cg-pb-inherited-head{align-items:center}.cg-pb-live-summary-body{display:grid}.cg-pb-live-summary-body>span{min-width:0}.cg-pb-activation-actions .cg-btn.primary{width:100%}}


/* CASEGO-RENEWAL-001 / MODULE 2 / PART 3 — EE Workspace */
.cg-ee-workspace-summary {display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.cg-ee-workspace-summary>div{min-width:0;padding:14px 16px;border:1px solid var(--cg-border,#e2e8f0);border-radius:14px;background:var(--cg-surface-soft,#f8fafc)}
.cg-ee-workspace-summary span,.cg-ee-workspace-summary strong{display:block}
.cg-ee-workspace-summary span{margin-bottom:4px;color:var(--cg-muted,#64748b);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cg-ee-workspace-summary strong{overflow:hidden;color:var(--cg-text,#0f172a);text-overflow:ellipsis}
.cg-ee-decision-card{position:relative}
.cg-ee-step{display:inline-flex;align-items:center;min-height:24px;margin-bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(245,158,11,.13);color:#92400e;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.cg-ee-decision-card em{color:#b91c1c;font-style:normal}
@media(max-width:820px){.cg-ee-workspace-summary{grid-template-columns:1fr}}
\n\n/* CASEGO RENEWAL-001 — Module 2 Part 4: PJ Workspace */
.cg-pj-workspace-form{display:grid;gap:16px}
.cg-pj-workspace-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;border:1px solid var(--cg-border,#dbe2ea);border-radius:14px;background:var(--cg-surface-soft,#f8fafc)}
.cg-pj-workspace-summary>div{display:grid;gap:4px;min-width:0}
.cg-pj-workspace-summary span{font-size:12px;color:var(--cg-muted,#64748b);font-weight:600}
.cg-pj-workspace-summary strong{font-size:14px;color:var(--cg-text,#172033);overflow-wrap:anywhere}
.cg-pj-action-note{border-left:4px solid var(--cg-primary,#d8a900)}
@media(max-width:720px){.cg-pj-workspace-summary{grid-template-columns:1fr}.cg-pj-workspace-form .cg-form-actions{position:sticky;bottom:calc(var(--cg-bottom-nav-height,64px) + 8px);z-index:8;padding:10px;background:rgba(255,255,255,.96);border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.12)}}


/* ============================================================
   CASEGO RENEWAL-001 RC HOTFIX 003
   Clean A4 portrait QR Tracking print: quarter-A4 slip, centred.
   ============================================================ */
.cg-print-scan-text{margin:0;text-align:center;font-weight:800;color:#111827}

body.cg-printing-slip #cgPrintSlipRoot{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:210mm!important;
  height:297mm!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
}

body.cg-printing-slip .cg-print-slip-official{
  box-sizing:border-box!important;
  display:block!important;
  width:105mm!important;
  height:148mm!important;
  min-height:148mm!important;
  max-height:148mm!important;
  margin:0!important;
  padding:7mm 8mm!important;
  overflow:hidden!important;
  background:#fff!important;
  color:#111827!important;
  border:0.35mm solid #111827!important;
  border-radius:2.5mm!important;
  box-shadow:none!important;
}

body.cg-printing-slip .cg-print-slip-head{
  display:block!important;
  margin:0 0 4mm!important;
  padding:0 0 3mm!important;
  text-align:center!important;
  border:0!important;
  border-bottom:0.35mm solid #111827!important;
}
body.cg-printing-slip .cg-print-jkr-logo-wrap{
  display:flex!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  margin:0 auto 1.5mm!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
body.cg-printing-slip .cg-print-jkr-logo{
  display:block!important;
  width:15mm!important;
  height:auto!important;
  max-height:13mm!important;
  object-fit:contain!important;
}
body.cg-printing-slip .cg-print-slip-head h1{
  margin:0!important;
  font-size:16pt!important;
  line-height:1.1!important;
  font-weight:850!important;
  color:#111827!important;
}
body.cg-printing-slip .cg-print-slip-head p{
  margin:1mm 0 0!important;
  font-size:8.5pt!important;
  line-height:1.2!important;
  color:#111827!important;
}

body.cg-printing-slip .cg-print-slip-main{display:block!important}
body.cg-printing-slip .cg-print-qr-box{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-height:0!important;
  margin:0 auto 2.5mm!important;
  padding:0!important;
  border:0!important;
  background:#fff!important;
}
body.cg-printing-slip .cg-print-qr-box img{
  display:block!important;
  width:47mm!important;
  height:47mm!important;
  max-width:47mm!important;
  max-height:47mm!important;
  margin:0 auto!important;
  object-fit:contain!important;
  opacity:1!important;
}
body.cg-printing-slip .cg-print-qr-box strong{display:none!important}
body.cg-printing-slip .cg-print-scan-text{
  margin:0 0 3mm!important;
  padding:0 0 2.5mm!important;
  border-bottom:0.35mm solid #111827!important;
  font-size:8pt!important;
  line-height:1.2!important;
  font-weight:800!important;
  text-align:center!important;
}
body.cg-printing-slip .cg-print-slip-info{
  display:block!important;
  margin:0!important;
  padding:0!important;
  font-size:7pt!important;
  line-height:1.15!important;
}
body.cg-printing-slip .cg-print-slip-info p{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)!important;
  align-items:center!important;
  gap:3mm!important;
  min-height:8.5mm!important;
  margin:0!important;
  padding:1.5mm 1mm!important;
  border:0!important;
  border-bottom:0.2mm solid #cbd5e1!important;
}
body.cg-printing-slip .cg-print-slip-info p:last-child{
  border-bottom:0.35mm solid #111827!important;
}
body.cg-printing-slip .cg-print-slip-info small{
  display:block!important;
  font-size:6.5pt!important;
  line-height:1.15!important;
  font-weight:500!important;
  color:#111827!important;
}
body.cg-printing-slip .cg-print-slip-info strong{
  display:block!important;
  font-size:7.5pt!important;
  line-height:1.15!important;
  font-weight:800!important;
  text-align:right!important;
  overflow-wrap:anywhere!important;
  color:#111827!important;
}
body.cg-printing-slip .cg-print-slip-info span,
body.cg-printing-slip .cg-print-slip-note{display:none!important}

@media print{
  @page{size:A4 portrait;margin:0}
  html,body{
    width:210mm!important;
    height:297mm!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  body.cg-printing-slip #cgPrintSlipRoot{
    position:fixed!important;
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:210mm!important;
    height:297mm!important;
  }
  body.cg-printing-slip .cg-print-slip-official{
    width:105mm!important;
    height:148mm!important;
    min-height:148mm!important;
    max-height:148mm!important;
    page-break-after:avoid!important;
    break-after:avoid!important;
  }
}


/* CASEGO-RENEWAL-002 MODULE 4 PART 1
   Unified dashboard header and resilient recent-activity state. */
.cg-dashboard-unified-head{align-items:flex-start!important;gap:16px!important}
.cg-dashboard-title-group{min-width:0;display:grid;gap:4px}
.cg-dashboard-role-chip{display:inline-flex;justify-self:start;align-items:center;min-height:24px;padding:4px 9px;border:1px solid rgba(245,158,11,.32);border-radius:999px;background:#fff8df;color:#765400;font-size:10px;font-weight:800;letter-spacing:.045em;line-height:1;text-transform:uppercase}
.cg-dashboard-unified-head h1{margin-top:2px!important}
.cg-dashboard-refresh{white-space:nowrap}
.cg-dashboard-activity-error{display:grid;justify-items:center;gap:7px;padding:22px 16px;text-align:center;border:1px dashed #cbd8e5;border-radius:12px;background:#f8fbfd;color:#536d87}
.cg-dashboard-activity-error strong{color:#26384c;font-size:13px}
.cg-dashboard-activity-error span{font-size:11px}
.cg-dashboard-activity-error .cg-btn{margin-top:3px}
.cg-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.cg-operational-dashboard button:focus-visible,.cg-dashboard-lite button:focus-visible{outline:3px solid rgba(22,143,217,.3)!important;outline-offset:2px!important}
@media(max-width:640px){.cg-dashboard-unified-head{align-items:flex-start!important}.cg-dashboard-unified-head .cg-head-actions{width:auto!important}.cg-dashboard-role-chip{font-size:9px}.cg-dashboard-refresh{padding:8px 10px!important;font-size:11px!important}}

/* CASEGO-RENEWAL-002 M4-P2: Aktiviti Terkini controls */
.cg-op-activity-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cg-dashboard-activity-refresh[aria-busy="true"]{opacity:.65;cursor:wait}
.cg-dashboard-activity-refresh:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:640px){.cg-op-activity-actions{width:100%;justify-content:stretch}.cg-op-activity-actions .cg-btn{flex:1;min-width:0}}

/* CASEGO-RENEWAL-002 / MODULE 4 PART 3
   Activity interaction, route safety and accessibility hardening. */
.cg-op-activity-row.is-static{
  cursor:default;
  transform:none!important;
}
.cg-op-activity-row.is-static:hover{background:#fff}
.cg-op-activity-row.is-static .cg-op-activity-copy strong{color:var(--cg-text,#172033)}
.cg-op-activity-row.is-clickable:focus-visible,
.cg-activity-page:focus-visible,
.cg-activity-back:focus-visible{
  outline:3px solid rgba(22,143,217,.24);
  outline-offset:2px;
}
.cg-op-activity-row.is-clickable:active{transform:translateX(1px) scale(.998)}
.cg-activity-result-meta[role="status"]{min-height:20px}
@media (prefers-reduced-motion:reduce){
  .cg-op-activity-row{transition:none!important}
  .cg-op-activity-row:hover,.cg-op-activity-row:active{transform:none!important}
}


/* CG-RNW-004-M1P1 — self-service profile contact */
.cg-profile-contact-form-rnw004{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cg-profile-contact-form-rnw004 label{display:flex;flex-direction:column;gap:7px;color:#334155;font-size:13px;font-weight:700}
.cg-profile-contact-form-rnw004 label:first-child{grid-column:1/-1}
.cg-profile-contact-form-rnw004 input{width:100%;min-height:44px;border:1px solid #d7e0ec;border-radius:10px;background:#fff;padding:10px 12px;font:inherit;color:#0f172a}
.cg-profile-contact-form-rnw004 input[readonly]{background:#f8fafc;color:#64748b}
.cg-profile-contact-form-rnw004 input:focus{outline:3px solid rgba(37,99,235,.14);border-color:#2563eb}
.cg-profile-contact-form-rnw004 small{font-weight:400;color:#64748b;line-height:1.45}
.cg-profile-contact-actions-rnw004{grid-column:1/-1;display:flex;justify-content:flex-end}
@media(max-width:640px){.cg-profile-contact-form-rnw004{grid-template-columns:1fr}.cg-profile-contact-form-rnw004 label:first-child,.cg-profile-contact-actions-rnw004{grid-column:auto}.cg-profile-contact-actions-rnw004 .cg-btn{width:100%}}


/* CASEGO-UAT-HOTFIX-001 — non-destructive submit overlay */
.cg-busy-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(226,232,240,.72);backdrop-filter:blur(2px)}
.cg-busy-overlay.is-visible{display:flex}
.cg-busy-card{min-width:220px;padding:22px 28px;border-radius:16px;background:#fff;box-shadow:0 18px 48px rgba(15,23,42,.18);text-align:center;color:#172033}
.cg-busy-card .cg-spinner{margin:0 auto 12px}
.cg-busy-card p{margin:0;font-weight:600}
.cg-help-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cg-help-flow span{padding:10px 14px;border:1px solid #dbe5f1;border-radius:999px;background:#f8fafc;font-weight:700;color:#1e3a8a}
.cg-help-flow b{color:#64748b}
@media(max-width:760px){.cg-help-flow{align-items:stretch;flex-direction:column}.cg-help-flow b{transform:rotate(90deg);align-self:center}}

/* CASEGO-HOTFIX-001E — Administrator Makluman acknowledgement dialog */
.cg-admin-ack-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px}
.cg-admin-ack-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.46);backdrop-filter:blur(3px)}
.cg-admin-ack-dialog{position:relative;z-index:1;width:min(520px,100%);background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.24);padding:24px}
.cg-admin-ack-dialog h3{margin:4px 0 8px;font-size:1.2rem}.cg-admin-ack-dialog p{margin:0 0 18px;color:var(--cg-muted,#64748b);line-height:1.5}
.cg-admin-ack-dialog label{display:block;font-weight:700;margin-bottom:7px}.cg-admin-ack-dialog label small{font-weight:500;color:var(--cg-muted,#64748b)}
.cg-admin-ack-dialog textarea{width:100%;resize:vertical;min-height:105px;border:1px solid #cbd5e1;border-radius:12px;padding:12px 13px;font:inherit;line-height:1.45;background:#fff;color:inherit}
.cg-admin-ack-dialog textarea:focus{outline:2px solid rgba(245,158,11,.22);border-color:#d49a11}
.cg-admin-ack-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.cg-admin-ack-close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:25px;line-height:1;color:#64748b;cursor:pointer;padding:4px 8px}
@media(max-width:600px){.cg-admin-ack-modal{align-items:end;padding:10px}.cg-admin-ack-dialog{border-radius:18px 18px 12px 12px;padding:20px 16px}.cg-admin-ack-actions{display:grid;grid-template-columns:1fr 1fr}.cg-admin-ack-actions .cg-btn{width:100%}}



/* CASEGO-PERF-001C — Sudut Pengumuman replaces dashboard auto-loaded Activity. */
.cg-announcement-panel{margin-top:18px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:18px;box-shadow:0 6px 20px rgba(15,23,42,.04)}
.cg-announcement-list{display:grid;gap:10px;margin-top:14px}
.cg-announcement-item{border:1px solid #e2e8f0;border-left:4px solid #64748b;border-radius:12px;padding:13px 14px;background:#fbfdff}
.cg-announcement-item.is-penting{border-left-color:#d97706;background:#fffaf2}
.cg-announcement-item.is-segera{border-left-color:#dc2626;background:#fff7f7}
.cg-announcement-meta,.cg-announcement-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cg-announcement-meta span{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#475569}
.cg-announcement-meta time,.cg-announcement-foot small{font-size:11px;color:#64748b}
.cg-announcement-item h3{font-size:14px;margin:7px 0 5px;color:#172033}
.cg-announcement-item p{font-size:13px;line-height:1.55;margin:0 0 9px;color:#425466;white-space:pre-wrap}
.cg-announcement-empty{padding:22px 14px;text-align:center;border:1px dashed #cbd5e1;border-radius:12px;color:#64748b;background:#f8fafc;font-size:13px}
@media(max-width:680px){.cg-announcement-panel{padding:14px}.cg-announcement-meta,.cg-announcement-foot{align-items:flex-start;flex-direction:column}.cg-announcement-foot .cg-btn{width:100%}}

/* DEV-CG-DASH-001 — Welcome Hero. Frontend-only; no weather/AI/API dependency. */
.cg-welcome-hero{--cg-welcome-a:#2f80ed;--cg-welcome-b:#56ccf2;--cg-welcome-c:#f6fbff;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:18px;margin:0 0 18px;padding:24px 25px;border:1px solid rgba(167,201,231,.68);border-radius:22px;background:
  radial-gradient(circle at 8% 14%,rgba(255,255,255,.96) 0 7%,transparent 28%),
  radial-gradient(circle at 82% 6%,rgba(255,231,154,.42),transparent 25%),
  linear-gradient(125deg,var(--cg-welcome-c) 0%,#eef8ff 48%,#fff9e9 100%);
box-shadow:0 15px 36px rgba(30,70,108,.11);overflow:hidden;position:relative;isolation:isolate}
.cg-welcome-hero::before{content:"";position:absolute;inset:auto auto -92px -58px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--cg-welcome-b),transparent 68%);opacity:.13;pointer-events:none;z-index:-1}
.cg-welcome-hero::after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-105px;top:-135px;background:radial-gradient(circle,var(--cg-welcome-a),transparent 68%);opacity:.16;pointer-events:none;z-index:-1}
.cg-welcome-hero.is-morning{--cg-welcome-a:#f6a623;--cg-welcome-b:#ffd166;--cg-welcome-c:#fffaf0}
.cg-welcome-hero.is-afternoon{--cg-welcome-a:#2997df;--cg-welcome-b:#6ed5ff;--cg-welcome-c:#f3fbff}
.cg-welcome-hero.is-evening{--cg-welcome-a:#6c63d9;--cg-welcome-b:#a78bfa;--cg-welcome-c:#f8f6ff}
.cg-welcome-main{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:4px 6px;position:relative;z-index:1}
.cg-welcome-kicker{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:6px 10px;border-radius:999px;font-size:10.5px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:#126fa8;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 5px 14px rgba(38,86,124,.07);margin-bottom:12px}
.cg-welcome-hero.is-morning .cg-welcome-kicker{color:#9b6400}
.cg-welcome-hero.is-evening .cg-welcome-kicker{color:#5c4fc5}
.cg-welcome-main h2{margin:0;color:#102b4d;font-size:27px;font-weight:720;letter-spacing:-.035em;line-height:1.16;text-wrap:balance}
.cg-welcome-main>p{margin:8px 0 16px;color:#5b7188;font-size:13.5px;line-height:1.55;max-width:580px}
.cg-welcome-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;color:#48627c;font-size:12px;font-weight:650}
.cg-welcome-meta span{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(199,219,235,.78);box-shadow:0 4px 10px rgba(42,78,110,.04)}
.cg-welcome-meta b{font-weight:750;color:#284a6a}
.cg-welcome-insights{display:grid;gap:11px;align-content:center;position:relative;z-index:1}
.cg-welcome-note{position:relative;border:1px solid rgba(183,203,233,.86);border-radius:16px;padding:14px 15px 14px 16px;background:linear-gradient(135deg,rgba(246,244,255,.96),rgba(235,244,255,.92));box-shadow:0 9px 22px rgba(46,71,111,.07);overflow:hidden}
.cg-welcome-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#7766e8,#3fa7f3)}
.cg-welcome-note.is-light{border-color:rgba(243,197,104,.72);background:linear-gradient(135deg,rgba(255,251,235,.97),rgba(255,241,218,.93))}
.cg-welcome-note.is-light::before{background:linear-gradient(180deg,#f4b73a,#ff8e4f)}
.cg-welcome-note span{display:flex;align-items:center;gap:5px;color:#687b91;font-size:10.5px;font-weight:850;letter-spacing:.045em;text-transform:uppercase;margin-bottom:6px}
.cg-welcome-note strong{display:block;color:#263f5b;font-size:12.8px;font-weight:620;line-height:1.55}
.cg-welcome-note.is-light strong{color:#5d4525}
@media(max-width:900px){.cg-welcome-hero{grid-template-columns:1fr;padding:21px}.cg-welcome-insights{grid-template-columns:1fr 1fr}.cg-welcome-main{padding-bottom:2px}}
@media(max-width:640px){.cg-welcome-hero{padding:18px 16px;gap:14px;border-radius:18px}.cg-welcome-main h2{font-size:22px}.cg-welcome-main>p{font-size:12.8px;margin-bottom:13px}.cg-welcome-meta{gap:7px}.cg-welcome-meta span{padding:6px 9px}.cg-welcome-insights{grid-template-columns:1fr}.cg-welcome-note{padding:12px 13px 12px 14px}.cg-welcome-note strong{font-size:12.2px}}

/* DEV-CG-DASH-001B — Light dashboard refinement. Frontend-only. */
.cg-welcome-hero{
  box-shadow:0 18px 42px rgba(30,70,108,.12), inset 0 1px 0 rgba(255,255,255,.72);
}
.cg-welcome-hero .cg-welcome-main::after{
  content:"";
  position:absolute;
  left:6px;
  bottom:-8px;
  width:88px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cg-welcome-a),var(--cg-welcome-b));
  opacity:.55;
  pointer-events:none;
}
.cg-welcome-note{
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
@media (hover:hover) and (pointer:fine){
  .cg-welcome-note:hover{
    transform:translateY(-1px);
    box-shadow:0 11px 24px rgba(46,71,111,.09);
  }
}
@media(max-width:640px){
  .cg-welcome-hero .cg-welcome-main::after{display:none}
  body.cg-route-app .cg-dashboard-lite,
  body.cg-route-app .cg-operational-dashboard{
    padding-bottom:20px;
  }
}


/* DEV-CG-ANALYTICS-001 — dedicated KPI workspace; Welcome Hero is frozen. */
.cg-analytics-screen .cg-panel{overflow:hidden;}
.cg-analytics-grid{margin-top:4px;}
.cg-analytics-metric{min-height:118px;text-align:left;align-items:flex-start;justify-content:center;gap:5px;}
.cg-analytics-metric span{font-weight:700;}
.cg-analytics-metric strong{font-size:30px;line-height:1;color:#0d2d57;}
.cg-analytics-metric small{display:block;color:#63768d;font-size:12px;font-weight:600;}
.cg-analytics-metric.is-blue{border-left:4px solid #2d9cdb;background:linear-gradient(145deg,#fff,#eef8ff);}
.cg-analytics-metric.is-green{border-left:4px solid #56b870;background:linear-gradient(145deg,#fff,#f0fbf1);}
.cg-analytics-metric.is-orange{border-left:4px solid #f4a024;background:linear-gradient(145deg,#fff,#fff7e8);}
.cg-analytics-metric.is-purple{border-left:4px solid #8a64d6;background:linear-gradient(145deg,#fff,#f7f2ff);}
.cg-analytics-updated{margin:14px 2px 0;color:#7b8ca0;font-size:12px;}
@media(max-width:720px){.cg-analytics-metric{min-height:100px}.cg-analytics-metric strong{font-size:27px}.cg-analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media(max-width:430px){.cg-analytics-grid{grid-template-columns:1fr}.cg-analytics-metric{min-height:92px}}


/* DEV-CG-ANALYTICS-001A — semantic KPI, receipt evidence, officer KPI V1 */
.cg-analytics-metric{cursor:default;}
.cg-analytics-metric:hover{transform:none;box-shadow:var(--cg-shadow-sm,0 4px 14px rgba(15,23,42,.06));}
.cg-analytics-shortcut{display:flex;justify-content:flex-end;margin-top:14px;}
.cg-inline-search{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;align-items:center;margin-bottom:12px;}
.cg-inline-search input{min-width:0;}
.cg-receipt-evidence-table td,.cg-receipt-evidence-table th{white-space:nowrap;}
.cg-receipt-evidence-table td:nth-child(4),.cg-receipt-evidence-table td:nth-child(5){white-space:normal;min-width:150px;}
.cg-officer-kpi-v1-head{display:flex;align-items:baseline;gap:10px;margin:18px 0 10px;}
.cg-officer-kpi-v1-head strong{font-size:18px;color:#0d2d57;}
.cg-officer-kpi-v1-head span{font-size:12px;color:#6b7d91;}
.cg-officer-kpi-v1-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:720px){.cg-inline-search{grid-template-columns:1fr 1fr}.cg-inline-search input{grid-column:1/-1}.cg-officer-kpi-v1-grid{grid-template-columns:1fr}.cg-receipt-evidence-table td,.cg-receipt-evidence-table th{white-space:normal}}


/* DEV-CG-DASH-002 — PREMIUM HOME EXPERIENCE
   Frontend-only visual shell. No KPI/API/weather dependency. */
body.cg-route-app #cgHeader{
  grid-template-columns:minmax(320px,680px) minmax(18px,1fr) auto auto auto!important;
}
.cg-header-clock{
  grid-column:3!important;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  min-width:176px;padding:0 18px 0 8px;border-right:1px solid rgba(203,213,225,.75);line-height:1.08;
}
.cg-header-clock strong{font-size:18px;font-weight:780;color:#101c2e;letter-spacing:-.025em}
.cg-header-clock span{margin-top:4px;font-size:10.5px;font-weight:620;color:#65758a;text-transform:capitalize;white-space:nowrap}
body.cg-route-app #cgHeader .cg-user{grid-column:4!important}
body.cg-route-app #cgHeaderLogout{grid-column:5!important}

.cg-premium-home{display:grid;gap:18px;margin-bottom:20px}
.cg-premium-welcome{
  --premium-a:#9bb9e6;--premium-b:#ffd58c;position:relative;isolation:isolate;overflow:hidden;
  min-height:208px;padding:30px 34px;border-radius:28px;border:1px solid rgba(255,255,255,.78);
  background:
    linear-gradient(112deg,rgba(255,255,255,.85) 0%,rgba(244,249,255,.78) 43%,rgba(255,244,220,.78) 100%),
    radial-gradient(circle at 16% 50%,rgba(168,196,235,.52),transparent 35%),
    radial-gradient(circle at 92% 88%,rgba(255,194,96,.48),transparent 34%);
  box-shadow:0 24px 58px rgba(46,67,94,.15), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);
}
.cg-premium-welcome.is-morning{--premium-a:#9fc4ea;--premium-b:#ffd477}
.cg-premium-welcome.is-afternoon{--premium-a:#91bce8;--premium-b:#ffcc74}
.cg-premium-welcome.is-evening{--premium-a:#b2a6e8;--premium-b:#ffbd7f}
.cg-premium-welcome::before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.56;background-image:
  linear-gradient(35deg,transparent 64%,rgba(79,107,142,.13) 64.5%,transparent 65.2%),
  linear-gradient(145deg,transparent 72%,rgba(79,107,142,.10) 72.5%,transparent 73.2%);
  background-size:150px 110px,190px 140px;background-position:100% 0,86% 20%;
}
.cg-premium-welcome-glow{position:absolute;z-index:-1;right:-30px;bottom:-88px;width:420px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,190,74,.42),rgba(255,215,143,.20) 46%,transparent 70%);filter:blur(7px)}
.cg-premium-welcome-copy{max-width:760px;position:relative;z-index:2}
.cg-premium-role-chip{display:inline-flex;padding:6px 11px;margin-right:8px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid rgba(223,181,77,.58);color:#765814;font-size:10px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;box-shadow:0 8px 18px rgba(90,73,34,.05)}
.cg-premium-kicker{display:inline-flex;color:#2973a7;font-size:10px;font-weight:820;letter-spacing:.055em;text-transform:uppercase}
.cg-premium-welcome h2{margin:20px 0 4px;color:#101a31;font-size:39px;font-weight:760;line-height:1.05;letter-spacing:-.042em}
.cg-premium-welcome p{margin:0 0 22px;color:#44586f;font-size:15px;line-height:1.55;max-width:690px}
.cg-premium-meta{display:flex;gap:10px;flex-wrap:wrap}
.cg-premium-meta span{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.68);border:1px solid rgba(205,219,235,.72);box-shadow:0 8px 18px rgba(53,74,99,.05);font-size:11.5px;font-weight:650;color:#49627a}
.cg-premium-meta b{font-weight:760;color:#274760}
.cg-premium-orbit{position:absolute;right:44px;top:36px;width:210px;height:150px;opacity:.26;transform:rotate(-8deg)}
.cg-premium-orbit span{position:absolute;border:1px solid rgba(74,105,143,.42);transform:rotate(32deg)}
.cg-premium-orbit span:nth-child(1){width:90px;height:90px;right:12px;top:7px}
.cg-premium-orbit span:nth-child(2){width:70px;height:120px;right:52px;top:14px}
.cg-premium-orbit span:nth-child(3){width:130px;height:62px;right:22px;top:44px}
.cg-premium-orbit span:nth-child(4){width:58px;height:58px;right:118px;top:64px}

.cg-premium-insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cg-premium-insight{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 140px;align-items:center;min-height:178px;padding:24px 26px;border-radius:25px;border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 42px rgba(53,70,93,.11);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%)}
.cg-premium-insight.is-mind{background:linear-gradient(130deg,rgba(255,255,255,.91),rgba(238,244,255,.78)),radial-gradient(circle at 85% 50%,rgba(213,171,201,.34),transparent 42%)}
.cg-premium-insight.is-smile{background:linear-gradient(130deg,rgba(255,255,255,.91),rgba(255,246,225,.80)),radial-gradient(circle at 87% 50%,rgba(255,205,90,.34),transparent 44%)}
.cg-premium-insight::after{content:"";position:absolute;inset:auto -35px -70px auto;width:200px;height:160px;border-radius:50%;filter:blur(16px);opacity:.32;background:var(--cg-premium-orb,#b7d4f2)}
.cg-premium-insight.is-mind{--cg-premium-orb:#d8b5d8}.cg-premium-insight.is-smile{--cg-premium-orb:#ffd584}
.cg-premium-insight-copy{position:relative;z-index:2;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start}
.cg-premium-insight-copy span{display:block;color:#131c2b;font-size:22px;font-weight:760;letter-spacing:-.025em;margin-bottom:18px}
.cg-premium-insight-copy strong{display:block;max-width:520px;color:#26384d;font-size:15px;font-weight:620;line-height:1.55}
.cg-premium-illustration{position:relative;z-index:2;justify-self:center;font-size:72px;filter:drop-shadow(0 15px 18px rgba(42,55,73,.14));transform:translateY(3px)}

.cg-announcement-panel{border:1px solid rgba(95,148,188,.48)!important;background:linear-gradient(135deg,rgba(247,251,255,.84),rgba(237,246,255,.74))!important;box-shadow:0 20px 48px rgba(47,69,94,.10)!important;backdrop-filter:blur(18px) saturate(128%);-webkit-backdrop-filter:blur(18px) saturate(128%)}
.cg-announcement-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important;align-items:start}
.cg-announcement-item{min-height:138px!important;border-radius:18px!important;background:rgba(255,255,255,.82)!important;box-shadow:0 10px 24px rgba(53,75,99,.075)!important;border:1px solid rgba(214,225,237,.88)!important}
.cg-announcement-empty{grid-column:1/-1!important}

@media(max-width:1080px){
  .cg-header-clock{min-width:150px;padding-right:12px}.cg-header-clock strong{font-size:16px}.cg-header-clock span{font-size:9.5px}
  .cg-premium-welcome h2{font-size:34px}.cg-premium-insight{grid-template-columns:1fr 110px}.cg-premium-illustration{font-size:60px}
  .cg-announcement-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .cg-header-clock{display:none!important}
  .cg-premium-home{gap:14px}.cg-premium-welcome{min-height:auto;padding:22px 18px;border-radius:22px}.cg-premium-orbit{display:none}
  .cg-premium-role-chip{margin-bottom:7px}.cg-premium-kicker{display:block;margin-top:2px}.cg-premium-welcome h2{font-size:28px;margin-top:15px}.cg-premium-welcome p{font-size:13px;margin-bottom:16px}.cg-premium-meta span{font-size:10.5px;padding:7px 9px}
  .cg-premium-insight-grid{grid-template-columns:1fr;gap:12px}.cg-premium-insight{min-height:132px;grid-template-columns:minmax(0,1fr) 74px;padding:18px;border-radius:20px}.cg-premium-insight-copy span{font-size:18px;margin-bottom:10px}.cg-premium-insight-copy strong{font-size:12.5px}.cg-premium-illustration{font-size:48px}
  .cg-announcement-list{grid-template-columns:1fr}
}


/* DEV-CG-DASH-002B — TYPOGRAPHY + ANNOUNCEMENT MODAL GRID */
body.cg-route-app #cgHeader{
  grid-template-columns:minmax(320px,680px) minmax(18px,1fr) auto auto auto!important;
  align-items:center!important;
}
body.cg-route-app #cgHeaderLogout{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;min-width:92px!important;max-width:120px!important;height:38px!important;
  padding:0 15px!important;margin:0!important;border-radius:999px!important;
  border:1px solid #d8e2ee!important;background:rgba(255,255,255,.92)!important;
  color:#10233f!important;font-size:12px!important;font-weight:760!important;line-height:1!important;
  box-shadow:0 5px 14px rgba(31,52,78,.045)!important;
}
body.cg-route-app #cgHeaderLogout:hover{background:#f8fbff!important;border-color:#b9cce0!important;transform:translateY(-1px)!important}

.cg-premium-welcome{min-height:174px!important;padding:25px 30px!important}
.cg-premium-welcome h2{font-size:30px!important;line-height:1.08!important;margin:16px 0 4px!important;font-weight:720!important;letter-spacing:-.032em!important}
.cg-premium-welcome p{font-size:13.5px!important;line-height:1.48!important;margin:0!important}
.cg-premium-meta{display:none!important}
.cg-premium-role-chip,.cg-premium-kicker{font-size:9.5px!important}
.cg-premium-insight{min-height:142px!important;padding:20px 22px!important;grid-template-columns:minmax(0,1fr) 104px!important}
.cg-premium-insight-copy span{font-size:18px!important;font-weight:720!important;margin-bottom:13px!important}
.cg-premium-insight-copy strong{font-size:13.5px!important;line-height:1.48!important;font-weight:600!important}
.cg-premium-illustration{font-size:54px!important}

.cg-announcement-panel{padding:16px!important;border-radius:20px!important}
.cg-announcement-panel .cg-op-panel-head{margin-bottom:12px!important}
.cg-announcement-panel .cg-op-panel-title h2{font-size:16px!important;line-height:1.2!important}
.cg-announcement-panel .cg-op-panel-title p{font-size:10.5px!important;margin-top:3px!important}
.cg-announcement-list{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;align-items:stretch!important;margin-top:10px!important;
}
.cg-announcement-item{
  position:relative!important;min-height:126px!important;padding:13px 14px!important;border-radius:15px!important;cursor:pointer!important;overflow:hidden!important;
  border:1px solid rgba(207,221,235,.92)!important;border-left:4px solid #5aa5d8!important;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(239,248,255,.86))!important;
  box-shadow:0 8px 22px rgba(53,75,99,.065)!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
.cg-announcement-item:hover,.cg-announcement-item:focus-visible{transform:translateY(-2px)!important;box-shadow:0 12px 28px rgba(53,75,99,.11)!important;outline:none!important;border-color:#90b9d7!important}
.cg-announcement-item.is-penting{border-left-color:#e59a2f!important;background:linear-gradient(145deg,#fffdfa,#fff4df)!important}
.cg-announcement-item.is-segera{border-left-color:#d75a62!important;background:linear-gradient(145deg,#fffafa,#fff0f1)!important}
.cg-announcement-meta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
.cg-announcement-meta span{display:inline-flex!important;align-items:center!important;gap:5px!important;font-size:9px!important;font-weight:820!important;letter-spacing:.07em!important;color:#50647a!important}
.cg-announcement-meta span i{font-style:normal!important;color:#2f8dc7!important}
.cg-announcement-item.is-penting .cg-announcement-meta span i{color:#d8871a!important}.cg-announcement-item.is-segera .cg-announcement-meta span i{color:#c94750!important}
.cg-announcement-meta time{font-size:9.5px!important;color:#7b8ca0!important;white-space:nowrap!important}
.cg-announcement-item h3{font-size:12.5px!important;line-height:1.32!important;margin:9px 0 6px!important;color:#17263b!important;font-weight:740!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.cg-announcement-item p{font-size:11px!important;line-height:1.42!important;color:#52677d!important;margin:0 0 10px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;white-space:normal!important}
.cg-announcement-foot{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-top:auto!important}
.cg-announcement-foot small{font-size:9.5px!important;color:#718397!important}
.cg-announcement-foot .cg-btn{position:relative!important;z-index:3!important;font-size:9.5px!important;min-height:26px!important;padding:4px 8px!important}

.cg-ann-view-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px}
.cg-ann-view-backdrop{position:absolute;inset:0;background:rgba(10,24,42,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cg-ann-view-dialog{position:relative;z-index:1;width:min(680px,calc(100vw - 32px));max-height:min(78vh,720px);overflow:auto;padding:26px 28px 22px;border-radius:22px;border:1px solid rgba(201,218,234,.9);background:rgba(255,255,255,.96);box-shadow:0 32px 90px rgba(15,31,52,.26)}
.cg-ann-view-dialog.is-penting{background:linear-gradient(145deg,#fff,#fff8ea)}
.cg-ann-view-dialog.is-segera{background:linear-gradient(145deg,#fff,#fff3f4)}
.cg-ann-view-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#eef4f9;color:#27394d;font-size:22px;line-height:1;cursor:pointer}
.cg-ann-view-meta{display:flex;align-items:center;gap:12px;padding-right:44px;color:#6b7e92;font-size:11px}.cg-ann-view-meta span{font-weight:800;text-transform:uppercase;letter-spacing:.07em}.cg-ann-view-meta time{margin-left:auto}
.cg-ann-view-dialog h2{font-size:21px;line-height:1.25;margin:14px 0 15px;color:#14243a;letter-spacing:-.02em}
.cg-ann-view-message{white-space:pre-wrap;font-size:13.5px;line-height:1.72;color:#3e5369}
.cg-ann-view-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:15px;border-top:1px solid #e3ebf3;color:#738599;font-size:11px}

@media(max-width:1180px){.cg-announcement-list{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:900px){.cg-announcement-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:720px){
  body.cg-route-app #cgHeaderLogout{display:none!important}
  .cg-premium-welcome{min-height:auto!important;padding:19px 17px!important}.cg-premium-welcome h2{font-size:24px!important}.cg-premium-welcome p{font-size:12.5px!important}
  .cg-premium-insight{min-height:118px!important;padding:16px!important;grid-template-columns:minmax(0,1fr) 66px!important}.cg-premium-insight-copy span{font-size:16px!important}.cg-premium-insight-copy strong{font-size:12px!important}.cg-premium-illustration{font-size:42px!important}
  .cg-announcement-list{grid-template-columns:1fr!important}.cg-announcement-item{min-height:112px!important}.cg-ann-view-dialog{padding:22px 18px 18px!important}.cg-ann-view-dialog h2{font-size:18px!important}.cg-ann-view-message{font-size:13px!important}
}


/* DEV-CG-DASH-002C — ANNOUNCEMENT MODAL + HEADER ACTION FIX */
body.cg-route-app #cgHeader{
  grid-template-columns:minmax(320px,680px) minmax(24px,1fr) auto auto!important;
  align-items:center!important;
}
body.cg-route-app #cgHeader .cg-search{grid-column:1!important;min-width:0!important;margin:0!important}
body.cg-route-app #cgHeader .cg-header-clock{grid-column:3!important;margin:0!important}
body.cg-route-app #cgHeader .cg-header-actions{
  grid-column:4!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:8px!important;min-width:max-content!important;margin:0!important;padding:0!important;
}
body.cg-route-app #cgHeader .cg-header-actions .cg-user{
  grid-column:auto!important;margin:0!important;min-width:0!important;width:auto!important;height:38px!important;
  padding:0 12px!important;border:1px solid #d8e2ee!important;border-radius:999px!important;
  background:rgba(255,255,255,.88)!important;box-shadow:none!important;
}
body.cg-route-app #cgHeader .cg-header-actions #cgHeaderLogout{
  grid-column:auto!important;position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;padding:0!important;margin:0!important;
  border-radius:999px!important;border:1px solid #d8e2ee!important;background:rgba(255,255,255,.92)!important;
  color:#52677d!important;box-shadow:none!important;transform:none!important;
}
body.cg-route-app #cgHeader .cg-header-actions #cgHeaderLogout:hover{
  background:#fff6f6!important;border-color:#efc3c6!important;color:#b33a43!important;transform:none!important;
}
.cg-header-logout .cg-logout-icon{display:block!important;font-size:15px!important;font-weight:800!important;line-height:1!important;transform:rotate(180deg)}
.cg-header-logout .cg-logout-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.cg-route-login .cg-header-actions,body.cg-public-page .cg-header-actions{display:none!important}

/* The whole card is the read action; the hint is visual only. */
.cg-announcement-foot small{pointer-events:none!important}
.cg-announcement-item{user-select:none}

@media(max-width:900px){
  body.cg-route-app #cgHeader{grid-template-columns:minmax(0,1fr) auto!important}
  body.cg-route-app #cgHeader .cg-search{grid-column:1!important}
  body.cg-route-app #cgHeader .cg-header-clock{display:none!important}
  body.cg-route-app #cgHeader .cg-header-actions{grid-column:2!important}
}
@media(max-width:720px){
  body.cg-route-app #cgHeader .cg-header-actions #cgHeaderLogout{display:none!important}
  body.cg-route-app #cgHeader .cg-header-actions .cg-user{height:36px!important;padding:0 10px!important}
}


/* DEV-CG-DASH-002D — ANNOUNCEMENT MODAL POSITION HARDENING */
#cgAnnouncementViewModal.cg-ann-view-modal{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100vw!important;
  height:100vh!important;
  margin:0!important;
  padding:20px!important;
  box-sizing:border-box!important;
}
#cgAnnouncementViewModal .cg-ann-view-backdrop{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  background:rgba(10,24,42,.42)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
#cgAnnouncementViewModal .cg-ann-view-dialog{
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
  display:block!important;
  width:min(680px,calc(100vw - 32px))!important;
  max-height:min(78vh,720px)!important;
  overflow:auto!important;
  margin:auto!important;
  padding:26px 28px 22px!important;
  border-radius:22px!important;
  border:1px solid rgba(201,218,234,.9)!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 32px 90px rgba(15,31,52,.30)!important;
  box-sizing:border-box!important;
}
#cgAnnouncementViewModal .cg-ann-view-close{
  position:absolute!important;
  right:14px!important;
  top:12px!important;
  z-index:3!important;
}
@media(max-width:720px){
  #cgAnnouncementViewModal.cg-ann-view-modal{padding:12px!important;}
  #cgAnnouncementViewModal .cg-ann-view-dialog{
    width:calc(100vw - 24px)!important;
    max-height:82vh!important;
    padding:22px 18px 18px!important;
    border-radius:18px!important;
  }
}


/* DEV-CG-DASH-002E — ANNOUNCEMENT MODAL TYPOGRAPHY REFINEMENT */
#cgAnnouncementViewModal .cg-ann-view-dialog{
  width:min(720px,calc(100vw - 32px))!important;
  max-height:min(80vh,760px)!important;
  padding:34px 36px 28px!important;
}
#cgAnnouncementViewModal .cg-ann-view-meta{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
}
#cgAnnouncementViewModal .cg-ann-view-meta span{
  display:inline-flex;align-items:center;min-height:26px;padding:5px 10px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#173a63;background:#edf6ff;border:1px solid #d6e8f8;
}
#cgAnnouncementViewModal .cg-ann-view-dialog.is-penting .cg-ann-view-meta span{color:#7a4a00;background:#fff7e6;border-color:#f6d691;}
#cgAnnouncementViewModal .cg-ann-view-dialog.is-segera .cg-ann-view-meta span{color:#8b1f2d;background:#fff0f2;border-color:#f2c6cc;}
#cgAnnouncementViewModal #cgAnnViewTitle{
  margin:0 42px 20px 0;font-size:24px;line-height:1.28;font-weight:750;letter-spacing:-.02em;color:#10233f;
}
#cgAnnouncementViewModal .cg-ann-view-message{
  max-width:62ch;margin:0;color:#33465f;font-size:14.5px;line-height:1.78;font-weight:450;
}
#cgAnnouncementViewModal .cg-ann-view-message p{margin:0 0 14px;}
#cgAnnouncementViewModal .cg-ann-view-message p:last-child{margin-bottom:0;}
#cgAnnouncementViewModal .cg-ann-view-foot{
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:24px!important;
  margin-top:26px!important;padding-top:18px!important;border-top:1px solid #e4ebf2!important;
}
#cgAnnouncementViewModal .cg-ann-view-publisher{display:flex;flex-direction:column;gap:4px;min-width:0;}
#cgAnnouncementViewModal .cg-ann-view-publisher strong{font-size:13px;line-height:1.4;color:#213750;font-weight:700;}
#cgAnnouncementViewModal .cg-ann-view-publisher span{font-size:12px;line-height:1.4;color:#73839a;}
#cgAnnouncementViewModal .cg-ann-view-done{
  flex:0 0 auto;min-width:86px;height:38px;padding:0 18px!important;border-radius:10px!important;font-size:13px!important;font-weight:700!important;
}
#cgAnnouncementViewModal .cg-ann-view-close{
  width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border-radius:10px!important;
  border:1px solid #d8e1eb!important;background:#fff!important;color:#53657b!important;font-size:18px!important;line-height:1!important;
}
#cgAnnouncementViewModal .cg-ann-view-close:hover{background:#f3f6f9!important;color:#172a44!important;}
@media(max-width:720px){
  #cgAnnouncementViewModal .cg-ann-view-dialog{padding:28px 20px 20px!important;}
  #cgAnnouncementViewModal #cgAnnViewTitle{font-size:20px;margin-right:38px;margin-bottom:16px;}
  #cgAnnouncementViewModal .cg-ann-view-message{font-size:14px;line-height:1.7;}
  #cgAnnouncementViewModal .cg-ann-view-foot{align-items:stretch!important;flex-direction:column!important;gap:14px!important;}
  #cgAnnouncementViewModal .cg-ann-view-done{width:100%;}
}

/* DEV-CG-DASH-002G — PREMIUM DASHBOARD VISUAL REFINEMENT
   Frontend-only visual polish. No data, API, workflow, permission or database changes. */
body.cg-route-app .cg-dashboard-lite{
  --cg-dash-ink:#10233f;
  --cg-dash-muted:#667b92;
  --cg-dash-line:rgba(205,219,233,.82);
  --cg-dash-surface:rgba(255,255,255,.92);
}
body.cg-route-app .cg-dashboard-lite .cg-premium-home{
  gap:14px;
  margin-bottom:18px;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-welcome{
  min-height:182px!important;
  padding:26px 30px!important;
  border-radius:24px!important;
  border:1px solid rgba(207,221,235,.90)!important;
  background:
    linear-gradient(118deg,rgba(255,255,255,.97) 0%,rgba(245,250,255,.95) 49%,rgba(255,247,229,.93) 100%),
    radial-gradient(circle at 82% 28%,rgba(124,174,222,.20),transparent 38%),
    radial-gradient(circle at 94% 94%,rgba(245,179,69,.22),transparent 34%)!important;
  box-shadow:0 18px 42px rgba(32,55,83,.10),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-welcome::after{
  content:"";
  position:absolute;
  left:0;
  top:28px;
  bottom:28px;
  width:4px;
  border-radius:0 6px 6px 0;
  background:linear-gradient(180deg,#2d8ec5,#f2b63f);
  opacity:.92;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-welcome-glow{
  right:-76px!important;
  bottom:-118px!important;
  width:430px!important;
  height:280px!important;
  opacity:.66;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-role-chip{
  padding:5px 10px!important;
  border-color:rgba(226,185,84,.48)!important;
  background:rgba(255,255,255,.84)!important;
  box-shadow:none!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-kicker{
  color:#397da8!important;
  letter-spacing:.07em!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-welcome h2{
  max-width:850px;
  margin:17px 0 7px!important;
  font-size:32px!important;
  line-height:1.08!important;
  font-weight:760!important;
  letter-spacing:-.036em!important;
  color:var(--cg-dash-ink)!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-welcome p{
  max-width:690px;
  margin:0!important;
  color:#51677d!important;
  font-size:13.5px!important;
  line-height:1.55!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-orbit{
  right:34px!important;
  top:24px!important;
  opacity:.16!important;
  transform:rotate(-10deg) scale(.90)!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-insight-grid{
  gap:14px!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-insight{
  min-height:130px!important;
  padding:18px 21px!important;
  grid-template-columns:minmax(0,1fr) 82px!important;
  border-radius:20px!important;
  border:1px solid rgba(210,223,236,.88)!important;
  box-shadow:0 10px 28px rgba(38,61,88,.075)!important;
  backdrop-filter:blur(14px) saturate(118%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(118%)!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-insight.is-mind{
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(243,247,255,.94))!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-insight.is-smile{
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(255,248,233,.94))!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-insight-copy span{
  margin-bottom:10px!important;
  color:#1b304a!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:760!important;
  letter-spacing:-.012em!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-insight-copy strong{
  color:#4c6279!important;
  font-size:12.5px!important;
  line-height:1.54!important;
  font-weight:590!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-illustration{
  font-size:44px!important;
  opacity:.90;
  filter:drop-shadow(0 10px 14px rgba(42,55,73,.10))!important;
}

body.cg-route-app .cg-dashboard-lite .cg-announcement-panel{
  position:relative;
  overflow:hidden;
  padding:18px!important;
  border-radius:22px!important;
  border:1px solid rgba(204,219,233,.90)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(247,251,255,.94))!important;
  box-shadow:0 14px 34px rgba(36,59,86,.085)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:linear-gradient(90deg,#2b8ec7 0 52%,#f2b83f 52% 100%);
  opacity:.92;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel .cg-op-panel-head{
  align-items:center!important;
  margin:0 0 14px!important;
  padding:1px 1px 0!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel .cg-op-panel-title{
  gap:10px!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel .cg-op-panel-mark{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border-radius:9px!important;
  background:#eef7fd!important;
  border:1px solid #d7eaf7!important;
  color:#2488c3!important;
  font-size:14px!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel .cg-op-panel-title h2{
  margin:0!important;
  color:var(--cg-dash-ink)!important;
  font-size:16.5px!important;
  line-height:1.18!important;
  font-weight:770!important;
  letter-spacing:-.018em!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel .cg-op-panel-title p{
  margin:3px 0 0!important;
  color:#75879a!important;
  font-size:10.5px!important;
  line-height:1.35!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-list{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:11px!important;
  margin-top:0!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-item{
  min-height:132px!important;
  padding:13px 14px 12px!important;
  border-radius:15px!important;
  border:1px solid rgba(210,222,234,.95)!important;
  border-left:1px solid rgba(210,222,234,.95)!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(40,61,86,.055)!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-item::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:#62a9d3;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-item.is-penting::before{background:#e3a136;}
body.cg-route-app .cg-dashboard-lite .cg-announcement-item.is-segera::before{background:#d45a64;}
body.cg-route-app .cg-dashboard-lite .cg-announcement-item.is-penting,
body.cg-route-app .cg-dashboard-lite .cg-announcement-item.is-segera{
  background:#fff!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-item:hover,
body.cg-route-app .cg-dashboard-lite .cg-announcement-item:focus-visible{
  transform:translateY(-2px)!important;
  border-color:#b9ccdd!important;
  box-shadow:0 10px 24px rgba(36,59,86,.10)!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-meta span{
  color:#597089!important;
  font-size:8.8px!important;
  letter-spacing:.075em!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-meta time{
  color:#8a9aac!important;
  font-size:9.2px!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-item h3{
  margin:9px 0 5px!important;
  color:#1a2d45!important;
  font-size:12.5px!important;
  line-height:1.34!important;
  font-weight:750!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-item p{
  margin:0 0 9px!important;
  color:#65798e!important;
  font-size:10.7px!important;
  line-height:1.44!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-foot small{
  color:#7c8fa3!important;
  font-size:9.3px!important;
  font-weight:620!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-foot small::after{
  content:"  →";
  color:#3c8fbe;
  font-weight:800;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-empty{
  min-height:92px;
  display:grid;
  place-items:center;
  border:1px dashed #cfdeeb;
  border-radius:14px;
  background:#fbfdff;
  color:#7a8da1;
  font-size:12px;
}

@media(max-width:1180px){
  body.cg-route-app .cg-dashboard-lite .cg-announcement-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:900px){
  body.cg-route-app .cg-dashboard-lite .cg-announcement-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.cg-route-app .cg-dashboard-lite .cg-premium-welcome h2{font-size:29px!important;}
}
@media(max-width:720px){
  body.cg-route-app .cg-dashboard-lite .cg-premium-home{gap:11px;margin-bottom:14px;}
  body.cg-route-app .cg-dashboard-lite .cg-premium-welcome{
    min-height:auto!important;
    padding:19px 17px 20px!important;
    border-radius:20px!important;
  }
  body.cg-route-app .cg-dashboard-lite .cg-premium-welcome::after{top:20px;bottom:20px;width:3px;}
  body.cg-route-app .cg-dashboard-lite .cg-premium-welcome h2{font-size:24px!important;margin-top:14px!important;}
  body.cg-route-app .cg-dashboard-lite .cg-premium-welcome p{font-size:12.5px!important;}
  body.cg-route-app .cg-dashboard-lite .cg-premium-insight-grid{grid-template-columns:1fr!important;gap:9px!important;}
  body.cg-route-app .cg-dashboard-lite .cg-premium-insight{
    min-height:108px!important;
    padding:15px 16px!important;
    grid-template-columns:minmax(0,1fr) 56px!important;
    border-radius:17px!important;
  }
  body.cg-route-app .cg-dashboard-lite .cg-premium-insight-copy span{font-size:14px!important;margin-bottom:7px!important;}
  body.cg-route-app .cg-dashboard-lite .cg-premium-insight-copy strong{font-size:11.8px!important;line-height:1.48!important;}
  body.cg-route-app .cg-dashboard-lite .cg-premium-illustration{font-size:36px!important;}
  body.cg-route-app .cg-dashboard-lite .cg-announcement-panel{padding:15px!important;border-radius:18px!important;}
  body.cg-route-app .cg-dashboard-lite .cg-announcement-panel .cg-op-panel-head{align-items:flex-start!important;gap:10px!important;}
  body.cg-route-app .cg-dashboard-lite .cg-announcement-list{grid-template-columns:1fr!important;gap:9px!important;}
  body.cg-route-app .cg-dashboard-lite .cg-announcement-item{min-height:108px!important;padding:12px 13px 11px!important;}
}



/* DEV-CG-DASH-002I — Unified Role Dashboard Standard + Fixed Vertical Rhythm
   Official home dashboard standard for SUPER ADMIN, DE, EE, PJ, PB, PU and Administrator.
   A single vertical rhythm prevents stacked margin/gap accumulation. */
body.cg-route-app .cg-dashboard-lite {
  --cg-dashboard-rhythm: 14px;
  gap: var(--cg-dashboard-rhythm) !important;
}
body.cg-route-app .cg-dashboard-lite > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-home {
  display: grid !important;
  gap: var(--cg-dashboard-rhythm) !important;
  margin: 0 !important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel {
  margin: 0 !important;
}
body.cg-route-app .cg-dashboard-lite .cg-main-col,
body.cg-route-app .cg-dashboard-lite .cg-side-col {
  gap: var(--cg-dashboard-rhythm) !important;
}
@media (max-width: 720px) {
  body.cg-route-app .cg-dashboard-lite {
    --cg-dashboard-rhythm: 12px;
  }
}


/* DEV-CG-DASH-002J — Visual vertical rhythm correction.
   The perceived gap remained uneven because the announcement panel had generous
   internal top padding, making the space look larger even when the outer gap
   had been normalized. This patch standardizes both outer rhythm and the
   panel's internal top spacing. */
body.cg-route-app .cg-dashboard-lite {
  --cg-dashboard-rhythm: 14px !important;
}
body.cg-route-app .cg-dashboard-lite .cg-main-col,
body.cg-route-app .cg-dashboard-lite .cg-side-col,
body.cg-route-app .cg-dashboard-lite .cg-premium-home,
body.cg-route-app .cg-dashboard-lite .cg-premium-insight-grid {
  gap: var(--cg-dashboard-rhythm) !important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-home,
body.cg-route-app .cg-dashboard-lite .cg-premium-home > section,
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel {
  margin: 0 !important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel {
  padding: 12px 14px 14px !important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel .cg-op-panel-head {
  margin-bottom: 10px !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel .cg-op-panel-title h2 {
  margin: 0 !important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-panel .cg-op-panel-title p {
  margin: 2px 0 0 !important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-list {
  margin-top: 0 !important;
}
@media (max-width: 720px) {
  body.cg-route-app .cg-dashboard-lite {
    --cg-dashboard-rhythm: 12px !important;
  }
  body.cg-route-app .cg-dashboard-lite .cg-announcement-panel {
    padding: 11px 12px 12px !important;
  }
  body.cg-route-app .cg-dashboard-lite .cg-announcement-panel .cg-op-panel-head {
    margin-bottom: 8px !important;
    gap: 8px !important;
  }
}


/* DEV-CG-DASH-002K — ROOT DASHBOARD GRID GAP FIX
   Confirmed from browser DevTools: the visible striped space between
   .cg-premium-home and .cg-announcement-panel is the parent .cg-screen grid gap.
   A global .cg-screen rule still applied 18px !important. This selector targets
   the actual dashboard root with higher specificity and makes the page rhythm
   deterministic for every dashboard role. */
body.cg-route-app #cgMain > section.cg-screen.cg-dashboard-lite {
  --cg-dashboard-rhythm: 14px !important;
  display: grid !important;
  gap: var(--cg-dashboard-rhythm) !important;
  row-gap: var(--cg-dashboard-rhythm) !important;
  column-gap: var(--cg-dashboard-rhythm) !important;
}
body.cg-route-app #cgMain > section.cg-screen.cg-dashboard-lite > .cg-premium-home,
body.cg-route-app #cgMain > section.cg-screen.cg-dashboard-lite > .cg-announcement-panel,
body.cg-route-app #cgMain > section.cg-screen.cg-dashboard-lite > .cg-dashboard-grid-lite,
body.cg-route-app #cgMain > section.cg-screen.cg-dashboard-lite > .cg-admin-command-grid {
  margin-block: 0 !important;
}
body.cg-route-app #cgMain > section.cg-screen.cg-dashboard-lite .cg-premium-home {
  gap: var(--cg-dashboard-rhythm) !important;
}
@media (max-width:720px) {
  body.cg-route-app #cgMain > section.cg-screen.cg-dashboard-lite {
    --cg-dashboard-rhythm: 12px !important;
  }
}


/* ============================================================
   DEV-CG-INCOMING-003B — Butiran Surat Masuk Premium Refinement
   VISUAL ONLY. Workflow/action/permission contracts are untouched.
   ============================================================ */
body.cg-route-app .cg-incoming-detail-premium {
  max-width: 1320px !important;
  margin: 0 auto !important;
}
body.cg-route-app .cg-incoming-detail-premium > .cg-head {
  margin-bottom: 14px !important;
  border-left: 4px solid #2b9bd7 !important;
  background: linear-gradient(135deg,#f7fbff 0%,#edf6fc 100%) !important;
  box-shadow: 0 10px 30px rgba(31,65,102,.06) !important;
}
body.cg-route-app .cg-incoming-detail-premium > .cg-head h1 {
  max-width: 980px !important;
  font-size: clamp(20px,1.7vw,27px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}
body.cg-route-app .cg-incoming-detail-workspace {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
}
body.cg-route-app .cg-incoming-detail-workspace > .cg-main-col {
  display: grid !important;
  gap: 14px !important;
}
body.cg-route-app .cg-incoming-detail-top {
  display: grid !important;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}
body.cg-route-app .cg-incoming-detail-top > div,
body.cg-route-app .cg-incoming-detail-status-full,
body.cg-route-app .cg-incoming-detail-action-full {
  min-width: 0 !important;
}
body.cg-route-app .cg-incoming-detail-premium .cg-panel {
  border: 1px solid #d9e5f0 !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 8px 24px rgba(31,65,102,.045) !important;
}
body.cg-route-app .cg-incoming-detail-premium .cg-panel-head {
  padding-bottom: 9px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid #e8eef5 !important;
}
body.cg-route-app .cg-incoming-detail-premium .cg-panel-head h2 {
  font-size: 14px !important;
  font-weight: 760 !important;
  color: #10243f !important;
}
body.cg-route-app .cg-incoming-detail-premium .cg-panel-head p {
  font-size: 11.5px !important;
  color: #71839a !important;
}
body.cg-route-app .cg-incoming-status-box {
  min-height: 92px !important;
  padding: 14px 16px !important;
  border: 1px solid #d7e5f2 !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg,#f9fcff,#f2f8fd) !important;
  align-content: center !important;
  box-shadow: none !important;
}
body.cg-route-app .cg-incoming-status-box strong {
  margin-top: 8px !important;
  font-size: 18px !important;
  line-height: 1.22 !important;
  color: #10243f !important;
}
body.cg-route-app .cg-incoming-no-action {
  min-height: 92px !important;
  padding: 14px 16px !important;
  border-radius: 15px !important;
  border: 1px solid #eee5b3 !important;
  border-left: 4px solid #f2c500 !important;
  background: linear-gradient(135deg,#fffef7,#fffdf3) !important;
}
body.cg-route-app .cg-incoming-no-action strong {
  font-size: 14px !important;
  color: #19283c !important;
}
body.cg-route-app .cg-incoming-no-action p {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  color: #6a7d92 !important;
}
body.cg-route-app .cg-incoming-action-body {
  display: grid !important;
  gap: 12px !important;
}
body.cg-route-app .cg-incoming-detail-info .cg-info-grid {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 9px !important;
}
body.cg-route-app .cg-incoming-detail-info .cg-info {
  min-height: 72px !important;
  padding: 11px 12px !important;
  border-radius: 13px !important;
  border: 1px solid #e1e9f2 !important;
  background: #fbfdff !important;
}
body.cg-route-app .cg-incoming-detail-info .cg-info small {
  margin-bottom: 5px !important;
  font-size: 10.5px !important;
  color: #75879a !important;
}
body.cg-route-app .cg-incoming-detail-info .cg-info strong {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  color: #17304f !important;
  overflow-wrap: anywhere !important;
}
body.cg-route-app .cg-incoming-detail-softcopy .cg-softcopy-box,
body.cg-route-app .cg-incoming-detail-softcopy .cg-softcopy-panel {
  border-radius: 14px !important;
}
body.cg-route-app .cg-incoming-detail-softcopy .cg-softcopy-loading,
body.cg-route-app .cg-incoming-detail-softcopy .cg-softcopy-empty {
  min-height: 72px !important;
  display: grid !important;
  align-content: center !important;
  border-radius: 13px !important;
}
body.cg-route-app .cg-incoming-detail-premium .cg-head-actions {
  align-items: center !important;
}
body.cg-route-app .cg-incoming-detail-premium .cg-head-actions .cg-btn {
  min-height: 38px !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
}
@media (max-width: 980px) {
  body.cg-route-app .cg-incoming-detail-top {
    grid-template-columns: 1fr !important;
  }
  body.cg-route-app .cg-incoming-detail-info .cg-info-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width: 720px) {
  body.cg-route-app .cg-incoming-detail-premium {
    padding: 10px !important;
  }
  body.cg-route-app .cg-incoming-detail-premium > .cg-head {
    margin-bottom: 10px !important;
    border-left-width: 0 !important;
    border-top: 3px solid #2b9bd7 !important;
  }
  body.cg-route-app .cg-incoming-detail-premium > .cg-head h1 {
    font-size: 19px !important;
  }
  body.cg-route-app .cg-incoming-detail-workspace > .cg-main-col,
  body.cg-route-app .cg-incoming-detail-top {
    gap: 10px !important;
  }
  body.cg-route-app .cg-incoming-detail-info .cg-info-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.cg-route-app .cg-incoming-detail-info .cg-info {
    min-height: 62px !important;
  }
  body.cg-route-app .cg-incoming-detail-premium .cg-head-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }
  body.cg-route-app .cg-incoming-detail-premium .cg-head-actions .cg-btn {
    width: 100% !important;
  }
}
\n\n/* DEV-CG-INCOMING-003C — Edit / Kemas Kini Premium Refinement\n   Visual-only. Field IDs, submit payload, API action and role permission remain unchanged. */\nbody.cg-route-app .cg-incoming-edit-screen{\n  max-width:1180px!important;\n  margin:0 auto!important;\n}\nbody.cg-route-app .cg-incoming-edit-screen > .cg-head{\n  margin-bottom:14px!important;\n}\nbody.cg-route-app .cg-incoming-edit-locked{\n  margin-bottom:14px!important;\n}\nbody.cg-route-app .cg-incoming-edit-locked .cg-panel{\n  padding:14px 16px!important;\n}\nbody.cg-route-app .cg-incoming-edit-locked .cg-info-grid{\n  grid-template-columns:repeat(4,minmax(0,1fr))!important;\n  gap:9px!important;\n}\nbody.cg-route-app .cg-incoming-edit-form-panel{\n  padding:0!important;\n  overflow:visible!important;\n}\nbody.cg-route-app .cg-incoming-edit-form{\n  gap:0!important;\n}\nbody.cg-route-app .cg-incoming-edit-note{\n  display:flex!important;\n  align-items:center!important;\n  gap:10px!important;\n  margin:14px 14px 0!important;\n  padding:11px 13px!important;\n  border-radius:13px!important;\n  background:#fffdf1!important;\n  border:1px solid #f5df8a!important;\n  color:#52647a!important;\n  font-size:12px!important;\n}\nbody.cg-route-app .cg-incoming-edit-note strong{\n  flex:0 0 auto!important;\n  color:#17263b!important;\n  font-size:12.5px!important;\n}\nbody.cg-route-app .cg-incoming-edit-note span{\n  min-width:0!important;\n}\nbody.cg-route-app .cg-incoming-edit-section{\n  padding:17px 18px!important;\n  border-bottom:1px solid #e8eef5!important;\n}\nbody.cg-route-app .cg-incoming-edit-section:last-of-type{\n  border-bottom:0!important;\n}\nbody.cg-route-app .cg-incoming-edit-section-head{\n  display:flex!important;\n  align-items:flex-start!important;\n  justify-content:space-between!important;\n  gap:12px!important;\n  margin-bottom:13px!important;\n}\nbody.cg-route-app .cg-incoming-edit-section-head span{\n  display:block!important;\n  color:#10233f!important;\n  font-size:14px!important;\n  line-height:1.25!important;\n  font-weight:750!important;\n}\nbody.cg-route-app .cg-incoming-edit-section-head small{\n  display:block!important;\n  margin-top:3px!important;\n  color:#74869a!important;\n  font-size:11.5px!important;\n  line-height:1.4!important;\n  font-weight:500!important;\n}\nbody.cg-route-app .cg-incoming-edit-section .cg-form-row{\n  margin:0!important;\n}\nbody.cg-route-app .cg-incoming-edit-section .cg-form-row + .cg-form-row{\n  margin-top:12px!important;\n}\nbody.cg-route-app .cg-incoming-edit-section .cg-form-grid{\n  gap:12px!important;\n  align-items:start!important;\n  margin:12px 0!important;\n}\nbody.cg-route-app .cg-incoming-edit-basic-grid{\n  grid-template-columns:minmax(180px,.72fr) minmax(260px,1.28fr) minmax(260px,1fr)!important;\n}\nbody.cg-route-app .cg-incoming-edit-section label{\n  margin-bottom:6px!important;\n  color:#263b55!important;\n  font-size:12px!important;\n  font-weight:720!important;\n}\nbody.cg-route-app .cg-incoming-edit-section input,\nbody.cg-route-app .cg-incoming-edit-section textarea{\n  border-radius:11px!important;\n  border-color:#cbd9e7!important;\n  background:#f8fbfe!important;\n  color:#16283f!important;\n  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;\n  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease!important;\n}\nbody.cg-route-app .cg-incoming-edit-section input:focus,\nbody.cg-route-app .cg-incoming-edit-section textarea:focus{\n  outline:none!important;\n  border-color:#5f9fd0!important;\n  background:#fff!important;\n  box-shadow:0 0 0 3px rgba(47,141,199,.10)!important;\n}\nbody.cg-route-app .cg-incoming-edit-section textarea{\n  min-height:88px!important;\n  resize:vertical!important;\n}\nbody.cg-route-app .cg-incoming-edit-section small{\n  color:#7a8ca0!important;\n  font-size:10.8px!important;\n  line-height:1.4!important;\n}\nbody.cg-route-app .cg-incoming-edit-section-file{\n  background:linear-gradient(180deg,#fff,#fbfdff)!important;\n}\nbody.cg-route-app .cg-incoming-edit-section-upload{\n  background:#fbfdff!important;\n}\nbody.cg-route-app .cg-incoming-edit-upload-row{\n  padding:12px!important;\n  border:1px dashed #b9cfe1!important;\n  border-radius:13px!important;\n  background:#fff!important;\n}\nbody.cg-route-app .cg-incoming-edit-upload-row input[type=file]{\n  min-height:44px!important;\n  padding:7px!important;\n  background:#f7fafc!important;\n  border-style:solid!important;\n}\nbody.cg-route-app .cg-incoming-edit-section-notes textarea{\n  min-height:76px!important;\n}\nbody.cg-route-app .cg-incoming-edit-actions{\n  display:flex!important;\n  justify-content:flex-end!important;\n  align-items:center!important;\n  gap:9px!important;\n  margin:0!important;\n  padding:13px 18px!important;\n  border-top:1px solid #e5edf5!important;\n  background:rgba(255,255,255,.96)!important;\n  border-radius:0 0 20px 20px!important;\n}\nbody.cg-route-app .cg-incoming-edit-actions .cg-btn{\n  min-width:92px!important;\n  border-radius:10px!important;\n}\nbody.cg-route-app .cg-incoming-edit-actions .cg-btn.primary{\n  min-width:150px!important;\n}\n@media(max-width:980px){\n  body.cg-route-app .cg-incoming-edit-locked .cg-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}\n  body.cg-route-app .cg-incoming-edit-basic-grid{grid-template-columns:1fr 1fr!important;}\n  body.cg-route-app .cg-incoming-edit-basic-grid .cg-form-row:last-child{grid-column:1/-1!important;}\n}\n@media(max-width:720px){\n  body.cg-route-app .cg-incoming-edit-screen{padding:10px!important;}\n  body.cg-route-app .cg-incoming-edit-locked .cg-info-grid{grid-template-columns:1fr!important;}\n  body.cg-route-app .cg-incoming-edit-note{display:grid!important;gap:3px!important;margin:10px 10px 0!important;}\n  body.cg-route-app .cg-incoming-edit-section{padding:14px 12px!important;}\n  body.cg-route-app .cg-incoming-edit-basic-grid,\n  body.cg-route-app .cg-incoming-edit-section .cg-form-grid{grid-template-columns:1fr!important;gap:10px!important;}\n  body.cg-route-app .cg-incoming-edit-basic-grid .cg-form-row:last-child{grid-column:auto!important;}\n  body.cg-route-app .cg-incoming-edit-actions{\n    position:sticky!important;\n    bottom:calc(74px + env(safe-area-inset-bottom))!important;\n    z-index:25!important;\n    display:grid!important;\n    grid-template-columns:.72fr 1.28fr!important;\n    padding:10px!important;\n    box-shadow:0 -12px 30px rgba(15,23,42,.08)!important;\n  }\n  body.cg-route-app .cg-incoming-edit-actions .cg-btn{width:100%!important;min-width:0!important;}\n}\n
/* ========================================================================== 
   DEV-CG-INCOMING-003D — PB ACTIVATION PREMIUM REFINEMENT
   Visual-only. No workflow / permission / payload / API changes.
   ========================================================================== */

.cg-incoming-detail-premium .cg-pb-workspace-form{
  display:grid;
  gap:16px;
}

.cg-incoming-detail-premium .cg-pb-activation-overview{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border:1px solid #cfe0ee;
  border-radius:18px;
  background:linear-gradient(135deg,#f7fbff 0%,#ffffff 58%,#fffaf0 100%);
}
.cg-incoming-detail-premium .cg-pb-activation-overview-copy{
  min-width:0;
}
.cg-incoming-detail-premium .cg-pb-activation-overview-copy>.cg-kicker{
  display:block;
  margin:0 0 5px;
  font-size:11px;
  font-weight:850;
  letter-spacing:.055em;
  color:#2476a8;
}
.cg-incoming-detail-premium .cg-pb-activation-overview-copy>strong{
  display:block;
  color:#10223b;
  font-size:17px;
  line-height:1.35;
}
.cg-incoming-detail-premium .cg-pb-activation-overview-copy>p{
  margin:5px 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.55;
}
.cg-incoming-detail-premium .cg-pb-gate-badge{
  flex:0 0 auto;
  padding:7px 11px;
  background:#fff7ed;
  color:#9a3412;
  border-color:#fed7aa;
}

.cg-incoming-detail-premium .cg-pb-inherited{
  padding:16px 18px;
  border-radius:17px;
  border-color:#dbe6ef;
  box-shadow:none;
}
.cg-incoming-detail-premium .cg-pb-inherited-head{
  margin-bottom:11px;
}
.cg-incoming-detail-premium .cg-pb-inherited-head h4{
  margin-top:2px;
  color:#14253d;
  font-size:16px;
}
.cg-incoming-detail-premium .cg-pb-inherited-grid{
  gap:8px;
}
.cg-incoming-detail-premium .cg-pb-inherited-person{
  min-height:54px;
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
}
.cg-incoming-detail-premium .cg-pb-inherited>p{
  margin-top:10px;
  line-height:1.5;
}

.cg-incoming-detail-premium .cg-pb-stage{
  overflow:hidden;
  border:1px solid #dce5ee;
  border-radius:18px;
  background:#fff;
}
.cg-incoming-detail-premium .cg-pb-section-title{
  gap:11px;
  padding:14px 16px;
  background:#f8fafc;
  border-bottom:1px solid #e7edf3;
}
.cg-incoming-detail-premium .cg-pb-section-title>span{
  width:28px;
  height:28px;
  flex:0 0 28px;
  background:#17375f;
  font-size:13px;
}
.cg-incoming-detail-premium .cg-pb-section-title strong{
  color:#14253d;
  font-size:14px;
}
.cg-incoming-detail-premium .cg-pb-section-title small{
  margin-top:1px;
  font-size:12px;
  line-height:1.45;
}
.cg-incoming-detail-premium .cg-pb-stage-body{
  display:grid;
  gap:14px;
  padding:16px;
}
.cg-incoming-detail-premium .cg-pb-record-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.cg-incoming-detail-premium .cg-pb-stage .cg-form-row{
  gap:6px;
}
.cg-incoming-detail-premium .cg-pb-stage .cg-form-row label{
  color:#213754;
  font-weight:750;
}
.cg-incoming-detail-premium .cg-pb-stage input,
.cg-incoming-detail-premium .cg-pb-stage select,
.cg-incoming-detail-premium .cg-pb-stage textarea{
  border-color:#cbd8e5;
  background:#fbfdff;
}
.cg-incoming-detail-premium .cg-pb-stage input:focus,
.cg-incoming-detail-premium .cg-pb-stage select:focus,
.cg-incoming-detail-premium .cg-pb-stage textarea:focus{
  border-color:#4ba6dc;
  box-shadow:0 0 0 3px rgba(75,166,220,.11);
  background:#fff;
}

.cg-incoming-detail-premium .cg-pb-softcopy-wrap>.cg-file-box,
.cg-incoming-detail-premium .cg-pb-softcopy-wrap .cg-file-box{
  margin:0;
  border-radius:14px;
  background:#f8fbfe;
}

.cg-incoming-detail-premium .cg-pb-stage-assignment .cg-officer-multi-group{
  margin:0;
  padding:13px;
  border-radius:14px;
  background:#fbfdff;
}
.cg-incoming-detail-premium .cg-pb-stage-assignment .cg-officer-multi-group legend{
  font-size:13px;
}
.cg-incoming-detail-premium .cg-pb-stage-assignment .cg-officer-checkbox-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:8px;
}
.cg-incoming-detail-premium .cg-pb-stage-assignment .cg-officer-check{
  min-height:54px;
  padding:10px 12px;
  border-radius:12px;
  box-shadow:none;
}
.cg-incoming-detail-premium .cg-pb-stage-assignment .cg-officer-check:hover{
  border-color:#9cc8e2;
  background:#f8fcff;
}
.cg-incoming-detail-premium .cg-pb-stage-assignment .cg-officer-check.is-selected,
.cg-incoming-detail-premium .cg-pb-stage-assignment .cg-officer-check:has(input:checked){
  border-color:#f0b13d;
  background:#fffbeb;
  box-shadow:0 0 0 2px rgba(245,158,11,.09);
}
.cg-incoming-detail-premium .cg-pb-notes-row{
  margin-top:2px;
}

.cg-incoming-detail-premium .cg-pb-stage-confirm{
  border-color:#c9dcec;
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.cg-incoming-detail-premium .cg-pb-confirm-body{
  gap:12px;
}
.cg-incoming-detail-premium .cg-pb-live-summary{
  padding:14px;
  border-radius:14px;
  border-color:#d5e2ec;
  background:#f7fafc;
}
.cg-incoming-detail-premium .cg-pb-live-summary>strong{
  margin-bottom:8px;
  color:#17304e;
  font-size:13px;
}
.cg-incoming-detail-premium .cg-pb-live-summary-body{
  gap:8px;
}
.cg-incoming-detail-premium .cg-pb-live-summary-body>span{
  min-width:180px;
  padding:9px 11px;
  border-radius:11px;
}
.cg-incoming-detail-premium .cg-activation-note{
  margin:0;
  padding:12px 14px;
  border:1px solid #f1dfae;
  border-left:4px solid #eab308;
  border-radius:13px;
  background:#fffdf5;
  color:#5c4a19;
  line-height:1.55;
}
.cg-incoming-detail-premium .cg-pb-activation-actions{
  display:flex;
  justify-content:flex-end;
  margin:0;
  padding:12px 0 0;
  border-top:1px solid #e5ebf1;
}
.cg-incoming-detail-premium .cg-pb-activation-actions .cg-btn.primary{
  min-width:200px;
  min-height:42px;
  font-weight:800;
}

@media (max-width:980px){
  .cg-incoming-detail-premium .cg-pb-record-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cg-incoming-detail-premium .cg-pb-record-grid>.cg-form-row:last-child{
    grid-column:1 / -1;
  }
}

@media (max-width:720px){
  .cg-incoming-detail-premium .cg-pb-workspace-form{
    gap:12px;
  }
  .cg-incoming-detail-premium .cg-pb-activation-overview{
    display:grid;
    gap:10px;
    padding:15px;
  }
  .cg-incoming-detail-premium .cg-pb-gate-badge{
    width:max-content;
  }
  .cg-incoming-detail-premium .cg-pb-inherited{
    padding:14px;
  }
  .cg-incoming-detail-premium .cg-pb-record-grid{
    grid-template-columns:1fr;
  }
  .cg-incoming-detail-premium .cg-pb-record-grid>.cg-form-row:last-child{
    grid-column:auto;
  }
  .cg-incoming-detail-premium .cg-pb-section-title{
    padding:12px 13px;
  }
  .cg-incoming-detail-premium .cg-pb-stage-body{
    padding:13px;
  }
  .cg-incoming-detail-premium .cg-pb-stage-assignment .cg-officer-checkbox-grid{
    grid-template-columns:1fr;
  }
  .cg-incoming-detail-premium .cg-pb-live-summary-body{
    display:grid;
    grid-template-columns:1fr;
  }
  .cg-incoming-detail-premium .cg-pb-live-summary-body>span{
    min-width:0;
  }
  .cg-incoming-detail-premium .cg-pb-activation-actions{
    position:sticky;
    bottom:0;
    z-index:6;
    margin:0 -13px -13px;
    padding:10px 13px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.96);
    border-top:1px solid #dfe7ef;
    backdrop-filter:blur(10px);
  }
  .cg-incoming-detail-premium .cg-pb-activation-actions .cg-btn.primary{
    width:100%;
    min-width:0;
  }
}


/* DEV-CG-INCOMING-003D1 — PB activation state display fix */
.cg-incoming-detail-premium .cg-pb-gate-badge.is-active{
  background:#ecfdf5;
  color:#047857;
  border-color:#a7f3d0;
}
.cg-incoming-detail-premium .cg-pb-activation-overview.is-active{
  background:linear-gradient(135deg,#f0fdf4 0%,#ffffff 58%,#eff6ff 100%);
  border-color:#bbf7d0;
}

/* ==========================================================
   DEV-CG-INCOMING-003E — MOBILE & CROSS-ROLE REGRESSION LOCK
   Presentation hardening only. No workflow/permission/API changes.
   ========================================================== */
body.cg-route-app .cg-incoming-detail-premium,
body.cg-route-app .cg-incoming-detail-premium *,
body.cg-route-app .cg-incoming-edit-screen,
body.cg-route-app .cg-incoming-edit-screen *,
body.cg-route-app .cg-pb-workspace-form,
body.cg-route-app .cg-pb-workspace-form * {
  box-sizing:border-box;
}
body.cg-route-app .cg-incoming-detail-premium > *,
body.cg-route-app .cg-incoming-detail-workspace,
body.cg-route-app .cg-incoming-detail-workspace > .cg-main-col,
body.cg-route-app .cg-incoming-detail-top > *,
body.cg-route-app .cg-incoming-detail-info .cg-info,
body.cg-route-app .cg-incoming-edit-screen > *,
body.cg-route-app .cg-incoming-edit-section,
body.cg-route-app .cg-incoming-edit-section .cg-form-row,
body.cg-route-app .cg-pb-workspace-form > *,
body.cg-route-app .cg-pb-stage,
body.cg-route-app .cg-pb-stage-body,
body.cg-route-app .cg-pb-record-grid > * {
  min-width:0;
}
body.cg-route-app .cg-incoming-detail-premium > .cg-head h1,
body.cg-route-app .cg-incoming-detail-info .cg-info strong,
body.cg-route-app .cg-incoming-edit-screen > .cg-head h1,
body.cg-route-app .cg-pb-activation-overview-copy > strong,
body.cg-route-app .cg-pb-inherited-person,
body.cg-route-app .cg-pb-live-summary-body > span {
  overflow-wrap:anywhere;
  word-break:normal;
}
body.cg-route-app .cg-incoming-edit-section input,
body.cg-route-app .cg-incoming-edit-section select,
body.cg-route-app .cg-incoming-edit-section textarea,
body.cg-route-app .cg-incoming-edit-section input[type="file"],
body.cg-route-app .cg-pb-stage input,
body.cg-route-app .cg-pb-stage select,
body.cg-route-app .cg-pb-stage textarea,
body.cg-route-app .cg-pb-stage input[type="file"] {
  max-width:100%;
}
body.cg-route-app .cg-record-screen .cg-record-table-wrap,
body.cg-route-app .cg-record-screen .cg-table-wrap {
  max-width:100%;
}

@media(max-width:900px){
  body.cg-route-app .cg-incoming-detail-premium > .cg-head,
  body.cg-route-app .cg-incoming-edit-screen > .cg-head {
    align-items:flex-start!important;
  }
  body.cg-route-app .cg-incoming-detail-premium .cg-head-actions,
  body.cg-route-app .cg-incoming-edit-screen .cg-head-actions {
    flex-wrap:wrap!important;
  }
  body.cg-route-app .cg-pb-activation-overview {
    align-items:flex-start!important;
  }
}

@media(max-width:720px){
  body.cg-route-app .cg-incoming-detail-premium,
  body.cg-route-app .cg-incoming-edit-screen {
    width:100%!important;
    max-width:100%!important;
  }
  body.cg-route-app .cg-incoming-detail-premium > .cg-head,
  body.cg-route-app .cg-incoming-edit-screen > .cg-head {
    gap:10px!important;
  }
  body.cg-route-app .cg-incoming-detail-premium > .cg-head h1,
  body.cg-route-app .cg-incoming-edit-screen > .cg-head h1 {
    font-size:clamp(17px,5vw,21px)!important;
    line-height:1.25!important;
  }
  body.cg-route-app .cg-incoming-detail-premium .cg-head-actions,
  body.cg-route-app .cg-incoming-edit-screen .cg-head-actions {
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body.cg-route-app .cg-incoming-detail-premium .cg-head-actions .cg-btn,
  body.cg-route-app .cg-incoming-edit-screen .cg-head-actions .cg-btn {
    width:100%!important;
    min-width:0!important;
  }
  body.cg-route-app .cg-incoming-detail-info .cg-info-grid {
    grid-template-columns:1fr!important;
  }
  body.cg-route-app .cg-incoming-detail-info .cg-info,
  body.cg-route-app .cg-incoming-detail-premium .cg-panel,
  body.cg-route-app .cg-pb-stage,
  body.cg-route-app .cg-pb-inherited,
  body.cg-route-app .cg-pb-activation-overview {
    max-width:100%!important;
  }
  body.cg-route-app .cg-incoming-edit-section input,
  body.cg-route-app .cg-incoming-edit-section select,
  body.cg-route-app .cg-incoming-edit-section textarea,
  body.cg-route-app .cg-pb-stage input,
  body.cg-route-app .cg-pb-stage select,
  body.cg-route-app .cg-pb-stage textarea {
    font-size:16px!important;
  }
  body.cg-route-app .cg-incoming-edit-upload-row input[type="file"],
  body.cg-route-app .cg-pb-stage input[type="file"] {
    width:100%!important;
    min-width:0!important;
  }
  body.cg-route-app .cg-pb-activation-overview {
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  body.cg-route-app .cg-pb-gate-badge {
    justify-self:start!important;
  }
  body.cg-route-app .cg-pb-stage-assignment .cg-officer-checkbox-grid {
    grid-template-columns:1fr!important;
  }
  body.cg-route-app .cg-pb-live-summary-body {
    grid-template-columns:1fr!important;
  }
  body.cg-route-app .cg-pb-activation-actions {
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
}

@media(max-width:430px){
  body.cg-route-app .cg-incoming-detail-premium .cg-head-actions,
  body.cg-route-app .cg-incoming-edit-screen .cg-head-actions {
    grid-template-columns:1fr!important;
  }
  body.cg-route-app .cg-incoming-edit-actions {
    grid-template-columns:1fr!important;
  }
}

/* DEV-CG-INCOMING-003F — Inline JKR File Lookup (PB Activation) */
.cg-pb-file-ref-row{position:relative}
.cg-pb-file-ref-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.cg-pb-file-lookup-btn{white-space:nowrap}
.cg-pb-file-ref-help{display:block;margin-top:7px;line-height:1.45;color:var(--cg-muted,#64748b)}
.cg-pb-file-lookup[hidden]{display:none!important}
.cg-pb-file-lookup{margin-top:12px;padding:14px;border:1px solid #dbe5ef;border-radius:14px;background:#f8fafc;box-shadow:0 10px 28px rgba(15,23,42,.06)}
.cg-pb-file-lookup-search{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.cg-pb-file-lookup-results{display:grid;gap:8px;margin-top:12px;max-height:360px;overflow:auto;padding-right:2px}
.cg-pb-file-lookup-count{font-size:12px;font-weight:700;color:#64748b;padding:0 2px 2px}
.cg-pb-file-result{width:100%;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(100px,.65fr) minmax(100px,.55fr) auto;gap:12px;align-items:center;text-align:left;border:1px solid #dbe5ef;border-radius:12px;background:#fff;padding:12px;cursor:pointer;color:inherit}
.cg-pb-file-result:hover,.cg-pb-file-result:focus-visible{border-color:#94a3b8;box-shadow:0 6px 18px rgba(15,23,42,.08);outline:none}
.cg-pb-file-result-main,.cg-pb-file-result-meta{display:grid;gap:3px;min-width:0}
.cg-pb-file-result-main b{font-size:13px;color:#0f172a;overflow-wrap:anywhere}
.cg-pb-file-result-main small,.cg-pb-file-result-meta small{color:#64748b;overflow-wrap:anywhere}
.cg-pb-file-result-meta b{font-size:12px;color:#334155;overflow-wrap:anywhere}
.cg-pb-file-result-use{font-size:12px;font-weight:800;color:#0f4c81;background:#eaf4ff;border-radius:999px;padding:6px 9px;white-space:nowrap}
@media(max-width:720px){
  .cg-pb-file-ref-inline{grid-template-columns:1fr}
  .cg-pb-file-lookup-btn{width:100%}
  .cg-pb-file-lookup-search{grid-template-columns:1fr 1fr}
  .cg-pb-file-lookup-search input{grid-column:1/-1}
  .cg-pb-file-result{grid-template-columns:1fr auto}
  .cg-pb-file-result-main{grid-column:1/-1}
  .cg-pb-file-result-meta{min-width:0}
  .cg-pb-file-result-use{align-self:center}
}

/* DEV-CG-INCOMING-003F1 — Inline JKR File Lookup Layout Fix
   Fix narrow nested lookup results without changing workflow/API behavior. */
.cg-pb-file-lookup{container-type:inline-size}
.cg-pb-file-result{
  grid-template-columns:minmax(180px,1.6fr) minmax(90px,.65fr) minmax(90px,.55fr) auto;
}
@container (max-width: 620px){
  .cg-pb-file-result{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 10px;
  }
  .cg-pb-file-result-main{grid-column:1/-1}
  .cg-pb-file-result-meta{min-width:0}
  .cg-pb-file-result-use{align-self:center}
}
@container (max-width: 420px){
  .cg-pb-file-lookup-search{grid-template-columns:1fr 1fr}
  .cg-pb-file-lookup-search input{grid-column:1/-1}
  .cg-pb-file-result{grid-template-columns:1fr}
  .cg-pb-file-result-main,.cg-pb-file-result-meta,.cg-pb-file-result-use{grid-column:1}
  .cg-pb-file-result-use{justify-self:start}
}


/* DEV-CG-INCOMING-003F2 — Popup JKR File Lookup + PB record width balance */
@media (min-width:981px){
  .cg-incoming-detail-premium .cg-pb-record-grid{
    grid-template-columns:minmax(180px,.9fr) minmax(360px,1.8fr) minmax(120px,.55fr)!important;
  }
}
body.cg-file-lookup-open{overflow:hidden}
.cg-pb-file-lookup[hidden]{display:none!important}
.cg-pb-file-lookup{
  position:fixed!important;
  inset:0!important;
  z-index:10050!important;
  margin:0!important;
  padding:clamp(16px,3vw,32px)!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:grid;
  place-items:center;
  container-type:normal!important;
}
.cg-pb-file-lookup-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(3px);
  cursor:default;
}
.cg-pb-file-lookup-dialog{
  position:relative;
  z-index:1;
  width:min(820px,calc(100vw - 32px));
  max-height:min(720px,calc(100vh - 40px));
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:14px;
  padding:20px;
  border:1px solid #d9e4ef;
  border-radius:20px;
  background:#fff;
  box-shadow:0 24px 70px rgba(15,23,42,.24);
}
.cg-pb-file-lookup-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom:12px;
  border-bottom:1px solid #e5edf5;
}
.cg-pb-file-lookup-head>div{display:grid;gap:3px;min-width:0}
.cg-pb-file-lookup-head strong{font-size:18px;color:#12253f}
.cg-pb-file-lookup-head small{color:#64748b;line-height:1.45}
.cg-pb-file-lookup-search{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important}
.cg-pb-file-lookup-search input{grid-column:auto!important}
.cg-pb-file-lookup-results{
  margin-top:0!important;
  max-height:none!important;
  min-height:180px;
  overflow:auto;
  padding:2px 4px 2px 0;
}
.cg-pb-file-result{
  grid-template-columns:minmax(0,1.8fr) minmax(110px,.55fr) minmax(100px,.45fr) auto!important;
  gap:14px!important;
}
@media(max-width:760px){
  .cg-pb-file-lookup{padding:12px!important;align-items:end}
  .cg-pb-file-lookup-dialog{
    width:100%;
    max-height:88vh;
    border-radius:18px 18px 14px 14px;
    padding:16px;
  }
  .cg-pb-file-lookup-head{gap:10px}
  .cg-pb-file-lookup-head strong{font-size:16px}
  .cg-pb-file-result{grid-template-columns:1fr auto!important}
  .cg-pb-file-result-main{grid-column:1/-1}
}
@media(max-width:480px){
  .cg-pb-file-lookup-search{grid-template-columns:1fr!important}
  .cg-pb-file-lookup-search input,.cg-pb-file-lookup-search .cg-btn{grid-column:1!important;width:100%}
  .cg-pb-file-result{grid-template-columns:1fr!important}
  .cg-pb-file-result-main,.cg-pb-file-result-meta,.cg-pb-file-result-use{grid-column:1!important}
  .cg-pb-file-result-use{justify-self:start}
}

/* ==========================================================
 * DEV-CG-FILE-REGISTRY-001 — Active Staff Registry
 * Optional reference-only helper. Never changes assignment.
 * ========================================================== */
.cg-active-staff{
  margin-top:14px;
  padding:14px;
  border:1px solid #d9e4ef;
  border-radius:16px;
  background:linear-gradient(135deg,#fbfdff 0%,#f6f9fc 100%);
}
.cg-active-staff-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.cg-active-staff-head strong{display:block;font-size:14px;color:#14253d;margin-top:2px}
.cg-active-staff-head strong small{font-weight:600;color:#6d7f95}
.cg-active-staff-head p{margin:4px 0 0;font-size:12px;line-height:1.45;color:#6d7f95}
.cg-active-staff-body{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;min-height:30px;align-items:center}
.cg-active-staff-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#eaf4ff;border:1px solid #c8def4;color:#17355a;font-size:12px}
.cg-active-staff-chip b{font-weight:700}
.cg-active-staff-chip small{font-size:10px;color:#8a5a00}
.cg-active-staff-chip.is-inactive{background:#fff6e5;border-color:#efd39a;color:#6e5017}
.cg-active-staff-muted{font-size:12px;color:#74869b}
.cg-active-staff-meta{margin-top:8px;font-size:10px;color:#8795a8}
.cg-active-staff-modal[hidden]{display:none!important}
.cg-active-staff-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px}
.cg-active-staff-backdrop{position:absolute;inset:0;border:0;background:rgba(8,20,38,.48);cursor:pointer}
.cg-active-staff-dialog{position:relative;width:min(760px,94vw);max-height:min(78vh,720px);overflow:hidden;background:#fff;border:1px solid #d8e3ef;border-radius:20px;box-shadow:0 24px 70px rgba(15,35,60,.24);display:flex;flex-direction:column}
.cg-active-staff-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid #e7edf4}
.cg-active-staff-dialog-head strong{display:block;font-size:16px;color:#13253d;margin-top:2px}
.cg-active-staff-dialog-head small{display:block;margin-top:4px;color:#728298}
.cg-active-staff-picker{padding:16px 20px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cg-active-staff-option{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid #dce5ef;border-radius:13px;background:#fbfcfe;cursor:pointer}
.cg-active-staff-option:has(input:checked){border-color:#78b5e6;background:#eff8ff;box-shadow:inset 3px 0 #2899df}
.cg-active-staff-option input{margin-top:3px}
.cg-active-staff-option span{min-width:0}
.cg-active-staff-option b{display:block;font-size:13px;color:#14263e}
.cg-active-staff-option small{display:block;margin-top:3px;font-size:11px;color:#74869b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-active-staff-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid #e7edf4;background:#fafcff}
body.cg-active-staff-open{overflow:hidden}

@media (max-width:720px){
  .cg-active-staff{padding:12px;border-radius:14px}
  .cg-active-staff-head{align-items:stretch;flex-direction:column}
  .cg-active-staff-head .cg-btn{width:100%}
  .cg-active-staff-modal{align-items:end;padding:0}
  .cg-active-staff-dialog{width:100%;max-height:88vh;border-radius:20px 20px 0 0}
  .cg-active-staff-picker{grid-template-columns:1fr;padding:14px}
  .cg-active-staff-dialog-head,.cg-active-staff-actions{padding:14px}
  .cg-active-staff-actions .cg-btn{flex:1}
}

/* DEV-CG-OUTGOING-004 — Unified Premium Refinement */
body.cg-route-app .cg-outgoing-list-screen .cg-panel,
body.cg-route-app .cg-outgoing-detail-screen .cg-panel,
body.cg-route-app .cg-outgoing-edit-screen .cg-panel,
body.cg-route-app .cg-outgoing-register-screen .cg-panel{border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.05)}
body.cg-route-app .cg-outgoing-list-screen .cg-record-table th{font-size:.78rem;letter-spacing:.01em;white-space:nowrap}
body.cg-route-app .cg-outgoing-list-screen .cg-record-table td{vertical-align:top;line-height:1.45}
body.cg-route-app .cg-outgoing-detail-screen .cg-info-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body.cg-route-app .cg-outgoing-detail-screen .cg-info-card{min-height:auto}
body.cg-route-app .cg-outgoing-detail-screen .cg-status-box{padding:14px 16px;border-radius:16px}
body.cg-route-app .cg-outgoing-premium-form .cg-form-grid{gap:14px}
body.cg-route-app .cg-outgoing-premium-form .cg-form-row{gap:7px}
body.cg-route-app .cg-outgoing-premium-form textarea{resize:vertical}
.cg-inline-file-lookup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.cg-inline-file-lookup .cg-btn{white-space:nowrap}
.cg-jkr-lookup-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:24px}
.cg-jkr-lookup-backdrop{position:absolute;inset:0;background:rgba(8,20,38,.52);backdrop-filter:blur(4px)}
.cg-jkr-lookup-dialog{position:relative;width:min(880px,96vw);max-height:min(760px,88vh);overflow:hidden;background:#fff;border:1px solid #d7e2ee;border-radius:22px;box-shadow:0 28px 80px rgba(8,20,38,.28);display:flex;flex-direction:column}
.cg-jkr-lookup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px 14px;border-bottom:1px solid #e5edf5}
.cg-jkr-lookup-head h3{margin:3px 0 4px;font-size:1.18rem}.cg-jkr-lookup-head p{margin:0;color:#64748b;font-size:.88rem}
.cg-jkr-lookup-kicker{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:#1476b8}
.cg-jkr-lookup-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:16px 22px;border-bottom:1px solid #eef3f7}
.cg-jkr-lookup-search input{min-width:0}
.cg-jkr-lookup-results{padding:16px 22px 22px;overflow:auto;display:grid;gap:10px}
.cg-jkr-lookup-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;border:1px solid #dbe6f0;border-radius:16px;padding:14px 16px;background:#fbfdff}
.cg-jkr-lookup-main{min-width:0;display:grid;gap:5px}.cg-jkr-lookup-main strong{color:#10233e;overflow-wrap:anywhere}.cg-jkr-lookup-main span{color:#334155;line-height:1.4}.cg-jkr-lookup-main small{color:#64748b}
@media(max-width:900px){body.cg-route-app .cg-outgoing-detail-screen .cg-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){body.cg-route-app .cg-outgoing-detail-screen .cg-info-grid{grid-template-columns:1fr}.cg-inline-file-lookup{grid-template-columns:1fr}.cg-jkr-lookup-modal{align-items:end;padding:0}.cg-jkr-lookup-dialog{width:100%;max-height:90vh;border-radius:22px 22px 0 0}.cg-jkr-lookup-head,.cg-jkr-lookup-search,.cg-jkr-lookup-results{padding-left:16px;padding-right:16px}.cg-jkr-lookup-card{grid-template-columns:1fr}.cg-jkr-lookup-card .cg-btn{width:100%}}

/* DEV-CG-OUTGOING-005-LITE — Multiple Recipients + Multiple Receipt Records */
.cg-outgoing-recipient-field{margin-top:4px}
.cg-outgoing-recipient-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.cg-outgoing-recipient-head>div{display:grid;gap:4px}
.cg-outgoing-recipient-head small{color:#64748b;font-size:12px;line-height:1.45}
.cg-outgoing-recipient-rows{display:grid;gap:10px}
.cg-outgoing-recipient-row{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(180px,.8fr) auto;gap:10px;align-items:end;padding:12px;border:1px solid #d9e4ef;border-radius:14px;background:#f8fbfe}
.cg-outgoing-recipient-row .cg-form-row{margin:0}
.cg-outgoing-recipient-primary-badge{align-self:center;padding:7px 10px;border-radius:999px;background:#eaf4ff;color:#185d91;font-size:11px;font-weight:800;white-space:nowrap}
.cg-outgoing-recipient-remove{align-self:end}
.cg-outgoing-recipient-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cg-outgoing-recipient-chip{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #dce6f0;border-radius:14px;background:#fbfdff}
.cg-outgoing-recipient-chip>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#173e70;color:white;font-size:12px;font-weight:800;flex:0 0 auto}
.cg-outgoing-recipient-chip>div{display:grid;gap:3px;min-width:0}
.cg-outgoing-recipient-chip strong{overflow-wrap:anywhere}
.cg-outgoing-recipient-chip small{color:#64748b}
.cg-multi-receipt-list{display:grid;gap:10px}
.cg-multi-receipt-item{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #dce6f0;border-radius:14px;background:#fbfdff}
.cg-multi-receipt-no{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e7f7ee;color:#137044;font-size:12px;font-weight:800;flex:0 0 auto}
.cg-multi-receipt-item>div{display:grid;gap:3px}
.cg-multi-receipt-item span:not(.cg-multi-receipt-no),.cg-multi-receipt-item small{color:#64748b}
.cg-outgoing-qr-recipient{display:grid;grid-template-columns:auto minmax(220px,1fr);align-items:center;gap:10px;margin:12px 0}
.cg-outgoing-qr-recipient label{font-weight:700;color:#243b59}
.cg-outgoing-qr-recipient select{min-width:0}
@media(max-width:760px){
  .cg-outgoing-recipient-head{align-items:stretch;flex-direction:column}
  .cg-outgoing-recipient-head .cg-btn{width:100%}
  .cg-outgoing-recipient-row{grid-template-columns:1fr}
  .cg-outgoing-recipient-primary-badge,.cg-outgoing-recipient-remove{justify-self:start}
  .cg-outgoing-recipient-list{grid-template-columns:1fr}
  .cg-outgoing-qr-recipient{grid-template-columns:1fr}
}
/* =========================================================
   DEV-CG-FILE-REGISTRY-002A1 — PROFESSIONAL RESULT CARD REDESIGN
   Visual-only: metadata strip replaces narrow boxed columns.
   ========================================================= */
body.cg-route-app .cg-file-registry-search-head>div{display:grid!important;gap:3px!important;}
body.cg-route-app .cg-file-registry-search-head strong{display:block!important;line-height:1.25!important;}
body.cg-route-app .cg-file-registry-search-head span{display:block!important;line-height:1.4!important;}

body.cg-route-app .cg-file-registry-card.cg-file-registry-card-detail.cg-file-registry-card-pro{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:18px!important;
  align-items:center!important;
  padding:15px 16px!important;
  border:1px solid #dde6ef!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(15,23,42,.035)!important;
}
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-main{
  min-width:0!important;
  display:grid!important;
  gap:7px!important;
}
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-main>strong{
  display:block!important;
  font-size:13.5px!important;
  line-height:1.4!important;
  font-weight:650!important;
  color:#172033!important;
  -webkit-line-clamp:3!important;
}
body.cg-route-app .cg-file-registry-meta-strip{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  min-width:0!important;
  margin-top:1px!important;
  color:#52677f!important;
}
body.cg-route-app .cg-file-registry-strip-item{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  min-width:0!important;
  font-size:11.5px!important;
  line-height:1.35!important;
}
body.cg-route-app .cg-file-registry-strip-label{
  color:#75879b!important;
  font-size:10.5px!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
body.cg-route-app .cg-file-registry-strip-item b{
  color:#26384f!important;
  font-size:11.5px!important;
  font-weight:700!important;
  margin:0!important;
}
body.cg-route-app .cg-file-registry-strip-ref b{
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
body.cg-route-app .cg-file-registry-strip-sep{
  color:#b0becd!important;
  font-size:11px!important;
  line-height:1!important;
}
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-folio-missing{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  margin:0!important;
  padding:2px 7px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:1.35!important;
  white-space:nowrap!important;
}
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  align-self:center!important;
  margin:0!important;
}
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-edit-btn{
  min-width:58px!important;
  min-height:34px!important;
  padding:6px 12px!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:700!important;
}
/* Old boxed metadata is intentionally not used by 002A1 cards. */
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-detail-grid{display:none!important;}

@media (max-width:900px){
  body.cg-route-app .cg-file-registry-card.cg-file-registry-card-detail.cg-file-registry-card-pro{
    grid-template-columns:1fr!important;
    gap:11px!important;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-actions{
    justify-content:flex-start!important;
  }
}
@media (max-width:640px){
  body.cg-route-app .cg-file-registry-meta-strip{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
  }
  body.cg-route-app .cg-file-registry-strip-item{
    display:flex!important;
    justify-content:space-between!important;
    gap:14px!important;
    padding:5px 0!important;
    border-top:1px solid #edf2f7!important;
  }
  body.cg-route-app .cg-file-registry-strip-sep{display:none!important;}
  body.cg-route-app .cg-file-registry-strip-ref b{
    white-space:normal!important;
    text-align:right!important;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-actions{
    display:block!important;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-edit-btn{
    width:100%!important;
  }
}


/* =========================================================
   DEV-CG-FILE-REGISTRY-002A2 — METADATA LAYOUT & SEARCH HEADER FIX
   Visual-only. API / permission / pagination / registry data unchanged.
   ========================================================= */
body.cg-route-app .cg-file-registry-search-head{
  display:block!important;
  margin:0 0 9px!important;
}
body.cg-route-app .cg-file-registry-search-copy{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:3px!important;
}
body.cg-route-app .cg-file-registry-search-copy>strong{
  display:block!important;
  margin:0!important;
  font-size:13.5px!important;
  line-height:1.25!important;
  color:#0f2745!important;
}
body.cg-route-app .cg-file-registry-search-copy>span{
  display:block!important;
  margin:0!important;
  font-size:11.5px!important;
  line-height:1.45!important;
  color:#64748b!important;
}

body.cg-route-app .cg-file-registry-card.cg-file-registry-card-detail.cg-file-registry-card-pro{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:20px!important;
  align-items:center!important;
  padding:15px 16px!important;
}
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-main{
  display:grid!important;
  gap:8px!important;
  min-width:0!important;
}
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-main>strong{
  display:block!important;
  margin:0!important;
  color:#172033!important;
  font-size:13.5px!important;
  line-height:1.42!important;
  font-weight:650!important;
}
body.cg-route-app .cg-file-registry-meta-grid{
  display:grid!important;
  grid-template-columns:minmax(220px,1.35fr) minmax(130px,.7fr) minmax(160px,.8fr)!important;
  gap:12px 28px!important;
  align-items:start!important;
  min-width:0!important;
  padding-top:3px!important;
}
body.cg-route-app .cg-file-registry-meta-item{
  display:grid!important;
  gap:3px!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
}
body.cg-route-app .cg-file-registry-meta-item>span{
  display:block!important;
  margin:0!important;
  color:#74879d!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  font-weight:650!important;
}
body.cg-route-app .cg-file-registry-meta-item>b{
  display:block!important;
  margin:0!important;
  color:#22354d!important;
  font-size:11.8px!important;
  line-height:1.35!important;
  font-weight:750!important;
}
body.cg-route-app .cg-file-registry-meta-ref>b{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
body.cg-route-app .cg-file-registry-meta-folio .cg-file-registry-folio-missing{
  display:inline-flex!important;
  justify-self:start!important;
  width:auto!important;
  margin:0!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  border:1px solid #fed7aa!important;
  background:#fff7ed!important;
  color:#9a4d0a!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  font-weight:750!important;
  white-space:nowrap!important;
}
/* 002A1 strip no longer participates in layout. */
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-meta-strip,
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-strip-sep{
  display:none!important;
}

@media (max-width:900px){
  body.cg-route-app .cg-file-registry-card.cg-file-registry-card-detail.cg-file-registry-card-pro{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  body.cg-route-app .cg-file-registry-meta-grid{
    grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.9fr)!important;
    gap:12px 18px!important;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-actions{
    justify-content:flex-start!important;
  }
}
@media (max-width:640px){
  body.cg-route-app .cg-file-registry-search-head{display:block!important;}
  body.cg-route-app .cg-file-registry-meta-grid{
    grid-template-columns:1fr!important;
    gap:0!important;
    padding-top:1px!important;
  }
  body.cg-route-app .cg-file-registry-meta-item{
    grid-template-columns:120px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:baseline!important;
    padding:7px 0!important;
    border-top:1px solid #edf2f7!important;
  }
  body.cg-route-app .cg-file-registry-meta-item>span{font-size:10.5px!important;}
  body.cg-route-app .cg-file-registry-meta-item>b{text-align:right!important;}
  body.cg-route-app .cg-file-registry-meta-ref>b{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
    text-align:right!important;
  }
  body.cg-route-app .cg-file-registry-meta-folio .cg-file-registry-folio-missing{
    justify-self:end!important;
  }
}


/* =========================================================
   DEV-CG-FILE-REGISTRY-002A3 — STRUCTURED METADATA MARKUP FIX
   Markup-first separation. Layout remains readable even without CSS.
   ========================================================= */
body.cg-route-app .cg-file-registry-search-copy{display:block!important;}
body.cg-route-app .cg-file-registry-search-title,
body.cg-route-app .cg-file-registry-search-desc{display:block!important;}
body.cg-route-app .cg-file-registry-search-title{margin:0 0 3px!important;}
body.cg-route-app .cg-file-registry-search-title strong{display:block!important;margin:0!important;font-size:13.5px!important;line-height:1.25!important;color:#0f2745!important;}
body.cg-route-app .cg-file-registry-search-desc{margin:0!important;font-size:11.5px!important;line-height:1.45!important;color:#64748b!important;}
body.cg-route-app .cg-file-registry-title-value,
body.cg-route-app .cg-file-registry-title-value strong{display:block!important;}
body.cg-route-app .cg-file-registry-meta-grid{display:grid!important;grid-template-columns:minmax(240px,1.35fr) minmax(140px,.75fr) minmax(170px,.8fr)!important;gap:14px 34px!important;align-items:start!important;margin-top:2px!important;}
body.cg-route-app .cg-file-registry-meta-item{display:block!important;min-width:0!important;}
body.cg-route-app .cg-file-registry-meta-label{display:block!important;margin:0 0 4px!important;color:#74879d!important;font-size:10.5px!important;line-height:1.2!important;font-weight:650!important;}
body.cg-route-app .cg-file-registry-meta-value{display:block!important;margin:0!important;color:#22354d!important;font-size:11.8px!important;line-height:1.35!important;font-weight:750!important;}
body.cg-route-app .cg-file-registry-meta-ref .cg-file-registry-meta-value{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
body.cg-route-app .cg-file-registry-meta-value.cg-file-registry-folio-missing{display:inline-flex!important;width:auto!important;padding:3px 8px!important;border-radius:999px!important;border:1px solid #fed7aa!important;background:#fff7ed!important;color:#9a4d0a!important;font-size:10.5px!important;font-weight:750!important;white-space:nowrap!important;}
@media(max-width:900px){body.cg-route-app .cg-file-registry-meta-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.9fr)!important;gap:12px 20px!important;}}
@media(max-width:640px){body.cg-route-app .cg-file-registry-meta-grid{grid-template-columns:1fr!important;gap:10px!important;}body.cg-route-app .cg-file-registry-meta-item{padding-top:9px!important;border-top:1px solid #edf2f7!important;}body.cg-route-app .cg-file-registry-meta-ref .cg-file-registry-meta-value{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;}}


/* =========================================================
   DEV-CG-FILE-REGISTRY-002A5 — CLEAN METADATA ROW REDESIGN
   Result-card metadata: one calm horizontal row on desktop,
   progressive stack on narrow screens. Visual-only.
   ========================================================= */
body.cg-route-app .cg-file-registry-card.cg-file-registry-card-detail.cg-file-registry-card-pro{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:20px!important;
  padding:15px 16px!important;
}
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-main{
  display:block!important;
  min-width:0!important;
}
body.cg-route-app .cg-file-registry-card-pro .cg-mini-label{
  margin:0 0 5px!important;
}
body.cg-route-app .cg-file-registry-title-value{
  margin:0 0 11px!important;
}
body.cg-route-app .cg-file-registry-title-value strong{
  display:block!important;
  color:#172033!important;
  font-size:13.5px!important;
  line-height:1.42!important;
  font-weight:650!important;
}
body.cg-route-app .cg-file-registry-meta-row{
  display:grid!important;
  grid-template-columns:minmax(260px,1.45fr) minmax(150px,.75fr) minmax(190px,.9fr)!important;
  gap:18px 36px!important;
  align-items:start!important;
  width:min(100%,900px)!important;
  margin:0!important;
  padding:0!important;
}
body.cg-route-app .cg-file-registry-meta-cell{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
body.cg-route-app .cg-file-registry-meta-row .cg-file-registry-meta-label{
  display:block!important;
  margin:0 0 4px!important;
  color:#74879d!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  font-weight:650!important;
  letter-spacing:.01em!important;
}
body.cg-route-app .cg-file-registry-meta-row .cg-file-registry-meta-value{
  display:block!important;
  margin:0!important;
  color:#22354d!important;
  font-size:11.8px!important;
  line-height:1.35!important;
  font-weight:750!important;
}
body.cg-route-app .cg-file-registry-meta-row .cg-file-registry-meta-ref .cg-file-registry-meta-value{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  overflow-wrap:normal!important;
}
body.cg-route-app .cg-file-registry-meta-row .cg-file-registry-folio-missing{
  display:inline-flex!important;
  width:auto!important;
  padding:3px 8px!important;
  border:1px solid #fed7aa!important;
  border-radius:999px!important;
  background:#fff7ed!important;
  color:#9a4d0a!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  font-weight:750!important;
  white-space:nowrap!important;
}
/* Retire prior 002A2/002A3 metadata containers if stale markup survives cache mixing. */
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-meta-grid{
  margin-top:0!important;
}
@media (max-width:900px){
  body.cg-route-app .cg-file-registry-card.cg-file-registry-card-detail.cg-file-registry-card-pro{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  body.cg-route-app .cg-file-registry-meta-row{
    grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.9fr)!important;
    gap:14px 22px!important;
    width:100%!important;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-actions{
    justify-content:flex-start!important;
  }
}
@media (max-width:640px){
  body.cg-route-app .cg-file-registry-meta-row{
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  body.cg-route-app .cg-file-registry-meta-cell{
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:baseline!important;
    padding:8px 0!important;
    border-top:1px solid #edf2f7!important;
  }
  body.cg-route-app .cg-file-registry-meta-row .cg-file-registry-meta-label{
    margin:0!important;
  }
  body.cg-route-app .cg-file-registry-meta-row .cg-file-registry-meta-value{
    text-align:right!important;
  }
  body.cg-route-app .cg-file-registry-meta-row .cg-file-registry-meta-ref .cg-file-registry-meta-value{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  body.cg-route-app .cg-file-registry-meta-row .cg-file-registry-folio-missing{
    justify-self:end!important;
  }
}

/* DEV-CG-FILE-REGISTRY-002B — Add/Edit Form Premium Refinement */
body.cg-route-app .cg-file-registry-form-panel{
  overflow:hidden;
}
body.cg-route-app .cg-file-registry-form{
  display:grid;
  gap:18px;
}
body.cg-route-app .cg-file-registry-form-section{
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid #dce6f1;
  border-radius:16px;
  background:#fff;
}
body.cg-route-app .cg-file-registry-form-section-head{
  padding-bottom:10px;
  border-bottom:1px solid #e7edf4;
}
body.cg-route-app .cg-file-registry-form-section-head span{
  display:block;
  color:#162a43;
  font-size:14px;
  line-height:1.3;
  font-weight:800;
}
body.cg-route-app .cg-file-registry-form-section-head small{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:11.5px;
  line-height:1.45;
}
body.cg-route-app .cg-file-registry-form-grid{
  display:grid;
  gap:14px;
}
body.cg-route-app .cg-file-registry-form-grid-identity{
  grid-template-columns:minmax(0,2fr) minmax(180px,.75fr);
}
body.cg-route-app .cg-file-registry-form .cg-form-row{
  margin:0;
}
body.cg-route-app .cg-file-registry-form .cg-form-row label{
  display:block;
  margin-bottom:7px;
  color:#243852;
  font-size:12px;
  line-height:1.3;
  font-weight:750;
}
body.cg-route-app .cg-file-registry-form .cg-form-row > small{
  display:block;
  margin-top:6px;
  color:#728197;
  font-size:10.8px;
  line-height:1.45;
}
body.cg-route-app .cg-file-registry-form input,
body.cg-route-app .cg-file-registry-form textarea{
  width:100%;
  border-radius:11px;
}
body.cg-route-app .cg-file-registry-form textarea#frFileTitle{
  min-height:118px;
  resize:vertical;
  line-height:1.55;
}
body.cg-route-app .cg-file-registry-form-folio input{
  max-width:220px;
}
body.cg-route-app .cg-file-registry-form-note{
  display:flex;
  gap:8px 12px;
  align-items:flex-start;
  padding:11px 13px;
  border:1px solid #f0df9d;
  border-radius:12px;
  background:#fffdf3;
  color:#516177;
  font-size:11.2px;
  line-height:1.45;
}
body.cg-route-app .cg-file-registry-form-note strong{
  flex:0 0 auto;
  color:#29384d;
  font-weight:800;
}
body.cg-route-app .cg-file-registry-form-actions{
  margin-top:0;
  padding-top:2px;
}
@media (max-width:760px){
  body.cg-route-app .cg-file-registry-form-grid-identity{
    grid-template-columns:1fr;
  }
  body.cg-route-app .cg-file-registry-form-folio input{
    max-width:none;
  }
  body.cg-route-app .cg-file-registry-form-section{
    padding:14px;
    border-radius:14px;
  }
  body.cg-route-app .cg-file-registry-form-note{
    display:grid;
    gap:3px;
  }
  body.cg-route-app .cg-file-registry-form-actions{
    position:sticky;
    bottom:max(10px,env(safe-area-inset-bottom));
    z-index:4;
    padding:10px;
    border:1px solid #dce6f1;
    border-radius:14px;
    background:rgba(255,255,255,.96);
    box-shadow:0 10px 28px rgba(15,23,42,.12);
    backdrop-filter:blur(8px);
  }
}


/* DEV-CG-FILE-REGISTRY-002B1 — Form Section Hierarchy Fix */
body.cg-route-app .cg-file-registry-form-section{
  position:relative;
  padding:18px;
  border:1px solid #d8e4ef;
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
}
body.cg-route-app .cg-file-registry-form-section + .cg-file-registry-form-section{
  margin-top:2px;
}
body.cg-route-app .cg-file-registry-form-section-head{
  display:block;
  margin:0 0 14px;
  padding:0 0 11px;
  border-bottom:1px solid #e7edf4;
}
body.cg-route-app .cg-file-registry-form-section-head h3{
  display:block;
  margin:0;
  padding:0;
  color:#132a45;
  font-size:14px;
  line-height:1.3;
  font-weight:800;
}
body.cg-route-app .cg-file-registry-form-section-head p{
  display:block;
  margin:4px 0 0;
  padding:0;
  color:#64748b;
  font-size:11.5px;
  line-height:1.45;
  font-weight:500;
}
body.cg-route-app .cg-file-registry-form-section-head span,
body.cg-route-app .cg-file-registry-form-section-head small{
  display:none;
}
body.cg-route-app .cg-file-registry-form-grid-identity{
  grid-template-columns:minmax(0,1fr) minmax(170px,240px);
  column-gap:16px;
  align-items:start;
}
body.cg-route-app .cg-file-registry-form-section .cg-form-row + .cg-form-row{
  margin-top:14px;
}
body.cg-route-app .cg-file-registry-form-grid-identity .cg-form-row + .cg-form-row{
  margin-top:0;
}
@media (max-width:760px){
  body.cg-route-app .cg-file-registry-form-section{
    padding:14px;
    border-radius:14px;
  }
  body.cg-route-app .cg-file-registry-form-grid-identity{
    grid-template-columns:1fr;
    row-gap:14px;
  }
  body.cg-route-app .cg-file-registry-form-grid-identity .cg-form-row + .cg-form-row{
    margin-top:0;
  }
}

/* ==========================================================
 * DEV-CG-FILE-REGISTRY-002C — Active Staff UI Integration
 * Reference-only institutional memory for File Registry.
 * ========================================================== */
body.cg-route-app .cg-file-registry-active-staff{
  margin-top:0;
  border-color:#d7e4ef;
  background:linear-gradient(135deg,#f8fbff 0%,#fbfcfe 100%);
}
body.cg-route-app .cg-file-registry-form .cg-file-registry-active-staff{
  margin:2px 0 0;
}
body.cg-route-app .cg-file-registry-active-staff .cg-kicker{
  color:#2878a8;
}
body.cg-route-app .cg-file-registry-active-staff .cg-active-staff-meta{
  min-height:14px;
}
@media (max-width:720px){
  body.cg-route-app .cg-file-registry-active-staff{margin-top:0}
}


/* DEV-CG-FILE-REGISTRY-002D — FOLIO / RACK / METADATA REFINEMENT */
body.cg-route-app .cg-file-registry-record-meta{
  margin-top:16px;
  padding:14px 16px;
  border:1px solid #e1e8f0;
  border-radius:16px;
  background:linear-gradient(180deg,#fbfdff 0%,#f8fafc 100%);
}
body.cg-route-app .cg-file-registry-record-meta-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px;}
body.cg-route-app .cg-file-registry-record-meta-head strong{display:block;margin-top:2px;color:#17304d;font-size:14px;line-height:1.3;}
body.cg-route-app .cg-file-registry-record-meta-head p{margin:3px 0 0;color:#74859a;font-size:11.5px;line-height:1.45;}
body.cg-route-app .cg-file-registry-record-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px;}
body.cg-route-app .cg-file-registry-record-meta-item{min-width:0;padding:10px 12px;border:1px solid #e8edf3;border-radius:12px;background:#fff;}
body.cg-route-app .cg-file-registry-record-meta-item>span{display:block;margin-bottom:4px;color:#75879b;font-size:10.5px;font-weight:700;line-height:1.25;}
body.cg-route-app .cg-file-registry-record-meta-item>b{display:block;color:#21364f;font-size:12px;font-weight:750;line-height:1.4;overflow-wrap:anywhere;}
body.cg-route-app .cg-file-registry-record-meta-item>b.is-missing{display:inline-flex;width:auto;padding:3px 8px;border:1px solid #fed7aa;border-radius:999px;background:#fff7ed;color:#9a4d0a;font-size:10.5px;}
body.cg-route-app .cg-file-registry-form-location input{font-weight:650;}
body.cg-route-app .cg-file-registry-form-folio input{text-align:center;font-variant-numeric:tabular-nums;}
@media(max-width:700px){
  body.cg-route-app .cg-file-registry-record-meta{padding:12px;border-radius:14px;}
  body.cg-route-app .cg-file-registry-record-meta-grid{grid-template-columns:1fr;gap:8px;}
  body.cg-route-app .cg-file-registry-record-meta-item{padding:9px 10px;}
}


/* ==========================================================
 * DEV-CG-FILE-REGISTRY-002E — MOBILE + CROSS-ROLE REGRESSION LOCK
 * Presentation-only hardening. No File Registry API, role permission,
 * Incoming/Outgoing lookup, workflow or database contract changes.
 * ========================================================== */
body.cg-route-app .cg-file-registry-screen,
body.cg-route-app .cg-file-registry-form-panel,
body.cg-route-app .cg-file-registry-search-panel,
body.cg-route-app .cg-file-registry-list,
body.cg-route-app .cg-file-registry-card-pro,
body.cg-route-app .cg-file-registry-record-meta,
body.cg-route-app .cg-file-registry-active-staff{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
body.cg-route-app .cg-file-registry-search-form{
  display:flex;
  align-items:stretch;
  gap:10px;
  min-width:0;
}
body.cg-route-app .cg-file-registry-search-form input{
  flex:1 1 auto;
  min-width:0;
}
body.cg-route-app .cg-file-registry-results-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px 18px;
  min-width:0;
}
body.cg-route-app .cg-file-registry-results-head>div{min-width:0;}
body.cg-route-app .cg-file-registry-query-badge{
  max-width:min(42vw,340px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.cg-route-app .cg-file-registry-card-pro{
  overflow:hidden;
}
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-main,
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-title-value,
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-meta-row,
body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-meta-cell{
  min-width:0;
}
body.cg-route-app .cg-file-registry-title-value strong{
  overflow-wrap:anywhere;
}
body.cg-route-app .cg-file-registry-form input,
body.cg-route-app .cg-file-registry-form textarea,
body.cg-route-app .cg-file-registry-form select{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
body.cg-route-app .cg-file-registry-active-staff,
body.cg-route-app .cg-file-registry-record-meta{
  overflow:hidden;
}
body.cg-route-app .cg-file-registry-record-meta-item>b,
body.cg-route-app .cg-active-staff-meta,
body.cg-route-app .cg-active-staff-list{
  overflow-wrap:anywhere;
}

@media (max-width:900px){
  body.cg-route-app .cg-file-registry-card.cg-file-registry-card-detail.cg-file-registry-card-pro{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:12px 16px!important;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-meta-row{
    gap:12px 20px!important;
  }
  body.cg-route-app .cg-file-registry-record-meta-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  body.cg-route-app .cg-file-registry-screen{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body.cg-route-app .cg-file-registry-search-panel,
  body.cg-route-app .cg-file-registry-form-panel{
    padding:14px!important;
    border-radius:14px!important;
  }
  body.cg-route-app .cg-file-registry-search-form{
    flex-direction:column;
    gap:8px;
  }
  body.cg-route-app .cg-file-registry-search-form .cg-btn{
    width:100%;
    justify-content:center;
  }
  body.cg-route-app .cg-file-registry-results-head{
    flex-direction:column;
    align-items:stretch;
  }
  body.cg-route-app .cg-file-registry-query-badge{
    align-self:flex-start;
    max-width:100%;
  }
  body.cg-route-app .cg-file-registry-card.cg-file-registry-card-detail.cg-file-registry-card-pro{
    display:block!important;
    padding:14px!important;
    border-radius:14px!important;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-main{
    width:100%;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-meta-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    margin-top:12px!important;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-meta-cell{
    min-width:0!important;
    width:100%!important;
    padding:9px 0!important;
    border-top:1px solid #edf2f7;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-meta-cell:first-child{
    border-top:0;
    padding-top:0!important;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-actions{
    margin-top:10px!important;
    width:100%;
  }
  body.cg-route-app .cg-file-registry-card-pro .cg-file-registry-edit-btn{
    width:100%;
    min-height:40px;
    justify-content:center;
  }
  body.cg-route-app .cg-file-registry-form-section{
    padding:13px!important;
    border-radius:14px!important;
  }
  body.cg-route-app .cg-file-registry-form-section-head h3{
    font-size:14px!important;
  }
  body.cg-route-app .cg-file-registry-form-section-head p{
    font-size:11.5px!important;
    line-height:1.45!important;
  }
  body.cg-route-app .cg-file-registry-form textarea#frFileTitle{
    min-height:110px;
  }
  body.cg-route-app .cg-file-registry-form-actions{
    position:sticky;
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    z-index:8;
    display:grid!important;
    grid-template-columns:1fr 1.35fr;
    gap:8px;
    padding:9px;
    margin:12px -4px 0;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 24px rgba(15,39,69,.10);
  }
  body.cg-route-app .cg-file-registry-form-actions .cg-btn{
    width:100%;
    min-width:0;
    justify-content:center;
  }
  body.cg-route-app .cg-file-registry-record-meta-grid{
    grid-template-columns:1fr;
  }
  body.cg-route-app .cg-file-registry-active-staff{
    padding:12px!important;
  }
}

@media (max-width:420px){
  body.cg-route-app .cg-file-registry-screen{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body.cg-route-app .cg-file-registry-search-panel,
  body.cg-route-app .cg-file-registry-form-panel,
  body.cg-route-app .cg-file-registry-card.cg-file-registry-card-detail.cg-file-registry-card-pro{
    padding:12px!important;
  }
  body.cg-route-app .cg-file-registry-form-actions{
    grid-template-columns:1fr;
  }
}


/* DEV-CG-STAFF-007A — ADMIN STAFF EDIT MODAL */
body.cg-staff-editor-open{overflow:hidden}
.cg-staff-editor-modal{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:24px}
.cg-staff-editor-backdrop{position:absolute;inset:0;border:0;background:rgba(8,20,38,.52);cursor:pointer}
.cg-staff-editor-dialog{position:relative;width:min(980px,96vw);max-height:min(88vh,900px);overflow:auto;border-radius:20px;box-shadow:0 26px 80px rgba(15,35,60,.28)}
.cg-staff-editor-dialog>.cg-panel{margin:0}
.cg-staff-editor-dialog .cg-form{padding-bottom:4px}
@media(max-width:720px){
  .cg-staff-editor-modal{padding:10px;place-items:end center}
  .cg-staff-editor-dialog{width:100%;max-height:92vh;border-radius:18px 18px 10px 10px}
  .cg-staff-editor-dialog .cg-form-grid{grid-template-columns:1fr!important}
  .cg-staff-editor-dialog .cg-form-actions{position:sticky;bottom:0;background:#fff;padding:12px 0 4px;z-index:2}
}


/* ==========================================================
 * DEV-CG-WORKFLOW-PJPAIR-001 — Equal PJ Receive & Handover Flow
 * UI only. Existing workflow/status chain remains unchanged.
 * ========================================================== */
.cg-pjpair-handover-card,
.cg-pjpair-takeover-card{
  border:1px solid rgba(30,64,175,.18);
  background:linear-gradient(135deg,rgba(239,246,255,.92),rgba(255,255,255,.98));
  border-radius:16px;
  padding:16px 18px;
  margin:0 0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.cg-pjpair-handover-card strong,
.cg-pjpair-takeover-card h3{display:block;margin:3px 0 5px;color:#0f172a;}
.cg-pjpair-handover-card p,
.cg-pjpair-takeover-card p{margin:0;color:#64748b;line-height:1.55;}
.cg-pjpair-takeover-card{display:block;}
.cg-pjpair-takeover-card .cg-form-actions{margin-top:16px;}
@media(max-width:720px){
  .cg-pjpair-handover-card{align-items:stretch;flex-direction:column;}
  .cg-pjpair-handover-card .cg-btn{width:100%;}
}


/* DEV-CG-MAKLUMAN-002 — Universal Recipient Inbox & Acknowledgement */
.cg-personal-info-mount{margin:14px 0 0;padding:14px 16px;border:1px solid #d8e2ec;border-radius:16px;background:rgba(255,255,255,.72);box-shadow:none}
.cg-personal-info-mount[hidden]{display:none!important}
.cg-personal-info-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cg-personal-info-head h2{margin:0;font-size:15px;line-height:1.25;color:#152b46}
.cg-personal-info-head p{margin:3px 0 0;font-size:11px;color:#71839a}
.cg-personal-info-list{display:grid;gap:0}
.cg-personal-info-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-top:1px solid #e3ebf2}
.cg-personal-info-row:first-child{border-top:0}
.cg-personal-info-copy{min-width:0;display:grid;gap:3px}
.cg-personal-info-copy strong{font-size:13px;color:#182c45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-personal-info-copy small{font-size:11px;color:#74869d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-personal-info-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cg-personal-info-row.is-read{opacity:.84}
@media(max-width:720px){.cg-personal-info-row{grid-template-columns:1fr}.cg-personal-info-actions{justify-content:flex-start}.cg-personal-info-copy strong,.cg-personal-info-copy small{white-space:normal}}

/* DEV-CG-SUPERADMIN-001A — SELF TEST LATENCY METRICS */
.cg-selftest-latency{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(148,163,184,.22);font-size:12px;color:#64748b}
.cg-selftest-latency span{white-space:nowrap}
.cg-selftest-latency b{color:#0f172a}
body.cg-theme-dark:not(.cg-public-page) .cg-selftest-latency{border-top-color:rgba(148,163,184,.18);color:#94a3b8}
body.cg-theme-dark:not(.cg-public-page) .cg-selftest-latency b{color:#e2e8f0}
@media(max-width:720px){.cg-selftest-latency{display:grid;grid-template-columns:1fr;gap:3px}.cg-selftest-summary{gap:7px}}

/* DEV-CG-SUPERADMIN-001B — Diagnostic Timing Accuracy Fix */
.cg-selftest-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cg-selftest-card-top .cg-selftest-status{margin-bottom:0}
.cg-selftest-perf,.cg-selftest-mini-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:11px;font-weight:800;line-height:1;padding:6px 9px;white-space:nowrap}
.cg-selftest-perf.good,.cg-selftest-mini-status.pass{background:#e9f8ef;color:#147a3b}
.cg-selftest-perf.normal{background:#eef5ff;color:#225ea8}
.cg-selftest-perf.slow{background:#fff4df;color:#9a5a00}
.cg-selftest-perf.critical,.cg-selftest-mini-status.fail{background:#ffe9e9;color:#b42318}
.cg-selftest-chip.perf-good{background:#e9f8ef;color:#147a3b;border-color:#bde8cb}
.cg-selftest-chip.perf-normal{background:#eef5ff;color:#225ea8;border-color:#cadcf6}
.cg-selftest-chip.perf-slow{background:#fff4df;color:#9a5a00;border-color:#f0d39a}
.cg-selftest-chip.perf-critical{background:#ffe9e9;color:#b42318;border-color:#f0b9b9}
.cg-selftest-breakdown{display:grid;gap:8px}
.cg-selftest-breakdown-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid #d8e2ee;border-radius:12px;background:#fff}
.cg-selftest-breakdown-row strong{min-width:0}
body.cg-theme-dark:not(.cg-public-page) .cg-selftest-perf.good,body.cg-theme-dark:not(.cg-public-page) .cg-selftest-mini-status.pass{background:#143523;color:#8ce9ad}
body.cg-theme-dark:not(.cg-public-page) .cg-selftest-perf.normal{background:#152d4c;color:#9ac8ff}
body.cg-theme-dark:not(.cg-public-page) .cg-selftest-perf.slow{background:#3a2b13;color:#ffd27c}
body.cg-theme-dark:not(.cg-public-page) .cg-selftest-perf.critical,body.cg-theme-dark:not(.cg-public-page) .cg-selftest-mini-status.fail{background:#3e1c1c;color:#ffaaaa}
body.cg-theme-dark:not(.cg-public-page) .cg-selftest-breakdown-row{background:#142238;border-color:#30445f;color:#eef5ff}
@media(max-width:680px){.cg-selftest-breakdown-row{grid-template-columns:auto minmax(0,1fr)}.cg-selftest-breakdown-row>span:last-child{grid-column:2}}

/* CASEGO-PROD-ACTIVITY-UI-001 — Filter + Bulan + Tahun */
.cg-activity-toolbar-period{
  grid-template-columns:minmax(240px,1fr) minmax(190px,260px) minmax(150px,180px) minmax(120px,150px) auto auto;
}
@media (max-width:1100px){
  .cg-activity-toolbar-period{
    grid-template-columns:minmax(220px,1fr) minmax(190px,1fr) minmax(140px,1fr) minmax(120px,1fr);
  }
  .cg-activity-toolbar-period .cg-btn{width:100%}
}
@media (max-width:720px){
  .cg-activity-toolbar-period{grid-template-columns:1fr}
}


/* CASEGO-PROD-ACTIVITY-UI-001A
 * Activity header compact/padding polish.
 * Frontend visual-only patch.
 */
body.cg-route-app .cg-activity-workspace > .cg-activity-page-head{
  min-height:0!important;
  padding:18px 22px!important;
  margin-bottom:0!important;
  align-items:center!important;
  border-radius:18px!important;
}

body.cg-route-app .cg-activity-page-head > div:first-child{
  min-width:0;
  padding-right:14px;
}

body.cg-route-app .cg-activity-page-head h1{
  margin:5px 0 4px!important;
  font-size:25px!important;
  line-height:1.12!important;
}

body.cg-route-app .cg-activity-page-head p{
  margin:0!important;
  font-size:12.5px!important;
  line-height:1.45!important;
}

body.cg-route-app .cg-activity-page-head .cg-activity-back{
  display:inline-flex;
  align-items:center;
  min-height:24px;
}

body.cg-route-app .cg-activity-page-head .cg-activity-refresh{
  flex:0 0 auto;
  margin:0 2px 0 18px!important;
  padding:9px 14px!important;
  min-height:40px;
  align-self:center;
}

@media (max-width:720px){
  body.cg-route-app .cg-activity-workspace > .cg-activity-page-head{
    padding:16px!important;
    gap:12px!important;
    align-items:flex-start!important;
  }

  body.cg-route-app .cg-activity-page-head > div:first-child{
    padding-right:0;
  }

  body.cg-route-app .cg-activity-page-head h1{
    font-size:22px!important;
  }

  body.cg-route-app .cg-activity-page-head .cg-activity-refresh{
    margin:2px 0 0 8px!important;
    padding:8px 11px!important;
    min-height:36px;
  }
}


/* CASEGO-PROD-ACTIVITY-UI-001C
 * DIRECT selector fix based on live DevTools inspection.
 * Do not depend on body.cg-route-app because Production <body> has no such class.
 */
.cg-activity-workspace > .cg-activity-page-head{
  min-height:0!important;
  padding:14px 20px!important;
  align-items:center!important;
  gap:14px!important;
}

.cg-activity-page-head > div:first-child{
  min-width:0!important;
  padding-right:18px!important;
}

.cg-activity-page-head h1{
  margin:3px 0 3px!important;
  font-size:23px!important;
  line-height:1.12!important;
}

.cg-activity-page-head p{
  margin:0!important;
  font-size:12px!important;
  line-height:1.4!important;
}

.cg-activity-page-head .cg-activity-back{
  margin:0!important;
  line-height:1.2!important;
}

.cg-activity-page-head .cg-activity-refresh{
  flex:0 0 auto!important;
  align-self:center!important;
  margin:0 4px 0 14px!important;
  padding:8px 13px!important;
  min-height:38px!important;
}

@media(max-width:640px){
  .cg-activity-workspace > .cg-activity-page-head{
    padding:13px 14px!important;
    align-items:flex-start!important;
    gap:10px!important;
  }

  .cg-activity-page-head > div:first-child{
    padding-right:4px!important;
  }

  .cg-activity-page-head h1{
    font-size:21px!important;
    margin:3px 0!important;
  }

  .cg-activity-page-head .cg-activity-refresh{
    margin:1px 2px 0 8px!important;
    padding:7px 10px!important;
    min-height:34px!important;
  }
}

/* CASEGO-PROD-SUPERADMIN-001-FIX-001 — Self Test scoped vertical scroll repair.
   Intentionally scoped to Self Test only; no global body/main overflow changes. */
body.cg-route-app #cgMain > .cg-self-test-screen,
body:not(.cg-public-page) #cgMain > .cg-self-test-screen {
  max-height: calc(100dvh - var(--cg-shell-header-h, 66px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(34px, env(safe-area-inset-bottom)) !important;
}

/* ============================================================
   CASEGO-PROD-COMMUNICATION-001-FIX-002
   QR detail deduplication + recipient-labelled multi-slip print.
   UI/print only. Tracking engine and QR URL remain unchanged.
   ============================================================ */
.cg-qr-print-controls{display:grid;gap:10px;margin-top:12px}
.cg-qr-print-controls .cg-form-row{max-width:560px}
.cg-print-recipient strong{font-size:12px!important;line-height:1.2!important}

@media print {
  body.cg-printing-slip #cgPrintSlipRoot {
    height:auto!important;
    min-height:99mm!important;
  }
  body.cg-printing-slip .cg-print-slip-official {
    page-break-inside:avoid!important;
    break-inside:avoid!important;
  }
  body.cg-printing-slip .cg-print-slip-has-next {
    page-break-after:always!important;
    break-after:page!important;
  }
}


/* CASEGO-PROD-COMMUNICATION-001B — minimal public Incoming status check */
.cg-public-status-card{max-width:520px}
.cg-public-status-result{margin-top:18px;text-align:left}
.cg-public-status-result-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--cg-border,#d9e2ef)}
.cg-public-status-result-head small,.cg-public-status-result-grid small{display:block;font-size:12px;opacity:.72;margin-bottom:4px}
.cg-public-status-result-head strong{font-size:18px}
.cg-public-status-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.cg-public-status-result-grid>div{padding:12px;border:1px solid var(--cg-border,#d9e2ef);border-radius:12px;background:rgba(255,255,255,.35)}
.cg-public-status-result p{margin:14px 0 0;line-height:1.55}
@media(max-width:560px){.cg-public-status-result-grid{grid-template-columns:1fr}}

/* CASEGO-PROD-DASHBOARD-LITE-001C — ROLE HOME UI HARMONIZATION
   Frontend-only. Standardizes the shared role-home visual hierarchy without
   adding widgets, API requests, data reads, workflow logic or permissions. */
body.cg-route-app .cg-dashboard-lite .cg-premium-role-chip{
  min-height:26px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:5px 11px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-kicker{
  display:inline-flex!important;
  align-items:center!important;
  min-height:26px!important;
  margin-left:7px!important;
  vertical-align:middle!important;
  font-size:9.5px!important;
  font-weight:780!important;
  white-space:nowrap!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-insight-grid{
  align-items:stretch!important;
}
body.cg-route-app .cg-dashboard-lite .cg-premium-insight{
  height:100%!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-item{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-item .cg-announcement-foot{
  margin-top:auto!important;
}
body.cg-route-app .cg-dashboard-lite .cg-announcement-item:focus-visible{
  outline:3px solid rgba(47,145,202,.22)!important;
  outline-offset:2px!important;
}
@media(max-width:720px){
  body.cg-route-app .cg-dashboard-lite .cg-premium-kicker{
    display:flex!important;
    width:max-content!important;
    margin:7px 0 0!important;
  }
}
/* 001C END */


/* ============================================================
   CASEGO-PROD-HOTFIX-QR-PRINT-A4-001
   Multi-recipient A4 print repair.
   - A4 portrait
   - max 4 slips per page (2 x 2)
   - each slip remains approximately quarter-A4
   - 5th+ recipient automatically continues on the next A4 page
   UI/print only. Tracking ID, QR URL and backend are unchanged.
   ============================================================ */
body.cg-printing-slip #cgPrintSlipRoot{
  display:block!important;
  width:210mm!important;
  height:auto!important;
  min-height:297mm!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  overflow:visible!important;
}
body.cg-printing-slip .cg-print-page{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:105mm 105mm!important;
  grid-template-rows:148.5mm 148.5mm!important;
  width:210mm!important;
  height:297mm!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#fff!important;
  break-after:page!important;
  page-break-after:always!important;
}
body.cg-printing-slip .cg-print-page:last-child{
  break-after:auto!important;
  page-break-after:auto!important;
}
body.cg-printing-slip .cg-print-page-single{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.cg-printing-slip .cg-print-page .cg-print-slip-official{
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  width:105mm!important;
  height:148.5mm!important;
  min-width:105mm!important;
  max-width:105mm!important;
  min-height:148.5mm!important;
  max-height:148.5mm!important;
  margin:0!important;
  padding:7mm 8mm!important;
  overflow:hidden!important;
  break-inside:avoid!important;
  page-break-inside:avoid!important;
  break-after:auto!important;
  page-break-after:auto!important;
}
body.cg-printing-slip .cg-print-recipient strong{
  max-height:12mm!important;
  overflow:hidden!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

@media print{
  @page{size:A4 portrait;margin:0}
  html,
  body{
    width:210mm!important;
    height:auto!important;
    min-height:297mm!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:#fff!important;
  }
  body.cg-printing-slip #cgPrintSlipRoot{
    position:static!important;
    inset:auto!important;
    left:auto!important;
    top:auto!important;
    display:block!important;
    width:210mm!important;
    height:auto!important;
    min-height:297mm!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  body.cg-printing-slip .cg-print-page{
    display:grid!important;
    grid-template-columns:105mm 105mm!important;
    grid-template-rows:148.5mm 148.5mm!important;
    width:210mm!important;
    height:297mm!important;
    overflow:hidden!important;
  }
  body.cg-printing-slip .cg-print-page-single{
    display:flex!important;
  }
  body.cg-printing-slip .cg-print-page .cg-print-slip-official{
    width:105mm!important;
    height:148.5mm!important;
    min-width:105mm!important;
    max-width:105mm!important;
    min-height:148.5mm!important;
    max-height:148.5mm!important;
    flex:none!important;
  }
}


/* ============================================================
   CASEGO-PROD-HOTFIX-QR-PRINT-A4-002
   Adaptive A4 recipient layout.
   Standard slip size remains 105mm x 148.5mm for every count.
   1 = centered; 2 = top left/right; 3 = 2 top + 1 bottom center;
   4 = normal 2 x 2. 5+ continues on following pages in same pattern.
   Print UI only. QR value/tracking/backend are unchanged.
   ============================================================ */
body.cg-printing-slip .cg-print-page-count-1{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.cg-printing-slip .cg-print-page-count-2{
  display:grid!important;
  grid-template-columns:105mm 105mm!important;
  grid-template-rows:148.5mm 148.5mm!important;
  align-content:start!important;
  justify-content:start!important;
}
body.cg-printing-slip .cg-print-page-count-3{
  display:grid!important;
  grid-template-columns:52.5mm 52.5mm 52.5mm 52.5mm!important;
  grid-template-rows:148.5mm 148.5mm!important;
  align-content:start!important;
  justify-content:start!important;
}
body.cg-printing-slip .cg-print-page-count-3 .cg-print-slip-official:nth-child(1){
  grid-column:1 / span 2!important;
  grid-row:1!important;
}
body.cg-printing-slip .cg-print-page-count-3 .cg-print-slip-official:nth-child(2){
  grid-column:3 / span 2!important;
  grid-row:1!important;
}
body.cg-printing-slip .cg-print-page-count-3 .cg-print-slip-official:nth-child(3){
  grid-column:2 / span 2!important;
  grid-row:2!important;
}
body.cg-printing-slip .cg-print-page-count-4{
  display:grid!important;
  grid-template-columns:105mm 105mm!important;
  grid-template-rows:148.5mm 148.5mm!important;
}

@media print{
  body.cg-printing-slip .cg-print-page-count-1{display:flex!important}
  body.cg-printing-slip .cg-print-page-count-2,
  body.cg-printing-slip .cg-print-page-count-3,
  body.cg-printing-slip .cg-print-page-count-4{display:grid!important}
}


/* CASEGO-PROD-NAV-TASKS-INBOX-001 — dedicated role-priority workspaces */
.cg-inbox-screen .cg-inbox-summary{display:grid;gap:14px}
.cg-inbox-screen .cg-personal-info-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cg-inbox-screen .cg-personal-info-head h2{margin:0}
.cg-inbox-screen .cg-personal-info-head p{margin:3px 0 0;color:var(--muted);font-size:12px}
.cg-inbox-list{display:grid;gap:10px}
.cg-inbox-list .cg-personal-info-row{border:1px solid var(--border);border-radius:14px;padding:13px 14px;background:#fff}
.cg-inbox-list .cg-personal-info-row.is-unread{border-color:#bfdbfe;background:#eff6ff}
.cg-inbox-list .cg-personal-info-row.is-read{background:#f8fafc;color:#475569}
@media(max-width:720px){.cg-inbox-screen .cg-personal-info-head{align-items:flex-start;flex-direction:column}}


/* ============================================================
   CASEGO-PROD-INBOX-002 — Makluman UX & Read State
   On-demand inbox only. No dashboard/login API execution added.
   ============================================================ */
.cg-inbox-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.cg-inbox-stat-grid>article{border:1px solid var(--border);border-radius:14px;background:#fff;padding:12px 14px;box-shadow:var(--shadow)}
.cg-inbox-stat-grid small{display:block;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.cg-inbox-stat-grid strong{display:block;margin-top:3px;font-size:22px;line-height:1.1;color:#172033}
.cg-inbox-list .cg-personal-info-row{position:relative;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease}
.cg-inbox-list .cg-personal-info-row.is-unread{border-color:#bfd7f1!important;border-left:5px solid #3b82c4!important;background:linear-gradient(135deg,#eff7ff 0%,#f8fbff 100%)!important;box-shadow:0 4px 14px rgba(30,90,150,.06)}
.cg-inbox-list .cg-personal-info-row.is-read{border-color:#e2e8f0!important;background:#f8fafc!important;opacity:.88}
.cg-personal-info-state{display:inline-flex;align-items:center;min-height:22px;margin:0 0 6px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.035em}
.cg-personal-info-state.is-new{background:#dbeeff;color:#195b8e}
.cg-personal-info-state.is-received{background:#e7efe9;color:#3f6650}
.cg-personal-info-receipt{margin-top:5px!important;color:#718096!important;line-height:1.35!important;overflow-wrap:anywhere}
.cg-inbox-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:999px;background:#d97706;color:#fff;font-size:10px;font-weight:800;line-height:1}
.cg-side-nav button.has-inbox-unread .cg-nav-label{font-weight:760}
@media(max-width:720px){
  .cg-inbox-stat-grid{grid-template-columns:1fr 1fr}
  .cg-inbox-stat-grid>article:last-child{grid-column:1/-1}
  .cg-inbox-list .cg-personal-info-row{grid-template-columns:1fr!important;align-items:stretch!important}
  .cg-inbox-list .cg-personal-info-actions{justify-content:flex-start!important;flex-wrap:wrap!important}
  .cg-inbox-list .cg-personal-info-actions .cg-btn{flex:1 1 130px}
}


/* ============================================================
   CASEGO-PROD-INBOX-003 — Unified Inbox Types & Tunggakan
   Inbox remains on-demand. Dashboard/login receive no inbox execution.
   ============================================================ */
.cg-inbox-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.cg-inbox-filter .cg-btn{display:inline-flex;align-items:center;gap:7px}
.cg-inbox-filter .cg-btn span{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#eef2f7;color:#475569;font-size:10px;font-weight:800}
.cg-inbox-filter .cg-btn.is-active{border-color:#1e3a8a;background:#eef4ff;color:#1e3a8a}
.cg-inbox-stat-grid>article.is-overdue{border-color:#fecaca;background:#fff7f7}
.cg-inbox-stat-grid>article.is-overdue strong{color:#b91c1c}
.cg-inbox-list .cg-inbox-type-overdue{border-color:#fecaca!important;border-left:5px solid #dc2626!important;background:linear-gradient(135deg,#fff1f2 0%,#fffafa 100%)!important;box-shadow:0 4px 14px rgba(185,28,28,.06)!important;opacity:1!important}
.cg-personal-info-state.is-overdue{background:#fee2e2;color:#991b1b}
.cg-inbox-list .cg-inbox-type-makluman.is-unread{border-left-color:#3b82c4!important}
.cg-inbox-key{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.cg-inbox-key.is-makluman{background:#dbeeff;color:#195b8e}
.cg-inbox-key.is-overdue{background:#fee2e2;color:#991b1b}
.cg-inbox-screen .cg-badge.red{background:#fee2e2;color:#991b1b}
@media(max-width:560px){.cg-inbox-filter{display:grid;grid-template-columns:1fr 1fr}.cg-inbox-filter .cg-btn:first-child{grid-column:1/-1;justify-content:center}.cg-inbox-filter .cg-btn{justify-content:center}}


/* ============================================================
   CASEGO-PROD-INBOX-004 — Searchable Makluman Recipient Selector
   UI-only enhancement over the existing on-demand recipient directory.
   ============================================================ */
.cg-info-recipient-selector{display:grid;gap:10px;margin-top:10px}
.cg-info-recipient-search-wrap{display:flex;align-items:center;gap:10px}
.cg-info-recipient-search{flex:1;min-width:0}
.cg-info-recipient-count{flex:0 0 auto;display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--soft);color:var(--muted);font-size:12px;font-weight:750;white-space:nowrap}
.cg-info-recipient-selected{display:flex;flex-wrap:wrap;gap:7px;min-height:34px;align-items:center}
.cg-info-recipient-none{color:var(--muted);font-size:12px}
.cg-info-recipient-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:6px 7px 6px 10px;border:1px solid #bfdbfe;border-radius:999px;background:#eff6ff;color:#1e3a8a}
.cg-info-recipient-chip>span{display:flex;align-items:baseline;gap:6px;min-width:0}
.cg-info-recipient-chip strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.cg-info-recipient-chip small{font-size:10px;opacity:.72;white-space:nowrap}
.cg-info-recipient-chip button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(30,58,138,.09);color:inherit;font-size:17px;line-height:1;cursor:pointer}
.cg-info-recipient-directory{max-height:300px;overflow:auto;overscroll-behavior:contain;padding-right:4px}
.cg-info-recipient-directory .cg-info-recipient-check.is-selected{border-color:#93c5fd!important;background:#eff6ff!important}
.cg-info-recipient-empty{padding:12px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:560px){
  .cg-info-recipient-search-wrap{align-items:stretch;flex-direction:column}
  .cg-info-recipient-count{width:max-content}
  .cg-info-recipient-directory{max-height:260px}
  .cg-info-recipient-chip>span{align-items:flex-start;flex-direction:column;gap:0}
}

/* =========================================================
   CASEGO-PROD-UI-SIDEBAR-002
   Enterprise Sidebar Maturity Pass
   Visual/navigation hierarchy only. Role visibility and routes unchanged.
   ========================================================= */
body:not(.cg-public-page) .cg-sidebar {
  --cg-nav-row: 30px;
  --cg-nav-icon: 16px;
  --cg-nav-active: #f59e0b;
}

/* Brand: slightly more breathing room, calmer separator. */
body:not(.cg-public-page) .cg-sidebar-brand {
  padding-bottom: 18px !important;
  margin-bottom: 10px !important;
  border-bottom-color: rgba(148,163,184,.20) !important;
}
body:not(.cg-public-page) .cg-sidebar-brand-copy strong {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
body:not(.cg-public-page) .cg-sidebar-brand-copy small {
  margin-top: 2px !important;
  font-size: 10.5px !important;
  letter-spacing: .01em !important;
}

/* Section labels become navigation metadata, not competing headings. */
body:not(.cg-public-page) .cg-nav-group-label {
  margin: 10px 10px 4px !important;
  color: #7f9ab4 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* Consistent navigation rhythm and tap/click target. */
body:not(.cg-public-page) .cg-side-nav button {
  min-height: var(--cg-nav-row) !important;
  margin: 1px 0 !important;
  padding: 0 9px !important;
  gap: 8px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  letter-spacing: -.005em !important;
  color: #b8c8d9 !important;
}
body:not(.cg-public-page) .cg-side-nav .cg-nav-icon {
  flex: 0 0 var(--cg-nav-icon) !important;
  width: var(--cg-nav-icon) !important;
  height: var(--cg-nav-icon) !important;
  opacity: .90;
}
body:not(.cg-public-page) .cg-side-nav button:hover {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.055) !important;
  color: #f8fafc !important;
  transform: none !important;
}

/* Mature current-location treatment: quiet surface + JKR accent rail. */
body:not(.cg-public-page) .cg-side-nav button.active,
body:not(.cg-public-page) .cg-side-nav button[aria-current="page"] {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.085) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body:not(.cg-public-page) .cg-side-nav button.active::before,
body:not(.cg-public-page) .cg-side-nav button[aria-current="page"]::before {
  left: 0 !important;
  top: 5px !important;
  bottom: 5px !important;
  width: 3px !important;
  border-radius: 0 4px 4px 0 !important;
  background: var(--cg-nav-active) !important;
  box-shadow: none !important;
}
body:not(.cg-public-page) .cg-side-nav button.active .cg-nav-icon,
body:not(.cg-public-page) .cg-side-nav button[aria-current="page"] .cg-nav-icon {
  color: #f8c24f !important;
  opacity: 1 !important;
}

/* Operational badges: compact and legible. */
body:not(.cg-public-page) .cg-side-nav button.has-notification::after,
body:not(.cg-public-page) .cg-side-nav button.has-inbox-unread::after {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

/* Profile footer reads as workstation identity rather than another menu item. */
body:not(.cg-public-page) .cg-sidebar-profile {
  min-height: 62px !important;
  margin-top: 10px !important;
  padding: 12px 8px 2px !important;
  border-top-color: rgba(148,163,184,.20) !important;
}
body:not(.cg-public-page) .cg-sidebar-profile-copy strong {
  font-size: 12.25px !important;
  font-weight: 700 !important;
}
body:not(.cg-public-page) .cg-sidebar-profile-copy small {
  margin-top: 3px !important;
  color: #8fa8bf !important;
  font-size: 10.25px !important;
}

/* Collapse control: compact ghost control instead of a floating chevron. */
body:not(.cg-public-page) .cg-sidebar-toggle-row {
  padding: 0 2px 2px !important;
}
body:not(.cg-public-page) .cg-sidebar-toggle {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #c9d6e3 !important;
  font-size: 25px !important;
  box-shadow: none !important;
}
body:not(.cg-public-page) .cg-sidebar-toggle:hover {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

/* Preserve the compact desktop rail. */
body.cg-sidebar-collapsed .cg-side-nav button {
  min-height: 34px !important;
  padding: 0 !important;
}
body.cg-sidebar-collapsed .cg-side-nav button.active::before,
body.cg-sidebar-collapsed .cg-side-nav button[aria-current="page"]::before {
  top: 8px !important;
  bottom: 8px !important;
}
/* CASEGO-PROD-UI-SIDEBAR-002 END */

/* =========================================================
   CASEGO-PROD-UI-TRACKING-GOVGRADE-MOBILE-001R1
   Public QR receipt confirmation — government-grade shell
   ========================================================= */
.cg-tracking-public.cg-tracking-official-page{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  background:
    radial-gradient(circle at top left,rgba(245,158,11,.10),transparent 34%),
    linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%);
}
.cg-tracking-official-card{
  width:min(100%,560px);
  box-sizing:border-box;
  padding:30px;
  border:1px solid #d6dde6;
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 50px rgba(15,23,42,.08),0 2px 6px rgba(15,23,42,.04);
}
.cg-tracking-official-header{
  text-align:center;
  padding-bottom:22px;
  border-bottom:1px solid #e2e8f0;
}
.cg-tracking-official-card .cg-tracking-jkr-logo-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:10px;
}
.cg-tracking-official-card .cg-tracking-jkr-logo{
  width:78px;
  height:auto;
  display:block;
}
.cg-tracking-agency{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:12px;
}
.cg-tracking-agency strong{
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  color:#0f172a;
}
.cg-tracking-agency span{
  font-size:12px;
  color:#64748b;
}
.cg-tracking-record-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  margin-bottom:12px;
  border:1px solid #e8c35a;
  border-radius:999px;
  background:#fff9df;
  color:#7c5a00;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.cg-tracking-official-header h1{
  margin:0;
  color:#0f172a;
  font-size:clamp(24px,5vw,32px);
  line-height:1.2;
  letter-spacing:-.02em;
}
.cg-tracking-intro{
  max-width:430px;
  margin:10px auto 0;
  color:#64748b;
  font-size:14px;
  line-height:1.6;
}
.cg-tracking-document-summary{
  margin-top:22px;
  padding:16px;
  border:1px solid #e2e8f0;
  border-left:4px solid #f59e0b;
  border-radius:10px;
  background:#f8fafc;
  color:#334155;
}
.cg-tracking-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.cg-tracking-meta>div{
  min-width:0;
  padding:12px 14px;
  border:1px solid #e2e8f0;
  border-radius:9px;
  background:#fff;
}
.cg-tracking-meta small{
  display:block;
  margin-bottom:4px;
  color:#64748b;
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
}
.cg-tracking-meta strong{
  display:block;
  color:#0f172a;
  font-size:13px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.cg-tracking-form{
  margin-top:22px;
}
.cg-tracking-form-heading{
  margin-bottom:18px;
}
.cg-tracking-form-heading h2{
  margin:0 0 4px;
  color:#0f172a;
  font-size:17px;
}
.cg-tracking-form-heading p{
  margin:0;
  color:#64748b;
  font-size:13px;
  line-height:1.5;
}
.cg-tracking-form .cg-form-row{
  margin-bottom:16px;
}
.cg-tracking-form label{
  display:block;
  margin-bottom:7px;
  color:#1e293b;
  font-size:13px;
  font-weight:700;
}
.cg-tracking-form input{
  width:100%;
  min-height:48px;
  box-sizing:border-box;
  padding:0 14px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:#0f172a;
  font-size:16px;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.cg-tracking-form input:focus{
  border-color:#3156a3;
  box-shadow:0 0 0 3px rgba(49,86,163,.12);
}
.cg-tracking-form input::placeholder{
  color:#94a3b8;
}
.cg-tracking-required{
  color:#b91c1c;
}
.cg-tracking-submit{
  width:100%;
  min-height:50px;
  margin-top:4px;
  border-radius:9px;
  font-weight:750;
}
.cg-tracking-result{
  margin-top:16px;
}
.cg-tracking-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid #e2e8f0;
  text-align:center;
}
.cg-tracking-footer strong{
  color:#0f172a;
  font-size:13px;
}
.cg-tracking-footer span{
  color:#475569;
  font-size:12px;
}
.cg-tracking-footer small{
  max-width:420px;
  margin-top:3px;
  color:#94a3b8;
  font-size:10.5px;
  line-height:1.45;
}

/* CASEGO-PROD-ANALYTICS-PHASE1-001 */
.cg-analytics-phase1 .cg-head-actions{align-items:center}
.cg-analytics-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cg-analytics-actions label{font-size:12px;font-weight:800;color:#56677a;text-transform:uppercase;letter-spacing:.04em}
.cg-analytics-year{min-width:96px;height:40px;border:1px solid var(--cg-border);border-radius:10px;background:var(--cg-card);color:#172033;padding:0 34px 0 12px;font-weight:800}
.cg-analytics-chart-panel{overflow:hidden}
.cg-analytics-chart-panel .cg-panel-head{margin-bottom:8px}
.cg-analytics-chart-panel .cg-panel-head h2,.cg-analytics-info-panel .cg-panel-head h2{margin:0 0 4px}
.cg-analytics-chart-panel .cg-panel-head p,.cg-analytics-info-panel .cg-panel-head p{margin:0;color:#6b7b8f;font-size:13px}
.cg-analytics-legend{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:12px 0 6px;font-size:12px;font-weight:800;color:#506176}
.cg-analytics-legend span{display:inline-flex;align-items:center;gap:7px}
.cg-analytics-legend i{display:inline-block;width:18px;height:8px;border-radius:3px}
.cg-analytics-legend i.is-incoming{background:#2563eb}
.cg-analytics-legend i.is-outgoing{background:#f59e0b}
.cg-analytics-legend i.is-closed{height:3px;background:#16a34a;position:relative}
.cg-analytics-legend i.is-closed:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#16a34a;left:6px;top:-2px}
.cg-analytics-chart{width:100%;min-height:320px;margin-top:4px}
.cg-analytics-svg{display:block;width:100%;max-width:100%;overflow:visible}
.cg-analytics-grid-line{stroke:#dce4ed;stroke-width:1}
.cg-analytics-axis-line{stroke:#b8c4d2;stroke-width:1.2}
.cg-analytics-axis-text,.cg-analytics-month-text{fill:#68798e;font-size:11px;font-weight:700}
.cg-analytics-bar-incoming{fill:#2563eb}
.cg-analytics-bar-outgoing{fill:#f59e0b}
.cg-analytics-line-closed{fill:none;stroke:#16a34a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cg-analytics-line-dot{fill:#ffffff;stroke:#16a34a;stroke-width:2.5}
.cg-analytics-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.cg-analytics-summary article{background:#f7f9fc;border:1px solid #dbe3ec;border-radius:14px;padding:13px 14px;min-width:0}
.cg-analytics-summary span{display:block;color:#5e7085;font-size:12px;font-weight:800}
.cg-analytics-summary strong{display:block;color:#132844;font-size:24px;line-height:1.15;margin-top:3px}
.cg-analytics-summary small{display:block;color:#8593a4;font-size:11px;margin-top:4px}
.cg-analytics-updated{margin:14px 0 0;color:#708196;font-size:12px}
.cg-analytics-updated strong{color:#4a5b70}
.cg-analytics-explainer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cg-analytics-explainer article{border:1px solid #dde5ee;border-radius:14px;padding:14px;background:#fbfcfe}
.cg-analytics-explainer strong{display:block;color:#172b47;font-size:13px;margin-bottom:5px}
.cg-analytics-explainer p{margin:0;color:#65768a;font-size:12px;line-height:1.55}
.cg-analytics-note{margin:14px 0 0;padding:11px 13px;border-left:3px solid #f2c500;background:#fffbea;border-radius:8px;color:#5f6670;font-size:12px;line-height:1.5}

@media(max-width:720px){
  .cg-analytics-actions{width:100%;justify-content:flex-start}
  .cg-analytics-chart{min-height:300px}
  .cg-analytics-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .cg-analytics-summary article{padding:11px 10px}
  .cg-analytics-summary strong{font-size:21px}
  .cg-analytics-explainer{grid-template-columns:1fr}
}
@media(max-width:430px){
  .cg-analytics-phase1 .cg-head-actions{width:100%}
  .cg-analytics-actions{display:grid;grid-template-columns:auto 1fr auto;width:100%}
  .cg-analytics-year{width:100%;min-width:0}
  .cg-analytics-legend{gap:10px;font-size:11px}
  .cg-analytics-summary{grid-template-columns:1fr}
  .cg-analytics-summary article{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center}
  .cg-analytics-summary span{grid-column:1;grid-row:1}
  .cg-analytics-summary strong{grid-column:2;grid-row:1 / span 2;margin:0;font-size:22px}
  .cg-analytics-summary small{grid-column:1;grid-row:2}
}


/* CASEGO-PROD-OFFICER-METRICS-001C — on-demand compact officer activity view */
.cg-officer-metrics-001c{max-width:1180px;margin:0 auto;}
.cg-officer-metrics-notice{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:13px 15px;border:1px solid #cfe0f6;border-radius:14px;background:#f5f9ff;color:#23415f;}
.cg-officer-metrics-notice-icon{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e4effd;color:#1f5f9f;font-weight:800;}
.cg-officer-metrics-notice strong{display:block;font-size:13px;margin-bottom:3px;}
.cg-officer-metrics-notice p{margin:0;font-size:12px;line-height:1.55;color:#526b84;}
.cg-officer-metrics-control{display:flex;justify-content:space-between;gap:18px;align-items:end;padding:16px 18px;margin-bottom:14px;}
.cg-officer-metrics-control-copy h3{margin:0 0 4px;font-size:16px;color:#12263d;}
.cg-officer-metrics-control-copy p{margin:0;max-width:690px;color:#6a7c90;font-size:12px;line-height:1.5;}
.cg-officer-metrics-actions{display:grid;grid-template-columns:auto 150px auto;gap:8px;align-items:center;flex:0 0 auto;}
.cg-officer-metrics-actions label{font-size:12px;font-weight:700;color:#56697e;}
.cg-officer-metrics-actions select{min-height:40px;}
.cg-officer-metrics-host{min-height:180px;}
.cg-officer-metrics-idle{display:flex;min-height:150px;align-items:center;justify-content:center;flex-direction:column;gap:6px;text-align:center;padding:26px;border:1px dashed #ced8e4;border-radius:16px;background:#fbfcfe;color:#677b90;}
.cg-officer-metrics-idle strong{color:#29405a;font-size:14px;}
.cg-officer-metrics-idle span{font-size:12px;}
.cg-officer-metrics-idle.is-loading{background:#f7fbff;}
.cg-officer-metrics-idle.is-error{background:#fff8f7;border-color:#efc8c2;color:#8b4d45;}
.cg-officer-metrics-loaded{display:grid;gap:10px;}
.cg-officer-metrics-summarybar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 2px 6px;}
.cg-officer-metrics-summarybar>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.cg-officer-metrics-summarybar strong{font-size:18px;color:#183654;}
.cg-officer-metrics-summarybar small,.cg-officer-metrics-source{font-size:11px;color:#79899a;}
.cg-officer-metrics-phase{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.03em;}
.cg-officer-metrics-phase.is-trial{background:#fff3d9;color:#8a5a00;border:1px solid #f0d69b;}
.cg-officer-metrics-phase.is-official{background:#eaf7ef;color:#24663d;border:1px solid #bfe2cd;}
.cg-officer-metrics-tabs{display:flex;gap:7px;align-items:center;padding:2px 0 4px;}
.cg-officer-metrics-tabs button{appearance:none;border:1px solid #d7e0ea;background:#fff;color:#52667b;border-radius:999px;padding:7px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;}
.cg-officer-metrics-tabs button span{opacity:.65;margin-left:4px;}
.cg-officer-metrics-tabs button.is-active{border-color:#376b9f;background:#edf5fd;color:#174e82;}
.cg-officer-metrics-list{display:grid;gap:8px;}
.cg-officer-metrics-row{display:grid;grid-template-columns:minmax(230px,1.6fr) repeat(3,minmax(110px,.7fr));gap:10px;align-items:center;padding:11px 13px;border:1px solid #dde5ed;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.025);}
.cg-officer-metrics-person{display:flex;align-items:center;gap:10px;min-width:0;}
.cg-officer-metrics-person>div{min-width:0;}
.cg-officer-metrics-person strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#172b43;font-size:13px;}
.cg-officer-metrics-person small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7a8998;font-size:10.5px;}
.cg-officer-role{flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:28px;border-radius:9px;font-size:10px;font-weight:850;letter-spacing:.03em;}
.cg-officer-role.is-ee{background:#eaf2ff;color:#255d9b;}
.cg-officer-role.is-pj{background:#eef7ef;color:#337049;}
.cg-officer-metric{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:8px 10px;border-left:1px solid #edf1f5;}
.cg-officer-metric span{font-size:10.5px;color:#75869a;line-height:1.25;}
.cg-officer-metric strong{font-size:20px;line-height:1;color:#193958;font-variant-numeric:tabular-nums;}
.cg-officer-metric.is-unreceived strong{color:#a76416;}
.cg-officer-metrics-pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0 2px;}
.cg-officer-metrics-pager .cg-btn{min-width:40px;padding:7px 10px;}
.cg-officer-metrics-pager span{font-size:11px;color:#718397;}
.cg-officer-metrics-footnote{display:flex;flex-wrap:wrap;gap:8px 16px;padding:7px 2px 0;color:#8391a0;font-size:10.5px;border-top:1px solid #edf1f5;}

@media(max-width:820px){
  .cg-officer-metrics-control{align-items:stretch;flex-direction:column;}
  .cg-officer-metrics-actions{grid-template-columns:auto 1fr auto;}
  .cg-officer-metrics-row{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(80px,.6fr));}
  .cg-officer-metric{padding:7px 8px;}
}
@media(max-width:620px){
  .cg-officer-metrics-actions{grid-template-columns:1fr 1fr;}
  .cg-officer-metrics-actions label{grid-column:1/-1;}
  .cg-officer-metrics-actions .cg-btn{width:100%;}
  .cg-officer-metrics-summarybar{align-items:flex-start;flex-direction:column;gap:5px;}
  .cg-officer-metrics-source{display:none;}
  .cg-officer-metrics-row{grid-template-columns:1fr 1fr 1fr;gap:5px;padding:10px;}
  .cg-officer-metrics-person{grid-column:1/-1;padding-bottom:5px;border-bottom:1px solid #edf1f5;}
  .cg-officer-metric{display:block;text-align:center;border-left:0;padding:6px 3px;min-height:48px;}
  .cg-officer-metric span{display:block;min-height:26px;font-size:9.5px;}
  .cg-officer-metric strong{display:block;font-size:19px;}
  .cg-officer-metrics-footnote{display:block;}
  .cg-officer-metrics-footnote span{display:block;margin-bottom:4px;}
}

/* CASEGO-PROD-PWA-CACHE-MIGRATION-001 — SUPER ADMIN current-device cache maintenance */
.cg-admin-cache-maintenance{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:4px 0}.cg-admin-cache-maintenance-copy{min-width:0}.cg-admin-cache-maintenance-copy strong{display:block;margin-bottom:5px}.cg-admin-cache-maintenance-copy p{margin:0 0 7px;line-height:1.55}.cg-admin-cache-maintenance-copy small{display:block;opacity:.72}.cg-admin-cache-maintenance .cg-btn{flex:0 0 auto;white-space:nowrap}@media(max-width:720px){.cg-admin-cache-maintenance{align-items:stretch;flex-direction:column}.cg-admin-cache-maintenance .cg-btn{width:100%;white-space:normal}}


/* =========================================================
   CASEGO-PROD-UPDATE-HISTORY-001
   Compact on-demand dynamic changelog. No polling/background refresh.
   ========================================================= */
[data-nav-key="updates"] .cg-nav-icon::before{content:""!important;}
[data-nav-key="updates"] .cg-nav-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v6h6'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v6h6'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.cg-update-screen,.cg-update-screen *{font-size:10px;}
.cg-update-screen .cg-head{padding:9px 11px!important;min-height:auto!important;}
.cg-update-screen .cg-head h1{font-size:10px!important;line-height:1.25!important;}
.cg-update-screen .cg-head p,.cg-update-screen .cg-head .cg-badge{font-size:9px!important;}
.cg-update-toolbar{display:flex;gap:6px;align-items:center;margin:0 0 8px;flex-wrap:wrap;}
.cg-update-toolbar .cg-input{width:auto;min-width:120px;min-height:28px;padding:4px 7px;font-size:10px!important;}
.cg-update-history{display:grid;gap:8px;}
.cg-update-day{display:grid;gap:3px;padding-left:12px;position:relative;}
.cg-update-day:before{content:"";position:absolute;left:3px;top:17px;bottom:4px;width:1px;background:#dbe2ea;}
.cg-update-date{position:relative;margin:2px 0 3px;color:#64748b;font-size:9px!important;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.cg-update-date:before{content:"";position:absolute;left:-11px;top:4px;width:5px;height:5px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 2px var(--surface,#fff);}
.cg-update-item{position:relative;padding:6px 8px 7px;border:1px solid #e5eaf1;border-radius:7px;background:rgba(255,255,255,.76);line-height:1.35;}
.cg-update-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:2px;}
.cg-update-version,.cg-update-category,.cg-update-latest{display:inline-flex;align-items:center;min-height:15px;padding:1px 5px;border-radius:999px;font-size:9px!important;font-weight:800;line-height:1;}
.cg-update-version{background:#eef2f7;color:#334155;}
.cg-update-category{background:#eef6ff;color:#315b85;}
.cg-update-latest{background:#fff3d6;color:#8a5a00;}
.cg-update-title{font-size:10px!important;font-weight:800;color:#172033;margin-bottom:1px;}
.cg-update-summary{font-size:10px!important;color:#526171;}
.cg-update-details{margin-top:4px;color:#64748b;}
.cg-update-details summary{cursor:pointer;font-size:9px!important;font-weight:700;}
.cg-update-details div{padding-top:3px;font-size:10px!important;}
.cg-update-remove{position:absolute;right:6px;top:6px;border:0;background:transparent;color:#94a3b8;font-size:9px!important;cursor:pointer;padding:2px 4px;}
.cg-update-remove:hover{color:#b91c1c;}
.cg-update-empty{padding:10px;border:1px dashed #d8e0e9;border-radius:7px;color:#64748b;font-size:10px!important;text-align:center;}
.cg-update-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:9px;color:#64748b;font-size:10px!important;}
.cg-update-pager .cg-btn,.cg-update-screen .cg-btn{min-height:28px;padding:0 8px;font-size:10px!important;}
.cg-update-admin{margin-bottom:9px;padding:8px;border:1px solid #dfe6ee;border-radius:8px;background:#f8fafc;display:grid;gap:6px;}
.cg-update-admin[hidden]{display:none!important;}
.cg-update-admin label{display:grid;gap:3px;color:#475569;font-size:9px!important;font-weight:700;}
.cg-update-admin .cg-input{min-height:28px;padding:5px 7px;font-size:10px!important;}
.cg-update-admin-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
@media(max-width:720px){.cg-update-admin-grid{grid-template-columns:1fr}.cg-update-toolbar{display:grid;grid-template-columns:1fr 1fr}.cg-update-toolbar .cg-input{width:100%;}}
body.cg-dark .cg-update-item{background:rgba(15,23,42,.68);border-color:#25364a;}
body.cg-dark .cg-update-title{color:#e7edf5;}
body.cg-dark .cg-update-summary,body.cg-dark .cg-update-date,body.cg-dark .cg-update-details{color:#9fb0c3;}
body.cg-dark .cg-update-day:before{background:#32445a;}
body.cg-dark .cg-update-version{background:#243447;color:#d7e1eb;}
body.cg-dark .cg-update-category{background:#17324b;color:#b9d9f5;}
body.cg-dark .cg-update-admin{background:#111d2c;border-color:#28394d;}

/* =========================================================
   CASEGO-PROD-UPDATE-HISTORY-001A
   Compact 2-line changelog format.
   ========================================================= */
.cg-update-line{font-size:10px!important;line-height:1.35;color:#526171;padding-right:38px;}
.cg-update-line-version{color:#334155;margin-bottom:2px;}
.cg-update-line-version strong{font-size:10px!important;font-weight:800;color:#172033;}
.cg-update-line-matter{font-size:10px!important;color:#526171;}
.cg-update-key{font-size:10px!important;font-weight:800;color:#334155;}
.cg-update-line .cg-update-latest{vertical-align:middle;margin-left:4px;}
body.cg-dark .cg-update-line,body.cg-dark .cg-update-line-matter{color:#aebdcb;}
body.cg-dark .cg-update-line-version,body.cg-dark .cg-update-line-version strong,body.cg-dark .cg-update-key{color:#e3eaf2;}