/* =========================================================
   PLATFORM FASA 6 - GLOBAL APPLICATION CSS
   PITIS+ Standard Department UI Style adapted to PLATFORM green theme.
   Global by request for this mockup build.
   ========================================================= */

:root{
  --bg:#eef6f0;
  --surface:#ffffff;
  --surface-soft:#f6faf7;
  --surface-soft-2:#f3f7f4;
  --line:#d8e7db;
  --line-strong:#c3d8c7;
  --text:#0f172a;
  --text-soft:#24364f;
  --muted:#64748b;
  --primary:#2f7d32;
  --primary-2:#5faa5d;
  --primary-dark:#225a25;
  --primary-soft:#e7f5e8;
  --blue:#2563eb;
  --yellow:#d99214;
  --orange:#ff8f1f;
  --red:#dc3545;
  --purple:#7c3aed;
  --teal:#0f766e;
  --shadow:0 10px 28px rgba(15,23,42,.07);
  --shadow-soft:0 8px 22px rgba(15,23,42,.05);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{max-width:100%}
code{padding:2px 7px;border-radius:8px;background:#f3f5f8;border:1px solid #e2e8f0}

body.sidebar-collapsed .app-shell{grid-template-columns:96px minmax(0,1fr)}
body.sidebar-collapsed .sidebar .brand-block strong,
body.sidebar-collapsed .sidebar .brand-block small,
body.sidebar-collapsed .sidebar .nav-link span:last-child,
body.sidebar-collapsed .sidebar .sidebar-foot{display:none}
body.sidebar-collapsed .sidebar .nav-link{justify-content:center}

.app-shell{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}
.sidebar{
  background:linear-gradient(180deg,#174b1a 0%, #26692a 46%, #2f7d32 100%);
  color:#fff;
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  gap:18px;
  box-shadow:14px 0 32px rgba(0,0,0,.08)
}
.brand-block{display:flex;align-items:center;gap:12px;padding:8px 10px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand-logo{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:20px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(4px)
}
.brand-block strong{display:block;font-size:15px;letter-spacing:.2px}
.brand-block small{display:block;color:rgba(255,255,255,.75);margin-top:2px}
.sidebar-nav{display:flex;flex-direction:column;gap:12px}
.sidebar-section{display:flex;flex-direction:column;gap:8px}
.sidebar-section-title{padding:4px 10px 2px;color:rgba(255,255,255,.68);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.nav-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:rgba(255,255,255,.88);font-weight:700;transition:.15s ease}
.nav-link:hover,.nav-link.is-active{background:rgba(255,255,255,.14);color:#fff}
.sidebar-foot{margin-top:auto;padding:14px;border-radius:14px;background:rgba(255,255,255,.10)}
.sidebar-foot .small-note{display:block;color:rgba(255,255,255,.78);font-size:12px;line-height:1.35}

.main-panel{padding:24px 24px 30px;display:flex;flex-direction:column;gap:16px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:6px 2px}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--primary);text-transform:uppercase}
.topbar h1{margin:6px 0 4px;font-size:30px;line-height:1.1}
.topbar p{margin:0;color:var(--muted)}
.topbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.topbar-bell{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);position:relative;min-height:48px}
.topbar-bell:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.topbar-bell-icon{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-dark);font-size:18px;flex:0 0 38px}
.topbar-bell-copy{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.topbar-bell-copy strong{font-size:13px;color:#0f172a}
.topbar-bell-copy small{font-size:11px;color:var(--muted);font-weight:800}
.topbar-bell-badge{position:absolute;right:8px;top:8px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:linear-gradient(180deg,#ff7a7a,#dc3545);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center;box-shadow:0 6px 14px rgba(220,53,69,.22)}
.user-chip{display:flex;flex-direction:column;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);min-width:190px}
.user-chip strong{font-size:13px}
.user-chip span{font-size:12px;color:var(--muted);margin-top:2px}

.flash{padding:14px 16px;border-radius:14px;border:1px solid transparent;font-weight:700;box-shadow:var(--shadow)}
.flash-success{background:#edf9f1;border-color:#bfe6ca;color:#116530}
.flash-warning{background:#fff8e7;border-color:#f3deaa;color:#8a5a00}
.flash-danger{background:#fff0f1;border-color:#f6c2c8;color:#a61e2a}

/* =========================================================
   LEVEL 1 — Workspace Tabs / Folder Tabs
   ========================================================= */
.tabs.tabs-level-1{
  display:flex;
  align-items:flex-end;
  gap:4px;
  min-height:54px;
  padding:0 12px;
  margin:0 0 10px;
  background:#f5f7fb;
  border-bottom:1px solid #dfe6ef;
  overflow-x:auto;
  flex-wrap:nowrap;
}
.tabs.tabs-level-1 .tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 24px;
  background:linear-gradient(#f1f4f8,#e7ecf3);
  border:1px solid #d5dee9;
  border-bottom:none;
  border-radius:11px 11px 0 0;
  color:#42526b;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  transition:.15s ease;
}
.tabs.tabs-level-1 .tab:hover{background:#fff;color:var(--primary)}
.tabs.tabs-level-1 .tab.is-active{
  height:48px;
  background:#fff;
  color:#071d49;
  z-index:2;
  box-shadow:0 -5px 14px rgba(15,35,75,.08);
}
.tabs.tabs-level-1 .tab.is-active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:2px;background:#fff;
}

/* =========================================================
   LEVEL 2 — Submodule Selector / Chip Tabs
   ========================================================= */
.tabs.tabs-level-2{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:8px;
  margin:0 0 14px;
  background:#f8fbff;
  border:1px solid #dfe7f2;
  border-radius:16px;
}
.tabs.tabs-level-2 .tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 15px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  color:#28415f;
  background:transparent;
  transition:.15s ease;
}
.tabs.tabs-level-2 .tab::before{
  content:"";
  width:9px;height:9px;border-radius:50%;background:#b9c6d8;flex:0 0 9px;
}
.tabs.tabs-level-2 .tab:hover{background:#fff;border-color:#d8e3f2}
.tabs.tabs-level-2 .tab.is-active{
  background:#fff;
  border-color:var(--primary);
  color:var(--primary-dark);
  box-shadow:0 8px 18px rgba(47,125,50,.10);
}
.tabs.tabs-level-2 .tab.is-active::before{background:var(--primary)}

/* =========================================================
   LEVEL 3 / LEVEL 4 — Text Navigation with Underline
   ========================================================= */
.tabs.tabs-level-3,.tabs.tabs-level-4{
  display:flex;
  align-items:center;
  gap:26px;
  padding:0 12px;
  margin:0 0 14px;
  border-bottom:1px solid #dfe6ef;
  overflow-x:auto;
  flex-wrap:nowrap;
}
.tabs.tabs-level-3 .tab,.tabs.tabs-level-4 .tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:46px;
  padding:0 2px;
  color:#24364f;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.tabs.tabs-level-3 .tab:hover,.tabs.tabs-level-4 .tab:hover{color:#0d47a1}
.tabs.tabs-level-3 .tab.is-active,.tabs.tabs-level-4 .tab.is-active{color:#000;font-weight:800}
.tabs.tabs-level-3 .tab.is-active::after,.tabs.tabs-level-4 .tab.is-active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:2px;background:#2563eb;border-radius:99px;
}

/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.summary-card,.kpi-card,.osc-pitis-kpi{
  background:#fff !important;
  border:1px solid rgba(148,163,184,.24) !important;
  border-radius:16px !important;
  padding:16px 18px !important;
  min-height:100px !important;
  display:grid !important;
  grid-template-columns:64px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:center !important;
  box-shadow:0 10px 28px rgba(15,23,42,.055) !important;
}
.summary-card::before,.kpi-card .kpi-icon,.osc-pitis-kpi-icon{
  width:54px !important;
  height:54px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  font-size:22px !important;
  background:rgba(37,99,235,.10) !important;
  color:#2563eb !important;
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
  align-self:center !important;
  justify-self:center !important;
}
.summary-card::before{content:"📌"}
.summary-card .summary-label,.kpi-card .kpi-title,.osc-pitis-kpi-title{
  grid-column:2 !important;
  display:block !important;
  width:100% !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  color:#000 !important;
  text-align:center !important;
  letter-spacing:0 !important;
  margin:0 !important;
}
.summary-card .summary-value,.kpi-card .kpi-value,.osc-pitis-kpi-value{
  grid-column:2 !important;
  display:block !important;
  width:100% !important;
  font-size:28px !important;
  font-weight:900 !important;
  line-height:1.05 !important;
  color:#000 !important;
  text-align:center !important;
  margin:4px 0 0 !important;
}
.summary-card .small-note,.summary-card .summary-sub,.kpi-card .kpi-sub,.osc-pitis-kpi-sub{
  grid-column:2 !important;
  display:block !important;
  width:100% !important;
  font-size:12px !important;
  line-height:1.25 !important;
  color:#64748b !important;
  text-align:center !important;
  margin:7px 0 0 !important;
}

/* Card + table style */
.card{
  background:#fff;
  border:1px solid #d8e1ec;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(15,23,42,.05);
  overflow:hidden;
}
.card-header{
  background:#f3f5f8 !important;
  color:#000 !important;
  border-bottom:1px solid #dde5ef !important;
  padding:16px 18px 12px;
}
.card-header strong,.card-header .h2,.card-header .card-title{
  color:#000 !important;
  font-size:18px;
  font-weight:900;
}
.card-body{padding:14px 16px 16px}
.card-actions{display:flex;gap:10px;flex-wrap:wrap}
.table-wrap{border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;padding:0}
table.table{width:100%;border-collapse:separate;border-spacing:0}
table.table thead th{
  background:#f3f5f8 !important;
  color:#000 !important;
  font-size:12px;
  font-weight:900;
  border-top:1px solid #e2e8f0 !important;
  border-bottom:1px solid #e2e8f0 !important;
  padding:11px 12px;
  text-align:left;
}
table.table thead th:first-child{border-top-left-radius:12px}
table.table thead th:last-child{border-top-right-radius:12px}
table.table tbody td{
  background:#fff !important;
  border-bottom:1px solid #e8edf3 !important;
  color:#0f172a;
  padding:12px;
  vertical-align:middle;
}
table.table tbody tr:hover td{background:#fbfdff !important}
table.table tbody td strong{font-size:13px;color:#071d49;font-weight:800}
.small-note,.muted{color:#64748b}

/* Generic content grids */
.dashboard-grid{display:grid;gap:16px}
.dashboard-grid.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-grid.three-up{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-grid{display:grid;grid-template-columns:1fr;gap:10px}
.info-row{
  display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)
}
.info-row span{color:var(--muted)}
.info-row strong{text-align:right}
.clean-list{margin:0;padding-left:20px}
.clean-list li{margin:0 0 10px;line-height:1.55}
.chart-canvas{width:100%;display:block}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.chart-legend .legend-item{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.chart-legend .legend-swatch{width:12px;height:12px;border-radius:999px}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full-span{grid-column:1 / -1}
.field-group{display:flex;flex-direction:column;gap:7px}
.field-group label,.field-inline label{font-size:12px;font-weight:800;color:#25354d}
.field-group input,.field-group select,.field-group textarea,.search-input{
  width:100%;
  min-height:44px;
  padding:11px 13px;
  border-radius:12px;
  border:1px solid #d5dee9;
  background:#fff;
  color:var(--text);
  outline:none;
  transition:.15s ease;
}
.field-group textarea{min-height:110px;resize:vertical}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus,.search-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(47,125,50,.12)
}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:6px}
.field-inline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.readonly-pill{
  display:inline-flex;align-items:center;padding:10px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-size:12px;font-weight:900
}

/* Summary band */
.summary-band{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.mini-stat{
  padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-soft)
}
.mini-stat span{display:block;color:var(--muted);font-size:12px;font-weight:700}
.mini-stat strong{display:block;margin-top:6px;font-size:24px}
.mini-stat em{display:block;margin-top:6px;font-size:12px;color:var(--primary-dark);font-style:normal;font-weight:700}

/* Workbench layout */
.workbench-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.stack-card{display:flex;flex-direction:column;gap:16px}
.panel-stack{display:flex;flex-direction:column;gap:16px}

/* Workflow */
.workflow-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0 4px
}
.workflow-step{
  display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:900;color:#31445f
}
.workflow-step.is-current{background:var(--primary-soft);border-color:#cce5cf;color:var(--primary-dark)}
.workflow-step.is-done{background:#eef4ff;border-color:#dce6ff;color:#1e40af}
.timeline{position:relative;padding-left:18px;display:flex;flex-direction:column;gap:12px}
.timeline::before{
  content:"";position:absolute;left:7px;top:0;bottom:0;width:2px;background:#dbe4ef;border-radius:99px
}
.timeline-item{
  position:relative;padding:12px 14px 12px 18px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-soft)
}
.timeline-item::before{
  content:"";position:absolute;left:-16px;top:18px;width:12px;height:12px;border-radius:999px;background:var(--primary);border:3px solid #fff;box-shadow:0 0 0 2px #dbe4ef
}
.timeline-item h4{margin:0 0 4px;font-size:13px}
.timeline-item p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.timeline-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)}

/* Attachment list */
.attachment-list{display:flex;flex-direction:column;gap:10px}
.attachment-item{
  display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff
}
.attachment-item strong{font-size:13px}
.attachment-item span{display:block;font-size:12px;color:var(--muted);margin-top:4px}

/* Buttons + badges */
.badge{
  display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.02em;color:#000 !important;white-space:nowrap
}
.badge-success{background:#eaf8ef;color:#146c3e !important}
.badge-warning{background:#fff6df;color:#8a5a00 !important}
.badge-danger{background:#fff0f1;color:#a61e2a !important}
.badge-info{background:#edf4ff;color:#174bb5 !important}
.badge-primary{background:#ecf4ed;color:#1f6b2a !important}
.badge-neutral{background:#f1f5f9;color:#334155 !important}
.badge-dark{background:#e2e8f0;color:#0f172a !important}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 15px;border-radius:11px;border:1px solid transparent;font-weight:800;transition:.15s ease
}
.btn.btn-sm,.table .btn{min-height:34px;padding:0 12px;font-size:12px}
.btn-primary{background:linear-gradient(180deg,var(--primary-2),var(--primary));color:#fff;border-color:var(--primary)}
.btn-primary:hover{filter:brightness(.98)}
.btn-success{background:linear-gradient(180deg,#2ab56f,#198754);color:#fff;border-color:#198754}
.btn-danger{background:linear-gradient(180deg,#f26d7d,#dc3545);color:#fff;border-color:#dc3545}
.btn-warning{background:linear-gradient(180deg,#ffc65b,#f0a824);color:#3f2a00;border-color:#f0a824}
.btn-ghost,.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning){
  background:#fff !important;color:#000 !important;border-color:#c9d5e5 !important
}
.btn-block{width:100%}

.queue-list{display:flex;flex-direction:column;gap:10px}
.queue-item{
  display:flex;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;align-items:center
}
.queue-item strong{display:block}
.queue-item span{display:block;font-size:12px;color:var(--muted);margin-top:3px}

/* Login */
.login-body{min-height:100vh;background:linear-gradient(135deg,#edf6ef 0%,#e5f2e6 30%,#f7faf7 100%);display:grid;place-items:center;padding:28px}
.login-shell{width:min(1180px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
.login-hero{
  padding:38px;border-radius:26px;background:linear-gradient(145deg,#1c5a20 0%,#2f7d32 65%,#4ca24b 100%);
  color:#fff;box-shadow:0 24px 50px rgba(30,64,175,.08)
}
.login-hero h1{font-size:42px;line-height:1.08;margin:10px 0 12px}
.login-hero p{color:rgba(255,255,255,.84);font-size:16px;line-height:1.65;max-width:700px}
.login-bullets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.bullet-card{
  padding:18px;border-radius:18px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px)
}
.bullet-card strong{display:block}
.bullet-card span{display:block;color:rgba(255,255,255,.80);font-size:13px;line-height:1.45;margin-top:6px}

.login-card{
  padding:30px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:0 22px 46px rgba(15,23,42,.08);display:flex;flex-direction:column;gap:18px
}
.login-brand{display:flex;align-items:center;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:800}
.login-form input{min-height:46px;padding:12px 14px;border-radius:12px;border:1px solid #d5dee9;outline:none}
.login-form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,125,50,.12)}
.demo-credentials{
  padding:15px;border-radius:16px;background:#f8fbff;border:1px dashed #cdd9ea;color:#334155;font-size:13px;line-height:1.7
}
.demo-credentials strong{display:block;margin-bottom:8px}

/* Search + filters */
.search-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.search-box{display:flex;align-items:center;gap:10px}
.filter-note{font-size:12px;color:var(--muted)}

/* Portal placeholder / notes */
.note-panel{
  padding:14px 16px;border:1px dashed #c4d7ca;background:#f8fdf8;border-radius:14px;color:#35533c;font-size:13px;line-height:1.55
}

/* Responsive */
@media(max-width:1360px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1200px){
  .summary-card,.kpi-card,.osc-pitis-kpi{grid-template-columns:58px minmax(0,1fr) !important}
  .dashboard-grid.two-up,.workbench-grid{grid-template-columns:1fr}
  .login-shell{grid-template-columns:1fr}
}
@media(max-width:860px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .main-panel{padding:18px}
  .topbar{flex-direction:column}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-band{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .login-bullets{grid-template-columns:1fr}
}
@media(max-width:760px){
  .tabs.tabs-level-1,.tabs.tabs-level-3,.tabs.tabs-level-4{overflow-x:auto;flex-wrap:nowrap}
  .summary-card,.kpi-card,.osc-pitis-kpi{grid-template-columns:54px minmax(0,1fr) !important}
  .kpi-grid{grid-template-columns:1fr}
  .user-chip{min-width:0}
}


.brand-block-logo{display:block;padding:8px 6px 18px}
.brand-logo-image{display:block;width:100%;max-width:210px;height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.18))}
.brand-copy{margin-top:10px}
.brand-copy strong{display:block;font-size:16px;letter-spacing:.08em}
.brand-copy small{display:block;color:rgba(255,255,255,.82);margin-top:4px;line-height:1.35}

.login-hero-logo{display:block;max-width:320px;width:100%;margin:0 0 18px;filter:drop-shadow(0 18px 34px rgba(0,0,0,.22))}
.login-brand-logo{justify-content:center;padding-bottom:14px}
.login-brand-image{display:block;width:100%;max-width:340px;height:auto}

.accounting-hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.accounting-queue-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
.statement-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

@media(max-width:1200px){
  .accounting-queue-grid,.statement-grid,.accounting-hero-grid{grid-template-columns:1fr}
}

.login-brand-image-small{max-width:112px;margin:0 auto;display:block;filter:drop-shadow(0 10px 20px rgba(0,0,0,.14))}


/* =========================================================
   PORTAL PESERTA + PRINT VIEW
   ========================================================= */
.portal-body{background:linear-gradient(180deg,#f2f8f3 0%,#eaf4ec 100%)}
.portal-shell{min-height:100vh;padding:24px}
.portal-topbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 24px;box-shadow:var(--shadow)
}
.portal-brand{display:flex;gap:18px;align-items:center}
.portal-brand-logo{width:220px;max-width:36vw;height:auto}
.portal-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.portal-content{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.portal-login-body .login-shell{max-width:1280px}
.portal-login-shell .login-card{max-width:440px}
.statement-card .card-body{padding-top:18px}
.statement-head-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.statement-summary-box{border:1px solid var(--line);background:var(--surface-soft);border-radius:18px;padding:16px 18px;display:grid;gap:10px}
.statement-summary-box div{display:flex;justify-content:space-between;gap:16px;align-items:center}
.statement-summary-box span{font-size:12px;color:var(--muted);font-weight:700}
.statement-summary-box strong{font-size:16px;color:#000}
.print-body{background:#fff;padding:24px}
.print-sheet{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.brand-block-logo{align-items:flex-start}
.brand-logo-image{width:180px;height:auto;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.12))}
.brand-copy{display:flex;flex-direction:column;gap:3px}
.login-brand-logo{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:18px}
.login-brand-image-small{width:78px;height:78px;object-fit:contain}
.note-panel{padding:14px 16px;border-radius:14px;background:var(--surface-soft);border:1px solid var(--line);color:var(--text-soft);line-height:1.45}
.clean-list{margin:0;padding-left:18px;display:grid;gap:8px}

@media(max-width:1100px){
  .portal-topbar,.statement-head-grid{grid-template-columns:1fr;display:grid}
  .portal-brand{flex-direction:column;align-items:flex-start}
  .portal-brand-logo{width:180px;max-width:60vw}
}


.export-actions{display:flex;gap:10px;flex-wrap:wrap}
.status-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.form-grid{display:grid;gap:14px}
.form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-actions{display:flex;gap:10px;align-items:center;justify-content:flex-start}
.form-actions.span-2{grid-column:1/-1}
.form-label{display:block;font-size:12px;font-weight:800;color:#1f2937;margin:0 0 6px}
.form-control{width:100%;min-height:42px;border:1px solid #d3deea;border-radius:12px;padding:10px 12px;background:#fff;color:#0f172a;font:inherit}
textarea.form-control{min-height:96px;resize:vertical}
.form-control:focus{outline:none;border-color:#2f855a;box-shadow:0 0 0 3px rgba(47,133,90,.12)}
.form-control-sm{min-height:36px;padding:7px 10px;border-radius:10px;font-size:12px}
.inline-form{display:flex;gap:8px;align-items:center}
.stack-form{flex-direction:column;align-items:stretch;min-width:260px}
@media(max-width:980px){.form-grid-2{grid-template-columns:1fr}.stack-form{min-width:200px}}
.section-anchor{scroll-margin-top:90px}
.nested-card{box-shadow:none;border-color:#e1e8ef;background:#fff}
.inline-form select{min-width:132px;padding:6px 10px;border:1px solid #d3deea;border-radius:10px;background:#fff;color:#0f172a;font:inherit;margin-top:8px}
.card .card{margin-top:0}

.statement-brand-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.statement-logo{height:52px;width:auto;display:block}.workflow-mini{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:#edf7ef;border:1px solid #cfe5d4;color:#1f5131;font-weight:800;font-size:12px}@media print{.statement-logo{height:58px}}