/* =========================
   TEMPLATE 5 COMPONENTS
========================= */
.detail-content {
    margin: 10px 0;
    white-space: pre-line;
}

.btn,
.slot-btn,
.rank-box,
.cat-item,
.status-tab,
#pagination-box .page-btn,
.rows-per-page select,
.search-box input {
    border-radius: 6px !important;
}

.btn {
    height: 36px;
    padding: 0 15px;
    border: 1px solid #cfe7df;
    background: #fff;
    color: #264f45;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn:hover {
    border-color: #9bd7c4;
    background: #effaf6;
}

.btn.primary {
    border-color: #2a9c79;
    color: #176f59;
    background: #effaf6;
}

.btn.primary:hover,
.btn.active,
.btn.danger {
    border-color: #2a9c79;
    background: #2a9c79;
    color: #fff;
}

.btn.danger {
    box-shadow: 0 10px 20px rgba(42, 156, 121, 0.18);
}

.table-wrap {
    margin-top: 16px;
    overflow-x: auto;
    border: 1px solid #cfe7df;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(16, 58, 49, 0.06);
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: #183d34;
    font-size: 13px;
}

.data-table thead {
    background: #123f34;
    color: #ecfff8;
}

.data-table th,
.data-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e2f0eb;
    text-align: center;
    white-space: nowrap;
}

.data-table th {
    font-weight: 800;
}

.data-table tbody {
    color: #183d34;
}

.data-table tbody tr:nth-child(even) {
    background: #f7fbf9;
}

.data-table tbody tr:hover {
    background: #eaf8f3;
}

.data-table tfoot td {
    color: #103a31 !important;
    font-weight: 800;
    background: #f0faf6;
}

.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eaf8f3;
    color: #176f59;
    font-size: 11px;
    font-weight: 800;
}

.page-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 12px;
    color: #57746c;
    font-size: 13px;
}

#pagination-box {
    display: flex;
    gap: 6px;
}

#pagination-box .page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #cfe7df;
    background: #fff;
    color: #315e53;
    font-weight: 800;
    cursor: pointer;
}

#pagination-box .page-btn:hover {
    background: #effaf6;
}

#pagination-box .page-btn.is-active {
    border-color: #123f34;
    background: #123f34;
    color: #fff;
}

.rows-per-page {
    color: #315e53;
    font-size: 14px;
}

.rows-per-page select,
select {
    border: 1px solid #cfe7df !important;
    background: #fff;
    color: #183d34;
}

.empty-row td {
    padding: 32px 12px;
    color: #8aa199;
    text-align: center;
}

.sub-bg {
    min-height: 80vh;
    padding: 18px;
    border: 1px solid #cfe7df;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 45px rgba(16, 58, 49, 0.08);
}

.detail-card {
    color: #183d34;
}

.page-title {
    margin: 0 0 14px;
    color: #103a31;
    font-size: 24px;
    font-weight: 900;
}

.search-box {
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
}

.checked-count {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #315e53;
}

.search-box input {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #cfe7df;
    background: #fff;
    color: #183d34;
    font-size: 13px;
}

.search-box input:focus {
    outline: none;
    border-color: #2a9c79;
    box-shadow: 0 0 0 3px rgba(42, 156, 121, 0.14);
}

.litepicker .container__days .day-item.is-locked {
    color: #c9d7d2 !important;
    background-color: #f5f8f7 !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
    opacity: 0.5;
}

.litepicker .container__days .day-item:not(.is-locked) {
    color: #183d34 !important;
    font-weight: 600;
}

.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date {
    background: #2a9c79 !important;
    color: white !important;
    font-weight: 800 !important;
}

.litepicker .container__days .day-item.is-in-range {
    background-color: #d9f3ea !important;
    color: #176f59 !important;
    font-weight: 700;
}

.litepicker .container__days .day-item.is-today {
    font-weight: 900;
}

.litepicker .container__days .day-item:not(.is-locked):nth-child(7n),
.litepicker .container__days .day-item:not(.is-locked):nth-child(7n+1) {
    color: #bd3b3b;
}

.litepicker .container__days .day-item.is-locked {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        #e5eeea 2px,
        #e5eeea 4px
    );
}

.litepicker .container__days .day-item:not(.is-locked):not(.is-start-date):not(.is-end-date):not(.is-in-range) {
    border: 1px solid #d6eae2;
}

.litepicker .container__tooltip {
    display: none !important;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Template 5 distinct dashboard finish */
.btn {
    border-color: var(--t5-line);
    color: #252858;
    font-weight: 800;
}

.btn:hover {
    border-color: #a5b4fc;
    background: #eef4ff;
    color: #312e81;
}

.btn.primary {
    border-color: var(--t5-primary);
    color: #312e81;
    background: #eef2ff;
}

.btn.primary:hover,
.btn.active,
.btn.danger {
    border-color: var(--t5-primary);
    background: var(--t5-primary);
    color: #fff;
}

.btn.danger:hover {
    border-color: var(--t5-primary);
    background: var(--t5-primary);
    color: #fff;
}

.btn.danger {
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.18);
}

.table-wrap {
    border-color: var(--t5-line);
    background:
        linear-gradient(180deg, #f7f9ff 0%, #ffffff 32%, #ffffff 100%);
    box-shadow: 0 16px 34px rgba(22, 23, 47, 0.1);
}

.data-table {
    color: #202348;
}

.data-table thead {
    background: linear-gradient(90deg, var(--t5-navy) 0%, var(--t5-navy-2) 64%, #0f6f86 100%);
    color: #eef7ff;
}

.data-table th,
.data-table td {
    border-bottom-color: #e5e9f8;
}

.data-table th {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.data-table td {
    border-right: 1px solid #eef2ff;
}

.data-table th:last-child,
.data-table td:last-child {
    border-right: 0;
}

.data-table tbody,
.data-table tfoot td,
.page-title {
    color: var(--t5-ink) !important;
}

.data-table tbody tr {
    background: #ffffff;
}

.data-table tbody tr:nth-child(even) {
    background: #f5f8ff;
}

.data-table tbody tr:hover,
.data-table tfoot td,
.badge,
#pagination-box .page-btn:hover {
    background: #eaf1ff;
}

.badge,
.rows-per-page,
.checked-count {
    color: #312e81;
}

#pagination-box .page-btn,
.rows-per-page select,
select,
.sub-bg,
.search-box input {
    border-color: var(--t5-line) !important;
}

#pagination-box .page-btn {
    color: #353962;
}

#pagination-box .page-btn.is-active {
    border-color: #181a3f;
    background: #181a3f;
}

.sub-bg {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(247, 249, 255, 0.96) 100%);
    box-shadow: 0 22px 52px rgba(22, 23, 47, 0.11);
}

.page-bottom {
    color: #303764;
}

.empty-row td {
    background:
        repeating-linear-gradient(135deg, #ffffff 0, #ffffff 12px, #f8faff 12px, #f8faff 24px);
    color: #7f8aaa;
}

.search-box input:focus {
    border-color: var(--t5-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}

.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date {
    background: var(--t5-primary) !important;
}

.litepicker .container__days .day-item.is-in-range {
    background-color: #e0e7ff !important;
    color: #312e81 !important;
}