/*
 * ============================================================
 * optimize.css — Theme Overrides
 * Semua warna & font mengacu ke design-system.css (:root vars).
 * Jangan hardcode hex di sini — edit design-system.css saja.
 * ============================================================
 */

/* ── Global Font & Body ───────────────────────────────────── */
body,
.content-wrapper,
.main-header,
.main-sidebar, 
.main-footer,
.card,
.dropdown-menu,
.modal,
table {
  font-family: var(--font-family-base) !important;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

body {
  background-color: var(--color-bg) !important;
}

/* ── Content Wrapper ──────────────────────────────────────── */
.content-wrapper {
  background-color: var(--color-bg) !important;
}

/* ── Card ─────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
}

/* ── Top Navbar ───────────────────────────────────────────── */
.main-header.navbar {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 16px;
}

.main-header .navbar-nav .nav-link {
  color: var(--color-text) !important;
}

.main-header .navbar-nav .nav-link:hover {
  color: var(--color-accent) !important;
}

.main-header .navbar-nav .navbarperson {
  font-weight: var(--font-weight-medium);
  color: var(--color-text) !important;
  gap: 6px;
}

.main-header .navbar-nav .navbarperson .material-icons {
  font-size: 22px;
  color: var(--color-text-muted);
}

.main-header .dropdown-menu {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
}

.main-header .dropdown-item:hover {
  background-color: var(--color-bg);
  color: var(--color-accent);
}

/* ── Footer ───────────────────────────────────────────────── */
.main-footer {
  background: var(--color-surface) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-text-muted) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium);
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: var(--z-sticky);
}
 
/* ── Card Header Primary ──────────────────────────────────── */
.card .card-header-primary .card-icon,
.card .card-header-primary .card-text,
.card .card-header-primary:not(.card-header-icon):not(.card-header-text),
.card.bg-primary,
.card.card-rotate.bg-primary .front,
.card.card-rotate.bg-primary .back {
  background: var(--color-primary) !important;
  box-shadow: var(--shadow-md);
}

.card .card-header-primary .card-title,
.card .card-header-primary .card-category {
  color: var(--color-primary-text) !important;
}

/* ── Sidebar ──────────────────────────────────────────────── */

/* Sidebar container background — hitam penuh */
.main-sidebar,
.main-sidebar .sidebar {
  background-color: var(--color-primary) !important;
}

