:root{
  --bg:#0b1220;
  --card:#0f1b2f;
  --paper:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --line:#e5e7eb;
  --line2:#d1d5db;

  --primary:#2563eb;
  --primary2:#1d4ed8;
  --danger:#ef4444;
  --ok:#10b981;
  --warn:#f59e0b;

  --shadow: 0 12px 30px rgba(0,0,0,.14);
  --shadow2: 0 10px 20px rgba(0,0,0,.10);
  --radius:16px;
  --radius2:12px;

  --font: "Manrope", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font);
  background:#f1f5f9;
  color:var(--text);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }
video{ max-width:100%; height:auto; }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 2.2vw, 22px) clamp(14px, 2vw, 18px) 40px;
}

.app-shell{
  min-height:100vh;
  width:100%;
  background: #f8fafc;
  color:#0f172a;
  display:flex;
  flex-direction:column;
  --table-sticky-top: calc(var(--app-header-height, 76px) + 12px);
}
.app-body{
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 400px at 90% 10%, rgba(14,116,144,.08), transparent 60%),
    #eef2f7;
  color:#0f172a;
}
.app-header{
  position:sticky;
  top:0;
  z-index:30;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.app-header-inner{
  width:100%;
  margin:0 auto;
  padding: 18px clamp(16px, 2.8vw, 32px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand-logo{
  height:45px;
  width:auto;
  display:block;
  object-fit:contain;
  flex:0 0 auto;
}
.brand-text{ min-width:0; }
.app-main{
  flex:1;
  width:100%;
}
.app-content{
  width:100%;
  max-width:none;
  margin:0;
  padding: clamp(18px, 2.8vw, 32px) clamp(14px, 3vw, 36px) 48px;
}
.page-enter{ animation: fadeUp .25s ease-out; }

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.page-title{
  font-size: clamp(22px, 2.2vw, 30px);
  margin:0;
  font-weight: 900;
  letter-spacing: .2px;
}
.page-sub{
  margin: 6px 0 0;
  color: #64748b;
  font-weight: 600;
}
.brand-title{
  font-weight:800;
  letter-spacing:.2px;
}
.brand-sub{
  font-size:12px;
  color:rgba(229,231,235,.75);
  margin-top:2px;
}

.app-body .brand-title{ color:#0f172a; }
.app-body .brand-sub{ color:#64748b; }
.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.nav-link{
  padding:8px 14px;
  border-radius:999px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.12);
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nav-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15,23,42,.12);
  background: #f8fafc;
}
.nav-link.is-active{
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(14,116,144,.12));
  border-color: rgba(37,99,235,.35);
  color:#1d4ed8;
}
.nav-link.danger{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.25);
  color:#991b1b;
}

.app-footer{
  border-top:1px solid rgba(15,23,42,.08);
  margin-top:auto;
  background:#f8fafc;
}
.app-footer-inner{
  width:100%;
  margin:0 auto;
  padding:14px clamp(16px, 2.8vw, 32px);
  display:flex;
  justify-content:space-between;
  color:#64748b;
  font-size:12px;
}

.flash-wrap{ display:grid; gap:8px; margin-bottom:14px; }
.flash{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  box-shadow: var(--shadow2);
}
.flash.ok{ border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.12); }
.flash.error{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.12); }
.field-error{ color:#b91c1c; font-size:12px; margin-top:4px; }
.has-error{ border-color:#b91c1c !important; }

.app-body .flash{
  background:#ffffff;
  color:#0f172a;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
}
.app-body .flash.ok{ background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.25); }
.app-body .flash.error{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.25); }
.app-body .muted{ color:#64748b; }

.card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card.soft{
  background: rgba(255,255,255,.05);
  box-shadow:none;
}
.card-h{ margin-bottom: 12px; }
.h2{ font-size: 22px; margin: 0 0 4px; }
.h3{ font-size: 16px; margin: 0 0 8px; }
.muted{ color: rgba(229,231,235,.72); }
.small{ font-size: 12px; }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.mb{ margin-bottom: 14px; }
.mt{ margin-top: 10px; }
.gap{ gap:10px; }
.gap-xl{ gap:16px; }
.row{ display:flex; gap:12px; align-items:center; }
.wrap{ flex-wrap:wrap; }
.row-between{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.right{ justify-content:flex-end; }

.hr{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 12px 0;
}

.app-body .card{
  background:#ffffff;
  border: 1px solid #e2e8f0;
  color:#0f172a;
  box-shadow: 0 16px 30px rgba(15,23,42,.08);
}
.app-body .card.soft{
  background:#f8fafc;
}
.app-body .h2,
.app-body .h3{
  color:#0f172a;
}
.app-body .hr{
  background: rgba(15,23,42,.08);
}

.form{ display:grid; gap:12px; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }
@media (max-width: 900px){
  .grid2,.grid3{ grid-template-columns: 1fr; }
}
.lbl{
  display:block;
  font-size:13px;
  margin: 0 0 6px;
  color: rgba(229,231,235,.85);
}
.lbl.small{ font-size: 12px; }
.inp, .ta, select.inp{
  width:100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.35);
  color: #e5e7eb;
  outline:none;
}
.locked{
  background: rgba(148,163,184,.35) !important;
  color: #0f172a !important;
}
.inp:focus, .ta:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.20);
}
.ta{ min-height: 90px; resize: vertical; }

.actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color:#e5e7eb;
  cursor:pointer;
  font-weight:600;
  font-size: 13px;
}
.btn:hover{ background: rgba(255,255,255,.10); }
.btn.primary{
  background: linear-gradient(90deg, #1d4ed8, #2563eb);
  border-color: rgba(37,99,235,.55);
  color: #f8fafc;
}
.btn.primary:hover{ background: linear-gradient(90deg, #1e40af, #1d4ed8); }
.btn.danger{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.30);
}

.app-body .lbl{
  color:#475569;
  font-weight:600;
}
.app-body .inp,
.app-body .ta,
.app-body select.inp{
  background:#ffffff;
  border: 1px solid #e2e8f0;
  color:#0f172a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.app-body .inp:focus,
.app-body .ta:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.app-body .btn{
  background:#ffffff;
  border: 1px solid #e2e8f0;
  color:#0f172a;
  font-weight:700;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.app-body .btn:hover{
  background:#f1f5f9;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15,23,42,.10);
}
.app-body .btn.primary{
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: rgba(37,99,235,.45);
  color:#fff;
}
.app-body .btn.primary:hover{
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}
.app-body .btn.danger{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.24);
  color:#991b1b;
}
.app-body a.link{
  color:#0f172a;
  font-weight: 800;
}
.app-body a.link:hover{
  color:#1d4ed8;
}

.pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  margin: 4px 6px 0 0;
}

.table-wrap{
  overflow:auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
}
.tbl{
  width:100%;
  border-collapse: collapse;
  min-width: 820px;
  background: rgba(0,0,0,.10);
}
.tbl th, .tbl td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
}
.tbl th{
  text-align:left;
  color: rgba(229,231,235,.82);
  background: rgba(255,255,255,.04);
  position: sticky;
  top:0;
}
.badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 12px;
}

.app-body .badge{
  background:#f1f5f9;
  border-color:#e2e8f0;
  color:#0f172a;
  font-weight:700;
}

