/*
 * VTC Back Office Skin v1.0.0
 * Custom override layer on top of DashLite 1.4.0 (dashlite.css + theme.css).
 * Loaded last from partials/head.php. Override-only: no theme files are modified.
 * Accent: Makueni county green. Sidebar: dark slate. Surfaces: soft cards on a light canvas.
 */

:root {
    --vtc-green: #1b7a43;
    --vtc-green-deep: #146134;
    --vtc-green-hover: #166b3b;
    --vtc-green-bright: #2e9e5b;
    --vtc-green-tint: #e6f4ec;
    --vtc-green-glow: rgba(27, 122, 67, 0.14);
    --vtc-slate: #101828;
    --vtc-slate-2: #16203a;
    --vtc-slate-line: rgba(255, 255, 255, 0.06);
    --vtc-slate-text: #9da8bb;
    --vtc-slate-text-dim: #6b7891;
    --vtc-page-bg: #f5f7fa;
    --vtc-border: #e2e8f0;
    --vtc-heading: #1f2b3a;
    --vtc-body-text: #364a63;
    --vtc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --vtc-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --vtc-radius: 10px;
}

/* ------------------------------------------------------------------
 * 1. Base canvas and typography
 * ------------------------------------------------------------------ */
.nk-body {
    font-size: 15px;
    color: var(--vtc-body-text);
}

.nk-body.bg-lighter,
.bg-lighter {
    background-color: var(--vtc-page-bg);
}

.nk-content {
    background-color: var(--vtc-page-bg);
}

h1, h2, h3, h4, h5, h6,
.nk-block-title {
    color: var(--vtc-heading);
}

a {
    color: var(--vtc-green);
}

a:hover,
a:focus {
    color: var(--vtc-green-hover);
}

.link {
    color: var(--vtc-green);
}

.link:hover,
.link:focus {
    color: var(--vtc-green-hover);
}

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

/* ------------------------------------------------------------------
 * 2. Buttons
 * ------------------------------------------------------------------ */
.btn:not(.btn-round) {
    border-radius: 8px;
}

.btn-primary {
    color: #fff;
    background-color: var(--vtc-green);
    border-color: var(--vtc-green);
    box-shadow: 0 1px 2px rgba(27, 122, 67, 0.25);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: var(--vtc-green-hover);
    border-color: var(--vtc-green-hover);
    box-shadow: 0 2px 6px rgba(27, 122, 67, 0.3);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--vtc-green-deep);
    border-color: var(--vtc-green-deep);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 3px var(--vtc-green-glow);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--vtc-green);
    border-color: var(--vtc-green);
}

.btn-outline-primary {
    color: var(--vtc-green);
    border-color: var(--vtc-green);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: var(--vtc-green);
    border-color: var(--vtc-green);
}

.btn-dim.btn-primary {
    color: var(--vtc-green);
    background-color: var(--vtc-green-tint);
    border-color: transparent;
    box-shadow: none;
}

.btn-dim.btn-primary:hover,
.btn-dim.btn-primary:focus {
    color: #fff;
    background-color: var(--vtc-green);
}

.btn-dim.btn-outline-primary {
    color: var(--vtc-green);
    background-color: var(--vtc-green-tint);
    border-color: rgba(27, 122, 67, 0.35);
    box-shadow: none;
}

.btn-dim.btn-outline-primary:hover,
.btn-dim.btn-outline-primary:focus {
    color: #fff;
    background-color: var(--vtc-green);
    border-color: var(--vtc-green);
}

/* ------------------------------------------------------------------
 * 3. Badges and pills
 * ------------------------------------------------------------------ */
.badge {
    border-radius: 6px;
}

.badge-pill {
    border-radius: 50rem;
}

.badge-primary {
    color: #fff;
    background-color: var(--vtc-green);
}

.badge-outline-primary {
    color: var(--vtc-green);
    border-color: rgba(27, 122, 67, 0.45);
    background-color: transparent;
}

.badge-dim.badge-outline-primary {
    color: var(--vtc-green);
    background-color: var(--vtc-green-tint);
    border-color: rgba(27, 122, 67, 0.25);
}

.bg-primary {
    background-color: var(--vtc-green) !important;
}

/* ------------------------------------------------------------------
 * 4. Sidebar: light with green accents
 * ------------------------------------------------------------------ */
.nk-sidebar,
.nk-sidebar.is-light {
    background: #fff;
    border-right: 1px solid var(--vtc-border);
}

.nk-sidebar .nk-sidebar-element.nk-sidebar-head {
    border-bottom: 1px solid var(--vtc-border);
    background: transparent;
}

.nk-sidebar .nk-menu-heading .overline-title {
    color: #8094ae;
}

