:root{
  --shell-bg: #f6f8fb;
  --shell-bg-2: #eef3f8;
  --panel-bg: #ffffff;

  --sidebar-bg: #0d1d34;
  --sidebar-bg-2: #102440;
  --sidebar-text: rgba(255,255,255,0.90);
  --sidebar-muted: rgba(193, 205, 225, 0.48);
  --sidebar-hover: rgba(255,255,255,0.062);
  --sidebar-active: rgba(255,255,255,0.10);
  --sidebar-accent: #6eaefc;

  --text-strong: #152235;
  --text-muted: #728198;

  --border-soft: rgba(15, 23, 42, 0.06);
  --card-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);

  --sidebar-width: 264px;
  --topbar-height: 82px;

  --nav-row-h: 46px;
  --nav-group-label-h: 28px;
  --nav-child-row-h: 40px;

  --nav-radius: 10px;
  --icon-rail-w: 24px;
  --icon-size: 19px;
}

html, body{
  margin:0;
  padding:0;
  min-height:100%;
  background: linear-gradient(180deg, var(--shell-bg) 0%, var(--shell-bg-2) 100%);
  color: var(--text-strong);
}

body.app-shell-body{
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.app-shell{
  min-height:100vh;
  display:flex;
  align-items:stretch;
  background:transparent;
}

/* Sidebar */

.app-sidebar{
  width:var(--sidebar-width);
  min-width:var(--sidebar-width);
  max-width:var(--sidebar-width);
  height:100vh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018) 0%, rgba(255,255,255,0.00) 100%),
    linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,0.025),
    12px 0 34px rgba(13, 29, 52, 0.07);
  z-index:100;
}

/* IMPORTANT FIX */
.app-sidebar-shell{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}

/* IMPORTANT FIX */
.app-sidebar-top{
  flex:0 0 auto;
  padding:28px 18px 20px 18px;
}

.app-brand{
  display:flex;
  align-items:center;
  gap:13px;
}

.app-brand-mark{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 6px 18px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
}

.app-brand-mark img{
  width:24px;
  height:24px;
  object-fit:contain;
}

.app-brand-copy{
  min-width:0;
}

.app-brand-title{
  color:#ffffff;
  font-size:16px;
  font-weight:680;
  line-height:1.12;
  letter-spacing:-0.01em;
}

.app-brand-subtitle{
  margin-top:4px;
  color:var(--sidebar-muted);
  font-size:12px;
  font-weight:540;
}

/* IMPORTANT FIX */
.app-sidebar-nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:14px 16px 22px 16px;
}

.app-sidebar-nav::-webkit-scrollbar{
  width:8px;
}

.app-sidebar-nav::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.08);
  border-radius:999px;
}

/* IMPORTANT FIX */
.app-sidebar-bottom{
  flex:0 0 auto;
  padding:14px 16px 16px 16px;
  border-top:1px solid rgba(255,255,255,0.04);
  background:linear-gradient(180deg, rgba(255,255,255,0.008) 0%, rgba(255,255,255,0.025) 100%);
}

.sidebar-utility-card{
  border-radius:14px;
  padding:12px 0 0 0;
  background:transparent;
  box-shadow:none;
}

.sidebar-utility-meta{
  padding:0 12px 10px 12px;
}

.sidebar-utility-name{
  color:rgba(255,255,255,0.96);
  font-size:14px;
  font-weight:660;
  line-height:1.2;
}

.sidebar-utility-role{
  margin-top:4px;
  color:rgba(193,205,225,0.72);
  font-size:12px;
  font-weight:540;
}

.admin-shell-switch{
  padding:8px 12px 10px 12px;
  border-top:1px solid rgba(255,255,255,0.06);
}

.admin-shell-switch-label{
  font-size:10px;
  font-weight:650;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:rgba(193,205,225,0.55);
  margin-bottom:8px;
}

.admin-shell-switch-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.admin-shell-switch-option{
  flex:1 1 auto;
  min-width:0;
  text-align:center;
  font-size:11px;
  font-weight:620;
  padding:7px 8px;
  border-radius:8px;
  text-decoration:none;
  color:rgba(226,234,248,0.92);
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.08);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}

.admin-shell-switch-option:hover{
  background:rgba(255,255,255,0.085);
  border-color:rgba(255,255,255,0.14);
  color:#fff;
}

.admin-shell-switch-option.is-active{
  background:rgba(124,168,255,0.16);
  border-color:rgba(124,168,255,0.45);
  color:#f2f6ff;
}

