:root {

--pColor: #d6ce93;
--pLightColor: #efebce;
--pDarkColor: #a3a380 ;

--pTextColor: #000000;
--pButtonColor: #fff;
--pPage: #f2f2f2;
--gInput: #fff;
}

* { box-sizing: border-box; }
body{
margin: 0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 16px !important;
line-height: 1.5;
letter-spacing: 0.5px;
}

.modal .info{text-align: center; width: 100%; padding: 10px;}
.shadow{
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.01);
border-radius:8px; border: 1px solid #ddd; padding: 10px;
margin-bottom: 5px; background-color:#fff;
}
.artikel{ margin: 10px; word-wrap: break-word;

}
.img { width: 100%; height: auto;}

.show {display: block;}
.hide {display: none;}

.toast {
min-width:250px; position:fixed; bottom:30px; left:50%; margin-left:-125px;
text-align:center; padding:16px; z-index:1002;
color: var(--pButtonColor);
background-color: var(--pColor);
}


/* row */
.row { width: 100%; display: table; table-layout: fixed; }
.row::after { content: ""; clear: both; }
[class*='col-'] { float: left;   word-wrap: break-word;}
.col-1-1 { width: 100%; }
.col-1-2 { width: 50%; }
.col-1-3 { width: 33.33%; }
.col-1-4 { width: 25%; }
.col-1-5 { width: 20%; }
.col-2-3 { width: 66.66%; }
.col-3-4 { width: 75%; }
.col-4-5 { width: 80%; }
@media screen and (max-width: 700px) {
[class*='col-'] { width: 50%; }
}
@media screen and (max-width: 450px) {
[class*='col-'] { width: 100%; }
}


/* modal */
.depan {
background:rgba(0, 0, 0, 0.4); height:100%; width:100%; position:fixed; top:0; left:0;
overflow:hidden; z-index: 99;
}

.modal {
    background: #fefefe;
    width: 80%;
    margin: 70px auto;
    position: relative;
    z-index: 10;
    border-radius: 8px;
 }

.modalbar {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Perbaikan: Gunakan 'center', bukan 'right' */
    padding: 10px 20px;
    background: var(--pColor);
    color: white;
}

.modalbar button {
    background: red;
    width: 30px;
    height: 30px;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}





/* card */
.card {
overflow: hidden;
position: relative;
border-radius: 10px;
}

.card-container { display: flex; flex-wrap: wrap; }
[class*='col-']{display: flex;flex-direction: column;}

.card { display: flex; flex: 1; flex-direction: column; margin: 5px; transition: transform 0.3s ease;}
.card:hover {animation: pulse-effect 1s infinite;z-index: 10; box-shadow: 0 10px 20px rgba(0,0,0,0.2);}

.card .artikel {  flex-grow: 1; }
.card button { margin-top: auto;}

.card > svg {
/* height: 100px;
width: 100px; */
z-index: 1;
position: absolute;
bottom: -30px;
right: -30px;
stroke: var(--pDarkColor);
display: inline-block;
transform: rotate(-15deg) !important;
opacity: 0.2 !important;
}
.card .artikel { position: relative; z-index: 2; display: flex;flex-direction: column; flex-grow: 1;gap: 8px; }
.card .artikel button { margin-top: auto; align-self: flex-start; display: flex; align-items: center; gap: 5px;}
.card .artikel svg { height: 24px; width: 24px; flex-shrink: 0;}

@keyframes pulse-effect {
  0% {transform: scale(1);}
  50% {transform: scale(1.05);}
  100% {transform: scale(1); }
}

@media screen and (max-width: 450px) {
.card-container [class*='col-'] { width: 100%; }
}


/* progress */
.progress-bar {
background: #ddd none repeat scroll 0 0;
box-shadow: 0 0 0;
height: 15px;
margin: 0 0 15px;
width: 100%;
border-radius: 5px;
}
.progress-bar-text {
color: #333333;
margin:5px;
}
.progress-bar > span {
display: block;
height: 100%;
width: 0;
border-radius: 5px;
background: #F8C01B none repeat scroll 0 0;
}

/* pie */
.pie { display: flex; justify-content: center; margin: auto;
stroke:none;
fill:black;
}
.pie.img {max-width: 250px;}

.chart-text
{
fill: #000;
-moz-transform: translateY(0.25em);
-ms-transform: translateY(0.25em);
-webkit-transform: translateY(0.25em);
transform: translateY(0.25em);
}
.chart-number
{
font-size: 0.5em;
line-height: 1;
text-anchor: middle;
-moz-transform: translateY(-0.25em);
-ms-transform: translateY(-0.25em);
-webkit-transform: translateY(-0.25em);
transform: translateY(-0.25em);
}
.chart-label
{
font-size: 0.2em;
text-transform: uppercase;
text-anchor: middle;
-moz-transform: translateY(0.7em);
-ms-transform: translateY(0.7em);
-webkit-transform: translateY(0.7em);
transform: translateY(0.7em);
}


