/* =======================
   GLOBAL
======================= */
body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: #F4F6FA;
    color: #1F2937;
}

/* =======================
   LOGIN
======================= */

.login-page {
    background: linear-gradient(to right, #5B6CF9, #4F46E5);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    text-align: center;
    color: white;
}

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

.login-card {
    background: white;
    padding: 35px;
    border-radius: 14px;
    width: 350px;
    margin: 20px auto;
    color: black;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.login-card input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
    font-size: 15px;
    transition: 0.2s;
}

.login-card input:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}

.login-card button {
    background: #4F46E5;
    color: white;
    padding: 12px;
    width: 100%;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

.login-card button:hover {
    background: #4338CA;
}

/* PASSWORD */
.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 45px;
}

.password-wrapper i {
    position: absolute;
    right: 15px;
    top: 40%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6B7280;
    font-size: 18px;
}

/* =======================
   LAYOUT
======================= */
.wrapper {
    display: flex;
}

/* =======================
   SIDEBAR
======================= */
.sidebar {
    width: 240px;
    height: 100vh;
    background: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    padding: 20px 15px;
    position: fixed;
}

.logo {
    display: flex;
    gap: 12px;
    margin-bottom: 35px;
    align-items: center;
}

.logo-img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.logo h3 {
    margin: 0;
    font-size: 24px;
}

.logo p {
    margin: 0;
    font-size: 13px;
    color: #6B7280;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin-bottom: 8px;
}

.sidebar a {
    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    color: #374151;

    padding: 14px 16px;
    border-radius: 10px;

    font-size: 16px;
    transition: 0.2s;
}

.sidebar a:hover {
    background: #EEF2FF;
    color: #4F46E5;
}

.sidebar .active a {
    background: #E0E7FF;
    color: #4338CA;
    font-weight: 600;
}

/* =======================
   MAIN
======================= */

/* =======================
   GLOBAL
======================= */
body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: #F4F6FA;
    color: #1F2937;
}

/* =======================
   LOGIN
======================= */

.login-page {
    background: linear-gradient(to right, #5B6CF9, #4F46E5);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    text-align: center;
    color: white;
}

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

.login-card {
    background: white;
    padding: 35px;
    border-radius: 14px;
    width: 350px;
    margin: 20px auto;
    color: black;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.login-card input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
    font-size: 15px;
    transition: 0.2s;
}

.login-card input:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}

.login-card button {
    background: #4F46E5;
    color: white;
    padding: 12px;
    width: 100%;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

.login-card button:hover {
    background: #4338CA;
}

/* PASSWORD */
.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 45px;
}

.password-wrapper i {
    position: absolute;
    right: 15px;
    top: 40%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6B7280;
    font-size: 18px;
}

/* =======================
   LAYOUT
======================= */
.wrapper {
    display: flex;
}

/* =======================
   SIDEBAR
======================= */
.sidebar {
    width: 240px;
    height: 100vh;
    background: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    padding: 20px 15px;
    position: fixed;
}

.logo {
    display: flex;
    gap: 12px;
    margin-bottom: 35px;
    align-items: center;
}

.logo-img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.logo h3 {
    margin: 0;
    font-size: 24px;
}

.logo p {
    margin: 0;
    font-size: 13px;
    color: #6B7280;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin-bottom: 8px;
}

.sidebar a {
    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    color: #374151;

    padding: 14px 16px;
    border-radius: 10px;

    font-size: 16px;
    transition: 0.2s;
}

.sidebar a:hover {
    background: #EEF2FF;
    color: #4F46E5;
}

.sidebar .active a {
    background: #E0E7FF;
    color: #4338CA;
    font-weight: 600;
}

/* =======================
   MAIN
======================= */
/* .main {
    flex: 1;
    margin-left: 270px;
    margin-left:260px;
} */

.main{

    margin-left:260px;

    width:calc(100% - 260px);

    min-height:100vh;

}


/* =======================
   NAVBAR
======================= */
/* .navbar{
    position: fixed;

    top: 0;
    left: 260px;
    right: 0;

    height: 76px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 24px;

    background: #fff;
    border-bottom: 1px solid #E5E7EB;

    box-sizing: border-box;
    z-index: 999;
} */

.navbar input {
    width: 320px;
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid #D1D5DB;
    font-size: 14px;
}

.navbar input:focus {
    outline: none;
    border-color: #4F46E5;
}

/* ==========================
   SEARCH BOX
========================== */

.search-box{
    position:relative;
    width:260px;
    margin-left:30px;
}

.search-box input{
    width:100%;
    height:10px;
    border:1px solid #dcdcdc;
    border-radius:14px;
    padding-left:50px;
    padding-right:15px;
    font-size:14px;
    outline:none;
    background:#fff;
}

.search-box i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    font-size:16px;
    color:#6b7280;
    z-index:10;
}

/* =======================
   Dashboard
======================= */

.dashboard-container {
    padding: 30px;
}

/* WELCOME */
.welcome-card {
    background: white;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    margin-bottom: 25px;
}

.welcome-card h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

.welcome-card p {
    margin-bottom: 10px;
    font-size: 16px;
}

.welcome-user {
    font-size: 16px;
    color: #333;

    display: flex;
    align-items: center;
    gap: 10px;
}

/* STATISTIK */
.statistik-wrapper {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
     width: 350px; /* ukuran card */

    border-radius: 10px;
    padding: 5px;

    color: white;
    text-align: center;

    min-height: 120px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* TITLE */
.stat-card h5 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
}

/* ANGKA */
.stat-card h2 {
    font-size: 36px;
    font-weight: bold;
}

.stat-card h5 {
    margin-bottom: 10px;
    font-weight: 500;
}

.stat-card h2 {
    font-size: 30px;
}

.blue {
    background: #4A86E8;
}

.green {
    background: #39FF14;
    color: white;
}

.red {
    background: #FF1E1E;
}

/* CHART */
.chart-card {
    background: white;
    border-radius: 8px;
    padding: 25px;
    border: 1px solid #e5e5e5;
    margin-bottom: 30px;
}

.chart-card h4 {
    margin-bottom: 20px;
    font-size: 20px;
}

#amiChart {
     width: 100% !important;
    height: 350px !important;
}



/* TABLE */
.table-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

