/* CG ERP Option 2 look. Style only. Remove the two lines in index.html to switch off. */
:root{--cgx-teal:#0F3D44;--cgx-teal2:#1B5963;--cgx-green:#5D8E3F;--cgx-green-d:#4A7232;--cgx-tint:#F1F6EE;--cgx-rule:#D9DED6;--cgx-ink:#2A2929}
body{background:#F4F7F5;color:var(--cgx-ink)}
.bg-cg-bg{background-color:#F4F7F5!important}
/* brand green on buttons, links and active states */
.bg-cg-primary{background-color:var(--cgx-green-d)!important}
.hover\:bg-cg-primary-hover:hover{background-color:#3B5C28!important}
.text-cg-primary{color:var(--cgx-green-d)!important}
.border-cg-primary{border-color:var(--cgx-green)!important}
.bg-cg-primary-light,.bg-cg-primary-ultralight{background-color:var(--cgx-tint)!important}
/* sidebar: light and clean (option E) */
.cgx-side{background:#fff!important;border-right:1px solid var(--cgx-rule)!important;width:17rem!important}
.cgx-side>div:first-child{background:#fff;border-bottom:1px solid #EEF1EC!important;padding:14px 16px!important}
.cgx-side nav{padding:10px 10px!important}
.cgx-side nav button{border-left:0!important;border-radius:12px;margin:1px 0;padding:6px 8px!important;color:#3a3f3b!important;background:transparent!important;font-weight:500}
.cgx-side nav button:hover{background:#F3F7F0!important}
.cgx-side nav button.uppercase{color:#8a938c!important;font-size:10.5px;letter-spacing:.14em;padding:12px 8px 4px!important;font-weight:700}
.cgx-side nav button.uppercase:hover{color:var(--cgx-green-d)!important}
.cgx-side nav button.border-l-2 svg{width:34px!important;height:34px!important;padding:8px;border-radius:10px;background:#EAF1E6;color:var(--cgx-green-d)!important;stroke:var(--cgx-green-d);stroke-width:2.5;flex:none}
.cgx-side nav button.border-l-2.cgx-active{background:#EEF4EA!important;color:var(--cgx-green-d)!important;font-weight:700}
.cgx-side nav button.border-l-2.cgx-active svg{background:var(--cgx-green);stroke:#fff;color:#fff!important}
.cgx-side nav button.uppercase svg{width:10px!important;height:10px!important;padding:0;background:none;stroke:#8a938c}
.cgx-side>button{color:#3a3f3b!important;border-top:1px solid #EEF1EC!important}
.cgx-side>button:hover{background:#F3F7F0!important}
/* top bar */
.cgx-head{background:#fff!important;border-bottom:1px solid var(--cgx-rule)!important;padding:10px 20px!important}
.cgx-head button svg{stroke-width:2.4}
#cgx-pagetile{width:40px;height:40px;border-radius:12px;background:var(--cgx-green);display:flex;align-items:center;justify-content:center;flex:none;margin-right:2px}
#cgx-pagetile svg{width:22px;height:22px;color:#fff;stroke:#fff;stroke-width:2.5}
.cgx-head .text-sm.font-medium.text-gray-700{font-size:17px;font-weight:700;color:var(--cgx-ink)}
/* shortcut bar */
#cgx-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--cgx-tint);border-bottom:1px solid var(--cgx-rule);padding:10px 20px}
#cgx-bar .cgx-date{font-weight:800;font-size:19px;line-height:1.1;color:var(--cgx-ink)}
#cgx-bar .cgx-day{font-size:11px;font-weight:700;color:#5F5E5E;letter-spacing:.08em;text-transform:uppercase}
#cgx-bar .cgx-clock{font-weight:800;font-size:28px;line-height:1;color:var(--cgx-green-d);font-variant-numeric:tabular-nums}
#cgx-bar .cgx-clock small{font-size:11px;color:#5F5E5E;font-weight:700;margin-left:4px}
#cgx-bar .cgx-sep{width:1px;align-self:stretch;background:var(--cgx-rule)}
#cgx-bar .cgx-icons{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto;align-items:center}
.cgx-ic{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;cursor:pointer;color:var(--cgx-ink);font-size:10.5px;font-weight:600;width:68px}
.cgx-ic .cgx-tile{width:46px;height:46px;border-radius:13px;background:#fff;border:1.5px solid var(--cgx-rule);display:flex;align-items:center;justify-content:center;transition:.15s}
.cgx-ic:hover .cgx-tile{background:var(--cgx-green);border-color:var(--cgx-green)}
.cgx-ic:hover .cgx-tile svg{color:#fff;stroke:#fff}
.cgx-ic svg{width:24px;height:24px;color:var(--cgx-green-d);stroke:var(--cgx-green-d);stroke-width:2.5}
.cgx-ic .cgx-badge{position:absolute;top:-4px;right:8px;background:#C0392B;color:#fff;font-size:10px;font-weight:700;border-radius:99px;padding:1px 5px;line-height:1.3}
.cgx-ic span.cgx-lbl{max-width:68px;text-align:center;line-height:1.15}
.cgx-edit .cgx-tile{border-style:dashed;background:transparent}
/* editor panel */
#cgx-panel{position:fixed;right:20px;top:120px;z-index:60;width:340px;max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--cgx-rule);border-radius:14px;box-shadow:0 12px 40px rgba(15,61,68,.25);padding:14px}
#cgx-panel h3{font-weight:800;font-size:15px;margin:0 0 2px}
#cgx-panel p{font-size:12px;color:#5F5E5E;margin:0 0 10px}
#cgx-panel label{display:flex;align-items:center;gap:10px;padding:5px 4px;border-radius:8px;font-size:13px;cursor:pointer}
#cgx-panel label:hover{background:var(--cgx-tint)}
#cgx-panel label svg{width:18px;height:18px;color:var(--cgx-teal);stroke:var(--cgx-teal);stroke-width:2.4;flex:none}
#cgx-panel .cgx-act{display:flex;gap:8px;margin-top:10px}
#cgx-panel button.cgx-btn{flex:1;padding:8px;border-radius:9px;font-weight:700;font-size:13px;border:1px solid var(--cgx-rule);background:#fff;cursor:pointer}
#cgx-panel button.cgx-btn.p{background:var(--cgx-green-d);color:#fff;border-color:var(--cgx-green-d)}
/* cards, tables, pills */
main .rounded-lg.border,main .rounded-xl.border{border-color:var(--cgx-rule)!important;box-shadow:0 1px 2px rgba(15,61,68,.05)}
table thead tr,table thead{background:var(--cgx-tint)}
table th{color:#4A5A50!important;font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;font-weight:700!important}
table tbody tr:hover{background:#F8FAF6}
button.rounded-lg,button.rounded-md{font-weight:600}
@media(max-width:768px){#cgx-bar{padding:8px 12px;gap:8px}#cgx-bar .cgx-icons{margin-left:0}.cgx-side{width:16rem!important}}
/* Help Center: topic list keeps its own scroll, page content scrolls separately */
main .flex.gap-4>.w-64.shrink-0{position:sticky;top:0;align-self:flex-start;max-height:calc(100vh - 190px);overflow-y:auto;padding-right:6px;background:#fff;border:1px solid var(--cgx-rule);border-radius:14px;padding:12px}
main .flex.gap-4>.flex-1.min-w-0{min-width:0}