.cell-ellipsis{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-body .table-wrap{
  border: 1px solid #e2e8f0;
  background:#ffffff;
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}
.app-body .tbl{
  background:#ffffff;
  color:#0f172a;
}
.app-body .tbl th{
  background:#f1f5f9;
  color:#0f172a;
  position: sticky;
  top: var(--table-sticky-top, 88px);
  z-index: 2;
}
.app-body .tbl td{
  border-bottom: 1px solid #e2e8f0;
}
.app-body .tbl tbody tr:nth-child(even){
  background:#f8fafc;
}

/* ======================
   BACK BUTTON + DASH UI
====================== */
.backbar{
  display:flex;
  align-items:center;
  margin-bottom: 12px;
}
.back-btn{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #e5e7eb;
  font-weight: 700;
  cursor:pointer;
}
.back-btn:hover{ background: rgba(255,255,255,.12); }

.app-body .backbar{
  margin: 4px 0 18px;
}
.app-body .back-btn{
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid rgba(15,23,42,.12);
  background:#ffffff;
  color:#0f172a;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.app-body .back-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,23,42,.12);
  background:#f8fafc;
}

/* Login */
.auth-shell{
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(37,99,235,.22), transparent 60%),
    radial-gradient(900px 500px at 85% 25%, rgba(11,106,136,.35), transparent 60%),
    linear-gradient(135deg, rgba(6,26,43,1), rgba(11,106,136,.85));
  border-radius: 18px;
  padding: 26px 0 50px;
}
.auth-wrap{
  width: min(1100px, 92%);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 16px;
  margin-top: 63px
}
.auth-brand{
  position:relative;
  overflow:hidden;
  border-radius: 20px;
  box-shadow: 0 25px 70px rgba(2,6,23,.35);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  padding: 18px;
  backdrop-filter: blur(10px);
}
.auth-hero{
  border-radius: 16px;
  overflow:hidden;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(2,6,23,.18);
  border: 1px solid rgba(255,255,255,.40);
}
.auth-hero img{ width:100%; display:block; }
.auth-brand-text{ margin-top: 14px; }
.auth-title{
  color:#fff;
  font-size: 22px;
  font-weight: 900;
  margin:0;
}
.auth-sub{
  margin: 6px 0 0;
  color: rgba(255,255,255,.82);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
}
.auth-pills{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.auth-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}
.auth-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
}
.auth-card{
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 25px 70px rgba(2,6,23,.35);
  padding: 18px;
  color:#0f172a;
}
.auth-card h2{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}
.auth-card p{
  margin: 6px 0 0;
  color: #64748b;
  font-weight: 700;
  font-size: 13px;
}
.auth-form{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.auth-field span{
  display:block;
  font-weight: 800;
  color: #0f172a;
  font-size: 12px;
  margin-bottom: 6px;
}
.auth-input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  outline:none;
  font-weight: 700;
  color: #0f172a;
  background:#fff;
}
.auth-input:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.auth-btn{
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor:pointer;
  color:#fff;
  background: linear-gradient(135deg, rgba(11,106,136,1), rgba(37,99,235,.90));
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.auth-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,6,23,.18);
  filter: brightness(1.02);
}
.auth-seed{
  margin-top: 14px;
  border-top: 1px solid rgba(15,23,42,.10);
  padding-top: 12px;
}
.auth-seed-title{
  font-weight: 800;
  font-size: 12px;
  color:#475569;
  margin-bottom: 6px;
}
.auth-seed-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.auth-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color:#0f172a;
}

/* System 1 Premium Login Theme */
.sys1-login-scope{
  --login-brand: #B8A090;
  --login-brand-dark: #A08979;
  --login-brand-light: #F3EDE8;
  --login-brand-border: rgba(184,160,144,.35);
  --login-text: #2f251f;
  --login-muted: #6b5a50;
  font-family: "Century Gothic", "Segoe UI", Arial, sans-serif;
}
.sys1-login-scope,
.sys1-login-scope *{
  font-family: "Century Gothic", "Segoe UI", Arial, sans-serif;
}