.table-title {
    background: #6EA0E8;
    color: white;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-table th,
.dashboard-table td {
    padding: 15px;
    border: 1px solid #e5e5e5;
    text-align: left;
}

.dashboard-table th {
    background: #f8f8f8;
}

/* =======================
   PROFILE
======================= */
.profile-dropdown {
    position: relative;
}

.profile-icon {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #374151;
}

.profile-icon:hover {
    color: #4F46E5;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: 45px;
    background: white;
    border-radius: 12px;
    padding: 15px;
    width: 190px;
    display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
}

.user-name {
    font-weight: bold;
}

.user-role {
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 10px;
}

.btn-logout {
    width: 100%;
    padding: 10px;
    background: #EF4444;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* =======================
   CONTENT
======================= */
/* .content{
    padding:15px 40px;
} */

.content{

    margin-top:76px;

    padding:25px;

    overflow:auto;

}

.breadcrumb {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
}

/* =======================
   CARD
======================= */
.card {
    background: white;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h4 {
    margin: 0;
    font-size: 24px;
}

/* =======================
   BUTTON
======================= */
.btn-add {
    background: #4F46E5;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.2s;
}

.btn-add:hover {
    background: #4338CA;
}

/* =======================
   TABLE
======================= */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

thead {
    background: #EEF2FF;
}

th {
    padding: 16px;
    color: #374151;
    font-size: 15px;
}

td {
    padding: 18px;
    border-top: 1px solid #E5E7EB;
    text-align: center;
    font-size: 15px;
}

/* =======================
   ICON BUTTON
======================= */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 8px;
    margin-right: 5px;

    text-decoration: none;
    border: none;

    background: #F3F4F6;
    color: #4B5563;

    font-size: 15px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-icon:hover {
    transform: translateY(-1px);
}

.btn-detail {
    background: #E0F2FE;
    color: #0284C7;
}

.btn-edit {
    background: #FEF3C7;
    color: #CA8A04;
}

.btn-delete {
    background: #FEE2E2;
    color: #DC2626;
}

/* =======================
   FORM
======================= */
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.form-card {
    background: #fff;
    border-radius: 14px;
    padding: 40px;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.form-title {
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
}

/* =======================
   FORM BUTTON
======================= */
.form-action {
    margin-top: 25px;
    text-align: center;
}

.btn-save {
    background: #4F46E5;
    color: white;
    padding: 10px 25px;
    border-radius: 8px;
    border: none;
    margin-right: 10px;
    cursor: pointer;
}

.btn-cancel {
    background: #EF4444;
    color: white;
    padding: 10px 25px;
    border-radius: 8px;
    text-decoration: none;
}

/* =======================
   DELETE BOX
======================= */
.delete-box {
    margin: 40px auto;
    padding: 40px;
    width: 600px;
    background: linear-gradient(to right, #5B6CF9, #4F46E5);
    border-radius: 14px;
    text-align: center;
    color: white;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.delete-box h4 {
    margin-bottom: 30px;
}

.delete-action {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-delete-confirm {
    background: #EF4444;
    color: white;
    padding: 10px 30px;
    border-radius: 8px;
    border: none;
}

/*PERIODE AMI*/

/* TITLE */
.page-title {
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 600;
}

/* TABLE CARD */
.table-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

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

.periode-table th {
    background: #AFC4E8;
    padding: 15px;
    text-align: left;
    font-size: 14px;
}

.periode-table td {
    padding: 15px;
    border-top: 1px solid #eee;
    font-size: 14px;
}

/* STATUS */
.badge {
    padding: 5px 14px;
    border-radius: 5px;
    color: white;
    font-size: 12px;
}

.green {
    background: #39B54A;
}

.blue {
    background: #6EA8FE;
}

.red {
    background: #E53935;
}

/* HEADER BUTTON */
.periode-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 25px;
}

/* BUTTON */
.btn-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 6px;

    background: #dbe8ff;
    color: #3E73C1;

    text-decoration: none;
}

/*TAMBAH PERIODE AMI*/

/* FORM CARD */
.form-card {
    background: white;
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    max-width: 900px;
    margin: auto;
}

/* TITLE */
.form-title {
    text-align: center;
    margin-bottom: 40px;
}

/* GRID */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* GROUP */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
}

/* INPUT */
.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid #ddd;

    border-radius: 8px;

    font-size: 14px;
}

.form-group textarea {
    height: 80px;
}

/* DATE */
.date-wrapper {
    display: flex;
    gap: 20px;
}

/* RADIO */
.radio-group {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

/* BUTTON */
.form-action {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.btn-save {
    background: #4A63F0;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
}

.btn-cancel {
    background: red;
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
}

/* =========================
   FORM ISI STANDAR
========================= */

.isi-card{
    width: 75%;
    margin: 30px auto;
    padding: 50px 60px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
}

.form-title{
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 50px;
    color: #2d2d2d;
}

.form-group{
    margin-bottom: 40px;
}

.form-group label{
    display: block;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.form-group input{
    width: 100%;
    height: 55px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    padding: 0 18px;
    font-size: 16px;
    outline: none;
}

.form-group input:focus{
    border-color: #5b5ff5;
}

.form-action{
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 70px;
}

.btn-save{
    background: #4f46e5;
    color: white;
    border: none;
    padding: 14px 45px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

.btn-save:hover{
    background: #4338ca;
}

.btn-cancel{
    background: #ef4444;
    color: white;
    text-decoration: none;
    padding: 14px 45px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
}

.btn-cancel:hover{
    background: #dc2626;
}

/* =========================================
   FINAL KATEGORI STANDAR
========================================= */

.content-wrapper{
    padding: 30px;
}

/* breadcrumb */
.breadcrumb{
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #1f2937;
}

/* card */
.card{
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* header */
.kategori-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.kategori-header h4{
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

/* tambah button */
.btn-add{
    display: flex;
    align-items: center;
    gap: 10px;

    background: #4f46e5;
    color: white;

    padding: 14px 24px;

    border-radius: 10px;

    text-decoration: none;
    font-size: 15px;
    font-weight: 600;

    transition: 0.2s;
}

.btn-add:hover{
    background: #4338ca;
}

/* table */
.table-custom{
    width: 100%;
    border-collapse: collapse;
}

/* head */
.table-custom thead{
    background: #dbe7ff;
}

.table-custom thead th{
    padding: 18px;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
}

/* body */
.table-custom tbody td{
    padding: 18px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    font-size: 15px;
    color: #374151;
}

/* action */
.action-group{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* button action */
.btn-detail,
.btn-edit,
.btn-delete,
.btn-next{
    width: 42px;
    height: 42px;

    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-size: 15px;

    transition: 0.2s;
}

/* hover */
.btn-detail:hover,
.btn-edit:hover,
.btn-delete:hover,
.btn-next:hover{
    transform: translateY(-2px);
}

/* detail */
.btn-detail{
    background: #dbeafe;
    color: #2563eb;
}

/* edit */
.btn-edit{
    background: #fef3c7;
    color: #ca8a04;
}

/* delete */
.btn-delete{
    background: #fee2e2;
    color: #dc2626;
}

/* next */
.btn-next{
    background: #dcfce7;
    color: #16a34a;
}

/* empty */
.empty-data{
    padding: 30px;
    text-align: center;
    color: #6b7280;
    font-size: 15px;
}

/* =========================================
   FORM KATEGORI
========================================= */

.isi-card{
    width: 75%;
    margin: auto;

    padding: 50px 60px;

    background: white;

    border-radius: 16px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.form-title{
    text-align: center;
    margin-bottom: 45px;

    font-size: 28px;
    font-weight: 700;
    color: #111827;
}

.form-group{
    margin-bottom: 30px;
}

.form-group label{
    display: block;

    margin-bottom: 10px;

    font-size: 17px;
    font-weight: 600;

    color: #374151;
}

.form-group input{
    width: 100%;
    height: 55px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    padding: 0 18px;

    font-size: 15px;

    box-sizing: border-box;
}

.form-group input:focus{
    outline: none;
    border-color: #4f46e5;
}

/* action form */
.form-action{
    display: flex;
    justify-content: center;
    gap: 20px;

    margin-top: 50px;
}

/* save */
.btn-save{
    background: #4f46e5;
    color: white;

    border: none;

    padding: 13px 35px;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}

.btn-save:hover{
    background: #4338ca;
}

/* cancel */
.btn-cancel{
    background: #ef4444;
    color: white;

    text-decoration: none;

    padding: 13px 35px;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;
}

.btn-cancel:hover{
    background: #dc2626;
}

/* =========================================
   SHOW & DELETE
========================================= */

.detail-header{
    margin-bottom: 30px;
}

.detail-header h2{
    margin: 0;

    font-size: 28px;
    font-weight: 700;

    color: #111827;
}

/* delete box */
.delete-box{
    margin-top: 50px;
    text-align: center;
}

.delete-box h4{
    font-size: 22px;
    margin-bottom: 30px;
    color: #111827;
}

/* delete confirm */
.btn-delete-confirm{
    background: #ef4444;
    color: white;

    border: none;

    padding: 13px 35px;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}

.btn-delete-confirm:hover{
    background: #dc2626;
}

/* RAPIIKAN TOMBOL AKSI */

.action-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.action-buttons form{
    margin: 0;
}

.action-buttons .btn-icon{
    margin: 0;
}

/* =========================================
   TABLE SCROLL
========================================= */

.table-wrapper{
    width: 100%;
    overflow-x: auto;
}

/* table */
.custom-table{
    width: 100%;
    min-width: 1200px;
    border-collapse: collapse;
}

/* =========================================
   ACTION BUTTONS
========================================= */

.action-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* form */
.action-buttons form{
    margin: 0;
    padding: 0;
}

/* button */
.btn-icon{
    width: 42px;
    height: 42px;

    border-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: none;
    cursor: pointer;

    text-decoration: none;

    transition: 0.2s;
}

/* hover */
.btn-icon:hover{
    transform: translateY(-2px);
}

/* detail */
.btn-detail{
    background: #dbeafe;
    color: #2563eb;
}

/* edit */
.btn-edit{
    background: #fef3c7;
    color: #ca8a04;
}

/* delete */
.btn-delete{
    background: #fee2e2;
    color: #dc2626;
}

/* =========================================
   BADGE STATUS
========================================= */

.badge-berjalan,
.badge-draft,
.badge-ditutup{
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

/* berjalan */
.badge-berjalan{
    background: #dcfce7;
    color: #16a34a;
}

/* draft */
.badge-draft{
    background: #dbeafe;
    color: #2563eb;
}

/* ditutup */
.badge-ditutup{
    background: #fee2e2;
    color: #dc2626;
}

.status-wrapper{
    display:flex;
    gap:30px;
    margin-top:10px;
}

.status-item{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:15px;
    font-weight:500;
}

.status-item input[type="radio"]{
    width:16px;
    height:16px;
    margin:0;
    cursor:pointer;
}

/*edit periode AMI*/

.page-content{
    padding:30px;
}

.breadcrumb{
    font-size:14px;
    font-weight:600;
    color:#374151;
    margin-bottom:20px;
    padding-left:10px;
}

.card-form{
    width:900px;
    margin:auto;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:6px;
    padding:40px;
}

.card-form h2{
    text-align:center;
    margin-bottom:35px;
    font-size:28px;
    color:#1e293b;
}

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

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#334155;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:10px 14px;
    border:1px solid #d1d5db;
    border-radius:5px;
    font-size:14px;
}

.form-group textarea{
    resize:none;
}

.date-group{
    display:flex;
    gap:20px;
}

.date-group .form-group{
    flex:1;
}

.status-group{
    display:flex;
    align-items:center;
    gap:30px;
    margin-top:10px;
}

.status-option{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    color:#334155;
}

.status-option input[type="radio"]{
    width:16px;
    height:16px;
    margin:0;
    cursor:pointer;
}

.button-group{
    margin-top:35px;
    display:flex;
    justify-content:center;
    gap:25px;
}

.btn-save{
    background:#4f46e5;
    color:white;
    border:none;
    padding:12px 35px;
    border-radius:6px;
    cursor:pointer;
}

.btn-cancel{
    background:#ef4444;
    color:white;
    text-decoration:none;
    padding:12px 35px;
    border-radius:6px;
}

/* ==========================
   TAB MENU DETAIL PERIODE
========================== */

.tab-menu{
    display:flex;
    gap:30px;
    margin-bottom:20px;
}

.tab-menu a{
    text-decoration:none;
    color:#666;
    font-size:14px;
    padding-bottom:8px;
}

.tab-menu a.active{
    color:#2563eb;
    border-bottom:2px solid #2563eb;
    font-weight:600;
}

/* ==========================
   TABLE WRAPPER
========================== */

.table-wrapper{
    overflow-x:auto;
}

.custom-table{
    width:100%;
    min-width:1400px;
    border-collapse:collapse;
}

/* ==========================
   ACTION BUTTON
========================== */

.action-buttons{
    display:flex;
    gap:8px;
    justify-content:center;
}

.btn-icon{
    width:38px;
    height:38px;
    border:none;
    border-radius:8px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
}

.btn-detail{
    background:#dbeafe;
    color:#2563eb;
}

.btn-edit{
    background:#fef3c7;
    color:#ca8a04;
}

.btn-delete{
    background:#fee2e2;
    color:#dc2626;
}

/* ==========================
   BADGE STATUS
========================== */

.badge-berjalan{
    background:#dcfce7;
    color:#16a34a;
    padding:6px 12px;
    border-radius:6px;
}

.badge-draft{
    background:#dbeafe;
    color:#2563eb;
    padding:6px 12px;
    border-radius:6px;
}

.badge-ditutup{
    background:#fee2e2;
    color:#dc2626;
    padding:6px 12px;
    border-radius:6px;
}

/* ===================================
   EDIT PERIODE AMI FINAL
=================================== */

.edit-periode-card{
    width:760px;
    margin:auto;
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:4px;
    padding:40px;
}

.edit-periode-title{
    text-align:center;
    font-size:18px;
    font-weight:600;
    color:#374151;
    margin-bottom:35px;
}

.edit-periode-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.edit-group{
    margin-bottom:18px;
}

.edit-group label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:500;
    color:#374151;
}

.edit-group input,
.edit-group select,
.edit-group textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid #D1D5DB;
    border-radius:4px;
    font-size:14px;
    box-sizing:border-box;
}

.edit-group textarea{
    resize:none;
    min-height:80px;
}

.edit-date{
    display:flex;
    gap:15px;
}

.edit-date .edit-group{
    flex:1;
}

.edit-status{
    display:flex;
    width:100%;
}

.edit-status label{
    flex:1;
    border:1px solid #D1D5DB;
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0;
    cursor:pointer;
    font-size:14px;
}

.edit-action{
    margin-top:40px;
    display:flex;
    justify-content:center;
    gap:40px;
}

.edit-btn-save{
    background:#4F46E5;
    color:white;
    border:none;
    padding:10px 35px;
    border-radius:4px;
    cursor:pointer;
    font-weight:600;
}

.edit-btn-cancel{
    background:#EF4444;
    color:white;
    text-decoration:none;
    padding:10px 35px;
    border-radius:4px;
    font-weight:600;
}

/* =========================
   DELETE MODAL
========================= */

.delete-overlay{
    position:fixed;
    inset:0;
    background:rgba(70,130,255,.25);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999;
}

.delete-modal{
    width:550px;
    background:rgba(82,115,255,.9);
    padding:40px;
    border-radius:4px;
    text-align:center;
}

.delete-modal h3{
    color:#fff;
    font-size:24px;
    font-weight:600;
    margin-bottom:30px;
}

.delete-action{
    display:flex;
    justify-content:center;
    gap:40px;
}

.btn-batal{
    background:#4a49ff;
    color:white;
    text-decoration:none;
    padding:12px 40px;
    border-radius:2px;
    font-weight:600;
}

.btn-hapus{
    background:#ff2b2b;
    color:white;
    border:none;
    padding:12px 40px;
    border-radius:2px;
    cursor:pointer;
    font-weight:600;
}

/*
|--------------------------------------------------------------------------
| WELCOME CARD DASHBOARD AUDITEE
|--------------------------------------------------------------------------
*/

.welcome-card{
    background:#fff;
    padding:25px;
    border-radius:12px;
    margin-bottom:25px;
}


/*
|--------------------------------------------------------------------------
| DASHBOARD STATISTIC
|--------------------------------------------------------------------------
*/

.dashboard-stats{
    display:flex;
    gap:20px;
    margin-bottom:25px;
}

.stat-card{
    flex:1;
    color:#fff;
    padding:25px;
    border-radius:10px;
    text-align:center;
}

.stat-card h5{
    margin-bottom:10px;
}

.stat-card span{
    font-size:24px;
    font-weight:600;
}


/*
|--------------------------------------------------------------------------
| STATISTIC COLOR
|--------------------------------------------------------------------------
*/

.blue{
    background:#4A7DFF;
}

.green{
    background:#31E600;
}

.red{
    background:#F52525;
}


/*
|--------------------------------------------------------------------------
| CHART CARD
|--------------------------------------------------------------------------
*/

.chart-card{
    background:#fff;
    border-radius:12px;
    padding:25px;
    margin-bottom:25px;
}


/*
|--------------------------------------------------------------------------
| TABLE CARD
|--------------------------------------------------------------------------
*/

.table-card{
    background:#fff;
    padding:25px;
    border-radius:12px;
}

/* ====================================
   AUDITEE MENU
==================================== */

.menu-utama,
.menu-anak{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.menu-level-1,
.menu-level-2{
    display:none;
    list-style:none;
    padding:0;
}

.menu-level-1.show,
.menu-level-2.show{
    display:block;
}

.menu-level-1{
    margin-left:35px;
    margin-top:10px;
}

.menu-level-2{
    margin-left:25px;
    margin-top:8px;
}

.menu-level-2 li{
    margin:10px 0;
}

.menu-level-2 a{
    font-size:14px;
}

.menu-level-1 li,
.menu-level-2 li{
    list-style:none;
}

/* Submenu yang ada titik */
.menu-level-2 li a{
    font-size:16px;
    font-weight:400;
    color:#2d3748;
    line-height:1.6;
}

/* Audit AMI submenu */
.menu-level-1 li a{
    font-size:16px;
    font-weight:400;
    color:#2d3748;
    line-height:1.6;
}

/* .sidebar{
    width:260px;
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
} */

.sidebar::-webkit-scrollbar{
    width:6px;
}

.sidebar::-webkit-scrollbar-track{
    background:#f1f1f1;
}

.sidebar::-webkit-scrollbar-thumb{
    background:#c5c5c5;
    border-radius:10px;
}

.sidebar::-webkit-scrollbar-thumb:hover{
    background:#999;
}

.sidebar{
    width:300px;
    height:100vh;
    background:#fff;
    border-right:1px solid #e5e7eb;

    position:fixed;
    left:0;
    top:0;

    overflow-y:auto;
    overflow-x:hidden;

    padding-bottom:80px;
}

.main{
    margin-left:300px;
}

.form-card{
    width:900px;
    margin:auto;
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:10px;
    padding:40px;
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:10px;
    border:1px solid #D1D5DB;
    border-radius:4px;
}

.form-group textarea{
    min-height:80px;
}

.form-action{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:30px;
}

/* =====================================================
   HALAMAN DETAIL TIM AMI
===================================================== */

/* Judul halaman */
.page-title{
    font-size:24px;
    font-weight:600;
    margin-bottom:20px;
}

/* Card utama */
.detail-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

/* =====================================================
   TAB MENU
===================================================== */

.detail-tabs{
    display:flex;
    gap:40px;
    padding:0 25px;
    border-bottom:1px solid #e5e7eb;
    background:#fff;
}

.detail-tabs a{
    text-decoration:none;
    color:#6b7280;
    padding:18px 0;
    font-weight:500;
}

.detail-tabs a.active{
    color:#4f46e5;
    border-bottom:2px solid #4f46e5;
}

/* =====================================================
   CONTENT
===================================================== */

.content-area{
    padding:20px;
}

/* Header tabel */
.top-action{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

/* Dropdown periode */
.periode-filter{
    width:220px;
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
}

/* Tombol tambah */
.btn-tambah{
    background:#4f46e5;
    color:white;
    padding:12px 20px;
    border-radius:10px;
    text-decoration:none;
    font-weight:500;
}

.btn-tambah:hover{
    color:white;
}

/* =====================================================
   TABEL
===================================================== */

.custom-table{
    width:100%;
    border-collapse:collapse;
}

.custom-table thead{
    background:#eef2ff;
}

.custom-table th{
    padding:16px;
    text-align:center;
    font-weight:600;
}

.custom-table td{
    padding:16px;
    text-align:center;
    border-top:1px solid #eee;
}

/* =====================================================
   ACTION BUTTON
===================================================== */

.action-buttons{
    display:flex;
    justify-content:center;
    gap:8px;
}

.btn-detail,
.btn-edit,
.btn-delete{
    width:40px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:none;
    border-radius:8px;
    text-decoration:none;
    padding:0;
}

/* Detail */
.btn-detail{
    background:#dbeafe;
    color:#2563eb;
}

/* Edit */
.btn-edit{
    background:#fef3c7;
    color:#d97706;
}

/* Hapus */
.btn-delete{
    background:#fee2e2;
    color:#dc2626;
}

/* Data kosong */
.empty-data{
    text-align:center;
    color:#888;
    padding:30px;
}

/* Input dan Textarea */
.form-group input,
.form-group textarea,
.form-group select{

    width:100%;
    padding:12px 15px;
    border:1px solid #d1d5db;
    border-radius:8px;

    font-family:'Poppins', sans-serif;
    font-size:15px;
    font-weight:400;
    color:#1f2937;

    outline:none;
    box-sizing:border-box;
}

.form-group textarea{

    resize:vertical;
    min-height:120px;
}

/* =====================================
   DETAIL INDIKATOR
===================================== */

.detail-card{
    background:#fff;
    border-radius:18px;
    padding:35px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.detail-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.detail-header h2{
    margin:0;
    font-size:32px;
    font-weight:700;
    color:#23314d;
}

.detail-body{

    display:flex;
    flex-direction:column;
    gap:25px;

}

.detail-item{

    display:flex;
    flex-direction:column;

}

.detail-item label{

    font-size:14px;
    font-weight:600;
    color:#7c8aa5;

    margin-bottom:10px;

}

.detail-value{

    background:#F8FAFD;

    border:1px solid #E4E9F2;

    border-radius:12px;

    padding:18px 20px;

    font-size:16px;

    color:#2d3748;

    line-height:1.7;

}

.btn-back{

    background:#4F46E5;

    color:white;

    padding:11px 22px;

    border-radius:10px;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:8px;

    transition:.3s;

}

.btn-back:hover{

    background:#3730A3;

    color:white;

}

/*==================================================
    DETAIL standar mutu
===================================================*/

.detail-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.detail-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.detail-header h2{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:#23314d;

}

.detail-subtitle{

    margin-top:8px;

    color:#8b96a9;

    font-size:15px;

}

.detail-body{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.detail-item{

    display:flex;

    flex-direction:column;

}

.detail-item label{

    font-size:15px;

    font-weight:600;

    color:#5f6c82;

    margin-bottom:8px;

}

.detail-value{

    display:flex;

    align-items:center;

    gap:12px;

    background:#f8faff;

    border:1px solid #e5ebf5;

    border-radius:12px;

    padding:18px 22px;

    font-size:16px;

    color:#2d3748;

}

.detail-value i{

    color:#4F46E5;

    font-size:20px;

}

.btn-back{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 22px;

    border-radius:10px;

    background:#4F46E5;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.btn-back:hover{

    background:#3730A3;

    color:white;

}

/*======================================
    DETAIL isi standar
======================================*/

.detail-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.detail-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.detail-header h2{

    margin:0;

    color:#23314d;

    font-size:30px;

    font-weight:700;

}

.detail-subtitle{

    margin-top:8px;

    color:#8b96a9;

    font-size:15px;

}

.detail-body{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.detail-item{

    display:flex;

    flex-direction:column;

}

.detail-item label{

    margin-bottom:8px;

    font-weight:600;

    color:#6B7280;

    font-size:14px;

}

.detail-value{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 20px;

    border-radius:12px;

    border:1px solid #E6EBF5;

    background:#F8FAFD;

    font-size:16px;

    color:#23314d;

}

.detail-value i{

    color:#4F46E5;

    font-size:20px;

}

.btn-back{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#4F46E5;

    color:white;

    padding:11px 22px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

}

.btn-back:hover{

    background:#3730A3;

    color:white;

}

/*header*/

.periode-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.periode-header h4{

    margin:0;
    white-space:nowrap;

}

.btn-add{

    white-space:nowrap;

}

/* ===========================
   DETAIL PAGE
=========================== */

.detail-card{
    background:#fff;
    border-radius:22px;
    padding:34px 38px;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.detail-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:35px;
}

.detail-header h2{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#1F2D3D;
}

.detail-subtitle{
    margin-top:8px;
    color:#7D8CA3;
}

.detail-group{
    margin-bottom:25px;
}

.detail-group label{
    display:block;
    font-size:17px;
    font-weight:600;
    color:#334155;
    margin-bottom:10px;
}

.detail-box{
    background:#F6F8FC;
    border:1px solid #E5EAF4;
    border-radius:14px;
    padding:18px 22px;
    display:flex;
    align-items:center;
    gap:14px;
    font-size:17px;
}

.detail-box i{
    color:#4F46E5;
    font-size:20px;
}

.btn-back{
    background:#4F46E5;
    color:#fff;
    padding:12px 22px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
}

.btn-back:hover{
    color:#fff;
}

.btn-secondary{
    background:#E5E7EB;
    color:#374151;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
}

.btn-secondary:hover{
    background:#D1D5DB;
}

/* =========================================================
   TAB MENU AUDIT MUTU INTERNAL
========================================================= */

.tab-menu{
    display: flex;
    gap: 35px;
    margin-top: 18px;
    margin-bottom: 10px;
}

/* Link menu */

.tab-menu a{
    text-decoration: none;
    color: #444;
    font-size: 14px;
    padding-bottom: 10px;
    transition: .3s;
}

/* Hover */

.tab-menu a:hover{
    color: #4F46E5;
}

/* Menu aktif */

.tab-menu a.active{
    color: #4F46E5;
    font-weight: 600;
    border-bottom: 2px solid #4F46E5;
}


/* =========================================================
   STATUS TEMUAN
========================================================= */

/* Status OPEN */

.status-open{
    display: inline-block;
    background: #31C74A;
    color: white;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Status CLOSED */

.status-close{
    display: inline-block;
    background: #EF4444;
    color: white;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   TOMBOL TAMBAH TEMUAN
========================================================= */

.btn-add i{
    margin-right: 6px;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.action-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}


/* =========================================================
   CARD HEADER AUDIT
========================================================= */

.card-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


/* =========================================================
   JUDUL HALAMAN
========================================================= */

.card-header h3{
    margin-bottom: 20px;
    color: #1F2A44;
    font-weight: 700;
}

/* ==========================================================
   TEMUAN AUDIT
========================================================== */

/* Header */

.temuan-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

/* Tab Menu */

.temuan-tab{
    display:flex;
    gap:35px;
    border-bottom:1px solid #E5E7EB;
    margin-bottom:25px;
}

.temuan-tab a{
    text-decoration:none;
    color:#475569;
    font-size:14px;
    padding-bottom:10px;
    transition:.3s;
}

.temuan-tab a:hover{
    color:#4F46E5;
}

.temuan-tab a.active{
    color:#4F46E5;
    font-weight:600;
    border-bottom:2px solid #4F46E5;
}

/* Data Kosong */

.table-empty{
    text-align:center;
    padding:35px;
    color:#94A3B8;
    font-size:15px;
}

/* Badge Status */

.badge-open{
    background:#22C55E;
    color:#fff;
    padding:5px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.badge-close{
    background:#EF4444;
    color:#fff;
    padding:5px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.badge-draft{
    background:#FACC15;
    color:#fff;
    padding:5px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

/* ==========================================
   DETAIL TEMUAN AUDIT
========================================== */

.table-detail{

    width:100%;

    border-collapse:collapse;

}

.table-detail th{

    width:220px;

    background:#F8FAFC;

    padding:14px;

    text-align:left;

    border:1px solid #E5E7EB;

}

.table-detail td{

    padding:14px;

    border:1px solid #E5E7EB;

}

/* ==========================================================
   DETAIL TABLE
========================================================== */

.detail-table{

    width:100%;

    border-collapse:collapse;

}

.detail-table th{

    width:220px;

    background:#F8FAFC;

    padding:14px;

    text-align:left;

    border:1px solid #E5E7EB;

    font-weight:600;

}

.detail-table td{

    padding:14px;

    border:1px solid #E5E7EB;

}

/* ==========================================================
   SIDEBAR LOGOUT
========================================================== */

.logout-form{

    margin:0;

    width:100%;

}

.logout-btn{

    width:100%;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 20px;

    background:transparent;

    border:none;

    outline:none;

    color:#243b63;

    font-size:17px;

    font-weight:500;

    cursor:pointer;

    border-radius:10px;

    transition:.3s;

    font-family:inherit;

}

.logout-btn i{

    font-size:20px;

    width:22px;

}

.logout-btn:hover{

    background:#EEF2FF;

    color:#4F46E5;

}

.sidebar ul li.active .logout-btn{

    background:#EEF2FF;

    color:#4F46E5;

}

/* ======================================================
    LAPORAN INDEX
====================================================== */

.laporan-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

    border:1px solid #E5E7EB;

    border-radius:14px;

    margin-bottom:20px;

    transition:.3s;

    background:white;

}

.laporan-item:hover{

    box-shadow:0 8px 18px rgba(0,0,0,.06);

}

.laporan-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.laporan-icon{

    width:70px;

    height:70px;

    border-radius:16px;

    background:#EEF2FF;

    color:#4F46E5;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

}

.laporan-left h4{

    margin-bottom:8px;

}

.laporan-left p{

    margin:4px 0;

    color:#64748B;

}

.laporan-right{

    text-align:right;

}

.badge{

    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    font-size:13px;

    margin-bottom:15px;

}

.badge-success{

    background:#DCFCE7;

    color:#15803D;

}

.badge-warning{

    background:#FEF3C7;

    color:#B45309;

}

.badge-secondary{

    background:#E5E7EB;

    color:#374151;

}

.empty-state{

    text-align:center;

    padding:80px 20px;

}

.empty-state i{

    font-size:70px;

    color:#CBD5E1;

}

.empty-state h3{

    margin-top:20px;

}

.empty-state p{

    color:#64748B;

}

.laporan-subcard{

    border:1px solid #E5E7EB;

    border-radius:10px;

    padding:18px;

    margin-bottom:20px;

    background:#FCFCFD;

}

.summary-card span{

    display:block;

    margin-top:10px;

    color:#64748B;

    font-size:14px;

}

.cover table td{

    padding:8px;

}

.cover{

    border-top:8px solid #1E40AF;

}

.laporan-card{

    page-break-inside:avoid;

}

.badge-danger{

background:#FEE2E2;

color:#DC2626;

padding:6px 14px;

border-radius:30px;

font-size:13px;

}

.btn-link{

background:#2563EB;

color:white;

padding:8px 18px;

border-radius:8px;

text-decoration:none;

}

.kesimpulan-box{

display:flex;

gap:20px;

background:#F0FDF4;

padding:25px;

border-left:6px solid #16A34A;

border-radius:8px;

line-height:1.8;

}

.kesimpulan-box i{

font-size:28px;

color:#16A34A;

}

.button-group{

display:flex;

justify-content:center;

gap:20px;

margin-top:40px;

}

.btn-primary{

background:#DC2626;

color:white;

padding:12px 22px;

border-radius:8px;

text-decoration:none;

}

.btn-secondary{

background:#64748B;

color:white;

padding:12px 22px;

border-radius:8px;

text-decoration:none;

}

.card-title{

    font-size:36px;

    font-weight:700;

    color:#12284C;

    margin:0;

}

.form-footer{

    display:flex;

    justify-content:flex-end;

    margin-top:30px;

}

.btn-secondary{

    background:#4F46E5;

    color:#fff;

    padding:12px 28px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.btn-secondary:hover{

    background:#4338CA;

    color:#fff;

}


/* =======================
   NAVBAR
======================= */
.navbar{

    position:fixed;

    top:0;
    left:300px;

    width:calc(100% - 300px);

    height:76px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 24px;

    background:#fff;

    border-bottom:1px solid #E5E7EB;

    box-sizing:border-box;

    z-index:999;
}

.logo-text{
    display:flex;
    flex-direction:column;
}



.logo-text small{
    font-size:14px;
    line-height:1.5;
}

.navbar input {
    width: 320px;
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid #D1D5DB;
    font-size: 14px;
}

.navbar input:focus {
    outline: none;
    border-color: #4F46E5;
}

/* ==========================
   SEARCH BOX
========================== */

.search-box{
    position:relative;
    width:260px;
    margin-left:30px;
}

.search-box input{
    width:100%;
    height:10px;
    border:1px solid #dcdcdc;
    border-radius:14px;
    padding-left:50px;
    padding-right:15px;
    font-size:14px;
    outline:none;
    background:#fff;
}

.search-box i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    font-size:16px;
    color:#6b7280;
    z-index:10;
}

/* =======================
   Dashboard
======================= */

.dashboard-container {
    padding: 30px;
}

/* WELCOME */
.welcome-card {
    background: white;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    margin-bottom: 25px;
}

.welcome-card h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

.welcome-card p {
    margin-bottom: 10px;
    font-size: 16px;
}

.welcome-user {
    font-size: 16px;
    color: #333;

    display: flex;
    align-items: center;
    gap: 10px;
}

/* STATISTIK */
.statistik-wrapper {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
     width: 350px; /* ukuran card */

    border-radius: 10px;
    padding: 5px;

    color: white;
    text-align: center;

    min-height: 120px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* TITLE */
.stat-card h5 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
}

/* ANGKA */
.stat-card h2 {
    font-size: 36px;
    font-weight: bold;
}

.stat-card h5 {
    margin-bottom: 10px;
    font-weight: 500;
}

.stat-card h2 {
    font-size: 30px;
}

.blue {
    background: #4A86E8;
}

.green {
    background: #39FF14;
    color: white;
}

.red {
    background: #FF1E1E;
}

/* CHART */
.chart-card {
    background: white;
    border-radius: 8px;
    padding: 25px;
    border: 1px solid #e5e5e5;
    margin-bottom: 30px;
}

.chart-card h4 {
    margin-bottom: 20px;
    font-size: 20px;
}

#amiChart {
     width: 100% !important;
    height: 350px !important;
}



/* TABLE */
.table-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

.table-title {
    background: #6EA0E8;
    color: white;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-table th,
.dashboard-table td {
    padding: 15px;
    border: 1px solid #e5e5e5;
    text-align: left;
}

.dashboard-table th {
    background: #f8f8f8;
}

/* =======================
   PROFILE
======================= */
.profile-dropdown {
    position: relative;
}

.profile-icon {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #374151;
}

.profile-icon:hover {
    color: #4F46E5;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: 45px;
    background: white;
    border-radius: 12px;
    padding: 15px;
    width: 190px;
    display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
}

.user-name {
    font-weight: bold;
}

.user-role {
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 10px;
}

.btn-logout {
    width: 100%;
    padding: 10px;
    background: #EF4444;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* =======================
   CONTENT
======================= */
/* .content{
    padding:15px 40px;
} */

.content{

    flex:1;

    margin-top:76px;

    overflow:auto;

    padding:20px;

    box-sizing:border-box;

}

.breadcrumb {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
}

/* =======================
   CARD
======================= */
.card {
    background: white;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h4 {
    margin: 0;
    font-size: 24px;
}

/* =======================
   BUTTON
======================= */
.btn-add {
    background: #4F46E5;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.2s;
}

.btn-add:hover {
    background: #4338CA;
}

/* =======================
   TABLE
======================= */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

thead {
    background: #EEF2FF;
}

th {
    padding: 16px;
    color: #374151;
    font-size: 15px;
}

td {
    padding: 18px;
    border-top: 1px solid #E5E7EB;
    text-align: center;
    font-size: 15px;
}

/* =======================
   ICON BUTTON
======================= */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 8px;
    margin-right: 5px;

    text-decoration: none;
    border: none;

    background: #F3F4F6;
    color: #4B5563;

    font-size: 15px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-icon:hover {
    transform: translateY(-1px);
}

.btn-detail {
    background: #E0F2FE;
    color: #0284C7;
}

.btn-edit {
    background: #FEF3C7;
    color: #CA8A04;
}

.btn-delete {
    background: #FEE2E2;
    color: #DC2626;
}

/* =======================
   FORM
======================= */
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.form-card {
    background: #fff;
    border-radius: 14px;
    padding: 40px;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.form-title {
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
}

/* =======================
   FORM BUTTON
======================= */
.form-action {
    margin-top: 25px;
    text-align: center;
}

.btn-save {
    background: #4F46E5;
    color: white;
    padding: 10px 25px;
    border-radius: 8px;
    border: none;
    margin-right: 10px;
    cursor: pointer;
}

.btn-cancel {
    background: #EF4444;
    color: white;
    padding: 10px 25px;
    border-radius: 8px;
    text-decoration: none;
}

/* =======================
   DELETE BOX
======================= */
.delete-box {
    margin: 40px auto;
    padding: 40px;
    width: 600px;
    background: linear-gradient(to right, #5B6CF9, #4F46E5);
    border-radius: 14px;
    text-align: center;
    color: white;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.delete-box h4 {
    margin-bottom: 30px;
}

.delete-action {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-delete-confirm {
    background: #EF4444;
    color: white;
    padding: 10px 30px;
    border-radius: 8px;
    border: none;
}

/*PERIODE AMI*/

/* TITLE */
.page-title {
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 600;
}

/* TABLE CARD */
.table-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

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

.periode-table th {
    background: #AFC4E8;
    padding: 15px;
    text-align: left;
    font-size: 14px;
}

.periode-table td {
    padding: 15px;
    border-top: 1px solid #eee;
    font-size: 14px;
}

/* STATUS */
.badge {
    padding: 5px 14px;
    border-radius: 5px;
    color: white;
    font-size: 12px;
}

.green {
    background: #39B54A;
}

.blue {
    background: #6EA8FE;
}

.red {
    background: #E53935;
}

/* HEADER BUTTON */
.periode-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 25px;
}

/* BUTTON */
.btn-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 6px;

    background: #dbe8ff;
    color: #3E73C1;

    text-decoration: none;
}

/*TAMBAH PERIODE AMI*/

/* FORM CARD */
.form-card {
    background: white;
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    max-width: 900px;
    margin: auto;
}

/* TITLE */
.form-title {
    text-align: center;
    margin-bottom: 40px;
}

/* GRID */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* GROUP */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
}

/* INPUT */
.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid #ddd;

    border-radius: 8px;

    font-size: 14px;
}

.form-group textarea {
    height: 80px;
}

/* DATE */
.date-wrapper {
    display: flex;
    gap: 20px;
}

/* RADIO */
.radio-group {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

/* BUTTON */
.form-action {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.btn-save {
    background: #4A63F0;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
}

.btn-cancel {
    background: red;
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
}

/* =========================
   FORM ISI STANDAR
========================= */

.isi-card{
    width: 75%;
    margin: 30px auto;
    padding: 50px 60px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
}

.form-title{
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 50px;
    color: #2d2d2d;
}

.form-group{
    margin-bottom: 40px;
}

.form-group label{
    display: block;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.form-group input{
    width: 100%;
    height: 55px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    padding: 0 18px;
    font-size: 16px;
    outline: none;
}

.form-group input:focus{
    border-color: #5b5ff5;
}

.form-action{
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 70px;
}

.btn-save{
    background: #4f46e5;
    color: white;
    border: none;
    padding: 14px 45px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

.btn-save:hover{
    background: #4338ca;
}

.btn-cancel{
    background: #ef4444;
    color: white;
    text-decoration: none;
    padding: 14px 45px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
}

.btn-cancel:hover{
    background: #dc2626;
}

/* =========================================
   FINAL KATEGORI STANDAR
========================================= */

.content-wrapper{
    padding: 30px;
}

/* breadcrumb */
.breadcrumb{
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #1f2937;
}

/* card */
.card{
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* header */
.kategori-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.kategori-header h4{
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

/* tambah button */
.btn-add{
    display: flex;
    align-items: center;
    gap: 10px;

    background: #4f46e5;
    color: white;

    padding: 14px 24px;

    border-radius: 10px;

    text-decoration: none;
    font-size: 15px;
    font-weight: 600;

    transition: 0.2s;
}

.btn-add:hover{
    background: #4338ca;
}

/* table */
.table-custom{
    width: 100%;
    border-collapse: collapse;
}

/* head */
.table-custom thead{
    background: #dbe7ff;
}

.table-custom thead th{
    padding: 18px;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
}

/* body */
.table-custom tbody td{
    padding: 18px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    font-size: 15px;
    color: #374151;
}

/* action */
.action-group{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* button action */
.btn-detail,
.btn-edit,
.btn-delete,
.btn-next{
    width: 42px;
    height: 42px;

    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-size: 15px;

    transition: 0.2s;
}

/* hover */
.btn-detail:hover,
.btn-edit:hover,
.btn-delete:hover,
.btn-next:hover{
    transform: translateY(-2px);
}

/* detail */
.btn-detail{
    background: #dbeafe;
    color: #2563eb;
}

/* edit */
.btn-edit{
    background: #fef3c7;
    color: #ca8a04;
}

/* delete */
.btn-delete{
    background: #fee2e2;
    color: #dc2626;
}

/* next */
.btn-next{
    background: #dcfce7;
    color: #16a34a;
}

/* empty */
.empty-data{
    padding: 30px;
    text-align: center;
    color: #6b7280;
    font-size: 15px;
}

/* =========================================
   FORM KATEGORI
========================================= */

.isi-card{
    width: 75%;
    margin: auto;

    padding: 50px 60px;

    background: white;

    border-radius: 16px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.form-title{
    text-align: center;
    margin-bottom: 45px;

    font-size: 28px;
    font-weight: 700;
    color: #111827;
}

.form-group{
    margin-bottom: 30px;
}

.form-group label{
    display: block;

    margin-bottom: 10px;

    font-size: 17px;
    font-weight: 600;

    color: #374151;
}

.form-group input{
    width: 100%;
    height: 55px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    padding: 0 18px;

    font-size: 15px;

    box-sizing: border-box;
}

.form-group input:focus{
    outline: none;
    border-color: #4f46e5;
}

/* action form */
.form-action{
    display: flex;
    justify-content: center;
    gap: 20px;

    margin-top: 50px;
}

/* save */
.btn-save{
    background: #4f46e5;
    color: white;

    border: none;

    padding: 13px 35px;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}

.btn-save:hover{
    background: #4338ca;
}

/* cancel */
.btn-cancel{
    background: #ef4444;
    color: white;

    text-decoration: none;

    padding: 13px 35px;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;
}

.btn-cancel:hover{
    background: #dc2626;
}

/* =========================================
   SHOW & DELETE
========================================= */

.detail-header{
    margin-bottom: 30px;
}

.detail-header h2{
    margin: 0;

    font-size: 28px;
    font-weight: 700;

    color: #111827;
}

/* delete box */
.delete-box{
    margin-top: 50px;
    text-align: center;
}

.delete-box h4{
    font-size: 22px;
    margin-bottom: 30px;
    color: #111827;
}

/* delete confirm */
.btn-delete-confirm{
    background: #ef4444;
    color: white;

    border: none;

    padding: 13px 35px;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}

.btn-delete-confirm:hover{
    background: #dc2626;
}

/* RAPIIKAN TOMBOL AKSI */

.action-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.action-buttons form{
    margin: 0;
}

.action-buttons .btn-icon{
    margin: 0;
}

/* =========================================
   TABLE SCROLL
========================================= */

.table-wrapper{
    width: 100%;
    overflow-x: auto;
}

/* table */
.custom-table{
    width: 100%;
    min-width: 1200px;
    border-collapse: collapse;
}

/* =========================================
   ACTION BUTTONS
========================================= */

.action-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* form */
.action-buttons form{
    margin: 0;
    padding: 0;
}

/* button */
.btn-icon{
    width: 42px;
    height: 42px;

    border-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: none;
    cursor: pointer;

    text-decoration: none;

    transition: 0.2s;
}

/* hover */
.btn-icon:hover{
    transform: translateY(-2px);
}

/* detail */
.btn-detail{
    background: #dbeafe;
    color: #2563eb;
}

/* edit */
.btn-edit{
    background: #fef3c7;
    color: #ca8a04;
}

/* delete */
.btn-delete{
    background: #fee2e2;
    color: #dc2626;
}

/* =========================================
   BADGE STATUS
========================================= */

.badge-berjalan,
.badge-draft,
.badge-ditutup{
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

/* berjalan */
.badge-berjalan{
    background: #dcfce7;
    color: #16a34a;
}

/* draft */
.badge-draft{
    background: #dbeafe;
    color: #2563eb;
}

/* ditutup */
.badge-ditutup{
    background: #fee2e2;
    color: #dc2626;
}

.status-wrapper{
    display:flex;
    gap:30px;
    margin-top:10px;
}

.status-item{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:15px;
    font-weight:500;
}

.status-item input[type="radio"]{
    width:16px;
    height:16px;
    margin:0;
    cursor:pointer;
}

/*edit periode AMI*/

.page-content{
    padding:30px;
}

.breadcrumb{
    font-size:14px;
    font-weight:600;
    color:#374151;
    margin-bottom:20px;
    padding-left:10px;
}

.card-form{
    width:900px;
    margin:auto;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:6px;
    padding:40px;
}

.card-form h2{
    text-align:center;
    margin-bottom:35px;
    font-size:28px;
    color:#1e293b;
}

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

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#334155;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:10px 14px;
    border:1px solid #d1d5db;
    border-radius:5px;
    font-size:14px;
}

.form-group textarea{
    resize:none;
}

.date-group{
    display:flex;
    gap:20px;
}

.date-group .form-group{
    flex:1;
}

.status-group{
    display:flex;
    align-items:center;
    gap:30px;
    margin-top:10px;
}

.status-option{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    color:#334155;
}

.status-option input[type="radio"]{
    width:16px;
    height:16px;
    margin:0;
    cursor:pointer;
}

.button-group{
    margin-top:35px;
    display:flex;
    justify-content:center;
    gap:25px;
}

.btn-save{
    background:#4f46e5;
    color:white;
    border:none;
    padding:12px 35px;
    border-radius:6px;
    cursor:pointer;
}

.btn-cancel{
    background:#ef4444;
    color:white;
    text-decoration:none;
    padding:12px 35px;
    border-radius:6px;
}

/* ==========================
   TAB MENU DETAIL PERIODE
========================== */

.tab-menu{
    display:flex;
    gap:30px;
    margin-bottom:20px;
}

.tab-menu a{
    text-decoration:none;
    color:#666;
    font-size:14px;
    padding-bottom:8px;
}

.tab-menu a.active{
    color:#2563eb;
    border-bottom:2px solid #2563eb;
    font-weight:600;
}

/* ==========================
   TABLE WRAPPER
========================== */

.table-wrapper{
    overflow-x:auto;
}

.custom-table{
    width:100%;
    min-width:1400px;
    border-collapse:collapse;
}

/* ==========================
   ACTION BUTTON
========================== */

.action-buttons{
    display:flex;
    gap:8px;
    justify-content:center;
}

.btn-icon{
    width:38px;
    height:38px;
    border:none;
    border-radius:8px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
}

.btn-detail{
    background:#dbeafe;
    color:#2563eb;
}

.btn-edit{
    background:#fef3c7;
    color:#ca8a04;
}

.btn-delete{
    background:#fee2e2;
    color:#dc2626;
}

/* ==========================
   BADGE STATUS
========================== */

.badge-berjalan{
    background:#dcfce7;
    color:#16a34a;
    padding:6px 12px;
    border-radius:6px;
}

.badge-draft{
    background:#dbeafe;
    color:#2563eb;
    padding:6px 12px;
    border-radius:6px;
}

.badge-ditutup{
    background:#fee2e2;
    color:#dc2626;
    padding:6px 12px;
    border-radius:6px;
}

/* ===================================
   EDIT PERIODE AMI FINAL
=================================== */

.edit-periode-card{
    width:760px;
    margin:auto;
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:4px;
    padding:40px;
}

.edit-periode-title{
    text-align:center;
    font-size:18px;
    font-weight:600;
    color:#374151;
    margin-bottom:35px;
}

.edit-periode-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.edit-group{
    margin-bottom:18px;
}

.edit-group label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:500;
    color:#374151;
}

.edit-group input,
.edit-group select,
.edit-group textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid #D1D5DB;
    border-radius:4px;
    font-size:14px;
    box-sizing:border-box;
}

.edit-group textarea{
    resize:none;
    min-height:80px;
}

.edit-date{
    display:flex;
    gap:15px;
}

.edit-date .edit-group{
    flex:1;
}

.edit-status{
    display:flex;
    width:100%;
}

.edit-status label{
    flex:1;
    border:1px solid #D1D5DB;
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0;
    cursor:pointer;
    font-size:14px;
}

.edit-action{
    margin-top:40px;
    display:flex;
    justify-content:center;
    gap:40px;
}

.edit-btn-save{
    background:#4F46E5;
    color:white;
    border:none;
    padding:10px 35px;
    border-radius:4px;
    cursor:pointer;
    font-weight:600;
}

.edit-btn-cancel{
    background:#EF4444;
    color:white;
    text-decoration:none;
    padding:10px 35px;
    border-radius:4px;
    font-weight:600;
}

/* =========================
   DELETE MODAL
========================= */

.delete-overlay{
    position:fixed;
    inset:0;
    background:rgba(70,130,255,.25);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999;
}

.delete-modal{
    width:550px;
    background:rgba(82,115,255,.9);
    padding:40px;
    border-radius:4px;
    text-align:center;
}

.delete-modal h3{
    color:#fff;
    font-size:24px;
    font-weight:600;
    margin-bottom:30px;
}

.delete-action{
    display:flex;
    justify-content:center;
    gap:40px;
}

.btn-batal{
    background:#4a49ff;
    color:white;
    text-decoration:none;
    padding:12px 40px;
    border-radius:2px;
    font-weight:600;
}

.btn-hapus{
    background:#ff2b2b;
    color:white;
    border:none;
    padding:12px 40px;
    border-radius:2px;
    cursor:pointer;
    font-weight:600;
}

/*
|--------------------------------------------------------------------------
| WELCOME CARD DASHBOARD AUDITEE
|--------------------------------------------------------------------------
*/

.welcome-card{
    background:#fff;
    padding:25px;
    border-radius:12px;
    margin-bottom:25px;
}


/*
|--------------------------------------------------------------------------
| DASHBOARD STATISTIC
|--------------------------------------------------------------------------
*/

.dashboard-stats{
    display:flex;
    gap:20px;
    margin-bottom:25px;
}

.stat-card{
    flex:1;
    color:#fff;
    padding:25px;
    border-radius:10px;
    text-align:center;
}

.stat-card h5{
    margin-bottom:10px;
}

.stat-card span{
    font-size:24px;
    font-weight:600;
}


/*
|--------------------------------------------------------------------------
| STATISTIC COLOR
|--------------------------------------------------------------------------
*/

.blue{
    background:#4A7DFF;
}

.green{
    background:#31E600;
}

.red{
    background:#F52525;
}


/*
|--------------------------------------------------------------------------
| CHART CARD
|--------------------------------------------------------------------------
*/

.chart-card{
    background:#fff;
    border-radius:12px;
    padding:25px;
    margin-bottom:25px;
}


/*
|--------------------------------------------------------------------------
| TABLE CARD
|--------------------------------------------------------------------------
*/

.table-card{
    background:#fff;
    padding:25px;
    border-radius:12px;
}

/* ====================================
   AUDITEE MENU
==================================== */

.menu-utama,
.menu-anak{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.menu-level-1,
.menu-level-2{
    display:none;
    list-style:none;
    padding:0;
}

.menu-level-1.show,
.menu-level-2.show{
    display:block;
}

.menu-level-1{
    margin-left:35px;
    margin-top:10px;
}

.menu-level-2{
    margin-left:25px;
    margin-top:8px;
}

.menu-level-2 li{
    margin:10px 0;
}

.menu-level-2 a{
    font-size:14px;
}

.menu-level-1 li,
.menu-level-2 li{
    list-style:none;
}

/* Submenu yang ada titik */
.menu-level-2 li a{
    font-size:16px;
    font-weight:400;
    color:#2d3748;
    line-height:1.6;
}

/* Audit AMI submenu */
.menu-level-1 li a{
    font-size:16px;
    font-weight:400;
    color:#2d3748;
    line-height:1.6;
}

/* .sidebar{
    width:260px;
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
} */

.sidebar{
    position: fixed;
    top:0;
    left:0;

    width:260px;
    height:100vh;

    padding:20px 15px;

    box-sizing:border-box;

    background:#fff;
    border-right:1px solid #E5E7EB;

    overflow-y:auto;
    overflow-x:hidden;
}

.sidebar::-webkit-scrollbar{
    width:6px;
}

.sidebar::-webkit-scrollbar-track{
    background:#f1f1f1;
}

.sidebar::-webkit-scrollbar-thumb{
    background:#c5c5c5;
    border-radius:10px;
}

.sidebar::-webkit-scrollbar-thumb:hover{
    background:#999;
}

.sidebar{
    width:300px;
    height:100vh;
    background:#fff;
    border-right:1px solid #e5e7eb;

    position:fixed;
    left:0;
    top:0;

    overflow-y:auto;
    overflow-x:hidden;

    padding:20px 15px 80px;
    box-sizing:border-box;
}

/* .main{
    margin-left:260px;
} */
.main{
    margin-left:300px;
    width:calc(100% - 300px);
    min-height:100vh;
}
.form-card{
    width:900px;
    margin:auto;
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:10px;
    padding:40px;
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:10px;
    border:1px solid #D1D5DB;
    border-radius:4px;
}

.form-group textarea{
    min-height:80px;
}

.form-action{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:30px;
}

/* =====================================================
   HALAMAN DETAIL TIM AMI
===================================================== */

/* Judul halaman */
.page-title{
    font-size:24px;
    font-weight:600;
    margin-bottom:20px;
}

/* Card utama */
.detail-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

/* =====================================================
   TAB MENU
===================================================== */

.detail-tabs{
    display:flex;
    gap:40px;
    padding:0 25px;
    border-bottom:1px solid #e5e7eb;
    background:#fff;
}

.detail-tabs a{
    text-decoration:none;
    color:#6b7280;
    padding:18px 0;
    font-weight:500;
}

.detail-tabs a.active{
    color:#4f46e5;
    border-bottom:2px solid #4f46e5;
}

/* =====================================================
   CONTENT
===================================================== */

.content-area{
    padding:20px;
}

/* Header tabel */
.top-action{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

/* Dropdown periode */
.periode-filter{
    width:220px;
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
}

/* Tombol tambah */
.btn-tambah{
    background:#4f46e5;
    color:white;
    padding:12px 20px;
    border-radius:10px;
    text-decoration:none;
    font-weight:500;
}

.btn-tambah:hover{
    color:white;
}

/* =====================================================
   TABEL
===================================================== */

.custom-table{
    width:100%;
    border-collapse:collapse;
}

.custom-table thead{
    background:#eef2ff;
}

.custom-table th{
    padding:16px;
    text-align:center;
    font-weight:600;
}

.custom-table td{
    padding:16px;
    text-align:center;
    border-top:1px solid #eee;
}

/* =====================================================
   ACTION BUTTON
===================================================== */

.action-buttons{
    display:flex;
    justify-content:center;
    gap:8px;
}

.btn-detail,
.btn-edit,
.btn-delete{
    width:40px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:none;
    border-radius:8px;
    text-decoration:none;
    padding:0;
}

/* Detail */
.btn-detail{
    background:#dbeafe;
    color:#2563eb;
}

/* Edit */
.btn-edit{
    background:#fef3c7;
    color:#d97706;
}

/* Hapus */
.btn-delete{
    background:#fee2e2;
    color:#dc2626;
}

/* Data kosong */
.empty-data{
    text-align:center;
    color:#888;
    padding:30px;
}

/* Input dan Textarea */
.form-group input,
.form-group textarea,
.form-group select{

    width:100%;
    padding:12px 15px;
    border:1px solid #d1d5db;
    border-radius:8px;

    font-family:'Poppins', sans-serif;
    font-size:15px;
    font-weight:400;
    color:#1f2937;

    outline:none;
    box-sizing:border-box;
}

.form-group textarea{

    resize:vertical;
    min-height:120px;
}

/* =====================================
   DETAIL INDIKATOR
===================================== */

.detail-card{
    background:#fff;
    border-radius:18px;
    padding:35px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.detail-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.detail-header h2{
    margin:0;
    font-size:32px;
    font-weight:700;
    color:#23314d;
}

.detail-body{

    display:flex;
    flex-direction:column;
    gap:25px;

}

.detail-item{

    display:flex;
    flex-direction:column;

}

.detail-item label{

    font-size:14px;
    font-weight:600;
    color:#7c8aa5;

    margin-bottom:10px;

}

.detail-value{

    background:#F8FAFD;

    border:1px solid #E4E9F2;

    border-radius:12px;

    padding:18px 20px;

    font-size:16px;

    color:#2d3748;

    line-height:1.7;

}

.btn-back{

    background:#4F46E5;

    color:white;

    padding:11px 22px;

    border-radius:10px;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:8px;

    transition:.3s;

}

.btn-back:hover{

    background:#3730A3;

    color:white;

}

/*==================================================
    DETAIL standar mutu
===================================================*/

.detail-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.detail-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.detail-header h2{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:#23314d;

}

.detail-subtitle{

    margin-top:8px;

    color:#8b96a9;

    font-size:15px;

}

.detail-body{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.detail-item{

    display:flex;

    flex-direction:column;

}

.detail-item label{

    font-size:15px;

    font-weight:600;

    color:#5f6c82;

    margin-bottom:8px;

}

.detail-value{

    display:flex;

    align-items:center;

    gap:12px;

    background:#f8faff;

    border:1px solid #e5ebf5;

    border-radius:12px;

    padding:18px 22px;

    font-size:16px;

    color:#2d3748;

}

.detail-value i{

    color:#4F46E5;

    font-size:20px;

}

.btn-back{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 22px;

    border-radius:10px;

    background:#4F46E5;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.btn-back:hover{

    background:#3730A3;

    color:white;

}

/*======================================
    DETAIL isi standar
======================================*/

.detail-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.detail-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.detail-header h2{

    margin:0;

    color:#23314d;

    font-size:30px;

    font-weight:700;

}

.detail-subtitle{

    margin-top:8px;

    color:#8b96a9;

    font-size:15px;

}

.detail-body{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.detail-item{

    display:flex;

    flex-direction:column;

}

.detail-item label{

    margin-bottom:8px;

    font-weight:600;

    color:#6B7280;

    font-size:14px;

}

.detail-value{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 20px;

    border-radius:12px;

    border:1px solid #E6EBF5;

    background:#F8FAFD;

    font-size:16px;

    color:#23314d;

}

.detail-value i{

    color:#4F46E5;

    font-size:20px;

}

.btn-back{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#4F46E5;

    color:white;

    padding:11px 22px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

}

.btn-back:hover{

    background:#3730A3;

    color:white;

}

/*header*/

.periode-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.periode-header h4{

    margin:0;
    white-space:nowrap;

}

.btn-add{

    white-space:nowrap;

}

/* ===========================
   DETAIL PAGE
=========================== */

.detail-card{
    background:#fff;
    border-radius:22px;
    padding:34px 38px;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.detail-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:35px;
}

.detail-header h2{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#1F2D3D;
}

.detail-subtitle{
    margin-top:8px;
    color:#7D8CA3;
}

.detail-group{
    margin-bottom:25px;
}

.detail-group label{
    display:block;
    font-size:17px;
    font-weight:600;
    color:#334155;
    margin-bottom:10px;
}

.detail-box{
    background:#F6F8FC;
    border:1px solid #E5EAF4;
    border-radius:14px;
    padding:18px 22px;
    display:flex;
    align-items:center;
    gap:14px;
    font-size:17px;
}

.detail-box i{
    color:#4F46E5;
    font-size:20px;
}

.btn-back{
    background:#4F46E5;
    color:#fff;
    padding:12px 22px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
}

.btn-back:hover{
    color:#fff;
}

.btn-secondary{
    background:#E5E7EB;
    color:#374151;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
}

.btn-secondary:hover{
    background:#D1D5DB;
}

/* =========================================================
   TAB MENU AUDIT MUTU INTERNAL
========================================================= */

.tab-menu{
    display: flex;
    gap: 35px;
    margin-top: 18px;
    margin-bottom: 10px;
}

/* Link menu */

.tab-menu a{
    text-decoration: none;
    color: #444;
    font-size: 14px;
    padding-bottom: 10px;
    transition: .3s;
}

/* Hover */

.tab-menu a:hover{
    color: #4F46E5;
}

/* Menu aktif */

.tab-menu a.active{
    color: #4F46E5;
    font-weight: 600;
    border-bottom: 2px solid #4F46E5;
}


/* =========================================================
   STATUS TEMUAN
========================================================= */

/* Status OPEN */

.status-open{
    display: inline-block;
    background: #31C74A;
    color: white;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Status CLOSED */

.status-close{
    display: inline-block;
    background: #EF4444;
    color: white;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   TOMBOL TAMBAH TEMUAN
========================================================= */

.btn-add i{
    margin-right: 6px;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.action-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}


/* =========================================================
   CARD HEADER AUDIT
========================================================= */

.card-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


/* =========================================================
   JUDUL HALAMAN
========================================================= */

.card-header h3{
    margin-bottom: 20px;
    color: #1F2A44;
    font-weight: 700;
}

/* ==========================================================
   TEMUAN AUDIT
========================================================== */

/* Header */

.temuan-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

/* Tab Menu */

.temuan-tab{
    display:flex;
    gap:35px;
    border-bottom:1px solid #E5E7EB;
    margin-bottom:25px;
}

.temuan-tab a{
    text-decoration:none;
    color:#475569;
    font-size:14px;
    padding-bottom:10px;
    transition:.3s;
}

.temuan-tab a:hover{
    color:#4F46E5;
}

.temuan-tab a.active{
    color:#4F46E5;
    font-weight:600;
    border-bottom:2px solid #4F46E5;
}

/* Data Kosong */

.table-empty{
    text-align:center;
    padding:35px;
    color:#94A3B8;
    font-size:15px;
}

/* Badge Status */

.badge-open{
    background:#22C55E;
    color:#fff;
    padding:5px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.badge-close{
    background:#EF4444;
    color:#fff;
    padding:5px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.badge-draft{
    background:#FACC15;
    color:#fff;
    padding:5px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

/* ==========================================
   DETAIL TEMUAN AUDIT
========================================== */

.table-detail{

    width:100%;

    border-collapse:collapse;

}

.table-detail th{

    width:220px;

    background:#F8FAFC;

    padding:14px;

    text-align:left;

    border:1px solid #E5E7EB;

}

.table-detail td{

    padding:14px;

    border:1px solid #E5E7EB;

}

/* ==========================================================
   DETAIL TABLE
========================================================== */

.detail-table{

    width:100%;

    border-collapse:collapse;

}

.detail-table th{

    width:220px;

    background:#F8FAFC;

    padding:14px;

    text-align:left;

    border:1px solid #E5E7EB;

    font-weight:600;

}

.detail-table td{

    padding:14px;

    border:1px solid #E5E7EB;

}

/* ==========================================================
   SIDEBAR LOGOUT
========================================================== */

.logout-form{

    margin:0;

    width:100%;

}

.logout-btn{

    width:100%;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 20px;

    background:transparent;

    border:none;

    outline:none;

    color:#243b63;

    font-size:17px;

    font-weight:500;

    cursor:pointer;

    border-radius:10px;

    transition:.3s;

    font-family:inherit;

}

.logout-btn i{

    font-size:20px;

    width:22px;

}

.logout-btn:hover{

    background:#EEF2FF;

    color:#4F46E5;

}

.sidebar ul li.active .logout-btn{

    background:#EEF2FF;

    color:#4F46E5;

}

/* ======================================================
    LAPORAN INDEX
====================================================== */

.laporan-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

    border:1px solid #E5E7EB;

    border-radius:14px;

    margin-bottom:20px;

    transition:.3s;

    background:white;

}

.laporan-item:hover{

    box-shadow:0 8px 18px rgba(0,0,0,.06);

}

.laporan-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.laporan-icon{

    width:70px;

    height:70px;

    border-radius:16px;

    background:#EEF2FF;

    color:#4F46E5;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

}

.laporan-left h4{

    margin-bottom:8px;

}

.laporan-left p{

    margin:4px 0;

    color:#64748B;

}

.laporan-right{

    text-align:right;

}

.badge{

    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    font-size:13px;

    margin-bottom:15px;

}

.badge-success{

    background:#DCFCE7;

    color:#15803D;

}

.badge-warning{

    background:#FEF3C7;

    color:#B45309;

}

.badge-secondary{

    background:#E5E7EB;

    color:#374151;

}

.empty-state{

    text-align:center;

    padding:80px 20px;

}

.empty-state i{

    font-size:70px;

    color:#CBD5E1;

}

.empty-state h3{

    margin-top:20px;

}

.empty-state p{

    color:#64748B;

}

.laporan-subcard{

    border:1px solid #E5E7EB;

    border-radius:10px;

    padding:18px;

    margin-bottom:20px;

    background:#FCFCFD;

}

.summary-card span{

    display:block;

    margin-top:10px;

    color:#64748B;

    font-size:14px;

}

.cover table td{

    padding:8px;

}

.cover{

    border-top:8px solid #1E40AF;

}

.laporan-card{

    page-break-inside:avoid;

}

.badge-danger{

background:#FEE2E2;

color:#DC2626;

padding:6px 14px;

border-radius:30px;

font-size:13px;

}

.btn-link{

background:#2563EB;

color:white;

padding:8px 18px;

border-radius:8px;

text-decoration:none;

}

.kesimpulan-box{

display:flex;

gap:20px;

background:#F0FDF4;

padding:25px;

border-left:6px solid #16A34A;

border-radius:8px;

line-height:1.8;

}

.kesimpulan-box i{

font-size:28px;

color:#16A34A;

}

.button-group{

display:flex;

justify-content:center;

gap:20px;

margin-top:40px;

}

.btn-primary{

background:#DC2626;

color:white;

padding:12px 22px;

border-radius:8px;

text-decoration:none;

}

.btn-secondary{

background:#64748B;

color:white;

padding:12px 22px;

border-radius:8px;

text-decoration:none;

}

.card-title{

    font-size:36px;

    font-weight:700;

    color:#12284C;

    margin:0;

}

.form-footer{

    display:flex;

    justify-content:flex-end;

    margin-top:30px;

}

.btn-secondary{

    background:#4F46E5;

    color:#fff;

    padding:12px 28px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.btn-secondary:hover{

    background:#4338CA;

    color:#fff;

}