:root { --green: #5a6667; --dark: #465152; --accent: #187e72; --line: #dce2e4; --text: #344244; --muted: #718083; }
* { box-sizing: border-box; }
body { margin: 0px; font: 16px / 1.5 "Segoe UI", Arial, sans-serif; background: rgb(241, 243, 244); color: var(--text); }
button, input, select, textarea { font: inherit; }
button, a, select { cursor: pointer; }
header { height: 64px; background: var(--green); color: white; display: flex; align-items: center; padding: 0px 24px; gap: 18px; position: fixed; inset: 0px 0px auto; z-index: 20; }
.brand { font-size: 20px; letter-spacing: 1px; white-space: nowrap; }
.brand small { font-size: 11px; display: block; letter-spacing: 3px; color: rgb(209, 219, 220); line-height: 1; }
.demo { border: 1px solid rgb(153, 176, 172); border-radius: 4px; padding: 3px 9px; font-size: 12px; letter-spacing: 0.6px; }
.actor { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgb(224, 232, 231); }
.actor select { background: rgb(70, 82, 83); color: white; border: 1px solid rgb(137, 150, 150); border-radius: 4px; padding: 7px; font-size: 14px; }
#menubtn { display: none; background: none; border: 0px; color: white; }
aside { position: fixed; top: 64px; bottom: 0px; width: 235px; background: var(--green); color: rgb(227, 233, 233); display: flex; flex-direction: column; }
.aside-title { font-size: 12px; letter-spacing: 1.2px; padding: 30px 22px 16px; color: rgb(195, 207, 208); }
nav button { border-width: 0px 0px 0px 3px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor transparent; border-image: none; width: 100%; background: none; color: inherit; text-align: left; padding: 15px 20px; display: flex; align-items: center; gap: 12px; font-size: 15px; }
nav button.active { background: var(--dark); border-left-color: rgb(153, 212, 199); color: white; }
nav button:hover { background: rgb(78, 91, 92); }
nav .ni { font-size: 19px; width: 22px; }
nav b { font-size: 12px; background: rgb(114, 128, 128); padding: 1px 7px; border-radius: 4px; margin-left: auto; }
.aside-foot { margin-top: auto; padding: 22px; border-top: 1px solid rgb(114, 128, 128); font-size: 14px; }
.aside-foot span { color: rgb(192, 204, 205); font-size: 12px; }
main { margin: 64px 0px 0px 235px; min-height: calc(-64px + 100vh); }
.crumb { padding: 15px 28px; background: rgb(255, 255, 255); border-bottom: 1px solid var(--line); font-size: 14px; color: rgb(124, 136, 138); }
.crumb span { padding: 0px 10px; color: rgb(195, 203, 206); }
.crumb b { font-weight: 500; color: rgb(65, 81, 82); }
.content { padding: 24px 28px; }
.notice { background: rgb(234, 243, 241); border: 1px solid rgb(212, 230, 225); padding: 11px 16px; display: flex; gap: 12px; font-size: 14px; color: rgb(65, 103, 94); margin-bottom: 22px; border-radius: 3px; }
.pagehead { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 20px; }
h1 { font-size: 26px; font-weight: 600; margin: 0px 0px 4px; }
h2 { font-size: 19px; font-weight: 600; margin: 0px; }
p { margin: 5px 0px 12px; }
.muted { color: var(--muted); font-size: 14px; }
.button { border: 1px solid rgb(205, 214, 216); background: white; border-radius: 3px; padding: 9px 16px; color: rgb(64, 83, 86); font-size: 14px; font-weight: 600; }
.button.primary { background: var(--green); color: white; border-color: var(--green); }
.button.teal { background: var(--accent); color: white; border-color: var(--accent); }
.button.danger { color: rgb(170, 68, 68); border-color: rgb(225, 190, 190); }
.button:hover { filter: brightness(0.95); }
.button:disabled { opacity: 0.45; cursor: not-allowed; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.stat { background: white; border: 1px solid var(--line); padding: 17px 20px; border-radius: 3px; }
.stat small { color: var(--muted); font-size: 14px; }
.stat strong { font-size: 29px; display: block; font-weight: 600; margin-top: 4px; }
.stat em { font-size: 12px; font-style: normal; color: var(--accent); }
.panel { background: white; border: 1px solid var(--line); border-radius: 3px; margin-bottom: 20px; }
.panel-head { padding: 17px 20px; background: rgb(250, 251, 251); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.filters { display: flex; align-items: end; gap: 14px; padding: 20px; flex-wrap: wrap; }
.filters label { flex: 1 1 0%; min-width: 145px; font-size: 14px; }
.filters label:first-child { flex: 2 1 0%; }
input, select, textarea { display: block; width: 100%; border: 1px solid rgb(203, 213, 215); border-radius: 3px; padding: 9px 11px; background: white; color: var(--text); min-height: 41px; }
label input, label select, label textarea { margin-top: 6px; }
input:focus, select:focus, textarea:focus { outline: rgb(138, 187, 177) solid 2px; outline-offset: 1px; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
thead { background: rgb(246, 248, 248); }
th { text-align: left; font-weight: 600; color: rgb(99, 114, 117); padding: 13px 17px; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
td { padding: 15px 17px; border-bottom: 1px solid rgb(232, 237, 238); vertical-align: middle; }
tbody tr:hover { background: rgb(250, 252, 252); }
td small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.person { display: flex; gap: 10px; align-items: center; }
.avatar { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: rgb(234, 240, 239); color: rgb(80, 115, 107); font-weight: 600; font-size: 13px; flex-shrink: 0; }
.pill { display: inline-block; padding: 3px 9px; border-radius: 3px; font-size: 12px; background: rgb(237, 241, 243); color: rgb(99, 119, 126); white-space: nowrap; }
.pill.active, .pill.approved { background: rgb(228, 242, 235); color: rgb(41, 116, 86); }
.pill.pending { background: rgb(255, 241, 215); color: rgb(152, 108, 29); }
.pill.locked, .pill.rejected { background: rgb(249, 233, 232); color: rgb(173, 83, 80); }
.pill.role { background: rgb(238, 241, 244); color: rgb(83, 104, 124); margin: 2px; }
.link { background: none; border: 0px; color: rgb(38, 120, 108); padding: 4px; font-size: 14px; white-space: nowrap; }
.tablefoot { padding: 13px 20px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; }
.pagination { border: 1px solid var(--line); padding: 3px 10px; background: rgb(247, 249, 249); }
footer { padding: 16px 28px; color: rgb(132, 144, 146); font-size: 12px; }
.empty { padding: 40px; text-align: center; color: var(--muted); }
dialog { width: min(780px, -30px + 100vw); border: 0px; border-radius: 6px; padding: 0px; box-shadow: rgba(19, 43, 55, 0.25) 0px 18px 70px; max-height: 90vh; color: var(--text); }
dialog::backdrop { background: rgba(26, 48, 52, 0.37); }
.modalhead { padding: 20px 24px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); position: sticky; top: 0px; background: white; z-index: 2; }
.close { border: 0px; background: none; font-size: 24px; color: rgb(108, 123, 125); }
.modalbody { padding: 24px; }
.modalfoot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; background: rgb(250, 251, 251); }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formgrid label { font-size: 14px; }
.full { grid-column: 1 / -1; }
.tabs { display: flex; border-bottom: 1px solid var(--line); gap: 24px; margin: 20px 0px; }
.tabs button { border-width: 0px 0px 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; background: none; padding: 10px 0px; color: rgb(106, 123, 125); }
.tabs button.on { border-color: var(--accent); color: var(--accent); }
.detailgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.detailgrid label { display: block; font-size: 12px; color: rgb(132, 144, 147); margin-bottom: 4px; }
.callout { background: rgb(246, 248, 249); border-left: 3px solid rgb(140, 169, 162); padding: 14px; font-size: 14px; margin-top: 16px; }
.rights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rights label { padding: 10px; background: rgb(246, 248, 248); display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rights input { margin: 0px; }
.timeline { border-left: 2px solid rgb(219, 229, 226); margin-left: 6px; padding-left: 22px; }
.timeline p { position: relative; margin-bottom: 20px; font-size: 14px; }
.timeline p::before { content: ""; position: absolute; width: 9px; height: 9px; background: rgb(130, 166, 155); border-radius: 50%; left: -28px; top: 6px; }
#toast { position: fixed; right: 24px; bottom: 24px; background: rgb(51, 76, 71); color: white; border-radius: 5px; padding: 14px 20px; max-width: 420px; box-shadow: rgba(0, 0, 0, 0.133) 0px 5px 24px; display: none; z-index: 100; }
button:focus-visible { outline: rgb(147, 189, 177) solid 3px; outline-offset: 2px; }
@media (max-width: 1050px) {
  aside { width: 205px; }
  main { margin-left: 205px; }
  .content { padding: 20px; }
  .stats { gap: 10px; }
  .actor { font-size: 0px; }
  .actor select { max-width: 220px; }
  .demo { display: none; }
}
@media (max-width: 760px) {
  #menubtn { display: block; }
  header { padding: 0px 12px; gap: 10px; }
  .brand { font-size: 16px; }
  .actor select { max-width: 160px; font-size: 12px; }
  aside { display: none; width: 235px; z-index: 30; box-shadow: rgba(0, 0, 0, 0.133) 5px 0px 20px; }
  body.menu aside { display: flex; }
  main { margin-left: 0px; }
  .crumb { padding: 12px 16px; }
  .content { padding: 16px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .pagehead { align-items: start; }
  h1 { font-size: 23px; }
  .formgrid, .detailgrid, .rights { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
  .filters { padding: 14px; }
  .filters label { min-width: 120px; }
  .modalbody { padding: 18px; }
  .tabs { gap: 16px; }
  .tabs button { font-size: 14px; }
}
:root { --green: #536873; --dark: #3f535f; --accent: #1977a5; --text: #293f4c; --muted: #71838e; --line: #dce4e9; }
header { background: rgb(82, 103, 115); height: 68px; }
.brand { font-weight: 500; letter-spacing: -0.4px; font-size: 24px; }
.brand b { font-weight: 700; color: rgb(216, 239, 250); }
.brand small { font-size: 10px; letter-spacing: 2.2px; margin-top: 4px; }
.demo { font-size: 12px; }
aside { top: 68px; width: 264px; background: rgb(82, 103, 115); }
main { margin-top: 68px; margin-left: 264px; }
.aside-title { padding: 22px 22px 14px; }
nav { overflow-y: auto; flex: 1 1 0%; padding-bottom: 14px; }
nav details { margin: 2px 10px; }
nav summary { font-size: 14px; font-weight: 600; cursor: pointer; padding: 11px 10px; list-style: none; display: flex; gap: 10px; align-items: center; }
nav summary::after { content: "⌄"; margin-left: auto; color: rgb(184, 203, 212); }
nav details[open] summary::after { content: "⌃"; }
.groupicon { font-size: 18px; width: 20px; text-align: center; color: rgb(197, 219, 230); }
nav button { font-size: 14px; padding: 10px 12px 10px 38px; border-radius: 4px; border-left: 0px; margin: 1px 0px; line-height: 1.4; }
nav button.active { background: rgb(60, 83, 97); box-shadow: rgb(99, 197, 239) 3px 0px inset; }
nav button:hover { background: rgb(73, 96, 109); }
.aside-foot { padding: 15px 22px; }
.content { max-width: 1560px; padding: 24px 30px; margin: auto; }
.notice { background: rgb(234, 243, 249); color: rgb(65, 101, 120); border-color: rgb(213, 229, 239); font-size: 14px; }
.pagehead h1 { font-size: 27px; letter-spacing: -0.5px; }
.stat { border-radius: 6px; padding: 20px; box-shadow: rgba(35, 61, 74, 0.01) 0px 2px 5px; }
.stat strong { font-size: 29px; color: rgb(41, 76, 96); letter-spacing: -0.5px; }
.stat em { font-size: 13px; color: rgb(104, 127, 140); }
.panel { border-radius: 6px; overflow: hidden; }
.panel-head { background: white; }
.dashboard-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.chart { padding: 20px 24px 12px; height: 260px; }
.bars { display: flex; align-items: end; height: 100%; gap: 14px; border-bottom: 1px solid var(--line); padding-top: 15px; }
.bars > div { height: 100%; flex: 1 1 0%; display: flex; flex-direction: column; justify-content: end; align-items: center; }
.bars span { display: block; width: 100%; max-width: 40px; background: rgb(91, 153, 182); border-radius: 3px 3px 0px 0px; min-height: 8px; }
.bars small { padding: 8px 0px; font-size: 12px; color: var(--muted); }
.channel-breakdown { padding: 20px 24px; }
.channel-breakdown > div { margin-bottom: 15px; }
.channel-breakdown label { display: flex; justify-content: space-between; font-size: 14px; gap: 10px; }
.channel-breakdown b { font-weight: 600; }
.meter { height: 7px; background: rgb(237, 242, 245); margin: 8px 0px; border-radius: 8px; overflow: hidden; }
.meter span { height: 100%; display: block; background: rgb(77, 145, 177); border-radius: 8px; }
.channel-breakdown small { font-size: 12px; color: var(--muted); }
.workqueue { padding: 4px 20px; }
.workqueue button { display: flex; align-items: center; justify-content: space-between; width: 100%; background: white; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(237, 241, 244); border-image: none; padding: 14px 0px; text-align: left; font-size: 14px; color: var(--text); }
.workqueue b { background: rgb(253, 240, 216); color: rgb(148, 108, 40); padding: 2px 9px; border-radius: 4px; }
.health { padding: 8px 20px; }
.health > div { display: flex; justify-content: space-between; gap: 15px; padding: 14px 0px; border-bottom: 1px solid rgb(237, 241, 244); font-size: 14px; }
.health b { font-weight: 600; color: rgb(66, 107, 128); }
.head-actions { display: flex; gap: 10px; }
.inline-note { margin: 0px 0px 20px; border-left-color: rgb(79, 155, 192); background: rgb(234, 243, 248); }
.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.report-card { background: white; border: 1px solid var(--line); border-radius: 6px; padding: 26px; text-align: left; display: flex; flex-direction: column; gap: 12px; color: var(--text); }
.report-card strong { font-size: 18px; }
.report-card span { font-size: 14px; color: var(--muted); }
.report-card small { font-size: 14px; color: var(--accent); }
.report-card:hover { border-color: rgb(127, 178, 203); box-shadow: rgba(35, 68, 84, 0.04) 0px 4px 14px; }
.ops-tabs { gap: 18px; overflow-x: auto; margin-top: 0px; }
.ops-tabs button { white-space: nowrap; }
td small, .pill { font-size: 13px; }
footer { font-size: 12px; }
.detailgrid label { font-size: 14px; }
.actor select { background: rgb(65, 88, 100); }
.button.primary { background: rgb(69, 107, 129); border-color: rgb(69, 107, 129); }
.link { color: rgb(36, 114, 153); }
@media (max-width: 1200px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .content { padding: 22px; }
  .dashboard-grid { grid-template-columns: 1.3fr 1fr; }
  .head-actions { flex-wrap: wrap; justify-content: end; }
}
@media (max-width: 900px) {
  aside { width: 230px; }
  main { margin-left: 230px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr 1fr; }
  .pagehead { align-items: start; }
  .bars { gap: 9px; }
}
@media (max-width: 760px) {
  aside { width: 264px; }
  main { margin-left: 0px; }
  .content { padding: 16px; }
  .actor select { font-size: 13px; }
  .brand { font-size: 20px; }
  .brand small { font-size: 9px; }
  .report-grid { grid-template-columns: 1fr; }
  .head-actions .button { padding: 8px; }
  .pagehead h1 { font-size: 24px; }
  .stat strong { font-size: 25px; }
  .ops-tabs { gap: 14px; }
}
.menu-search { padding: 0px 16px 15px; }
.menu-search input { min-height: 36px; font-size: 14px; background: rgb(65, 89, 101); color: rgb(255, 255, 255); border: 1px solid rgb(113, 139, 153); border-radius: 5px; }
.menu-search input::placeholder { color: rgb(202, 215, 221); }
.nav-group { margin: 2px 10px !important; }
.nav-group > summary { font-size: 15px; padding: 13px 10px; color: rgb(255, 255, 255); }
.nav-module { margin: 2px 0px 2px 8px; }
.nav-module > summary { font-size: 14px; font-weight: 500; color: rgb(217, 229, 235); padding: 10px 8px; line-height: 1.45; }
.nav-module button { padding: 9px 12px 9px 26px; font-size: 14px; color: rgb(209, 224, 232); white-space: normal; }
.nav-module button.active { color: white; }
.submodule-context { display: flex; gap: 12px; align-items: start; margin-bottom: 20px; padding: 12px 16px; background: rgb(230, 238, 243); border-radius: 5px; font-size: 14px; color: rgb(83, 110, 128); }
.submodule-context b { white-space: nowrap; }
.submodule-context span { max-width: 950px; }
.related-data h3 { font-size: 17px; margin: 0px 0px 16px; }
.related-data { padding: 18px 0px; border-bottom: 1px solid var(--line); }
.related-data:first-child { padding-top: 0px; }
.business-functions { display: grid; gap: 10px; }
.business-functions > div { background: rgb(243, 247, 250); border-left: 3px solid rgb(130, 175, 196); padding: 12px 16px; font-size: 15px; }
.crumb { line-height: 1.7; }
.aside-foot { font-size: 14px; }
@media (max-width: 760px) {
  .submodule-context { flex-direction: column; }
  .submodule-context b { white-space: normal; }
  .nav-group > summary { font-size: 15px; }
}