/* ===== CMS admin (clickable mock of the proposed Drupal CMS) ===== */
.cms{--sbw:250px;min-height:100vh;background:var(--bg);}
.cms *{box-sizing:border-box;}

/* login */
.cms-login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;}
@media(max-width:820px){.cms-login{grid-template-columns:1fr;}}
.cms-login .brandside{position:relative;background:linear-gradient(150deg,#0d2411,#1B5E20 60%,#2E7D32);color:#fff;padding:clamp(28px,5vw,60px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;}
.cms-login .brandside::after{content:"";position:absolute;right:-10%;bottom:-10%;width:60%;height:60%;background:radial-gradient(circle,rgba(255,153,51,.25),transparent 70%);}
.cms-login .brandside .em{height:60px;width:auto;background:#fff;border-radius:12px;padding:8px 12px;align-self:flex-start;}
.cms-login .brandside h2{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);position:relative;}
.cms-login .brandside ul{list-style:none;padding:0;margin:18px 0 0;position:relative;}
.cms-login .brandside ul li{display:flex;gap:10px;align-items:flex-start;margin:12px 0;color:#e2f1e2;font-size:.94rem;}
.cms-login .brandside ul li svg{flex:none;margin-top:2px;color:#9fe6ae;}
.cms-login .formside{display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,48px);background:var(--surface);}
.cms-login .formcard{width:100%;max-width:400px;}
.cms-login .formcard h1{font-size:1.5rem;}
.cms-login .roles-hint{background:var(--card-tint);border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:18px;font-size:.82rem;}
.cms-login .roles-hint b{color:var(--heading);}
.cms-login .roles-hint .r{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed var(--border);cursor:pointer;}
.cms-login .roles-hint .r:last-child{border-bottom:0;}
.cms-login .roles-hint .r:hover{color:var(--forest,#2E7D32);}
.cms-login .roles-hint code{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-size:.76rem;}

/* app shell */
.cms-shell{display:grid;grid-template-columns:var(--sbw) 1fr;min-height:100vh;}
.cms-side{background:#0d2411;color:#dfeede;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;}
.cms-side .logo{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.1);}
.cms-side .logo img{height:34px;background:#fff;border-radius:7px;padding:3px 5px;}
.cms-side .logo b{font-family:var(--font-head);font-size:.95rem;color:#fff;line-height:1.1;}
.cms-side .logo span{font-size:.68rem;color:#9fc0a2;}
.cms-nav{padding:10px;flex:1;}
.cms-nav .grp{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#7ba07f;padding:14px 12px 6px;}
.cms-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:#cfe3cf;font-size:.9rem;font-weight:500;cursor:pointer;}
.cms-nav a svg{width:18px;height:18px;flex:none;opacity:.85;}
.cms-nav a:hover{background:rgba(255,255,255,.08);text-decoration:none;}
.cms-nav a.active{background:var(--forest,#2E7D32);color:#fff;}
.cms-nav a .count{margin-left:auto;background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;border-radius:999px;padding:1px 7px;}
.cms-side .whoami{padding:14px 16px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;display:flex;gap:10px;align-items:center;}
.cms-side .whoami .av{width:34px;height:34px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:700;}
.cms-side .whoami b{color:#fff;display:block;line-height:1.1;}
.cms-side .whoami span{color:#9fc0a2;font-size:.72rem;}

.cms-main{min-width:0;display:flex;flex-direction:column;}
.cms-top{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20;}
.cms-top .mtoggle{display:none;background:transparent;border:1px solid var(--border);border-radius:8px;padding:8px;}
.cms-top h1{font-size:1.15rem;margin:0;}
.cms-top .spacer{flex:1;}
.cms-top .tsearch{display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:6px 14px;gap:8px;min-width:220px;}
.cms-top .tsearch input{border:0;background:transparent;outline:none;font-family:inherit;font-size:.88rem;color:var(--text);flex:1;min-width:0;}
.cms-top .iconbtn{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--heading);}
.cms-top .iconbtn .dot{position:absolute;top:-4px;right:-4px;background:var(--accent);color:#fff;font-size:.62rem;font-weight:700;border-radius:999px;padding:1px 5px;border:2px solid var(--surface);}
.cms-content{padding:24px;flex:1;}
@media(max-width:860px){
  .cms-shell{grid-template-columns:1fr;}
  .cms-side{position:fixed;left:0;top:0;z-index:100;width:var(--sbw);transform:translateX(-100%);transition:.2s;}
  .cms.msideopen .cms-side{transform:none;}
  .cms-top .mtoggle{display:grid;}
}

/* dashboard */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.kpi-grid{grid-template-columns:1fr;}}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.kpi .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px;}
.kpi .n{font-family:var(--font-head);font-weight:700;font-size:1.9rem;color:var(--heading);line-height:1;}
.kpi .l{font-size:.82rem;color:var(--text-muted);margin-top:4px;}
.kpi .trend{position:absolute;top:16px;right:16px;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:999px;}
.kpi .trend.up{background:#e4f6ea;color:#1e7d34;}
.kpi .trend.warn{background:#fff2e0;color:#a2510a;}
html[data-theme="dark"] .kpi .trend.up{background:#173a24;color:#a7e6b9;}
.ic.green{background:#e4f6ea;color:#1e7d34;}
.ic.blue{background:#e8eefc;color:#0B4DA2;}
.ic.saffron{background:#fff2e0;color:#c85a00;}
.ic.purple{background:#efe6fb;color:#5a2ea6;}
html[data-theme="dark"] .ic.green{background:#173a24;color:#8fe0a0;}
html[data-theme="dark"] .ic.blue{background:#16324f;color:#bcd7ff;}
html[data-theme="dark"] .ic.saffron{background:#3a2a12;color:#ffcf9a;}
html[data-theme="dark"] .ic.purple{background:#2c1f47;color:#d5c4f5;}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);margin-bottom:20px;overflow:hidden;}
.panel .ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.panel .ph h3{margin:0;font-size:1.02rem;}
.panel .pb{padding:16px 18px;}
.panel .pb.flush{padding:0;}

/* SLA / progress bar */
.sla-wrap{display:flex;align-items:center;gap:14px;}
.sla-ring{--v:0;width:96px;height:96px;border-radius:50%;flex:none;
  background:conic-gradient(var(--ok) calc(var(--v)*1%),var(--border) 0);display:grid;place-items:center;}
.sla-ring .inner{width:74px;height:74px;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center;}
.sla-ring .inner b{font-family:var(--font-head);font-size:1.3rem;color:var(--heading);line-height:1;}
.sla-ring .inner span{font-size:.62rem;color:var(--text-muted);}
.bar{height:9px;background:var(--border);border-radius:999px;overflow:hidden;}
.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--leaf),var(--forest,#2E7D32));}

/* data table (admin) */
.atable{width:100%;border-collapse:collapse;font-size:.9rem;}
.atable th,.atable td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle;}
.atable th{font-family:var(--font-head);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);background:var(--card-tint);}
.atable tr:hover td{background:var(--surface-2);}
.atable .ttl{font-weight:600;color:var(--heading);}
.atable .sub{font-size:.76rem;color:var(--text-muted);}
.state{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.state.draft{background:#eef0f2;color:#5b6b7b;}
.state.review{background:#fff2e0;color:#b06a00;}
.state.published{background:#e4f6ea;color:#1e7d34;}
.state.archived{background:#f1e9e9;color:#8a5a5a;}
html[data-theme="dark"] .state.draft{background:#22303c;color:#a9c0d4;}
html[data-theme="dark"] .state.review{background:#3a2a12;color:#ffcf9a;}
html[data-theme="dark"] .state.published{background:#173a24;color:#8fe0a0;}
.rolechip{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:6px;background:var(--card-tint);border:1px solid var(--border);color:var(--heading);}
.iconlink{background:transparent;border:1px solid var(--border);border-radius:8px;padding:6px 9px;color:var(--heading);font-size:.8rem;display:inline-flex;align-items:center;gap:5px;}
.iconlink:hover{border-color:var(--leaf);color:var(--forest,#2E7D32);}
.iconlink.danger:hover{border-color:var(--danger);color:var(--danger);}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.sel,.filt{padding:9px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-family:inherit;font-size:.88rem;}

/* workflow stepper */
.wf{display:flex;align-items:center;gap:0;margin:6px 0 18px;flex-wrap:wrap;}
.wf .st{display:flex;align-items:center;gap:9px;padding:8px 4px;}
.wf .st .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.82rem;background:var(--border);color:var(--text-muted);flex:none;}
.wf .st.done .dot{background:var(--ok);color:#fff;}
.wf .st.active .dot{background:var(--accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent);}
.wf .st b{font-family:var(--font-head);font-size:.86rem;color:var(--heading);}
.wf .st span{font-size:.72rem;color:var(--text-muted);display:block;}
.wf .line{flex:1;height:2px;background:var(--border);min-width:22px;}
.wf .line.done{background:var(--ok);}

/* editor split (no-code edit -> reflects on site) */
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:960px){.editor-grid{grid-template-columns:1fr;}}
.editor-grid .preview{background:var(--card-tint);border:1px dashed var(--border-strong);border-radius:14px;padding:18px;}
.editor-grid .preview .pvlabel{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--forest,#2E7D32);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.langtabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;margin-bottom:14px;}
.langtabs button{border:0;background:transparent;padding:6px 14px;border-radius:8px;font-weight:600;font-size:.84rem;color:var(--text-muted);}
.langtabs button.on{background:var(--primary);color:#fff;}

/* audit timeline */
.timeline{list-style:none;padding:0;margin:0;position:relative;}
.timeline::before{content:"";position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:var(--border);}
.timeline li{position:relative;padding:0 0 18px 44px;}
.timeline li .tdot{position:absolute;left:8px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--leaf);}
.timeline li.rev .tdot{border-color:var(--accent);}
.timeline li b{color:var(--heading);font-size:.92rem;}
.timeline li .tm{font-size:.76rem;color:var(--text-muted);}
.timeline li .who{font-size:.8rem;color:var(--text-soft);}

/* notification dropdown */
.notif-pop{position:absolute;top:52px;right:24px;width:360px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);z-index:60;display:none;overflow:hidden;}
.notif-pop.open{display:block;}
.notif-pop .nh{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.notif-pop .nh b{font-family:var(--font-head);}
.notif-item{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;}
.notif-item:hover{background:var(--surface-2);}
.notif-item:last-child{border-bottom:0;}
.notif-item .ni{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;}
.notif-item b{font-size:.86rem;color:var(--heading);display:block;}
.notif-item span{font-size:.78rem;color:var(--text-muted);}
.notif-item .tm{font-size:.7rem;color:var(--text-muted);margin-top:3px;}
.notif-item.unread{background:color-mix(in srgb,var(--accent) 7%,var(--surface));}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:900px){.grid2{grid-template-columns:1fr;}}
.mini-list{list-style:none;padding:0;margin:0;}
.mini-list li{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);}
.mini-list li:last-child{border-bottom:0;}
.mini-list li .b{flex:1;min-width:0;}
.mini-list li .b b{font-size:.9rem;color:var(--heading);display:block;}
.mini-list li .b span{font-size:.77rem;color:var(--text-muted);}