:root{
      --bg:#F0FDF4;
      --sidebar:#065F46;
      --sidebar-hover:#40916C;
      --primary:#10B981;
      --button:#10B981;
      --button-hover:#27642A;
      --border:#dbe2ea;
      --capt:#a7a7a7;
    }

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Raleway', sans-serif;
}

/* WARNA */
.red{
      color: red;
}

.red-bg{
      background-color: #fee2e2;;
}

.purple{
      color:#6d28d9;
}

.purple-bg{
      background:#ede9fe;
}

.blue{
      color: blue;
}

.blue-bg{
      background-color: #dbeafe;
}

.green{
      color: green;
}

.green-bg{
      background: #dcfce7;
}

.yellow{
      color: #d97706;
}

.yellow-bg{
      background: #fef3c7;
}

/* Style Login Page */
.body-login { 
      background:linear-gradient(
        135deg,
        var(--bg),
        var(--primary)
      );
      font-size: small;
}

.login {
      height: 100vh;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
}

/* CARD LOGIN */
.card {
      background: white;
      padding: 30px 30px 20px;
      border-radius: 15px;
      width: 100%;
      max-width:500px;
      text-align: center;
      position: relative;
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.logo {
      width: 150px;
      height: auto;
      margin-bottom: 15px;
}

.login-title{
      font-size: 28px;
      margin-top: 0;
      margin-bottom: 5px;
      margin: auto;
      font-weight: bold;
}

.system-title {
      font-size: 20px;
      margin-bottom: 5px;
      margin-top: 5px;
}

.caption {
      font-size: 16px;
      margin-top: 5px;
      margin-bottom: 10px;
      font-weight: 600;
}

/* INPUTAN LOGIN */
.input-group {
      margin-bottom: 15px;
      position: relative;
}

input {
      width: 90%;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      outline: none;
}

input::placeholder {
      color: var(--capt);
      font-size: 14px;
      font-weight: 500;
}

/* PASSWORD LOGIN */
.password {
      position: relative;
}

.toggle {
      position: absolute;
      right: 30px;
      top: 40%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      color: #666;
      cursor: pointer;
}

/* LINK LUPA PASSWORD LOGIN */
.addition {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 90%;
      margin: 10px auto;
}

.addition a {
      font-size: 14px;
      font-weight: 500;
      color: var(--primary);
      text-decoration: none;
}

.addition a:hover{
      color: var(--button);
      font-weight: 700;
}

/* BUTTON LOGIN */
.login-button {
      font-size: 14px;
      font-weight: 600;
      width: 100%;
      height: 50px;
      padding: 10px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin: 10px 0;
      transition: 0.3s ease;
}

.login-button:hover{
      background-color: var(--button);
      font-weight: 800;
}

.body-dashboard {
      display: flex;
      background-color: var(--bg);
      overflow-x: hidden;
}

/* SIDEBAR MENU */
.sidebar {
      background-color: var(--sidebar);
      width: 270px;
      height: 100vh;
      padding: 20px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: fixed;
      transform: translateX(0);
      transition: transform 0.3s ease;
}

.sidebar.hide{
      /* left: -270px; */
      transform: translateX(-270px);
}

/* MENU SIDEBAR */
.menu {
      display: flex;
      align-items: center;
      font-size: 24px;
      padding: 30px 30px 0 30px;
      margin: 0 20px;
}

.menu-title {
      display: flex;
      align-items: center;
      font-size: 24px;
      padding: 10px;
      color: white;
}

.logo-menu {
      width: 50px;
}

.nav-links{
      list-style-type: none;
      margin: 20px;
      padding: 0;
}

.menu-links {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 28px;
      cursor: pointer;
      transition: 0.3s;
      margin-bottom: 5px;
}

.nav-links a {
      text-decoration: none;
      color: white;
      font-size: 18px;
}

.menu-bottom {
      margin-bottom: 50px;
}

.menu-links:hover, .menu-links.active {
      background-color: var(--sidebar-hover);
      font-weight: bold;
      border-radius: 10px;
}

.menu-links:hover a, .menu-links:hover svg, .menu-links.active a, .menu-links.active svg {
      color: white;
}

/* TOPBAR MENU */
.topbar {
      position: sticky;
      top:0;
      z-index:999;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      padding: 16px 24px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
}

/* MENU HAMBURGER */
.hamburger{
      width: 45px;
      height: 45px;
      border: none;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
}

.hamburger svg{
      width: 24px;
      height: 24px;
      color: black;
}

/* ACCOUNT TOPBAR */
.account {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      background-color: white;
      border-radius: 10px;
      position: relative;
      width: fit-content; 
      cursor: pointer;
      width: 200px;
      position: relative;
}

.account-left {
      display: flex;
      align-items: center;
      gap: 8px;
}

.account-menu {
      display: flex;
      align-items: center;
      font-weight: 600;
      gap: 5px;
}

.account-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 200px;
      gap: 8px;
      padding: 12px 16px;
      border-radius: 10px;
}

