/* CaseGo V3 — Modern layer (FE-UI-001, 2026-11-11).
 * Everything here is scoped to body.cg-v3-modern or m-* classes and can be removed safely:
 * delete the link in index.html and delete the <script defer src="assets/js/modern-ui.js"> line.
 * Objective: one serious records tool. No decorative dashboards; real work first. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("../fonts/figtree-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("../fonts/figtree-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
body.cg-v3-modern, body.cg-v3-modern button, body.cg-v3-modern input, body.cg-v3-modern select, body.cg-v3-modern textarea{ font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important; font-feature-settings:"tnum" 1,"cv11" 1; }
body.cg-v3-modern{
  --m-bg:#F4F6FA; --m-surface:#FFFFFF; --m-border:#E4E8F0; --m-ink:#0F1A2E; --m-text:#243247;
  --m-muted:#66728A; --m-faint:#8C97AB;
  --m-side-bg:#0A1322; --m-side-surface:#111E33; --m-side-text:#A8B4C7; --m-side-hi:#F0F5FF;
  --m-accent:#F5A800; --m-accent-ink:#3A2B00; --m-accent-soft:#FFF4D1;
  --m-primary:#1F5BE0; --m-primary-deep:#1747B8; --m-primary-soft:#E8EFFC;
  --m-green:#17804C; --m-green-soft:#DCF5E7; --m-amber:#8A5A00; --m-amber-soft:#FCEFD2;
  --m-red:#B42318; --m-red-soft:#FBE5E1; --m-gray:#4A5568; --m-gray-soft:#EDF1F6;
  --m-radius:12px; --m-radius-sm:9px; --m-shadow:0 1px 2px rgba(15,26,46,.05),0 1px 3px rgba(15,26,46,.06);
  --m-focus:0 0 0 3px rgba(31,91,224,.22);
}

/* ---------- shell: sidebar ---------- */
body.cg-v3-modern:not(.cg-public-page){ background:var(--m-bg) !important; }
body.cg-v3-modern:not(.cg-public-page){ --cg-shell-sidebar-wide:240px; --cg-shell-sidebar-narrow:78px; --cg-sidebar-expanded:240px; --cg-sidebar-collapsed:78px; --cg-shell-header-h:64px; }
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar{
  background:var(--m-side-bg) !important; padding:14px 12px 12px !important; gap:8px !important;
  border-right:1px solid rgba(255,255,255,.05) !important; box-shadow:none !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-brand{ padding:2px 8px 10px !important; gap:10px !important; align-items:center !important; flex-direction:row !important; text-align:left !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-brand-main img{ width:112px !important; max-width:none !important; height:auto !important; border-radius:0 !important; object-fit:contain !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-brand-copy strong{ font-size:11px !important; font-weight:600 !important; color:var(--m-side-hi) !important; letter-spacing:.02em !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-brand-copy small{ font-size:10.5px !important; color:var(--m-accent) !important; letter-spacing:.03em !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-toggle-row{ position:absolute !important; top:18px !important; right:10px !important; padding:0 !important; justify-content:flex-end !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-toggle{
  width:26px !important; height:26px !important; border-radius:8px !important; background:var(--m-side-surface) !important; border:none !important;
  color:var(--m-side-text) !important; font-size:16px !important; line-height:1 !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav{ gap:2px !important; padding-top:8px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-nav-group-label{
  font-size:10.5px !important; font-weight:600 !important; letter-spacing:.08em !important; color:rgba(168,180,199,.55) !important;
  padding:16px 10px 6px !important; margin:0 !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button{
  width:100% !important; display:flex !important; align-items:center !important; gap:10px !important;
  min-height:38px !important; padding:8px 10px !important; border-radius:9px !important; border:none !important;
  background:transparent !important; color:var(--m-side-text) !important; font-size:13.5px !important; font-weight:500 !important; letter-spacing:0 !important; text-align:left !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button:hover{ background:var(--m-side-surface) !important; color:var(--m-side-hi) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button:focus-visible{ outline:none !important; box-shadow:0 0 0 2px rgba(245,168,0,.5) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button.active{
  background:linear-gradient(0deg,rgba(245,168,0,.16),rgba(245,168,0,.16)),var(--m-side-surface) !important;
  box-shadow:inset 3px 0 0 var(--m-accent) !important; color:#FFFFFF !important; font-weight:600 !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-nav-icon{
  width:20px !important; height:20px !important; flex:none !important; display:grid !important; place-items:center !important;
  -webkit-mask:none !important; mask:none !important; -webkit-mask-image:none !important; mask-image:none !important;
  font-size:0 !important; color:inherit !important; position:relative !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-nav-icon::before, body.cg-v3-modern:not(.cg-public-page) .cg-nav-icon::after{ content:none !important; display:none !important; } /* icons are injected SVG (modern-ui.js) */
body.cg-v3-modern:not(.cg-public-page) .cg-bottom-nav .cg-nav-icon{ margin:0 auto !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-bottom-nav button.active .cg-nav-icon{ color:var(--m-primary-deep) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-nav-icon .m-ico{ width:18px; height:18px; display:block; }
body.cg-v3-modern:not(.cg-public-page) .cg-nav-label{ flex:1 !important; min-width:0 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button.has-notification::after{
  content:attr(data-notification-count) !important; position:static !important; margin-left:auto !important; transform:none !important;
  min-width:18px !important; height:18px !important; padding:0 5px !important; border-radius:999px !important;
  background:var(--m-red-soft) !important; color:var(--m-red) !important; font-size:11px !important; font-weight:700 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-profile{
  margin-top:auto !important; border-top:1px solid rgba(255,255,255,.06) !important; padding:10px 8px 2px !important; gap:10px !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-avatar{ width:34px !important; height:34px !important; background:var(--m-side-surface) !important; border:1px solid rgba(255,255,255,.08) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-avatar span{ color:var(--m-accent) !important; font-weight:700 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-avatar i{ background:#3DDC84 !important; box-shadow:0 0 0 2px var(--m-side-bg) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-profile-copy strong{ font-size:13px !important; color:var(--m-side-hi) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-profile-copy small{ font-size:11px !important; color:var(--m-side-text) !important; }
/* collapsed rail: icons remain centred and tappable */
body.cg-v3-modern.cg-sidebar-collapsed .cg-side-nav > button{ justify-content:center !important; padding:8px 0 !important; min-height:42px !important; }
body.cg-v3-modern.cg-sidebar-collapsed .cg-side-nav > button.active{ box-shadow:none !important; border-radius:12px !important; }
body.cg-v3-modern.cg-sidebar-collapsed .cg-sidebar-brand{ justify-content:center !important; padding-bottom:14px !important; }

/* ---------- shell: header ---------- */
body.cg-v3-modern:not(.cg-public-page) .cg-header{
  background:rgba(255,255,255,.97) !important; border-bottom:1px solid var(--m-border) !important; box-shadow:none !important;
  height:64px !important; min-height:64px !important; padding:0 24px !important;
  display:flex !important; align-items:center !important; gap:16px !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-search{ flex:1 1 auto !important; max-width:640px !important; position:relative !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-search input{
  width:100% !important; height:40px !important; border-radius:10px !important; border:1px solid var(--m-border) !important;
  background:#FBFCFE !important; color:var(--m-text) !important; font-size:13.5px !important; padding:0 76px 0 38px !important;
  box-shadow:none !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-search input:focus{ border-color:var(--m-primary) !important; background:#fff !important; box-shadow:var(--m-focus) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-search::before{
  content:""; position:absolute; left:13px; top:50%; width:16px; height:16px; transform:translateY(-50%);
  background:var(--m-faint);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
}
body.cg-v3-modern:not(.cg-public-page) .cg-search button{ position:absolute !important; right:6px !important; top:50% !important; transform:translateY(-50%) !important; height:28px !important; border-radius:8px !important; border:none !important; background:transparent !important; color:var(--m-faint) !important; font-size:15px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-search .m-header-search-kbd{
  position:absolute; right:36px; top:50%; transform:translateY(-50%); font-size:11px; font-weight:600; color:var(--m-faint);
  border:1px solid var(--m-border); border-radius:6px; padding:1px 6px; background:#fff;
}
body.cg-v3-modern:not(.cg-public-page) .cg-header-clock{
  margin-left:auto !important; display:flex !important; flex-direction:column !important; align-items:flex-end !important; line-height:1.15 !important; white-space:nowrap !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-header-clock strong{ font-size:14px !important; font-weight:600 !important; color:var(--m-ink) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-header-clock span{ font-size:11.5px !important; color:var(--m-muted) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-header-actions{ display:flex !important; align-items:center !important; gap:6px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-header-actions > *{ display:inline-flex !important; align-items:center !important; gap:6px !important; height:36px !important; border-radius:10px !important; border:none !important; background:transparent !important; color:var(--m-muted) !important; font-size:12.5px !important; font-weight:500 !important; padding:0 10px !important; box-shadow:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-header-actions > *:hover{ background:var(--m-gray-soft) !important; color:var(--m-text) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-user{ font-weight:600 !important; color:var(--m-text) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-user .cg-dot.online{ width:7px !important; height:7px !important; background:#3DDC84 !important; box-shadow:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-header-logout{ color:var(--m-red) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-header-logout .m-ico{ width:16px; height:16px; }
body.cg-v3-modern:not(.cg-public-page) .cg-header-logout .cg-logout-icon{ display:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-theme-toggle{ justify-content:center !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-theme-toggle-label, body.cg-v3-modern:not(.cg-public-page) .cg-logout-label{ display:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-theme-toggle .cg-theme-toggle-icon{ font-size:15px !important; }

/* ---------- primitives ---------- */
body.cg-v3-modern:not(.cg-public-page) .cg-screen{ max-width:1240px !important; margin:0 auto !important; padding:24px 24px 48px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-head{
  display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:16px !important;
  background:none !important; border:none !important; border-radius:0 !important; padding:0 !important; margin:0 0 20px !important; box-shadow:none !important; flex-wrap:wrap !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-head h1{ font-size:21px !important; font-weight:700 !important; letter-spacing:-.015em !important; color:var(--m-ink) !important; margin:0 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-head p{ font-size:13px !important; color:var(--m-muted) !important; margin:5px 0 0 !important; max-width:640px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-head .cg-badge{
  background:var(--m-accent-soft) !important; color:var(--m-accent-ink) !important; border:none !important;
  font-size:10.5px !important; font-weight:700 !important; letter-spacing:.07em !important; text-transform:uppercase !important;
  padding:4px 9px !important; margin:0 0 10px !important; border-radius:7px !important; max-width:none !important; white-space:nowrap !important; text-align:left !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-head-actions{ display:flex !important; gap:8px !important; align-items:center !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-panel{
  background:var(--m-surface) !important; border:1px solid var(--m-border) !important; border-radius:var(--m-radius) !important;
  box-shadow:var(--m-shadow) !important; padding:18px 20px !important; margin:0 0 16px !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-panel h2, body.cg-v3-modern:not(.cg-public-page) .cg-panel h3{
  font-size:15px !important; font-weight:650 !important; color:var(--m-ink) !important; margin:0 !important; letter-spacing:-.01em !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-panel .cg-panel-head{ padding:0 !important; margin:0 0 14px !important; border:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-panel .cg-panel-head p, body.cg-v3-modern:not(.cg-public-page) .cg-panel-subtitle{ font-size:12.5px !important; color:var(--m-muted) !important; margin:3px 0 0 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-empty{
  border:1px dashed var(--m-border) !important; border-radius:var(--m-radius) !important; background:#FBFCFE !important;
  color:var(--m-muted) !important; font-size:13px !important; padding:22px !important; text-align:center !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important;
  height:36px !important; min-height:36px !important; padding:0 14px !important; border-radius:9px !important;
  border:1px solid var(--m-border) !important; background:var(--m-surface) !important; color:var(--m-text) !important;
  font-size:13px !important; font-weight:600 !important; letter-spacing:0 !important; box-shadow:none !important; white-space:nowrap !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-btn:hover{ background:#F7F9FC !important; border-color:#D5DCE8 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-btn:focus-visible{ outline:none !important; box-shadow:var(--m-focus) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-btn.primary, body.cg-v3-modern:not(.cg-public-page) .cg-btn-primary, body.cg-v3-modern:not(.cg-public-page) .cg-btn.primary-action{
  background:var(--m-primary) !important; border-color:var(--m-primary) !important; color:#FFFFFF !important; font-weight:600 !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-btn.primary:hover, body.cg-v3-modern:not(.cg-public-page) .cg-btn-primary:hover{ background:var(--m-primary-deep) !important; border-color:var(--m-primary-deep) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-btn.danger, body.cg-v3-modern:not(.cg-public-page) .cg-btn-danger{ background:var(--m-red) !important; border-color:var(--m-red) !important; color:#fff !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-btn:disabled{ opacity:.55 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-btn-small, body.cg-v3-modern:not(.cg-public-page) .cg-btn.cg-btn-small{ height:30px !important; min-height:30px !important; padding:0 11px !important; font-size:12.5px !important; border-radius:8px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-text-btn{ color:var(--m-primary) !important; background:none !important; border:none !important; font-size:13px !important; font-weight:600 !important; padding:0 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-btn .m-ico{ width:15px; height:15px; }
body.cg-v3-modern:not(.cg-public-page) .cg-search-row{ gap:10px !important; align-items:center !important; }
body.cg-v3-modern:not(.cg-public-page) input, body.cg-v3-modern:not(.cg-public-page) select, body.cg-v3-modern:not(.cg-public-page) textarea{
  border:1px solid var(--m-border) !important; background:var(--m-surface) !important; border-radius:9px !important;
  font-size:13.5px !important; color:var(--m-text) !important; min-height:38px !important; box-shadow:none !important;
}
body.cg-v3-modern:not(.cg-public-page) input:focus, body.cg-v3-modern:not(.cg-public-page) select:focus, body.cg-v3-modern:not(.cg-public-page) textarea:focus{
  border-color:var(--m-primary) !important; box-shadow:var(--m-focus) !important; outline:none !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-card{ background:var(--m-surface) !important; border:1px solid var(--m-border) !important; border-radius:var(--m-radius) !important; box-shadow:var(--m-shadow) !important; }
/* status badges: short, no wrap, dot-coded */
body.cg-v3-modern:not(.cg-public-page) .cg-badge:not(.m-badge-head){
  max-width:none !important; white-space:nowrap !important; text-align:left !important; border:none !important;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  font-size:11.5px !important; font-weight:650 !important; letter-spacing:0 !important; text-transform:none !important;
  padding:4px 10px !important; border-radius:999px !important; background:var(--m-gray-soft) !important; color:var(--m-gray) !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-badge:not(.m-badge-head)::before{ content:"" !important; width:7px !important; height:7px !important; border-radius:50% !important; background:currentColor !important; flex:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-badge.blue{ background:var(--m-primary-soft) !important; color:var(--m-primary-deep) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-badge.green{ background:var(--m-green-soft) !important; color:var(--m-green) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-badge.red{ background:var(--m-red-soft) !important; color:var(--m-red) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-badge.amber{ background:var(--m-amber-soft) !important; color:var(--m-amber) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-badge.m-badge-head{ text-transform:none; }
/* toasts & spinner */
body.cg-v3-modern:not(.cg-public-page) .cg-toast{ border-radius:10px !important; background:#101B2E !important; color:#fff !important; box-shadow:0 10px 30px rgba(10,19,34,.35) !important; font-size:13px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-spinner{ width:26px !important; height:26px !important; border-width:3px !important; border-color:var(--m-border) !important; border-top-color:var(--m-primary) !important; }
body.cg-v3-modern:not(.cg-public-page) ::-webkit-scrollbar{ width:10px; height:10px; }
body.cg-v3-modern:not(.cg-public-page) ::-webkit-scrollbar-thumb{ background:#C9D2E1; border-radius:8px; border:2px solid var(--m-bg); }
body.cg-v3-modern:not(.cg-public-page) ::-webkit-scrollbar-track{ background:transparent; }
body.cg-v3-modern:not(.cg-public-page) :focus-visible{ outline:none; box-shadow:var(--m-focus); }

/* ---------- record tables ---------- */
body.cg-v3-modern:not(.cg-public-page) .cg-record-table-wrap{ border:none !important; box-shadow:none !important; overflow-x:auto !important; }
/* column sizing: ID 90px, Title flex, Ref 130px, Sender 130px, Date×2 88px, Assigned 160px, Status 140px */
body.cg-v3-modern:not(.cg-public-page) .cg-record-table{ table-layout:fixed !important; width:100% !important; min-width:860px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table .cg-id-col{ width:90px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table .title-col{ min-width:0 !important; max-width:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td{ white-space:normal !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td .cg-badge{ white-space:nowrap !important; max-width:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table{ width:100% !important; min-width:0 !important; border-collapse:collapse !important; table-layout:fixed !important; background:transparent !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table-wrap{ overflow-x:visible !important; border:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table thead th{ overflow:hidden !important; text-overflow:ellipsis !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table tbody td{ overflow:hidden !important; overflow-wrap:anywhere !important; word-break:normal !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="No. Rujukan Surat"], body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="No. Rujukan Surat Keluar"]{ font-size:12px !important; color:var(--m-muted) !important; font-variant-numeric:tabular-nums !important; white-space:nowrap !important; text-overflow:ellipsis !important; overflow:hidden !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Nama Pengirim"], body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Nama Penerima"]{ color:var(--m-text) !important; font-size:12.5px !important; white-space:nowrap !important; text-overflow:ellipsis !important; overflow:hidden !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label^="Tarikh"]{ white-space:nowrap !important; font-size:12.5px !important; color:var(--m-text) !important; font-variant-numeric:tabular-nums !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Ditugaskan Kepada"], body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Pengirim"], body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Penerima"]{ font-size:12.5px !important; white-space:nowrap !important; text-overflow:ellipsis !important; overflow:hidden !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Ditugaskan Kepada"].m-unassigned{ color:var(--m-faint) !important; font-style:italic; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Status"]{ overflow:visible !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table thead th{
  font-size:11px !important; font-weight:700 !important; letter-spacing:.06em !important; text-transform:uppercase !important;
  color:var(--m-muted) !important; background:transparent !important; text-align:left !important;
  padding:10px 12px !important; border-bottom:1px solid var(--m-border) !important; white-space:nowrap !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-record-table tbody td{
  padding:12px !important; border-bottom:1px solid #EEF1F6 !important; vertical-align:top !important;
  font-size:13px !important; color:var(--m-text) !important; background:var(--m-surface) !important; display:table-cell !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-record-table tbody tr{ transition:background .12s ease; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table tbody tr:hover{ background:#F5F8FE !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table tbody tr:last-child td{ border-bottom:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table .cg-id-col{ font-weight:650 !important; color:var(--m-primary-deep) !important; white-space:nowrap !important; }
body.cg-v3-modern:not(.cg-public-page) table.cg-record-table tbody td.title-col{
  font-weight:600 !important; color:var(--m-ink) !important; display:-webkit-box !important; -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important; overflow:hidden !important; line-height:1.35 !important;
  text-overflow:ellipsis !important; white-space:normal !important; overflow-wrap:break-word !important; word-break:normal !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-pagination{
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important;
  padding:12px 4px 2px !important; border-top:1px solid var(--m-border) !important; margin-top:8px !important; flex-wrap:wrap !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-pagination-summary{ font-size:12.5px !important; color:var(--m-muted) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-pagination-controls button{ height:30px !important; min-width:30px !important; border-radius:8px !important; border:1px solid var(--m-border) !important; background:#fff !important; color:var(--m-text) !important; font-size:12.5px !important; font-weight:600 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-pagination-controls button[aria-current], body.cg-v3-modern:not(.cg-public-page) .cg-pagination-controls button.active{ background:var(--m-primary) !important; border-color:var(--m-primary) !important; color:#fff !important; }
/* status filter bar (injected by modern-ui.js) */
.m-statusbar{ display:flex; flex-wrap:wrap; gap:6px; padding:0 0 12px; }
.m-statusbar .m-chip{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:999px;
  border:1px solid var(--m-border); background:#fff; color:var(--m-muted); font-size:12px; font-weight:600;
}
.m-statusbar .m-chip:hover{ border-color:#C9D2E1; color:var(--m-text); }
.m-statusbar .m-chip.active{ background:var(--m-ink); border-color:var(--m-ink); color:#fff; }
.m-statusbar .m-chip .m-n{ font-size:11px; font-weight:700; opacity:.75; }

/* ---------- incoming detail ---------- */
body.cg-v3-modern:not(.cg-public-page) .cg-incoming-detail-workspace{ padding:0 !important; margin:0 !important; background:none !important; border:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-incoming-detail-workspace .cg-main-col{ display:flex !important; flex-direction:column !important; gap:0 !important; padding:0 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-incoming-detail-top{ display:grid !important; grid-template-columns:1.6fr 1fr !important; gap:16px !important; align-items:stretch !important; margin-bottom:16px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-incoming-detail-top > *, body.cg-v3-modern:not(.cg-public-page) .cg-incoming-detail-top .cg-panel{ height:100% !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-incoming-detail-status-full, body.cg-v3-modern:not(.cg-public-page) .cg-incoming-detail-action-full{ margin-bottom:0 !important; }
/* status card: badge once, human stage tracker below */
body.cg-v3-modern:not(.cg-public-page) .cg-status-box{ background:none !important; border:none !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:10px !important; align-items:flex-start !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-status-box > strong{ font-size:17px !important; font-weight:700 !important; color:var(--m-ink) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-incoming-status-box .cg-badge{ font-size:12px !important; }
.m-steps{ display:flex; flex-wrap:wrap; gap:6px 0; margin-top:4px; align-items:center; }
.m-steps span{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--m-faint); }
.m-steps span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--m-border); }
.m-steps span.is-done{ color:var(--m-muted); } .m-steps span.is-done::before{ background:var(--m-green); }
.m-steps span.is-now{ color:var(--m-primary-deep); } .m-steps span.is-now::before{ background:var(--m-primary); box-shadow:0 0 0 3px var(--m-primary-soft); }
.m-steps span.m-sep{ width:14px; height:1px; background:var(--m-border); padding:0; }
.m-steps span.m-sep::before{ content:none; }
body.cg-v3-modern:not(.cg-public-page) .cg-incoming-no-action{
  background:var(--m-gray-soft) !important; border:none !important; border-radius:var(--m-radius-sm) !important; padding:12px 14px !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-incoming-no-action strong{ font-size:13.5px !important; color:var(--m-text) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-incoming-no-action p{ font-size:12.5px !important; color:var(--m-muted) !important; margin:4px 0 0 !important; }
/* metadata: light definition list, not boxed cards */
body.cg-v3-modern:not(.cg-public-page) .cg-info-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:0 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-info-grid .cg-info{
  border:none !important; background:none !important; border-radius:0 !important; padding:10px 0 !important;
  border-bottom:1px solid #EEF1F6 !important; display:flex !important; flex-direction:column !important; gap:2px !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-info-grid .cg-info:nth-child(odd){ padding-right:18px !important; border-right:1px solid #EEF1F6 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-info-grid .cg-info:nth-child(even){ padding-left:18px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-info small, body.cg-v3-modern:not(.cg-public-page) .cg-info-grid small{ font-size:11px !important; font-weight:600 !important; letter-spacing:.05em !important; text-transform:uppercase !important; color:var(--m-muted) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-info strong, body.cg-v3-modern:not(.cg-public-page) .cg-info-grid strong{ font-size:13.5px !important; font-weight:600 !important; color:var(--m-text) !important; line-height:1.45 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-no-outgoing-note{
  margin-top:14px !important; background:var(--m-accent-soft) !important; border-radius:var(--m-radius-sm) !important; padding:12px 14px !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-no-outgoing-note small{ color:var(--m-accent-ink) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-no-outgoing-note strong{ color:var(--m-ink) !important; font-weight:500 !important; }

/* ---------- dashboard: real work first, no decoration ---------- */
.m-greet{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.m-greet h1{ font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--m-ink); margin:0; }
.m-greet p{ font-size:13px; color:var(--m-muted); margin:5px 0 0; }
.m-greet .m-greet-date{ font-size:12px; color:var(--m-muted); white-space:nowrap; }
body.cg-v3-modern:not(.cg-public-page) .cg-premium-welcome{
  background:var(--m-surface) !important; border:1px solid var(--m-border) !important; border-radius:var(--m-radius) !important;
  box-shadow:var(--m-shadow) !important; padding:16px 20px !important; min-height:0 !important; margin:0 0 14px !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-premium-welcome-glow, body.cg-v3-modern:not(.cg-public-page) .cg-premium-orbit{ display:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-premium-welcome-copy{ display:flex !important; align-items:center !important; gap:14px !important; flex-wrap:wrap !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-premium-welcome-copy h2{ font-size:17px !important; font-weight:700 !important; letter-spacing:-.01em !important; color:var(--m-ink) !important; margin:0 !important; order:2 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-premium-welcome-copy p{ font-size:12.5px !important; color:var(--m-muted) !important; margin:0 !important; order:3 !important; flex-basis:100% !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-premium-welcome-copy .cg-premium-role-chip{
  order:1 !important; position:static !important; background:var(--m-accent-soft) !important; color:var(--m-accent-ink) !important;
  font-size:10.5px !important; font-weight:700 !important; letter-spacing:.06em !important; border:none !important; padding:4px 9px !important; border-radius:7px !important; text-transform:uppercase !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-premium-welcome-copy .cg-premium-kicker{ display:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-premium-insight-grid{ display:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi-grid{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important; margin:0 0 16px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi{
  background:var(--m-surface) !important; border:1px solid var(--m-border) !important; border-radius:var(--m-radius) !important;
  box-shadow:var(--m-shadow) !important; padding:14px 16px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:2px !important; text-align:left !important; min-height:0 !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi:hover{ border-color:#CBD6E6 !important; box-shadow:0 3px 10px rgba(15,26,46,.08) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi .cg-op-kpi-label{ font-size:11.5px !important; font-weight:650 !important; letter-spacing:.04em !important; text-transform:uppercase !important; color:var(--m-muted) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi strong{ font-size:26px !important; font-weight:750 !important; letter-spacing:-.02em !important; color:var(--m-ink) !important; font-variant-numeric:tabular-nums !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi .cg-op-kpi-icon{
  position:static !important; order:-1 !important; width:22px !important; height:22px !important; margin-bottom:6px !important; background:none !important; border:none !important; padding:0 !important; opacity:1 !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi .cg-op-kpi-icon svg{ width:20px; height:20px; stroke:var(--m-muted); }
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi.is-blue .cg-op-kpi-icon svg{ stroke:var(--m-primary); }
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi.is-green .cg-op-kpi-icon svg{ stroke:var(--m-green); }
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi.is-orange .cg-op-kpi-icon svg{ stroke:var(--m-accent); }
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi.is-purple .cg-op-kpi-icon svg{ stroke:#7C3AED; }
body.cg-v3-modern:not(.cg-public-page) .cg-announcement-panel{ background:var(--m-surface) !important; border:1px solid var(--m-border) !important; border-radius:var(--m-radius) !important; box-shadow:var(--m-shadow) !important; padding:18px 20px !important; margin:0 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-op-panel-head{ padding:0 !important; margin-bottom:12px !important; border:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-op-panel-title{ font-size:15px !important; font-weight:650 !important; color:var(--m-ink) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-op-panel-mark{ display:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-announcement-empty{ border:1px dashed var(--m-border) !important; border-radius:var(--m-radius-sm) !important; color:var(--m-muted) !important; font-size:13px !important; padding:16px !important; }
/* dashboard work blocks added by modern-ui.js */
.m-dash-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin-bottom:16px; }
.m-dash-card{ background:var(--m-surface); border:1px solid var(--m-border); border-radius:var(--m-radius); box-shadow:var(--m-shadow); padding:18px 20px; }
.m-dash-card h2{ font-size:15px; font-weight:650; color:var(--m-ink); margin:0 0 4px; letter-spacing:-.01em; }
.m-dash-card > p{ font-size:12.5px; color:var(--m-muted); margin:0 0 14px; }
.m-quick{ display:flex; gap:10px; flex-wrap:wrap; }
.m-quick button{ flex:1 1 0; display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 14px; border-radius:10px; border:1px solid var(--m-border); background:#FBFCFE; color:var(--m-text); font-size:13px; font-weight:600; text-align:left; }
.m-quick button:hover{ border-color:var(--m-primary); background:var(--m-primary-soft); }
.m-quick button .m-ico{ width:17px; height:17px; stroke:var(--m-primary); flex:none; }
.m-quick button span{ flex:1; }
.m-quick button svg.m-go{ margin-left:auto; stroke:var(--m-faint); width:14px; height:14px; }
.m-taskrow{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #EEF1F6; width:100%; background:none; border-left:none; border-right:none; border-top:none; text-align:left; }
.m-taskrow:hover strong{ color:var(--m-primary-deep); }
.m-taskrow strong{ font-size:13px; font-weight:600; color:var(--m-ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-taskrow .m-id{ font-size:11.5px; font-weight:700; color:var(--m-primary-deep); white-space:nowrap; }
.m-taskrow .m-meta{ font-size:11.5px; color:var(--m-faint); white-space:nowrap; }
.m-dash-note{ font-size:12px; color:var(--m-muted); }
.m-dash-empty{ border:1px dashed var(--m-border); border-radius:var(--m-radius-sm); padding:16px; font-size:13px; color:var(--m-muted); text-align:center; }

/* ---------- login / public pages ---------- */
body.cg-login-page.cg-v3-modern{ background:#0A1322 !important; }
body.cg-login-page.cg-v3-modern .cg-login-official{ min-height:100dvh !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:32px 16px !important; background:
  radial-gradient(720px 480px at 12% -10%, rgba(245,168,0,.10), transparent 60%),
  radial-gradient(900px 620px at 100% 110%, rgba(31,91,224,.16), transparent 55%) !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-card{ background:none !important; border:none !important; box-shadow:none !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:26px !important; width:100% !important; max-width:420px !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-brand{ text-align:center !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-logo{ width:150px !important; margin:0 auto 10px !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-brand h1{ font-size:14px !important; font-weight:600 !important; color:rgba(255,255,255,.9) !important; letter-spacing:0 !important; margin:0 !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-brand p{ font-size:11.5px !important; font-weight:600 !important; letter-spacing:.05em !important; color:var(--m-accent) !important; margin:4px 0 0 !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-panel{ background:#FFFFFF !important; border:none !important; border-radius:16px !important; box-shadow:0 24px 60px rgba(0,0,0,.38) !important; padding:26px 26px 22px !important; width:100% !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-lock{ display:none !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-panel h2{ font-size:19px !important; font-weight:700 !important; letter-spacing:-.015em !important; color:var(--m-ink) !important; margin:0 0 4px !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-subtitle{ font-size:12.5px !important; color:var(--m-muted) !important; margin:0 0 18px !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-field label{ font-size:11.5px !important; font-weight:600 !important; letter-spacing:.03em !important; color:var(--m-text) !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-field input{ height:44px !important; border-radius:10px !important; border:1px solid var(--m-border) !important; background:#fff !important; font-size:14px !important; color:var(--m-ink) !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-field input:focus{ border-color:var(--m-primary) !important; box-shadow:var(--m-focus) !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-submit{
  height:46px !important; border-radius:10px !important; background:var(--m-ink) !important; border:none !important;
  color:#fff !important; font-size:14.5px !important; font-weight:650 !important; box-shadow:none !important;
}
body.cg-login-page.cg-v3-modern .cg-login-official-submit:hover{ background:#1B2A44 !important; }
body.cg-login-page.cg-v3-modern .cg-login-remember{ font-size:12.5px !important; color:var(--m-muted) !important; }
body.cg-login-page.cg-v3-modern .cg-login-remember input{ accent-color:var(--m-accent) !important; }
body.cg-login-page.cg-v3-modern .cg-login-link{ font-size:12.5px !important; color:var(--m-primary) !important; font-weight:600 !important; }
body.cg-login-page.cg-v3-modern .cg-login-official-footer strong{ color:rgba(255,255,255,.55) !important; font-size:12px !important; font-weight:500 !important; letter-spacing:.02em !important; }
body.cg-login-page.cg-v3-modern .cg-login-eye{ color:var(--m-primary) !important; font-weight:600 !important; }

/* ---------- floating Doraemon ---------- */
body.cg-v3-modern:not(.cg-public-page) .cg-ai-launcher{
  width:48px !important; height:48px !important; border-radius:50% !important; padding:0 !important;
  background:var(--m-ink) !important; border:1px solid rgba(245,168,0,.35) !important; box-shadow:0 10px 26px rgba(10,19,34,.3) !important;
  display:grid !important; place-items:center !important; gap:0 !important; right:20px !important; bottom:20px !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-screen{ padding-bottom:72px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-ai-launcher-mark{ position:static !important; width:26px !important; height:26px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-ai-launcher-label{ position:absolute !important; left:-72px !important; top:50% !important; transform:translateY(-50%) !important;
  background:var(--m-ink) !important; color:#fff !important; font-size:12px !important; font-weight:600 !important; padding:6px 10px !important; border-radius:8px !important;
  opacity:0 !important; pointer-events:none !important; transition:opacity .15s ease !important; white-space:nowrap !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-ai-launcher:hover .cg-ai-launcher-label{ opacity:1 !important; }

/* ---------- responsive ---------- */
@media (max-width:1100px){ body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .m-dash-grid{ grid-template-columns:1fr; } }
@media (max-width:900px){ body.cg-v3-modern:not(.cg-public-page) .cg-incoming-detail-top{ grid-template-columns:1fr !important; } body.cg-v3-modern:not(.cg-public-page) .cg-info-grid{ grid-template-columns:1fr !important; }
  body.cg-v3-modern:not(.cg-public-page) .cg-info-grid .cg-info:nth-child(odd){ padding-right:0 !important; border-right:none !important; } }
@media (max-width:720px){
  body.cg-v3-modern:not(.cg-public-page) .cg-screen{ padding:16px 14px 96px !important; }
  body.cg-v3-modern:not(.cg-public-page) .cg-header{ padding:0 12px !important; gap:8px !important; }
  body.cg-v3-modern:not(.cg-public-page) .cg-header-clock{ display:none !important; }
  body.cg-v3-modern:not(.cg-public-page) .cg-bottom-nav{ background:#fff !important; border-top:1px solid var(--m-border) !important; box-shadow:0 -6px 18px rgba(15,26,46,.07) !important; }
  body.cg-v3-modern:not(.cg-public-page) .cg-bottom-nav button{ color:var(--m-muted) !important; font-size:10.5px !important; font-weight:600 !important; }
  body.cg-v3-modern:not(.cg-public-page) .cg-bottom-nav button.active{ color:var(--m-primary-deep) !important; }
  body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.cg-v3-modern:not(.cg-public-page) .cg-head h1{ font-size:18px !important; }
}
@media (prefers-reduced-motion: reduce){ body.cg-v3-modern:not(.cg-public-page) *{ transition:none !important; } }

/* Dashboard: collapse empty announcement card to a slim strip */
body.cg-v3-modern:not(.cg-public-page) .cg-announcement-empty{
  border:none !important; padding:0 !important; font-size:12px !important; color:var(--m-faint) !important; text-align:left !important;
}
/* When only empty text is in the panel, make it very compact */
body.cg-v3-modern:not(.cg-public-page) .cg-announcement-panel:has(.cg-announcement-empty:only-child) .cg-op-panel-head{ margin-bottom:4px !important; }
/* KPI strip row height – add a subtle top border divider between greeting and KPIs */
body.cg-v3-modern:not(.cg-public-page) .cg-op-kpi-grid{ padding-top:0 !important; }

/* Detail header: allow long titles to wrap cleanly; show trailing dash as muted not truncated */
body.cg-v3-modern:not(.cg-public-page) .cg-head h1{ white-space:normal !important; overflow:visible !important; display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
/* head actions: pin to the top of the flex, don't stretch to full title height */
body.cg-v3-modern:not(.cg-public-page) .cg-head{ align-items:flex-start !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-head-actions{ padding-top:4px !important; }

body.cg-v3-modern:not(.cg-public-page) .cg-nav-icon::before{ content:none !important; display:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-nav-icon::after{ content:none !important; display:none !important; }

/* ===== round 2 ===== */
body.cg-v3-modern:not(.cg-public-page) .cg-search{ border:none !important; background:none !important; box-shadow:none !important; padding:0 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-search .m-header-search-kbd{ right:12px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-search button[type=submit]{ display:none !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-head h1{ max-width:900px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25 !important; }
.m-idchip{ display:inline-flex; align-items:center; font-size:12px; font-weight:700; color:var(--m-primary-deep); background:var(--m-primary-soft); border-radius:7px; padding:3px 9px; margin:0 0 10px 8px; letter-spacing:.02em; vertical-align:top; }
.m-steps span.is-skip{ color:var(--m-faint); text-decoration:line-through; } .m-steps span.is-skip::before{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--m-border); }
.m-steps span.is-end{ color:var(--m-green); } .m-steps span.is-end::before{ background:var(--m-green); box-shadow:0 0 0 3px var(--m-green-soft); }
.m-steps span.m-sep{ width:18px; background:var(--m-border); } .m-steps span.m-sep.is-done{ background:var(--m-green); }
body.cg-v3-modern:not(.cg-public-page) .cg-incoming-detail-workspace .cg-main-col > * + *{ margin-top:16px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-incoming-detail-info{ margin-top:16px !important; }
.m-sub{ display:block; font-weight:500; font-size:12px; color:var(--m-muted); margin-top:1px; }
.m-work{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.m-work button.m-stat{ text-align:left; background:var(--m-surface); border:1px solid var(--m-border); border-radius:var(--m-radius); box-shadow:var(--m-shadow); padding:14px 16px; display:flex; flex-direction:column; gap:3px; min-height:88px; }
.m-work button.m-stat:hover{ border-color:#CBD6E6; box-shadow:0 3px 10px rgba(15,26,46,.08); }
.m-stat .m-k{ font-size:11.5px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--m-muted); display:flex; align-items:center; gap:7px; }
.m-stat .m-k .m-ico{ width:16px; height:16px; }
.m-stat .m-v{ font-size:28px; font-weight:750; letter-spacing:-.02em; color:var(--m-ink); font-variant-numeric:tabular-nums; line-height:1.1; }
.m-stat .m-s{ font-size:12px; color:var(--m-muted); }
.m-stat.is-amber .m-k .m-ico{ stroke:var(--m-amber); } .m-stat.is-blue .m-k .m-ico{ stroke:var(--m-primary); } .m-stat.is-red .m-k .m-ico{ stroke:var(--m-red); }
.m-stat.is-loading .m-v{ color:var(--m-border); }
.m-listcard{ background:var(--m-surface); border:1px solid var(--m-border); border-radius:var(--m-radius); box-shadow:var(--m-shadow); padding:18px 20px; margin:0 0 16px; }
.m-listcard h2{ font-size:15px; font-weight:650; color:var(--m-ink); margin:0; letter-spacing:-.01em; }
.m-listcard .m-lc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.m-listcard .m-lc-sub{ font-size:12.5px; color:var(--m-muted); margin:0 0 10px; }
@media (max-width:900px){ .m-work{ grid-template-columns:1fr; } }

/* dashboard: two columns when there are both a quick-action card and announcements */
@media (min-width:1100px){
  body.cg-v3-modern:not(.cg-public-page) .cg-operational-dashboard{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
  body.cg-v3-modern:not(.cg-public-page) .cg-operational-dashboard > .cg-premium-home{ grid-column:1 / -1; }
  body.cg-v3-modern:not(.cg-public-page) .cg-operational-dashboard > .m-quick-card{ margin:0 !important; }
  body.cg-v3-modern:not(.cg-public-page) .cg-operational-dashboard > .m-quick-card .m-quick{ flex-direction:column; }
  body.cg-v3-modern:not(.cg-public-page) .cg-operational-dashboard > .cg-announcement-panel{ margin:0 !important; }
}
.m-sub{ display:block; font-weight:500; font-size:12px; color:var(--m-muted); margin-top:1px; }

/* ================= FE-UI-002: richer sidebar ================= */
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar{
  background:linear-gradient(180deg,#0E1B30 0%,#0A1322 100%) !important;
  border-right:1px solid rgba(255,255,255,.07) !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-nav-group-label{
  font-size:10px !important; font-weight:700 !important; letter-spacing:.1em !important; color:rgba(150,166,190,.8) !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button{
  color:#A8B4C7 !important; font-size:13.5px !important;
  transition:background .15s ease,color .15s ease !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button .cg-nav-icon{
  width:32px !important; height:32px !important; border-radius:9px !important;
  background:rgba(255,255,255,.06) !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button .cg-nav-icon .m-ico{ width:16px !important; height:16px !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button:hover{
  background:rgba(255,255,255,.07) !important; color:#E9EFF7 !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button:hover .cg-nav-icon{
  background:rgba(245,168,0,.14) !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button.active{
  background:rgba(245,168,0,.13) !important;
  box-shadow:inset 3px 0 0 var(--m-accent) !important; color:#FFFFFF !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button.active .cg-nav-icon{
  background:var(--m-accent) !important; color:#0A1322 !important;
}
/* section accent for icon tiles (inactive: subtle tint) */
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button[data-m-group="kerja"] .cg-nav-icon{ background:rgba(96,165,250,.12) !important; color:#7DB3F8 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button[data-m-group="rekod"] .cg-nav-icon{ background:rgba(52,211,153,.10) !important; color:#5DD6A6 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button[data-m-group="urus"] .cg-nav-icon{ background:rgba(196,132,252,.10) !important; color:#CD9DFA !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button[data-m-group="sistem"] .cg-nav-icon{ background:rgba(148,163,184,.10) !important; color:#A8B4C7 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-side-nav > button.active .cg-nav-icon{ background:var(--m-accent) !important; color:#0A1322 !important; }
/* profile card */
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-profile{
  background:rgba(255,255,255,.045) !important; border:1px solid rgba(255,255,255,.07) !important;
  border-radius:12px !important; margin:10px 4px 4px !important; padding:10px !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-sidebar-avatar{
  background:rgba(245,168,0,.16) !important; border:1px solid rgba(245,168,0,.3) !important;
}

/* ================= FE-UI-002: table clipping fixes ================= */
/* the badge is clipped by the card edge, not the column -> let it shrink naturally */
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Status"] .cg-badge,
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Status"]{
  white-space:nowrap !important;
}
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Status"] .cg-badge{
  font-size:11px !important; padding:4px 8px !important; max-width:100% !important;
  overflow:hidden !important; text-overflow:ellipsis !important; display:inline-flex !important; vertical-align:top !important;
}
/* title clamp: kill legacy flow-root so -webkit-box + line-clamp actually applies */
body.cg-v3-modern:not(.cg-public-page) table.cg-record-table tbody td.title-col{
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
}
/* global-search result rows: sub-line clipped -> give title cell same clamp */
body.cg-v3-modern:not(.cg-public-page) .cg-search-result-table td{ vertical-align:top !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-search-result-table td .title-col, 
body.cg-v3-modern:not(.cg-public-page) .cg-search-result-table .cg-search-result-title{
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
}
/* badge minimum: never clip at card edge on desktop; allow wrap to 2 lines instead of hard-clip */
@media (min-width:900px){
  body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Status"]{ min-width:118px !important; }
}

/* ================= FE-UI-002: full dark theme bridge =================
   Theme toggle uses body.cg-theme-dark (app.js). Modern layer previously styled
   light only, so dark screens fell back to the old dark CSS and looked broken. */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page){
  --m-bg:#0B1220; --m-surface:#131E30; --m-ink:#F3F7FC; --m-text:#D6E0EC; --m-muted:#94A6BC; --m-faint:#64748B;
  --m-border:#26364D; --m-border-strong:#334664;
  --m-primary:#5C8CF2; --m-primary-deep:#8FB1F7; --m-primary-soft:rgba(92,140,242,.16);
  --m-green:#34D399; --m-green-soft:rgba(52,211,153,.14);
  --m-red:#F87171; --m-red-soft:rgba(248,113,113,.15);
  --m-amber:#F5B942; --m-amber-soft:rgba(245,185,66,.15);
  --m-blue:#5C8CF2; --m-blue-soft:rgba(92,140,242,.16);
  --m-purple:#C084FC; --m-purple-soft:rgba(192,132,252,.15);
  --m-grey:#94A6BC; --m-grey-soft:rgba(148,166,188,.12);
  --m-side-bg:#0A1322; --m-side-surface:rgba(255,255,255,.06); --m-side-text:#A8B4C7; --m-side-hi:#FFFFFF;
  --m-accent:#F5A800;
  --m-shadow:0 1px 2px rgba(0,0,0,.35);
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page){ background:var(--m-bg) !important; color:var(--m-text) !important; }
/* header */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-header{
  background:rgba(19,30,48,.92) !important; border-bottom:1px solid var(--m-border) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-search input{
  background:#0F1A2C !important; border-color:var(--m-border) !important; color:var(--m-text) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-search input::placeholder{ color:var(--m-faint) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-header .cg-header-user,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-header button,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-header .cg-chip{ color:var(--m-text) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-header .cg-header-datetime{ color:var(--m-muted) !important; }
/* surfaces */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-panel,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-card,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-listcard,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-quick-card,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-announcement-panel,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-premium-home{
  background:var(--m-surface) !important; border-color:var(--m-border) !important; box-shadow:var(--m-shadow) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-panel h2,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-card h2,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-head h1,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-listcard h2,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-screen h1,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-screen h2,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-screen h3{
  color:var(--m-ink) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-head p,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-panel p,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-screen p,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-panel small{
  color:var(--m-muted) !important;
}
/* quick-card title fix (was invisible white-on-white in dark) */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-quick-card h2,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-quick-card strong,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-quick-card span,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-quick-card button{ color:var(--m-text) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-quick-card .m-quick button{
  background:rgba(255,255,255,.045) !important; border-color:var(--m-border) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-quick-card .m-quick button:hover{ border-color:var(--m-border-strong) !important; }
/* announcement card: ensure readable in dark */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-announcement-panel *{ color:inherit; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-announcement-panel h2,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-announcement-panel h3{ color:var(--m-ink) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-announcement-panel p,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-announcement-panel .cg-empty,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-announcement-panel .cg-empty-state{ color:var(--m-muted) !important; }
/* forms */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) input,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) select,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) textarea{
  background:#0F1A2C !important; border-color:var(--m-border) !important; color:var(--m-text) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) input::placeholder,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) textarea::placeholder{ color:var(--m-faint) !important; }
/* buttons */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-btn-secondary,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-btn-ghost,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-btn--secondary{
  background:rgba(255,255,255,.06) !important; border-color:var(--m-border) !important; color:var(--m-text) !important;
}
/* tables */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-record-table thead th{
  background:#16233A !important; color:#9FB2C9 !important; border-bottom-color:var(--m-border) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-record-table tbody td{
  background:var(--m-surface) !important; color:var(--m-text) !important; border-bottom-color:#1E2C42 !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-record-table tbody tr:hover{ background:#16233A !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-record-table tbody tr:hover td{ background:#16233A !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-record-table .title-col{ color:var(--m-ink) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="No. Rujukan Surat"],
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="No. Rujukan Surat Keluar"]{ color:var(--m-muted) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label^="Tarikh"]{ color:var(--m-text) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-sub{ color:var(--m-muted) !important; }
/* filter chips */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-statusbar,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-chip-row{ border-bottom-color:var(--m-border) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-chip,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-chip{
  background:rgba(255,255,255,.05) !important; border-color:var(--m-border) !important; color:var(--m-muted) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-chip.is-active,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-chip.is-active{
  background:var(--m-primary-soft) !important; border-color:var(--m-primary) !important; color:var(--m-primary-deep) !important;
}
/* pagination */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-pagination{ color:var(--m-muted) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-pagination button{
  background:rgba(255,255,255,.05) !important; border-color:var(--m-border) !important; color:var(--m-text) !important;
}
/* detail page */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-info{ border-color:var(--m-border) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-info small{ color:var(--m-muted) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-info strong{ color:var(--m-text) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-idchip{ background:var(--m-primary-soft) !important; color:var(--m-primary-deep) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-steps span{ color:var(--m-muted) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-steps span.is-done{ color:var(--m-green) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-steps span.is-now{ color:var(--m-accent) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-steps span.is-end{ color:var(--m-green) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-steps span.m-sep{ background:#26364D !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-steps span.m-sep.is-done{ background:var(--m-green) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-no-outgoing-note{
  background:rgba(245,185,66,.10) !important; border-color:rgba(245,185,66,.3) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-no-outgoing-note small{ color:var(--m-amber) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-no-outgoing-note strong{ color:var(--m-text) !important; }
/* page tag pill */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-pagetag,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-page-tag{
  background:rgba(245,168,0,.12) !important; color:var(--m-accent) !important;
}
/* AI launcher + panel */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-ai-launcher{ background:#1B2940 !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-ai-panel,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-ai-drawer{
  background:var(--m-surface) !important; border-color:var(--m-border) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-ai-panel h2,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-ai-panel h3,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-ai-panel p{ color:var(--m-text) !important; }
/* generic links */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) a{ color:var(--m-primary-deep) !important; }

/* ================= FE-UI-002: login credit footer ================= */
.cg-login-official-footer.site-credit{ gap:6px !important; }
.cg-login-official-footer.site-credit .credit-link{
  background:none !important; border:none !important; padding:0 !important; margin:0 !important;
  font:inherit !important; color:#0F2F63 !important; cursor:pointer !important; text-decoration:underline;
  text-decoration-color:rgba(15,47,99,.35) !important; text-underline-offset:3px !important;
}
.cg-login-official-footer.site-credit .credit-link strong{ color:#0F2F63 !important; font-size:13.5px !important; }
.cg-login-official-footer.site-credit .credit-link:hover{ text-decoration-color:#0F2F63 !important; }
.cg-login-official-footer.site-credit .credit-details{
  color:#475569 !important; font-size:12.5px !important;
}
.cg-login-official-footer.site-credit .credit-details strong{ color:#16346B !important; }
.cg-login-official-footer.site-credit .hidden{ display:none !important; }

/* th content wrapper: shrink to fit so sort arrows (positioned at far right) never overlap/clip */
body.cg-v3-modern:not(.cg-public-page) .cg-record-table thead th{ vertical-align:middle !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table thead .m-th-txt{ display:inline-block !important; max-width:calc(100% - 14px) !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; vertical-align:middle !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table thead th .cg-th-sort,
body.cg-v3-modern:not(.cg-public-page) .cg-record-table thead th .cg-sort{ position:absolute !important; right:4px !important; top:50% !important; transform:translateY(-50%) !important; }

/* clamping works on a div inside the td (a td is always a table-cell, so -webkit-box on it is ignored) */
body.cg-v3-modern:not(.cg-public-page) .cg-record-table .m-clamp2{
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
  overflow:hidden !important; line-height:1.35 !important; font-weight:600 !important; color:var(--m-ink) !important;
  overflow-wrap:break-word !important; word-break:normal !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-record-table .m-clamp2{ color:var(--m-ink) !important; }

/* dark: the header search input itself (wrapper styling is separate) */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) #cgHeaderSearchInput,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-search input{
  background:#0F1A2C !important; border-color:var(--m-border) !important; color:var(--m-text) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) #cgHeaderSearchInput::placeholder,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-search input::placeholder{ color:#7C8DA6 !important; }

body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) #cgHeaderSearch,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-search{
  background:#0F1A2C !important; border-color:var(--m-border) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) #cgHeaderSearch input,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-search input{
  color:var(--m-text) !important; caret-color:var(--m-text) !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) #cgHeaderSearch input::placeholder{ color:#7C8DA6 !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-header-search-kbd{
  background:rgba(255,255,255,.07) !important; color:#7C8DA6 !important; border-color:var(--m-border) !important;
}

/* contrast fixes found by automated audit (WCAG AA >= 4.5 for body text) */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-record-table td.m-unassigned{ color:#9FB0C6 !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) small, body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-screen small{ color:#9FB0C6 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td.m-unassigned{ color:#6B7A90 !important; }

/* higher-specificity contrast fixes (must beat td[data-label=..].m-unassigned rule above) */
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Ditugaskan Kepada"].m-unassigned{ color:#64748B !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label="Ditugaskan Kepada"].m-unassigned{ color:#9FB0C6 !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-analytics small, body.cg-v3-modern:not(.cg-public-page) .cg-analytics-card small,
body.cg-v3-modern:not(.cg-public-page) .cg-screen .cg-kpi small{ color:#5B6B82 !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-analytics small, body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-analytics-card small,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-screen .cg-kpi small{ color:#9FB0C6 !important; }

body.cg-v3-modern:not(.cg-public-page) article > small, body.cg-v3-modern:not(.cg-public-page) article small{ color:#5B6B82 !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) article > small, body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) article small{ color:#9FB0C6 !important; }

/* ===== dark: contrast fixes from automated audit (round 3) ===== */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-premium-role-chip{ background:rgba(245,168,0,.16) !important; color:#FFD27A !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-quick button span,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-quick-card .m-quick button span{ color:var(--m-text) !important; }
/* filter chips + counters */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-chip, body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-chip,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-inbox-filter .cg-btn, body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-status-chip{
  color:#B8C6DA !important; background:rgba(255,255,255,.06) !important; border-color:#2F4160 !important;
}
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-chip b, body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-chip em,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-chip .m-count{ color:#E6EDF7 !important; background:rgba(255,255,255,.10) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .m-chip.is-active, body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-chip.is-active,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-inbox-filter .cg-btn.is-active{ color:#FFFFFF !important; background:var(--m-primary-soft) !important; border-color:var(--m-primary) !important; }
/* activity feed + updates log */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-op-activity-item, body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-update-item{ background:var(--m-surface) !important; border-color:var(--m-border) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-update-item strong, body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-update-item h3,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-update-code{ color:var(--m-ink) !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-update-item p{ color:var(--m-text) !important; }

/* updates log labels + generic date cells */
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-update-line{ color:#B8C6DA !important; }
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-update-line strong, body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) .cg-update-line b{ color:var(--m-ink) !important; }
body.cg-v3-modern:not(.cg-public-page) .cg-record-table td[data-label^="Tarikh Terima"], body.cg-v3-modern:not(.cg-public-page) .cg-receipt-evidence-table td[data-label^="Tarikh"]{ white-space:nowrap !important; font-size:12.5px !important; }

/* ===== FE-UI-003: title cell must stay a normal table-cell (clamp lives on .m-clamp2 only) =====
   Legacy rules gave td.title-col max-height/line-clamp, which shrank the cell to 35px so its bottom border
   rendered mid-row and looked like a line covering the title. */
body.cg-v3-modern:not(.cg-public-page) table.cg-record-table tbody td.title-col,
body.cg-theme-dark.cg-v3-modern:not(.cg-public-page) table.cg-record-table tbody td.title-col{
  display:table-cell !important; max-height:none !important; height:auto !important; overflow:visible !important;
  -webkit-line-clamp:unset !important; line-clamp:unset !important; -webkit-box-orient:unset !important; text-overflow:clip !important;
}

body.cg-v3-modern:not(.cg-public-page) table.cg-record-table tbody tr{ height:60px !important; }