/* Brand area */
.main-sidebar .brand-link,
.brand-text-first {
  background: var(--color-primary) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* All nav link text color */
[class*="sidebar-"] .nav-sidebar > .nav-item > .nav-link,
[class*="sidebar-"] .nav-sidebar > .nav-item > .nav-link p,
[class*="sidebar-"] .nav-sidebar > .nav-item > .nav-link i,
.main-sidebar .nav-link,
.main-sidebar .nav-link p {
  color: var(--color-nav-text) !important;
}

/* Open treeview parent */
.sidebar .nav .has-treeview.menu-open > .nav-link,
[class*="sidebar-"] .sidebar .has-treeview.menu-open a {
  color: var(--color-primary-text) !important;
}

/* Nav item hover */
[class*="sidebar-"] .nav-sidebar > .nav-item > .nav-link:hover,
[class*="sidebar-"] .nav-sidebar > .nav-item.menu-open > .nav-link,
.main-sidebar .nav-link:hover {
  background-color: var(--color-nav-hover-bg) !important;
  color: var(--color-nav-text-hover) !important;
}

/* Nav sub-menu (treeview) — tetap hitam */
.nav.nav-treeview,
[class*="sidebar-"] .nav-treeview {
  background: var(--color-primary) !important;
  padding: 4px 0;
  margin-top: 0;
}

/* Sub-menu item text */
[class*="sidebar-"] .nav-treeview > .nav-item > .nav-link,
[class*="sidebar-"] .nav-treeview > .nav-item > .nav-link p {
  color: var(--color-nav-text) !important;
  padding-left: 36px;
}

[class*="sidebar-"] .nav-treeview > .nav-item > .nav-link:hover {
  background-color: var(--color-nav-hover-bg) !important;
  color: var(--color-nav-text-hover) !important;
}

/* Active nav item — hitam + left-border merah */
[class*="sidebar-"] .nav-sidebar > .nav-item > .nav-link.active,
[class*="sidebar-"] .nav-sidebar > .nav-item > .nav-link.active:hover,
[class*="sidebar-"] .nav-treeview > .nav-item > .nav-link.active,
[class*="sidebar-"] .nav-treeview > .nav-item > .nav-link.active:hover,
.main-sidebar .nav-link.active,
.page-item.active .page-link {
  background-color: var(--color-nav-active-bg) !important;
  color: var(--color-primary-text) !important;
  border-left: 3px solid var(--color-nav-active-border) !important;
  box-shadow: none !important;
}

/* Active link text + icon color */
[class*="sidebar-"] .nav-link.active,
[class*="sidebar-"] .nav-link.active p,
[class*="sidebar-"] .nav-link.active i {
  color: var(--color-primary-text) !important;
}

/* Angle icon (treeview arrow) */
.nav-sidebar .nav-link p .right,
.nav-sidebar .nav-link p .fas.fa-angle-left {
  color: var(--color-nav-text) !important;
  opacity: 0.6;
}

/* Material Symbols in sidebar */
.main-sidebar .material-symbols-outlined {
  color: var(--color-nav-text);
  margin-right: 8px;
  font-size: 20px;
  vertical-align: middle;
  min-width: 20px;
}

/* ── Links ────────────────────────────────────────────────── */
a { 
  color: var(--color-link);
}
a:hover {
  color: var(--color-link-hover);
} 

/* ════════════════════════════════════════════════════════════
   FORM INPUTS — override tribox.css underline style
   ════════════════════════════════════════════════════════════ */

/* Labels */
label:not(.form-check-label):not(.custom-file-label):not(.auth-label):not(.file-upload) {
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-text-muted) !important;
  font-size: 13px !important;
  margin-bottom: 5px;
}

label.hw_required::after,
.hw_required::after {
  content: ' *';
  color: var(--color-accent);
  font-weight: 700;
}

/* Base input — replace underline gradient with boxed style */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not(.auth-input),
input.form-control:not(.auth-input),
textarea,
textarea.form-control {
  background: var(--color-surface) !important;
  background-image: none !important;
  background-size: auto !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  height: auto !important;
  min-height: 38px;
  padding: 8px 12px !important;
  font-size: var(--font-size-base) !important;
  font-family: var(--font-family-base) !important;
  color: var(--color-text) !important;
  transition: border-color var(--transition-base), box-shadow var(--transition-base) !important;
  box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.auth-input):focus,
input.form-control:not(.auth-input):focus,
textarea:focus,
textarea.form-control:focus {
  background: var(--color-surface) !important;
  background-image: none !important;
  background-size: auto !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
  outline: 0 !important;
  color: var(--color-text) !important;
  transition-duration: 0.15s !important;
}

input.form-control.is-invalid:not(.auth-input),
textarea.form-control.is-invalid {
  border-color: var(--color-danger) !important;
  box-shadow: none !important;
}

input.form-control.is-invalid:not(.auth-input):focus,
textarea.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* Select */
select.form-control {
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  height: auto !important;
  min-height: 38px;
  padding: 7px 12px !important;
  font-size: var(--font-size-base) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

select.form-control:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
  outline: 0 !important;
}

/* Select2 styling */
.select2-container--bootstrap4 .select2-selection,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  min-height: 38px !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--font-size-base) !important;
  background: var(--color-surface) !important;
}

.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}

.select2-dropdown {
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-family-base) !important;
  font-size: var(--font-size-base) !important;
}

.select2-results__option--highlighted {
  background-color: var(--color-accent) !important;
}

/* ════════════════════════════════════════════════════════════
   BUTTONS — full override using design system
   ════════════════════════════════════════════════════════════ */

