@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0');


:root{
  --green:#65B33A;
  --green-dark:#408626;
  --green-deep:#3F7F31;
  --green-soft:#EAF5E3;
  --green-pale:#F7FBF4;
  --text:#18211B;
  --muted:#475249;
  --border:#DCE6DC;
  --white:#fff;
  --shadow:0 10px 30px rgba(29,72,31,.07);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Quicksand',Arial,Helvetica,sans-serif;background:#fff;color:var(--text);line-height:1.55}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(1180px,calc(100% - 32px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav{min-height:76px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:250px}
.brand img{height:48px;width:auto;object-fit:contain}
.brand-copy{display:flex;flex-direction:column}
.brand-copy strong{font-size:15px;color:var(--green-deep);letter-spacing:.3px}
.brand-copy span{font-size:11px;color:var(--muted)}
.nav-links{display:flex;align-items:center;justify-content:center;gap:26px;flex:1}
.nav-links a{font-size:14px;font-weight:600;padding:28px 0 23px;border-bottom:3px solid transparent}
.nav-links a:hover,.nav-links a.active{color:var(--green-dark);border-bottom-color:var(--green-dark)}
.admin-link,.btn{border:0;border-radius:12px;min-height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;cursor:pointer;transition:.2s}
.btn-primary,.admin-link{background:var(--green-dark);color:white}
.btn-primary:hover,.admin-link:hover{background:var(--green-deep)}
.btn-outline{border:1px solid var(--green-dark);color:var(--green-dark);background:#fff}
.btn-soft{background:var(--green-soft);color:var(--green-dark)}
.mobile-toggle{display:none;background:none;border:0;font-size:24px;margin-left:auto}
.page-hero{background:linear-gradient(135deg,#f9fcf8 0%,#eef7ea 100%);border-bottom:1px solid var(--border);overflow:hidden}
.hero-grid{min-height:360px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px}
.hero-copy h1{font-size:clamp(42px,6vw,72px);line-height:.95;margin:0;color:var(--green-deep);letter-spacing:-2px}
.hero-copy h1 span{color:var(--green)}
.hero-copy p{max-width:570px;color:var(--muted);font-size:17px;margin:24px 0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{height:290px;border-radius:36px 36px 0 0;background:linear-gradient(145deg,#dcefd4,#b9dca9);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #cfe4c6}
.hero-visual:before{content:"";position:absolute;width:300px;height:180px;left:50%;top:70px;transform:translateX(-50%);background:#fff;border:9px solid var(--green-dark);border-bottom-width:22px;border-radius:14px 14px 4px 4px;box-shadow:0 20px 40px rgba(23,68,31,.14)}
.hero-visual:after{content:"SASi";position:absolute;left:50%;top:120px;transform:translateX(-50%);font-weight:700;color:var(--green-dark);font-size:30px}
.section{padding:56px 0}
.section-title{margin:0 0 8px;font-size:30px;color:var(--green-deep)}
.section-subtitle{margin:0 0 28px;color:var(--muted)}
.feature-grid,.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.feature-card{padding:24px;text-align:center}
.feature-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:var(--green-soft);color:var(--green-dark);font-size:22px}
.feature-card h3{font-size:16px;margin:0 0 6px}.feature-card p{font-size:13px;color:var(--muted);margin:0}
.page-banner{background:linear-gradient(135deg,var(--green-pale),#fff);padding:42px 0;border-bottom:1px solid var(--border)}
.page-banner h1{margin:0;color:var(--green-deep);font-size:36px}.page-banner p{margin:8px 0 0;color:var(--muted)}
.form-card{padding:28px}.form-section{padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--border)}.form-section:last-child{border:0;margin:0;padding:0}
.form-section h2{font-size:19px;margin:0 0 18px;color:var(--green-deep)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.field.full{grid-column:1/-1}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.field small{display:block;color:var(--muted);margin-top:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:11px;padding:12px 13px;background:#fff;outline:none;min-height:46px}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(101,179,58,.12)}
.upload-box{border:1.5px dashed #b7ccb7;border-radius:14px;background:var(--green-pale);padding:24px;text-align:center}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.stats-grid{margin-top:-20px;position:relative}
.stat-card{padding:20px;display:flex;align-items:center;gap:16px}
.stat-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green-deep);font-size:20px}
.stat-card small{display:block;color:var(--muted)}.stat-card strong{font-size:28px;color:var(--green-deep)}
.filters{padding:18px;display:grid;grid-template-columns:1.5fr repeat(3,1fr) auto;gap:12px;align-items:end;margin:24px 0}
.filters label{font-size:12px;font-weight:700}.filters input,.filters select{width:100%;min-height:44px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:white}
.toolbar{display:flex;align-items:center;justify-content:space-between;margin:18px 0;color:var(--muted);font-size:13px}
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.report-card{overflow:hidden;display:flex;min-height:245px}
.report-thumb{width:42%;min-height:100%;object-fit:cover;background:#edf3ea}
.report-body{padding:16px;display:flex;flex-direction:column;min-width:0;flex:1}
.report-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ticket{font-size:12px;font-weight:700;color:var(--green-dark)}
.badge{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:700;white-space:nowrap}
.badge-process{background:#fff0db;color:#9b5c00}.badge-verify{background:#eaf2ff;color:#2458a6}.badge-done{background:#e9f7ec;color:#26733a}.badge-wait{background:#fff6d8;color:#8b6500}
.report-body h3{font-size:15px;margin:8px 0}.meta{display:grid;gap:3px;font-size:11px;color:var(--muted)}
.update{font-size:11px;margin:10px 0;color:#435047}.progress-wrap{margin-top:auto}.progress-label{display:flex;justify-content:space-between;font-size:10px;font-weight:700}.progress{height:6px;background:#edf0ed;border-radius:99px;overflow:hidden;margin-top:5px}.progress span{display:block;height:100%;background:var(--green)}
.report-footer{display:flex;justify-content:flex-end;border-top:1px solid var(--border);margin:12px -16px -16px;padding:11px 16px}.detail-link{font-size:12px;font-weight:700;color:var(--green-dark)}
.pagination{display:flex;justify-content:center;gap:7px;margin:26px 0}.pagination button{width:38px;height:38px;border:1px solid var(--border);background:#fff;border-radius:9px}.pagination button.active{background:var(--green-dark);color:#fff}
.info-note{padding:13px 16px;background:var(--green-pale);border:1px solid var(--border);border-radius:12px;color:var(--muted);font-size:12px}
.detail-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:20px}
.detail-main,.detail-side{padding:24px}.detail-head{display:flex;justify-content:space-between;gap:20px}.detail-head h1{margin:4px 0 8px;font-size:25px}.detail-image{width:100%;max-height:440px;object-fit:cover;border-radius:15px;margin:20px 0}
.timeline{position:relative;margin-top:25px}.timeline:before{content:"";position:absolute;left:12px;top:8px;bottom:8px;width:2px;background:#dce6dc}.timeline-item{position:relative;padding-left:40px;padding-bottom:24px}.timeline-item:last-child{padding-bottom:0}.dot{position:absolute;left:3px;top:2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--green-dark);color:#fff;font-size:10px}.timeline-item.pending .dot{background:#d9dfd9;color:#697469}.timeline-item h4{margin:0;font-size:14px}.timeline-item p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.kv{display:grid;gap:14px}.kv div{padding-bottom:12px;border-bottom:1px solid var(--border)}.kv small{display:block;color:var(--muted);font-size:11px}.kv strong{font-size:13px}
.track-box{max-width:680px;margin:auto;padding:28px}.track-result{display:none;margin-top:22px}
.success-wrap{max-width:720px;margin:auto;text-align:center}.success-icon{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:var(--green-soft);color:var(--green-dark);font-size:38px}.ticket-box{padding:22px;margin:22px 0}.ticket-box strong{display:block;font-size:28px;color:var(--green-deep)}
.footer{margin-top:60px;background:var(--green-deep);color:#fff;padding:38px 0}.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:30px}.footer img{height:50px}.footer p{margin:5px 0;color:#d9e8d9;font-size:12px}
.empty{display:none;text-align:center;padding:40px;border:1px dashed var(--border);border-radius:16px;color:var(--muted)}
@media(max-width:980px){
  .nav-links{display:none}.mobile-toggle{display:block}.admin-link{display:none}.nav.open{flex-wrap:wrap}.nav.open .nav-links{display:flex;width:100%;order:5;flex-direction:column;align-items:stretch;gap:0;padding-bottom:12px}.nav.open .nav-links a{padding:12px 4px;border-bottom:1px solid var(--border)}
  .hero-grid{grid-template-columns:1fr;min-height:auto;padding:50px 0}.hero-visual{height:220px}.feature-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}
  .filters{grid-template-columns:repeat(2,1fr)}.filters .search{grid-column:1/-1}.report-grid{grid-template-columns:repeat(2,1fr)}.detail-layout{grid-template-columns:1fr}
}
@media(max-width:640px){
  .container{width:min(100% - 22px,1180px)}.brand{min-width:0}.brand-copy{display:none}.brand img{height:42px}
  .hero-copy h1{font-size:46px}.hero-grid{gap:28px}.hero-visual{height:180px}.section{padding:38px 0}
  .feature-grid,.stats-grid,.form-grid,.filters,.report-grid{grid-template-columns:1fr}.stats-grid{margin-top:20px}
  .report-card{min-height:0}.report-thumb{width:38%;min-height:230px}.toolbar{align-items:flex-start;gap:10px;flex-direction:column}
  .page-banner{padding:30px 0}.page-banner h1{font-size:30px}.form-card{padding:18px}.detail-main,.detail-side{padding:18px}.detail-head{flex-direction:column}
  .footer-grid{flex-direction:column;align-items:flex-start}.hero-actions .btn{width:100%}
}


/* ===== Motion & Parallax Enhancements ===== */
@keyframes heroFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-10px,0); }
}
@keyframes softPulse {
  0%,100% { box-shadow: 0 10px 30px rgba(29,72,31,.07); }
  50% { box-shadow: 0 16px 42px rgba(29,72,31,.14); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translate3d(0,22px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes shimmerLine {
  0% { transform:translateX(-120%); }
  100% { transform:translateX(220%); }
}
@keyframes badgePop {
  0% { transform:scale(.92); opacity:.45; }
  100% { transform:scale(1); opacity:1; }
}

.page-hero {
  position:relative;
  isolation:isolate;
}
.page-hero::before,
.page-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}
.page-hero::before{
  width:320px;height:320px;
  right:7%;top:34px;
  background:rgba(101,179,58,.09);
  transform:translate3d(0,var(--hero-orb-y,0px),0);
}
.page-hero::after{
  width:180px;height:180px;
  left:4%;bottom:-70px;
  background:rgba(64,134,38,.06);
  transform:translate3d(0,var(--hero-orb2-y,0px),0);
}
.hero-visual{
  transform:translate3d(0,var(--hero-parallax-y,0px),0);
  will-change:transform;
  animation:heroFloat 5.5s ease-in-out infinite;
}
.hero-copy{
  transform:translate3d(0,var(--hero-copy-y,0px),0);
  will-change:transform;
}
.hero-copy h1{animation:fadeUp .7s ease both}
.hero-copy p{animation:fadeUp .75s .08s ease both}
.hero-actions{animation:fadeUp .75s .16s ease both}

.portal-home-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#f8fbf6 100%);
}
.portal-home-section::before{
  content:"";
  position:absolute;
  width:420px;height:420px;
  right:-180px;top:70px;
  border-radius:50%;
  background:rgba(101,179,58,.06);
  transform:translate3d(0,var(--portal-orb-y,0px),0);
  pointer-events:none;
}
.portal-home-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}
.eyebrow{
  display:inline-block;
  margin-bottom:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--green-dark);
}
.portal-stats{
  margin-top:0;
}
.float-card{
  transition:transform .25s ease, box-shadow .25s ease;
}
.float-card:hover{
  transform:translateY(-5px);
  animation:softPulse 1.4s ease-in-out infinite;
}
.report-card{
  position:relative;
}
.report-card::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(101,179,58,.55),transparent);
  transform:translateX(-120%);
}
.report-card:hover::after{
  animation:shimmerLine 1s ease;
}
.badge{
  animation:badgePop .35s ease both;
}
.reveal-on-scroll{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .65s ease,transform .65s ease;
}
.reveal-on-scroll.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
@media(max-width:640px){
  .portal-home-head{align-items:stretch;flex-direction:column}
  .portal-home-head .btn{width:100%}
}
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero-visual,.hero-copy,.page-hero::before,.page-hero::after,.portal-home-section::before{
    transform:none !important;
  }
  .reveal-on-scroll{
    opacity:1 !important;
    transform:none !important;
  }
}


/* ===== Header redesign - clean centered navigation ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.97);
  border-top:3px solid #edf1ee;
  border-bottom:1px solid #eef1ee;
  box-shadow:0 8px 28px rgba(35,67,36,.045);
  backdrop-filter:blur(14px);
}
.nav{
  min-height:94px;
  display:grid;
  grid-template-columns:minmax(190px,1fr) auto minmax(250px,1fr);
  align-items:center;
  gap:28px;
}
.brand-logo-only{
  min-width:0;
  justify-self:start;
  display:flex;
  align-items:center;
}
.brand-logo-only img{
  width:auto;
  height:58px;
  max-width:205px;
  object-fit:contain;
}
.nav-centered{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
}
.nav-centered a{
  min-height:94px;
  padding:0 2px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-bottom:3px solid transparent;
  color:#304034;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  transition:color .2s ease,border-color .2s ease,transform .2s ease;
}
.nav-centered a:hover{
  color:var(--green-dark);
  transform:translateY(-1px);
}
.nav-centered a.active{
  color:var(--green-dark);
  border-bottom-color:var(--green);
}
.nav-icon{
  width:18px;
  text-align:center;
  color:#8b9a8d;
  font-size:17px;
  line-height:1;
}
.nav-centered a.active .nav-icon,
.nav-centered a:hover .nav-icon{
  color:var(--green);
}
.header-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:18px;
}
.theme-toggle{
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:grid;
  place-items:center;
  border:1px solid #e5ebe5;
  border-radius:17px;
  background:#fff;
  color:#58655a;
  font-size:23px;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(35,67,36,.04);
  transition:.2s ease;
}
.theme-toggle:hover{
  color:var(--green-dark);
  border-color:#cbdac9;
  transform:translateY(-1px);
}
.header-cta{
  min-height:54px;
  padding:0 23px;
  border-radius:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--green);
  color:#fff;
  font-size:14px;
  font-weight:800;
  box-shadow:0 10px 24px rgba(101,179,58,.20);
  transition:.2s ease;
}
.header-cta:hover{
  background:var(--green-dark);
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(64,134,38,.24);
}
.mobile-toggle{display:none}

/* lightweight dark theme, controlled from header button */
body.dark-theme{
  --text:#edf5ed;
  --muted:#a9b7aa;
  --border:#314b33;
  --white:#172619;
  --green-pale:#1a2d1c;
  --green-soft:#203b22;
  background:#101b12;
  color:var(--text);
}
body.dark-theme .site-header{
  background:rgba(16,27,18,.97);
  border-color:#253a27;
}
body.dark-theme .nav-centered a{color:#b8c4b9}
body.dark-theme .nav-centered a.active{color:#dff2d8}
body.dark-theme .theme-toggle{
  background:#18291b;
  border-color:#2c442f;
  color:#dce8dd;
}
body.dark-theme .card,
body.dark-theme .field input,
body.dark-theme .field select,
body.dark-theme .field textarea,
body.dark-theme .filters input,
body.dark-theme .filters select,
body.dark-theme .pagination button{
  background:#172619;
  color:var(--text);
}
body.dark-theme .page-hero,
body.dark-theme .page-banner,
body.dark-theme .portal-home-section{
  background:linear-gradient(135deg,#132117,#18291b);
}
body.dark-theme .footer{background:#0b150d}

@media(max-width:1050px){
  .nav{
    grid-template-columns:auto 1fr auto;
    min-height:82px;
  }
  .brand-logo-only img{height:50px}
  .nav-centered{gap:20px}
  .nav-centered a{font-size:13px;min-height:82px}
  .header-cta{padding:0 16px}
}
@media(max-width:860px){
  .nav{
    display:flex;
    min-height:76px;
    flex-wrap:wrap;
    gap:14px;
  }
  .brand-logo-only{margin-right:auto}
  .brand-logo-only img{height:46px}
  .header-actions{margin-left:auto}
  .header-cta{display:none}
  .theme-toggle{
    width:46px;height:46px;flex-basis:46px;border-radius:14px;
  }
  .mobile-toggle{
    display:block;
    width:46px;
    height:46px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    color:var(--green-dark);
    font-size:20px;
    cursor:pointer;
  }
  body.dark-theme .mobile-toggle{background:#18291b;color:#dce8dd}
  .nav-centered{
    display:none;
    width:100%;
    order:10;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:4px 0 12px;
  }
  .nav.open .nav-centered{display:flex}
  .nav-centered a{
    min-height:50px;
    border-bottom:1px solid var(--border);
    padding:0 6px;
  }
  .nav-centered a.active{border-bottom-color:var(--border)}
}
@media(max-width:480px){
  .site-header{border-top-width:2px}
  .brand-logo-only img{height:42px;max-width:155px}
  .header-actions{gap:8px}
  .theme-toggle,.mobile-toggle{width:42px;height:42px;flex-basis:42px;border-radius:12px}
}


/* ===== Hero centered, illustration removed ===== */
.hero-grid{
  grid-template-columns:1fr;
  min-height:390px;
  max-width:920px;
  text-align:center;
  justify-items:center;
  padding:64px 0;
}
.hero-copy{
  width:100%;
  max-width:820px;
  margin:0 auto;
}
.hero-copy p{
  margin:24px auto;
  max-width:680px;
}
.hero-actions{
  justify-content:center;
}
.hero-visual{display:none !important;}

@media(max-width:640px){
  .hero-grid{
    min-height:350px;
    padding:48px 0;
  }
  .hero-copy h1{
    font-size:clamp(42px,13vw,58px);
  }
}
.material-symbols-rounded{
  font-family:'Material Symbols Rounded';
  font-weight:normal;
  font-style:normal;
  font-size:20px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'liga';
  vertical-align:middle;
}
.nav-icon.material-symbols-rounded{font-size:20px}
.feature-icon .material-symbols-rounded,
.stat-icon .material-symbols-rounded{font-size:24px}
.btn .material-symbols-rounded,
.header-cta .material-symbols-rounded{font-size:19px}
.meta .material-symbols-rounded{font-size:15px;margin-right:4px}


/* ===== Attachment uploader refinement ===== */
.attachment-box{
  padding:30px 22px;
  border:1.5px dashed #b9d5b2;
  background:linear-gradient(180deg,#fbfdf9 0%,var(--green-pale) 100%);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.attachment-box:hover{
  border-color:var(--green);
  box-shadow:0 8px 24px rgba(64,134,38,.07);
}
.attachment-icon{
  width:54px;height:54px;
  margin:0 auto 12px;
  display:grid;place-items:center;
  border-radius:16px;
  background:var(--green-soft);
  color:#408626;
}
.attachment-icon .material-symbols-rounded{font-size:28px}
.attachment-box > strong{
  display:block;
  color:var(--green-deep);
  font-size:15px;
}
.attachment-box > p{
  max-width:430px;
  margin:6px auto 16px;
  color:var(--muted);
  font-size:12px;
}
.attachment-input{
  position:absolute !important;
  width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0 !important;
}
.attachment-button{
  min-height:44px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:11px;
  background:#408626;
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 7px 18px rgba(64,134,38,.16);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.attachment-button:hover{
  background:var(--green-deep);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(64,134,38,.20);
}
.attachment-button:focus-within{outline:3px solid rgba(64,134,38,.16)}
.attachment-button .material-symbols-rounded{font-size:19px}
.attachment-meta{
  margin-top:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:var(--muted);
  font-size:10px;
  font-weight:600;
}
.attachment-dot{opacity:.55}
.attachment-selected{
  margin:9px auto 0;
  color:var(--muted);
  font-size:11px;
}
.attachment-selected.has-file{
  color:#408626;
  font-weight:700;
}
body.dark-theme .attachment-box{
  background:#172619;
  border-color:#38573b;
}
@media(max-width:640px){
  .attachment-box{padding:24px 16px}
  .attachment-button{width:100%}
}


/* ===== Select refinement ===== */
.field select,
.filters select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,#6f7f72 50%),
    linear-gradient(135deg,#6f7f72 50%,transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:42px;
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.field select:hover,
.filters select:hover{
  border-color:#b7c9b8;
  background-color:#fbfdfb;
}
.field select:focus,
.filters select:focus{
  border-color:#408626;
  box-shadow:0 0 0 3px rgba(64,134,38,.12);
  background-color:#fff;
}
.field select option,
.filters select option{
  color:#304034;
  background:#fff;
}

/* ===== Attractive attachment alert ===== */
.attachment-alert{
  display:none;
  max-width:560px;
  margin:14px auto 0;
  padding:13px 14px;
  border:1px solid #f2c7c7;
  border-radius:13px;
  background:linear-gradient(180deg,#fff8f8 0%,#fff3f3 100%);
  color:#7b2d2d;
  text-align:left;
  align-items:flex-start;
  gap:10px;
  box-shadow:0 8px 22px rgba(123,45,45,.06);
}
.attachment-alert.show{display:flex}
.alert-icon{
  width:34px;height:34px;
  border-radius:10px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  background:#fde7e7;
  color:#b34141;
}
.alert-icon .material-symbols-rounded{font-size:20px}
.alert-copy{min-width:0;flex:1}
.alert-copy strong{
  display:block;
  font-size:12px;
  margin-bottom:2px;
}
.alert-copy p{
  margin:0;
  font-size:11px;
  line-height:1.5;
  color:#8a4b4b;
}
.alert-close{
  width:30px;height:30px;
  border:0;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:transparent;
  color:#9c5b5b;
  cursor:pointer;
}
.alert-close:hover{background:#fdeaea}
.alert-close .material-symbols-rounded{font-size:18px}
body.dark-theme .attachment-alert{
  background:#2d1d1d;
  border-color:#573232;
  color:#f1c7c7;
}
body.dark-theme .alert-copy p{color:#d7a7a7}
body.dark-theme .field select,
body.dark-theme .filters select{
  background-color:#172619;
  color:var(--text);
}


/* ===== Eye-catching custom select ===== */
.native-select-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.smart-select{
  position:relative;
  width:100%;
}
.smart-select-trigger{
  width:100%;
  min-height:52px;
  padding:0 46px 0 46px;
  border:1px solid #d8e4d7;
  border-radius:14px;
  background:
    linear-gradient(180deg,#ffffff 0%,#fbfdfb 100%);
  display:flex;
  align-items:center;
  text-align:left;
  color:#304034;
  font-weight:700;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 4px 14px rgba(41,74,43,.035);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.smart-select-trigger:hover{
  border-color:#a9c8a2;
  box-shadow:0 7px 20px rgba(64,134,38,.08);
}
.smart-select.open .smart-select-trigger{
  border-color:#408626;
  box-shadow:0 0 0 4px rgba(64,134,38,.11),0 10px 28px rgba(64,134,38,.10);
  transform:translateY(-1px);
}
.smart-select-leading{
  position:absolute;
  left:15px;
  color:#408626;
  font-size:21px;
  pointer-events:none;
}
.smart-select-value{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
}
.smart-select-trigger.is-placeholder .smart-select-value{
  color:#8a968c;
  font-weight:600;
}
.smart-select-chevron{
  position:absolute;
  right:14px;
  color:#6d7b6f;
  font-size:22px;
  transition:transform .22s ease,color .22s ease;
}
.smart-select.open .smart-select-chevron{
  transform:rotate(180deg);
  color:#408626;
}
.smart-select-menu{
  position:absolute;
  z-index:80;
  top:calc(100% + 8px);
  left:0;
  right:0;
  padding:8px;
  border:1px solid #d9e6d8;
  border-radius:15px;
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 48px rgba(29,66,31,.16);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px) scale(.985);
  transform-origin:top center;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  backdrop-filter:blur(12px);
}
.smart-select.open .smart-select-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.smart-select-option{
  width:100%;
  min-height:46px;
  padding:0 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  display:flex;
  align-items:center;
  gap:10px;
  color:#304034;
  font-size:14px;
  font-weight:650;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.smart-select-option:hover{
  background:#f0f8ec;
  color:#408626;
  transform:translateX(2px);
}
.smart-select-option.selected{
  background:linear-gradient(90deg,#eaf5e4,#f5faf2);
  color:#408626;
}
.smart-select-option.placeholder-option{
  color:#8a968c;
}
.option-check{
  font-size:19px;
  color:#9bad9d;
}
.smart-select-option.selected .option-check{
  color:#408626;
}

/* ===== More expressive attachment block ===== */
.attachment-box{
  position:relative;
  overflow:hidden;
  border:1.5px dashed #a9cfa0;
  background:
    radial-gradient(circle at 20% 0%,rgba(101,179,58,.10),transparent 28%),
    linear-gradient(180deg,#fcfefb 0%,#f3f9ef 100%);
}
.attachment-box::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#408626,#65B33A,#ABD191);
}
.attachment-icon{
  width:62px;
  height:62px;
  border-radius:19px;
  background:linear-gradient(145deg,#e4f4dd,#f3faef);
  box-shadow:0 10px 22px rgba(64,134,38,.11);
}
.attachment-button{
  border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(135deg,#408626,#65B33A);
  padding:0 22px;
  min-height:46px;
}
.attachment-selected.has-file{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 11px;
  border-radius:999px;
  background:#eaf6e5;
  color:#408626;
}

/* ===== Premium alert card ===== */
.attachment-alert{
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,#fff8f3 0%,#fff 100%);
  box-shadow:0 14px 34px rgba(151,74,30,.10);
  padding:15px 44px 15px 17px;
}
.alert-accent{
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,#e38b3d,#cc5c39);
}
.alert-icon{
  width:38px;
  height:38px;
  flex-basis:38px;
  border-radius:12px;
  background:#fff0e5;
  color:#c85d2e;
}
.alert-kicker{
  display:block;
  margin-bottom:2px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  color:#c36b37;
}
.alert-copy strong{
  font-size:13px;
  color:#6f3923;
}
.alert-copy p{
  margin-top:3px;
  color:#8c5b46;
}
.alert-close{
  position:absolute;
  right:10px;
  top:10px;
}

body.dark-theme .smart-select-trigger,
body.dark-theme .smart-select-menu{
  background:#172619;
  border-color:#38573b;
  color:var(--text);
}
body.dark-theme .smart-select-option{color:#dce8dd}
body.dark-theme .smart-select-option:hover,
body.dark-theme .smart-select-option.selected{background:#203b22;color:#bce4aa}

@media(max-width:640px){
  .smart-select-trigger{min-height:50px}
  .smart-select-menu{position:relative;top:6px}
}


/* ===== Frontend controls unified with Buat Laporan ===== */
.filters .smart-select{
  width:100%;
}
.filters .smart-select-trigger{
  min-height:46px;
  padding-left:43px;
  border-radius:12px;
  background:linear-gradient(180deg,#fff 0%,#fbfdfb 100%);
  box-shadow:0 3px 12px rgba(41,74,43,.035);
}
.filters .smart-select-leading{
  left:14px;
  font-size:19px;
}
.filters .smart-select-value{
  font-size:13px;
}
.filters .smart-select-menu{
  z-index:95;
}
.filters label{
  min-width:0;
}

/* Date / time controls */
.smart-date-wrap{
  position:relative;
  width:100%;
}
.smart-date-wrap input[type="date"],
.smart-date-wrap input[type="time"]{
  min-height:52px;
  padding:0 48px 0 15px;
  border:1px solid #d8e4d7;
  border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#fbfdfb 100%);
  color:#304034;
  font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 4px 14px rgba(41,74,43,.035);
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.smart-date-wrap input[type="date"]:hover,
.smart-date-wrap input[type="time"]:hover{
  border-color:#a9c8a2;
  box-shadow:0 7px 20px rgba(64,134,38,.08);
}
.smart-date-wrap.is-focused input[type="date"],
.smart-date-wrap.is-focused input[type="time"],
.smart-date-wrap input[type="date"]:focus,
.smart-date-wrap input[type="time"]:focus{
  border-color:#408626;
  box-shadow:0 0 0 4px rgba(64,134,38,.11),0 10px 28px rgba(64,134,38,.10);
  outline:none;
  transform:translateY(-1px);
}
.smart-date-icon{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:#408626;
  font-size:21px;
  pointer-events:none;
}

/* Hide browser calendar glyph where supported, use Material icon instead */
.smart-date-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.smart-date-wrap input[type="time"]::-webkit-calendar-picker-indicator{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.smart-date-wrap input[type="date"]::-webkit-datetime-edit,
.smart-date-wrap input[type="time"]::-webkit-datetime-edit{
  padding:0;
}
body.dark-theme .smart-date-wrap input[type="date"],
body.dark-theme .smart-date-wrap input[type="time"]{
  background:#172619;
  border-color:#38573b;
  color:var(--text);
}

@media(max-width:640px){
  .filters .smart-select-trigger,
  .smart-date-wrap input[type="date"],
  .smart-date-wrap input[type="time"]{
    min-height:50px;
  }
}






/* ===== Dropdown overlay without layout shift ===== */
.filters{
  position:relative;
  z-index:40;
  overflow:visible;
}
.filters .smart-select{
  position:relative;
}
.filters .smart-select.open{
  z-index:200;
}
.filters .smart-select-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:220;
  max-height:260px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.toolbar,
.report-grid,
.dynamic-pagination{
  position:relative;
  z-index:1;
}

/* ===== Portal toolbar and page-size selector ===== */
.portal-toolbar{
  gap:16px;
  flex-wrap:wrap;
}
.toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  flex-wrap:wrap;
}
.page-size-control{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}
.page-size-control .smart-select{
  width:130px;
}
.page-size-control .smart-select-trigger{
  min-height:42px;
  padding-left:40px;
  padding-right:38px;
}
.page-size-control .smart-select-leading{
  font-size:18px;
}

/* ===== Dynamic pagination ===== */
.dynamic-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex-wrap:wrap;
  margin:26px 0;
}
.dynamic-pagination .page-btn{
  min-width:38px;
  height:38px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:#304034;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.dynamic-pagination .page-btn:hover:not(:disabled):not(.active){
  border-color:#a8c9a1;
  background:#f4faf1;
  color:#408626;
  transform:translateY(-1px);
}
.dynamic-pagination .page-btn.active{
  background:#408626;
  border-color:#408626;
  color:#fff;
  box-shadow:0 7px 16px rgba(64,134,38,.18);
}
.dynamic-pagination .page-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}
.dynamic-pagination .page-btn .material-symbols-rounded{
  font-size:19px;
}
.page-ellipsis{
  min-width:24px;
  text-align:center;
  color:var(--muted);
  font-weight:700;
}
body.dark-theme .dynamic-pagination .page-btn{
  background:#172619;
  color:var(--text);
}
body.dark-theme .dynamic-pagination .page-btn.active{
  background:#408626;
  color:#fff;
}

@media(max-width:640px){
  .toolbar-actions{
    width:100%;
    justify-content:space-between;
  }
  .page-size-control .smart-select{
    width:125px;
  }
  .dynamic-pagination{
    gap:5px;
  }
  .dynamic-pagination .page-btn{
    min-width:36px;
    height:36px;
    border-radius:9px;
  }
}


/* ===== FINAL select overlay fix: never move report cards ===== */
.filters,
.portal-toolbar{
  overflow:visible !important;
}
.filters:has(.smart-select.open){
  margin-bottom:24px !important;
}
.filters .smart-select,
.portal-toolbar .smart-select{
  position:relative !important;
}
.filters .smart-select-menu,
.portal-toolbar .smart-select-menu{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  left:0 !important;
  right:0 !important;
  margin:0 !important;
  z-index:999 !important;
  max-height:260px !important;
  overflow-y:auto !important;
  background:#fff !important;
  border:1px solid #cfe0cc !important;
  box-shadow:0 20px 50px rgba(35,71,37,.18) !important;
}
.filters .smart-select.open,
.portal-toolbar .smart-select.open{
  z-index:998 !important;
}
.report-grid,
.toolbar,
.dynamic-pagination{
  position:relative;
  z-index:1;
}
body.dark-theme .filters .smart-select-menu,
body.dark-theme .portal-toolbar .smart-select-menu{
  background:#172619 !important;
}
@media(max-width:900px){
  .filters:has(.smart-select.open){
    margin-bottom:24px !important;
  }
  .filters .smart-select-menu,
  .portal-toolbar .smart-select-menu{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    margin:0 !important;
  }
}


/* ===== Report grid: 4 cards per row ===== */
.report-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
}
.report-card{
  min-width:0;
  min-height:250px;
}
.report-thumb{
  width:40%;
}
.report-body{
  padding:14px;
}
.report-body h3{
  font-size:14px;
  line-height:1.4;
}
.report-footer{
  margin:10px -14px -14px;
  padding:10px 14px;
}

/* ===== Strong stacking isolation so dropdowns never sit behind report cards ===== */
.portal-home-section{
  position:relative;
  isolation:isolate;
}
.filters{
  position:relative !important;
  z-index:600 !important;
  overflow:visible !important;
}
.portal-toolbar{
  position:relative !important;
  z-index:550 !important;
  overflow:visible !important;
}
.filters .smart-select.open,
.portal-toolbar .smart-select.open{
  z-index:900 !important;
}
.filters .smart-select-menu,
.portal-toolbar .smart-select-menu{
  z-index:950 !important;
  background:#fff !important;
  border:1px solid #cfe0cc !important;
  box-shadow:0 20px 50px rgba(35,71,37,.20) !important;
}
.report-grid{
  position:relative !important;
  z-index:1 !important;
}
.report-card{
  position:relative;
  z-index:1;
}

/* Page-size dropdown opens upward so it never overlaps the report cards below */
.page-size-control{
  position:relative;
  z-index:700;
}
.page-size-control .smart-select{
  width:138px;
}
.page-size-control .smart-select-menu{
  top:auto !important;
  bottom:calc(100% + 8px) !important;
  left:0 !important;
  right:0 !important;
  transform-origin:bottom center !important;
}
.page-size-control .smart-select.open .smart-select-menu{
  transform:translateY(0) scale(1) !important;
}

/* Footer logo refinement */
.footer img{
  height:58px;
  width:auto;
  object-fit:contain;
}

@media(max-width:1100px){
  .report-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media(max-width:820px){
  .report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:560px){
  .report-grid{
    grid-template-columns:1fr !important;
  }
  .report-card{
    min-height:0;
  }
  .report-thumb{
    width:38%;
    min-height:220px;
  }
  .page-size-control .smart-select-menu{
    position:absolute !important;
    top:auto !important;
    bottom:calc(100% + 8px) !important;
  }
}


/* ===== Final report layout: 3 cards per row, landscape thumbnails ===== */
.report-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}
.report-card{
  display:block !important;
  overflow:hidden;
  min-height:0 !important;
}
.report-thumb{
  width:100% !important;
  height:190px !important;
  min-height:190px !important;
  aspect-ratio:16/9;
  object-fit:cover !important;
  object-position:center;
  border-bottom:1px solid var(--border);
}
.report-body{
  padding:16px !important;
}
.report-footer{
  margin:12px -16px -16px !important;
  padding:11px 16px !important;
}

/* ===== Page-size dropdown: open downward like other filters ===== */
.page-size-control{
  position:relative;
  z-index:700;
}
.page-size-control .smart-select{
  width:110px;
}
.page-size-control .smart-select-menu{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  bottom:auto !important;
  left:0 !important;
  right:0 !important;
  transform-origin:top center !important;
  z-index:980 !important;
  max-height:220px !important;
  overflow-y:auto !important;
  background:#fff !important;
  border:1px solid #cfe0cc !important;
  box-shadow:0 20px 50px rgba(35,71,37,.20) !important;
}
.page-size-control .smart-select.open .smart-select-menu{
  transform:translateY(0) scale(1) !important;
}

/* keep enough stacking order so dropdown never falls behind report cards */
.portal-toolbar{
  position:relative !important;
  z-index:800 !important;
  overflow:visible !important;
}
.report-grid{
  position:relative !important;
  z-index:1 !important;
}

/* ensure opening dropdown does not push layout */
.portal-toolbar:has(.smart-select.open),
.filters:has(.smart-select.open){
  margin-bottom:18px !important;
}

/* responsive */
@media(max-width:980px){
  .report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .report-thumb{
    height:180px !important;
    min-height:180px !important;
  }
}
@media(max-width:640px){
  .report-grid{
    grid-template-columns:1fr !important;
  }
  .report-thumb{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16/9;
  }
  .page-size-control .smart-select-menu{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    bottom:auto !important;
  }
}


/* ===== Dark mode readability refinement ===== */
body.dark-theme{
  --text:#F1F5F1;
  --muted:#C2CEC3;
  --border:#38513B;
  --green-pale:#172319;
  --green-soft:#203423;
}
body.dark-theme{
  background:#101A12;
  color:var(--text);
}
body.dark-theme p,
body.dark-theme label,
body.dark-theme small,
body.dark-theme .section-subtitle,
body.dark-theme .meta,
body.dark-theme .update,
body.dark-theme .toolbar,
body.dark-theme .field small,
body.dark-theme .feature-card p,
body.dark-theme .stat-card small,
body.dark-theme .report-body .meta,
body.dark-theme .report-body .update,
body.dark-theme .page-size-control,
body.dark-theme .attachment-meta,
body.dark-theme .attachment-selected,
body.dark-theme .page-banner p,
body.dark-theme .hero-copy p{
  color:var(--muted) !important;
}
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme .section-title,
body.dark-theme .page-banner h1,
body.dark-theme .feature-card h3,
body.dark-theme .report-body h3,
body.dark-theme .form-section h2,
body.dark-theme .attachment-box > strong{
  color:#F7FBF7 !important;
}
body.dark-theme .ticket,
body.dark-theme .detail-link,
body.dark-theme .eyebrow{
  color:#B7DFA4 !important;
}
body.dark-theme .card,
body.dark-theme .form-card,
body.dark-theme .report-card,
body.dark-theme .detail-main,
body.dark-theme .detail-side,
body.dark-theme .track-box,
body.dark-theme .ticket-box{
  background:#172619 !important;
  border-color:#38513B !important;
}
body.dark-theme .filters,
body.dark-theme .upload-box,
body.dark-theme .attachment-box,
body.dark-theme .info-note{
  background:#152219 !important;
  border-color:#38513B !important;
  color:var(--muted) !important;
}
body.dark-theme .field input,
body.dark-theme .field textarea,
body.dark-theme .field select,
body.dark-theme .filters input,
body.dark-theme .filters select,
body.dark-theme .smart-select-trigger,
body.dark-theme .smart-date-wrap input[type="date"],
body.dark-theme .smart-date-wrap input[type="time"]{
  background:#121E15 !important;
  border-color:#3B5540 !important;
  color:#F1F5F1 !important;
}
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder{
  color:#93A195 !important;
}
body.dark-theme .smart-select-value{
  color:#EEF4EE !important;
}
body.dark-theme .smart-select-trigger.is-placeholder .smart-select-value{
  color:#A7B3A8 !important;
}
body.dark-theme .smart-select-menu{
  background:#172619 !important;
  border-color:#3B5540 !important;
}
body.dark-theme .smart-select-option{
  color:#E6EEE7 !important;
}
body.dark-theme .smart-select-option.placeholder-option{
  color:#A7B3A8 !important;
}
body.dark-theme .smart-select-option:hover,
body.dark-theme .smart-select-option.selected{
  background:#203824 !important;
  color:#C2E6B3 !important;
}
body.dark-theme .option-check,
body.dark-theme .smart-select-chevron,
body.dark-theme .smart-select-leading,
body.dark-theme .smart-date-icon{
  color:#A9D994 !important;
}
body.dark-theme .feature-icon,
body.dark-theme .stat-icon,
body.dark-theme .attachment-icon{
  background:#213725 !important;
  color:#B8E2A7 !important;
}
body.dark-theme .badge-process{background:#4A391F !important;color:#FFD89C !important}
body.dark-theme .badge-verify{background:#1D324A !important;color:#B5D2FF !important}
body.dark-theme .badge-done{background:#1F3C27 !important;color:#B9E6C2 !important}
body.dark-theme .badge-wait{background:#4A4120 !important;color:#F6DE91 !important}
body.dark-theme .progress{background:#2B3D2E !important}
body.dark-theme .dynamic-pagination .page-btn{
  background:#172619 !important;
  border-color:#38513B !important;
  color:#DCE7DD !important;
}
body.dark-theme .dynamic-pagination .page-btn.active{
  background:#408626 !important;
  border-color:#408626 !important;
  color:#fff !important;
}
body.dark-theme .site-header{
  background:rgba(13,23,16,.97) !important;
  border-color:#2C402F !important;
}
body.dark-theme .nav-centered a{
  color:#C5D0C6 !important;
}
body.dark-theme .nav-centered a.active,
body.dark-theme .nav-centered a:hover{
  color:#DFF0D8 !important;
}
body.dark-theme .footer{
  background:#0D1710 !important;
}


/* ===== COMPLETE DARK MODE - ALL FRONTEND MENUS/PAGES ===== */
body.dark-theme{
  background:#0F1811 !important;
  color:#F3F7F3 !important;
}

/* General page surfaces */
body.dark-theme .page-hero,
body.dark-theme .page-banner,
body.dark-theme .portal-home-section,
body.dark-theme .section{
  background:#0F1811 !important;
}
body.dark-theme .page-hero{
  background:linear-gradient(135deg,#101B13 0%,#16251A 100%) !important;
}
body.dark-theme .page-banner{
  background:linear-gradient(135deg,#132018 0%,#17271C 100%) !important;
  border-color:#2D4231 !important;
}
body.dark-theme .portal-home-section{
  background:linear-gradient(180deg,#101A12 0%,#132018 100%) !important;
}

/* Header / navigation */
body.dark-theme .site-header{
  background:rgba(11,18,13,.97) !important;
  border-top-color:#25362A !important;
  border-bottom-color:#25362A !important;
  box-shadow:0 8px 28px rgba(0,0,0,.18) !important;
}
body.dark-theme .nav-centered a{
  color:#C6D1C7 !important;
}
body.dark-theme .nav-centered a:hover,
body.dark-theme .nav-centered a.active{
  color:#E5F0E1 !important;
  border-bottom-color:#72B85A !important;
}
body.dark-theme .nav-icon{
  color:#A7B5A8 !important;
}
body.dark-theme .nav-centered a:hover .nav-icon,
body.dark-theme .nav-centered a.active .nav-icon{
  color:#A9D994 !important;
}
body.dark-theme .theme-toggle,
body.dark-theme .mobile-toggle{
  background:#17261B !important;
  border-color:#334A37 !important;
  color:#E1EAE2 !important;
}
body.dark-theme .header-cta{
  background:#408626 !important;
  color:#fff !important;
}

/* Hero */
body.dark-theme .hero-copy h1{
  color:#F6FAF6 !important;
}
body.dark-theme .hero-copy h1 span{
  color:#9BD180 !important;
}
body.dark-theme .hero-copy p{
  color:#C4D0C5 !important;
}
body.dark-theme .btn-outline{
  background:#17261B !important;
  color:#DDE9DD !important;
  border-color:#4A664E !important;
}
body.dark-theme .btn-soft{
  background:#203424 !important;
  color:#CBE4C4 !important;
}

/* Cards and grouped content */
body.dark-theme .card,
body.dark-theme .feature-card,
body.dark-theme .stat-card,
body.dark-theme .report-card,
body.dark-theme .form-card,
body.dark-theme .track-box,
body.dark-theme .ticket-box,
body.dark-theme .detail-main,
body.dark-theme .detail-side{
  background:#17241A !important;
  border-color:#324A36 !important;
  box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
}
body.dark-theme .feature-card h3,
body.dark-theme .report-body h3,
body.dark-theme .detail-main h3,
body.dark-theme .detail-side h3,
body.dark-theme .form-section h2{
  color:#F1F6F1 !important;
}
body.dark-theme .feature-card p,
body.dark-theme .section-subtitle,
body.dark-theme .report-body .meta,
body.dark-theme .report-body .update,
body.dark-theme .meta,
body.dark-theme .toolbar,
body.dark-theme .field small,
body.dark-theme .stat-card small,
body.dark-theme .page-banner p,
body.dark-theme .timeline-item p,
body.dark-theme .kv small{
  color:#B7C4B8 !important;
}

/* Forms */
body.dark-theme .field label{
  color:#E4ECE4 !important;
}
body.dark-theme .field input,
body.dark-theme .field textarea,
body.dark-theme .field select,
body.dark-theme .filters input,
body.dark-theme .filters select{
  background:#111C14 !important;
  color:#F2F6F2 !important;
  border-color:#3A523E !important;
}
body.dark-theme .field input:focus,
body.dark-theme .field textarea:focus,
body.dark-theme .field select:focus,
body.dark-theme .filters input:focus,
body.dark-theme .filters select:focus{
  border-color:#72B85A !important;
  box-shadow:0 0 0 3px rgba(114,184,90,.14) !important;
}
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder{
  color:#879789 !important;
}

/* Smart select */
body.dark-theme .smart-select-trigger{
  background:linear-gradient(180deg,#152218 0%,#111C14 100%) !important;
  color:#EEF4EE !important;
  border-color:#3B5540 !important;
}
body.dark-theme .smart-select-trigger.is-placeholder .smart-select-value{
  color:#A3B0A5 !important;
}
body.dark-theme .smart-select-menu{
  background:#17251B !important;
  border-color:#3C5640 !important;
  box-shadow:0 18px 48px rgba(0,0,0,.35) !important;
}
body.dark-theme .smart-select-option{
  color:#E4ECE5 !important;
}
body.dark-theme .smart-select-option:hover,
body.dark-theme .smart-select-option.selected{
  background:#203724 !important;
  color:#BDE2AD !important;
}
body.dark-theme .smart-select-leading,
body.dark-theme .smart-select-chevron,
body.dark-theme .option-check{
  color:#A8D892 !important;
}

/* Date & time */
body.dark-theme .smart-date-wrap input[type="date"],
body.dark-theme .smart-date-wrap input[type="time"]{
  background:linear-gradient(180deg,#152218 0%,#111C14 100%) !important;
  color:#F0F5F0 !important;
  border-color:#3B5540 !important;
}
body.dark-theme .smart-date-icon{
  color:#A8D892 !important;
}

/* Upload / attachment */
body.dark-theme .upload-box,
body.dark-theme .attachment-box{
  background:
    radial-gradient(circle at 20% 0%,rgba(114,184,90,.08),transparent 30%),
    linear-gradient(180deg,#17261B 0%,#132018 100%) !important;
  border-color:#456048 !important;
}
body.dark-theme .attachment-box > strong{
  color:#EEF5EE !important;
}
body.dark-theme .attachment-box > p,
body.dark-theme .attachment-meta,
body.dark-theme .attachment-selected{
  color:#B6C3B7 !important;
}
body.dark-theme .attachment-icon{
  background:#203A25 !important;
  color:#B7E0A6 !important;
}

/* Alert */
body.dark-theme .attachment-alert{
  background:linear-gradient(135deg,#2A1D17 0%,#201714 100%) !important;
  border-color:#60402E !important;
  box-shadow:0 14px 34px rgba(0,0,0,.25) !important;
}
body.dark-theme .alert-copy strong{
  color:#F2D4C0 !important;
}
body.dark-theme .alert-copy p{
  color:#D8B19A !important;
}
body.dark-theme .alert-icon{
  background:#3A241A !important;
  color:#E3A174 !important;
}

/* Portal laporan */
body.dark-theme .filters{
  background:#17241A !important;
  border-color:#324A36 !important;
}
body.dark-theme .report-thumb{
  background:#233126 !important;
  border-bottom-color:#324A36 !important;
}
body.dark-theme .ticket{
  color:#A8D892 !important;
}
body.dark-theme .detail-link{
  color:#A8D892 !important;
}
body.dark-theme .progress{
  background:#293B2D !important;
}
body.dark-theme .progress span{
  background:#72B85A !important;
}

/* Status badges */
body.dark-theme .badge-process{
  background:#493820 !important;
  color:#FFD89B !important;
}
body.dark-theme .badge-verify{
  background:#1D3248 !important;
  color:#B9D4FF !important;
}
body.dark-theme .badge-done{
  background:#203B27 !important;
  color:#BDE8C5 !important;
}
body.dark-theme .badge-wait{
  background:#493F20 !important;
  color:#F6DF91 !important;
}

/* Pagination */
body.dark-theme .dynamic-pagination .page-btn,
body.dark-theme .pagination button{
  background:#17241A !important;
  color:#DBE5DC !important;
  border-color:#334A37 !important;
}
body.dark-theme .dynamic-pagination .page-btn:hover:not(:disabled):not(.active){
  background:#203724 !important;
  color:#BDE2AD !important;
}
body.dark-theme .dynamic-pagination .page-btn.active{
  background:#408626 !important;
  border-color:#408626 !important;
  color:#fff !important;
}
body.dark-theme .page-ellipsis{
  color:#A9B6AA !important;
}

/* Detail + timeline */
body.dark-theme .timeline:before{
  background:#334A37 !important;
}
body.dark-theme .timeline-item.pending .dot{
  background:#2B3D2E !important;
  color:#93A494 !important;
}
body.dark-theme .kv div{
  border-bottom-color:#324A36 !important;
}

/* Success / info notes */
body.dark-theme .success-icon{
  background:#203A25 !important;
  color:#B7E0A6 !important;
}
body.dark-theme .info-note{
  background:#15231A !important;
  border-color:#334A37 !important;
  color:#BCC8BD !important;
}

/* Footer */
body.dark-theme .footer{
  background:#09100B !important;
  color:#F1F5F1 !important;
}
body.dark-theme .footer p{
  color:#B7C4B8 !important;
}

/* Mobile nav expanded */
body.dark-theme .nav.open .nav-links{
  background:#0F1811 !important;
}
body.dark-theme .nav-centered a{
  border-bottom-color:#2D4231;
}


/* ===== Informasi: status pelaporan ===== */
.status-info-section{
  padding-top:24px;
}
.status-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:26px;
}
.status-info-card{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:16px;
  align-items:start;
  padding:20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 8px 26px rgba(48,64,52,.055);
}
.status-info-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:15px;
  font-size:26px;
}
.status-info-card h3{
  margin:10px 0 6px;
  color:#304034;
  font-size:16px;
}
.status-info-card p{
  margin:0;
  color:#536056;
  font-size:13px;
  line-height:1.7;
}
.status-wait .status-info-icon{background:#fff7d9;color:#947514}
.status-verify .status-info-icon{background:#eaf3ff;color:#356ca5}
.status-process .status-info-icon{background:#fff0dc;color:#a36418}
.status-done .status-info-icon{background:#eaf7ec;color:#408626}
.status-info-note{
  margin-top:20px;
  display:flex;
  align-items:flex-start;
  gap:11px;
}
.status-info-note > .material-symbols-rounded{
  color:#408626;
  flex:0 0 auto;
}
.status-info-note p{
  margin:0;
}

/* Dark mode */
body.dark-theme .status-info-card{
  background:#17241A !important;
  border-color:#324A36 !important;
  box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
}
body.dark-theme .status-info-card h3{
  color:#F1F6F1 !important;
}
body.dark-theme .status-info-card p{
  color:#B7C4B8 !important;
}
body.dark-theme .status-wait .status-info-icon{background:#493F20 !important;color:#F6DF91 !important}
body.dark-theme .status-verify .status-info-icon{background:#1D3248 !important;color:#B9D4FF !important}
body.dark-theme .status-process .status-info-icon{background:#493820 !important;color:#FFD89B !important}
body.dark-theme .status-done .status-info-icon{background:#203B27 !important;color:#BDE8C5 !important}

@media(max-width:760px){
  .status-info-grid{grid-template-columns:1fr}
  .status-info-card{grid-template-columns:46px 1fr;padding:17px}
  .status-info-icon{width:46px;height:46px;border-radius:13px;font-size:23px}
}


/* ===== Header actions refinement ===== */
.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.help-toggle,
.theme-toggle{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border:1px solid #e2e9e2;
  border-radius:14px;
  background:#fff;
  color:#475249;
  box-shadow:0 5px 16px rgba(35,67,36,.045);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.help-toggle:hover,
.theme-toggle:hover{
  color:#408626;
  border-color:#bfd2bc;
  background:#f7fbf5;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(64,134,38,.08);
}
.help-toggle .material-symbols-rounded,
.theme-toggle .material-symbols-rounded{
  font-size:22px;
}

/* Fix "Buat Laporan" header button proportions */
.header-cta{
  min-height:48px !important;
  padding:0 18px !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  line-height:1 !important;
  white-space:nowrap;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  box-shadow:0 8px 20px rgba(64,134,38,.16) !important;
}
.header-cta .material-symbols-rounded{
  font-size:19px !important;
  line-height:1 !important;
}
.header-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(64,134,38,.21) !important;
}

/* Dark mode */
body.dark-theme .help-toggle,
body.dark-theme .theme-toggle{
  background:#17261B !important;
  border-color:#334A37 !important;
  color:#DDE7DE !important;
}
body.dark-theme .help-toggle:hover,
body.dark-theme .theme-toggle:hover{
  background:#203724 !important;
  border-color:#49634D !important;
  color:#BDE2AD !important;
}

/* Smooth anchor target position under sticky header */
#status-pelaporan{
  scroll-margin-top:110px;
}

@media(max-width:860px){
  .help-toggle,
  .theme-toggle{
    width:44px;
    height:44px;
    flex-basis:44px;
    border-radius:13px;
  }
}
@media(max-width:480px){
  .help-toggle,
  .theme-toggle{
    width:42px;
    height:42px;
    flex-basis:42px;
    border-radius:12px;
  }
}


/* ===== Help slide-down panel ===== */
.site-header{
  overflow:visible;
}
.help-toggle{
  border:1px solid #e2e9e2;
  cursor:pointer;
}
.help-toggle.active{
  color:#408626;
  border-color:#bfd2bc;
  background:#f2f8ef;
}
.help-panel{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:58;
  background:rgba(255,255,255,.985);
  border-bottom:1px solid #dce7dc;
  box-shadow:0 18px 42px rgba(35,67,36,.12);
  opacity:0;
  visibility:hidden;
  transform:translateY(-14px);
  transition:opacity .24s ease,transform .24s ease,visibility .24s ease;
  backdrop-filter:blur(16px);
}
.help-panel.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.help-panel-inner{
  padding-top:22px;
  padding-bottom:24px;
}
.help-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.help-panel-head h3{
  margin:2px 0 5px;
  color:#304034;
  font-size:20px;
}
.help-panel-head p{
  margin:0;
  color:#536056;
  font-size:13px;
}
.help-panel-close{
  width:38px;
  height:38px;
  border:1px solid #e2e9e2;
  border-radius:11px;
  background:#fff;
  color:#475249;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.help-panel-close:hover{
  color:#408626;
  border-color:#bfd2bc;
  background:#f7fbf5;
}
.help-status-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.help-status-item{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:11px;
  align-items:start;
  padding:14px;
  border:1px solid #e0e8df;
  border-radius:14px;
  background:#fbfdfb;
}
.help-status-item strong{
  display:block;
  margin-bottom:4px;
  color:#304034;
  font-size:13px;
}
.help-status-item p{
  margin:0;
  color:#536056;
  font-size:11px;
  line-height:1.55;
}
.help-status-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:21px;
}
.help-status-icon.wait{background:#fff7d9;color:#947514}
.help-status-icon.verify{background:#eaf3ff;color:#356ca5}
.help-status-icon.process{background:#fff0dc;color:#a36418}
.help-status-icon.done{background:#eaf7ec;color:#408626}
.help-panel-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}
.help-more-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#408626;
  font-size:12px;
  font-weight:700;
}
.help-more-link .material-symbols-rounded{
  font-size:18px;
}

/* Dark mode */
body.dark-theme .help-toggle.active{
  background:#203724 !important;
  border-color:#49634d !important;
  color:#bde2ad !important;
}
body.dark-theme .help-panel{
  background:rgba(15,24,17,.985) !important;
  border-bottom-color:#304535 !important;
  box-shadow:0 18px 42px rgba(0,0,0,.34) !important;
}
body.dark-theme .help-panel-head h3,
body.dark-theme .help-status-item strong{
  color:#f1f6f1 !important;
}
body.dark-theme .help-panel-head p,
body.dark-theme .help-status-item p{
  color:#b7c4b8 !important;
}
body.dark-theme .help-panel-close{
  background:#17261b !important;
  border-color:#334a37 !important;
  color:#dce7dd !important;
}
body.dark-theme .help-status-item{
  background:#17241a !important;
  border-color:#324a36 !important;
}
body.dark-theme .help-status-icon.wait{background:#493f20 !important;color:#f6df91 !important}
body.dark-theme .help-status-icon.verify{background:#1d3248 !important;color:#b9d4ff !important}
body.dark-theme .help-status-icon.process{background:#493820 !important;color:#ffd89b !important}
body.dark-theme .help-status-icon.done{background:#203b27 !important;color:#bde8c5 !important}

@media(max-width:980px){
  .help-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .help-panel-inner{padding-top:16px;padding-bottom:18px}
  .help-panel-head{gap:12px}
  .help-panel-head h3{font-size:17px}
  .help-status-grid{grid-template-columns:1fr}
  .help-panel{
    max-height:70vh;
    overflow-y:auto;
  }
}


/* ===== Responsive Audit Refinements ===== */

/* Global safety */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
img, svg, video, canvas{
  max-width:100%;
  height:auto;
}
.container,
.nav,
.hero-grid,
.form-grid,
.filters,
.report-grid,
.detail-layout,
.status-info-grid,
.help-status-grid{
  min-width:0;
}
.card,
.report-card,
.report-body,
.field,
.smart-select,
.smart-date-wrap,
.toolbar-actions{
  min-width:0;
}

/* Desktop small / landscape tablet */
@media(max-width:1180px){
  .container{width:min(100% - 28px,1180px)}
  .nav{gap:20px}
  .nav-centered{gap:22px}
  .header-actions{gap:8px}
  .header-cta{padding:0 15px !important}
  .report-grid{gap:16px !important}
}

/* iPad landscape / 1024 range */
@media(max-width:1040px){
  .nav{
    grid-template-columns:auto 1fr auto;
    min-height:82px;
  }
  .brand-logo-only img{height:50px}
  .nav-centered{gap:16px}
  .nav-centered a{
    min-height:82px;
    font-size:12.5px;
    gap:6px;
  }
  .nav-icon.material-symbols-rounded{font-size:18px}
  .help-toggle,.theme-toggle{
    width:44px;
    height:44px;
    flex-basis:44px;
  }
  .header-cta{
    min-height:44px !important;
    font-size:12.5px !important;
  }

  .hero-grid{
    max-width:820px;
    min-height:360px;
    padding:56px 0;
  }

  .filters{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px;
  }
  .filters .search{
    grid-column:1/-1;
  }
  .filters > button{
    width:100%;
  }

  .report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .report-thumb{
    height:180px !important;
    min-height:180px !important;
  }

  .help-status-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* iPad Air 820 / iPad Mini 768 / tablets portrait */
@media(max-width:860px){
  .site-header{
    position:sticky;
    top:0;
  }
  .nav{
    display:flex !important;
    min-height:74px;
    flex-wrap:wrap;
    gap:10px;
    padding-top:8px;
    padding-bottom:8px;
  }
  .brand-logo-only{
    margin-right:auto;
  }
  .brand-logo-only img{
    height:44px;
    max-width:165px;
  }
  .header-actions{
    margin-left:auto;
    gap:7px;
  }
  .header-cta{
    display:none !important;
  }
  .mobile-toggle{
    display:grid !important;
    place-items:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
  }
  .nav-centered{
    display:none !important;
    width:100%;
    order:20;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:4px 0 8px;
  }
  .nav.open .nav-centered{
    display:flex !important;
  }
  .nav-centered a{
    min-height:48px;
    padding:0 8px;
    border-bottom:1px solid var(--border) !important;
    justify-content:flex-start;
    font-size:13px;
  }

  .help-panel{
    top:100%;
    max-height:72vh;
    overflow-y:auto;
  }
  .help-panel-inner{
    width:min(100% - 24px,1180px);
    padding-top:16px;
    padding-bottom:18px;
  }
  .help-panel-head{
    gap:12px;
  }
  .help-panel-head h3{
    font-size:18px;
  }
  .help-status-grid{
    grid-template-columns:1fr;
  }

  .hero-grid{
    min-height:320px;
    padding:44px 0;
  }
  .hero-copy h1{
    font-size:clamp(44px,10vw,64px);
  }
  .hero-copy p{
    font-size:15px;
  }

  .feature-grid,
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .filters{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .toolbar{
    align-items:flex-start;
    gap:12px;
  }
  .toolbar-actions{
    width:100%;
    justify-content:space-between;
  }

  .detail-layout{
    grid-template-columns:1fr !important;
  }
  .detail-side{
    order:2;
  }

  .form-grid{
    grid-template-columns:1fr !important;
  }
  .field.full{
    grid-column:auto;
  }

  .status-info-grid{
    grid-template-columns:1fr !important;
  }
}

/* Large phones / small tablets */
@media(max-width:700px){
  .container{width:min(100% - 20px,1180px)}
  .page-banner{padding:26px 0}
  .page-banner h1{font-size:28px}
  .section{padding:34px 0}

  .feature-grid,
  .stats-grid{
    grid-template-columns:1fr !important;
  }

  .filters{
    grid-template-columns:1fr !important;
  }
  .filters .search{
    grid-column:auto !important;
  }

  .report-grid{
    grid-template-columns:1fr !important;
  }
  .report-thumb{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16/9;
  }

  .report-card{
    display:block !important;
  }

  .portal-toolbar{
    flex-direction:column;
    align-items:stretch;
  }
  .toolbar-actions{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }

  .page-size-control .smart-select{
    width:102px;
  }

  .dynamic-pagination{
    gap:4px;
  }
  .dynamic-pagination .page-btn{
    min-width:34px;
    height:34px;
    padding:0 8px;
    font-size:12px;
  }

  .detail-main,.detail-side{
    padding:16px;
  }
  .detail-head{
    flex-direction:column;
    gap:10px;
  }

  .track-box,
  .form-card{
    padding:16px;
  }

  .attachment-button{
    width:100%;
  }

  .footer-grid{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
}

/* Standard phones */
@media(max-width:480px){
  .container{width:min(100% - 16px,1180px)}

  .brand-logo-only img{
    height:40px;
    max-width:145px;
  }
  .help-toggle,.theme-toggle,.mobile-toggle{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
    border-radius:11px !important;
  }

  .hero-grid{
    min-height:300px;
    padding:38px 0;
  }
  .hero-copy h1{
    font-size:clamp(38px,13vw,54px);
    letter-spacing:-1.4px;
  }
  .hero-copy p{
    margin:18px auto;
    font-size:14px;
  }
  .hero-actions{
    gap:9px;
  }
  .hero-actions .btn{
    width:100%;
  }

  .section-title{
    font-size:25px;
  }
  .section-subtitle{
    font-size:13px;
  }

  .stat-card{
    padding:16px;
  }
  .stat-card strong{
    font-size:24px;
  }

  .report-body{
    padding:14px !important;
  }
  .report-footer{
    margin:10px -14px -14px !important;
    padding:10px 14px !important;
  }

  .smart-select-trigger,
  .smart-date-wrap input[type="date"],
  .smart-date-wrap input[type="time"],
  .field input,
  .field textarea{
    min-height:48px;
    font-size:16px;
  }

  .smart-select-menu{
    max-height:220px !important;
  }

  .attachment-box{
    padding:20px 14px;
  }

  .help-panel-inner{
    width:min(100% - 16px,1180px);
  }
  .help-status-item{
    grid-template-columns:38px 1fr;
    gap:10px;
    padding:12px;
  }
  .help-status-icon{
    width:38px;
    height:38px;
    font-size:19px;
  }

  .timeline-item{
    padding-left:34px;
  }
  .timeline:before{
    left:10px;
  }
  .dot{
    left:1px;
  }
}

/* Very small phones 320–360 */
@media(max-width:360px){
  .brand-logo-only img{
    max-width:125px;
    height:36px;
  }
  .header-actions{
    gap:5px;
  }
  .help-toggle,.theme-toggle,.mobile-toggle{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }

  .hero-copy h1{
    font-size:36px;
  }

  .toolbar-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .page-size-control{
    width:100%;
    justify-content:space-between;
  }
  .page-size-control .smart-select{
    width:100px;
  }

  .dynamic-pagination .page-btn{
    min-width:32px;
    height:32px;
    padding:0 6px;
  }
}

/* Landscape phone safety */
@media(max-height:500px) and (orientation:landscape){
  .help-panel{
    max-height:68vh;
    overflow-y:auto;
  }
  .hero-grid{
    min-height:260px;
    padding:28px 0;
  }
}

/* iPad-style touch behavior */
@media(hover:none) and (pointer:coarse){
  .float-card:hover,
  .report-card:hover,
  .header-cta:hover,
  .help-toggle:hover,
  .theme-toggle:hover,
  .smart-select-option:hover{
    transform:none !important;
  }
}


/* ===== FINAL FIX: Mobile menu must overlay, never push page content ===== */
@media(max-width:860px){
  .site-header{
    position:sticky;
    top:0;
    z-index:1000;
    overflow:visible !important;
  }
  .nav{
    position:relative;
    flex-wrap:nowrap !important;
  }
  .nav-centered{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    padding:8px !important;
    margin:0 !important;
    background:#fff !important;
    border:1px solid #dfe8df !important;
    border-radius:16px !important;
    box-shadow:0 18px 44px rgba(33,67,35,.16) !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px) scale(.985);
    transform-origin:top center;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    z-index:1200 !important;
  }
  .nav.open .nav-centered{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  .nav-centered a{
    min-height:48px !important;
    border-bottom:1px solid var(--border) !important;
    border-radius:10px;
    padding:0 12px !important;
  }
  .nav-centered a:last-child{
    border-bottom:0 !important;
  }
  body.dark-theme .nav-centered{
    background:#111B14 !important;
    border-color:#304535 !important;
    box-shadow:0 18px 44px rgba(0,0,0,.34) !important;
  }
}

/* ===== FINAL FIX: Custom filter dropdowns must float above all cards and not collide ===== */
.portal-home-section{
  isolation:isolate;
}
.filters{
  position:relative !important;
  z-index:700 !important;
  overflow:visible !important;
}
.filters > label,
.filters .smart-select{
  position:relative !important;
  overflow:visible !important;
}
.filters .smart-select.open{
  z-index:1500 !important;
}
.filters .smart-select-menu{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  left:0 !important;
  right:0 !important;
  bottom:auto !important;
  z-index:1600 !important;
  max-height:240px !important;
  overflow-y:auto !important;
  margin:0 !important;
  background:#fff !important;
  border:1px solid #cfdccf !important;
  box-shadow:0 20px 48px rgba(31,64,33,.22) !important;
}
.portal-toolbar,
.report-grid,
.dynamic-pagination{
  position:relative !important;
  z-index:1 !important;
}

/* Never change spacing when dropdown opens */
.filters:has(.smart-select.open),
.portal-toolbar:has(.smart-select.open){
  margin-bottom:24px !important;
}

/* Page-size dropdown behaves like the other dropdowns */
.page-size-control .smart-select-menu{
  top:calc(100% + 8px) !important;
  bottom:auto !important;
  z-index:1600 !important;
}

/* Dark mode dropdown surfaces */
body.dark-theme .filters .smart-select-menu,
body.dark-theme .page-size-control .smart-select-menu{
  background:#17251B !important;
  border-color:#3C5640 !important;
  box-shadow:0 20px 48px rgba(0,0,0,.36) !important;
}


/* ===== FINAL FILTER LAYOUT FIX ===== */
/* Stable geometry: opening any dropdown never changes layout */
.filters,
.portal-toolbar{
  overflow:visible !important;
}
.filters{
  position:relative !important;
  z-index:1200 !important;
}
.portal-toolbar{
  position:relative !important;
  z-index:1100 !important;
}

/* Reserve a fixed dropdown lane so lists never collide with cards and cards never move on open */
.filters{
  margin-bottom:14px !important;
}
.portal-toolbar{
  margin-bottom:14px !important;
}

/* Neutralize older open-state margin hacks */
.filters:has(.smart-select.open),
.portal-toolbar:has(.smart-select.open){
  margin-bottom:14px !important;
}

/* Every select owns its own overlay box */
.filters .smart-select,
.portal-toolbar .smart-select{
  position:relative !important;
  min-width:0 !important;
}
.filters .smart-select.open,
.portal-toolbar .smart-select.open{
  z-index:3000 !important;
}
.filters .smart-select-menu,
.portal-toolbar .smart-select-menu,
.page-size-control .smart-select-menu{
  position:absolute !important;
  top:calc(100% + 6px) !important;
  bottom:auto !important;
  left:0 !important;
  right:auto !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  z-index:3100 !important;
  max-height:210px !important;
  overflow-y:auto !important;
  border:1px solid #cfdccf !important;
  border-radius:13px !important;
  background:#fff !important;
  box-shadow:0 18px 42px rgba(31,64,33,.20) !important;
  transform-origin:top center !important;
}

/* Keep cards safely under the filter layer */
.report-grid,
.dynamic-pagination,
#reportList{
  position:relative !important;
  z-index:1 !important;
}

/* Page-size select: compact and aligned */
.page-size-control{
  position:relative !important;
  z-index:1500 !important;
}
.page-size-control .smart-select{
  width:92px !important;
  min-width:92px !important;
}

/* Dark */
body.dark-theme .filters .smart-select-menu,
body.dark-theme .portal-toolbar .smart-select-menu,
body.dark-theme .page-size-control .smart-select-menu{
  background:#17251B !important;
  border-color:#3C5640 !important;
  box-shadow:0 18px 42px rgba(0,0,0,.38) !important;
}

/* ===== REPORT LIST PERFORMANCE ===== */
/* Report list must render immediately; do not wait for scroll reveal */
#reportList.reveal-on-scroll,
.report-grid.reveal-on-scroll,
.portal-toolbar.reveal-on-scroll,
.filters.reveal-on-scroll{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
.report-card{
  animation:none !important;
  transition:box-shadow .16s ease,border-color .16s ease !important;
}
@media(prefers-reduced-motion: no-preference){
  .report-card{
    content-visibility:auto;
    contain-intrinsic-size:360px;
  }
}

/* Tablet/mobile: prevent menu width collision */
@media(max-width:1040px){
  .filters .smart-select-menu,
  .portal-toolbar .smart-select-menu,
  .page-size-control .smart-select-menu{
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
  }
}
@media(max-width:700px){
  .page-size-control .smart-select{
    width:88px !important;
    min-width:88px !important;
  }
}


/* ===== Sticky header always visible ===== */
.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:2000 !important;
  transform:none !important;
  visibility:visible !important;
}
body{
  overflow-x:hidden;
}

/* ===== Scroll up/down controls ===== */
.scroll-controls{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1900;
  display:flex;
  flex-direction:column;
  gap:9px;
  pointer-events:none;
}
.scroll-btn{
  width:44px;
  height:44px;
  border:1px solid #dce7dc;
  border-radius:13px;
  background:rgba(255,255,255,.96);
  color:#408626;
  display:grid;
  place-items:center;
  box-shadow:0 10px 26px rgba(32,66,34,.12);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease,background .2s ease,border-color .2s ease;
  pointer-events:none;
  backdrop-filter:blur(10px);
}
.scroll-btn.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.scroll-btn:hover{
  background:#408626;
  color:#fff;
  border-color:#408626;
}
.scroll-btn .material-symbols-rounded{
  font-size:24px;
}
body.dark-theme .scroll-btn{
  background:rgba(23,38,27,.96);
  border-color:#334A37;
  color:#BDE2AD;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
body.dark-theme .scroll-btn:hover{
  background:#408626;
  color:#fff;
  border-color:#408626;
}

@media(max-width:640px){
  .scroll-controls{
    right:12px;
    bottom:12px;
    gap:7px;
  }
  .scroll-btn{
    width:40px;
    height:40px;
    border-radius:12px;
  }
}


/* ===== Fix statistik / angka laporan agar tidak tertutup ===== */
.stats-grid{
  position:relative !important;
  z-index:20 !important;
  margin-top:0 !important;
  padding-top:10px;
}
.stat-card{
  position:relative !important;
  z-index:21 !important;
  overflow:visible !important;
}
.stat-card strong{
  position:relative;
  z-index:2;
  display:block;
  color:var(--green-deep);
  line-height:1.1;
}
.portal-home-section{
  padding-top:56px !important;
}
.portal-home-head{
  position:relative;
  z-index:25;
}
.filters{
  margin-top:24px !important;
}

/* supaya anchor/scroll tidak tertutup header sticky */
#portal-laporan{
  scroll-margin-top:120px;
}

/* dark mode angka statistik */
body.dark-theme .stat-card strong{
  color:#F3F8F2 !important;
}

@media(max-width:860px){
  .portal-home-section{
    padding-top:44px !important;
  }
  #portal-laporan{
    scroll-margin-top:96px;
  }
}

@media(max-width:640px){
  .stats-grid{
    padding-top:6px;
  }
  .stat-card strong{
    font-size:24px !important;
  }
}


/* ===== FIX: angka pilihan "Tampilkan" harus selalu terlihat ===== */
.page-size-control{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
}
.page-size-control .smart-select{
  width:96px !important;
  min-width:96px !important;
  flex:0 0 96px !important;
}
.page-size-control .smart-select-trigger{
  min-height:44px !important;
  padding:0 34px 0 14px !important;
  justify-content:flex-start !important;
  overflow:visible !important;
}
.page-size-control .smart-select-leading{
  display:none !important;
}
.page-size-control .smart-select-value{
  display:block !important;
  min-width:28px !important;
  width:auto !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  color:#304034 !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1 !important;
}
.page-size-control .smart-select-chevron{
  right:10px !important;
}
body.dark-theme .page-size-control .smart-select-value{
  color:#F1F5F1 !important;
}

@media(max-width:480px){
  .page-size-control .smart-select{
    width:90px !important;
    min-width:90px !important;
    flex-basis:90px !important;
  }
  .page-size-control .smart-select-trigger{
    padding-left:12px !important;
    padding-right:32px !important;
  }
}


/* ===== MOBILE FORM REFINEMENT — BASELINE fbs 2 ===== */
@media(max-width:640px){

  .page-banner{
    padding:24px 0 !important;
  }
  .page-banner h1{
    font-size:27px !important;
    line-height:1.2 !important;
    margin-bottom:6px !important;
  }
  .page-banner p{
    font-size:13px !important;
    line-height:1.55 !important;
    margin-top:0 !important;
  }

  .section{
    padding:26px 0 36px !important;
  }

  #reportForm.form-card{
    padding:16px !important;
    border-radius:16px !important;
    overflow:visible !important;
  }

  #reportForm .form-section{
    padding-bottom:22px !important;
    margin-bottom:22px !important;
  }

  #reportForm .form-section:last-child{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  #reportForm .form-section h2{
    font-size:16px !important;
    line-height:1.35 !important;
    margin-bottom:16px !important;
  }

  #reportForm .form-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  #reportForm .field,
  #reportForm .field.full{
    width:100% !important;
    min-width:0 !important;
    grid-column:auto !important;
  }

  #reportForm .field label{
    display:block !important;
    margin-bottom:7px !important;
    font-size:12px !important;
    line-height:1.4 !important;
  }

  #reportForm .field small{
    display:block !important;
    margin-top:6px !important;
    font-size:10.5px !important;
    line-height:1.45 !important;
  }

  #reportForm .field input:not([type="file"]),
  #reportForm .field textarea{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    min-height:48px !important;
    padding:12px 13px !important;
    border-radius:12px !important;
    font-size:16px !important;
  }

  #reportForm .field textarea{
    min-height:120px !important;
    resize:vertical !important;
    line-height:1.55 !important;
  }

  #reportForm .smart-select{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
  }

  #reportForm .smart-select-trigger{
    width:100% !important;
    min-width:0 !important;
    min-height:50px !important;
    padding:0 42px 0 44px !important;
    border-radius:12px !important;
    box-sizing:border-box !important;
  }

  #reportForm .smart-select-leading{
    left:14px !important;
    font-size:20px !important;
  }

  #reportForm .smart-select-value{
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:14px !important;
  }

  #reportForm .smart-select-chevron{
    right:12px !important;
    font-size:21px !important;
  }

  #reportForm .smart-select-menu{
    position:absolute !important;
    top:calc(100% + 6px) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    max-height:220px !important;
    overflow-y:auto !important;
    margin:0 !important;
    border-radius:13px !important;
    z-index:5000 !important;
  }

  #reportForm .smart-select.open{
    z-index:4990 !important;
  }

  #reportForm .smart-select-option{
    min-height:46px !important;
    padding:0 11px !important;
    font-size:13px !important;
  }

  #reportForm .smart-date-wrap{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
  }

  #reportForm .smart-date-wrap input[type="date"],
  #reportForm .smart-date-wrap input[type="time"]{
    width:100% !important;
    min-width:0 !important;
    min-height:50px !important;
    padding:0 45px 0 13px !important;
    border-radius:12px !important;
    font-size:16px !important;
    box-sizing:border-box !important;
  }

  #reportForm .smart-date-icon{
    right:13px !important;
    font-size:20px !important;
  }

  #reportForm .attachment-box{
    padding:22px 14px !important;
    border-radius:15px !important;
    overflow:visible !important;
  }

  #reportForm .attachment-icon{
    width:54px !important;
    height:54px !important;
    border-radius:16px !important;
    margin-bottom:11px !important;
  }

  #reportForm .attachment-box > strong{
    font-size:14px !important;
    line-height:1.4 !important;
  }

  #reportForm .attachment-box > p{
    margin:6px auto 14px !important;
    font-size:11px !important;
    line-height:1.5 !important;
  }

  #reportForm .attachment-button{
    width:100% !important;
    min-height:46px !important;
    border-radius:12px !important;
    font-size:13px !important;
  }

  #reportForm .attachment-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:5px 7px !important;
    margin-top:12px !important;
    font-size:9.5px !important;
    line-height:1.5 !important;
  }

  #reportForm .attachment-selected{
    margin-top:9px !important;
    font-size:10.5px !important;
  }

  #reportForm .attachment-alert{
    width:100% !important;
    max-width:100% !important;
    padding:14px 38px 14px 14px !important;
    border-radius:13px !important;
    box-sizing:border-box !important;
  }

  #reportForm .form-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    margin-top:20px !important;
  }

  #reportForm .form-actions .btn,
  #reportForm .form-actions button{
    width:100% !important;
    min-height:48px !important;
    border-radius:12px !important;
  }

  #reportForm .form-actions .btn-primary{
    order:1;
  }

  #reportForm .form-actions .btn-outline{
    order:2;
  }

  #reportForm,
  #reportForm *{
    max-width:100%;
  }
}

@media(max-width:390px){
  #reportForm.form-card{
    padding:13px !important;
    border-radius:14px !important;
  }

  #reportForm .form-grid{
    gap:14px !important;
  }

  #reportForm .smart-select-trigger{
    padding-left:41px !important;
    padding-right:38px !important;
  }

  #reportForm .attachment-box{
    padding:19px 12px !important;
  }
}


/* ===== ALWAYS VISIBLE HEADER ===== */
:root{
  --fbs-header-height: 94px;
}

body{
  padding-top:var(--fbs-header-height) !important;
}

.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:9999 !important;
  transform:none !important;
  visibility:visible !important;
  opacity:1 !important;
  transition:box-shadow .2s ease, background-color .2s ease, border-color .2s ease !important;
}

.site-header.is-scrolled{
  box-shadow:0 10px 28px rgba(32,64,34,.10) !important;
}

/* Help panel stays attached below the fixed header */
.site-header .help-panel{
  position:absolute !important;
  top:100% !important;
  left:0 !important;
  right:0 !important;
}

/* Anchor targets should not hide under fixed header */
[id]{
  scroll-margin-top:calc(var(--fbs-header-height) + 18px);
}

body.dark-theme .site-header.is-scrolled{
  box-shadow:0 12px 30px rgba(0,0,0,.28) !important;
}

@media(max-width:1040px){
  :root{
    --fbs-header-height:82px;
  }
}

@media(max-width:860px){
  :root{
    --fbs-header-height:74px;
  }

  .site-header{
    overflow:visible !important;
  }

  /* Mobile menu remains overlayed, never pushes page */
  .site-header .nav{
    position:relative !important;
  }

  .site-header .nav-centered{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:0 !important;
    right:0 !important;
    z-index:10020 !important;
  }
}

@media(max-width:480px){
  :root{
    --fbs-header-height:70px;
  }
}


/* ===== Detail breadcrumb / hero ===== */
.detail-hero{
  padding:28px 0 26px;
  background:
    radial-gradient(circle at 10% 0%,rgba(101,179,58,.10),transparent 28%),
    linear-gradient(180deg,#fbfdf9 0%,#f5faf2 100%);
  border-bottom:1px solid var(--border);
}
.detail-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:22px;
  font-size:12px;
}
.detail-breadcrumb a,
.breadcrumb-current{
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.detail-breadcrumb a{
  color:#475249;
  background:rgba(255,255,255,.78);
  border:1px solid #e0e8df;
  transition:.2s ease;
}
.detail-breadcrumb a:hover{
  color:#408626;
  border-color:#bdd1b9;
  background:#fff;
  transform:translateY(-1px);
}
.detail-breadcrumb a .material-symbols-rounded{
  font-size:16px;
}
.breadcrumb-separator{
  color:#9aa69c;
  font-size:17px;
}
.breadcrumb-current{
  background:#408626;
  color:#fff;
  font-weight:700;
  border:1px solid #408626;
}

.detail-hero-copy{
  display:flex;
  align-items:center;
  gap:16px;
}
.detail-hero-icon{
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:17px;
  display:grid;
  place-items:center;
  background:#e8f4e2;
  color:#408626;
  font-size:29px;
  box-shadow:0 9px 22px rgba(64,134,38,.10);
}
.detail-hero-copy h1{
  margin:2px 0 4px;
  color:#304034;
  font-size:30px;
  line-height:1.15;
}
.detail-hero-copy p{
  margin:0;
  color:#536056;
  font-size:13px;
}

/* ===== Eye-catching Lihat Detail button ===== */
.report-footer{
  align-items:center;
}
.detail-action{
  min-height:40px;
  padding:0 13px;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:linear-gradient(135deg,#408626,#65B33A);
  color:#fff !important;
  font-size:11.5px;
  font-weight:700;
  box-shadow:0 7px 18px rgba(64,134,38,.17);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.detail-action:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 23px rgba(64,134,38,.23);
}
.detail-action .material-symbols-rounded{
  font-size:17px;
}
.detail-action-arrow{
  transition:transform .2s ease;
}
.detail-action:hover .detail-action-arrow{
  transform:translateX(2px);
}

/* Dark mode */
body.dark-theme .detail-hero{
  background:
    radial-gradient(circle at 10% 0%,rgba(114,184,90,.08),transparent 28%),
    linear-gradient(180deg,#111c14 0%,#152219 100%) !important;
  border-color:#304535 !important;
}
body.dark-theme .detail-breadcrumb a{
  background:#17261b !important;
  border-color:#334a37 !important;
  color:#c5d1c6 !important;
}
body.dark-theme .detail-breadcrumb a:hover{
  color:#bde2ad !important;
  background:#203724 !important;
}
body.dark-theme .breadcrumb-separator{
  color:#738477 !important;
}
body.dark-theme .detail-hero-icon{
  background:#203724 !important;
  color:#bde2ad !important;
}
body.dark-theme .detail-hero-copy h1{
  color:#f2f6f2 !important;
}
body.dark-theme .detail-hero-copy p{
  color:#b8c5b9 !important;
}

@media(max-width:640px){
  .detail-hero{
    padding:20px 0 21px;
  }
  .detail-breadcrumb{
    gap:5px;
    margin-bottom:17px;
  }
  .detail-breadcrumb a,
  .breadcrumb-current{
    min-height:32px;
    padding:0 8px;
    font-size:11px;
  }
  .detail-hero-copy{
    align-items:flex-start;
    gap:12px;
  }
  .detail-hero-icon{
    width:48px;
    height:48px;
    flex-basis:48px;
    border-radius:14px;
    font-size:24px;
  }
  .detail-hero-copy h1{
    font-size:25px;
  }
  .detail-hero-copy p{
    font-size:12px;
    line-height:1.5;
  }

  .detail-action{
    width:100%;
    min-height:42px;
  }
}


/* ===== Refined Lihat Detail CTA ===== */
.report-card .detail-link,
.report-card .detail-action{
  position:relative;
  min-height:42px;
  padding:0 14px 0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(64,134,38,.18);
  border-radius:12px;
  background:#eef7ea;
  color:#357821 !important;
  font-size:11.5px;
  font-weight:700;
  line-height:1;
  text-decoration:none !important;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(64,134,38,.08);
  overflow:hidden;
  isolation:isolate;
  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.report-card .detail-link::before,
.report-card .detail-action::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,#408626 0%,#5da93f 100%);
  opacity:0;
  transition:opacity .2s ease;
}

.report-card .detail-link:hover,
.report-card .detail-action:hover{
  color:#fff !important;
  border-color:#408626;
  box-shadow:0 8px 20px rgba(64,134,38,.20);
  transform:translateY(-2px);
}

.report-card .detail-link:hover::before,
.report-card .detail-action:hover::before{
  opacity:1;
}

.report-card .detail-action .material-symbols-rounded{
  font-size:17px;
  line-height:1;
}

.report-card .detail-action-arrow{
  width:22px;
  height:22px;
  margin-left:2px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:rgba(64,134,38,.11);
  transition:transform .2s ease,background .2s ease;
}

.report-card .detail-action:hover .detail-action-arrow{
  background:rgba(255,255,255,.16);
  transform:translateX(2px);
}

.report-card .detail-link:focus-visible,
.report-card .detail-action:focus-visible{
  outline:3px solid rgba(64,134,38,.22);
  outline-offset:3px;
}

/* Dark mode */
body.dark-theme .report-card .detail-link,
body.dark-theme .report-card .detail-action{
  background:#203524 !important;
  border-color:#395a3d !important;
  color:#bfe4af !important;
  box-shadow:none;
}

body.dark-theme .report-card .detail-link:hover,
body.dark-theme .report-card .detail-action:hover{
  color:#fff !important;
  border-color:#62a84a !important;
}

/* Mobile: CTA easier to tap, but doesn't look oversized */
@media(max-width:640px){
  .report-card .detail-link,
  .report-card .detail-action{
    width:100%;
    min-height:44px;
    border-radius:12px;
    font-size:12px;
  }
}


/* ===== Detail Laporan — Metadata Refinement (from style(1).css) ===== */
.detail-head .meta{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:12px !important;
}

.detail-head .meta > span{
  min-height:34px !important;
  padding:0 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  border:1px solid #E0E8DF !important;
  border-radius:10px !important;
  background:#F8FBF7 !important;
  color:#536056 !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
}

.detail-head .meta .material-symbols-rounded{
  flex:0 0 auto !important;
  margin:0 !important;
  color:#408626 !important;
  font-size:17px !important;
  line-height:1 !important;
}

/* Fallback untuk simbol lama seperti ◉, ⌖, ◷ jika markup lama masih dipakai */
.detail-head .meta{
  color:#536056 !important;
}

/* Dark mode */
body.dark-theme .detail-head .meta > span{
  background:#18271C !important;
  border-color:#334A37 !important;
  color:#C2CEC3 !important;
}

body.dark-theme .detail-head .meta .material-symbols-rounded{
  color:#9ED38A !important;
}

/* Tablet / mobile */
@media(max-width:700px){
  .detail-head .meta{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    width:100% !important;
    margin-top:10px !important;
  }

  .detail-head .meta > span{
    width:100% !important;
    min-height:40px !important;
    padding:8px 11px !important;
    border-radius:11px !important;
    white-space:normal !important;
    font-size:11.5px !important;
  }

  .detail-head .meta .material-symbols-rounded{
    font-size:18px !important;
  }
}


/* ===== Autosave draft UI ===== */
.autosave-bar{
  margin-bottom:22px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid #DDE8DB;
  border-radius:14px;
  background:linear-gradient(180deg,#FBFDF9 0%,#F6FAF3 100%);
}

.autosave-info{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.autosave-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#E9F5E3;
  color:#408626;
  font-size:20px;
}

.autosave-info strong{
  display:block;
  color:#304034;
  font-size:12px;
  line-height:1.35;
}

.autosave-info span:not(.autosave-icon){
  display:block;
  margin-top:2px;
  color:#667269;
  font-size:10.5px;
  line-height:1.4;
}

.autosave-clear{
  min-height:36px;
  padding:0 11px;
  border:1px solid #DCE6DC;
  border-radius:10px;
  background:#fff;
  color:#536056;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:10.5px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:.2s ease;
}

.autosave-clear:hover{
  color:#9B3D31;
  border-color:#E7C8C2;
  background:#FFF7F5;
}

.autosave-clear .material-symbols-rounded{
  font-size:17px;
}

.autosave-bar.is-saving .autosave-icon{
  background:#FFF4DD;
  color:#A56816;
}
.autosave-bar.is-saving .autosave-icon{
  animation:autosaveSpin .9s linear infinite;
}

.autosave-bar.is-restored .autosave-icon{
  background:#EDF4FF;
  color:#356CA5;
}

@keyframes autosaveSpin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* Dark mode */
body.dark-theme .autosave-bar{
  background:#152219 !important;
  border-color:#334A37 !important;
}
body.dark-theme .autosave-info strong{
  color:#F0F5F0 !important;
}
body.dark-theme .autosave-info span:not(.autosave-icon){
  color:#B8C5B9 !important;
}
body.dark-theme .autosave-icon{
  background:#203724 !important;
  color:#BDE2AD !important;
}
body.dark-theme .autosave-clear{
  background:#17261B !important;
  border-color:#334A37 !important;
  color:#C7D2C8 !important;
}
body.dark-theme .autosave-clear:hover{
  background:#33211E !important;
  border-color:#644139 !important;
  color:#E6B5AB !important;
}

/* Mobile */
@media(max-width:640px){
  .autosave-bar{
    margin-bottom:18px;
    padding:11px 12px;
    border-radius:13px;
    align-items:flex-start;
  }

  .autosave-info{
    align-items:flex-start;
  }

  .autosave-icon{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .autosave-clear{
    min-height:34px;
    padding:0 9px;
  }
}

@media(max-width:430px){
  .autosave-bar{
    flex-direction:column;
    align-items:stretch;
  }

  .autosave-clear{
    width:100%;
  }
}


/* ===== Autosave information note ===== */
.autosave-note{
  margin:-10px 0 22px;
  padding:13px 14px;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:11px;
  align-items:start;
  border:1px solid #DDE8DB;
  border-radius:13px;
  background:#F9FCF7;
}

.autosave-note-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#E9F5E3;
  color:#408626;
  font-size:19px;
}

.autosave-note strong{
  display:block;
  margin-bottom:4px;
  color:#304034;
  font-size:12px;
}

.autosave-note p{
  margin:0;
  color:#667269;
  font-size:10.5px;
  line-height:1.55;
}

.autosave-note-warning{
  margin-top:7px !important;
  padding-top:7px;
  border-top:1px dashed #D8E3D6;
  display:flex;
  align-items:center;
  gap:6px;
  color:#7A6842 !important;
}

.autosave-note-warning .material-symbols-rounded{
  font-size:16px;
  color:#A77A2A;
}

/* Dark mode */
body.dark-theme .autosave-note{
  background:#152219 !important;
  border-color:#334A37 !important;
}
body.dark-theme .autosave-note-icon{
  background:#203724 !important;
  color:#BDE2AD !important;
}
body.dark-theme .autosave-note strong{
  color:#F0F5F0 !important;
}
body.dark-theme .autosave-note p{
  color:#B8C5B9 !important;
}
body.dark-theme .autosave-note-warning{
  border-top-color:#334A37 !important;
  color:#D6C69B !important;
}
body.dark-theme .autosave-note-warning .material-symbols-rounded{
  color:#E2C76D !important;
}

@media(max-width:640px){
  .autosave-note{
    margin:-7px 0 18px;
    padding:12px;
    grid-template-columns:32px 1fr;
    gap:10px;
  }
  .autosave-note-icon{
    width:32px;
    height:32px;
  }
}


/* ===== Autosave pill notification — reference style ===== */
.autosave-pill{
  width:100%;
  min-height:52px;
  margin:0 0 22px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #CDE6E8;
  border-radius:18px;
  background:#F1FAFB;
  color:#697078;
  font-size:13px;
  font-weight:700;
  line-height:1.3;
}

.autosave-dot{
  width:14px;
  height:14px;
  flex:0 0 14px;
  border-radius:50%;
  background:#1EB4B7;
  box-shadow:0 0 0 7px rgba(30,180,183,.10);
}

.autosave-pill.is-saving .autosave-dot{
  background:#E4A23A;
  box-shadow:0 0 0 7px rgba(228,162,58,.11);
  animation:autosavePulse 1s ease-in-out infinite;
}

.autosave-pill.is-restored .autosave-dot{
  background:#4D86D8;
  box-shadow:0 0 0 7px rgba(77,134,216,.10);
}

.autosave-pill.is-saved .autosave-dot{
  background:#1EB4B7;
  box-shadow:0 0 0 7px rgba(30,180,183,.10);
}

@keyframes autosavePulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.78);opacity:.65}
}

/* Hide old autosave blocks if any remain from cached markup */
.autosave-bar:not(.autosave-pill),
.autosave-note{
  display:none !important;
}

/* Dark mode */
body.dark-theme .autosave-pill{
  background:#132628 !important;
  border-color:#29494B !important;
  color:#C8D4D5 !important;
}
body.dark-theme .autosave-dot{
  background:#48C5C8;
  box-shadow:0 0 0 7px rgba(72,197,200,.10);
}

/* Mobile */
@media(max-width:640px){
  .autosave-pill{
    min-height:50px;
    margin-bottom:18px;
    padding:0 14px;
    border-radius:16px;
    gap:11px;
    font-size:12px;
  }

  .autosave-dot{
    width:12px;
    height:12px;
    flex-basis:12px;
    box-shadow:0 0 0 6px rgba(30,180,183,.10);
  }
}


/* ===== Phase 2 submit feedback ===== */
.submit-feedback{
  margin-bottom:16px;
  padding:14px 16px;
  display:flex;
  align-items:flex-start;
  gap:11px;
  border-radius:14px;
}
.submit-feedback-error{
  background:#FFF2F0;
  border:1px solid #F0C9C4;
  color:#8E352D;
}
.submit-feedback > .material-symbols-rounded{
  flex:0 0 auto;
  margin-top:1px;
  font-size:22px;
}
.submit-feedback strong{
  display:block;
  margin-bottom:3px;
  font-size:13px;
}
.submit-feedback p{
  margin:0;
  font-size:11.5px;
  line-height:1.55;
}
#reportForm button[type="submit"].is-submitting{
  opacity:.82;
  cursor:wait;
}
#reportForm button[type="submit"].is-submitting .material-symbols-rounded{
  animation:fbsSubmitSpin .9s linear infinite;
}
@keyframes fbsSubmitSpin{
  to{transform:rotate(360deg)}
}
body.dark-theme .submit-feedback-error{
  background:#321E1B !important;
  border-color:#644139 !important;
  color:#F0BDB3 !important;
}
@media(max-width:640px){
  .submit-feedback{
    padding:12px 13px;
    border-radius:12px;
  }
}


/* ===== Copy Nomor Laporan ===== */
.ticket-number-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:5px 0 12px;
}

.ticket-number-row > strong{
  margin:0 !important;
}

.ticket-copy-btn{
  min-height:34px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid #D4E4CF;
  border-radius:10px;
  background:#F5FAF2;
  color:#408626;
  font-family:inherit;
  font-size:10.5px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.ticket-copy-btn .material-symbols-rounded{
  font-size:16px;
}

.ticket-copy-btn:hover{
  background:#EAF5E5;
  border-color:#BFD7B7;
  transform:translateY(-1px);
}

.ticket-copy-btn.is-copied{
  background:#E9F6E5;
  border-color:#B9DDB0;
  color:#347525;
}

body.dark-theme .ticket-copy-btn{
  background:#1A2C1E;
  border-color:#38513B;
  color:#B9DFA9;
}

body.dark-theme .ticket-copy-btn:hover,
body.dark-theme .ticket-copy-btn.is-copied{
  background:#233A27;
  border-color:#4A684E;
}

@media(max-width:480px){
  .ticket-number-row{
    gap:8px;
  }

  .ticket-copy-btn{
    min-height:32px;
    padding:0 10px;
  }
}


/* ===== Target Penyelesaian ===== */
.target-completion-note{
  margin-top:18px;
  padding:13px 14px;
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid #CFE2C9;
  border-radius:13px;
  background:linear-gradient(180deg,#F7FBF4 0%,#F0F7EC 100%);
}
.target-completion-note > .material-symbols-rounded{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#E6F3DF;
  color:#408626;
  font-size:21px;
}
.target-completion-note small{
  display:block;
  color:#667269;
  font-size:10px;
  margin-bottom:2px;
}
.target-completion-note strong{
  display:block;
  color:#304034;
  font-size:12.5px;
}
body.dark-theme .target-completion-note{
  background:#17261B !important;
  border-color:#36513A !important;
}
body.dark-theme .target-completion-note > .material-symbols-rounded{
  background:#203724 !important;
  color:#BDE2AD !important;
}
body.dark-theme .target-completion-note small{
  color:#AEBBAF !important;
}
body.dark-theme .target-completion-note strong{
  color:#EDF4ED !important;
}


/* ===== Target Penyelesaian pada kartu laporan ===== */
.report-target{
  margin:14px 0 16px;
  padding:11px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #D8E7D3;
  border-radius:12px;
  background:#F7FBF5;
}
.report-target > .material-symbols-rounded{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#E8F4E2;
  color:#408626;
  font-size:19px;
}
.report-target small{
  display:block;
  margin-bottom:2px;
  color:var(--muted);
  font-size:10px;
  line-height:1.2;
}
.report-target strong{
  display:block;
  color:var(--text);
  font-size:11.5px;
  line-height:1.35;
}
body.dark-theme .report-target{
  background:#17261B !important;
  border-color:#36513A !important;
}
body.dark-theme .report-target > .material-symbols-rounded{
  background:#203724 !important;
  color:#BDE2AD !important;
}
body.dark-theme .report-target small{color:#AEBBAF !important}
body.dark-theme .report-target strong{color:#EDF4ED !important}


/* ===== Modern metadata pada kartu laporan ===== */
.report-meta-modern{
  display:flex !important;
  flex-direction:column;
  gap:0 !important;
  margin:16px 0 18px;
}

.report-meta-modern .report-meta-item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid #E7ECE7;
}

.report-meta-modern .report-meta-item:last-child{
  border-bottom:0;
}

.report-meta-modern .report-meta-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:21px;
  font-variation-settings:'FILL' 0,'wght' 450,'GRAD' 0,'opsz' 24;
}

.report-meta-modern .report-meta-category .report-meta-icon{
  background:#EDF6EA;
  color:#39812D;
}

.report-meta-modern .report-meta-location .report-meta-icon{
  background:#EEF5FC;
  color:#2867B2;
}

.report-meta-modern .report-meta-date .report-meta-icon{
  background:#FFF3E9;
  color:#D66A19;
}

.report-meta-modern .report-meta-copy{
  min-width:0;
}

.report-meta-modern .report-meta-copy small{
  display:block;
  margin:0 0 3px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.25;
  font-weight:500;
}

.report-meta-modern .report-meta-copy strong{
  display:block;
  margin:0;
  color:var(--text);
  font-size:12.5px;
  line-height:1.4;
  font-weight:700;
  overflow-wrap:anywhere;
}

/* Override legacy report-meta rules */
.report-card .report-meta-modern p{
  margin:0;
}

body.dark-theme .report-meta-modern .report-meta-item{
  border-bottom-color:#334138 !important;
}

body.dark-theme .report-meta-modern .report-meta-category .report-meta-icon{
  background:#203724 !important;
  color:#BDE2AD !important;
}

body.dark-theme .report-meta-modern .report-meta-location .report-meta-icon{
  background:#1E3042 !important;
  color:#AFCFEB !important;
}

body.dark-theme .report-meta-modern .report-meta-date .report-meta-icon{
  background:#3A2A1F !important;
  color:#F0BE94 !important;
}

body.dark-theme .report-meta-modern .report-meta-copy small{
  color:#AEB8B0 !important;
}

body.dark-theme .report-meta-modern .report-meta-copy strong{
  color:#F1F4F1 !important;
}

@media(max-width:640px){
  .report-meta-modern{
    margin:14px 0 16px;
  }
  .report-meta-modern .report-meta-item{
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    padding:10px 0;
  }
  .report-meta-modern .report-meta-icon{
    width:36px;
    height:36px;
    border-radius:10px;
    font-size:19px;
  }
  .report-meta-modern .report-meta-copy small{
    font-size:10px;
  }
  .report-meta-modern .report-meta-copy strong{
    font-size:12px;
  }
}


/* ===== Frontend Detail Laporan — Modern Information Panel ===== */
.detail-info-modern{
  padding:0 !important;
  overflow:hidden;
}

.detail-info-head{
  padding:18px 18px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  background:linear-gradient(180deg,#F9FCF7 0%,#F3F8F0 100%);
  border-bottom:1px solid #E1E8DF;
}

.detail-info-head h3{
  margin:2px 0 4px !important;
  color:#304034;
  font-size:18px;
}

.detail-info-head p{
  margin:0;
  color:#68746B;
  font-size:11px;
  line-height:1.5;
}

.detail-info-eyebrow{
  display:block;
  color:#408626;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}

.detail-info-head-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#E8F4E2;
  color:#408626;
  font-size:21px;
}

.detail-info-list{
  padding:16px;
  display:grid;
  gap:10px;
}

.detail-info-item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:11px;
  border:1px solid #E0E7DF;
  border-radius:12px;
  background:#FBFCFB;
}

.detail-info-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:20px;
}

.detail-info-item small{
  display:block;
  margin-bottom:3px;
  color:#68746B;
  font-size:10px;
  font-weight:600;
  line-height:1.3;
}

.detail-info-item strong{
  display:block;
  color:#283128;
  font-size:12.5px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

/* Accent per informasi */
.detail-info-status .detail-info-icon{
  background:#EDF4FF;
  color:#356CA5;
}
.detail-info-category .detail-info-icon{
  background:#EDF6EA;
  color:#39812D;
}
.detail-info-location .detail-info-icon{
  background:#EEF5FC;
  color:#2867B2;
}
.detail-info-unit .detail-info-icon{
  background:#F1F0FA;
  color:#6A58A2;
}
.detail-info-target{
  border-color:#CFE2C9;
  background:linear-gradient(180deg,#F8FCF6 0%,#F1F8ED 100%);
}
.detail-info-target .detail-info-icon{
  background:#E6F3DF;
  color:#408626;
}
.detail-info-target strong{
  color:#347526;
}
.detail-info-progress .detail-info-icon{
  background:#FFF3E9;
  color:#C56A25;
}

.detail-info-status .badge{
  width:max-content;
  margin-top:2px;
  font-size:10px;
}

.detail-progress-copy{
  min-width:0;
}

.detail-progress-value{
  display:flex;
  justify-content:flex-end;
  margin-top:-16px;
}

.detail-progress-value strong{
  font-size:12px;
}

.detail-progress-track{
  height:6px;
  margin-top:8px;
  overflow:hidden;
  border-radius:99px;
  background:#E8ECE8;
}

.detail-progress-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#408626,#65B33A);
}

.detail-public-note{
  margin:0 16px 16px;
  padding:11px 12px;
  display:flex;
  align-items:flex-start;
  gap:9px;
  border:1px solid #DDE7DC;
  border-radius:11px;
  background:#F8FAF7;
}

.detail-public-note .material-symbols-rounded{
  color:#408626;
  font-size:18px;
  flex:0 0 auto;
}

.detail-public-note p{
  margin:0;
  color:#667269;
  font-size:10.5px;
  line-height:1.5;
}

/* Dark mode */
body.dark-theme .detail-info-head{
  background:#152219 !important;
  border-bottom-color:#334A37 !important;
}

body.dark-theme .detail-info-head h3{
  color:#F1F6F1 !important;
}

body.dark-theme .detail-info-head p{
  color:#B7C4B8 !important;
}

body.dark-theme .detail-info-head-icon{
  background:#203724 !important;
  color:#BDE2AD !important;
}

body.dark-theme .detail-info-item{
  background:#17241A !important;
  border-color:#324A36 !important;
}

body.dark-theme .detail-info-item small{
  color:#AEBBAF !important;
}

body.dark-theme .detail-info-item strong{
  color:#EDF4ED !important;
}

body.dark-theme .detail-info-status .detail-info-icon{
  background:#1D3248 !important;
  color:#B9D4FF !important;
}

body.dark-theme .detail-info-category .detail-info-icon{
  background:#203724 !important;
  color:#BDE2AD !important;
}

body.dark-theme .detail-info-location .detail-info-icon{
  background:#1E3042 !important;
  color:#AFCFEB !important;
}

body.dark-theme .detail-info-unit .detail-info-icon{
  background:#2D2841 !important;
  color:#D0C1FF !important;
}

body.dark-theme .detail-info-target{
  background:#172B1A !important;
  border-color:#36513A !important;
}

body.dark-theme .detail-info-target .detail-info-icon{
  background:#203724 !important;
  color:#BDE2AD !important;
}

body.dark-theme .detail-info-target strong{
  color:#C7E8BB !important;
}

body.dark-theme .detail-info-progress .detail-info-icon{
  background:#3A2A1F !important;
  color:#F0BE94 !important;
}

body.dark-theme .detail-progress-track{
  background:#2B3D2E !important;
}

body.dark-theme .detail-public-note{
  background:#152219 !important;
  border-color:#334A37 !important;
}

body.dark-theme .detail-public-note p{
  color:#B8C5B9 !important;
}

/* Mobile */
@media(max-width:700px){
  .detail-info-head{
    padding:16px 14px 14px;
  }

  .detail-info-list{
    padding:14px;
  }

  .detail-info-item{
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    padding:10px;
  }

  .detail-info-icon{
    width:36px;
    height:36px;
    border-radius:10px;
    font-size:18px;
  }

  .detail-info-item strong{
    font-size:12px;
  }

  .detail-public-note{
    margin:0 14px 14px;
  }
}


/* ===== Detail Laporan — Uraian + Timeline Redesign ===== */
.report-description-panel,
.report-timeline-panel{
  margin-top:26px;
  border:1px solid #E1E8DF;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(40,70,43,.045);
}

.report-description-head,
.report-timeline-head{
  padding:18px 18px 14px;
}

.report-section-eyebrow{
  display:block;
  margin-bottom:4px;
  color:#408626;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}

.report-description-head h3,
.report-timeline-head h3{
  margin:0 !important;
  color:#253028;
  font-size:19px;
}

.report-timeline-head p{
  margin:5px 0 0;
  color:#6C776F;
  font-size:11px;
  line-height:1.5;
}

.report-description-body{
  margin:0 18px 18px;
  padding:14px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  align-items:start;
  border:1px solid #DCE8D8;
  border-radius:13px;
  background:#FAFCF9;
}

.report-description-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#EAF5E5;
  color:#408626;
  font-size:21px;
}

.report-description-copy{
  min-width:0;
  color:#48544B;
  font-size:12.5px;
  line-height:1.7;
  overflow-wrap:anywhere;
}

/* Timeline */
.report-timeline-modern{
  position:relative;
  padding:2px 18px 4px 32px;
}

.report-timeline-modern::before{
  content:"";
  position:absolute;
  left:50px;
  top:26px;
  bottom:28px;
  width:2px;
  background:linear-gradient(180deg,#7DBB67,#D8E5D4);
}

.report-timeline-card{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  margin-bottom:12px;
}

.report-timeline-card:last-child{
  margin-bottom:0;
}

.report-timeline-rail{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  padding-top:18px;
}

.report-timeline-node{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  box-shadow:0 0 0 6px rgba(64,134,38,.09);
}

.report-timeline-node .material-symbols-rounded{
  font-size:17px;
}

.report-timeline-node.status-wait{background:#E5A62B}
.report-timeline-node.status-verify{background:#4E83C7}
.report-timeline-node.status-process{background:#408626}
.report-timeline-node.status-done{background:#318845}

.report-timeline-content{
  padding:14px 15px 15px;
  border:1px solid #E0E7DF;
  border-radius:13px;
  background:#fff;
  box-shadow:0 5px 16px rgba(40,70,43,.04);
}

.report-timeline-card.is-latest .report-timeline-content{
  border-color:#79B766;
  background:linear-gradient(180deg,#FCFEFB 0%,#F7FBF5 100%);
  box-shadow:0 7px 20px rgba(64,134,38,.08);
}

.report-timeline-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.report-timeline-status{
  display:flex;
  align-items:center;
  gap:7px;
  color:#2C6532;
}

.report-timeline-status-icon{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#EAF5E5;
  color:#408626;
  font-size:17px;
}

.report-timeline-status strong{
  font-size:12.5px;
  line-height:1.3;
}

.report-latest-badge{
  min-height:28px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:999px;
  background:#E5F4DF;
  color:#408626;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.report-latest-badge .material-symbols-rounded{
  font-size:14px;
}

.report-timeline-date{
  margin:8px 0 6px;
  display:flex;
  align-items:center;
  gap:6px;
  color:#748078;
  font-size:10.5px;
}

.report-timeline-date .material-symbols-rounded{
  font-size:15px;
  color:#77857A;
}

.report-timeline-content p{
  margin:0;
  color:#536056;
  font-size:11.5px;
  line-height:1.55;
}

.report-timeline-note{
  margin:16px 18px 18px;
  padding:11px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #D9E6D5;
  border-radius:11px;
  background:#F5FAF3;
}

.report-timeline-note .material-symbols-rounded{
  color:#408626;
  font-size:18px;
  flex:0 0 auto;
}

.report-timeline-note p{
  margin:0;
  color:#667269;
  font-size:10.5px;
  line-height:1.5;
}

/* Dark mode */
body.dark-theme .report-description-panel,
body.dark-theme .report-timeline-panel{
  background:#142118 !important;
  border-color:#334A37 !important;
}

body.dark-theme .report-description-head h3,
body.dark-theme .report-timeline-head h3{
  color:#F0F4F0 !important;
}

body.dark-theme .report-timeline-head p{
  color:#B6C2B7 !important;
}

body.dark-theme .report-description-body,
body.dark-theme .report-timeline-content{
  background:#17251B !important;
  border-color:#344B38 !important;
}

body.dark-theme .report-description-copy,
body.dark-theme .report-timeline-content p{
  color:#C3CEC4 !important;
}

body.dark-theme .report-timeline-card.is-latest .report-timeline-content{
  background:#19291D !important;
  border-color:#4C7543 !important;
}

body.dark-theme .report-timeline-status-icon{
  background:#203724 !important;
  color:#BDE2AD !important;
}

body.dark-theme .report-timeline-date{
  color:#AEBBAF !important;
}

body.dark-theme .report-timeline-note{
  background:#17261B !important;
  border-color:#36513A !important;
}

body.dark-theme .report-timeline-note p{
  color:#B8C5B9 !important;
}

body.dark-theme .report-timeline-modern::before{
  background:linear-gradient(180deg,#5B8A4F,#344B38);
}

/* Mobile */
@media(max-width:700px){
  .report-description-panel,
  .report-timeline-panel{
    margin-top:20px;
    border-radius:14px;
  }

  .report-description-head,
  .report-timeline-head{
    padding:15px 14px 12px;
  }

  .report-description-body{
    margin:0 14px 14px;
    grid-template-columns:36px minmax(0,1fr);
    gap:10px;
    padding:12px;
  }

  .report-description-icon{
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:18px;
  }

  .report-description-copy{
    font-size:12px;
  }

  .report-timeline-modern{
    padding:2px 14px 4px 20px;
  }

  .report-timeline-modern::before{
    left:36px;
  }

  .report-timeline-card{
    grid-template-columns:28px minmax(0,1fr);
    gap:9px;
  }

  .report-timeline-node{
    width:26px;
    height:26px;
    box-shadow:0 0 0 5px rgba(64,134,38,.08);
  }

  .report-timeline-node .material-symbols-rounded{
    font-size:15px;
  }

  .report-timeline-content{
    padding:12px;
  }

  .report-timeline-title-row{
    align-items:flex-start;
  }

  .report-latest-badge{
    min-height:25px;
    font-size:8px;
  }

  .report-timeline-note{
    margin:14px;
  }
}


/* ===== Countdown Target Penyelesaian pada Portal ===== */
.report-target{
  position:relative;
  grid-template-columns:34px minmax(0,1fr) auto;
}

.report-target-copy{
  min-width:0;
}

.report-target-countdown{
  min-height:30px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:9px;
  white-space:nowrap;
  font-size:9.5px;
  font-weight:800;
}

.report-target-countdown .material-symbols-rounded{
  font-size:15px;
}

.report-target.is-upcoming .report-target-countdown{
  background:#E8F4E2;
  color:#408626;
}

.report-target.is-overdue{
  border-color:#E7C5BE;
  background:#FFF6F3;
}

.report-target.is-overdue > .material-symbols-rounded{
  background:#FCE5DF;
  color:#B24E3F;
}

.report-target.is-overdue .report-target-copy strong{
  color:#8E3C31;
}

.report-target.is-overdue .report-target-countdown{
  background:#D64545;
  color:#FFFFFF;
  border:1px solid #C93C3C;
  box-shadow:0 4px 12px rgba(214,69,69,.18);
}

.report-target.is-overdue .report-target-countdown .material-symbols-rounded{
  color:#FFFFFF;
}

.report-target.is-no-target .report-target-countdown{
  background:#EEF1EE;
  color:#6C756E;
}

/* Dark mode */
body.dark-theme .report-target.is-upcoming .report-target-countdown{
  background:#203724 !important;
  color:#BDE2AD !important;
}

body.dark-theme .report-target.is-overdue{
  background:#321F1C !important;
  border-color:#61433D !important;
}

body.dark-theme .report-target.is-overdue > .material-symbols-rounded{
  background:#442721 !important;
  color:#F1B3A7 !important;
}

body.dark-theme .report-target.is-overdue .report-target-copy strong{
  color:#F0BDB3 !important;
}

body.dark-theme .report-target.is-overdue .report-target-countdown{
  background:#D94B4B !important;
  color:#FFFFFF !important;
  border-color:#EA6969 !important;
  box-shadow:0 4px 14px rgba(217,75,75,.24) !important;
}

body.dark-theme .report-target.is-overdue .report-target-countdown .material-symbols-rounded{
  color:#FFFFFF !important;
}

body.dark-theme .report-target.is-no-target .report-target-countdown{
  background:#263028 !important;
  color:#B8C1B9 !important;
}

@media(max-width:640px){
  .report-target{
    grid-template-columns:34px minmax(0,1fr);
  }

  .report-target-countdown{
    grid-column:1/-1;
    width:100%;
    margin-top:8px;
  }
}


/* ===== Posisi Countdown Target — lebih ke kanan ===== */
.report-target{
  column-gap:12px;
}

.report-target-countdown{
  justify-self:end;
  margin-left:22px;
}

@media(min-width:641px){
  .report-target-copy{
    padding-right:10px;
  }

  .report-target-countdown{
    min-width:max-content;
    margin-left:28px;
  }
}

@media(max-width:640px){
  .report-target-countdown{
    margin-left:0;
    justify-self:stretch;
  }
}


/* ===== Target Penyelesaian: tanggal & waktu dua baris ===== */
.report-target-copy .target-date{
  display:block;
  margin:0;
  line-height:1.35;
}

.report-target-copy .target-time{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:10.5px;
  font-weight:600;
  line-height:1.3;
}

body.dark-theme .report-target-copy .target-time{
  color:#AEBBAF !important;
}


/* ===== Target countdown: dorong ke sisi kanan kartu ===== */
@media (min-width:641px){
  .report-target{
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) max-content !important;
    column-gap:14px !important;
    align-items:center;
  }

  .report-target-copy{
    min-width:0;
    padding-right:24px !important;
  }

  .report-target-countdown{
    justify-self:end !important;
    margin-left:40px !important;
  }
}

@media (max-width:640px){
  .report-target{
    grid-template-columns:34px minmax(0,1fr) !important;
  }

  .report-target-copy{
    padding-right:0 !important;
  }

  .report-target-countdown{
    grid-column:1/-1;
    justify-self:stretch !important;
    margin-left:0 !important;
  }
}


/* =========================================================
   MULTI PHOTO — REPORT LIST + DETAIL GALLERY
   ========================================================= */

/* Portal / daftar laporan: 1 cover + jumlah foto */
.report-thumb-wrap{
  position:relative;
  flex:0 0 auto;
  overflow:hidden;
  background:#EEF2ED;
}

.report-thumb-wrap .report-thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.report-photo-count{
  position:absolute;
  right:10px;
  bottom:10px;
  min-height:30px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(24,34,26,.76);
  color:#FFFFFF;
  box-shadow:0 5px 16px rgba(0,0,0,.14);
  backdrop-filter:blur(7px);
  font-size:10px;
  font-weight:800;
  letter-spacing:.01em;
}

/* Preserve existing landscape card sizing */
@media(min-width:701px){
  .report-card .report-thumb-wrap{
    width:38%;
    min-height:230px;
  }
}

@media(max-width:700px){
  .report-card .report-thumb-wrap{
    width:100%;
    aspect-ratio:16/10;
  }

  .report-photo-count{
    right:9px;
    bottom:9px;
  }
}

/* Detail gallery */
.detail-photo-section{
  margin:20px 0 24px;
  padding:16px;
  border:1px solid #E0E8DE;
  border-radius:16px;
  background:#FAFCF9;
}

.detail-photo-head{
  margin-bottom:13px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.detail-photo-head h3{
  margin:2px 0 3px !important;
  color:#2F3931;
  font-size:17px;
}

.detail-photo-head p{
  margin:0;
  color:#7A867D;
  font-size:10.5px;
}

.detail-photo-total{
  min-height:29px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:#EAF5E5;
  color:#408626;
  font-size:9.5px;
  font-weight:800;
  white-space:nowrap;
}

.detail-photo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.detail-photo-grid.single-photo{
  grid-template-columns:minmax(0,1fr);
}

.detail-photo-grid.single-photo .detail-photo-item{
  max-height:440px;
  aspect-ratio:16/9;
}

.detail-photo-item{
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:0;
  aspect-ratio:4/3;
  border:0;
  border-radius:12px;
  background:#E9EEE8;
  cursor:pointer;
  font-family:inherit;
}

.detail-photo-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .22s ease;
}

.detail-photo-item:hover img{
  transform:scale(1.035);
}

.detail-photo-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:rgba(22,33,24,.0);
  color:#fff;
  opacity:0;
  transition:.18s ease;
  font-size:10px;
  font-weight:700;
}

.detail-photo-item:hover .detail-photo-overlay,
.detail-photo-item:focus-visible .detail-photo-overlay{
  background:rgba(22,33,24,.42);
  opacity:1;
}

.detail-photo-overlay .material-symbols-rounded{
  font-size:18px;
}

.detail-photo-number{
  position:absolute;
  right:8px;
  bottom:8px;
  min-height:25px;
  padding:0 7px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:rgba(18,29,20,.72);
  color:#fff;
  backdrop-filter:blur(5px);
  font-size:8.5px;
  font-weight:800;
}

/* Lightbox */
.detail-photo-modal-open{
  overflow:hidden;
}

.detail-photo-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  padding:24px;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.18s ease;
}

.detail-photo-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.detail-photo-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(13,20,15,.76);
  backdrop-filter:blur(6px);
}

.detail-photo-modal-dialog{
  position:relative;
  z-index:1;
  width:min(1000px,94vw);
  max-height:92vh;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  border-radius:18px;
  background:#FFFFFF;
  box-shadow:0 28px 80px rgba(0,0,0,.3);
}

.detail-photo-modal-head{
  min-height:66px;
  padding:13px 15px 12px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid #E4EAE3;
  background:#FAFCF9;
}

.detail-photo-modal-head strong{
  display:block;
  margin-top:2px;
  color:#354238;
  font-size:11px;
}

.detail-photo-modal-close{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid #DCE5DA;
  border-radius:10px;
  background:#FFFFFF;
  color:#657168;
  font-size:23px;
  line-height:1;
  cursor:pointer;
}

.detail-photo-modal-stage{
  position:relative;
  min-height:300px;
  max-height:calc(92vh - 66px);
  padding:16px 62px;
  display:grid;
  place-items:center;
  background:#EEF2ED;
}

.detail-photo-modal-stage img{
  display:block;
  max-width:100%;
  max-height:calc(92vh - 100px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:11px;
  box-shadow:0 8px 30px rgba(0,0,0,.12);
}

.detail-photo-nav{
  position:absolute;
  top:50%;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:1px solid #D8E2D7;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#408626;
  box-shadow:0 7px 18px rgba(0,0,0,.08);
  cursor:pointer;
}

.detail-photo-nav.prev{left:12px}
.detail-photo-nav.next{right:12px}
.detail-photo-nav .material-symbols-rounded{font-size:22px}

/* Dark mode */
body.dark-theme .detail-photo-section{
  background:#17251B;
  border-color:#344B38;
}

body.dark-theme .detail-photo-head h3,
body.dark-theme .detail-photo-modal-head strong{
  color:#F0F4F0;
}

body.dark-theme .detail-photo-head p{
  color:#B6C2B7;
}

body.dark-theme .detail-photo-modal-dialog,
body.dark-theme .detail-photo-modal-head{
  background:#142118;
  border-color:#334A37;
}

body.dark-theme .detail-photo-modal-stage{
  background:#101A13;
}

/* Responsive gallery */
@media(max-width:900px){
  .detail-photo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:600px){
  .detail-photo-section{
    margin-top:16px;
    padding:12px;
    border-radius:14px;
  }

  .detail-photo-grid{
    grid-template-columns:1fr;
  }

  .detail-photo-item{
    aspect-ratio:16/10;
  }

  .detail-photo-modal{
    padding:10px;
  }

  .detail-photo-modal-dialog{
    width:100%;
    border-radius:14px;
  }

  .detail-photo-modal-stage{
    padding:12px 48px;
  }

  .detail-photo-nav{
    width:34px;
    height:34px;
  }

  .detail-photo-nav.prev{left:7px}
  .detail-photo-nav.next{right:7px}
}

/* Latest listing thumbnail baseline */
.report-card .report-thumb-wrap{
  position:relative !important; display:block !important; width:100% !important;
  max-width:none !important; min-width:0 !important; height:190px !important;
  min-height:190px !important; aspect-ratio:auto !important; overflow:hidden !important;
  flex:none !important; background:#EEF2ED; border-bottom:1px solid var(--border);
}
.report-card .report-thumb-wrap .report-thumb{
  display:block !important; width:100% !important; height:100% !important;
  min-height:0 !important; max-width:none !important; aspect-ratio:auto !important;
  object-fit:cover !important; object-position:center !important; border:0 !important;
}
@media(max-width:1100px){.report-card .report-thumb-wrap{width:100% !important;height:180px !important;min-height:180px !important;}}
@media(max-width:640px){
 .report-card .report-thumb-wrap{width:100% !important;height:auto !important;min-height:0 !important;aspect-ratio:16/9 !important;}
 .report-card .report-thumb-wrap .report-thumb{width:100% !important;height:100% !important;}
}

/* Completed target / SLA result */
.report-target.is-completed{border-color:#CFE4C8;background:#F4FAF1}
.report-target.is-completed-late{border-color:#F0C9C5;background:#FFF6F5}
.report-target.is-completed .report-target-countdown{background:#E5F4DF;color:#378124}
.report-target.is-completed-late .report-target-countdown{background:#FDE5E2;color:#B94337}
.report-completed-at{margin-left:auto;padding-left:16px;border-left:1px solid #DDE6DB;display:flex;flex-direction:column;gap:2px}
.report-completed-at small{font-size:8.5px;color:#7C887F}
.report-completed-at strong{font-size:10px;color:#455148}
.detail-completed-at{display:block;margin-top:4px;color:#738078;font-size:9.5px}
.detail-completion-result{margin-top:7px;padding:5px 8px;display:inline-flex;align-items:center;gap:4px;border-radius:999px;font-size:9px;font-weight:800}
.detail-completion-result.is-completed{background:#E7F4E2;color:#378124}
.detail-completion-result.is-completed-late{background:#FDE5E2;color:#B94337}
.detail-completion-result .material-symbols-rounded{font-size:14px}
@media(max-width:640px){.report-completed-at{width:100%;margin:8px 0 0;padding:8px 0 0;border-left:0;border-top:1px solid #DDE6DB}}


/* Completion result visibility reinforcement */
.report-target.is-completed .report-target-countdown,
.report-target.is-completed-late .report-target-countdown{
  display:inline-flex !important;
  opacity:1 !important;
  visibility:visible !important;
  font-weight:800 !important;
}
.detail-completion-result{
  display:inline-flex !important;
}


/* =========================================================
   COMPLETED TARGET — COMPACT POLISH
   ========================================================= */
.report-target-completed{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:16px !important;
  padding:14px 16px !important;
}

.report-target-completed .report-target-main{
  min-width:0;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:start;
  gap:12px;
}

.report-target-completed .report-target-main-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#E8F4E3;
  color:#408626;
  font-size:22px;
}

.report-target-completed .report-target-summary{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.report-target-completed .report-target-data{
  min-width:0;
  padding-right:12px;
}

.report-target-completed .report-target-data + .report-target-data{
  padding-left:12px;
  border-left:1px solid #DCE6DA;
}

.report-target-completed .report-target-data small{
  display:block;
  margin-bottom:3px;
  color:#77837A;
  font-size:9px;
  line-height:1.25;
}

.report-target-completed .report-target-data strong{
  display:block;
  color:#2F3931;
  font-size:11.5px;
  line-height:1.35;
  white-space:normal;
}

.report-target-completed .report-target-data span{
  display:block;
  margin-top:2px;
  color:#536056;
  font-size:10.5px;
  line-height:1.3;
}

.report-target-completed .report-completed-data strong{
  white-space:normal;
}

.report-target-completed .report-target-result{
  min-height:38px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:12px;
  white-space:nowrap;
  font-size:10.5px;
  font-weight:800;
}

.report-target-completed.is-completed .report-target-result{
  background:#E5F4DF;
  color:#378124;
}

.report-target-completed.is-completed-late .report-target-result{
  background:#FDE3E0;
  color:#B94337;
}

.report-target-completed .report-target-result .material-symbols-rounded{
  font-size:18px;
}

/* Remove old completed-at split styles inside new completed card */
.report-target-completed .report-completed-at{
  display:none !important;
}

@media(max-width:780px){
  .report-target-completed{
    grid-template-columns:1fr !important;
    align-items:stretch !important;
  }

  .report-target-completed .report-target-result{
    justify-self:start;
  }
}

@media(max-width:520px){
  .report-target-completed .report-target-main{
    grid-template-columns:38px minmax(0,1fr);
  }

  .report-target-completed .report-target-main-icon{
    width:38px;
    height:38px;
  }

  .report-target-completed .report-target-summary{
    grid-template-columns:1fr;
    gap:8px;
  }

  .report-target-completed .report-target-data + .report-target-data{
    padding-left:0;
    padding-top:8px;
    border-left:0;
    border-top:1px solid #DCE6DA;
  }

  .report-target-completed .report-target-result{
    width:100%;
  }
}

/* Completed report must visually match 100% progress */
.report-card .progress-wrap .progress span[style*="100%"]{
  width:100% !important;
}


/* =========================================================
   FINAL CLEAN LAYOUT — TARGET SELESAI
   ========================================================= */
.report-card .report-target-finished{
  display:grid !important;
  grid-template-columns:minmax(210px,1fr) 1px minmax(210px,1fr) auto !important;
  align-items:center !important;
  column-gap:14px !important;
  row-gap:0 !important;
  width:100% !important;
  min-height:96px !important;
  padding:14px 16px !important;
  border:1px solid #DCE6DA !important;
  border-radius:15px !important;
  background:#FAFCF9 !important;
  box-sizing:border-box !important;
}

.report-card .report-target-finished.is-completed{
  border-color:#CFE4C8 !important;
  background:#F7FBF5 !important;
}

.report-card .report-target-finished.is-completed-late{
  border-color:#F1C9C4 !important;
  background:#FFF8F7 !important;
}

.report-finished-col{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
}

.report-finished-icon{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
  background:#E8F4E3 !important;
  color:#408626 !important;
}

.report-finished-icon .material-symbols-rounded{
  font-size:21px !important;
}

.report-finished-copy{
  min-width:0 !important;
}

.report-finished-copy small{
  display:block !important;
  margin:0 0 3px !important;
  color:#79857C !important;
  font-size:9.5px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
}

.report-finished-copy strong{
  display:block !important;
  margin:0 !important;
  color:#2F3931 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
  white-space:normal !important;
  word-break:normal !important;
}

.report-finished-copy span{
  display:block !important;
  margin-top:2px !important;
  color:#59655C !important;
  font-size:10.5px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
}

.report-finished-divider{
  width:1px !important;
  height:48px !important;
  align-self:center !important;
  background:#DCE5DA !important;
}

.report-finished-result{
  min-height:40px !important;
  max-width:220px !important;
  padding:0 12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  border-radius:12px !important;
  font-size:10.5px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
  text-align:center !important;
  white-space:nowrap !important;
}

.report-finished-result.completed{
  background:#E5F4DF !important;
  color:#378124 !important;
}

.report-finished-result.completed-late{
  background:#FDE3E0 !important;
  color:#B94337 !important;
}

.report-finished-result .material-symbols-rounded{
  font-size:18px !important;
  flex:0 0 auto !important;
}

/* Disable old completed target children so legacy rules cannot stack elements */
.report-target-finished > .report-target-copy,
.report-target-finished > .report-target-countdown,
.report-target-finished > .report-completed-at,
.report-target-finished > .report-target-main,
.report-target-finished > .report-target-result{
  display:none !important;
}

/* Medium desktop / tablet */
@media(max-width:980px){
  .report-card .report-target-finished{
    grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) !important;
    row-gap:12px !important;
  }

  .report-finished-result{
    grid-column:1 / -1 !important;
    justify-self:start !important;
    max-width:none !important;
  }
}

/* Mobile */
@media(max-width:640px){
  .report-card .report-target-finished{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:13px !important;
  }

  .report-finished-divider{
    width:100% !important;
    height:1px !important;
  }

  .report-finished-col{
    align-items:flex-start !important;
  }

  .report-finished-result{
    grid-column:auto !important;
    width:100% !important;
    justify-self:stretch !important;
    white-space:normal !important;
  }
}


/* Selesai Pada disamakan dengan Target Penyelesaian */
.report-finished-done{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
}

.report-finished-done-icon{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
  background:#E8F4E3 !important;
  color:#408626 !important;
}

.report-finished-done-icon .material-symbols-rounded{
  font-size:21px !important;
}

.report-finished-target .report-finished-copy,
.report-finished-done .report-finished-copy{
  min-width:0 !important;
}

.report-finished-target .report-finished-copy small,
.report-finished-done .report-finished-copy small{
  display:block !important;
  margin:0 0 3px !important;
  color:#79857C !important;
  font-size:9.5px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
}

.report-finished-target .report-finished-copy strong,
.report-finished-done .report-finished-copy strong{
  display:block !important;
  margin:0 !important;
  color:#2F3931 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
}

.report-finished-target .report-finished-copy span,
.report-finished-done .report-finished-copy span{
  display:block !important;
  margin-top:2px !important;
  color:#59655C !important;
  font-size:10.5px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
}

@media(max-width:640px){
  .report-finished-done-icon{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }
}


/* =========================================================
   FIX — TARGET SELESAI OVERFLOW / RATA KANAN
   ========================================================= */

/* Beri ruang proporsional untuk Target dan Selesai Pada.
   Badge hasil penyelesaian tetap mendapat kolom sendiri. */
.report-card .report-target-finished{
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) minmax(145px,max-content) !important;
  column-gap:12px !important;
  overflow:hidden !important;
}

/* Kedua kolom informasi wajib boleh mengecil di dalam grid */
.report-finished-target,
.report-finished-done{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

.report-finished-target .report-finished-copy,
.report-finished-done .report-finished-copy{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

/* Hindari teks memaksa kolom melewati batas card */
.report-finished-target .report-finished-copy small,
.report-finished-done .report-finished-copy small,
.report-finished-target .report-finished-copy strong,
.report-finished-done .report-finished-copy strong,
.report-finished-target .report-finished-copy span,
.report-finished-done .report-finished-copy span{
  max-width:100% !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

/* Pada card yang lebarnya belum cukup, hasil SLA turun ke baris kedua
   daripada mendorong "Selesai Pada" keluar kotak. */
@media(max-width:1180px){
  .report-card .report-target-finished{
    grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) !important;
    row-gap:12px !important;
  }

  .report-target-finished .report-finished-result{
    grid-column:1 / -1 !important;
    justify-self:start !important;
    max-width:100% !important;
  }
}

/* Tablet: Target dan Selesai tetap dua kolom selama masih muat */
@media(max-width:760px){
  .report-card .report-target-finished{
    grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) !important;
  }
}

/* Mobile kecil: baru dibuat vertikal */
@media(max-width:560px){
  .report-card .report-target-finished{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .report-target-finished .report-finished-divider{
    width:100% !important;
    height:1px !important;
  }

  .report-target-finished .report-finished-result{
    grid-column:auto !important;
    width:100% !important;
  }
}


/* =========================================================
   FINAL LAYOUT — TARGET & SELESAI PADA 2 BARIS
   ========================================================= */
.report-card .report-target-finished{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  grid-template-areas:
    "target result"
    "done result" !important;
  align-items:center !important;
  gap:10px 14px !important;
  width:100% !important;
  min-height:0 !important;
  padding:14px 16px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.report-target-finished .report-finished-target{
  grid-area:target !important;
}

.report-target-finished .report-finished-done{
  grid-area:done !important;
}

.report-target-finished .report-finished-result{
  grid-area:result !important;
  align-self:center !important;
  justify-self:end !important;
  max-width:220px !important;
  white-space:normal !important;
}

/* Divider tidak dibutuhkan lagi pada layout 2 baris */
.report-target-finished .report-finished-divider{
  display:none !important;
}

/* Target dan Selesai Pada sebagai baris informasi yang setara */
.report-target-finished .report-finished-col{
  width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  align-items:center !important;
  gap:11px !important;
  padding:0 !important;
  overflow:hidden !important;
}

.report-target-finished .report-finished-done{
  padding-top:10px !important;
  border-top:1px solid #E2E9E0 !important;
}

.report-target-finished .report-finished-icon{
  width:42px !important;
  height:42px !important;
  flex:none !important;
}

.report-target-finished .report-finished-copy{
  min-width:0 !important;
  overflow:hidden !important;
}

.report-target-finished .report-finished-copy small{
  display:block !important;
  margin-bottom:3px !important;
  font-size:9.5px !important;
}

.report-target-finished .report-finished-copy strong{
  display:block !important;
  font-size:12px !important;
  line-height:1.35 !important;
  white-space:normal !important;
}

.report-target-finished .report-finished-copy span{
  display:block !important;
  margin-top:2px !important;
  font-size:10.5px !important;
}

/* Jika card lebih sempit, badge turun ke bawah agar tidak menekan dua baris info */
@media(max-width:900px){
  .report-card .report-target-finished{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "target"
      "done"
      "result" !important;
  }

  .report-target-finished .report-finished-result{
    justify-self:start !important;
    max-width:100% !important;
  }
}

/* Mobile */
@media(max-width:560px){
  .report-card .report-target-finished{
    padding:13px !important;
  }

  .report-target-finished .report-finished-col{
    grid-template-columns:38px minmax(0,1fr) !important;
  }

  .report-target-finished .report-finished-icon{
    width:38px !important;
    height:38px !important;
  }

  .report-target-finished .report-finished-result{
    width:100% !important;
    justify-self:stretch !important;
  }
}


/* =========================================================
   COMPACT REPORT CARD — DAFTAR LAPORAN
   ========================================================= */

/* Card dibuat lebih ringkas untuk daftar */
.report-card.report-card-compact{
  min-height:0 !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

.report-card-compact .compact-thumb{
  width:100% !important;
  height:150px !important;
  min-height:150px !important;
  aspect-ratio:auto !important;
  flex:none !important;
}

.report-card-compact .compact-thumb .report-thumb{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

.compact-report-body{
  padding:14px 15px 12px !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}

.compact-report-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:5px;
}

.compact-report-top .ticket{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px !important;
}

.compact-report-top .badge{
  flex:0 0 auto;
  font-size:9px !important;
}

.compact-report-title{
  margin:0 0 10px !important;
  min-height:0 !important;
  color:#202922;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.compact-report-meta{
  display:grid;
  gap:6px;
  margin-bottom:10px;
}

.compact-meta-row{
  min-width:0;
  display:grid;
  grid-template-columns:25px minmax(0,1fr);
  align-items:center;
  gap:7px;
  color:#354238;
  font-size:10.5px;
  line-height:1.35;
  font-weight:600;
}

.compact-meta-row + .compact-meta-row{
  padding-top:6px;
  border-top:1px solid #EDF1EC;
}

.compact-meta-icon{
  width:25px;
  height:25px;
  display:grid !important;
  place-items:center;
  border-radius:8px;
  background:#EEF6EA;
  color:#408626;
  font-size:15px !important;
}

.compact-meta-row:nth-child(2) .compact-meta-icon{
  background:#EDF5FF;
  color:#3376C7;
}

.compact-meta-row:nth-child(3) .compact-meta-icon{
  background:#FFF3EA;
  color:#F07A31;
}

.compact-target-block{
  padding:9px 10px;
  display:grid;
  gap:6px;
  border:1px solid #DDE7DA;
  border-radius:11px;
  background:#FAFCF9;
}

.compact-target-line{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:wrap;
  line-height:1.35;
}

.compact-target-label{
  flex:0 0 auto;
  color:#7A867D;
  font-size:9px;
  font-weight:600;
}

.compact-target-line strong{
  min-width:0;
  color:#378124;
  font-size:10px;
  font-weight:700;
}

.compact-sla-result{
  width:max-content;
  max-width:100%;
  min-height:25px;
  padding:0 7px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border-radius:8px;
  font-size:9px;
  line-height:1.25;
  font-weight:800;
}

.compact-sla-result .material-symbols-rounded{
  font-size:14px !important;
}

.compact-sla-result.completed,
.compact-sla-result.is-upcoming{
  background:#E7F4E2;
  color:#378124;
}

.compact-sla-result.completed-late,
.compact-sla-result.is-overdue{
  background:#FDE6E3;
  color:#B94337;
}

.compact-sla-result.is-no-target{
  background:#F0F2F0;
  color:#68746B;
}

.compact-progress{
  margin-top:9px;
}

.compact-progress-head{
  margin-bottom:5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#29332B;
  font-size:9.5px;
  font-weight:700;
}

.compact-progress-track{
  height:5px !important;
  margin:0 !important;
}

.compact-report-footer{
  margin:10px -15px -12px !important;
  padding:10px 15px !important;
  display:flex !important;
  justify-content:flex-end !important;
  border-top:1px solid #E9EEE8 !important;
  background:#FCFDFC;
}

.compact-report-footer .detail-link{
  min-height:34px !important;
  padding:0 11px !important;
  font-size:9.5px !important;
}

/* Hilangkan elemen legacy jika rule lama masih tersisa */
.report-card-compact .report-meta-modern,
.report-card-compact .update,
.report-card-compact > .report-target,
.report-card-compact .report-target-completed,
.report-card-compact .report-target-finished{
  display:none !important;
}

/* Desktop — card tetap mudah dipindai */
@media(min-width:901px){
  .report-card-compact .compact-thumb{
    height:145px !important;
    min-height:145px !important;
  }
}

/* Tablet */
@media(max-width:900px){
  .report-card-compact .compact-thumb{
    height:150px !important;
    min-height:150px !important;
  }
}

/* Mobile — lebih hemat ruang lagi */
@media(max-width:640px){
  .report-card.report-card-compact{
    display:grid !important;
    grid-template-columns:92px minmax(0,1fr) !important;
    align-items:stretch !important;
  }

  .report-card-compact .compact-thumb{
    width:92px !important;
    height:100% !important;
    min-height:165px !important;
    aspect-ratio:auto !important;
    border-bottom:0 !important;
    border-right:1px solid #E5EBE4 !important;
  }

  .compact-report-body{
    padding:11px 12px 10px !important;
  }

  .compact-report-title{
    margin-bottom:7px !important;
    font-size:13px !important;
  }

  .compact-report-meta{
    gap:4px;
    margin-bottom:7px;
  }

  .compact-meta-row{
    grid-template-columns:18px minmax(0,1fr);
    gap:5px;
    font-size:9.5px;
  }

  .compact-meta-row + .compact-meta-row{
    padding-top:4px;
  }

  .compact-meta-icon{
    width:18px;
    height:18px;
    border-radius:6px;
    font-size:12px !important;
  }

  .compact-target-block{
    padding:7px 8px;
    gap:5px;
  }

  .compact-report-footer{
    margin:8px -12px -10px !important;
    padding:8px 12px !important;
  }
}


/* =========================================================
   FBS 13.12.0 · Responsive Report Cards
   Mobile + Tablet: foto di atas
   Desktop: foto di kiri
   ========================================================= */

/* Desktop >= 992px — pertahankan pola foto kiri */
@media (min-width:992px){
  .report-card.report-card-compact{
    display:grid !important;
    grid-template-columns:42% minmax(0,1fr) !important;
    grid-template-rows:auto !important;
    align-items:stretch !important;
  }

  .report-card-compact .compact-thumb{
    width:100% !important;
    height:100% !important;
    min-height:270px !important;
    border-right:1px solid #E5EBE4 !important;
    border-bottom:0 !important;
  }

  .report-card-compact .compact-thumb .report-thumb{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .compact-report-body{
    padding:16px !important;
  }

  .compact-report-footer{
    margin:12px -16px -16px !important;
    padding:11px 16px !important;
  }
}

/* Tablet + mobile <= 991px — foto horizontal penuh di atas */
@media (max-width:991px){
  .report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
  }

  .report-card.report-card-compact{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
  }

  .report-card-compact .compact-thumb{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16/7 !important;
    border-right:0 !important;
    border-bottom:1px solid #E5EBE4 !important;
    overflow:hidden !important;
  }

  .report-card-compact .compact-thumb .report-thumb{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .compact-report-body{
    padding:14px 15px 12px !important;
  }

  .compact-report-top{
    gap:10px !important;
    margin-bottom:6px !important;
  }

  .compact-report-top .ticket{
    font-size:10.5px !important;
  }

  .compact-report-top .badge{
    font-size:9.5px !important;
    padding:5px 9px !important;
  }

  .compact-report-title{
    font-size:15px !important;
    margin-bottom:10px !important;
  }

  .compact-report-meta{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px 10px !important;
    margin-bottom:10px !important;
  }

  .compact-meta-row{
    grid-template-columns:24px minmax(0,1fr) !important;
    gap:7px !important;
    font-size:10.5px !important;
  }

  .compact-meta-row + .compact-meta-row{
    padding-top:0 !important;
    border-top:0 !important;
  }

  .compact-meta-row:nth-child(3){
    grid-column:1 / -1 !important;
  }

  .compact-meta-icon{
    width:24px !important;
    height:24px !important;
    border-radius:8px !important;
    font-size:14px !important;
  }

  .compact-target-block{
    padding:9px 10px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px 12px !important;
  }

  .compact-target-line{
    margin:0 !important;
  }

  .compact-sla-result{
    margin:0 !important;
    justify-self:end !important;
  }

  .compact-progress{
    margin-top:10px !important;
  }

  .compact-report-footer{
    margin:10px -15px -12px !important;
    padding:10px 15px !important;
    justify-content:stretch !important;
  }

  .compact-report-footer .detail-link{
    width:100% !important;
    min-height:38px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #CFE4C7 !important;
    border-radius:10px !important;
    background:#F5FAF2 !important;
    font-size:10.5px !important;
  }
}

/* Mobile <= 575px — satu kartu per baris, lebih lega */
@media (max-width:575px){
  .report-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .report-card.report-card-compact{
    display:flex !important;
    flex-direction:column !important;
  }

  .report-card-compact .compact-thumb{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16/7.2 !important;
    border-right:0 !important;
  }

  .compact-report-body{
    padding:13px 14px 11px !important;
  }

  .compact-report-top{
    align-items:center !important;
  }

  .compact-report-top .ticket{
    font-size:10px !important;
  }

  .compact-report-top .badge{
    font-size:9px !important;
  }

  .compact-report-title{
    font-size:14px !important;
    line-height:1.35 !important;
    margin-bottom:9px !important;
  }

  .compact-report-meta{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }

  .compact-meta-row,
  .compact-meta-row:nth-child(3){
    grid-column:auto !important;
  }

  .compact-meta-row{
    grid-template-columns:22px minmax(0,1fr) !important;
    font-size:10px !important;
  }

  .compact-meta-icon{
    width:22px !important;
    height:22px !important;
    font-size:13px !important;
  }

  .compact-target-block{
    grid-template-columns:1fr !important;
    gap:6px !important;
    padding:9px !important;
  }

  .compact-sla-result{
    justify-self:start !important;
  }

  .compact-progress-head{
    font-size:10px !important;
  }

  .compact-report-footer{
    margin:10px -14px -11px !important;
    padding:10px 14px !important;
  }

  .compact-report-footer .detail-link{
    min-height:40px !important;
    font-size:10.5px !important;
  }
}

/* Small mobile <= 374px — cegah badge/tiket bertabrakan */
@media (max-width:374px){
  .compact-report-top{
    align-items:flex-start !important;
    flex-wrap:wrap !important;
  }

  .compact-report-top .ticket{
    max-width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  .compact-report-top .badge{
    margin-left:0 !important;
  }
}

/* Dark mode */
.dark-theme .compact-report-footer .detail-link{
  background:rgba(101,179,58,.08) !important;
  border-color:rgba(101,179,58,.28) !important;
}


/* =========================================================
   FBS 13.12.1 · Unified Report Card Layout
   Semua resolusi: foto horizontal di atas
   ========================================================= */

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

.report-card.report-card-compact{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
}

.report-card-compact .compact-thumb{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16/7 !important;
  flex:none !important;
  border-right:0 !important;
  border-bottom:1px solid #E5EBE4 !important;
  overflow:hidden !important;
}

.report-card-compact .compact-thumb .report-thumb{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  object-fit:cover !important;
  object-position:center !important;
}

.compact-report-body{
  padding:14px 15px 12px !important;
}

.compact-report-meta{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:7px 10px !important;
}

.compact-meta-row + .compact-meta-row{
  padding-top:0 !important;
  border-top:0 !important;
}

.compact-meta-row:nth-child(3){
  grid-column:1 / -1 !important;
}

.compact-target-block{
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:8px 12px !important;
}

.compact-sla-result{
  justify-self:end !important;
}

.compact-report-footer{
  margin:10px -15px -12px !important;
  padding:10px 15px !important;
  justify-content:stretch !important;
}

.compact-report-footer .detail-link{
  width:100% !important;
  min-height:38px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #CFE4C7 !important;
  border-radius:10px !important;
  background:#F5FAF2 !important;
}

/* Tablet */
@media(max-width:991px){
  .report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Mobile */
@media(max-width:575px){
  .report-grid{
    grid-template-columns:1fr !important;
  }

  .report-card-compact .compact-thumb{
    aspect-ratio:16/7.2 !important;
  }

  .compact-report-meta{
    grid-template-columns:1fr !important;
  }

  .compact-meta-row,
  .compact-meta-row:nth-child(3){
    grid-column:auto !important;
  }

  .compact-target-block{
    grid-template-columns:1fr !important;
  }

  .compact-sla-result{
    justify-self:start !important;
  }
}


/* =========================================================
   FBS 13.12.2 · Stacked Report Metadata
   Kategori, Lokasi, dan Tanggal selalu berbaris ke bawah
   ========================================================= */
.compact-report-meta{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
  margin-bottom:10px !important;
}

.compact-meta-row,
.compact-meta-row:nth-child(3){
  grid-column:auto !important;
}

.compact-meta-row{
  grid-template-columns:25px minmax(0,1fr) !important;
  align-items:center !important;
  gap:7px !important;
}

.compact-meta-row + .compact-meta-row{
  padding-top:6px !important;
  border-top:1px solid #EDF1EC !important;
}

@media(max-width:575px){
  .compact-report-meta{
    gap:5px !important;
  }

  .compact-meta-row{
    grid-template-columns:22px minmax(0,1fr) !important;
    gap:6px !important;
  }

  .compact-meta-row + .compact-meta-row{
    padding-top:5px !important;
  }
}

.dark-theme .compact-meta-row + .compact-meta-row{
  border-top-color:rgba(255,255,255,.08) !important;
}


/* FBS 13.14.8 — Pantau Laporan form polish */
.track-box .track-field + .track-field{
  margin-top:18px;
}

.track-box .track-submit{
  width:100%;
  margin-top:18px;
}

.track-box .track-helper-note{
  margin-top:16px;
  padding:14px 16px;
}

.track-box .track-form-alert{
  margin-top:14px;
  padding:12px 14px;
}

.track-box .track-field-error{
  display:block;
  margin-top:7px;
  font-size:.82rem;
  line-height:1.45;
  color:#b4473a;
}

.track-box .track-field-error[hidden],
.track-box .track-form-alert[hidden]{
  display:none !important;
}

.track-box input.is-invalid{
  border-color:#c95c4c;
  box-shadow:0 0 0 3px rgba(201,92,76,.09);
}

@media (max-width: 640px){
  .track-box .track-field + .track-field{
    margin-top:16px;
  }

  .track-box .track-helper-note{
    padding:12px 14px;
  }
}