/*
 * hz-theme.css — tema hz-2026 ("HzGroup warm gold") untuk tampilan hz-v3 (Bootstrap 3).
 *
 * Dimuat SETELAH semua CSS lain di layout. Lapisan ini hanya mengubah warna, huruf,
 * radius, dan bayangan. Struktur menu, teks, kolom, form, dan alur tidak diubah,
 * sehingga UX hz-v3 tetap sama.
 *
 * Palet diambil apa adanya dari hz-2026/resources/css/app.css (:root).
 */

:root {
    --hz-background: hsl(40 33% 97%);
    --hz-foreground: hsl(24 16% 12%);
    --hz-card: hsl(0 0% 100%);
    --hz-primary: hsl(35 92% 50%);
    --hz-primary-hover: hsl(35 92% 45%);
    --hz-primary-foreground: hsl(30 45% 12%);
    --hz-secondary: hsl(40 24% 93%);
    --hz-secondary-foreground: hsl(26 18% 20%);
    --hz-muted: hsl(40 22% 94%);
    --hz-muted-foreground: hsl(30 8% 42%);
    --hz-accent: hsl(40 60% 90%);
    --hz-accent-foreground: hsl(28 40% 18%);
    --hz-destructive: hsl(0 72% 48%);
    --hz-border: hsl(36 24% 87%);
    --hz-input: hsl(36 24% 87%);
    --hz-ring: hsl(35 92% 50%);
    --hz-success: hsl(150 45% 34%);
    --hz-info: hsl(190 40% 40%);
    --hz-warning: hsl(32 85% 44%);
    --hz-nav: hsl(42 30% 95%);
    --hz-radius: 0.6rem;
    --hz-radius-sm: calc(0.6rem - 4px);
    --hz-shadow: 0 1px 2px hsl(24 16% 12% / 0.06), 0 1px 3px hsl(24 16% 12% / 0.08);
    --hz-shadow-lg: 0 10px 24px hsl(24 16% 12% / 0.12);
    --hz-font: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

/* ---------- Dasar ---------- */
html,
body {
    background-color: var(--hz-background);
}

body {
    color: var(--hz-foreground);
    font-family: var(--hz-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
input, button, select, textarea {
    font-family: var(--hz-font);
}

a {
    color: hsl(28 70% 34%);
}

a:hover,
a:focus {
    color: hsl(28 70% 24%);
}

hr {
    border-top-color: var(--hz-border);
}

::selection {
    background: var(--hz-accent);
    color: var(--hz-accent-foreground);
}

/* ---------- Navbar (menu utama) ---------- */
.navbar-default {
    background-color: var(--hz-nav);
    border-color: var(--hz-border);
    border-width: 0 0 1px;
    box-shadow: var(--hz-shadow);
}

/* Logo HzGroup: murni dekorasi lewat CSS, tidak menambah teks atau tautan. */
.navbar-default .navbar-header::before {
    content: '';
    float: left;
    width: 34px;
    height: 34px;
    margin: 8px 6px 8px 12px;
    border-radius: 8px;
    background: url('../images/hz/hz-olympian.svg') center / cover no-repeat;
    box-shadow: 0 1px 2px hsl(24 16% 12% / 0.25);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: var(--hz-secondary-foreground);
    font-weight: 500;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--hz-accent-foreground);
    background-color: var(--hz-accent);
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--hz-primary-foreground);
    background-color: var(--hz-accent);
    box-shadow: inset 0 -3px 0 var(--hz-primary);
}

.navbar-default .navbar-toggle {
    border-color: var(--hz-border);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: var(--hz-accent);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--hz-secondary-foreground);
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: var(--hz-border);
}

/* ---------- Dropdown ---------- */
.dropdown-menu {
    background-color: var(--hz-card);
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow-lg);
    padding: 6px 0;
}