/* Base */
.btn {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-family-base) !important;
  font-size: 13px !important;
  font-weight: var(--font-weight-medium) !important;
  padding: 8px 18px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base) !important;
}

/* Primary → merah */
.btn.btn-primary,
.btn-primary {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
  color: #ffffff !important;
}

.btn.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--color-accent-dark) !important;
  border-color: var(--color-accent-dark) !important;
}

/* Warning / Kembali → dark grey */
.btn.btn-warning,
.btn-warning,
.addnewbtn {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.20) !important;
}

.btn.btn-warning:hover,
.btn-warning:hover,
.btn-warning:not(:disabled):not(.disabled):active,
.addnewbtn:hover {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.30) !important;
}

/* hw_btn_pad.btn-warning = tombol Kembali → dark */
.hw_btn_pad.btn-warning,
a.hw_btn_pad.btn-warning {
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-primary-light) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.hw_btn_pad.btn-warning:hover,
a.hw_btn_pad.btn-warning:hover {
  background-color: #2d2d2d !important;
  border-color: #2d2d2d !important;
  color: #ffffff !important;
}

/* hw_btn_pad.btn-primary = tombol Simpan → merah */
.hw_btn_pad.btn-primary,
button.hw_btn_pad.btn-primary {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
}

.hw_btn_pad.btn-primary:hover {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

/* Danger */
.btn.btn-danger,
.btn-danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
}

.btn.btn-danger:hover,
.btn-danger:hover {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

/* Success */
.btn.btn-success,
.btn-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #ffffff !important;
}

/* Secondary / Default */
.btn.btn-default,
.btn.btn-secondary,
.btn-secondary,
.btn-default {
  background-color: transparent !important;
  border: 1.5px solid var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

.btn.btn-default:hover,
.btn.btn-secondary:hover {
  background-color: var(--color-bg) !important;
  border-color: #9ca3af !important;
}

/* Link button */
.btn.btn-link {
  color: var(--color-accent) !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Small button */
.btn-sm,
.btn.btn-sm {
  padding: 5px 12px !important;
  font-size: 12px !important;
}

/* Icon button in tables */
.table .new_hw_btn,
a.hw_btn,
button.hw_btn {
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════
   CARD — full design system styling
   ════════════════════════════════════════════════════════════ */

.card {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  margin-bottom: 24px;
}

.card-header:not(.card-header-primary):not(.card-header-icon):not(.card-header-text) {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 14px 20px !important;
  font-weight: var(--font-weight-semi) !important;
  font-size: var(--font-size-base) !important;
  color: var(--color-text) !important;
}

.card-header.card-header-primary {
  border-radius: 0 !important;
  padding: 16px 20px !important;
}

.card-header.card-header-primary h4.card-title {
  font-size: 15px !important;
  font-weight: var(--font-weight-semi) !important;
  margin-bottom: 2px;
}

.card-body {
  padding: 20px !important;
  background: var(--color-surface);
}

.card-footer {
  background: var(--color-bg) !important;
  border-top: 1px solid var(--color-border) !important;
  padding: 12px 20px !important;
}

/* Card header .row alignment */
.card-header .row {
  align-items: center;
}

/* ════════════════════════════════════════════════════════════
   DATATABLE — full design system styling
   ════════════════════════════════════════════════════════════ */

/* Controls bar: length select + search input */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
  font-family: var(--font-family-base) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--color-text-muted) !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-weight: var(--font-weight-normal) !important;
  color: var(--color-text-muted) !important;
  font-size: var(--font-size-sm) !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Length / search inputs inside DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input[type="search"] {
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 10px !important;
  height: auto !important;
  min-height: 32px;
  font-size: var(--font-size-sm) !important;
  font-family: var(--font-family-base) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-base) !important;
}

.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.10) !important;
  outline: 0 !important;
}

/* Table head */
table.dataTable thead th,
table.dataTable thead td {
  background-color: #f8fafc !important;
  color: var(--color-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-top: none !important;
  border-bottom: 2px solid var(--color-border) !important;
  padding: 11px 12px !important;
  white-space: nowrap;
}

/* Sort arrows */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  color: var(--color-text-light) !important;
  opacity: 1 !important;
}

