/* ============================================================
   Oemah Etnik — Admin Theme (Ivory & Charcoal)
   Layered on top of Jampack dist/css/style.css
   Palette:
     Background   #F7F5F0  warm ivory
     Surface      #FFFFFF
     Primary      #1C1A17  charcoal (remapped in style.css)
     Accent       #A0714F  terracotta batik
     Text         #2B2926 / muted #8A857C
     Border       #E6E1D6
   ============================================================ */

:root {
    --oe-bg: #f7f5f0;
    --oe-surface: #ffffff;
    --oe-charcoal: #1c1a17;
    --oe-charcoal-soft: #35322c;
    --oe-accent: #a0714f;
    --oe-accent-soft: #f3ece5;
    --oe-text: #2b2926;
    --oe-muted: #8a857c;
    --oe-border: #e6e1d6;
    --bs-primary: #1c1a17;
    --bs-primary-rgb: 28, 26, 23;
    --bs-body-font-family:
        "Work Sans", "Inter", system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------- */
body {
    font-family: var(--bs-body-font-family);
    color: var(--oe-text);
    background-color: #ffffff;
    font-size: 0.8125rem;
}

.hk-pg-wrapper {
    background-color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--oe-text);
    letter-spacing: 0.01em;
}

.oe-brand-font {
    font-family: "Marcellus", Georgia, serif;
    letter-spacing: 0.08em;
}

/* ---------- Top navbar ---------- */
.hk-navbar.navbar-light {
    background-color: var(--oe-surface);
    border-bottom: 1px solid var(--oe-border);
    box-shadow: none;
}

/* ---------- Sidebar ---------- */
.hk-menu,
.hk-wrapper[data-layout="vertical"] .hk-menu,
.hk-wrapper[data-layout="vertical"][data-menu="light"] .hk-menu {
    background: var(--oe-bg);
    border-right: 1px solid var(--oe-border);
}

.hk-menu .menu-header {
    border-bottom: 1px solid var(--oe-border);
}

.hk-menu .nav-header span {
    color: var(--oe-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.66rem;
}

.hk-menu .navbar-nav > .nav-item > .nav-link {
    color: var(--oe-text);
}

.hk-menu .navbar-nav .nav-link:hover {
    color: var(--oe-charcoal);
    background-color: #ece7db; /* visible against the beige sidebar */
    border-radius: 0.375rem;
}

.hk-menu .navbar-nav .nav-item.active > .nav-link,
.hk-menu .navbar-nav .nav-link.active {
    color: var(--oe-accent) !important;
    background-color: var(--oe-accent-soft);
    border-radius: 0.375rem;
}

.hk-menu .navbar-nav > .nav-item.active > .nav-link .nav-icon-wrap,
.hk-menu .navbar-nav > .nav-item > .nav-link.active .nav-icon-wrap {
    color: #fff !important;
}

.hk-menu .navbar-nav .nav-children .nav-link.active,
.hk-menu .navbar-nav .nav-children .nav-link:hover {
    color: var(--oe-accent);
    background-color: transparent;
}

/* ---------- Links ---------- */
a {
    color: var(--oe-charcoal);
}

a:hover {
    color: var(--oe-accent);
}

/* ---------- Buttons ---------- */
.btn {
    font-size: 0.8rem;
    border-radius: 0.375rem;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--oe-charcoal-soft);
    border-color: var(--oe-charcoal-soft);
}

.btn-outline-primary {
    color: var(--oe-charcoal);
    border-color: var(--oe-charcoal);
}

.btn-outline-primary:hover {
    background-color: var(--oe-charcoal);
    border-color: var(--oe-charcoal);
    color: #fff;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    font-size: 0.8rem;
    padding: 0.45rem 0.75rem;
    border-color: var(--oe-border);
    background-color: #fff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--oe-charcoal);
    box-shadow: 0 0 0 0.15rem rgba(28, 26, 23, 0.08);
}

.form-check-input:checked {
    background-color: var(--oe-charcoal);
    border-color: var(--oe-charcoal);
}

.col-form-label,
.form-label,
label {
    font-size: 0.8rem;
}

.input-group-text {
    font-size: 0.8rem;
    background-color: var(--oe-bg);
    border-color: var(--oe-border);
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--oe-border);
    box-shadow: 0 1px 2px rgba(28, 26, 23, 0.04);
}