.sidebar-utility-actions{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.utility-action{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border-radius:10px;
  text-decoration:none;
  color:rgba(255,255,255,0.82);
  transition:background .16s ease, color .16s ease;
}

.utility-action:hover{
  background:rgba(255,255,255,0.05);
  color:#ffffff;
}

.utility-action-icon{
  width:var(--icon-rail-w);
  min-width:var(--icon-rail-w);
  display:flex;
  align-items:center;
  justify-content:center;
}

.utility-action-label{
  font-size:14px;
  font-weight:610;
}

/* Navigation rhythm */

.cw-nav-groups{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Section labels (top level groups) */
.nav-section-label{
  height:22px;
  display:flex;
  align-items:center;
  padding:8px 18px 2px 18px;
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(193,205,225,0.42);
  font-weight:670;
}

/* Sub-section labels (rare nested groups) */
.nav-subsection-label{
  height:18px;
  display:flex;
  align-items:center;
  padding:6px 18px 0 18px;
  font-size:10px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(193,205,225,0.36);
  font-weight:650;
}

.nav-block{
  display:block;
}

.nav-group{
  display:block;
}

.nav-group-summary{
  min-height:var(--nav-group-label-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4px 0 2px;
  list-style:none;
  cursor:pointer;
  user-select:none;
}

.nav-group-summary::-webkit-details-marker{
  display:none;
}

.nav-group-summary-left{
  display:flex;
  align-items:center;
  min-width:0;
  gap:12px;
}

.nav-group-title{
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--sidebar-muted);
  font-weight:670;
}

.nav-group-caret{
  color:var(--sidebar-muted);
  font-size:18px;
  line-height:1;
  opacity:.62;
  transform:rotate(0deg);
  transition:transform .18s ease, opacity .18s ease;
}

.nav-group[open] .nav-group-caret{
  transform:rotate(90deg);
}

.nav-group-items{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-top:6px;
}

.nav-link{
  position:relative;
  min-height:var(--nav-row-h);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px 0 18px;
  border-radius:var(--nav-radius);
  color:var(--sidebar-text);
  text-decoration:none;
  font-size:14px;
  font-weight:615;
  letter-spacing:0.004em;
  transition:
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.nav-link:hover{
  background:var(--sidebar-hover);
  color:#ffffff;
}

.nav-link.is-active{
  background:var(--sidebar-active);
  color:#ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 4px 10px rgba(0,0,0,0.06);
}

.nav-link.is-disabled{
  color:rgba(255,255,255,0.32);
  pointer-events:none;
  cursor:default;
}

.nav-link-child{
  min-height:var(--nav-child-row-h);
  padding-left:18px;
}

.nav-link-accent{
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:999px;
  background:transparent;
}

.nav-link.is-active .nav-link-accent{
  background:var(--sidebar-accent);
}

.nav-link-icon-rail{
  width:var(--icon-rail-w);
  min-width:var(--icon-rail-w);
  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-link-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.nav-icon{
  width:var(--icon-size);
  height:var(--icon-size);
  opacity:0.75;
  object-fit:contain;
  flex:0 0 var(--icon-size);
}

.nav-link:hover .nav-icon{
  opacity:1;
}

.nav-link.is-active .nav-icon{
  opacity:1;
  filter:brightness(1.08);
}

.nav-group-summary .nav-icon{
  width:18px;
  height:18px;
  opacity:0.56;
}

/* Shared admin hero/banner block */
.app-section-hero{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 26px 30px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 100%),
    linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 18px 40px rgba(13, 29, 52, 0.16);
  border: 1px solid rgba(255,255,255,0.05);
}

.app-section-hero .hero-overline{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  font-weight: 670;
  margin-bottom: 12px;
}

.app-section-hero .hero-meta{
  display:flex;
  gap:10px;
  margin-top:18px;
}

.app-section-hero .hero-chip{
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  height:34px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  font-size:13px;
  font-weight:620;
}

/* Main shell */

.app-main-shell{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.app-topbar{
  position:sticky;
  top:0;
  z-index:90;
  display:block;
  background:rgba(246,248,251,0.84);
  backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(15,23,42,0.045);
}

.app-topbar-inner{
  min-height:var(--topbar-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 34px;
}

.app-topbar-title-block{
  display:block;
}

.app-topbar-overline{
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:670;
  margin-bottom:8px;
}

.app-topbar-title{
  font-size:26px;
  line-height:1.08;
  font-weight:740;
  letter-spacing:-0.02em;
  margin:0;
  color:var(--text-strong);
}

.app-main{
  flex:1 1 auto;
  min-width:0;
  display:block;
}

.app-content{
  padding:38px;
}

/* Premium content cards */

.app-main .card,
.main .card{
  background:var(--panel-bg);
  border:1px solid var(--border-soft);
  border-radius:20px;
  box-shadow:var(--card-shadow);
}

.app-main .card + .card,
.main .card + .card{
  margin-top:20px;
}

.app-main table,
.main table{
  background:#fff;
}

.app-main .muted,
.main .muted{
  color:var(--text-muted);
}

.app-main h1, .app-main h2, .app-main h3,
.main h1, .main h2, .main h3{
  letter-spacing:-0.02em;
}

.app-main .grid,
.main .grid{
  gap:18px;
}

.app-main .stat,
.main .stat{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:18px;
  box-shadow:var(--card-shadow);
  padding:20px 22px;
}

.app-main .stat strong,
.main .stat strong{
  display:block;
  margin-top:8px;
  font-size:30px;
  line-height:1;
  font-weight:760;
  letter-spacing:-0.03em;
  color:var(--text-strong);
}

.progress-shell,
.deadline-progress-shell,
.mini-progress{
  background:#e9eef5 !important;
  border-radius:999px !important;
  overflow:hidden;
}

.progress-fill,
.deadline-progress-fill,
.mini-progress > span{
  border-radius:999px !important;
}

.human-date{
  white-space:nowrap;
  color:var(--text-muted);
  font-size:13px;
  font-weight:560;
}

.empty-state{
  background:#fff;
  border:1px dashed rgba(15,23,42,0.10);
  border-radius:18px;
  padding:22px 24px;
  color:var(--text-muted);
}

/* Responsive */

@media (max-width: 1080px){
  .app-content{
    padding:26px;
  }

  .app-topbar-inner{
    padding:0 24px;
  }

  .app-topbar-title{
    font-size:24px;
  }

  .app-sidebar{
    width:244px;
    min-width:244px;
    max-width:244px;
  }
}
/* =========================================================
   ADDITIVE UI PRIMITIVES
   Safe extension layer for new modules only.
   Does not modify any existing selectors or shell behavior.
   ========================================================= */

.app-btn{
  min-height:42px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:#ffffff;
  color:var(--text-strong);
  text-decoration:none;
  font-size:13px;
  font-weight:680;
  cursor:pointer;
  box-sizing:border-box;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.app-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(16,36,64,0.16);
  background:#f9fbfe;
  color:var(--text-strong);
  text-decoration:none;
}

.app-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(110,174,252,0.14);
}

.app-btn svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
}

.app-btn-primary{
  background:linear-gradient(180deg,#17345d 0%,#102440 100%);
  color:#ffffff;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(16,36,64,0.13);
}

.app-btn-primary:hover{
  background:linear-gradient(180deg,#1b3d6c 0%,#15304f 100%);
  color:#ffffff;
  border-color:transparent;
}

.app-btn-secondary{
  background:#ffffff;
  color:var(--text-strong);
  border-color:rgba(15,23,42,0.08);
  box-shadow:none;
}

.app-btn-secondary:hover{
  background:#f9fbfe;
  color:var(--text-strong);
}

.app-btn-danger{
  background:rgba(185,54,54,0.08);
  color:#ac2f2f;
  border-color:rgba(185,54,54,0.12);
  box-shadow:none;
}

.app-btn-danger:hover{
  background:rgba(185,54,54,0.12);
  color:#9f2525;
  border-color:rgba(185,54,54,0.18);
}

.app-badge{
  min-height:34px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.08);
  background:#f8fafc;
  color:#324155;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  box-sizing:border-box;
}

.app-badge-success{
  background:rgba(32,135,90,0.12);
  color:#1f7a54;
  border-color:rgba(32,135,90,0.18);
}

.app-badge-warn{
  background:rgba(196,118,11,0.10);
  color:#a66508;
  border-color:rgba(196,118,11,0.18);
}

.app-badge-danger{
  background:rgba(185,54,54,0.10);
  color:#ac2f2f;
  border-color:rgba(185,54,54,0.18);
}

.app-badge-muted{
  background:rgba(15,23,42,0.06);
  color:#637287;
  border-color:rgba(15,23,42,0.08);
}

.app-badge-accent{
  background:rgba(32,84,176,0.10);
  color:#2557b3;
  border-color:rgba(32,84,176,0.18);
}

.app-badge-sky{
  background:rgba(48,124,183,0.10);
  color:#246ea9;
  border-color:rgba(48,124,183,0.18);
}

.app-badge-neutral{
  background:rgba(86,112,153,0.10);
  color:#405a82;
  border-color:rgba(86,112,153,0.16);
}

.app-input,
.app-select,
.app-textarea{
  width:100%;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:14px;
  background:#ffffff;
  color:var(--text-strong);
  font-size:14px;
  font-weight:560;
  outline:none;
  box-sizing:border-box;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.app-input,
.app-select{
  height:44px;
  padding:0 14px;
}

.app-textarea{
  padding:12px 14px;
  min-height:120px;
  resize:vertical;
}

.app-input:focus,
.app-select:focus,
.app-textarea:focus{
  border-color:rgba(82,133,212,0.45);
  box-shadow:0 0 0 4px rgba(110,174,252,0.12);
}

.app-input::placeholder,
.app-textarea::placeholder{
  color:#96a3b6;
}

.app-tab-pill{
  min-height:42px;
  padding:0 14px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:var(--text-muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  border:1px solid transparent;
  background:transparent;
  box-sizing:border-box;
  transition:
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.app-tab-pill:hover{
  background:#f6f9fd;
  color:var(--text-strong);
  text-decoration:none;
}

.app-tab-pill.is-active{
  background:linear-gradient(180deg,#17345d 0%,#102440 100%);
  color:#ffffff;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(16,36,64,0.13);
}

.app-tab-pill svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
}	

.app-mobile-overlay{
display:none;
}

.app-topbar-left{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}

.app-mobile-menu-toggle{
display:none;
width:44px;
height:44px;
min-width:44px;
border:1px solid rgba(15,23,42,0.08);
border-radius:12px;
background:#ffffff;
color:var(–text-strong);
align-items:center;
justify-content:center;
padding:0;
cursor:pointer;
box-sizing:border-box;
transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.app-mobile-menu-toggle:hover{
background:#f9fbfe;
border-color:rgba(16,36,64,0.14);
transform:translateY(-1px);
}

.app-mobile-menu-toggle:focus-visible{
outline:none;
box-shadow:0 0 0 4px rgba(110,174,252,0.14);
}

.app-mobile-menu-toggle-lines{
display:flex;
flex-direction:column;
justify-content:center;
gap:4px;
}

.app-mobile-menu-toggle-lines span{
display:block;
width:18px;
height:2px;
border-radius:999px;
background:currentColor;
}

@media (max-width: 820px){
html, body{
overflow-x:hidden;
}

body.app-shell-body{
overflow-x:hidden;
}

body.app-shell-body.is-mobile-nav-open{
overflow:hidden;
touch-action:none;
}

.app-shell{
position:relative;
min-height:100vh;
}

.app-mobile-overlay{
display:block;
position:fixed;
inset:0;
background:rgba(6, 15, 28, 0.42);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .2s ease, visibility .2s ease;
z-index:140;
}

.app-shell.is-mobile-nav-open .app-mobile-overlay{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.app-sidebar{
position:fixed;
top:0;
left:0;
bottom:0;
height:100vh;
width:min(86vw, 320px);
min-width:min(86vw, 320px);
max-width:min(86vw, 320px);
transform:translateX(-100%);
transition:transform .22s ease;
z-index:150;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
box-shadow:
inset -1px 0 0 rgba(255,255,255,0.025),
20px 0 44px rgba(13, 29, 52, 0.18);
}

.app-shell.is-mobile-nav-open .app-sidebar{
transform:translateX(0);
}

.app-main-shell{
min-width:0;
width:100%;
}

.app-mobile-menu-toggle{
display:inline-flex;
}

.app-topbar{
position:sticky;
top:0;
z-index:120;
}

.app-topbar-inner{
min-height:72px;
padding:0 16px;
}

.app-topbar-title{
font-size:22px;
}

.app-topbar-overline{
margin-bottom:6px;
}

.app-content{
padding:16px;
}

.app-section-hero{
padding:20px 18px;
border-radius:20px;
}
}

/* =========================================================
   COMPLIANCE DESIGN SYSTEM
   Scope: every page wrapped in <div class="cmp-page">.
   Purpose: enforce one consistent premium look across the
   entire compliance suite (hero banner, cards, buttons,
   inputs, dropdowns, badges, tables) so legacy inline
   styles inside compliance pages are visually normalized.
   ========================================================= */

.cmp-page{
  display:block;
  color:var(--text-strong);
  font-size:14px;
  line-height:1.55;
}

/* ----- Blue hero banner (matches admin/users/index.php) ----- */
.cmp-hero{
  margin:0 0 24px 0;
  padding:28px 32px;
}

.cmp-hero .hero-overline{
  margin-bottom:14px;
}

.cmp-hero-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.cmp-hero-copy{
  min-width:0;
  flex:1 1 auto;
}

.cmp-hero-title{
  margin:0;
  font-size:32px;
  line-height:1.04;
  letter-spacing:-0.035em;
  font-weight:760;
  color:#fff;
}

.cmp-hero-text{
  max-width:820px;
  margin:14px 0 0 0;
  color:rgba(255,255,255,0.82);
  font-size:15px;
  line-height:1.6;
}

.cmp-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.cmp-hero-action{
  height:40px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:650;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .16s ease, transform .16s ease, border-color .16s ease;
  box-sizing:border-box;
}

.cmp-hero-action:hover{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.22);
  transform:translateY(-1px);
  color:#fff;
  text-decoration:none;
}

.cmp-hero-action svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
}

.cmp-hero-stats{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  margin-top:22px;
}

.cmp-stat-chip{
  min-height:88px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.035);
  display:block;
  text-decoration:none;
  color:inherit;
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}

a.cmp-stat-chip:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.16);
  transform:translateY(-1px);
  text-decoration:none;
  color:inherit;
}

.cmp-stat-label{
  color:rgba(255,255,255,0.68);
  font-size:11px;
  line-height:1.15;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:680;
}

.cmp-stat-value{
  margin-top:10px;
  color:#fff;
  font-size:30px;
  line-height:1;
  font-weight:760;
  letter-spacing:-0.04em;
}

.cmp-stat-sub{
  margin-top:8px;
  color:rgba(255,255,255,0.62);
  font-size:12px;
  font-weight:560;
}

.cmp-stat-chip.is-warn .cmp-stat-value{ color:#ffd591; }
.cmp-stat-chip.is-crit .cmp-stat-value{ color:#ffb3b3; }
.cmp-stat-chip.is-ok   .cmp-stat-value{ color:#9be7c5; }

/* ----- Page back-link strip ----- */
.cmp-back{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px 0;
  font-size:13px;
  color:var(--text-muted);
}

.cmp-back a{
  color:#1f4079;
  font-weight:680;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .16s ease;
}

.cmp-back a:hover{ border-color:rgba(31,64,121,0.35); }

.cmp-back-divider{
  color:rgba(15,23,42,0.18);
}

.cmp-back-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  color:var(--text-muted);
  background:rgba(15,23,42,0.04);
  padding:3px 9px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.06);
}

/* ----- Flash messages ----- */
.cmp-flash{
  margin:0 0 18px 0;
  padding:14px 18px;
  border-radius:14px;
  font-size:14px;
  font-weight:580;
  border:1px solid rgba(15,23,42,0.06);
  background:#ffffff;
  color:var(--text-strong);
  box-shadow:var(--card-shadow);
  display:flex;
  align-items:center;
  gap:10px;
}

.cmp-flash.is-ok{
  background:rgba(32,135,90,0.08);
  border-color:rgba(32,135,90,0.18);
  color:#1f7a54;
}

.cmp-flash.is-warn{
  background:rgba(196,118,11,0.08);
  border-color:rgba(196,118,11,0.18);
  color:#a66508;
}

.cmp-flash.is-danger{
  background:rgba(185,54,54,0.08);
  border-color:rgba(185,54,54,0.18);
  color:#ac2f2f;
}

/* ----- Cards / panels (universal) ----- */
.cmp-card{
  background:var(--panel-bg);
  border:1px solid var(--border-soft);
  border-radius:20px;
  box-shadow:var(--card-shadow);
  padding:22px 24px;
  margin:0 0 18px 0;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.cmp-card:hover{
  box-shadow:0 18px 38px rgba(15,23,42,0.085);
  border-color:rgba(15,23,42,0.10);
}

a.cmp-card{
  display:block;
  color:inherit;
  text-decoration:none;
}

a.cmp-card:hover{
  transform:translateY(-2px);
}

.cmp-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.cmp-card-title{
  margin:0;
  font-size:17px;
  font-weight:730;
  letter-spacing:-0.02em;
  color:var(--text-strong);
}

.cmp-card-sub{
  margin:0;
  color:var(--text-muted);
  font-size:13px;
  font-weight:560;
}

.cmp-card-meta{
  color:var(--text-muted);
  font-size:13px;
  font-weight:560;
}

/* Force every legacy section/card-style block inside compliance pages
   to look like the unified `cmp-card` — no exceptions. */
.cmp-page section,
.cmp-page .cmpdash-card,
.cmp-page .cmpdash-panel,
.cmp-page .cmpmon-card,
.cmp-page .cmpmon-panel,
.cmp-page .cmpcp-card,
.cmp-page .compliance-shell-card,
.cmp-page .reg-card{
  background:var(--panel-bg) !important;
  border:1px solid var(--border-soft) !important;
  border-radius:20px !important;
  box-shadow:var(--card-shadow) !important;
  padding:22px 24px;
  margin:0 0 18px 0;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.cmp-page section:hover,
.cmp-page .cmpdash-card:hover,
.cmp-page .cmpdash-panel:hover,
.cmp-page .cmpmon-card:hover,
.cmp-page .cmpmon-panel:hover,
.cmp-page .cmpcp-card:hover,
.cmp-page .reg-card:hover{
  box-shadow:0 18px 38px rgba(15,23,42,0.085) !important;
  border-color:rgba(15,23,42,0.10) !important;
}

/* But the hero itself must KEEP its dark gradient & spacing. */
.cmp-page section.app-section-hero,
.cmp-page section.cmp-hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 100%),
    linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%) !important;
  border:1px solid rgba(255,255,255,0.05) !important;
  border-radius:24px !important;
  padding:28px 32px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 18px 40px rgba(13, 29, 52, 0.16) !important;
  color:#ffffff !important;
}

.cmp-page section.app-section-hero:hover,
.cmp-page section.cmp-hero:hover{
  border-color:rgba(255,255,255,0.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 18px 40px rgba(13, 29, 52, 0.16) !important;
}

/* Headings inside compliance cards. */
.cmp-page h1,
.cmp-page h2,
.cmp-page h3,
.cmp-page h4{
  letter-spacing:-0.02em;
  color:var(--text-strong);
}

.cmp-page section h2,
.cmp-page .cmp-card h2{
  font-size:18px;
  font-weight:730;
  margin:0 0 14px 0;
}

.cmp-page section h3,
.cmp-page .cmp-card h3{
  font-size:16px;
  font-weight:710;
  margin:0 0 12px 0;
}

/* ----- Tables (universal) ----- */
.cmp-table,
.cmp-page table.cmpdash-table,
.cmp-page table.cmpmon-table,
.cmp-page table.cmpcp-table,
.cmp-page section table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13.5px;
}

.cmp-table thead tr,
.cmp-page table.cmpdash-table thead tr,
.cmp-page table.cmpmon-table thead tr,
.cmp-page table.cmpcp-table thead tr,
.cmp-page section table thead tr{
  background:transparent !important;
}

.cmp-table th,
.cmp-page table.cmpdash-table th,
.cmp-page table.cmpmon-table th,
.cmp-page table.cmpcp-table th,
.cmp-page section table th{
  text-align:left;
  font-size:11px;
  font-weight:720;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#7787a0 !important;
  padding:10px 14px !important;
  background:#f5f8fc !important;
  border-bottom:1px solid rgba(15,23,42,0.06) !important;
}

.cmp-table th:first-child,
.cmp-page section table th:first-child{
  border-top-left-radius:12px;
}

.cmp-table th:last-child,
.cmp-page section table th:last-child{
  border-top-right-radius:12px;
}

.cmp-table td,
.cmp-page table.cmpdash-table td,
.cmp-page table.cmpmon-table td,
.cmp-page table.cmpcp-table td,
.cmp-page section table td{
  padding:12px 14px !important;
  border-bottom:1px solid rgba(15,23,42,0.05) !important;
  border-top:0 !important;
  color:var(--text-strong);
  font-weight:560;
  vertical-align:top;
  background:transparent !important;
}

.cmp-page section table tr:last-child td{
  border-bottom:0 !important;
}

.cmp-page table a{
  color:#1f4079;
  font-weight:680;
  text-decoration:none;
}
.cmp-page table a:hover{ text-decoration:underline; }

/* ----- Inputs / selects / textareas (UNIVERSAL OVERRIDE) -----
   Every form control inside a compliance page picks up the same
   shape, height, border, and focus ring — defeats inline styles. */
.cmp-page input[type=text],
.cmp-page input[type=email],
.cmp-page input[type=url],
.cmp-page input[type=search],
.cmp-page input[type=date],
.cmp-page input[type=time],
.cmp-page input[type=datetime-local],
.cmp-page input[type=number],
.cmp-page input[type=password],
.cmp-page input:not([type]),
.cmp-page select,
.cmp-page textarea,
.cmp-page .cmpcp-input,
.cmp-page .cmpcp-select{
  height:auto;
  min-height:42px;
  padding:0 14px !important;
  border:1px solid rgba(15,23,42,0.10) !important;
  border-radius:12px !important;
  background:#ffffff !important;
  color:var(--text-strong) !important;
  font-size:14px !important;
  font-weight:560 !important;
  font-family:inherit;
  outline:none;
  box-sizing:border-box;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
  box-shadow:none !important;
  appearance:auto;
}

.cmp-page textarea{
  padding:11px 14px !important;
  min-height:100px;
  line-height:1.55;
  resize:vertical;
}

.cmp-page select{
  padding-right:36px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #7787a0 50%),
    linear-gradient(135deg, #7787a0 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50% !important;
  background-size:5px 5px, 5px 5px !important;
  background-repeat:no-repeat !important;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}

.cmp-page input[type=date]{
  appearance:auto;
  -webkit-appearance:auto;
}

.cmp-page input:focus,
.cmp-page select:focus,
.cmp-page textarea:focus{
  border-color:rgba(82,133,212,0.45) !important;
  box-shadow:0 0 0 4px rgba(110,174,252,0.12) !important;
  background:#ffffff !important;
}

.cmp-page input::placeholder,
.cmp-page textarea::placeholder{
  color:#96a3b6 !important;
}

.cmp-page input[disabled],
.cmp-page select[disabled],
.cmp-page textarea[disabled]{
  background:#f4f6fa !important;
  color:#7c8aa1 !important;
  cursor:not-allowed;
}

/* Field labels — unify the legacy <span style="display:block;font-size:11px;..."> */
.cmp-page label{
  display:inline-block;
  margin:0;
}

.cmp-page label > span:first-child,
.cmp-page .cmp-field-label,
.cmp-page .cmpcp-label{
  display:block !important;
  font-size:11px !important;
  font-weight:720 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:#7787a0 !important;
  margin:0 0 7px 0 !important;
  background:transparent !important;
  padding:0 !important;
}

/* A clean field wrapper helper. */
.cmp-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}

/* ----- Buttons (UNIVERSAL OVERRIDE) -----
   Every <button> and <button type=submit> inside a compliance
   page picks up the unified button look. Inline `style="background:..."`
   loses out because of !important. The dark-blue / white / danger
   variants are derived from semantic class hooks the host page can use,
   but the default look is the primary dark-blue button that matches the
   reference design. */
.cmp-page button,
.cmp-page button[type=submit],
.cmp-page input[type=submit],
.cmp-page input[type=button],
.cmp-page .cmpdash-card .cmp-action,
.cmp-page .cmpcp-btn,
.cmp-page .cmpmon-btn,
.cmp-page .cmpmon-btn-small,
.cmp-page .reg-card button.attach,
.cmp-page a.cmp-btn,
.cmp-page button.cmp-btn{
  height:42px;
  min-height:42px;
  padding:0 18px !important;
  border-radius:12px !important;
  border:1px solid transparent !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px;
  background:linear-gradient(180deg,#17345d 0%,#102440 100%) !important;
  color:#ffffff !important;
  text-decoration:none !important;
  font-size:13px !important;
  font-weight:680 !important;
  letter-spacing:.005em;
  font-family:inherit;
  cursor:pointer;
  box-sizing:border-box;
  box-shadow:0 10px 22px rgba(16,36,64,0.13) !important;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease;
  white-space:nowrap;
  line-height:1;
}

.cmp-page button:hover,
.cmp-page button[type=submit]:hover,
.cmp-page input[type=submit]:hover,
.cmp-page .cmpcp-btn:hover,
.cmp-page .cmpmon-btn:hover,
.cmp-page .cmpmon-btn-small:hover,
.cmp-page .reg-card button.attach:hover,
.cmp-page a.cmp-btn:hover,
.cmp-page button.cmp-btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,#1b3d6c 0%,#15304f 100%) !important;
  color:#ffffff !important;
  text-decoration:none !important;
}

.cmp-page button:focus-visible,
.cmp-page button[type=submit]:focus-visible,
.cmp-page input[type=submit]:focus-visible,
.cmp-page a.cmp-btn:focus-visible,
.cmp-page button.cmp-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(110,174,252,0.20), 0 10px 22px rgba(16,36,64,0.13) !important;
}

.cmp-page button[disabled],
.cmp-page button[type=submit][disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
}

/* Secondary (white/ghost) — opt-in via class. */
.cmp-page .cmp-btn-secondary,
.cmp-page .cmpcp-btn.secondary,
.cmp-page button.cmp-btn-secondary{
  background:#ffffff !important;
  color:var(--text-strong) !important;
  border:1px solid rgba(15,23,42,0.10) !important;
  box-shadow:none !important;
}

.cmp-page .cmp-btn-secondary:hover,
.cmp-page .cmpcp-btn.secondary:hover,
.cmp-page button.cmp-btn-secondary:hover{
  background:#f9fbfe !important;
  color:var(--text-strong) !important;
  border-color:rgba(16,36,64,0.16) !important;
}

/* Danger — opt-in via class. */
.cmp-page .cmp-btn-danger,
.cmp-page button.cmp-btn-danger{
  background:rgba(185,54,54,0.08) !important;
  color:#ac2f2f !important;
  border:1px solid rgba(185,54,54,0.18) !important;
  box-shadow:none !important;
}

.cmp-page .cmp-btn-danger:hover,
.cmp-page button.cmp-btn-danger:hover{
  background:rgba(185,54,54,0.14) !important;
  color:#9a2424 !important;
}

/* Success / verify — opt-in. */
.cmp-page .cmp-btn-success,
.cmp-page button.cmp-btn-success{
  background:linear-gradient(180deg,#1f7a54 0%,#175c40 100%) !important;
  color:#ffffff !important;
  box-shadow:0 10px 22px rgba(31,122,84,0.18) !important;
  border-color:transparent !important;
}

/* Inline-styled remove/dismiss buttons inside legacy markup
   (matched by their inline background). We can't strictly target
   inline styles, but defaulting all buttons to primary already
   covers it. Provide a small override for buttons that ALSO have
   value="dismiss_alert" or contain "Remove". */
.cmp-page button[value="dismiss_alert"],
.cmp-page button[name="action"][value="dismiss_alert"]{
  background:rgba(185,54,54,0.10) !important;
  color:#ac2f2f !important;
  border-color:rgba(185,54,54,0.18) !important;
  box-shadow:none !important;
}

.cmp-page button[value="ack_alert"]{
  background:#ffffff !important;
  color:var(--text-strong) !important;
  border-color:rgba(15,23,42,0.10) !important;
  box-shadow:none !important;
}

.cmp-page button[value="resolve_alert"]{
  background:linear-gradient(180deg,#1f7a54 0%,#175c40 100%) !important;
  color:#ffffff !important;
  box-shadow:0 10px 22px rgba(31,122,84,0.18) !important;
}

.cmp-page button svg,
.cmp-page button.cmp-btn svg,
.cmp-page a.cmp-btn svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
}

/* ----- Legacy anchor "tile" cards — keep the link feel
        but use the unified card chrome (already overridden above)
        and make the inner numbers premium. */
.cmp-page .cmpdash-card-label,
.cmp-page .cmpmon-label{
  font-size:11px !important;
  font-weight:720 !important;
  color:#7787a0 !important;
  text-transform:uppercase !important;
  letter-spacing:.10em !important;
}

.cmp-page .cmpdash-card-big,
.cmp-page .cmpmon-big{
  font-size:30px !important;
  font-weight:760 !important;
  letter-spacing:-0.035em !important;
  color:var(--text-strong) !important;
  line-height:1 !important;
  margin-top:10px !important;
}

.cmp-page .cmpdash-card-sub{
  font-size:12.5px !important;
  color:var(--text-muted) !important;
  margin-top:6px !important;
  font-weight:560 !important;
}

.cmp-page .cmpdash-card.is-warn .cmpdash-card-big,
.cmp-page .cmpmon-card.is-warn .cmpmon-big{ color:#a66508 !important; }
.cmp-page .cmpdash-card.is-crit .cmpdash-card-big,
.cmp-page .cmpmon-card.is-crit .cmpmon-big{ color:#ac2f2f !important; }
.cmp-page .cmpmon-card.is-ok .cmpmon-big{ color:#1f7a54 !important; }

/* ----- Pills (severity, role, direction) ----- */
.cmp-page .cmpdash-pill,
.cmp-page .cmpmon-pill,
.cmp-page .cmpcp-pill,
.cmp-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:28px;
  padding:0 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  background:#f3f6fb !important;
  color:#324155 !important;
  font-size:11.5px !important;
  font-weight:720 !important;
  letter-spacing:.04em !important;
  white-space:nowrap;
  box-sizing:border-box;
  text-transform:none;
}

.cmp-pill-ok{
  background:rgba(32,135,90,0.12) !important;
  color:#1f7a54 !important;
  border-color:rgba(32,135,90,0.20) !important;
}
.cmp-pill-warn{
  background:rgba(196,118,11,0.10) !important;
  color:#a66508 !important;
  border-color:rgba(196,118,11,0.20) !important;
}
.cmp-pill-crit{
  background:rgba(185,54,54,0.12) !important;
  color:#9a2424 !important;
  border-color:rgba(185,54,54,0.22) !important;
}
.cmp-pill-info{
  background:rgba(48,124,183,0.10) !important;
  color:#246ea9 !important;
  border-color:rgba(48,124,183,0.20) !important;
}
.cmp-pill-muted{
  background:rgba(86,112,153,0.10) !important;
  color:#405a82 !important;
  border-color:rgba(86,112,153,0.18) !important;
}

.cmp-page .cmpdash-pill.sev-CRITICAL,
.cmp-page .cmpmon-pill.sev-CRITICAL,
.cmp-pill.sev-CRITICAL{
  background:rgba(185,54,54,0.12) !important;
  color:#9a2424 !important;
  border-color:rgba(185,54,54,0.22) !important;
}

.cmp-page .cmpdash-pill.sev-HIGH,
.cmp-page .cmpmon-pill.sev-HIGH,
.cmp-pill.sev-HIGH{
  background:rgba(212,86,17,0.10) !important;
  color:#9a3412 !important;
  border-color:rgba(212,86,17,0.20) !important;
}

.cmp-page .cmpdash-pill.sev-MEDIUM,
.cmp-page .cmpmon-pill.sev-MEDIUM,
.cmp-pill.sev-MEDIUM{
  background:rgba(196,118,11,0.10) !important;
  color:#a66508 !important;
  border-color:rgba(196,118,11,0.20) !important;
}

.cmp-page .cmpdash-pill.sev-LOW,
.cmp-page .cmpmon-pill.sev-LOW,
.cmp-pill.sev-LOW{
  background:rgba(32,135,90,0.12) !important;
  color:#1f7a54 !important;
  border-color:rgba(32,135,90,0.20) !important;
}

.cmp-page .cmpcp-pill.dir-inbound,
.cmp-pill.dir-inbound{
  background:rgba(48,124,183,0.10) !important;
  color:#246ea9 !important;
  border-color:rgba(48,124,183,0.20) !important;
}

.cmp-page .cmpcp-pill.dir-outbound,
.cmp-pill.dir-outbound{
  background:rgba(32,135,90,0.12) !important;
  color:#1f7a54 !important;
  border-color:rgba(32,135,90,0.20) !important;
}

.cmp-page .cmpcp-pill[class*="role-"]{
  background:rgba(86,112,153,0.10) !important;
  color:#405a82 !important;
  border-color:rgba(86,112,153,0.18) !important;
}

/* ----- Legacy queue-status flash (some pages emit this) -----
   Map the existing queue-status visual to the unified flash style. */
.cmp-page .queue-status{
  border-radius:14px !important;
  font-size:14px !important;
  font-weight:580 !important;
  padding:14px 18px !important;
  border:1px solid rgba(15,23,42,0.06) !important;
  background:#ffffff !important;
  color:var(--text-strong) !important;
  box-shadow:var(--card-shadow) !important;
  display:inline-block;
}

.cmp-page .queue-status.is-ok{
  background:rgba(32,135,90,0.08) !important;
  border-color:rgba(32,135,90,0.18) !important;
  color:#1f7a54 !important;
}
.cmp-page .queue-status.is-warn{
  background:rgba(196,118,11,0.08) !important;
  border-color:rgba(196,118,11,0.18) !important;
  color:#a66508 !important;
}
.cmp-page .queue-status.is-danger{
  background:rgba(185,54,54,0.08) !important;
  border-color:rgba(185,54,54,0.18) !important;
  color:#ac2f2f !important;
}

/* ----- Toolbar / filter strip ----- */
.cmp-toolbar{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px;
  padding:18px 20px;
  background:var(--panel-bg);
  border:1px solid var(--border-soft);
  border-radius:18px;
  box-shadow:var(--card-shadow);
  margin:0 0 18px 0;
}

.cmp-toolbar form{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px;
  width:100%;
}

/* Anything with `.cmp-side-card` is the right rail card on list pages. */
.cmp-side-card{
  position:sticky;
  top:calc(var(--topbar-height) + 18px);
}

/* ----- Two-column list/details grid ----- */
.cmp-cols{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
  gap:20px;
  align-items:start;
}

@media (max-width:1100px){
  .cmp-cols{ grid-template-columns:1fr; }
}

/* ----- KPI strip on dashboards ----- */
.cmp-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;
  margin:0 0 22px 0;
}

/* ----- Empty state ----- */
.cmp-empty{
  padding:30px 26px;
  border-radius:18px;
  background:var(--panel-bg);
  border:1px dashed rgba(15,23,42,0.10);
  color:var(--text-muted);
  text-align:left;
  margin:0 0 18px 0;
}

.cmp-empty-title{
  margin:0 0 6px 0;
  font-size:16px;
  font-weight:720;
  color:var(--text-strong);
  letter-spacing:-0.015em;
}

/* ----- Code/mono spans ----- */
.cmp-page .cmpdash-mono,
.cmp-page .cmpmon-mono,
.cmp-page .cmpcp-mono,
.cmp-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;
  color:var(--text-muted);
}

/* ----- Inline-styled paragraphs that rely on color hex codes -----
   Our selectors above can't override every inline `style="color:#64748b"`
   used as a "muted" hint, but most labels use a span without inline
   color. Keep links readable. */
.cmp-page a{
  color:#1f4079;
}

.cmp-page p code,
.cmp-page td code,
.cmp-page span code{
  background:rgba(15,23,42,0.05);
  padding:2px 6px;
  border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;
  color:#324155;
}

/* =========================================================
   COMPLIANCE — extra polish (animations, inline-style overrides,
   toolbar, link-as-button helpers). These augment the rules above
   without changing existing selectors.
   ========================================================= */

/* Hero fade-in + lift on first paint */
@keyframes cmp-hero-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cmp-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cmp-page section.app-section-hero,
.cmp-page section.cmp-hero {
  animation: cmp-hero-in .32s ease both;
}

.cmp-page > section.cmp-card,
.cmp-page .cmp-card,
.cmp-page > section:not(.app-section-hero):not(.cmp-hero),
.cmp-page > .cmpdash-card,
.cmp-page > .cmpdash-panel,
.cmp-page > .cmpmon-card,
.cmp-page > .cmpmon-panel,
.cmp-page > .cmpcp-card,
.cmp-page > .compliance-shell-card,
.cmp-page > .reg-card {
  animation: cmp-card-in .35s ease both;
}

/* Hero meta strip (small key:value chips under the hero title row). */
.cmp-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.cmp-hero-meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.92);
  font-size:12.5px;
  font-weight:620;
}

/* Hero contained link (visually like a small inline anchor on white). */
.cmp-hero-link{
  color:#cfe1ff !important;
  font-weight:680 !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
}

/* Force inline-styled "primary" anchors inside compliance pages onto the
   unified dark-blue button look. The substring match catches the legacy
   pattern `style="background:#1e3c72;color:#fff;..."` used in the older
   pages. Stylesheet `!important` overrides non-important inline styles. */
.cmp-page a[style*="background:#1e3c72"],
.cmp-page a[style*="background: #1e3c72"],
.cmp-page button[style*="background:#1e3c72"],
.cmp-page button[style*="background: #1e3c72"]{
  height:42px !important;
  min-height:42px !important;
  padding:0 18px !important;
  border-radius:12px !important;
  border:1px solid transparent !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  background:linear-gradient(180deg,#17345d 0%,#102440 100%) !important;
  color:#ffffff !important;
  text-decoration:none !important;
  font-size:13px !important;
  font-weight:680 !important;
  box-shadow:0 10px 22px rgba(16,36,64,0.13) !important;
  cursor:pointer;
  box-sizing:border-box;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.cmp-page a[style*="background:#1e3c72"]:hover,
.cmp-page a[style*="background: #1e3c72"]:hover,
.cmp-page button[style*="background:#1e3c72"]:hover,
.cmp-page button[style*="background: #1e3c72"]:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,#1b3d6c 0%,#15304f 100%) !important;
  color:#ffffff !important;
}

/* Force inline-styled "secondary" anchors (light gray buttons) onto the
   unified secondary look. */
.cmp-page a[style*="background:#e2e8f0"],
.cmp-page a[style*="background: #e2e8f0"],
.cmp-page button[style*="background:#e2e8f0"],
.cmp-page button[style*="background: #e2e8f0"]{
  height:42px !important;
  min-height:42px !important;
  padding:0 18px !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  background:#ffffff !important;
  color:var(--text-strong) !important;
  border:1px solid rgba(15,23,42,0.10) !important;
  box-shadow:none !important;
  text-decoration:none !important;
  font-size:13px !important;
  font-weight:680 !important;
  cursor:pointer;
  box-sizing:border-box;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}

.cmp-page a[style*="background:#e2e8f0"]:hover,
.cmp-page a[style*="background: #e2e8f0"]:hover,
.cmp-page button[style*="background:#e2e8f0"]:hover,
.cmp-page button[style*="background: #e2e8f0"]:hover{
  transform:translateY(-1px);
  background:#f9fbfe !important;
  border-color:rgba(16,36,64,0.16) !important;
  color:var(--text-strong) !important;
}

/* Tab pills that older pages emit as <a class="cmpcc-tab"> etc. */
.cmp-page .cmpcc-tab,
.cmp-page .cmpdr-tab,
.cmp-page .cmp-tab-pill,
.cmp-page .cmpmon-tab{
  display:inline-flex !important;
  align-items:center !important;
  height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  font-size:12.5px !important;
  font-weight:720 !important;
  letter-spacing:.02em !important;
  text-decoration:none !important;
  background:#f3f6fb !important;
  color:#3b4a64 !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.cmp-page .cmpcc-tab:hover,
.cmp-page .cmpdr-tab:hover,
.cmp-page .cmp-tab-pill:hover,
.cmp-page .cmpmon-tab:hover{
  background:#e9eff7 !important;
  color:var(--text-strong) !important;
  transform:translateY(-1px);
}
.cmp-page .cmpcc-tab.is-on,
.cmp-page .cmpdr-tab.is-on,
.cmp-page .cmp-tab-pill.is-active,
.cmp-page .cmpmon-tab.is-on{
  background:linear-gradient(180deg,#17345d 0%,#102440 100%) !important;
  color:#ffffff !important;
  border-color:transparent !important;
  box-shadow:0 8px 18px rgba(16,36,64,0.13) !important;
}

/* Email-status pills (inbox / thread / drafts).
   The CSS already has generic pill chrome — these add the colour map. */
.cmp-page .cmpcc-pill.s-open,
.cmp-page .cmpdr-pill.s-pending,
.cmp-pill.s-open{
  background:rgba(48,124,183,0.10) !important;
  color:#246ea9 !important;
  border-color:rgba(48,124,183,0.20) !important;
}
.cmp-page .cmpcc-pill.s-waiting_internal,
.cmp-page .cmpdr-pill.s-sending,
.cmp-pill.s-waiting_internal{
  background:rgba(196,118,11,0.10) !important;
  color:#a66508 !important;
  border-color:rgba(196,118,11,0.20) !important;
}
.cmp-page .cmpcc-pill.s-waiting_external,
.cmp-pill.s-waiting_external{
  background:rgba(70,55,179,0.10) !important;
  color:#473cb3 !important;
  border-color:rgba(70,55,179,0.20) !important;
}
.cmp-page .cmpcc-pill.s-closed,
.cmp-page .cmpdr-pill.s-sent,
.cmp-pill.s-closed{
  background:rgba(32,135,90,0.12) !important;
  color:#1f7a54 !important;
  border-color:rgba(32,135,90,0.20) !important;
}
.cmp-page .cmpcc-pill.s-archived,
.cmp-page .cmpdr-pill.s-cancelled,
.cmp-pill.s-archived{
  background:rgba(86,112,153,0.10) !important;
  color:#405a82 !important;
  border-color:rgba(86,112,153,0.18) !important;
}
.cmp-page .cmpcc-pill.p-low,
.cmp-pill.p-low{
  background:rgba(86,112,153,0.10) !important;
  color:#405a82 !important;
  border-color:rgba(86,112,153,0.18) !important;
}
.cmp-page .cmpcc-pill.p-normal,
.cmp-pill.p-normal{
  background:rgba(48,124,183,0.10) !important;
  color:#246ea9 !important;
  border-color:rgba(48,124,183,0.20) !important;
}
.cmp-page .cmpcc-pill.p-high,
.cmp-pill.p-high{
  background:rgba(196,118,11,0.10) !important;
  color:#a66508 !important;
  border-color:rgba(196,118,11,0.20) !important;
}
.cmp-page .cmpcc-pill.p-urgent,
.cmp-pill.p-urgent{
  background:rgba(185,54,54,0.12) !important;
  color:#9a2424 !important;
  border-color:rgba(185,54,54,0.22) !important;
}
.cmp-page .cmpdr-pill.s-failed{
  background:rgba(185,54,54,0.12) !important;
  color:#9a2424 !important;
  border-color:rgba(185,54,54,0.22) !important;
}

/* Toolbar — used as the "Filter and search" row across list pages. */
.cmp-toolbar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 14px 0;
}

.cmp-toolbar-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:720;
  color:var(--text-strong);
  letter-spacing:-0.015em;
}

.cmp-toolbar-title svg{
  width:18px;
  height:18px;
  color:var(--text-muted);
  flex:0 0 18px;
}

.cmp-toolbar-meta{
  color:var(--text-muted);
  font-size:13px;
  font-weight:560;
}

.cmp-toolbar form > .cmp-toolbar-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  width:100%;
  align-items:end;
}

.cmp-toolbar-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

/* List-head card pattern: "{Icon} {Title}        {count pill}". */
.cmp-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.cmp-list-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:730;
  color:var(--text-strong);
  letter-spacing:-0.015em;
}

.cmp-list-title svg{
  width:18px;
  height:18px;
  color:var(--text-muted);
  flex:0 0 18px;
}

.cmp-count-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  background:#f3f6fb;
  border:1px solid rgba(15,23,42,0.08);
  color:#71809a;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

/* Smart-grid that collapses gracefully (used inside cards for KPI rows). */
.cmp-kpi-grid-card{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
}

/* Helper anchor that should look like a button.
   Page-side: <a class="cmp-btn">…</a>  /  <a class="cmp-btn cmp-btn-secondary">…</a> */
.cmp-page a.cmp-btn-link,
.cmp-page .cmp-btn-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  min-height:42px;
  padding:0 18px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#17345d 0%,#102440 100%) !important;
  color:#ffffff !important;
  text-decoration:none !important;
  font-size:13px !important;
  font-weight:680 !important;
  border:1px solid transparent !important;
  box-shadow:0 10px 22px rgba(16,36,64,0.13) !important;
  cursor:pointer;
  gap:9px;
  transition:transform .16s ease, background .16s ease;
}

