/*
 ACE REPORT V21.3 — Modern 3D Compact (panel-only).
 Single visual contract, loaded LAST after V21.2.1.
 Scope: presentation / responsiveness / accessibility; NO state, API, workflow or database changes.
 Legacy selectors preserved for Report Manual, Bot Otomatis and all subpages.
*/
body.ace-panel.ace-v20-3d {
  --ace-ui-bg: #081324;
  --ace-ui-surface: #10223a;
  --ace-ui-surface-2: #142a45;
  --ace-ui-stroke: #2e4b6c;
  --ace-ui-stroke-soft: #263f5d;
  --ace-ui-text: #e9f3ff;
  --ace-ui-muted: #abc0d9;
  --ace-ui-blue: #54cbff;
  --ace-ui-radius: 16px;
  --ace-ui-gap: 16px;
  --ace-ui-shadow: inset 0 1px 0 #d5efff18, 0 7px 22px #030a193d;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.ace-panel.ace-v20-3d * { min-width: 0; }
/* Explicitly leave fixed width form buttons, checkboxes and icons under their pre-existing controls. */
body.ace-panel.ace-v20-3d :is(button,input,select,textarea,summary) { font-family: inherit; }
body.ace-panel.ace-v20-3d :is(.main-area,.view,.panel-card,.v21-workbench,.v21-manager-list,.v21-manager-detail,.bot-pane,.team-layout,.import-layout,.discovery-workspace) { min-width: 0; }
body.ace-panel.ace-v20-3d .main-area {
  padding: 0 clamp(16px,2.25vw,34px) 38px !important;
  background-color: transparent;
}
body.ace-panel.ace-v20-3d .topbar {
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 9px 14px;
  min-height: 84px;
  padding: 15px 0 !important;
  margin-bottom: 19px;
  border-bottom: 1px solid var(--ace-ui-stroke-soft);
}
body.ace-panel.ace-v20-3d .topbar .page-heading { flex: 1 1 280px; }
body.ace-panel.ace-v20-3d .topbar .page-heading h1 { font-size: clamp(22px,2vw,30px); line-height:1.22; letter-spacing:-.035em; }
body.ace-panel.ace-v20-3d .topbar .page-heading p { font-size:12px; color:var(--ace-ui-muted); }
body.ace-panel.ace-v20-3d .topbar :is(.history-trigger,.sync-chip,.wib-clock) { flex-shrink:0; }
body.ace-panel.ace-v20-3d .topbar .wib-clock { font-size:12px; }
body.ace-panel.ace-v20-3d .sidebar {
  padding: 20px 14px 14px;
  border-right:1px solid #35516d;
  background:linear-gradient(175deg,#101e35 0%,#09162a 100%);
}
body.ace-panel.ace-v20-3d .sidebar .brand-block { padding-bottom:17px; gap:11px; }
body.ace-panel.ace-v20-3d .sidebar .brand-block img { filter:drop-shadow(0 5px 7px #018ce555); }
body.ace-panel.ace-v20-3d .side-nav { gap:4px; }
body.ace-panel.ace-v20-3d .nav-group-label { padding:10px 10px 7px; letter-spacing:.105em; font-size:10px; }
body.ace-panel.ace-v20-3d .nav-group-second { padding-top:17px; }
body.ace-panel.ace-v20-3d .nav-item { min-height:47px; padding:8px 10px; border-radius:11px; gap:10px; font-size:13px; font-weight:650; }
body.ace-panel.ace-v20-3d .nav-icon {
  display:grid; place-items:center; flex:0 0 31px; width:31px; height:31px;
  border:1px solid #3c5674; border-radius:10px;
  background:linear-gradient(145deg,#1c3856,#101d32);
  box-shadow:inset 0 1px #bbdcff24,0 3px 7px #0006;
}
body.ace-panel.ace-v20-3d .nav-item.active .nav-icon,
body.ace-panel.ace-v20-3d .nav-item:hover .nav-icon { border-color:#5199d4; background:linear-gradient(145deg,#2865a3,#16416d); }
body.ace-panel.ace-v20-3d .nav-icon svg { width:17px; height:17px; }
body.ace-panel.ace-v20-3d .sidebar-user { margin-top:auto; padding-top:16px; border-top:1px solid var(--ace-ui-stroke-soft); }
/* Consistent visual rhythm and material. */
body.ace-panel.ace-v20-3d :is(.panel-card,.stat-card,.v20-stage-card,.bot-metric,.v21-workbench,.v21-manager-list,.v21-manager-detail,.v20-history,.report-focus-bar,.team-row,.reporter-email-row,.discovery-review-box,.import-guide) {
  border-radius:var(--ace-ui-radius);
  border-color:var(--ace-ui-stroke);
  box-shadow:var(--ace-ui-shadow);
}
body.ace-panel.ace-v20-3d .panel-card:not(.flush) { padding:clamp(15px,1.6vw,22px); }
body.ace-panel.ace-v20-3d .panel-card.flush { padding:0; overflow:visible; }
body.ace-panel.ace-v20-3d .section-head { align-items:center; flex-wrap:wrap; gap:10px 16px; margin-bottom:15px; }
body.ace-panel.ace-v20-3d .section-head h2 { font-size:17px; letter-spacing:-.025em; }
body.ace-panel.ace-v20-3d .section-head p,
body.ace-panel.ace-v20-3d :is(.helper,.v21-muted) { color:var(--ace-ui-muted); line-height:1.6; }
body.ace-panel.ace-v20-3d .view > .panel-card + .panel-card,
body.ace-panel.ace-v20-3d #view-settings > .panel-card + .panel-card { margin-top:16px!important; }
body.ace-panel.ace-v20-3d .stats-grid { gap:12px; margin-bottom:16px; }
body.ace-panel.ace-v20-3d .stat-card { min-height:94px; padding:14px; align-items:center; gap:12px; background:linear-gradient(145deg,#162d49,#0d1d33); }
body.ace-panel.ace-v20-3d .stat-text strong { font-size:clamp(23px,2vw,30px); margin:5px 0 2px; }
body.ace-panel.ace-v20-3d .stat-icon,
body.ace-panel.ace-v20-3d :is(.focus-icon,.heading-icon,.quick-icon) {
  border:1px solid #398bc1;
  background:linear-gradient(145deg,#2397e2,#0b488a);
  box-shadow:inset 0 2px #d5f5ff66,0 5px 12px #002b6459;
  border-radius:11px;
}
body.ace-panel.ace-v20-3d .stat-icon { width:39px; height:39px; flex:0 0 39px; }
/* One action scale throughout desktop and mobile; preserve button types / bindings. */
body.ace-panel.ace-v20-3d :is(.btn,.icon-btn,.page-btn) {
  min-height:39px;
  border-radius:10px;
  line-height:1.3;
  font-weight:680;
  letter-spacing:0;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
body.ace-panel.ace-v20-3d .btn { padding:9px 13px; }
body.ace-panel.ace-v20-3d .btn-primary { background:linear-gradient(180deg,#138af2,#0862cc); border:1px solid #40a8ff; color:#fff; box-shadow:inset 0 1px #e8f7ff4d,0 3px 0 #053770,0 5px 12px #003e9070; }
body.ace-panel.ace-v20-3d .btn-primary:hover:not(:disabled) { background:linear-gradient(180deg,#31a7ff,#1574e1); }
body.ace-panel.ace-v20-3d .btn-secondary,
body.ace-panel.ace-v20-3d .btn-outline { color:#deebfb; background:linear-gradient(180deg,#1c324e,#12223b); border:1px solid #3a597c; box-shadow:inset 0 1px #d2e8ff12,0 3px 0 #081425; }
body.ace-panel.ace-v20-3d .btn-secondary:hover:not(:disabled) { background:#254362; }
body.ace-panel.ace-v20-3d .btn-danger { color:#ffd4d9; background:linear-gradient(#4d2639,#322034); border-color:#9d546a; }
body.ace-panel.ace-v20-3d :is(button,summary,a,input,select,textarea):focus-visible { outline:2px solid #76d8ff; outline-offset:2px; }
body.ace-panel.ace-v20-3d :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height:40px; max-width:100%; border-radius:10px; border:1px solid #416385;
  background:#0c1c31; color:#eef7ff; padding:9px 11px; font-size:13px;
}
body.ace-panel.ace-v20-3d input::placeholder, body.ace-panel.ace-v20-3d textarea::placeholder { color:#9db3d0; }
body.ace-panel.ace-v20-3d label { gap:6px; }
body.ace-panel.ace-v20-3d :is(.section-head,.toolbar-main,.filter-row,.report-focus-bar,.v11-op-actions,.settings-actions,.v11-maintenance,.reporter-email-form-actions,.team-actions,.reporter-email-actions) { row-gap:10px; }
/* Keep controls aligned without width overflow in every workspace. */
body.ace-panel.ace-v20-3d :is(.toolbar-main,.filter-row,.activity-filters,.import-result-toolbar,.discovery-result-tools,.v20-history-filters) > label { min-width:0; }
body.ace-panel.ace-v20-3d .filter-row > label { flex:1 1 166px; max-width:100%; }
body.ace-panel.ace-v20-3d .filter-row > .btn { align-self:end; }
body.ace-panel.ace-v20-3d #view-reports .toolbar { padding:14px 15px; background:linear-gradient(140deg,#102840,#0b1c31); }
body.ace-panel.ace-v20-3d #view-reports .toolbar-main { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
body.ace-panel.ace-v20-3d #view-reports .toolbar-main .search-box { flex:2 1 260px; }
body.ace-panel.ace-v20-3d #view-reports .toolbar-main > label:not(.search-box) { flex:1 1 170px; }
body.ace-panel.ace-v20-3d #view-reports .toolbar-main > .btn { flex:none; }
body.ace-panel.ace-v20-3d #view-reports .report-focus-bar { gap:10px 16px; flex-wrap:wrap; padding:13px 16px; margin-bottom:13px; background:linear-gradient(140deg,#152c48,#0c1b2f); }
body.ace-panel.ace-v20-3d #view-reports .v11-tabs { display:flex; flex-wrap:wrap; width:fit-content; max-width:100%; margin:12px 0 14px; gap:5px; }
body.ace-panel.ace-v20-3d #view-reports .v11-tabs button { padding:9px 13px; min-height:38px; font-size:12px; }
body.ace-panel.ace-v20-3d #view-reports .v11-bulkbar { flex-wrap:wrap; gap:9px; padding:10px 14px; }
body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-card { isolation:isolate; }
body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-card .report-url,
body.ace-panel.ace-v20-3d :is(.v20-row-url,.v21-url,.discovery-table td,.import-table td,.reporter-email-info strong) { overflow-wrap:anywhere; word-break:normal; }
/* Clean desktop column guide matches compact report rows. */
body.ace-panel.ace-v20-3d #view-reports .report-column-guide {
  display:grid;
  grid-template-columns:minmax(0,1fr) 178px 230px;
  gap:18px;
  align-items:center;
  margin:10px 16px 0;
  padding:10px 17px;
  background:linear-gradient(135deg,#192f4c,#13243d);
  border:1px solid #345371;
  border-radius:12px;
  color:#b7cde5;
  font-size:10px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:.07em;
}
body.ace-panel.ace-v20-3d #view-reports .report-column-guide span:last-child { text-align:right; }
/* Workflow controls, dashboard and report manager share same 3D materials. */
body.ace-panel.ace-v20-3d .v20-hero { overflow:hidden; border-radius:19px; }
body.ace-panel.ace-v20-3d .v20-hero h2 { font-size:clamp(24px,2.3vw,34px); }
body.ace-panel.ace-v20-3d .v20-hero p { max-width:66ch; line-height:1.65; }
body.ace-panel.ace-v20-3d :is(.v20-stage-grid,.bot-metric-grid) { gap:12px; }
body.ace-panel.ace-v20-3d #dashboardBotMetrics { margin:16px 0; }
body.ace-panel.ace-v20-3d .v20-stage-card { min-height:0; padding:15px; }
body.ace-panel.ace-v20-3d :is(.v21-workbench,.v20-history) { margin-top:17px; }
body.ace-panel.ace-v20-3d .v21-manager-grid { gap:14px; }
body.ace-panel.ace-v20-3d .v21-manager-list,
body.ace-panel.ace-v20-3d .v21-manager-detail { overflow:hidden; }
body.ace-panel.ace-v20-3d .v21-manager-toolbar,
body.ace-panel.ace-v20-3d .v21-workbench-head { gap:10px; }
body.ace-panel.ace-v20-3d .v21-manager-scroll,
body.ace-panel.ace-v20-3d :is(.v20-table-wrap,.outdated-table-wrap,.discovery-table-wrap,.import-table-wrap) { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
body.ace-panel.ace-v20-3d :is(.v21-manager-table,.v20-history-table,.outdated-table,.discovery-table,.import-table) { border-collapse:separate; border-spacing:0; }
body.ace-panel.ace-v20-3d :is(.v21-manager-table,.v20-history-table,.outdated-table,.discovery-table,.import-table) :is(th,td) { vertical-align:middle; }
body.ace-panel.ace-v20-3d :is(.v21-manager-table,.v20-history-table,.outdated-table,.discovery-table,.import-table) th { background:#182e49; font-size:11px; letter-spacing:.018em; }
body.ace-panel.ace-v20-3d :is(.v21-manager-table,.v20-history-table,.outdated-table,.discovery-table,.import-table) td { font-size:12px; line-height:1.5; border-color:#29415e; }
body.ace-panel.ace-v20-3d .v20-history-table td:first-child { min-width:210px; }
body.ace-panel.ace-v20-3d :is(.v20-history-filters,.bot-section-heading,.v20-history-heading,.v20-history-foot,.bot-queue-toolbar) { flex-wrap:wrap; row-gap:10px; }
body.ace-panel.ace-v20-3d :is(.workflow-tabs,.v21-manager-tabs,.tabs) { max-width:100%; }
body.ace-panel.ace-v20-3d .workflow-tabs { display:flex; gap:7px; flex-wrap:wrap; }
body.ace-panel.ace-v20-3d .workflow-tabs > button { min-height:40px; }
body.ace-panel.ace-v20-3d .bot-simple-card { border-radius:18px; }
body.ace-panel.ace-v20-3d .v21-recovery { border-radius:12px; }
/* Forms and activity: no stretched empty blocks or runaway columns. */
body.ace-panel.ace-v20-3d #view-activity .activity-filters { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
body.ace-panel.ace-v20-3d #view-activity .activity-filters label { flex:1 1 155px; }
body.ace-panel.ace-v20-3d .activity-entry { padding:12px 13px; gap:10px; border-radius:12px; }
body.ace-panel.ace-v20-3d .activity-day { margin-top:9px; }
body.ace-panel.ace-v20-3d .team-layout { align-items:start; gap:16px; }
body.ace-panel.ace-v20-3d .team-row { gap:10px; padding:12px; background:#11243d; }
body.ace-panel.ace-v20-3d .team-actions { margin-left:auto; justify-content:flex-end; }
body.ace-panel.ace-v20-3d #view-settings .reporter-email-form { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:10px; }
body.ace-panel.ace-v20-3d :is(.reporter-email-row,.appearance-asset,.appearance-brand-asset) { max-width:100%; }
body.ace-panel.ace-v20-3d #view-settings .v11-maintenance select { flex:1 1 220px; max-width:290px; }
body.ace-panel.ace-v20-3d #view-settings .settings-actions { display:flex; gap:8px; flex-wrap:wrap; }
body.ace-panel.ace-v20-3d #view-discovery :is(.discovery-result-tools,.discovery-selection,.discovery-result-heading) { flex-wrap:wrap; gap:9px; }
body.ace-panel.ace-v20-3d #view-discovery .discovery-table-wrap { border-radius:13px; }
body.ace-panel.ace-v20-3d #view-add .import-layout { gap:16px; }
body.ace-panel.ace-v20-3d #view-add :is(.import-hero,.import-input-tools,.import-submit-bar,.import-result-toolbar,.import-results-heading,.import-pagination) { flex-wrap:wrap; row-gap:10px; }
body.ace-panel.ace-v20-3d #view-add .import-capacity { flex:none; }
body.ace-panel.ace-v20-3d :is(.import-result-toolbar,.discovery-result-tools) { align-items:end; }
/* Resilient overlays, long error messages and manual report dialogues. */
body.ace-panel.ace-v20-3d :is(.modal,.modal-card,.report-drawer,.drawer-body,.report-text,.v11-op-details,.v21-recovery,.bot-status-help) { overflow-wrap:anywhere; }
body.ace-panel.ace-v20-3d :is(.modal-card,.report-drawer) { max-width:min(100%,100vw); }
body.ace-panel.ace-v20-3d :is(.modal-body,.drawer-body) { overflow-y:auto; overscroll-behavior:contain; }
body.ace-panel.ace-v20-3d :is(.report-drawer,.modal-card) :is(.drawer-footer,.modal-footer) { display:flex; flex-wrap:wrap; gap:8px; }
/* Screen breakpoints: no horizontal page overflow; controls remain accessible. */
@media (max-width:1460px) {
  body.ace-panel.ace-v20-3d .topbar .top-status { margin-left:0; }
  body.ace-panel.ace-v20-3d .v21-manager-grid { grid-template-columns:minmax(0,1fr)!important; }
  body.ace-panel.ace-v20-3d .v21-detail-stages { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1100px) {
  body.ace-panel.ace-v20-3d .main-area { padding:0 18px 28px!important; }
  body.ace-panel.ace-v20-3d .team-layout { grid-template-columns:1fr; }
  body.ace-panel.ace-v20-3d #view-settings .reporter-email-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.ace-panel.ace-v20-3d #view-settings .reporter-email-form-actions { grid-column:1/-1; }
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-card { grid-template-columns:minmax(0,1fr) minmax(140px,176px)!important; }
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-actions { flex-wrap:wrap!important; }
}
@media (max-width:800px) {
  body.ace-panel.ace-v20-3d .main-area { padding:0 12px 26px!important; }
  body.ace-panel.ace-v20-3d .topbar { min-height:70px; }
  body.ace-panel.ace-v20-3d .topbar .page-heading { flex:1 1 180px; }
  body.ace-panel.ace-v20-3d :is(.panel-card:not(.flush),.v21-workbench,.v20-history) { padding:14px!important; }
  body.ace-panel.ace-v20-3d .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.ace-panel.ace-v20-3d .stat-card { padding:12px; }
  body.ace-panel.ace-v20-3d .v21-detail-stages { grid-template-columns:1fr; }
  body.ace-panel.ace-v20-3d #view-reports .toolbar-main > label { flex:1 1 100%!important; }
  body.ace-panel.ace-v20-3d #view-reports .toolbar-main > .btn { flex:1 1 calc(50% - 8px); }
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-card { grid-template-columns:minmax(0,1fr)!important; }
  body.ace-panel.ace-v20-3d .workflow-tabs > button { flex:1 1 calc(50% - 7px); }
  body.ace-panel.ace-v20-3d :is(.team-actions,.reporter-email-actions) { margin-left:0; }
  body.ace-panel.ace-v20-3d #view-add .import-layout { grid-template-columns:1fr!important; }
  body.ace-panel.ace-v20-3d #view-activity .activity-filters > label { flex:1 1 calc(50% - 8px); }
}
@media (max-width:520px) {
  body.ace-panel.ace-v20-3d .topbar .history-trigger { min-width:40px; }
  body.ace-panel.ace-v20-3d .topbar .wib-clock { display:none; }
  body.ace-panel.ace-v20-3d .stats-grid { gap:9px; }
  body.ace-panel.ace-v20-3d .stat-card { gap:8px; }
  body.ace-panel.ace-v20-3d .stat-text strong { font-size:22px; }
  body.ace-panel.ace-v20-3d .v20-hero { padding:17px!important; }
  body.ace-panel.ace-v20-3d #view-reports .v11-tabs { width:100%; }
  body.ace-panel.ace-v20-3d #view-reports .v11-tabs button { flex:1 1 100%; text-align:center; }
  body.ace-panel.ace-v20-3d #view-reports .report-focus-actions { flex-wrap:wrap; width:100%; }
  body.ace-panel.ace-v20-3d #view-reports .report-focus-actions > label { flex:1 1 100%; }
  body.ace-panel.ace-v20-3d #view-settings .reporter-email-form { grid-template-columns:1fr; }
  body.ace-panel.ace-v20-3d #view-settings .reporter-email-form-actions { grid-column:auto; }
  body.ace-panel.ace-v20-3d #view-add .import-hero { flex-wrap:wrap; }
  body.ace-panel.ace-v20-3d #view-add .import-capacity { width:100%; justify-content:center; }
  body.ace-panel.ace-v20-3d #view-activity .activity-filters > label { flex:1 1 100%; }
  body.ace-panel.ace-v20-3d .section-head > .btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  body.ace-panel.ace-v20-3d :is(.btn,.icon-btn,.nav-item) { transition:none!important; }
}

@media(max-width:1290px) { body.ace-panel.ace-v20-3d #view-reports .report-column-guide { display:none; } }
/* Balanced middle-width report layout: keep actions on the same line. */
@media (min-width:920px) and (max-width:1290px) {
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-card {
    grid-template-columns:minmax(0,1fr) 125px 190px!important;
    grid-template-areas:"badges progress actions" "url progress actions" "created progress actions" "last progress actions"!important;
    gap:5px 12px!important;
  }
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-actions { flex-wrap:nowrap!important; }
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-actions>.btn { min-width:60px!important; padding:6px 9px!important; }
}
/* All three manual-report states remain one compact mobile tab bar. */
@media (max-width:520px) {
  body.ace-panel.ace-v20-3d #view-reports .v11-tabs { flex-wrap:nowrap; }
  body.ace-panel.ace-v20-3d #view-reports .v11-tabs button {
    flex:1 1 33.33%; min-width:0; padding:8px 5px; font-size:10.5px;
    white-space:normal; line-height:1.25;
  }
}