.dropdown-menu > li > a {
    color: var(--hz-foreground);
    padding: 5px 16px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: var(--hz-accent-foreground);
    background-color: var(--hz-accent);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: var(--hz-primary-foreground);
    background-color: var(--hz-primary);
}

.dropdown-header {
    color: var(--hz-muted-foreground);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dropdown-menu .divider {
    background-color: var(--hz-border);
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: var(--hz-foreground);
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--hz-accent-foreground);
        background-color: var(--hz-accent);
    }
}

/* ---------- Panel / kartu ---------- */
.panel {
    background-color: var(--hz-card);
    border-color: var(--hz-border);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow);
}

.panel > .panel-heading {
    border-top-left-radius: calc(var(--hz-radius) - 1px);
    border-top-right-radius: calc(var(--hz-radius) - 1px);
}

.panel-default > .panel-heading {
    color: var(--hz-secondary-foreground);
    background-color: var(--hz-secondary);
    border-color: var(--hz-border);
    font-weight: 600;
}

.panel-primary {
    border-color: var(--hz-primary);
}

.panel-primary > .panel-heading {
    color: var(--hz-primary-foreground);
    background-color: var(--hz-primary);
    border-color: var(--hz-primary);
    font-weight: 600;
}

.panel-footer {
    background-color: var(--hz-muted);
    border-top-color: var(--hz-border);
    border-bottom-left-radius: calc(var(--hz-radius) - 1px);
    border-bottom-right-radius: calc(var(--hz-radius) - 1px);
}

.well {
    background-color: var(--hz-muted);
    border-color: var(--hz-border);
    border-radius: var(--hz-radius);
    box-shadow: none;
}

/* ---------- Tabel ---------- */
.table > thead > tr > th,
.table > thead > tr > td {
    background-color: var(--hz-secondary);
    color: var(--hz-secondary-foreground);
    border-bottom: 2px solid var(--hz-border);
    font-weight: 600;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border-color: var(--hz-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: hsl(40 30% 98%);
}

.table-hover > tbody > tr:hover {
    background-color: var(--hz-accent);
}

/* ---------- Tombol ---------- */
.btn {
    border-radius: var(--hz-radius-sm);
    font-weight: 500;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-default {
    color: var(--hz-foreground);
    background-color: var(--hz-card);
    border-color: var(--hz-border);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    color: var(--hz-accent-foreground);
    background-color: var(--hz-accent);
    border-color: hsl(36 30% 78%);
}

.btn-primary {
    color: var(--hz-primary-foreground);
    background-color: var(--hz-primary);
    border-color: var(--hz-primary-hover);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary:active:focus {
    color: var(--hz-primary-foreground);
    background-color: var(--hz-primary-hover);
    border-color: hsl(35 92% 40%);
}

.btn-success {
    background-color: var(--hz-success);
    border-color: hsl(150 45% 29%);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: hsl(150 45% 29%);
    border-color: hsl(150 45% 25%);
}

.btn-info {
    background-color: var(--hz-info);
    border-color: hsl(190 40% 34%);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: hsl(190 40% 34%);
    border-color: hsl(190 40% 30%);
}

.btn-warning {
    background-color: var(--hz-warning);
    border-color: hsl(32 85% 38%);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: hsl(32 85% 38%);
    border-color: hsl(32 85% 34%);
}

.btn-danger {
    background-color: var(--hz-destructive);
    border-color: hsl(0 72% 42%);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: hsl(0 72% 42%);
    border-color: hsl(0 72% 38%);
}

.btn:focus,
.btn.focus,
.btn:active:focus {
    outline: 2px solid hsl(35 92% 50% / 0.45);
    outline-offset: 1px;
}

.btn-link {
    color: hsl(28 70% 34%);
}

/* ---------- Form ---------- */
.form-control,
.input-group-addon {
    border-color: var(--hz-input);
    border-radius: var(--hz-radius-sm);
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--hz-ring);
    box-shadow: 0 0 0 3px hsl(35 92% 50% / 0.18);
}

.input-group-addon {
    background-color: var(--hz-muted);
    color: var(--hz-muted-foreground);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--hz-muted);
}

.has-error .form-control {
    border-color: var(--hz-destructive);
}

.has-error .help-block,
.has-error .control-label {
    color: var(--hz-destructive);
}

/* ---------- Komponen lain ---------- */
.alert {
    border-radius: var(--hz-radius);
}

.label,
.badge {
    border-radius: 999px;
    font-weight: 600;
}

.label-primary,
.badge-primary {
    background-color: var(--hz-primary);
    color: var(--hz-primary-foreground);
}

.label-default {
    background-color: var(--hz-muted-foreground);
}

.pagination > li > a,
.pagination > li > span {
    color: var(--hz-secondary-foreground);
    border-color: var(--hz-border);
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: var(--hz-accent);
    border-color: var(--hz-border);
    color: var(--hz-accent-foreground);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--hz-primary);
    border-color: var(--hz-primary);
    color: var(--hz-primary-foreground);
}