.username {
      font-size: 16px;
      margin-left: 10px;
}

.chevron {
      width: 20px;
      height: 20px;
      transition: 0.3s;
}

/* DROPDOWN */
.dropdown {
      position: absolute;
      top: 50px;
      left: 0;
      padding:5px 10px ;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 0 0 10px 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      width: 100%;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: 0.3s;
      z-index: 99999;
}

.dropdown a {
      display: flex;
      padding: 10px 15px;
      text-decoration: none;
      color: #333;
      font-size: 14px;
      gap: 10px;
}

.dropdown svg{
      width:16px;
      height:16px;
}

.dropdown:hover {
      background-color: #f0f0f0;
}

.account.active .dropdown{
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
}

.account.active .chevron{
      transform: rotate(180deg);
}

/* MAIN CONTENT */
.content {
      /* width: calc(100% - 270px); */
      flex:1;
      margin-left: 270px;
      min-height: 100vh;
      transition: all 0.3s ease;
}

.content.full{
      /* width: 100%; */
      margin-left: 0;
      transition: all 0.3s ease;
}

.card-header-pass{
      display: flex;
      align-items: center;
      gap: 20px;
      justify-content: space-between;
      margin-bottom: 20px;
}

.card-header-top{
      display: flex;
      justify-content: space-between;
}

.card-header-top svg{
      text-decoration: none;
      color: black;
}

/* STYLE CARD INFO */
.card-section {
      display: flex;
      gap: 30px;
      margin: 20px 20px;
      align-items: stretch;
}

.card-info {
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items:flex-start;
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      flex: 1;
      min-width: 0;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card-logo {
      width: 40px;
      height: auto;
}

.card-header{
      display: flex;
      align-items: flex-start;
      gap: 12px;
}

.card-title {
      font-size: 14px;
      margin: 0;
      font-weight: 500;
}

.card-content{
      display: flex;
      flex-direction: column;
}

.card-value{
      /* display: flex; */
      font-size: 16px;
      font-weight: 700;
      /* line-height: 1; */
      margin-top: 4px;
}

.card-value span{
      font-size: 17px;
      font-weight: 700;
}

.card-capt {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      gap: 4px;
}

.card-capt h4{
      font-size: 15px;
}

.card-capt p{
      font-size: 12px;
      color: black;
}

.stats-icon{
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
}

.stats-icon svg{
      width: 28px;
}

/* SECTION DIBAWAH CARD */
.result-information {
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: flex-start;
      gap: 20px;
      flex-direction: row;
}

/* DUA TABEL SECTION */
.result-shortly {
      margin: 0 20px;
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      width: 100%;
      height: 100%;
}

.result-shortly.information {
      flex:1.6;
}

.result-shortly table {
      width: 100%;
      border: 1px solid #ccc;
      border-collapse: collapse;
}

.result-shortly th, .result-shortly td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
}