/* avatar */
.user-avatar {display: flex; justify-content: center; margin: auto;}
.user-avatar .img{
border-style: none; max-width: 150px;
height: 130px;
width:  130px;
object-fit: cover;
border-radius: 50%;
}


/* sidepanel */
.panel-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: none;
/* backdrop-filter: blur(2px);   */
}
.side-panel {
position: fixed;
top: 0;
right: -100%;
width: 100%;
max-width: 450px;
height: 100%;
background: #ffffff;
z-index: 1001;
box-shadow: -5px 0 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease-in-out;
display: flex;
flex-direction: column;
}

.side-panel.active { transform: translateX(-100%);}
.panel-header {
padding: 15px 20px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-body {
padding: 20px;
overflow-y: auto;
flex-grow: 1;
-webkit-overflow-scrolling: touch;
}

@media (min-width: 700px) {
.side-panel { right: -450px; width: 450px;}
.side-panel.active { transform: translateX(-450px);}
}

.show-flex { display: flex !important; }



/* table */

.table { border-collapse:collapse; border-spacing:0; width:100%; color: #000; margin-top: 10px;}
.table td{ empty-cells: show; }

.table tr { background:#f8f8f8; }
.table tr:nth-child(even){ background:#fff;}
.table th { height:37px; }
.table th, table td { border:none; text-align:left; padding:8px; }

.table thead {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

.table thead th:first-of-type {text-align: left;}
.table tbody, .table tr,.table th,.table td {
display: block;
padding: 0;
text-align: left;
white-space: normal;
}
.table th,
.table td { padding: .5em;}
.table caption {  margin-bottom: 1em;    font-weight: bold;  text-align: center;}
.table tbody tr {  margin-bottom: 1em;  border: 1px solid var(--pLightColor); border-radius: 8px;}
.table tbody tr:last-of-type {  margin-bottom: 0;}
.table tbody th[scope="row"] { background-color: #1d96b2; color: white;}
.table tbody td[data-type=currency] { text-align: right;}
.table tbody td[data-title]:before {
content: attr(data-title);
float: left;
/* font-size: .8em; */
/* color: rgba(94, 93, 82, 0.75); */
}
.table tbody td { text-align: right;}


@media screen and (min-width: 700px) {
.table thead {
position: relative;
clip: auto;
height: auto;
width: auto;
overflow: auto;
}
.table tr { display: table-row; }
.table th,
.table td { display: table-cell; padding: .5em; }


.table tbody { display: table-row-group; }
.table tbody tr {  display: table-row;  }
.table tbody tr {  margin-bottom: 1em;  border: 0;}

.table tbody tr:nth-of-type(even) {background-color: rgba(94, 93, 82, 0.1);}
.table tbody th[scope="row"] {background-color: transparent;text-align: left;}
.table tbody td { text-align: left;  }
.table tbody td[data-title]:before { content: none; }
}


/* form */
.form { margin-bottom: 10px; }
.gInput { position: relative; padding:5px;}
.gInput .label {
position: absolute;
background: var(--gInput);
pointer-events: none;
left: 10px;
top: 20px;
padding: 0 5px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.gInput .input, .input{
background: white;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 5px;
resize: vertical;
outline: none;
}

.input:focus { outline: none; }
.input:focus ~ .label {  top: -1px;   }
.input:not(:placeholder-shown) ~  .label {  top: -1px;}
ul {  margin: 0; padding: 0;   list-style-type:none;}
li {padding: 0; left:0; }
button:hover path, a:hover path, svg:hover path {
stroke-dasharray: 200;
stroke-dashoffset: 200;
pointer-events: none;
animation: animateDash 3s linear forwards infinite;
}
@keyframes animateDash { to { stroke-dashoffset: 0; }
}

input[type=range],
input[type=file],
input[type=submit] {
color:white; background:var(--pColor);
padding:8px; margin-left:5px; margin-bottom: 5px;
border: 1px solid transparent;
border-radius:5px; cursor:pointer;
display: flex;
align-items: center;
}


/* button */
.gPaging { display: table;}
.gPaging span { display:table-cell; vertical-align:middle; padding:8px;}

.gButton { display: flex; flex-wrap: wrap; flex-direction: row;
 position: relative; margin:5px;}

.button, button {
padding:8px;
border-radius:5px; cursor:pointer;
border: 1px solid #ddd;
display: inline-flex;
align-items: center;
font-size: 16px;
}


/* .search */
.search {  display: flex;  flex-direction: row;  align-items: stretch;}
.search select { flex-shrink: 0;  width: 70px;  margin-right: 5px; }
.search input{  flex-grow: 1; }
.search button{ border: none; background: transparent;}


@media screen and (max-width: 450px) {
.button { width: 100%; margin: 0; margin-bottom: 5px;}
.footer {  margin-bottom: 30px;}
.modal{ width: 100%;}
}


/* kebab-menu */
.kebab-container {position: relative;}
.kebab-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
min-width: 150px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 4px;
z-index: 100;
}

.kebab-menu.active { display: block; }
.menu-item {display: block; padding: 10px 15px; text-decoration: none; color: #333;}
.menu-item:hover {background-color: #f1f1f1;}
.delete-action { color: red;}