:root {
    --primary: #2E7D32;
    --secondary: #546E7A;
    --success: #4CAF50;
    --info: #1976D2;
    --warning: #FFA000;
    --danger: #D32F2F;
    --background: #F5F7F8;
    --on-background: #1a1c1e;
    --surface: #ffffff;
    --on-surface: #ffffff;
    --outline-border: #dde2e4;
    --font-color-bg:#616161;
    --sidebar-active: #c8e6c9;
    --secondary-2:#cfd8dc;
    --color-secondary-2:#29434e;
    --black-color : #1a1c1e;
    --header-color : var(--sidebar-active);
    --color-sick: #9C27B0;
    --color-excused: #1976D2;
    --color-absent: #D32F2F;
    --color-late: #FFA000;
    --color-present: #4CAF50;
    --color-holiday: #607D8B;
}

[class*="sidebar-dark-"]{
    background-color: var(--background);
    color: var(--font-color-bg);
}
a,
[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link:active,
.navbar-light .navbar-nav .nav-link{
    color: var(--primary) !important;
}

[class*="sidebar-dark"] .brand-link, 
[class*="sidebar-dark"] .brand-link .pushmenu,
[class*="sidebar-dark-"] .sidebar a,
[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link{
    color: var(--font-color-bg) !important;
}

[class*="sidebar-dark"] .brand-link{
    color : var(--black-color) !important;
    font-weight: bold;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active{
    background-color: var(--sidebar-active) !important;
    color: var(--primary) !important;
    font-weight: normal;
}

[class*="sidebar-dark-"] .nav-sidebar > .nav-item.menu-open > .nav-link, 
[class*="sidebar-dark-"] .nav-sidebar > .nav-item:hover > .nav-link,
[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link:hover,
[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link:focus 
[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link:focus{
    color: var(--primary) !important;
}

.btn-primary{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--surface) !important;
}

.btn-secondary{
    background-color: var(--secondary-2);
    border-color: var(--secondary-2);
    color: var(--color-secondary-2) !important;
}

.btn-danger{
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: var(--surface) !important;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{
    background-color: var(--sidebar-active);
    border-color: var(--sidebar-active);
    color: var(--primary);
    font-weight: bold;
}

/* legend attendance */
.status-box{
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 2px;
}
.student-time .status-box.absent{
    background-color: var(--color-absent) !important;
}
.student-time .status-box.late{
    background-color: var(--color-late) !important;
}
.student-time .status-box.sick{
    background-color: var(--color-sick) !important;
}
.student-time .status-box.excused{
    background-color: var(--color-excused) !important;
}
.student-time .status-box.present{
    background-color: var(--primary) !important;
}
.student-time .status-box.home{
    background-color: var(--color-excused) !important;
}

.user-pic img.border.absent{
    border: 5px solid var(--color-absent) !important;
}
.user-pic img.border.late{
    border: 5px solid var(--color-late) !important;
}
.user-pic img.border.sick{
    border: 5px solid var(--color-sick) !important;
}
.user-pic img.border.excused{
    border: 5px solid var(--color-excused) !important;
}
.user-pic img.border.present{
    border: 5px solid var(--primary) !important;
}

.badge.attendance{
    width: 20px;
    height: 20px;
}

.badge.attendance.absent{
    background-color: var(--color-absent);
}
.badge.attendance.late{
    background-color: var(--color-late);
}
.badge.attendance.sick{
    background-color: var(--color-sick);
}
.badge.attendance.excused{
    background-color: var(--color-excused);
}
.badge.attendance.present{
    background-color: var(--primary);
}

/* legend attendance */


/* breadcrumb */
.breadcrumb{
    background-color: initial !important;
    padding-bottom: 0;
}
.breadcrumb-item.active{
    color: black;
    font-weight: bold;
}
.breadcrumb-item a{
    color: var(--font-color-bg) !important;
}
/* breadcrumb */

/* paging table */
.page-item.active .page-link{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--surface) !important;
}
/* paging table */

/* Ubah warna background & text saat hover */
.tempus-dominus-widget .time-container .picker .list .list-item.active,
.tempus-dominus-widget .time-container .picker .list .list-item:hover {
    background-color: #28a745; /* ganti jadi hijau misalnya */
    color: #fff;
}

/* Ubah border atau radius kalau mau */
.tempus-dominus-widget .time-container .picker .list {
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* Ubah warna list-item biasa (bukan hover/active) */
.tempus-dominus-widget .time-container .picker .list .list-item {
    background-color: #f8f9fa;
    color: #343a40;
}

.card-footer{
    background-color: transparent !important;
}

.primary-color{
    color: var(--primary) !important;
}

.primary-bg-color{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--surface) !important;
}

.status-container .status-item.active{
    border: 2px solid var(--primary);
    border-radius: 14px;
    border-color: var(--primary) !important;
    background-color: var(--success);
}


/* input form */
table thead th{
    vertical-align: middle;
}

table thead th{
    background-color: var(--primary);
    color: var(--sidebar-active) !important;
}

.table-striped tbody tr:nth-of-type(even){
    background-color: var(--sidebar-active);
}

table tbody td{
    color: var(--black-color) !important;
}

table.table-bordered td input[type=checkbox],
table.table-bordered th input[type=checkbox]{
    height: 20px;
    width: 20px;
    border-radius: 3px;
    -webkit-appearance:none;
    background-color: var(--sidebar-active);
    border: 1px solid #1A1C1E;
}
table.table-bordered td input[type=checkbox]:checked,
table.table-bordered th input[type=checkbox]:checked{
    border-radius: 3px;
    background:url(../img/icon/checked.png) no-repeat;
    background-size: 15px;
    background-position: 35% 3px;
    background-color: var(--sidebar-active);
}

table.table-bordered tr.odd td input[type=checkbox]{
    background-color: transparent;
}

.form-check input.form-check-input[type=checkbox]{
    height: 20px;
    width: 20px;
    border-radius: 3px;
    -webkit-appearance:none;
    background-color: var(--sidebar-active);
}
.form-check input.form-check-input[type=checkbox]:checked{
    border-radius: 3px;
    background:url(../img/icon/checked.png) no-repeat;
    background-size: 15px;
    background-position: 35% 3px;
    background-color: var(--sidebar-active);
}
.form-check input.form-check-input[type=radio]{
    height: 20px;
    width: 20px;
    border-radius: 3px;
    accent-color:green;
}
.form-check label.form-check-label{
    margin-top: 3px;
    margin-left: 10px;
}

/* input form */

/* image table */
td div.user-pic{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

td div.user-pic img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 8px;
}

img.img-circle,
td div.user-pic img{
    border:  2px solid var(--primary); 
}


/* datatable style */
table{
    border-bottom:1px solid var(--primary) !important;
    border-radius: 14px 14px 0 0 !important;
    border-top:hidden !important;
    border-right:hidden !important;
    border-left:hidden !important;
}
tr.odd td{
    background-color: var(--surface) !important;
    box-shadow: none !important;
}
tr.even td{
    background-color: var(--sidebar-active) !important;
}

.boder-radius-left{
    border-radius: 14px 0 0 0 !important;
}
.boder-radius-right{
    border-radius: 0 14px 0 0 !important;
}
table.table-bordered.dataTable th:last-child, 
table.table-bordered.dataTable th:last-child, 
table.table-bordered.dataTable td:last-child, 
table.table-bordered.dataTable td:last-child{
    border-right-width: 0px !important;
}
table th:first-child {
    border-top-left-radius: 14px;
}

table th:last-child {
    border-top-right-radius: 14px;
}

.dataTables_empty {
    text-align: center !important;
}
/* datatable style */
div.col .small-box {
    color: var(--surface);
}
div.col .small-box.present{
    background-color: var(--color-present);
}
div.col .small-box.late{
    background-color: var(--color-late);
}
div.col .small-box.sick{
    background-color: var(--color-sick);
}
div.col .small-box.excused{
    background-color: var(--color-excused);
}
div.col .small-box.absent{
    background-color: var(--color-absent);
}
div.col .small-box.total{
    background-color: var(--info);
}


/* dashboard */
.subjects-row .col{
    max-width: 400px;
}

.table thead th{
    vertical-align: middle;
}