.cmp-page a.cmp-btn-link:hover,
.cmp-page .cmp-btn-link:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,#1b3d6c 0%,#15304f 100%) !important;
}

/* Generic compliance card list — used in dashboards. */
.cmp-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:18px;
}

.cmp-report-layout{
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  gap:20px;
  align-items:start;
  min-width:0;
  max-width:100%;
}

/* Inline meta lines (e.g. "Status: X · Priority: Y" under a detail header). */
.cmp-meta-line{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  margin:8px 0 0 0;
  color:var(--text-muted);
  font-size:13px;
  font-weight:560;
}

.cmp-meta-line strong{ color:var(--text-strong); font-weight:700; }

/* ----- Responsive tweaks ----- */
@media (max-width:980px){
  .cmp-hero{ padding:24px 22px; }
  .cmp-hero-head{ flex-direction:column; align-items:flex-start; }
  .cmp-hero-actions{ justify-content:flex-start; }
  .cmp-hero-title{ font-size:26px; }
  .cmp-card{ padding:18px 18px; }
}

@media (max-width:640px){
  .cmp-hero-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cmp-kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cmp-page section,
  .cmp-page .cmpdash-card,
  .cmp-page .cmpmon-card,
  .cmp-page .cmpmon-panel,
  .cmp-page .cmpcp-card,
  .cmp-page .reg-card{
    padding:18px 18px !important;
  }
}