/* ---------- Tables ---------- */
.table {
    color: var(--oe-text);
    font-size: 0.8rem;
}

.table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--oe-muted);
    font-weight: 600;
    background-color: #fbfaf7;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #faf8f4;
    --bs-table-accent-bg: #faf8f4;
}

.table-bordered th,
.table-bordered td {
    border-color: var(--oe-border) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--oe-accent-soft);
    --bs-table-accent-bg: var(--oe-accent-soft);
}

/* ---------- Pagination ---------- */
.page-item.active .page-link {
    background-color: var(--oe-charcoal);
    border-color: var(--oe-charcoal);
    color: #fff;
}

.page-link {
    color: var(--oe-charcoal);
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb-item a {
    color: var(--oe-muted);
}

.breadcrumb-item a:hover {
    color: var(--oe-accent);
}

.breadcrumb-item.active {
    color: var(--oe-text);
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
    border: 1px solid var(--oe-border);
    box-shadow: 0 8px 24px rgba(28, 26, 23, 0.08);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--oe-accent-soft);
    color: var(--oe-charcoal);
}

/* ---------- Badges / alerts accents ---------- */
.badge-soft-primary,
.badge.badge-soft-primary {
    background: var(--oe-accent-soft);
    color: var(--oe-accent);
}

/* ---------- DataTables (BS5 plugin) ----------
   Index views all run DataTables, so `table.dataTable` targets them
   without affecting other tables (e.g. wide matrix reports). */
table.dataTable {
    border: 0 !important;
    border-color: var(--oe-border);
}

table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td {
    padding: 0.65rem 0.75rem;
}

/* Drop vertical gridlines for a cleaner, Jampack-style list */
table.dataTable.table-bordered > :not(caption) > * > * {
    border-left: 0;
    border-right: 0;
}

table.dataTable.table-bordered > :not(caption) > * {
    border-width: 0;
}

table.dataTable > thead > tr > th {
    border-bottom: 2px solid #e0dacc !important;
}

table.dataTable > tbody > tr > td {
    border-bottom: 1px solid var(--oe-border);
}

table.dataTable > tbody > tr:hover > td {
    background-color: var(--oe-accent-soft);
    --bs-table-accent-bg: var(--oe-accent-soft);
}

/* Wrapper controls: search, length, info, pagination */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--oe-border);
    border-radius: 0.375rem;
    padding: 0.3rem 0.6rem;
}

.dataTables_wrapper .dataTables_length select {
    min-width: 70px;
    margin: 0 0.4rem;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5rem;
}

.dataTables_wrapper .dataTables_info {
    color: var(--oe-muted);
    font-size: 0.75rem;
    padding-top: 1rem;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.75rem;
}

/* ---------- Select2 (matches form controls) ---------- */
.select2-container .select2-selection--single {
    height: 34px;
    border: 1px solid var(--oe-border);
    border-radius: 0.375rem;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    /* line-height: 32px; */
    font-size: 0.8rem;
    /* padding-left: 0.75rem; */
    color: var(--oe-text);
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 32px;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--oe-border);
    border-radius: 0.375rem;
    min-height: 34px;
}

.select2-container--default.select2-container--focus
    .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--oe-charcoal);
}

.select2-dropdown {
    border-color: var(--oe-border);
    font-size: 0.8rem;
}

.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: var(--oe-accent);
    color: #fff;
}

/* ---------- Modals ---------- */
.modal-content {
    border: 1px solid var(--oe-border);
    border-radius: 0.5rem;
}

.modal-header {
    border-bottom: 1px solid var(--oe-border);
}

.modal-footer {
    border-top: 1px solid var(--oe-border);
}

/* ---------- Footer ---------- */
.hk-footer {
    background-color: transparent;
    border-top: 1px solid var(--oe-border);
}

.footer-text,
.hk-footer .footer {
    color: var(--oe-muted);
    font-size: 0.75rem;
}

/* ---------- Misc utility ---------- */
.text-red {
    color: #b0413e;
}

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

.text-accent {
    color: var(--oe-accent) !important;
}

.bg-accent {
    background-color: var(--oe-accent) !important;
}