table.dataTable thead .sorting_asc::after {
  color: var(--color-accent) !important;
}

table.dataTable thead .sorting_desc::after {
  color: var(--color-accent) !important;
}

/* Table body rows */
table.dataTable tbody tr {
  background: var(--color-surface) !important;
  transition: background var(--transition-fast);
}

table.dataTable tbody tr:hover {
  background: var(--color-bg) !important;
}

table.dataTable tbody tr.odd {
  background: var(--color-surface) !important;
}

table.dataTable tbody tr.even {
  background: #fafafa !important;
}

table.dataTable tbody tr.odd:hover,
table.dataTable tbody tr.even:hover {
  background: var(--color-bg) !important;
}

table.dataTable tbody td,
table.dataTable tbody th {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-top: none !important;
  vertical-align: middle !important;
  font-size: var(--font-size-sm) !important;
  color: var(--color-text) !important;
}

/* DataTable pagination */
.dataTables_wrapper .dataTables_paginate {
  font-family: var(--font-family-base) !important;
  font-size: var(--font-size-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  padding: 5px 10px !important;
  margin: 0 2px !important;
  font-size: var(--font-size-sm) !important;
  color: var(--color-text-muted) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--color-text-light) !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: not-allowed;
}

/* Bootstrap pagination (non-DataTable) */
.page-item.active .page-link {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #ffffff !important;
}

.page-link {
  color: var(--color-accent) !important;
  border-color: var(--color-border) !important;
  font-size: var(--font-size-sm) !important;
  font-family: var(--font-family-base) !important;
}

.page-link:hover {
  background-color: var(--color-bg) !important;
  color: var(--color-accent-hover) !important;
}

/* ── Nav pills ────────────────────────────────────────────── */
.nav-pills .nav-link:not(.active):hover,
.nav-pills .nav-link:not(.active):hover i {
  color: var(--color-primary-text) !important;
}

/* ── Card layout helpers ──────────────────────────────────── */

/* ── File upload label ────────────────────────────────────── */
label.file-upload {
  position: relative;
  overflow: hidden;
  color: var(--color-primary-text) !important;
  cursor: pointer;
}
input[type='file'] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

/* ── Table helpers ────────────────────────────────────────── */
.fixtable.table-bordered tbody td {
  border-bottom-width: 1px !important;
}
.shtable td,
.shtable th {
  font-size: var(--font-size-sm) !important;
  vertical-align: middle !important;
}
table.table-bordered.dataTable tbody th,
table.table-bordered.dataTable tbody td {
  border-bottom-width: 1px;
}

/* ── DataTable action buttons ─────────────────────────────── */
.table .new_hw_btn {
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  margin-right: 6px;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
}
.table .new_hw_btn i,
.table .new_hw_btn .fa {
  color: #f47c20;
  font-size: 18px;
}
.table .new_hw_btn.green i { color: var(--color-success); }
.table .new_hw_btn.cyan  i { color: #4f85b3; }
.table .new_hw_btn.red   i { color: var(--color-danger); }

/* hw_btn (action links in DataTable HTML) */
a.hw_btn,
.hw_btn {
  background: transparent !important;
  border: none !important;
  padding: 4px 6px !important;
  box-shadow: none !important;
  font-size: var(--font-size-sm);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition-fast);
}
a.hw_btn:hover { background: var(--color-bg) !important; }
a.hw_btn.hw_red i,
a.hw_btn.hw_red .fa { color: var(--color-danger) !important; }
a.hw_btn i, a.hw_btn .fa { color: var(--color-text-muted); font-size: 16px; }

/* ── Note editor ──────────────────────────────────────────── */
.note-editable p {
  margin-bottom: 0;
}