.result-shortly th {
      background-color: var(--primary);
      font-weight: bold;
      color: white;
}

/* JUDUL TABEL */
.table-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
}

.table-title{
      font-size: 18px;
      font-weight: bold;
}

.table-head a {
      font-size: 14px;
      color: var(--primary);
      text-decoration: none;
}

/* GRAFIK DASHBOARD KEPALA DESA */
.graph-information{
      margin: 0 20px;
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex:1;
}

.graph-information h3 {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
}

.graph {
      position: relative;
      width: 100%;
      height: 400px;
}

.graph canvas{
      width: 100%!important;
      height: 100%!important;
}

/* STYLE UPLOAD FILE */
.upload-section{
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 20px;
      margin: 20px;
      position:relative;
      z-index: 100;
}

.upload-info{
      background: white;
      padding: 15px 24px ;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
      height: 125px;
}

.upload-info h3{
      margin-left: 20px;
      margin-bottom: 5px;
}

.upload-box {
      background: white;
      display: flex;
      align-items: center;
      padding: 20px 30px;
      border: 2px dashed var(--primary);
      border-radius: 5px;
      justify-content: center;
      gap:10px;
      position:relative;
      z-index: 100;
}

.upload-box svg{
      width: 80px;
      height: 80px;
      color: var(--primary);
}

.upload-box p{
      color: black;
      margin: 5px 0 5px 5px;
}

.upload-capt{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
}

.upload-actions{
      display: flex;
      align-items: center;
      gap: 20px;
}

/* BUTTON TAMBAH DATA & UPLOAD FILE */
.add-data{
      padding: 12px 20px;
      border: none;
      background: var(--button);
      color: white;
      border-radius: 10px;
      cursor: pointer;
      transition: 0.3s ease;
      display: flex;
      align-items: center;
      gap:5px;
      text-decoration: none;
      white-space: nowrap;
}

.add-data:hover{
      background: var(--button-hover);
      font-weight: 700;
}

.add-data.cancel{
      color: var(--capt);
      background-color: rgb(228, 228, 228);
}

/* INFORMASI PENGUPLOADAN DATA */
.data-rules{
      padding: 0 20px;
}

.data-info-rules{
      font-size: 14px;
      color: black;
      margin: 5px 0;
      display: flex;
      align-items: center;
      gap: 5px;
}

.data-info-rules svg{
      width: 21px;
      height: 21px;
      color: var(--primary);
}

/* CARD TABLE */
.table-section{
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      margin: 20px;
      position: relative;
      z-index: 1;
}

.table-section p{
      font-size: 12px;
      color: var(--capt);
      margin-bottom: 10px;
}

/* AREA FILTER & SEARCH TABLE */
.table-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      position:relative;
      z-index: 1000;
}

.table-header.title{
      padding-left: 10px;
}

.table-header.kuota{
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
      padding-top: 10px;
}

.back-logo{
      text-decoration: none;
      color: black;
}

.filter-group{
      display: flex;
      align-items: center;
      gap: 16px;
      height: 50px;
}

.select-box{
      position: relative;
      display: flex;
      align-items: center;
      background: white;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0 14px;
      min-width: 240px;
      height: 50px;
      transition: 0.3s;
}

.select-box:hover{
      border-color: #19a6e6;
}

.select-box svg{
      width: 18px;
      color: #666;
}

.select-box select{
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background: transparent;
      padding: 0 12px;
      font-size: 14px;
      color: #333;
      appearance: none;
      cursor: pointer;
}

.arrow{
      pointer-events: none;
}

.table-header input{
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 5px;
      outline: none;
}

.table-header input{
      width: 300px;
}

.table-header button{
      padding: 12px 18px;
      border: none;
      background: #64a3de;
      color: white;
      border-radius: 10px;
      cursor: pointer;
}

.table-scroll{
      max-height:600px;
      overflow-y:auto;
}