.nav-tabs {
    border-bottom-color: var(--hz-border);
}

.nav-tabs > li > a:hover {
    background-color: var(--hz-accent);
    border-color: var(--hz-border) var(--hz-border) transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--hz-foreground);
    border-color: var(--hz-border) var(--hz-border) transparent;
    box-shadow: inset 0 3px 0 var(--hz-primary);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--hz-primary);
    color: var(--hz-primary-foreground);
}

.list-group-item {
    border-color: var(--hz-border);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--hz-primary);
    border-color: var(--hz-primary);
    color: var(--hz-primary-foreground);
}

.modal-content {
    border-color: var(--hz-border);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--hz-border);
}

.modal-backdrop.in {
    opacity: 0.4;
}

.progress-bar {
    background-color: var(--hz-primary);
}

/* ---------- DataTables ---------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--hz-input);
    border-radius: var(--hz-radius-sm);
    padding: 3px 6px;
    background-color: var(--hz-card);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--hz-ring);
    box-shadow: 0 0 0 3px hsl(35 92% 50% / 0.18);
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom-color: var(--hz-border);
}

table.dataTable.no-footer {
    border-bottom-color: var(--hz-border);
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: hsl(40 30% 98%);
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: var(--hz-accent);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--hz-radius-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--hz-primary-foreground) !important;
    background: var(--hz-primary);
    border-color: var(--hz-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--hz-accent-foreground) !important;
    background: var(--hz-accent);
    border-color: var(--hz-border);
}

/* ---------- jQuery UI (datepicker, autocomplete, dialog) ---------- */
.ui-widget {
    font-family: var(--hz-font);
}

.ui-widget-content {
    border-color: var(--hz-border);
    color: var(--hz-foreground);
}

.ui-widget-header {
    background: var(--hz-secondary);
    border-color: var(--hz-border);
    color: var(--hz-secondary-foreground);
}

.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-state-hover,
.ui-widget-content .ui-state-hover {
    background: var(--hz-accent);
    border-color: var(--hz-border);
    color: var(--hz-accent-foreground);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
    background: var(--hz-primary);
    border-color: var(--hz-primary-hover);
    color: var(--hz-primary-foreground);
}

.ui-autocomplete,
.ui-datepicker,
.ui-dialog {
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow-lg);
}

/* ---------- Bootstrap datetimepicker ---------- */
.bootstrap-datetimepicker-widget.dropdown-menu {
    border-radius: var(--hz-radius);
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td span:hover {
    background: var(--hz-accent);
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
    background-color: var(--hz-primary);
    color: var(--hz-primary-foreground);
    text-shadow: none;
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--hz-primary);
}

/* ---------- Typeahead ---------- */
.typeahead__container .typeahead__list > li.active > a,
.typeahead__container .typeahead__list > li > a:hover {
    background-color: var(--hz-accent);
}