/* =========================================================
   Compliance Monitoring UI
   ========================================================= */

.compliance-page,
.cmp-page{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:visible;
  box-sizing:border-box;
}

.compliance-page *,
.compliance-page *::before,
.compliance-page *::after,
.cmp-page *,
.cmp-page *::before,
.cmp-page *::after{
  box-sizing:border-box;
}

.compliance-page > *,
.cmp-page > *{
  min-width:0;
  max-width:100%;
}

.compliance-hero,
.cmp-hero{
  display:flex !important;
  flex-direction:column;
  gap:22px;
  max-width:100%;
  overflow:visible;
  min-width:0;
  padding-bottom:28px !important;
}

.compliance-hero__head,
.cmp-hero-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  min-width:0;
}

.compliance-hero__copy,
.cmp-hero-copy{
  flex:1 1 520px;
  min-width:0;
  max-width:850px;
}

.compliance-hero__eyebrow,
.cmp-hero .hero-overline{
  font-size:11px !important;
  font-weight:720 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.68) !important;
  margin:0 0 10px 0 !important;
}

.compliance-hero__title,
.cmp-hero-title{
  max-width:850px;
  margin:0;
  color:#fff !important;
  font-size:clamp(26px,3vw,34px) !important;
  line-height:1.08 !important;
  font-weight:760 !important;
  letter-spacing:-.04em !important;
  overflow-wrap:anywhere;
}