/* STYLE TABLE */
table{
      width: 100%;
      border-collapse: collapse;
}

th{
      background: var(--primary);
      padding: 16px;
      text-align: left;
      color: white;
}

td{
      padding: 10px;
      border-bottom: 1px solid #eee;
}

/* CARD CRITERIA KEPALA DESA MELALUI TABLE */
.card-bobot-criteria{
      background: white;
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.08);
      margin: 20px;
}

.card-bobot-criteria h3{
      font-size: 20px;
      margin-bottom: 20px;
      color: black;
}

.criteria-item{
      width: 100%;
      border-collapse: collapse;
}

.criteria-item thead{
      display: none;
}

.criteria-item tbody{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
}

.criteria-item tr{
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
}

.criteria-item td{
      border: none;
      padding: 0;
}

.criteria-item td:nth-child(1){
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 5px;
      min-height: 40px;
}

.criteria-item td:nth-child(2){
      font-size: 19px;
      font-weight: 800;
      color: var(--primary);
}

/* BADGE PENANDA*/
.badge{
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
}

.badge svg{
      width: 18px;
      height: 18px;
      margin-right: 5px;
}

/* PAGINATION DESIGN */
.table-pagination{
      display:flex;
      justify-content:space-between;
      align-items: center;
      gap:5px;
      flex-wrap:wrap;
      margin-top: 5px;
      padding: 12px 12px 0;
}

.pagination-left p{
      font-size: 13px;
      margin-left: 10px;
}

.pagination-right{
      display: flex;
      align-items: center;
      gap: 5px;
}

.pagination-btn{
      width:42px;
      height:42px;
      border:none;
      cursor:pointer;
      background: white;
      border-radius: 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:0.2s ease;
}

.pagination-btn:hover{
      background:var(--primary);
      color: white;
}

.pagination-numbers{
      display:flex;
      align-items:center;
      gap:5px;
}

.page-item{
      width:42px;
      height:42px;
      border:none;
      border-radius:12px;
      background:var(--secondary);
      color:var(--text);
      display:flex;          /* tambahin */
      align-items:center;    /* tambahin */
      justify-content:center;/* tambahin */
      text-decoration:none; 
      font-size:14px;
      font-weight:600;
      cursor:pointer;
      transition:0.2s ease;
}

.page-item:hover{
      background:var(--primary);
      color: white;
}

.page-item.active{
      background:var(--primary);
      color:white;
}

/* MENU ATAS MAIN */
.top-menu{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px;
}

/* DESAIN FILTER */
.filter-box{
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 10px;
}

.filter-box label{
      font-size: 16px;
      font-weight: 500;
}

.select-box{
      width: 220px;
      height: 48px;
      border: 1px solid var(--border);
      border-radius: 12px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      background: white;
}

.select-box svg{
      width: 18px;
      color: #64748b;
}

.select-box select{
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background: transparent;
      padding-left: 10px;
      appearance: none;
      cursor: pointer;
}

/* DESAIN GRAFIK LAPORAN KEPALA DESA */
.chart-grid{
      display: grid;
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
      margin: 20px;
      gap: 20px;
      margin-bottom: 24px;
}

.chart-card{
      background: white;
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.04);
      min-width:0;
}

.chart-card h3{
      margin-bottom: 20px;
}

.small-chart{
      display: flex;
      flex-direction: column;
      align-items: center;
}

.small-chart canvas{
      max-width: 260px;
}

/* Style Filter DROPDOWN*/
.filter-dropdown{
      width: 280px;
      position: relative;
      z-index: 100;
      
}

.filter-dropdown.tahun{
      width: 170px;
}

.filter-dropdown.kuota{
      width: 100%;
}

.filter-btn{
      height: 45px;
      background: white;
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: 0.3s;
      font-size: 14px;
}

.filter-btn:hover{
      border-color: var(--primary);
}