.nk-sidebar .nk-menu-link {
    color: #364a63;
    border-radius: 8px;
    margin: 1px 10px;
    padding-left: 14px;
    padding-right: 14px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nk-sidebar .nk-menu-icon,
.nk-sidebar .nk-menu-icon .icon {
    color: inherit;
}

.nk-sidebar .nk-menu-link:hover,
.nk-sidebar .nk-menu-item:hover > .nk-menu-link {
    color: var(--vtc-green);
    background: rgba(27, 122, 67, 0.07);
}

.nk-sidebar .nk-menu-item.active > .nk-menu-link,
.nk-sidebar .nk-menu-item.current-page > .nk-menu-link {
    color: var(--vtc-green);
    background: rgba(27, 122, 67, 0.12);
}

.nk-sidebar .nk-menu-item.active > .nk-menu-link .nk-menu-icon,
.nk-sidebar .nk-menu-item.current-page > .nk-menu-link .nk-menu-icon {
    color: var(--vtc-green);
}

.nk-sidebar .nk-menu-sub .nk-menu-link {
    color: #6b7f95;
    margin: 0 10px;
}

.nk-sidebar .nk-menu-sub .nk-menu-link:hover,
.nk-sidebar .nk-menu-sub .nk-menu-item.active > .nk-menu-link {
    color: var(--vtc-green);
    background: transparent;
}

.nk-sidebar .nk-menu-toggle:after {
    color: #8094ae;
}

.nk-sidebar .nk-nav-toggle .nk-quick-nav-icon,
.nk-sidebar .nk-quick-nav-icon {
    color: #364a63;
}

/* ------------------------------------------------------------------
 * 5. Header bar
 * ------------------------------------------------------------------ */
.nk-header,
.nk-header.is-light {
    background: #fff;
    border-bottom: 1px solid var(--vtc-border);
    box-shadow: none;
}

/* ------------------------------------------------------------------
 * 6. Cards and blocks
 * ------------------------------------------------------------------ */
.card {
    border-radius: var(--vtc-radius);
    box-shadow: var(--vtc-shadow-sm);
}

.card-bordered {
    border: 1px solid var(--vtc-border);
}

.card .card-inner {
    border-radius: inherit;
}

.card-preview {
    box-shadow: var(--vtc-shadow-sm);
}

/* ------------------------------------------------------------------
 * 7. Tables and datatables
 * ------------------------------------------------------------------ */
.table thead th,
table.dataTable thead th,
table.dataTable thead td {
    background-color: #f7f9fc;
    color: #526484;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-top: none;
    border-bottom: 1px solid var(--vtc-border);
}

.table td,
table.dataTable td {
    border-top: 1px solid #eef2f7;
    vertical-align: middle;
}

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

.nk-tb-list .nk-tb-item:hover:not(.nk-tb-head) {
    background-color: #f2f7f4;
}

.nk-tb-list .nk-tb-head .nk-tb-col {
    background-color: #f7f9fc;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border-radius: 6px;
}

/* ------------------------------------------------------------------
 * 8. Forms
 * ------------------------------------------------------------------ */
.form-control,
.custom-select,
div.dataTables_wrapper div.dataTables_filter input {
    border-color: #dbe2ea;
    border-radius: 6px;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--vtc-green-bright);
    box-shadow: 0 0 0 3px var(--vtc-green-glow);
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: var(--vtc-green);
    background-color: var(--vtc-green);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--vtc-green-glow);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--vtc-green-bright);
}

/* ------------------------------------------------------------------
 * 9. Pagination, tabs, dropdowns, progress
 * ------------------------------------------------------------------ */
.page-link {
    color: var(--vtc-green);
}

.page-link:hover {
    color: var(--vtc-green-hover);
    background-color: var(--vtc-green-tint);
}

.page-item.active .page-link {
    color: #fff;
    background-color: var(--vtc-green);
    border-color: var(--vtc-green);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--vtc-green);
}

.nav-tabs .nav-link:after {
    background: var(--vtc-green);
}

.nav-tabs .nav-link:hover {
    color: var(--vtc-green-hover);
}

.dropdown-menu {
    border-radius: var(--vtc-radius);
    border-color: var(--vtc-border);
    box-shadow: var(--vtc-shadow-md);
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background-color: var(--vtc-green);
}

.progress-bar {
    background-color: var(--vtc-green);
}

/* ------------------------------------------------------------------
 * 10. Modals, alerts, misc surfaces
 * ------------------------------------------------------------------ */
.modal-content {
    border-radius: var(--vtc-radius);
    border: none;
    box-shadow: var(--vtc-shadow-md);
}

.alert {
    border-radius: 8px;
}

.alert-primary {
    color: var(--vtc-green-deep);
    background-color: var(--vtc-green-tint);
    border-color: rgba(27, 122, 67, 0.25);
}

/* ------------------------------------------------------------------
 * 11. Stepper (add_scholarship wizard)
 * ------------------------------------------------------------------ */
.bs-stepper .step-trigger:hover {
    background-color: var(--vtc-green-tint);
}

.bs-stepper .active .bs-stepper-circle {
    background-color: var(--vtc-green);
}

.bs-stepper .active .bs-stepper-label {
    color: var(--vtc-green);
}

/* ------------------------------------------------------------------
 * 12. Icon buttons and utility accents
 * ------------------------------------------------------------------ */
.btn-icon.btn-trigger:hover,
.btn-trigger:hover:before {
    background-color: var(--vtc-green-tint);
}

.icon-circle.bg-primary-dim,
.bg-primary-dim {
    background-color: var(--vtc-green-tint) !important;
    color: var(--vtc-green);
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--vtc-green) !important;
}