.compliance-hero__text,
.cmp-hero-text{
  max-width:850px;
  margin:12px 0 0 0;
  color:rgba(255,255,255,.76) !important;
  font-size:14.5px !important;
  line-height:1.62 !important;
  overflow-wrap:anywhere;
}

.compliance-hero__actions,
.cmp-hero-actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  min-width:0;
  max-width:100%;
}

.compliance-hero__action,
.cmp-hero-action{
  max-width:100%;
  min-width:0;
  height:40px !important;
  min-height:40px !important;
  padding:0 16px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  background:rgba(255,255,255,0.08) !important;
  color:#fff !important;
  box-shadow:none !important;
  font-size:13px !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
}

.compliance-hero__action:hover,
.cmp-hero-action:hover{
  background:rgba(255,255,255,0.14) !important;
  border-color:rgba(255,255,255,0.22) !important;
  color:#fff !important;
  transform:translateY(-1px);
  text-decoration:none !important;
}

.compliance-hero__action svg,
.cmp-hero-action svg{
  width:15px !important;
  height:15px !important;
  flex:0 0 15px !important;
}

.compliance-hero__action span,
.cmp-hero-action span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.compliance-kpi-grid,
.cmp-hero-stats,
.cmp-kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important;
  gap:14px !important;
  width:100%;
  min-width:0;
}