.filter-left{
      display: flex;
      align-items: center;
      gap: 10px;
}

.filter-left span{
      font-size: 14px;
      color: #1e293b;
}

.filter-btn svg{
      width: 18px;
      height: 18px;
      color: black;
}

.filter-menu{
      position: absolute;
      top: calc(100% - 0px);
      left: 0;
      width: 100%;
      background: white;
      border-radius: 5px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: 0.3s;
      box-shadow: 0 10px 24px rgba(0,0,0,0.06);
      z-index: 9999;
      font-size: 14px;
}

.filter-item{
      padding: 14px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: 0.2s;
}

.filter-item:hover{
      background: #f0f0f0;
}

.filter-dropdown.active .filter-menu{
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      z-index: 99999;
}

.filter-dropdown.active .chevron{
      transform: rotate(180deg);
}

.header-left{
      display: flex;
      justify-content: flex-start;
      gap: 15px;
}

/* DESAIN INPUTAN SEARCH */
.search-group{
      position:relative;
      width:300px;
      display: flex;
      align-items: center;
}

.search-group input{
      width:100%;
      padding:14px 18px 14px 48px;
      border:1px solid var(--border);
      outline:none;
      font-family: 'Raleway', sans-serif;
}

.search-group svg{
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      width:18px;
      height:18px;
      color:var(--text-soft);
}

.filter-type{
      width: 200px;
      position: relative;
}

.filter-btn-type{
      height: 48px;
      background: white;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: 0.3s;
}

/* BADGE PENANDA */
.badge{
      display:inline-flex;
      align-items: center;
      padding:7px 12px;
      border-radius:999px;
      font-size:13px;
      font-weight:600;
      gap: 3px;
}

.badge svg{
      width: 18px;
      height: 18px;
}

/* DESAIN BOBOT */
.bobot{
      font-weight: 800;
      font-size: 18px;
}

/* BUTTON AKSI DI TABEL */
.actions{
      display:flex;
      gap:10px;
}

.action-btn{
      width:38px;
      height:38px;
      border:none;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:0.3s ease;
}

.action-btn svg{
      width:18px;
      height:18px;
}

.action-btn:hover{
      transform:translateY(-2px);
}

/* TOTAL BOBOT DI TABEL*/
.total-row{
      padding: 20px;
      font-weight: 700;
      text-align: center;
}

.total-row td{
      border: none;
}

.total-bobot p{
      text-align: left;
      font-size: 18px;
      color: black;
}

.total-bobot-capt p{
      font-size: 18px;
      color: black;
}

/* STYLE PERHITUNGAN ADMIN PHP */
.info-report{
      display: flex;
      justify-content: flex-start;
      gap: 20px;
}

.date-report{
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--border);
      padding: 5px 15px;
      border-radius: 10px;
}

.date-report svg{
      width: 18px;
      height: 18px;
}

.page-header{
      margin-bottom:28px;
}

.page-header h1{
      font-size:34px;
      margin-bottom:8px;
}

.page-header p{
      color:var(--text-soft);
}

/* FORM CARD */
.form-section{
      background:white;
      padding:32px;
      margin-top:15px;
      display:flex;
      flex-direction:column;
      gap:28px;
}

.form-card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:28px;
      padding:35px;
      min-width: 450px;
}

/* GRID FORM ADD DATA*/
.form-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:30px;
}

.form-grid.three{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:30px;
}

.form-grid.disabled{
      pointer-events: none;
      opacity: 0.5;

}

.full-width{
      grid-column:1 / -1;
}

/* FORM GROUP PER INPUTAN*/
.form-group{
      display:flex;
      flex-direction:column;
      gap:10px;
}

.form-group label, .radio-group label{
      font-size:14px;
      font-weight:600;
}

.form-group.radio{
      display: flex;
      flex-direction: row;
      align-content: center;
      gap: 20px;
}

/* INPUT DATA FORM*/
.input-wrapper{
      position:relative;
}