.sys1-login-scope.auth-shell{
    background-color: #AA9180;
  background-image: url("/static/img/login-bg.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 620px;
}


.sys1-login-scope .auth-brand{
  background: linear-gradient(145deg, #ffffff, #ffffff);
  border: 1px solid var(--login-brand-border);
  box-shadow: 0 22px 60px rgba(47,37,31,.18);
  color: var(--login-text);
}
.sys1-login-scope .auth-hero{
  border: 0;
  width: 550px;
  height: 250px;
  background: transparent;
  box-shadow: 0 10px 24px rgba(47,37,31,.10);
}
.sys1-login-scope .auth-hero img{
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 220px;
  background: transparent;
}
.sys1-login-scope .auth-title{
  color: var(--login-text);
  font-size: 26px;
}
.sys1-login-scope .auth-sub{
  color: var(--login-muted);
  font-size: 14px;
}
.sys1-login-scope .auth-pill{
  color: var(--login-text);
  background: rgba(184,160,144,.16);
  border: 1px solid rgba(184,160,144,.35);
}
.sys1-login-scope .auth-dot{
  background: var(--login-brand);
}
.sys1-login-scope .auth-card{
  border: 1px solid rgba(184,160,144,.30);
  box-shadow: 0 24px 60px rgba(47,37,31,.20);
}
.sys1-login-scope .auth-card h2{
  font-size: 20px;
}
.sys1-login-scope .auth-card p{
  color: var(--login-muted);
}
.sys1-login-scope .auth-input{
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(184,160,144,.35);
  font-weight: 700;
}
.sys1-login-scope .auth-input:focus{
  border-color: rgba(184,160,144,.65);
  box-shadow: 0 0 0 4px rgba(184,160,144,.20);
}
.sys1-login-scope .auth-btn{
  background: #AA9180;
  box-shadow: 0 14px 28px rgba(184,160,144,.25);
}
.sys1-login-scope .auth-btn:hover{
  box-shadow: 0 16px 32px rgba(184,160,144,.30);
}
@media (max-width: 720px){
  .sys1-login-scope .auth-hero img{
    max-height: 160px;
  }
}

/* Dashboards */
.dash-shell{
  background: transparent;
  color:#0f172a;
  border-radius: 0;
  padding: 0 0 24px;
}
.dash-wrap{
  width: 100%;
  margin: 0;
}
.dash-hero{
  position: relative;
  background: linear-gradient(120deg, rgba(37,99,235,.12), rgba(14,116,144,.08));
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
  padding: 20px;
  margin-bottom: 20px;
}
.dash-hero-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.dash-brand{
  display:flex;
  align-items:stretch;
  gap: 12px;
  min-width: 280px;
  flex-wrap: wrap;
}
.dash-brand > img{
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(2,6,23,.12);
  background:#fff;
}
.dash-brand > div:not(.brand-logo-box){
  width: 100%;
}
.brand-logo-box{
  width: 400px;
  height: 180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  overflow:hidden;
}
.brand-logo-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.brand-logo-box .brand-logo-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.dash-brand .brand-logo-box{
  background:#fff;
  box-shadow: 0 10px 25px rgba(2,6,23,.12);
  flex: 0 1 auto;
}
.viewer-hero{
  padding: 16px;
}
.viewer-hero .dash-brand{
  align-items: center;
  flex-wrap: nowrap;
  gap: 120px;
}
.viewer-hero .dash-brand > div:not(.brand-logo-box){
  width: auto;
}
.viewer-hero .dash-brand > img{
  width: auto;
  height: 60px;
  max-height: 70px;
  object-fit: contain;
  flex: 0 0 auto;
}
.dash-title{
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 900;
  margin: 0;
  letter-spacing: .2px;
}
.page-request .dash-hero,
.page-request .viewer-hero{
  min-height: unset !important;
  height: auto !important;
  padding: 14px 16px !important;
}
.page-request .dash-hero .dash-hero-row{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}
.page-request .dash-brand > img{
  height: 60px !important;
  width: auto !important;
  max-height: 60px !important;
  max-width: 180px !important;
  object-fit: contain !important;
  display: block !important;
}
.page-request .pl-letterhead img{
  height: 60px !important;
  width: auto !important;
  max-height: 60px !important;
  object-fit: contain !important;
}
@media (max-width: 768px){
  .brand-logo-box{
    width: 200px;
    height: 86px;
    padding: 8px 12px;
  }
}
.dash-sub{
  margin: 2px 0 0;
  color: #64748b;
  font-size: 13px;
}
.dash-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: 12px;
  padding: 10px 14px;
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  color: #0f172a;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.dash-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 25px rgba(2,6,23,.10);
}
.dash-btn.primary{
  background: linear-gradient(135deg, #0b6a88, rgba(11,106,136,.85));
  color:#fff;
  border-color: rgba(11,106,136,.25);
}
.dash-btn.ghost{
  background: rgba(255,255,255,.70);
}
.dash-stats{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  margin: 18px 0 22px;
}
.dash-stat{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 20px 20px;
  box-shadow: 0 18px 35px rgba(2,6,23,.08);
  position: relative;
  overflow:hidden;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}
.dash-stat::after{
  content:"";
  position:absolute;
  right:-26px; top:-26px;
  width: 84px; height: 84px;
  background: radial-gradient(circle, rgba(37,99,235,.16), transparent 60%);
  transform: rotate(15deg);
}
.dash-stat:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 45px rgba(2,6,23,.14);
  border-color: rgba(37,99,235,.35);
}
.dash-stat:active{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(2,6,23,.12);
}
.dash-stat.is-active{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 14px 30px rgba(37,99,235,.15);
}
.dash-stat-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 6px;
}
.dash-stat-ico{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(37,99,235,.14);
  border: 1px solid rgba(37,99,235,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
}
.dash-stat-ico.ico-total{ background: rgba(14,116,144,.16); border-color: rgba(14,116,144,.3); }
.dash-stat-ico.ico-need{ background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.3); }
.dash-stat-ico.ico-review{ background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.3); }
.dash-stat-ico.ico-returned{ background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.3); }
.dash-stat-ico.ico-completed{ background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.3); }
.dash-stat-ico.ico-view{ background: rgba(100,116,139,.16); border-color: rgba(100,116,139,.3); }
.dash-stat-ico::after{
  content:"";
  width: 16px;
  height: 16px;
  background-repeat:no-repeat;
  background-size: contain;
  background-position:center;
}
.dash-stat-ico.ico-total::after{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/><rect x='14' y='14' width='7' height='7' rx='1.5'/></svg>");
}
.dash-stat-ico.ico-need::after{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M4 20h4l10-10-4-4L4 16v4z'/><path d='M14 6l4 4'/></svg>");
}
.dash-stat-ico.ico-review::after{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4-4' fill='%23fff'/></svg>");
}
.dash-stat-ico.ico-returned::after{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M10 7l-5 5 5 5V7z'/><rect x='11' y='11' width='9' height='2'/></svg>");
}
.dash-stat-ico.ico-completed::after{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M9 16l-4-4 2-2 2 2 6-6 2 2-8 8z'/></svg>");
}
.dash-stat-ico.ico-view::after{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M12 5c5 0 9 5 9 7s-4 7-9 7-9-5-9-7 4-7 9-7z'/><circle cx='12' cy='12' r='3' fill='%230f172a'/></svg>");
}
.dash-stat-k{
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
}
.dash-stat-v{
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
  animation: fadeUp .25s ease-out;
}
.dash-toolbar{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
  margin-bottom: 16px;
}
.dash-filter{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-label{
  font-weight: 800;
  color:#0f172a;
  font-size: 12px;
}
.dash-select{
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 12px;
  padding: 10px 12px;
  outline:none;
  font-weight: 800;
  color: #0f172a;
  background:#fff;
  min-width: 200px;
}
.dash-table-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
}
.table-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
}
.table-card table{
  width: 100%;
  border-collapse: collapse;
}
.table-card .dash-table,
.table-card .tbl{
  table-layout: fixed;
}
.table-card .dash-table.responsive thead,
.table-card .tbl.responsive thead{
  display: table-header-group;
}
.table-card .dash-table.responsive tbody tr,
.table-card .tbl.responsive tbody tr{
  display: table-row;
}
.table-card .dash-table.responsive td,
.table-card .tbl.responsive td{
  display: table-cell;
  padding: 10px 12px;
}
.table-card .dash-table.responsive td::before,
.table-card .tbl.responsive td::before{
  content: none;
}
.table-card .dash-table.responsive td.td-actions,
.table-card .tbl.responsive td.td-actions{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.dash-table-head{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-table-title{
  font-weight: 900;
  color: #0f172a;
  margin: 0;
  font-size: 14px;
}
.dash-table-meta{
  font-size: 12px;
  color: #64748b;
  font-weight: 800;
}
.dash-table-scroll-top{
  height: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.dash-table-scroll-inner{
  height: 1px;
}
.table-scroll-top{
  height: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
  border-left: 1px solid rgba(15,23,42,.08);
  border-right: 1px solid rgba(15,23,42,.08);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.table-scroll-top-inner{
  height: 1px;
}
.table-scroll-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  border-left: 1px solid rgba(15,23,42,.08);
  border-right: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background:#ffffff;
  -webkit-overflow-scrolling: touch;
}

.page-xscroll{
  width: 100%;
}
.page-xscroll-top,
.page-xscroll-bottom{
  height: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.page-xscroll-top{ margin-bottom: 12px; }
.page-xscroll-bottom{ margin-top: 12px; }
.page-xscroll-top-inner,
.page-xscroll-bottom-inner{
  height: 1px;
}
.page-xscroll-body{
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.dash-table-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
}
table.dash-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1100px;
  table-layout: fixed;
}
table.dash-table thead th{
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,64,175,.92));
  color: #fff;
  text-align: left;
  padding: 12px 12px;
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
  position: sticky;
  top: var(--table-sticky-top, 88px);
  z-index: 2;
}
table.dash-table thead th .sort-link{
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
table.dash-table thead th .sort-link:hover{
  color:#e2e8f0;
}
table.dash-table thead th .sort-indicator{
  font-size: 12px;
  opacity: .9;
}
 .table-card table.dash-table thead th{
  top: 0;
}
table.dash-table thead th a.link{
  color: #fff;
}
table.dash-table thead th a.link:hover{
  color: #e2e8f0;
}

.table-card .tbl{
  min-width: 900px;
  table-layout: fixed;
}
.table-card .tbl thead th{
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,64,175,.92));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}
.table-card .tbl thead th a.link{
  color: #fff;
}
table.dash-table tbody td{
  padding: 12px 12px;
  border-top: 1px solid rgba(15,23,42,.06);
  color: #0f172a;
  vertical-align: middle;
  min-height: 54px;
  height: 54px;
}
table.dash-table tbody tr:nth-child(even){
  background: #f8fafc;
}
table.dash-table tbody tr:hover{
  background: rgba(37,99,235,.06);
}
.dash-table td.td-actions,
.tbl td.td-actions{
  text-align:center;
  white-space: nowrap;
}
.dash-table td.td-actions a,
.tbl td.td-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background:#f1f5f9;
  font-size: 12px;
  font-weight: 800;
  color:#0f172a;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.dash-table td.td-actions a:hover,