.compliance-kpi-card,
.cmp-stat-chip{
  min-width:0;
  min-height:96px;
  overflow:visible;
}

.cmp-stat-label,
.cmp-stat-value,
.cmp-stat-sub,
.compliance-kpi-card > *{
  min-width:0;
  overflow-wrap:anywhere;
}

.cmp-stat-label,
.cmp-stat-sub{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cmp-stat-value{
  font-size:clamp(22px,2.3vw,30px) !important;
  line-height:1.05 !important;
}

.compliance-card,
.cmp-card{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  box-shadow:var(--card-shadow) !important;
}

.compliance-card__header,
.cmp-card-head,
.compliance-list-head,
.cmp-list-head{
  min-width:0;
  flex-wrap:wrap;
}

.compliance-card__title,
.cmp-card-title,
.cmp-list-title,
.compliance-card h2,
.cmp-card h2,
.compliance-card h3,
.cmp-card h3{
  min-width:0;
  overflow-wrap:anywhere;
}

.compliance-card__body{
  min-width:0;
  max-width:100%;
}

.compliance-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}

.compliance-table,
.cmp-page table{
  width:100%;
  max-width:100%;
  table-layout:fixed;
}

.compliance-table th,
.compliance-table td,
.cmp-page table th,
.cmp-page table td{
  min-width:0;
  max-width:360px;
  overflow-wrap:anywhere;
  word-break:normal;
}

.compliance-table td:first-child,
.cmp-page table td:first-child,
.compliance-code,
.cmp-mono,
.cmp-page [class*="-mono"]{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  overflow-wrap:anywhere !important;
  word-break:break-word;
}