.input-wrapper svg{
      position:absolute;
      top:50%;
      left:16px;
      transform:translateY(-50%);
      width:18px;
      height:18px;
      color:var(--text-soft);
}

input,
select,
textarea{
      width:100%;
      border:1px solid var(--border);
      background:var(--input);
      border-radius:5px;
      padding:15px 18px;
      font-family:'Raleway', sans-serif;
      font-size:14px;
      outline:none;
      transition:0.3s ease;
}

.input-icon{
      padding-left:48px;
}

.upload-actions .input-wrapper{
      width:180px;
      flex-shrink:0;
}

.upload-wrapper .input-tahun svg{
      width: 18px;
      height:18px;
}

textarea{
      resize:none;
      min-height:120px;
}

input:focus,
select:focus,
textarea:focus{
      border-color:var(--primary);
      background:white;
}

/* RADIO OPTIONS TIPE KRITERIA*/
.radio-group{
      display:flex;
      flex-direction: column;
      gap:15px;
}

.radio-group > label:first-child{
      margin-bottom:4px;
}

.radio-option{
      display: flex;
      gap: 20px;
}

.radio-card{
      display:flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      transition:0.2s ease;
}

.radio-card:hover{
      border-color:var(--primary);
}

.radio-card input{
      display:none;
}

.custom-radio{
      width:18px;
      height:18px;
      border-radius:50%;
      border:2px solid #b5b5b5;
      position:relative;
      transition:0.2s ease;
}

.custom-radio::after{
      content:"";
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--primary);
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%) scale(0);
      transition:0.2s ease;
}

.radio-card input:checked + .custom-radio{
      border-color:var(--primary);
}

.radio-card input:checked + .custom-radio::after{
      transform:translate(-50%, -50%) scale(1);
}

.radio-text{
      font-weight: 400 !important;
}

.form-bottom{
      display: flex;
      justify-content: space-between;
}

/* BOBOT INFO DI ADD KRITERIA ADMIN*/
.bobot-info{
      margin-top:10px;
      background: var(--sidebar);
      border: 1px solid var(--sidebar);
      border-radius:14px;
      padding:14px 16px;
      display:flex;
      justify-content:flex-start;
      align-items:center;
      gap: 8px;
      width: 280px;
      color: white;
}

.bobot-info p{
      font-size:14px;
      font-weight: 500;
      margin:0;
      color: white;
}

.bobot-total{
      font-size:14px;
      font-weight:700;
}

/* BUTTON GROUP ADD DATA / BATAL*/
.button-group{
      margin-top:10px;
      display:flex;
      justify-content:flex-end;
      gap:16px;
}

/* MODAL DETAIL PERHITUNGAN */
.modal{
      display:none;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.4);
      justify-content:center;
      align-items:center;
      z-index:999;
}

.modal-content{
      background:white;
      width:800px;
      max-height:80vh;
      overflow:auto;
      border-radius:16px;
      padding:35px;
      font-size:14px;
}

.modal-header{
      display:flex;
      justify-content:space-between;
}

.modal-header h3{
      font-size:20px;
}

.modal-header button{
      border:none;
      background:transparent;
      font-size:18px;
      cursor:pointer;
}

.btn-detail{
      cursor:pointer;
}

.info-warga{
      padding:12px;
      border-radius:10px;
      margin-bottom:5px;
}

.form-section{
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 20px;
}

.form-row{
      display: flex;
      gap: 20px;
      width: 100%;
}

.form-group{
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
}

.form-group label{
      font-size: 14px;
      font-weight: 600;
      color: #374151;
}

.input-wrapper{
      position: relative;
}

.input-wrapper i{
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      color: #6b7280;
}

.input-icon{
      width: 100%;
      padding: 12px 14px 12px 45px;
      border: 1px solid #d1d5db;
      border-radius: 10px;
      font-size: 14px;
      outline: none;
      transition: .2s;
}