/* ── Utility: boxshadow ───────────────────────────────────── */
.boxshadow {
  box-shadow: var(--shadow-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
}

/* ── Status badge helpers ─────────────────────────────────── */
.tosabox_paket {
  max-width: 302px;
  text-align: center;
  margin-top: 10px;
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}
.tosabox_paket.textgreen {
  background: var(--color-success);
  color: var(--color-primary-text);
}
.tosabox_paket.textyellow {
  background: var(--color-warning);
}
.tosabox_paket.textred {
  background: var(--color-danger);
  color: var(--color-primary-text);
}

/* ── Color utility classes ────────────────────────────────── */
.red_clr    { background: var(--color-danger)  !important; }
.orange_clr { background: var(--color-warning) !important; }
.green_clr  { background: var(--color-success) !important; }
.blue_clr   { background: var(--color-info)    !important; }

.btn_new {
  display: inline-block;
  width: 100px;
  border-radius: var(--radius-sm);
  padding: 5px 15px;
  margin-bottom: 5px;
  color: var(--color-primary-text);
  text-align: center;
}
.btn_new:hover {
  color: var(--color-primary-text);
}

/* ── Navbar / top header ──────────────────────────────────── */
.navbarperson {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

/* ── Misc show/hide helpers ───────────────────────────────── */
.ppnwrap,
.hiddenfield,
.nilai_persen_diskon {
  display: none;
}
.ppnwrap.showppn,
.nilai_persen_diskon.shownilai {
  display: table-row;
}

/* ── Customer dropdown ────────────────────────────────────── */
.listkustomer.dropdown-menu {
  top: 31px;
  width: 100%;
  max-width: 100%;
  max-height: 150px;
  overflow-y: scroll;
}
.listkustomer.dropdown-menu li {
  white-space: pre-wrap;
  border-bottom: 1px solid var(--color-border);
}

/* ── Project detail table ─────────────────────────────────── */
.proyekdetail td {
  padding: 5px;
  font-size: var(--font-size-sm);
  color: #000;
  vertical-align: middle;
}
.proyekdetail .bg,
.proyekdetail .bg_white {
  border: 1px solid #807474;
}
.proyekdetail .bg       { background: #aeabab; }
.proyekdetail .bg_white { background: #fff; }
.proyekdetail .form-control {
  background: transparent;
  padding: 0;
  height: auto;
}

/* ── Media detail button ──────────────────────────────────── */
.hw_btn.mediadetail {
  background: var(--color-link);
  color: var(--color-primary-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 5px 15px;
}

/* ── Sea-blue button ──────────────────────────────────────── */
.seablue {
  background: #5b9dd9;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-text);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.seablue:hover {
  background: #3e709d;
  color: var(--color-primary-text);
}

/* ── Status proyek ────────────────────────────────────────── */
.status_proyek {
  background: var(--color-success);
  padding: 5px 15px;
  border-radius: var(--radius-sm);
  color: var(--color-primary-text); 
}
.status_proyek.closed {
  background: var(--color-danger);
} 

/* ── Auth Pages (Login / Register / Forgot Password) ─────── */

/* Full-page dark background with warehouse image + overlay */
.auth-wrapper {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--font-family-base);
  background-color: #020617;
  background-image: url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=2070&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

/* Dark gradient overlay */
.auth-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(2,6,23,0.78), rgba(2,6,23,0.92));
  z-index: 0;
}

/* Subtle grid pattern */
.auth-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 80%);
  mask-image: radial-gradient(ellipse at center, black, transparent 80%);
  z-index: 0;
}

.auth-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  animation: authSlideUp 0.6s ease-out forwards;
}

@keyframes authSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Logo ──────────────────────────────────────────────────── */
.auth-logo-wrap {
  text-align: center;
  margin-bottom: 36px;
}