.compliance-truncate,
.cmp-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  max-width:100%;
}

.compliance-form-grid,
.cmp-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  width:100%;
  min-width:0;
}

.compliance-field,
.cmp-field{
  width:100%;
  min-width:0;
  max-width:100%;
}

.compliance-label,
.compliance-field > span:first-child,
.cmp-field > span:first-child{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
}

.compliance-input,
.compliance-select,
.compliance-textarea,
.cmp-page input[type=text],
.cmp-page input[type=email],
.cmp-page input[type=url],
.cmp-page input[type=search],
.cmp-page input[type=date],
.cmp-page input[type=time],
.cmp-page input[type=datetime-local],
.cmp-page input[type=number],
.cmp-page input[type=password],
.cmp-page input:not([type]),
.cmp-page select,
.cmp-page textarea{
  width:100%;
  max-width:100% !important;
  min-width:0;
}

.compliance-select,
.cmp-page select{
  min-height:42px !important;
  line-height:1.2;
  text-overflow:ellipsis;
}

.compliance-textarea,
.cmp-page textarea{
  overflow:auto;
}

.compliance-btn,
.compliance-btn--primary,
.compliance-btn--secondary,
.compliance-btn--ghost{
  height:42px;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 18px;
  border-radius:12px;
  font-size:13px;
  font-weight:680;
  text-decoration:none;
  white-space:nowrap;
  max-width:100%;
}