.input-icon:focus{
      border-color: var(--primary);
}

.button-group{
      display: flex;
      gap: 12px;
      margin-top: 10px;
}

.laporan-body{
      background: white;
      margin: 30px;
}

.container-laporan{
      max-width:1400px;
      margin:auto;
}

.header-laporan{
      display:flex;
      justify-content:space-between;
      align-items:center;
      border-bottom:2px solid #000;
      padding-bottom:20px;
      margin-bottom:35px;
}

.header-left-laporan{
      display:flex;
      align-items:center;
      gap:20px;
}

.header-left-laporan svg{
      width:70px;
      height:70px;
}

.header-left-laporan h2{
      font-size:18px;
      margin-bottom:5px;
}

.header-left-laporan p{
      font-size:12px;
}

.header-left-laporan img{
      width:50px;
      height:70px;
}

.header-right-laporan{
      text-align:right;
}

.header-right-laporan p{
      font-size:12px;
      margin-bottom: 5px;
}

.section-title-laporan{
      margin-bottom:10px;
      font-size:16px;
      font-weight:700;
}

.summary-laporan{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
      margin-bottom:30px;
}

.card-summary-laporan{
      border:1px solid #d6d6d6;
      border-radius:10px;
      padding:10px;
      text-align:center;
}

.card-summary-laporan p{
      font-size:14px;
      margin-bottom:10px;
}

.card-summary-laporan h2{
      font-size:16px;
      font-weight:700;
}

.table-laporan{
      width:100%;
      border-collapse:collapse;
      margin-top:15px;
      margin-bottom:20px;
}

.table-laporan th{
      background:#f1f9f6;
      font-size:12px;
      padding:10px;
      border:1px solid #ccc;
      color: black;
}

.table-laporan td{
      padding:10px;
      border:1px solid #ccc;
      font-size:12px;
}

.table-laporan td:first-child{
      text-align:center;
      width:70px;
}

.nominal{
      text-align:right;
      font-weight:600;
}

.signature{
      width:280px;
      margin-left:auto;
      margin-top:70px;
      text-align:center;
}

.signature p{
      margin-bottom:10px;
      font-size: 12px;
}

.space-sign{
      height:80px;
}

.line-sign{
      border-top:1px solid #000;
      margin-bottom:10px;
}

