/* ROOT CONSTANT */

:root {

  /* Attendance status */

  --color-full: #107740;      /* Full ngày */

  --color-half: #79f1b1;      /* 1/2 ngày */

  --color-leave: #3182CE;     /* Nghỉ phép */

  --color-unpaid: #969393;    /* Không lương */

  --color-absent: #cfcdcd;    /* Vắng không lý do*/

  --color-shift: #805AD5;     /* Trực ca */

  --color-collaborate: #D69E2E;     /* Công tác */

  --color-late-early: #f9d07d;     /* Đi sớm về muộn */

  --color-absence:#70b0ec;

  --color-forget-checkin:#f3533a;

  --color-duty-checkin:#805AD5;

  --color-has-checkin:#f0f0f0;



  /* Background nhẹ */

  --bg-full: #E6FFFA;

  --bg-half: #FEFCBF;

  --bg-leave: #EBF8FF;

  --bg-unpaid: #FFF5F5;

  --bg-shift: #F3E8FF;

}



html {

  font-size: 14px;

}



@media (min-width: 768px) {

  html {

    font-size: 16px;

  }

}



.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {

  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;

}



html {

  position: relative;

  min-height: 100%;

}



body {

  margin-bottom: 60px;

  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);

}



.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {

  color: var(--bs-secondary-color);

  text-align: end;

}



.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {

  text-align: start;

}



.x-small { font-size: 0.7rem; }

.page-link { color: #333; border: none; margin: 0 3px; border-radius: 5px !important; }

.page-item.active .page-link { background-color: #0d6efd; color: white; }

.table-hover tbody tr:hover { background-color: #f8f9fa; }



.bg-label-danger {

  background-color: #ffe0db !important;

  color: #ff3e1d !important;

  font-weight: bold !important;

}



.notification-avatar {

    position: relative;

}

.notification-badge {

    position: absolute;



    top: -5px;

    right: -6px;



    min-width: 18px;

    height: 18px;



    padding: 0 4px;



    border-radius: 50%;



    background-color: #ff3b30;

    color: #fff;



    border: 2px solid #fff;



    font-size: 10px;

    font-weight: 700;

    line-height: 14px;



    display: flex;

    align-items: center;

    justify-content: center;



    z-index: 10;

}



.multi-select {

    position: relative;

    width: 100%;

}



.multi-select-box {

    height: 58px;

    border: 1px solid #5267ff;

    border-radius: 8px;

    background: #fff;



    padding: 0 15px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    cursor: pointer;

}



.selected-text {

    color: #555;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.arrow {

    font-size: 12px;

}



.multi-select-dropdown {

    display: none;



    position: absolute;

    top: calc(100% + 3px);

    left: 0;

    right: 0;



    max-height: 450px;

    overflow-y: auto;



    background: #fff;

    border: 1px solid #ccc;

    border-radius: 8px;



    z-index: 9999;



    box-shadow: 0 5px 15px rgba(0, 0, 0, .15);

}



.multi-select.open .multi-select-dropdown {

    display: block;

}



.multi-select-dropdown label {

    display: flex;

    align-items: center;



    padding: 10px 15px;



    cursor: pointer;

    user-select: none;

}



.multi-select-dropdown label:hover {

    background: #f3f5f7;

}



.multi-select-dropdown input {

    width: 18px;

    height: 18px;

    margin-right: 10px;

}



.multi-select-dropdown span {

    flex: 1;

}