.tbl td.td-actions a:hover{
  background:#e2e8f0;
  box-shadow: 0 10px 20px rgba(15,23,42,.10);
  transform: translateY(-1px);
}
.dash-badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  white-space: nowrap;
}
.status-approved{ background: rgba(22,163,74,.12); color:#14532d; border-color: rgba(22,163,74,.30); }
.status-rejected{ background: rgba(239,68,68,.12); color:#7f1d1d; border-color: rgba(239,68,68,.30); }
.status-pending{ background: rgba(245,158,11,.14); color:#92400e; border-color: rgba(245,158,11,.30); }
.status-draft{ background: rgba(100,116,139,.12); color:#334155; border-color: rgba(100,116,139,.28); }
.status-other{ background: rgba(79,70,229,.12); color:#312e81; border-color: rgba(79,70,229,.30); }

.priority-high{ background: rgba(239,68,68,.12); color:#7f1d1d; border-color: rgba(239,68,68,.30); }
.priority-medium{ background: rgba(245,158,11,.14); color:#92400e; border-color: rgba(245,158,11,.30); }
.priority-low{ background: rgba(16,185,129,.12); color:#065f46; border-color: rgba(16,185,129,.30); }
.priority-none{ background: rgba(100,116,139,.12); color:#334155; border-color: rgba(100,116,139,.28); }

/* Column sizing for dashboards */
.dash-table .col-id{ width: 80px; }
.dash-table .col-status{ width: 150px; }
.dash-table .col-request{ width: 280px; }
.dash-table .col-date{ width: 130px; }
.dash-table .col-priority{ width: 110px; }
.dash-table .col-open{ width: 110px; }

/* Profile */
.profile-shell{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
}
.profile-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
  padding: 16px;
  text-align: center;
  color: #0f172a;
  position: relative;
  overflow: hidden;
}
.profile-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background: linear-gradient(90deg, rgba(37,99,235,.8), rgba(14,116,144,.7));
}
.profile-avatar{
  width: 140px;
  height: 140px;
  margin: 0 auto 12px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(15,23,42,.10);
  background: #f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
}
.profile-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar-fallback{
  font-size: 48px;
  font-weight: 900;
  color:#0f172a;
}
.profile-signature{
  margin: 8px auto 6px;
  padding: 8px 10px;
  border: 1px dashed rgba(15,23,42,.2);
  border-radius: 12px;
  background: #f8fafc;
  max-width: 200px;
}
.profile-signature-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:#64748b;
  margin-bottom: 6px;
}
.profile-signature img{
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
}
.profile-name{
  font-size: 18px;
  font-weight: 900;
}
.profile-email{
  font-size: 13px;
  color:#64748b;
  margin-top: 4px;
}
.profile-level{
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  color:#0f172a;
  background:#e2e8f0;
  padding: 6px 10px;
  border-radius: 999px;
  display:inline-block;
}
.profile-form{
  color:#0f172a;
}
.signature-image{
  max-width: 220px;
  max-height: 70px;
  object-fit: contain;
}
@media (max-width: 900px){
  .profile-shell{ grid-template-columns: 1fr; }
}

@media (max-width: 1100px){
  .dash-stats{ gap: 14px; }
}
@media (max-width: 900px){
  .auth-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .dash-stats{ gap: 12px; }
}

@media (max-width: 1400px){
  .page-xscroll-body .grid2{
    grid-template-columns: 1fr;
  }
}
/* ======================
   PAPER / FORM LOOK
====================== */
.paper{
  background: var(--paper);
  color: var(--text);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px 18px 22px;
  border: 1px solid rgba(15,23,42,.10);
}
.paper .muted{ color: #475569; }
.paper .badge{ background: #f8fafc; border-color: #e2e8f0; }
.paper .btn{ color:#0f172a; background:#f1f5f9; border-color:#e2e8f0; }
.paper .btn:hover{ background:#e2e8f0; }
.paper .btn.primary{ background:#dbeafe; border-color:#93c5fd; }
.paper .btn.primary:hover{ background:#bfdbfe; }

.dr-header{
  display:grid;
  grid-template-columns: 220px 1fr 220px;
  align-items:center;
  gap:10px;
  padding: 6px 6px 12px;
}
.dr-logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.dr-logo.right{ justify-content:flex-end; }
.logo{ width:60px; height:60px; object-fit:contain; }
.logo-fallback{
  font-weight:800;
  font-size:14px;
  line-height:1.1;
  color:#0f172a;
}
.logo-fallback span{ font-weight:700; font-size:11px; color:#334155; }
.dr-title{
  text-align:center;
}
.dr-title-main{
  font-size: 20px;
  font-weight: 900;
  letter-spacing:.3px;
}
.dr-subline{
  display:flex;
  justify-content:flex-start;
  padding: 4px 8px 12px;
  border-bottom: 2px solid #111827;
  margin-bottom: 12px;
}
.dr-subline-left{
  font-weight:700;
  font-size: 13px;
}

.dr-topgrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 980px){
  .dr-header{ grid-template-columns: 1fr; text-align:center; }
  .dr-logo.right{ justify-content:center; }
  .dr-topgrid{ grid-template-columns: 1fr; }
}
.dr-fields{
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dr-fields td{
  padding: 5px 6px;
  vertical-align: middle;
}
.dr-fields td.lbl{
  width: 170px;
  color:#111827;
  font-weight: 700;
}
.dr-fields td.sep{
  width: 12px;
  text-align:center;
  font-weight:700;
  color:#111827;
}
.field{
  width:100%;
  padding: 6px 8px;
  border: 1px solid #111827;
  border-radius: 8px;
  font-size: 13px;
  outline:none;
}
.field.ro{
  background:#f8fafc;
  color:#0f172a;
  border:1px solid #111827;
  min-height: 32px;
  display:flex;
  align-items:center;
}

.dr-to-cc{
  width:100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.dr-to-cc th, .dr-to-cc td{
  border: 1px solid #111827;
  padding: 6px 6px;
}
.dr-to-cc th{
  background: #f3f4f6;
  color:#111827;
  text-align:left;
  font-weight:800;
}
.dr-to-cc td.center{ text-align:center; }
.namecell{ font-weight:700; color:#111827; }

.dr-meta{
  margin-top: 10px;
  display:grid;
  gap: 8px;
}
.meta-row{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  align-items:center;
}
.meta-lbl{ font-weight:800; color:#111827; font-size:13px; }
.meta-field{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #111827;
  background:#fff;
  font-size: 13px;
}
.meta-ro{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #111827;
  background:#f8fafc;
  font-size: 13px;
}

.dr-section-head{
  display:grid;
  grid-template-columns: 70px 1fr 120px;
  border: 2px solid #111827;
  border-bottom: none;
  background:#f3f4f6;
  color:#111827;
  font-weight: 900;
  font-size: 13px;
}
.dr-section-head .col{
  padding: 8px 10px;
  border-right: 1px solid #111827;
}
.dr-section-head .col:last-child{ border-right:none; }

.dr-section{
  display:grid;
  grid-template-columns: 70px 1fr 120px;
  border: 2px solid #111827;
  border-top: none;
}
.dr-section.last{ border-bottom: 2px solid #111827; }
.sec-no{
  border-right: 1px solid #111827;
  padding: 10px;
  font-weight: 900;
  color:#111827;
}
.sec-body{
  padding: 10px;
  border-right: 1px solid #111827;
}
.sec-note{
  padding: 10px;
}
.sec-title{
  font-weight: 900;
  color:#111827;
  margin-bottom: 8px;
}
.row-between{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.yesno{ display:flex; gap:10px; align-items:center; font-weight:800; }
.yesno.ro{ font-weight:700; }
.chk{
  display:flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
  font-weight:700;
  color:#111827;
  font-size: 13px;
}
.chk input{ transform: translateY(1px); }

.ta{
  width:100%;
  border-radius: 10px;
  border: 1px solid #111827;
  background:#fff;
  color:#0f172a;
  padding: 10px;
  font-size: 13px;
}
.paper .ta{ box-shadow:none; }

.ro-block{
  border: 1px solid #111827;
  border-radius: 10px;
  padding: 10px;
  min-height: 64px;
  background:#f8fafc;
  white-space: pre-wrap;
  font-size: 13px;
}

/* Financial rows like PDF */
.fc-grid{ display:grid; gap:10px; }
.fc-left{ display:grid; gap:8px; }
.fc-row{
  display:grid;
  grid-template-columns: 1fr 70px 160px;
  gap: 10px;
  align-items:center;
}
.fc-row.bold .fc-lbl{ font-weight:900; }
.fc-lbl{ font-weight:700; color:#111827; font-size: 13px; }
.fc-cur{
  text-align:center;
  font-weight:900;
  border:1px solid #111827;
  border-radius: 10px;
  padding: 8px 6px;
  background:#fff;
}
.fc-inp{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #111827;
  font-size: 13px;
}
.fc-ro{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #111827;
  background:#f8fafc;
  font-size: 13px;
}

/* Approvals */
.approvals{ display:grid; gap:12px; }
.approval-block{
  border: 2px solid #111827;
  border-radius: 12px;
  overflow:hidden;
}
.approval-row{
  padding: 10px 10px 0;
}
.decision-bar{
  font-weight:900;
  color:#111827;
  margin-bottom: 10px;
}
.decision-boxes{
  display:grid;
  grid-template-columns: repeat(4, minmax(120px,1fr));
  gap: 8px;
  padding-bottom: 10px;
}
@media (max-width: 900px){
  .decision-boxes{ grid-template-columns: 1fr 1fr; }
}
.chkbox{
  border: 1px solid #111827;
  border-radius: 10px;
  padding: 10px 10px;
  font-weight: 800;
  font-size: 12.5px;
  background:#fff;
}
.chkbox.on{
  background:#dcfce7;
  border-color:#166534;
}
.approval-comments{
  border-top: 1px solid #111827;
  padding: 10px;
  background:#f9fafb;
}
.sig-preview{
  margin-top: 10px;
  display:grid;
  gap:8px;
}
.sig-img{
  width: 260px;
  height: auto;
  border: 1px solid #111827;
  border-radius: 10px;
  background:#fff;
  padding: 6px;
}

/* Signature Pad */
.sig-pad{ margin-top: 10px; }
.sig-canvas{
  width: 100%;
  border: 2px dashed #111827;
  border-radius: 12px;
  background:#fff;
  cursor: crosshair;
}
.sig-saved{
  border:1px solid #111827;
  border-radius: 12px;
  padding: 10px;
  background:#f8fafc;
}
.sig-saved img{ max-width: 280px; }

/* ======================
   RESPONSIVE LAYOUT
====================== */
.app-content .td-actions{
  white-space: nowrap;
}

@media (min-width: 1440px){
  .container,
  .app-header-inner,
  .app-footer-inner{
    max-width: none;
  }
}

@media (min-width: 1920px){
  .container,
  .app-header-inner,
  .app-footer-inner{
    max-width: none;
  }
}

@media (max-width: 1024px){
  .app-body .app-content{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .app-body .tbl{
    min-width: 0;
    table-layout: fixed;
  }
  .app-body .tbl th,
  .app-body .tbl td{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .app-body .table-wrap{
    max-width: 100%;
  }

  .app-body .pdfx-wrap{
    max-width: 100%;
  }
  .app-body .pdfx-a4{
    width: 100%;
    padding: 8mm 8mm 10mm;
  }
  .app-body .pdfx-report .page{
    min-height: auto;
    position: relative;
  }
}

@media (max-width: 1023px){
  .app-header-inner{
    padding: 14px 16px;
  }
  .app-footer-inner{
    padding: 12px 16px;
  }
  .card{
    padding: 14px;
  }
  .h2{ font-size: clamp(18px, 2.2vw, 22px); }
  .h3{ font-size: clamp(14px, 1.6vw, 16px); }
}

@media (max-width: 899px){
  .row{
    flex-wrap: wrap;
  }
  .app-header-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .nav{
    width: 100%;
  }
  .tbl{
    min-width: 720px;
  }
}

@media (max-width: 767px){
  .container{
    padding: 16px 12px 32px;
  }
  .actions{
    gap: 8px;
  }
  .btn{
    width: 100%;
    text-align: center;
  }
  .btn.inline{
    width: auto;
  }
  .inp, .ta, select.inp, .field, .fc-inp, .meta-field, .meta-ro{
    min-height: 44px;
    font-size: 14px;
  }
  .lbl{ font-size: 13px; }

  .table-wrap.responsive-wrap{
    overflow: visible;
    border: none;
  }
  .tbl.responsive{
    min-width: 0;
    background: transparent;
  }
  .tbl.responsive thead{
    display: none;
  }
  .tbl.responsive tbody tr{
    display: block;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(0,0,0,.12);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .tbl.responsive td{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
  }
  .tbl.responsive td:last-child{
    border-bottom: none;
  }
  .tbl.responsive td::before{
    content: attr(data-label);
    font-weight: 700;
    color: rgba(229,231,235,.78);
    padding-right: 10px;
  }
  .tbl.responsive td.td-actions{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tbl.responsive td.td-actions a{
    display: inline-block;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
  }
  .tbl.responsive td form{
    width: 100%;
  }
  .tbl.responsive td .inp{
    width: 100% !important;
  }

  .dash-table.responsive thead{
    display: none;
  }
  .dash-table.responsive tbody tr{
    display: block;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 12px;
    background: #ffffff;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .dash-table.responsive td{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(15,23,42,.06);
    font-size: 13px;
  }
  .dash-table.responsive td:last-child{
    border-bottom: none;
  }
  .dash-table.responsive td::before{
    content: attr(data-label);
    font-weight: 800;
    color: #64748b;
    padding-right: 10px;
  }
  .dash-table.responsive td.td-actions{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .table-card .dash-table.responsive thead,
  .table-card .tbl.responsive thead{
    display: table-header-group;
  }
  .table-card .dash-table.responsive tbody tr,
  .table-card .tbl.responsive tbody tr{
    display: table-row;
    border: none;
    background: transparent;
    margin-bottom: 0;
  }
  .table-card .dash-table.responsive td,
  .table-card .tbl.responsive td{
    display: table-cell;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(15,23,42,.08);
    font-size: 13px;
  }
  .table-card .dash-table.responsive td::before,
  .table-card .tbl.responsive td::before{
    content: none;
  }
  .table-card .dash-table.responsive td.td-actions,
  .table-card .tbl.responsive td.td-actions{
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .table-card table.dash-table thead th,
  .table-card .tbl thead th{
    position: static;
  }

  .paper{
    padding: 14px;
  }
  .dr-header{
    grid-template-columns: 1fr;
    text-align: center;
    padding: 4px 4px 10px;
  }
  .logo{
    width: 48px;
    height: 48px;
  }
  .dr-subline{
    flex-direction: column;
    gap: 6px;
  }
  .dr-topgrid{
    grid-template-columns: 1fr;
  }
  .dr-fields,
  .dr-fields tbody,
  .dr-fields tr,
  .dr-fields td{
    display: block;
    width: 100%;
  }
  .dr-fields td.lbl{
    width: 100%;
    margin-top: 8px;
  }
  .dr-fields td.sep{
    display: none;
  }
  .dr-to-cc{
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  .dr-to-cc th,
  .dr-to-cc td{
    white-space: nowrap;
  }
  .dr-section-head,
  .dr-section{
    grid-template-columns: 1fr;
  }
  .dr-section-head .col,
  .dr-section .sec-no,
  .dr-section .sec-body,
  .dr-section .sec-note{
    border-right: none;
  }
  .dr-section .sec-no{
    border-bottom: 1px solid #111827;
  }
  .yesno{
    flex-wrap: wrap;
  }
  .fc-row{
    grid-template-columns: 1fr;
  }
  .decision-boxes{
    grid-template-columns: 1fr;
  }
  .sig-img,
  .sig-saved img{
    max-width: 100%;
  }
  .cert-hero-inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .cert-meta{
    justify-self: center;
    text-align: center;
  }
}

@media (max-width: 600px){
  .app-body .row,
  .app-body .row-between{
    flex-direction: column;
    align-items: stretch;
  }
  .app-body .row > *,
  .app-body .row-between > *{
    width: 100%;
    min-width: 0 !important;
  }
  .app-body .nav{
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .app-body .table-wrap{
    overflow: visible;
  }
  .app-body .tbl.responsive td{
    align-items: flex-start;
  }
  .app-body .tbl.responsive td::before{
    width: 45%;
  }

  .app-body .pdfx-a4{
    padding: 12px;
    font-size: 11px;
  }
  .app-body .pdfx-form .hdr{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .app-body .pdfx-form .topgrid{
    grid-template-columns: 1fr;
  }
  .app-body .pdfx-form .kv td,
  .app-body .pdfx-form .kv tr{
    display: block;
    width: 100%;
  }
  .app-body .pdfx-form .kv td.sep{
    display: none;
  }
  .app-body .pdfx-form .meta .row{
    grid-template-columns: 1fr;
  }
  .app-body .pdfx-form .route th,
  .app-body .pdfx-form .route td{
    font-size: 10px;
  }
  .app-body .pdfx-form .sec-head,
  .app-body .pdfx-form .sec{
    grid-template-columns: 1fr;
  }
  .app-body .pdfx-form .sec-head div{
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,.25);
  }
  .app-body .pdfx-form .sec-head div:last-child{
    border-bottom: none;
  }
  .app-body .pdfx-form .sec .no,
  .app-body .pdfx-form .sec .body,
  .app-body .pdfx-form .sec .yn{
    border-right: none;
  }
  .app-body .pdfx-form .fin-row{
    grid-template-columns: 1fr;
  }
  .app-body .pdfx-form .ap-choices{
    grid-template-columns: 1fr;
  }
  .app-body .pdfx-form .sigline{
    grid-template-columns: 1fr;
  }

  .app-body .pdfx-report .page{
    padding: 12px;
  }
  .app-body .pdfx-report .cover-top{
    height: auto;
    margin-bottom: 12px;
  }
  .app-body .pdfx-report .cover-title,
  .app-body .pdfx-report .cover-meta,
  .app-body .pdfx-report .qr{
    position: static;
  }
  .app-body .pdfx-report .cover-title{
    margin: 8px 0 6px;
    font-size: 20px;
  }
  .app-body .pdfx-report .cover-meta{
    gap: 2px;
    margin-bottom: 10px;
  }
  .app-body .pdfx-report .qr{
    margin: 0 0 10px;
  }
  .app-body .pdfx-report .footer{
    position: static;
    margin-top: 10px;
  }
  .app-body .pdfx-report table{
    table-layout: fixed;
  }
  .app-body .pdfx-report td,
  .app-body .pdfx-report th{
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 10px;
    padding: 6px 8px;
  }
}

@media (max-width: 479px){
  .container{
    padding: 14px 10px 28px;
  }
  .nav-link{
    flex: 1 1 45%;
    text-align: center;
  }
  .dr-title-main{
    font-size: 18px;
  }
  .dr-section-head{
    font-size: 12px;
  }
  .dr-fields td,
  .field,
  .meta-field,
  .meta-ro{
    font-size: 13px;
  }
}

@media (max-width: 480px){
  .app-body .card{
    padding: 12px;
  }
  .app-body .tbl.responsive td{
    flex-direction: column;
    align-items: flex-start;
  }
  .app-body .tbl.responsive td::before{
    margin-bottom: 4px;
  }

  .app-body .pdfx-report .cover-title{
    font-size: 18px;
  }
}

@media (max-width: 374px){
  .btn{
    padding: 10px 12px;
  }
  .tbl.responsive td{
    font-size: 12.5px;
  }
}

@media (max-width: 1024px){
  .table-card .tbl{ min-width: 900px; }
  .table-card .dash-table{ min-width: 1100px; }
}

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.app-body :focus-visible{
  outline: 3px solid rgba(37,99,235,.45);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .page-enter{ animation: none !important; }
}

.desktop-canvas-wrap{
  --canvas-width: 210mm;
  --canvas-scale: 1;
  width: 100%;
  position: relative;
}
.desktop-canvas{
  width: var(--canvas-width);
  margin: 0 auto;
  position: relative;
  overflow: visible;
}
.desktop-canvas-scale{
  width: var(--canvas-width);
  transform-origin: top left;
  transform: scale(var(--canvas-scale)) translateZ(0);
  will-change: transform;
}

@media print{
  .desktop-canvas-wrap,
  .desktop-canvas{
    width: var(--canvas-width) !important;
    height: auto !important;
  }
  .desktop-canvas-scale{
    transform: none !important;
  }
}

/* ======================
   CERTIFICATE / REPORT
====================== */
.cert{
  background: var(--paper);
  color: #0f172a;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(15,23,42,.10);
  overflow:hidden;
}
.cert-page{
  padding: 18px 18px 12px;
  min-height: 1040px;
  position: relative;
}
.cert-hero{
  background: linear-gradient(135deg, #0b1220 0%, #101f3d 55%, #0b1220 100%);
  color:#fff;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}
.cert-hero-inner{
  display:grid;
  grid-template-columns: 160px 1fr 280px;
  gap: 14px;
  align-items:center;
}
@media (max-width: 980px){
  .cert-hero-inner{ grid-template-columns: 1fr; text-align:center; }
}
.cert-title{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .3px;
}
.cert-meta{
  justify-self:end;
  text-align:right;
  font-size: 12px;
  opacity: .95;
  display:grid;
  gap: 6px;
}
.cert-qr{
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  padding: 10px;
  display:grid;
  gap: 8px;
  width: 160px;
  background: rgba(255,255,255,.08);
}
.qr-box{
  height: 110px;
  border-radius: 10px;
  border: 2px dashed rgba(255,255,255,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  opacity:.9;
}

.cert-block{
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  background:#ffffff;
}
.cert-block.top{ margin-top: 8px; }
.cert-h{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 6px;
}
.cert-tbl{
  width:100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.cert-tbl td{
  padding: 10px 10px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
}
.cert-tbl td:first-child{
  width: 240px;
  font-weight: 800;
  color:#0f172a;
}
.linkish{ color:#1d4ed8; font-weight:800; }

.participant{
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow:hidden;
}
.participant-h{
  background:#f1f5f9;
  padding: 10px 12px;
  font-weight: 900;
}
.participant-tbl{
  width:100%;
  border-collapse: collapse;
}
.participant-tbl th, .participant-tbl td{
  padding: 10px 10px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
  vertical-align: top;
}
.participant-tbl th{ background:#f8fafc; font-weight:900; }

.audit-tbl{
  width:100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.audit-tbl th, .audit-tbl td{
  padding: 10px 10px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
  vertical-align: top;
}
.audit-tbl th{
  background:#f8fafc;
  font-weight: 900;
}

.cert-footer{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  display:flex;
  justify-content:space-between;
  color:#475569;
  font-size: 12px;
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
}

.page-break{ height: 18px; background: transparent; }

/* PDF print rules */
@media print{
  html,body{ height:auto !important; }
  body{ background:#fff !important; }
  .topbar,.footer,.nav,.flash-wrap,.backbar,.app-header,.app-footer,.no-print{ display:none !important; }
  .delegate-note,.route-note{ display:none !important; }
  .container{ padding:0 !important; }
  .paper,.cert{ box-shadow:none !important; border:none !important; }
  .pdfx-wrap{ overflow: visible !important; box-shadow:none !important; border:none !important; }
  .page-break{ page-break-after: always; height: 0; }
}


/* =========================================================
   PDF-EXACT (Form + Report)  -- applies ONLY to .pdfx-*
   Colors sampled from your PDFs:
   - Form blue: #2263AE
   - Circularo purple: #4112D5
========================================================= */

.pdfx-wrap{
  background:#fff;
  color:#111;
  border:1px solid #cfd6df;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  overflow:hidden;
  font-family: "Calibri","Carlito","Arial","Helvetica",sans-serif;
}

/* A4 canvas feel */
.pdfx-a4{
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 10mm 10mm 12mm;
  font-family: "Calibri","Carlito","Arial","Helvetica",sans-serif;
  font-size: 12px;
  line-height: 1.25;
  background:#fff;
  color:#111;
}

/* ---------- FORM (Decision Request Form) ---------- */
.pdfx-form .hdr{
  display:grid;
  grid-template-columns: 170px 1fr 170px;
  align-items:center;
  gap: 10px;
  margin-bottom: 6px;
}
.pdfx-form .logo{
  height: 44px;
  object-fit: contain;
}
.pdfx-form .title{
  text-align:center;
  color:#1f3f8a;
  font-weight: 700;
  font-size: 15px;
}
.pdfx-form .subline{
  margin-top: 6px;
  padding: 4px 0 6px;
  border-top: 1px solid #b9c3d0;
  border-bottom: 1px solid #b9c3d0;
  color:#2a3a55;
  font-size: 11px;
}
.pdfx-form .topgrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 10px;
}
@media (max-width: 1100px){
  .pdfx-a4{ width: 100%; }
  .pdfx-form .topgrid{ grid-template-columns: 1fr; }
  .pdfx-form .hdr{ grid-template-columns: 1fr; }
}

.pdfx-form table{
  width:100%;
  border-collapse: collapse;
}
.pdfx-form .kv td{
  padding: 3px 6px;
  vertical-align: top;
}
.pdfx-form .kv td.k{
  width: 170px;
  color:#1b2a44;
  font-weight: 700;
  font-size: 11px;
}
.pdfx-form .kv td.sep{
  width: 10px;
  text-align:center;
  color:#1b2a44;
  font-weight: 700;
}
.pdfx-form .kv td.v{
  border-bottom: 1px solid #d3dae4;
  font-size: 11.5px;
  padding-bottom: 2px;
}

.pdfx-form .route{
  border:1px solid #b9c3d0;
  border-radius: 6px;
  overflow:hidden;
}
.pdfx-form .route th,
.pdfx-form .route td{
  border-bottom:1px solid #d6dde7;
  padding: 5px 6px;
  font-size: 11px;
}
.pdfx-form .route thead th{
  background:#f3f6fb;
  color:#1b2a44;
  font-weight: 700;
}
.pdfx-form .route th.small{ width: 40px; text-align:center; }
.pdfx-form .route td.small{ text-align:center; width:40px; }
.pdfx-form .route td.name{ font-weight:600; color:#1a2a44; }

.pdfx-form .meta{
  margin-top: 8px;
  display:grid;
  gap: 6px;
}
.pdfx-form .meta .row{
  display:grid;
  grid-template-columns: 70px 1fr;
  gap: 8px;
  align-items:center;
}
.pdfx-form .meta .lbl{
  font-weight: 700;
  color:#1b2a44;
  font-size: 11px;
}
.pdfx-form .meta .val{
  border:1px solid #b9c3d0;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 11px;
}

.pdfx-form .sec-head{
  margin-top: 10px;
  border: 1px solid #2263AE;
  background:#2263AE;
  color:#fff;
  display:grid;
  grid-template-columns: 55px 1fr 90px 90px;
  font-weight: 700;
  font-size: 11px;
}
.pdfx-form .sec-head div{
  padding: 6px 8px;
  border-right: 1px solid rgba(255,255,255,.35);
}
.pdfx-form .sec-head div:last-child{ border-right:none; }

.pdfx-form .sec{
  border: 1px solid #b9c3d0;
  border-top:none;
  display:grid;
  grid-template-columns: 55px 1fr 90px 90px;
}
.pdfx-form .sec .no{
  border-right:1px solid #b9c3d0;
  padding: 8px;
  font-weight: 700;
  color:#1b2a44;
  font-size: 11px;
}
.pdfx-form .sec .body{
  border-right:1px solid #b9c3d0;
  padding: 8px;
}
.pdfx-form .sec .yn{
  border-right:1px solid #b9c3d0;
  padding: 8px;
  text-align:center;
}
.pdfx-form .sec .yn:last-child{ border-right:none; }

.pdfx-form .box{
  border:1px solid #b9c3d0;
  border-radius: 5px;
  padding: 6px 8px;
  min-height: 34px;
  font-size: 11.5px;
  white-space: pre-wrap;
}
.pdfx-form .ta{
  width:100%;
  border:1px solid #b9c3d0;
  border-radius: 5px;
  padding: 7px 8px;
  font-family: "Calibri","Carlito","Arial","Helvetica",sans-serif;
  font-size: 11.5px;
  min-height: 70px;
  resize: vertical;
}
.pdfx-form .ta:focus{
  outline: none;
  border-color:#2263AE;
  box-shadow: 0 0 0 2px rgba(34,99,174,.12);
}

.pdfx-form .yn input{ transform: scale(1.05); }

.pdfx-form .fin-grid{
  display:grid;
  gap: 6px;
}
.pdfx-form .fin-row{
  display:grid;
  grid-template-columns: 1fr 70px 160px;
  gap: 8px;
  align-items:center;
}
.pdfx-form .fin-row .cur{
  border:1px solid #b9c3d0;
  border-radius: 5px;
  padding: 5px 6px;
  text-align:center;
  font-weight:700;
  font-size: 11px;
}
.pdfx-form .fin-row input{
  border:1px solid #b9c3d0;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 11px;
  font-family: "Calibri","Carlito","Arial","Helvetica",sans-serif;
}
.pdfx-form .fin-row input:focus{
  outline:none;
  border-color:#2263AE;
  box-shadow: 0 0 0 2px rgba(34,99,174,.12);
}

.pdfx-form .approvals{
  margin-top: 10px;
  border:1px solid #b9c3d0;
}
.pdfx-form .ap-row{
  border-top:1px solid #d6dde7;
  padding: 6px 8px 8px;
}
.pdfx-form .ap-row:first-child{ border-top:none; }
.pdfx-form .ap-name{
  font-weight:700;
  font-size: 11px;
  color:#1b2a44;
  margin-bottom: 6px;
}
.pdfx-form .ap-choices{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}
@media (max-width: 900px){
  .pdfx-form .ap-choices{ grid-template-columns: 1fr 1fr; }
}
.pdfx-form .choice{
  border:1px solid #b9c3d0;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 11px;
  background:#f7f9fd;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
}
.pdfx-form .choice input{ transform: scale(1.05); }

.pdfx-form .ap-notes{
  border:1px solid #b9c3d0;
  border-radius: 5px;
  padding: 6px 8px;
  min-height: 34px;
  font-size: 11.5px;
  white-space: pre-wrap;
  background:#fff;
}

.pdfx-form .sigline{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  font-size: 10.5px;
}
@media (max-width: 1100px){
  .pdfx-form .sigline{ grid-template-columns: 1fr 1fr; }
}
.pdfx-form .sigbox{
  border-top:1px solid #111;
  padding-top: 6px;
}
.pdfx-form .sigbox .k{ font-weight:700; color:#1b2a44; }
.pdfx-form .sigimg{
  margin-top: 4px;
  max-width: 120px;
  border:1px solid #b9c3d0;
  border-radius: 6px;
  background:#fff;
  padding: 4px;
}

/* ---------- REPORT (Circularo-style) ---------- */
.pdfx-report .page{
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 14mm 16mm 12mm;
  background:#fff;
  font-family: "Calibri","Carlito","Arial","Helvetica",sans-serif;
  color:#111;
  position: relative;
  page-break-after: always;
  break-after: page;
}
.pdfx-report .pb{ page-break-after: always; }
.pdfx-report .pb{ break-after: page; }
.pdfx-report .page.audit-page{
  min-height: auto;
  page-break-after: auto;
  break-after: auto;
}
.pdfx-report .page.audit-page .footer{
  position: static;
  margin-top: 8mm;
}
.pdfx-report .muted{ color:#6b7280; }

.pdfx-report .cover-top{
  height: 120mm;
  position: relative;
  overflow:hidden;
  margin-bottom: 10mm;
}
.pdfx-report .waves{
  position:absolute; inset:-40mm -30mm auto -50mm;
  height: 160mm;
  background:
    radial-gradient(circle at 20% 20%, rgba(65,18,213,.12), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(34,99,174,.12), transparent 60%),
    radial-gradient(circle at 65% 80%, rgba(65,18,213,.10), transparent 62%);
}
.pdfx-report .qr{
  position:absolute;
  top: 12mm;
  left: 78mm;
  text-align:center;
  font-size: 10.5px;
  color:#111;
}
.pdfx-report .qr img{
  width: 28mm;
  height: 28mm;
  object-fit: contain;
  border:1px solid #e5e7eb;
  border-radius: 6px;
  background:#fff;
  padding: 3px;
}
.pdfx-report .cover-title{
  position:absolute;
  left: 20mm;
  top: 60mm;
  font-size: 28px;
  font-weight: 700;
  color:#2b2b84;
}
.pdfx-report .cover-meta{
  position:absolute;
  left: 20mm;
  top: 78mm;
  font-size: 10.5px;
  letter-spacing: .2px;
  color:#111;
  display:grid;
  gap: 4px;
}
.pdfx-report .cover-meta .line{
  text-transform: uppercase;
  font-weight: 700;
  font-size: 10px;
  color:#111;
}
.pdfx-report .h1{
  color:#2b2b84;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}
.pdfx-report .sub{
  margin: 0 0 10px;
  font-size: 11px;
  color:#6b7280;
}
.pdfx-report table{
  width:100%;
  border-collapse: collapse;
  font-size: 11px;
}
.pdfx-report td, .pdfx-report th{
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 10px;
  vertical-align: top;
}
.pdfx-report td.k{
  width: 55%;
  background:#f3f4f6;
  font-weight: 700;
  color:#111827;
}
.pdfx-report td.v{
  background:#f9fafb;
}
.pdfx-report .footer{
  position:absolute;
  left: 16mm;
  right: 16mm;
  bottom: 8mm;
  display:flex;
  justify-content:space-between;
  font-size: 10px;
  color:#6b7280;
}
.pdfx-report .pillbar{
  background:#4112D5;
  color:#fff;
  padding: 7px 10px;
  font-weight:700;
  font-size: 11px;
  margin-top: 10px;
  border-radius: 4px 4px 0 0;
}
.pdfx-report .block{
  border:1px solid #e5e7eb;
  border-top:none;
  border-radius: 0 0 6px 6px;
  overflow:hidden;
  margin-bottom: 10px;
  page-break-inside: auto;
  break-inside: auto;
}
.pdfx-report .block table th{
  background:#4112D5;
  color:#fff;
  font-weight:700;
  font-size: 10.5px;
  border-bottom:none;
}
.pdfx-report .block table td{
  background:#f9fafb;
}
.pdfx-report .audit-table th,
.pdfx-report .audit-table td{
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.pdfx-report .audit-table thead{ display: table-header-group; }
.pdfx-report .audit-table tfoot{ display: table-footer-group; }
.pdfx-report .audit-table tr{
  page-break-inside: avoid;
  break-inside: avoid;
}
.pdfx-report .audit-table td{
  font-size: 10px;
}
.pdfx-report .audit-table{
  table-layout: fixed;
  width: 100%;
}
.pdfx-report .audit-table th{
  font-size: 10px;
  padding: 5px 6px;
}
.pdfx-report .audit-table td{
  padding: 5px 6px;
  line-height: 1.2;
  vertical-align: top;
}
.pdfx-report .audit-table th:nth-child(1),
.pdfx-report .audit-table td:nth-child(1){ width: 12%; }
.pdfx-report .audit-table th:nth-child(2),
.pdfx-report .audit-table td:nth-child(2){ width: 12%; }
.pdfx-report .audit-table th:nth-child(3),
.pdfx-report .audit-table td:nth-child(3){ width: 10%; }
.pdfx-report .audit-table th:nth-child(4),
.pdfx-report .audit-table td:nth-child(4){ width: 12%; }
.pdfx-report .audit-table th:nth-child(5),
.pdfx-report .audit-table td:nth-child(5){ width: 8%; }
.pdfx-report .audit-table th:nth-child(6),
.pdfx-report .audit-table td:nth-child(6){ width: 10%; }
.pdfx-report .audit-table th:nth-child(7),
.pdfx-report .audit-table td:nth-child(7){ width: 10%; }
.pdfx-report .audit-table th:nth-child(8),
.pdfx-report .audit-table td:nth-child(8){ width: 12%; }
.pdfx-report .audit-table th:nth-child(9),
.pdfx-report .audit-table td:nth-child(9){ width: 14%; }
.pdfx-report .audit-table td:nth-child(9){
  white-space: normal;
}

/* ======================
   System 1 Brand Theme
====================== */
.sys1-brand{
  --brand-primary: #B8A090;
  --brand-primary-dark: #A08979;
  --brand-primary-light: #F1EAE4;
  --brand-primary-rgb: 184, 160, 144;
  --font: "Century Gothic", "Segoe UI", Arial, sans-serif;
}

.sys1-brand,
.sys1-brand *{
  font-family: var(--font);
}

.sys1-brand.app-body{
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(var(--brand-primary-rgb), .10), transparent 60%),
    radial-gradient(900px 400px at 90% 10%, rgba(var(--brand-primary-rgb), .08), transparent 60%),
    #f3efe9;
}

.sys1-brand .nav-link.is-active{
    background: #aa9180;
    border-color: rgba(var(--brand-primary-rgb), .55);
    color: #ffffff;
}

.sys1-brand .inp:focus,
.sys1-brand .ta:focus,
.sys1-brand select.inp:focus{
  border-color: rgba(var(--brand-primary-rgb), .55);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .18);
}

.sys1-brand.app-body .inp:focus,
.sys1-brand.app-body .ta:focus{
  border-color: rgba(var(--brand-primary-rgb), .45);
  box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), .16);
}

.sys1-brand .btn.primary,
.sys1-brand.app-body .btn.primary{
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  border-color: rgba(var(--brand-primary-rgb), .45);
  color: #fff;
}

.sys1-brand .btn.primary:hover,
.sys1-brand.app-body .btn.primary:hover{
  background: linear-gradient(135deg, var(--brand-primary-dark), #8f7769);
}

.sys1-brand .dash-btn.primary{
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  border-color: rgba(var(--brand-primary-rgb), .35);
}

.sys1-brand .dash-stat::after{
  background: radial-gradient(circle, rgba(var(--brand-primary-rgb), .20), transparent 60%);
}
.sys1-brand .dash-stat:hover{
  border-color: rgba(var(--brand-primary-rgb), .45);
}
.sys1-brand .dash-stat.is-active{
  border-color: rgba(var(--brand-primary-rgb), .55);
  box-shadow: 0 14px 30px rgba(var(--brand-primary-rgb), .18);
}
.sys1-brand .dash-stat-ico{
  background: rgb(184 160 144);
  border-color: rgba(var(--brand-primary-rgb), .35);
}
.sys1-brand .dash-stat-ico.ico-review{
  background: rgb(184 160 144);
  border-color: rgba(var(--brand-primary-rgb), .35);
}

.sys1-brand.app-body .tbl th,
.sys1-brand table.dash-table thead th,
.sys1-brand .table-card .tbl thead th{
  background:#AA9180;;
  color: #fff;
}
.sys1-brand table.dash-table thead th .sort-link{
  color:#fff;
}
.sys1-brand table.dash-table thead th .sort-link:hover{
  color:#f8f5f2;
}
.sys1-brand .table-card .tbl thead th a.link,
.sys1-brand table.dash-table thead th a.link{
  color:#fff;
}

.sys1-brand .app-body a.link:hover{
  color: #8f7769;
}

.sys1-brand .dash-hero{
  background: #aa918000;
}

.sys1-brand .dash-brand .brand-logo-box{
  background: transparent;
  border: 0;
  box-shadow: 0 10px 25px rgb(125 95 30 / 67%);
}
.sys1-brand .dash-brand .brand-logo-img{
  background: transparent;
}