.empty-chart{
    height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.empty-chart svg{
    width: 50px;
    height: 50px;
    color: #94a3b8;
}

.empty-chart h4{
    margin: 10px 0;
    color: #475569;
}

.empty-chart p{
    color: #94a3b8;
    max-width: 250px;
    margin: 0;
}

.forgot-container{
    width:1000px;
    max-width:95%;
    height:600px;
    background:white;
    border-radius:24px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.forgot-image{
      background:var(--sidebar-hover);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
}

.forgot-image img{
    width:100%;
    max-width:400px;
}

.forgot-form{
    position:relative;
    padding:50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.back-btn{
    position:absolute;
    top:30px;
    left:30px;
    color:#111827;
}

.logo-forgot{
    width:120px;
    display:block;
    margin:0 auto 10px auto;
}

.forgot-form h2{
    margin:0;
    font-size:34px;
    font-weight:700;
    text-align: center;
}

.forgot-form p{
    color:#64748b;
    margin-top:15px;
    margin-bottom:30px;
}

.input-group{
    position:relative;
}

.input-group i{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    color:#94a3b8;
}

.input-group input{
    width:100%;
    box-sizing:border-box;
    height:55px;
    border:1px solid #dbe2ea;
    border-radius:12px;
    padding-left:50px;
    font-size:15px;
}

.input-group-area input{
      width:100%;
    box-sizing:border-box;
    border:1px solid #dbe2ea;
    border-radius:12px;
    font-size:15px;
    margin-bottom: 10px;
}

.input-group input::placeholder{
    color:#94a3b8;
}

/* button{
    width:100%;
    height:55px;
    margin-top:20px;
    border:none;
    border-radius:12px;
    background:#10b981;
    color:white;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
}

button:hover{
    background:#059669;
} */

/* Laptop 1366x768 */
@media (max-width: 1366px){
      .card{
            width: 430px;
            padding: 25px 25px 15px;
      }

      .logo{
            width: 120px;
            margin-bottom: 10px;
      }

      .login-title{
            font-size: 24px;
      }

      .system-title{
            font-size: 18px;
      }

      .caption{
            font-size: 14px;
      }

      input{
            padding: 10px;
      }

      input::placeholder{
            font-size: 13px;
      }

      .login-button{
            height: 45px;
            font-size: 13px;
      }

      .addition a{
            font-size: 13px;
      }

      .toggle{
            width: 18px;
            height: 18px;
      }

      /* Sidebar */
    .sidebar{
        width: 240px;
    }

    .sidebar.hide{
        left: -240px;
    }

    .content{
        margin-left: 240px;
    }

    /* Menu */
    .menu{
        padding: 20px;
        margin: 0 10px;
    }

    .menu-title{
        font-size: 20px;
    }
    .nav-links a{
        font-size: 16px;
    }

    .menu-links{
        padding: 12px 20px;
    }

    /* Topbar */
    .topbar{
        padding: 14px 20px;
    }

    .topbar h2{
        font-size: 22px;
    }

    .username{
        font-size: 14px;
    }

    /* Cards */
    .card-section{
        gap: 15px;
    }
    .card-info{
        padding: 15px;
    }

    .stats-icon{
        width: 50px;
        height: 50px;
    }

    .stats-icon svg{
        width: 22px;
    }

    .card-title{
        font-size: 16px;
    }

    .information-on-card p{
        font-size: 14px;
    }

    /* Tabel & Grafik */
    .result-information{
        gap: 15px;
    }

    .table-title,
    .graph-information h3{
        font-size: 16px;
    }

    .result-shortly th,
    .result-shortly td{
        padding: 8px;
        font-size: 13px;
    }

    .graph{
        height: 330px;
    }

    /* card tabel */
    .table-section{
        padding: 16px;
        margin: 16px;
    }

    /* area search + filter */
    .filter-group{
        gap: 10px;
        flex-wrap: wrap;
        height: auto;
    }

    .search-group{
        flex: 1;
        min-width: 250px;
    }

    .table-header input{
        width: 100%;
    }
    .filter-dropdown{
        width: 220px;
        flex-shrink: 0;
    }

    .input-wrapper svg{
      width:18px;
      height:18px;
    }

    /* table */
    th,
    td{
        padding: 12px 10px;
        font-size: 14px;
    }

    /* pagination */
    .pagination-left p{
        font-size: 12px;
    }

    .page-item,
    .pagination-btn{
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .card-bobot-criteria{
        padding: 24px;
    }

    .card-bobot-criteria h3{
        font-size: 18px;
    }

    .criteria-item tr{
        padding: 12px;
    }

    .criteria-item td:nth-child(1){
        font-size: 16px;
        min-height: 35px;
    }

    .criteria-item td:nth-child(2){
        font-size: 18px;
    }

    .upload-section{
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .upload-box{
        padding: 18px 20px;
    }

    .input-file-icon{
        width: 60px;
        height: 60px;
    }

    .upload-capt h3{
        font-size: 16px;
    }

    .upload-info{
        padding: 10px 20px;
        height: 115px;
    }

    .upload-info h3{
        margin-left: 0;
        font-size: 16px;
    }

    .data-rules{
        padding: 0;
    }

    .data-info-rules{
        font-size: 13px;
    }

    .upload-actions{
        gap: 12px;
    }

    .filter-dropdown.tahun{
        width: 150px;
    }

    .add-data{
        padding: 10px 16px;
        font-size: 14px;
    }

    .filter-btn svg{
      width:16px;
      height:16px;
    }
}