/*
 * 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;display:grid;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: 10px !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: 13px !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: 30px !important;
  padding: 0 10px !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: 32px 18px;
  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(460px, 100%);
}

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

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

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

.cg-login-official-brand p {
  margin: 6px 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: 30px;
}

.cg-login-official-lock {
  width: 80px;
  height: 80px;
  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: 80px;
  height: 80px;
  object-fit: contain;
}

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

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

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

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

.cg-login-official-field input {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  padding: 0 14px;
  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: 86px;
}

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

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

.cg-login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  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: 50px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #f2c500, #ffd84d);
  color: #111827;
  font-weight: 900;
  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: 4px;
  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 14px;
  }

  .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: 15px !important;
  font-weight: 700 !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(3, 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: 9px !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: 12.5px !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: 8px;
  --cg-space-3: 12px;
  --cg-space-4: 16px;
  --cg-space-5: 20px;
  --cg-space-6: 24px;
  --cg-space-8: 32px;
  --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: 126px !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: 2px 0 0;
  font-size: clamp(1.65rem, 1.52rem + .32vw, 2rem) !important;
  font-weight: var(--cg-font-semibold) !important;
  line-height: 1.05;
  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 11px !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 { -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;
  gap: 10px;
  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: left center;
  margin: 0 !important;
  transition: opacity .18s ease, width .22s ease;
}
.cg-sidebar-brand-copy { display: block; margin-top: 8px; }
.cg-sidebar-brand-copy strong,
.cg-sidebar-brand-copy small {
  display: block;
  color: var(--cg-sidebar-text) !important;
  line-height: 1.35;
}
.cg-sidebar-brand-copy strong { font-size: 13px !important; font-weight: 650 !important; }
.cg-sidebar-brand-copy small { margin-top: 2px; color: #f5bd36 !important; font-size: 11.5px !important; font-weight: 650; }
.cg-sidebar-toggle {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(5, 20, 38, .28);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  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 14px;
  flex: 0 0 auto;
}
.cg-sidebar-search-wrap input {
  width: 100%;
  min-height: 40px;
  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: 12px !important;
  width: 100%;
  min-height: 42px !important;
  margin: 2px 0;
  padding: 0 12px !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: 600 !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-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 { 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: 2px 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: 20px !important;
  height: 20px !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 */