:root{
  --ink:#183044;--muted:#607286;--line:#d9e1e8;--canvas:#f3f6f8;--card:#ffffff;
  --brand:#0f4c70;--brand-deep:#0b3854;--brand-soft:#e7f0f5;--good:#1b6a52;
  --danger:#a84136;--warn:#9a6410;--focus:#276d99;
}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.003em;background:var(--canvas)}
body::before{display:none}.skip-link{position:fixed;top:-5rem;left:1rem;z-index:20;background:#fff;color:var(--brand-deep);padding:.65rem .85rem;border:1px solid var(--line);border-radius:.35rem;font-weight:700}.skip-link:focus{top:1rem}
.sidebar{width:16.5rem;padding:1.35rem .8rem;background:#123752;box-shadow:none}.brand{margin:0 .65rem 1.85rem}.brand span,.mark{background:#d6e7ee;color:#123752;border-radius:.45rem}.brand b{font-size:1rem;letter-spacing:.06em}.brand small{color:#aec4d1}.sidebar nav{gap:.18rem}.sidebar nav a{border-radius:.35rem;padding:.66rem .75rem;font-size:.88rem;transition:background-color .16s ease,color .16s ease}.sidebar nav a:hover{transform:none;background:#1e4a67}.sidebar nav a.active{background:#285b79;box-shadow:inset 3px 0 0 #8dc3cf}.profile{margin:.9rem .15rem 0;padding:1rem .6rem;border-color:#41657d}
.main{margin-left:16.5rem;padding:2rem clamp(1.25rem,3vw,3rem) 3.5rem;max-width:108rem}header{padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line)}h1{font-size:clamp(1.5rem,2vw,1.9rem);font-weight:720;letter-spacing:-.025em}h2{letter-spacing:-.012em}.role-pill{border:1px solid #c8dce6;background:var(--brand-soft);color:var(--brand-deep);border-radius:.35rem}
.filter,.toolbar{padding:.85rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:.45rem;box-shadow:none}.filter{margin-bottom:1.2rem}.toolbar{margin-bottom:1.2rem}.filter label{font-size:.76rem}input,select,textarea{border-color:#bdcad4;border-radius:.35rem;min-height:2.45rem}input:hover,select:hover,textarea:hover{border-color:#829caf}input:focus,select:focus,textarea:focus{border-color:var(--focus);box-shadow:0 0 0 3px #276d991f;outline:0}
.cards{gap:.75rem;margin-bottom:1rem}.cards article{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:.45rem;padding:1.1rem 1.15rem;box-shadow:none}.cards article::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#6d91a6}.cards article:nth-child(2)::before{background:#39789e}.cards article:nth-child(3)::before{background:#4d8a79}.cards article:nth-child(4)::before{background:#ad7252}.cards b{font-size:1.42rem;font-variant-numeric:tabular-nums;letter-spacing:-.035em}.cards small{font-size:.77rem}
.grid{gap:1rem}.panel{border:1px solid var(--line);border-radius:.45rem;padding:1.1rem 1.15rem;box-shadow:none}.panel-title{padding-bottom:.8rem;margin-bottom:.1rem;border-bottom:1px solid #e9eef2}.panel-title h2{font-size:1rem}.panel-title a{color:var(--brand);text-decoration:none;font-weight:650}.panel-title a:hover{text-decoration:underline}
table{font-size:.86rem}th{background:#f6f8fa;color:#506477;font-weight:750;letter-spacing:.045em;padding:.7rem .65rem}td{padding:.78rem .65rem}tbody tr{transition:background-color .14s ease}tbody tr:hover{background:#f1f6f8}td,th{font-variant-numeric:tabular-nums}.meter{vertical-align:middle}.meter i{background:#367a70}.alert-row{padding:.85rem 0}.status{border-radius:.3rem;font-size:.71rem;letter-spacing:.02em}.note{padding:1rem 0}.note>div:first-child b{font-size:.94rem}.note-actions{margin-top:.7rem}
button,.button{border-radius:.35rem;padding:.58rem .85rem;font-size:.86rem;box-shadow:none}.secondary{border:1px solid #cbd6de;background:#f8fafb;color:#27445a}.success{background:var(--good)}.form{gap:.85rem}.form h2{font-size:1.08rem}.form label{font-size:.78rem}.empty{padding:2rem 0;text-align:center}.report-head{padding:1.25rem;background:#fff;border:1px solid var(--line);border-radius:.45rem;margin:0 0 1rem}.report-head h2{font-size:1.42rem}
.auth{position:relative;isolation:isolate;background:#123752;overflow:hidden}.auth::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 4.8rem,#ffffff08 4.8rem,#ffffff08 4.86rem);pointer-events:none}.auth::after{content:"";position:absolute;width:28rem;height:28rem;right:-16rem;bottom:-18rem;border:1px solid #ffffff2e;border-radius:50%;pointer-events:none}.auth-card{position:relative;width:min(27rem,100%);border:0;border-radius:.55rem;padding:2.2rem;background:#fff;box-shadow:0 1.5rem 3.5rem #061d302e}.auth-card::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:#8dc3cf;border-radius:.55rem .55rem 0 0}.auth-card .mark{box-shadow:none}.auth-card h1{font-size:clamp(1.5rem,4vw,1.85rem);line-height:1.12;margin:.3rem 0 .65rem}.auth-card p{line-height:1.55}.auth-card button{width:100%;margin-top:.35rem}.auth-card small{line-height:1.5}.eyebrow{margin:0!important;color:var(--brand)!important;font-size:.72rem;font-weight:800;letter-spacing:.095em;text-transform:uppercase}.setup-card{width:min(34rem,100%)}.setup-list{margin:1rem 0 1.25rem;padding:0;list-style:none;display:grid;gap:.55rem}.setup-list li{position:relative;padding:.7rem .8rem .7rem 2.2rem;border:1px solid #ead2bc;border-radius:.35rem;background:#fff8f1;color:#804a12;font-size:.85rem;line-height:1.45}.setup-list li::before{content:"!";position:absolute;left:.75rem;top:.66rem;display:grid;place-items:center;width:1rem;height:1rem;border-radius:50%;background:#9a6410;color:#fff;font-size:.72rem;font-weight:800}
.onboarding{max-width:48rem;padding:clamp(1.5rem,4vw,2.5rem);background:#fff;border-left:4px solid #8dc3cf}.onboarding h2{font-size:clamp(1.25rem,3vw,1.65rem);margin:.4rem 0 .7rem}.onboarding .muted{max-width:38rem;line-height:1.65;margin-bottom:1.25rem}.onboarding .button{margin-top:.25rem}
.trend-panel{margin-top:1rem}.trend-bars{height:10rem;display:grid;grid-template-columns:repeat(12,minmax(1.3rem,1fr));gap:.65rem;align-items:end;padding:.9rem .25rem 0}.trend-bar{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.45rem;min-width:0}.trend-bar span{display:block;width:100%;min-height:3px;background:#39789e;border-radius:.18rem .18rem 0 0;transition:height .2s ease}.trend-bar small{color:var(--muted);font-size:.68rem}
@media(max-width:1020px){.sidebar{width:14rem}.main{margin-left:14rem}}@media(max-width:720px){.sidebar{width:auto;box-shadow:none}.main{margin:0;padding:1rem}.main header{padding-top:.5rem}.filter,.toolbar{border-radius:.4rem}.cards{gap:.7rem}table{font-size:.8rem}.auth-card{padding:1.65rem}}
.notice{margin:0 0 1rem;padding:.75rem .9rem;border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:.35rem;background:#fdf7ee;color:#7a5310;font-size:.85rem;font-weight:640}
.notice.danger{border-color:#e6c3bd;border-left-color:var(--danger);background:#fdf1ef;color:var(--danger)}

/* ==========================================================================
   RESPONSIVE ENHANCEMENTS: TABLET & MOBILE VIEWPORTS
   ========================================================================== */

/* Memastikan panel dan tabel dapat digeser horizontal dengan halus tanpa merusak layout */
.panel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.panel table {
  width: 100%;
}

/* TABLET BREAKPOINT (721px s.d. 1024px: iPad, Android Tablet) */
@media (min-width: 721px) and (max-width: 1024px) {
  .sidebar {
    width: 13.5rem !important;
    padding: 1.25rem 0.65rem !important;
  }
  .sidebar .brand {
    margin: 0 0.4rem 1.4rem !important;
  }
  .sidebar .brand b {
    font-size: 0.92rem !important;
  }
  .sidebar nav a {
    padding: 0.55rem 0.65rem !important;
    font-size: 0.84rem !important;
  }
  .profile {
    padding: 0.75rem 0.4rem !important;
  }
  .main {
    margin-left: 13.5rem !important;
    padding: 1.5rem 1.25rem 3rem !important;
    max-width: calc(100vw - 13.5rem) !important;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  table {
    min-width: 540px;
  }
  .toolbar, .filter {
    gap: 0.75rem;
  }
}

/* MOBILE SMARTPHONE BREAKPOINT (<= 720px: iPhone, Android, Layar HP) */
@media (max-width: 720px) {
  html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
  }

  /* Cegah auto-zoom pada Safari/iOS saat mengetik di input */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Navigasi mobile responsif */
  .sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 14px 10px !important;
    background: #123752 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
  }
  .sidebar .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 0 10px 0 !important;
  }
  .sidebar .brand b {
    font-size: 1.05rem !important;
  }
  .sidebar .brand small {
    display: inline-block !important;
    margin-left: 4px;
  }
  .sidebar nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 4px 2px 8px 2px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sidebar nav::-webkit-scrollbar {
    display: none;
  }
  .sidebar nav a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 6px 11px !important;
    font-size: 0.82rem !important;
    border-radius: 6px !important;
  }
  .profile {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 6px 0 0 0 !important;
    padding: 8px 6px 2px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    font-size: 0.8rem !important;
  }
  .profile b {
    color: #fff;
    font-size: 0.82rem;
  }
  .profile span {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: 6px;
  }
  .profile a {
    margin: 0 !important;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: #fff !important;
    text-decoration: none;
    font-size: 0.75rem;
  }

  /* Kontainer Utama */
  .main {
    margin: 0 !important;
    padding: 14px 12px 6rem 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
  }
  h1 {
    font-size: 1.35rem !important;
  }
  header p {
    font-size: 0.82rem !important;
  }
  .role-pill {
    align-self: flex-start !important;
  }

  /* Kartu Metrik */
  .cards {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  @media (min-width: 480px) and (max-width: 720px) {
    .cards {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  .cards article {
    padding: 14px 12px !important;
  }
  .cards article span {
    font-size: 0.8rem !important;
  }
  .cards article b {
    font-size: 1.3rem !important;
  }

  /* Grid & Panel */
  .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .panel {
    padding: 14px 12px !important;
    border-radius: 8px !important;
  }
  .panel-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .panel-title h2 {
    font-size: 0.98rem !important;
  }

  /* Tabel Responsif dengan scroll horizontal */
  table {
    min-width: 580px;
    font-size: 0.8rem !important;
  }
  th, td {
    padding: 8px 6px !important;
  }

  /* Toolbar & Filter */
  .toolbar, .filter {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .toolbar form, .filter form {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .toolbar form label, .filter form label {
    width: 100% !important;
  }
  .action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .action-row button, .action-row a.button {
    flex: 1 1 auto !important;
    text-align: center !important;
    padding: 8px 10px !important;
    font-size: 0.82rem !important;
  }

  /* Dialog & Modal */
  dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: auto !important;
    padding: 16px 14px !important;
    border-radius: 8px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .form {
    min-width: unset !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .two {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Tren Chart di Mobile */
  .trend-bars {
    height: 8rem !important;
    gap: 4px !important;
  }
  .trend-bar small {
    font-size: 0.6rem !important;
  }

  /* Notifikasi Feed */
  .alert-row {
    font-size: 0.82rem !important;
  }

  /* Intro Section */
  .intro {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* Pengelolaan pengguna tetap mudah digunakan pada layar kecil. */
.user-toolbar{margin-bottom:1rem;flex-wrap:wrap}.user-toolbar .muted{padding:0;margin-top:.3rem}.user-table-scroll{max-width:100%;overflow-x:auto}.user-table table{min-width:650px}.user-create{margin-top:1rem;scroll-margin-top:1rem}.user-create .form{max-width:38rem}.user-create input,.user-create select{width:100%;min-width:0}@media(max-width:720px){.user-toolbar{align-items:stretch;flex-direction:column}.user-toolbar .button{text-align:center}.user-table{padding:.75rem}.user-create{padding:1rem}.user-create button{width:100%}}