.auth-logo-top {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.auth-logo-icon {
  width: 48px;
  height: 48px;
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.auth-logo-icon span {
  color: #000000;
  font-size: 24px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  font-family: var(--font-family-base);
}

.auth-logo-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: #ffffff;
  line-height: 1;
  font-family: var(--font-family-base);
}

.auth-logo-bar {
  width: 48px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 99px;
  margin: 10px auto 0;
}

.auth-logo-sub {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 5px;
  margin-top: 14px;
  opacity: 0.85;
}

/* ── Card ──────────────────────────────────────────────────── */
.auth-card {
  background: #ffffff;
  border-radius: 32px;
  overflow: hidden;
  border: none;
  box-shadow: 0 25px 60px -12px rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* ── Card Header ───────────────────────────────────────────── */
.auth-card-header {
  background: #000000;
  padding: 44px 32px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Red accent line at the very top */
.auth-card-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--color-accent);
}

.auth-card-header h2 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-family: var(--font-family-base);
  position: relative;
  z-index: 1;
}

.auth-card-header p {
  color: #4b5563;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ── Card Body ─────────────────────────────────────────────── */
.auth-card-body {
  padding: 32px 36px 40px;
}

.auth-form-group {
  margin-bottom: 18px;
}

.auth-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 7px;
  font-family: var(--font-family-base);
  margin-left: 4px;
}

.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}

.auth-input-wrap {
  position: relative;
}

.auth-input-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  pointer-events: none;
  font-size: 20px;
  transition: color var(--transition-base);
}

.auth-input-wrap:focus-within .auth-input-icon {
  color: var(--color-accent);
}

/* Override tribox.css underline-style inputs */
.auth-input,
.auth-input.form-control {
  width: 100%;
  padding: 15px 16px 15px 48px !important;
  background: #f8fafc !important;
  background-image: none !important;
  background-size: auto !important;
  border: none !important;
  border-radius: 16px !important;
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  outline: none;
  height: auto !important;
  transition: box-shadow var(--transition-base), background var(--transition-base);
  box-shadow: none;
}

.auth-input::placeholder {
  color: #cbd5e1;
}

.auth-input:focus,
.auth-input.form-control:focus {
  background: #ffffff !important;
  background-image: none !important;
  background-size: auto !important;
  box-shadow: 0 0 0 2.5px var(--color-accent) !important;
  border: none !important;
  transition-duration: 0.15s;
}

.auth-input.is-invalid,
.auth-input.form-control.is-invalid {
  box-shadow: 0 0 0 2.5px var(--color-danger) !important;
  border: none !important;
}

.auth-input-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  outline: none;
  font-size: 20px;
  line-height: 1;
  transition: color var(--transition-base);
}

.auth-input-toggle:hover {
  color: #64748b;
}

.auth-input.has-toggle {
  padding-right: 48px !important;
}

/* ── Submit Button ─────────────────────────────────────────── */
.auth-submit-btn {
  width: 100%;
  padding: 17px 16px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 25px -4px rgba(220,38,38,0.35);
  transition: background var(--transition-base), transform 0.1s, box-shadow var(--transition-base);
  margin-top: 24px;
  font-family: var(--font-family-base);
  text-decoration: none;
}

.auth-submit-btn:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 14px 30px -4px rgba(220,38,38,0.45);
  color: #fff;
  text-decoration: none;
}

.auth-submit-btn:active {
  transform: scale(0.98);
}

/* Secondary button (back/login link) */
.auth-submit-btn.secondary {
  background: #1e293b;
  box-shadow: none;
  margin-top: 10px;
}

.auth-submit-btn.secondary:hover {
  background: #334155;
  box-shadow: none;
  color: #fff;
}

/* ── Divider ───────────────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 20px;
}

.auth-divider-line {
  flex: 1;
  height: 1px;
  background: #e2e8f0;
  display: block;
}

/* ── Misc ──────────────────────────────────────────────────── */
.auth-link {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
  color: var(--color-accent-hover);
}

.auth-copyright {
  text-align: center;
  margin-top: 44px;
  font-size: 9px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 6px;
  opacity: 0.7;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 767px) {
  body,
  html {
    overflow-x: hidden;
  }
  .content-wrapper > .content {
    padding: 15px 0;
  }
  .card-header .col-sm-8 {
    width: 55%;
  }
  .card-header .col-sm-4 {
    width: 45%;
  }
}

@media (min-width: 768px) {
  .fordesktop {
    margin-left: 37%;
  }
}