.compliance-btn--primary{
  background:linear-gradient(180deg,#17345d 0%,#102440 100%);
  color:#fff;
  border:1px solid transparent;
  box-shadow:0 10px 22px rgba(16,36,64,.13);
}

.compliance-btn--secondary{
  background:#fff;
  color:var(--text-strong);
  border:1px solid rgba(15,23,42,.10);
}

.compliance-btn--ghost{
  background:transparent;
  color:#1f4079;
  border:1px solid transparent;
  box-shadow:none;
}

.compliance-badge,
.compliance-badge--planned,
.compliance-badge--progress,
.compliance-badge--closed{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#f3f6fb;
  color:#324155;
  font-size:11.5px;
  font-weight:720;
  letter-spacing:.04em;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.compliance-badge--planned{ background:rgba(48,124,183,.10); color:#246ea9; border-color:rgba(48,124,183,.20); }
.compliance-badge--progress{ background:rgba(196,118,11,.10); color:#a66508; border-color:rgba(196,118,11,.20); }
.compliance-badge--closed{ background:rgba(32,135,90,.12); color:#1f7a54; border-color:rgba(32,135,90,.20); }
.compliance-badge--level-1,
.compliance-badge--severity-critical,
.compliance-badge--deadline-expired{ background:rgba(185,54,54,.12) !important; color:#9a2424 !important; border-color:rgba(185,54,54,.22) !important; }
.compliance-badge--level-2,
.compliance-badge--severity-high,
.compliance-badge--severity-medium,
.compliance-badge--deadline-warning{ background:rgba(196,118,11,.10) !important; color:#a66508 !important; border-color:rgba(196,118,11,.20) !important; }
.compliance-badge--level-3,
.compliance-badge--status-open{ background:rgba(48,124,183,.10) !important; color:#246ea9 !important; border-color:rgba(48,124,183,.20) !important; }
.compliance-badge--severity-low,
.compliance-badge--status-closed,
.compliance-badge--deadline-ok{ background:rgba(32,135,90,.12) !important; color:#1f7a54 !important; border-color:rgba(32,135,90,.20) !important; }
.compliance-badge--status-progress{ background:rgba(196,118,11,.10) !important; color:#a66508 !important; border-color:rgba(196,118,11,.20) !important; }
.compliance-badge--status-muted{ background:rgba(86,112,153,.10) !important; color:#405a82 !important; border-color:rgba(86,112,153,.18) !important; }

.compliance-hero-kpis--compact,
.cmp-hero-stats{
  grid-template-columns:repeat(auto-fit,minmax(150px,190px)) !important;
  justify-content:start;
}

.compliance-hero-kpis--compact .compliance-kpi-card,
.cmp-hero-stats .cmp-stat-chip{
  min-height:82px;
}

.compliance-card--full{
  grid-column:1 / -1;
  width:100%;
}

.compliance-filterbar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;
  align-items:end;
  margin:0 0 18px;
}

.compliance-filterbar__search{
  grid-column:span 2;
}

.compliance-filterbar__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  margin:0 !important;
}

.compliance-filterbar--findings{
  grid-template-columns:minmax(260px,2fr) repeat(4,minmax(140px,1fr));
}

.compliance-filterbar--findings .compliance-filterbar__search{
  grid-column:auto;
}

.compliance-filterbar__break{
  grid-column:1 / -1;
  display:none;
}

.compliance-filterbar__row2{
  grid-row:2;
}

.compliance-row-clickable{
  cursor:pointer;
}

.cmp-page tr[data-href],
.cmp-page .compliance-row-clickable{
  cursor:pointer;
  transition:background .16s ease, transform .16s ease;
}

.cmp-page tr[data-href]:hover,
.cmp-page .compliance-row-clickable:hover{
  background:rgba(48,124,183,.055) !important;
}

.compliance-field--full{
  grid-column:1 / -1;
}

.compliance-modal{
  width:min(760px,calc(100vw - 32px));
  max-height:min(86vh,900px);
  padding:0;
  border:0;
  border-radius:22px;
  background:transparent;
  overflow:visible;
}

.compliance-modal::backdrop{
  background:rgba(8,18,32,.58);
  backdrop-filter:blur(6px);
}

.compliance-modal__panel{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(8,18,32,.26);
  overflow:hidden;
}

.compliance-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px;
  border-bottom:1px solid var(--border-soft);
  background:#f7f9fc;
}

.compliance-modal__title{
  margin:0 !important;
  font-size:20px !important;
  font-weight:740 !important;
  color:var(--text-strong) !important;
}

.compliance-modal__close{
  width:38px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
  font-size:22px !important;
  line-height:1 !important;
}

.compliance-modal__body{
  max-height:calc(86vh - 80px);
  overflow:auto;
  padding:22px;
}

.compliance-modal__footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:16px;
  margin-top:16px;
  border-top:1px solid var(--border-soft);
}

.compliance-resource-library-embed{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0 0 18px;
  padding:0;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.cmp-page .compliance-resource-library-embed,
.cmp-page .compliance-resource-library-embed:hover{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

.compliance-resource-library-embed .rl-easa-page,
.compliance-resource-library-embed .rl-easa-page *{
  box-sizing:border-box;
}

.cmp-page .compliance-resource-library-embed .rl-easa-page{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  width:100%;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:left !important;
}

.cmp-page .compliance-resource-library-embed section,
.cmp-page .compliance-resource-library-embed section:hover{
  background:var(--panel-bg) !important;
  border:1px solid var(--border-soft) !important;
  border-radius:20px !important;
  box-shadow:var(--card-shadow) !important;
  padding:16px 18px !important;
  margin:0 0 14px !important;
  color:var(--text-strong) !important;
  text-align:left !important;
}

.cmp-page .compliance-resource-library-embed .rl-easa-metrics{
  background:var(--panel-bg) !important;
  border:1px solid var(--border-soft) !important;
  border-radius:20px !important;
  box-shadow:var(--card-shadow) !important;
  padding:16px 18px !important;
  margin:0 !important;
}

.cmp-page .compliance-resource-library-embed .rl-easa-maya-chat{
  margin-top:-14px !important;
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
  border-top:0 !important;
}

.cmp-page .compliance-resource-library-embed .rl-easa-metrics + .rl-easa-maya-chat{
  margin-bottom:14px !important;
}

.cmp-page .compliance-resource-library-embed h1,
.cmp-page .compliance-resource-library-embed h2,
.cmp-page .compliance-resource-library-embed h3,
.cmp-page .compliance-resource-library-embed h4,
.cmp-page .compliance-resource-library-embed p,
.cmp-page .compliance-resource-library-embed div,
.cmp-page .compliance-resource-library-embed li{
  text-align:left !important;
}

.cmp-page .compliance-resource-library-embed .rl-easa-tree-toolbar{
  justify-content:flex-start !important;
  text-align:left !important;
}

.compliance-resource-library-embed table,
.compliance-resource-library-embed .rl-easa-table{
  table-layout:auto !important;
  width:100%;
}

.compliance-resource-library-embed th,
.compliance-resource-library-embed td{
  max-width:none !important;
  padding:8px 10px;
  overflow-wrap:normal;
}

.compliance-resource-library-embed button.btn.btn-sm,
.compliance-resource-library-embed .rl-easa-bookmarks-open-btn,
.compliance-resource-library-embed .rl-easa-maya-send,
.compliance-resource-library-embed .rl-easa-maya-chat-settings-btn{
  min-height:0 !important;
  height:auto !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1.25 !important;
}

.compliance-resource-library-embed .rl-easa-tree-exp{
  width:1.25rem !important;
  height:1.25rem !important;
  min-height:0 !important;
  padding:0 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:12px !important;
  line-height:1 !important;
}

.compliance-resource-library-embed .rl-easa-tree-exp--rule-disclosure{
  width:1.1rem !important;
  height:1.1rem !important;
  font-size:10px !important;
}

.compliance-resource-library-embed .rl-easa-tree-section-title,
.compliance-resource-library-embed .rl-easa-tree-rule-title{
  display:block !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  width:auto !important;
  padding:2px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#0f172a !important;
  font-size:13px !important;
  line-height:1.4 !important;
  text-align:left !important;
  text-decoration:none !important;
  justify-content:flex-start !important;
  transform:none !important;
  white-space:normal !important;
}

.compliance-resource-library-embed .rl-easa-tree-section-title:hover,
.compliance-resource-library-embed .rl-easa-tree-rule-title:hover{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#102845 !important;
  transform:none !important;
  text-decoration:underline !important;
}

.compliance-resource-library-embed .rl-easa-tree-section-title:focus,
.compliance-resource-library-embed .rl-easa-tree-section-title:focus-visible,
.compliance-resource-library-embed .rl-easa-tree-rule-title:focus,
.compliance-resource-library-embed .rl-easa-tree-rule-title:focus-visible{
  background:transparent !important;
  box-shadow:none !important;
  color:#102845 !important;
  outline:none !important;
}

.compliance-resource-library-embed .rl-easa-tree-row--section .rl-easa-tree-section-title{
  font-weight:700 !important;
}

.compliance-resource-library-embed .rl-easa-tree-panel{
  color:#0f172a !important;
  text-align:left !important;
}

.compliance-resource-library-embed .rl-easa-tree-panel button:not(.btn){
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  color:#0f172a !important;
}

.compliance-resource-library-embed .rl-easa-tree-panel button:not(.btn):hover{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  color:#102845 !important;
  transform:none !important;
}

.compliance-resource-library-embed .rl-easa-maya-ecfr-chip{
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  border:1px solid #c7d2fe !important;
  background:#e0e7ff !important;
  color:#0f172a !important;
  box-shadow:none !important;
  font-size:11px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-decoration:none !important;
  transform:none !important;
}

.compliance-resource-library-embed .rl-easa-maya-ecfr-chip:hover,
.compliance-resource-library-embed .rl-easa-maya-ecfr-chip:focus{
  background:#dbeafe !important;
  border-color:#bfdbfe !important;
  color:#0f172a !important;
  box-shadow:none !important;
  text-decoration:none !important;
  transform:none !important;
}

.compliance-resource-library-embed .rl-easa-maya-chip-actions .btn.btn-sm{
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  box-shadow:none !important;
}

.compliance-resource-library-embed .rl-easa-bookmarks-modal button,
.compliance-resource-library-embed .rl-easa-bookmarks-modal .btn,
.compliance-resource-library-embed .rl-easa-bookmarks-modal .btn.btn-sm{
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

.compliance-resource-library-embed .rl-easa-bookmarks-modal button:hover,
.compliance-resource-library-embed .rl-easa-bookmarks-modal .btn:hover{
  box-shadow:none !important;
  transform:none !important;
}

.compliance-resource-library-embed .rl-easa-bookmarks-modal .rl-easa-bookmarks-tab{
  height:auto !important;
  min-height:0 !important;
  padding:10px 16px !important;
  border-radius:0 !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  background:transparent !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:600 !important;
}

.compliance-resource-library-embed .rl-easa-bookmarks-modal .rl-easa-bookmarks-tab:hover{
  background:transparent !important;
  color:#0f172a !important;
}

.compliance-resource-library-embed .rl-easa-bookmarks-modal .rl-easa-bookmarks-tab.is-active{
  color:#0b2a4a !important;
  border-bottom-color:#0b2a4a !important;
}

.compliance-resource-library-embed .rl-easa-bookmarks-cat-list li{
  align-items:center !important;
  min-height:0 !important;
  padding:6px 14px !important;
  gap:8px !important;
}

.compliance-resource-library-embed .rl-easa-bookmarks-cat-list li:hover{
  background:#e2e8f0 !important;
}

.compliance-resource-library-embed .rl-easa-bookmarks-cat-mini-btn{
  min-width:0 !important;
  padding:0 4px !important;
  border:0 !important;
  background:transparent !important;
  color:#64748b !important;
  font-size:11px !important;
  font-weight:600 !important;
}

.compliance-resource-library-embed .rl-easa-bookmarks-cat-mini-btn:hover{
  background:transparent !important;
  color:#0f172a !important;
}

.compliance-resource-library-embed .rl-easa-bookmarks-cat-add-btn{
  width:100% !important;
  justify-content:center !important;
  border:1px dashed #cbd5e1 !important;
  background:transparent !important;
  color:#475569 !important;
  padding:6px 10px !important;
}

.compliance-resource-library-embed .rl-easa-bookmarks-row-actions .btn{
  padding:3px 9px !important;
  font-size:11px !important;
  line-height:1.2 !important;
}

.compliance-resource-library-embed .rl-easa-tree-row{
  gap:4px !important;
  margin:1px 0 !important;
  line-height:1.4 !important;
}

.compliance-resource-library-embed .rl-easa-tree-header-row h3{
  font-size:15px !important;
  line-height:1.25 !important;
}

.cmp-page .cmp-card:hover,
.cmp-page section:not(.app-section-hero):not(.cmp-hero):hover,
.cmp-page .cmpdash-panel:hover,
.cmp-page .cmpdash-card:hover{
  box-shadow:var(--card-shadow) !important;
  border-color:var(--border-soft) !important;
}

.cmp-page a.cmp-card:hover,
.cmp-page tr[data-href]:hover,
.cmp-page .compliance-row-clickable:hover{
  border-color:rgba(15,23,42,0.10) !important;
}

.cmp-page [style*="grid-template-columns:1fr 360px"],
.cmp-page [style*="grid-template-columns:1fr 380px"]{
  grid-template-columns:minmax(0,2fr) minmax(300px,1fr) !important;
  max-width:100% !important;
}

.cmp-page [style*="grid-template-columns:1fr 1fr"]{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  max-width:100% !important;
}

.cmp-page [style*="min-width:320px"],
.cmp-page [style*="min-width:280px"],
.cmp-page [style*="min-width:240px"],
.cmp-page [style*="min-width:220px"],
.cmp-page [style*="min-width:200px"]{
  min-width:0 !important;
}

.cmpdash-grid,
.cmp-card-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

@media (max-width:1180px){
  .cmpdash-grid,
  .cmp-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:900px){
  .compliance-hero,
  .cmp-hero{
    padding:22px !important;
  }

  .compliance-hero__actions,
  .cmp-hero-actions{
    justify-content:flex-start;
    width:100%;
  }

  .cmp-page [style*="grid-template-columns:1fr 360px"],
  .cmp-page [style*="grid-template-columns:1fr 380px"],
  .cmp-page [style*="grid-template-columns:280px 1fr"],
  .cmp-page [style*="grid-template-columns:1fr 1fr"],
  .cmp-report-layout{
    grid-template-columns:1fr !important;
  }

  .cmpdash-grid,
  .cmp-card-grid{
    grid-template-columns:1fr !important;
  }

  .cmp-side-card{
    position:static;
  }

  .compliance-filterbar--findings{
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  }

  .compliance-filterbar__row2{
    grid-row:auto;
  }
}

@media (max-width:640px){
  .compliance-kpi-grid,
  .cmp-hero-stats,
  .cmp-kpi-grid{
    grid-template-columns:1fr !important;
  }

  .compliance-card,
  .cmp-card{
    padding:18px !important;
  }

  .compliance-table th,
  .compliance-table td,
  .cmp-page table th,
  .cmp-page table td{
    padding:10px 12px !important;
    max-width:240px;
  }

  .cmp-page button,
  .cmp-page button[type=submit],
  .cmp-page input[type=submit],
  .cmp-page .cmp-btn-link,
  .compliance-btn{
    white-space:normal;
    min-width:0;
  }

  .compliance-filterbar__search,
  .compliance-filterbar__actions{
    grid-column:1 / -1;
  }

  .compliance-filterbar__actions{
    flex-wrap:wrap;
  }
}

/* Final hero-action lock: all Compliance hero buttons must match the dashboard chips. */
.cmp-page .cmp-hero .cmp-hero-actions .cmp-hero-action,
.cmp-page .cmp-hero .cmp-hero-actions button.cmp-hero-action,
.cmp-page .cmp-hero .cmp-hero-actions a.cmp-hero-action,
.cmp-page .compliance-hero .compliance-hero__actions .compliance-hero__action,
.cmp-page .compliance-hero .compliance-hero__actions button.compliance-hero__action,
.cmp-page .compliance-hero .compliance-hero__actions a.compliance-hero__action{
  width:auto !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  padding:0 16px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  background:rgba(255,255,255,0.08) !important;
  color:#fff !important;
  box-shadow:none !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}

.cmp-page .cmp-hero .cmp-hero-actions .cmp-hero-action:hover,
.cmp-page .compliance-hero .compliance-hero__actions .compliance-hero__action:hover{
  background:rgba(255,255,255,0.13) !important;
  border-color:rgba(255,255,255,0.22) !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
  box-shadow:none !important;
}

.cmp-page .cmp-hero .cmp-hero-actions .cmp-hero-action svg,
.cmp-page .compliance-hero .compliance-hero__actions .compliance-hero__action svg{
  width:15px !important;
  height:15px !important;
  flex:0 0 15px !important;
}

.cmp-page .cmp-hero .cmp-hero-actions .cmp-hero-action span,
.cmp-page .compliance-hero .compliance-hero__actions .compliance-hero__action span{
  font-size:13px !important;
  line-height:1 !important;
  font-weight:650 !important;
}