/*
==========================================================
 NusaPOS THEME - FULL CONTRAST FIX
 Mode Siang  : teks hitam / tebal
 Mode Malam  : teks putih / terang
==========================================================
*/

html,
body {
    transition:
        background-color .2s ease,
        color .2s ease;
}

/* ========================================================
   DASAR MODE SIANG
======================================================== */

body.np-theme {
    background: #f1f5f9 !important;
    color: #111827 !important;
    font-weight: 500;
}

body.np-theme,
body.np-theme p,
body.np-theme span,
body.np-theme div,
body.np-theme label,
body.np-theme td,
body.np-theme th,
body.np-theme li,
body.np-theme a {
    color: #111827;
}

/* Jangan paksa warna icon/font-awesome */
body.np-theme i,
body.np-theme svg {
    color: inherit;
}

/* ========================================================
   HEADER / TOPBAR
======================================================== */

body.np-theme .topbar,
body.np-theme header.topbar {
    background: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #cbd5e1 !important;
}

body.np-theme .topbar *,
body.np-theme header.topbar * {
    color: #111827 !important;
}

body.np-theme .topbar a,
body.np-theme header.topbar a {
    color: #111827 !important;
    font-weight: 700 !important;
}

/* ========================================================
   SIDEBAR - MODE SIANG
======================================================== */

body.np-theme .sidebar {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-right: 1px solid #334155 !important;
}

body.np-theme .sidebar *,
body.np-theme .sidebar span,
body.np-theme .sidebar div,
body.np-theme .sidebar a,
body.np-theme .sidebar label {
    color: #e2e8f0 !important;
}

body.np-theme .sidebar a {
    font-weight: 600 !important;
}

body.np-theme .sidebar .nav-link,
body.np-theme .sidebar .menu-item {
    color: #e2e8f0 !important;
}

body.np-theme .sidebar .nav-link:hover,
body.np-theme .sidebar .menu-item:hover {
    color: #ffffff !important;
    background: #1e293b !important;
}

body.np-theme .sidebar .nav-link.active,
body.np-theme .sidebar .menu-item.active {
    color: #ffffff !important;
    background: #2563eb !important;
}

body.np-theme .sidebar .section-title,
body.np-theme .sidebar .menu-title,
body.np-theme .sidebar .nav-section,
body.np-theme .sidebar small {
    color: #94a3b8 !important;
    font-weight: 700 !important;
}

/* ========================================================
   MAIN CONTENT
======================================================== */

body.np-theme .main,
body.np-theme .content {
    color: #111827 !important;
}

body.np-theme .content *,
body.np-theme .main * {
    font-weight: 500;
}

/* Heading */
body.np-theme h1,
body.np-theme h2,
body.np-theme h3,
body.np-theme h4,
body.np-theme h5,
body.np-theme h6 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* ========================================================
   CARD
======================================================== */

body.np-theme .card,
body.np-theme .panel,
body.np-theme .box,
body.np-theme .content-card,
body.np-theme .stat-card,
body.np-theme .quick-card {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #cbd5e1 !important;
}

body.np-theme .card *,
body.np-theme .panel *,
body.np-theme .box *,
body.np-theme .content-card *,
body.np-theme .stat-card *,
body.np-theme .quick-card * {
    color: #111827 !important;
}

/* ========================================================
   LABEL / TEKS KECIL
======================================================== */

body.np-theme label,
body.np-theme .form-label,
body.np-theme .label,
body.np-theme .field-label,
body.np-theme .section-label {
    color: #111827 !important;
    font-weight: 800 !important;
}

/* ========================================================
   INPUT / SELECT
======================================================== */

body.np-theme input,
body.np-theme select,
body.np-theme textarea {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #94a3b8 !important;
    font-weight: 600 !important;
}

body.np-theme input::placeholder,
body.np-theme textarea::placeholder {
    color: #475569 !important;
    opacity: 1 !important;
}

body.np-theme select option {
    background: #ffffff !important;
    color: #111827 !important;
}

/* ========================================================
   TABLE
======================================================== */

body.np-theme table {
    color: #111827 !important;
    border-color: #cbd5e1 !important;
}

body.np-theme table thead,
body.np-theme table thead tr {
    background: #e2e8f0 !important;
    color: #111827 !important;
}

body.np-theme table thead th {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

body.np-theme table tbody tr {
    color: #111827 !important;
    border-color: #cbd5e1 !important;
}

body.np-theme table tbody td {
    color: #111827 !important;
    font-weight: 600 !important;
}

body.np-theme table tbody tr:nth-child(even) {
    background: #f8fafc !important;
}

body.np-theme table tbody tr:nth-child(odd) {
    background: #ffffff !important;
}

body.np-theme table tbody tr:hover {
    background: #dbeafe !important;
    color: #111827 !important;
}

/* ========================================================
   LINK
======================================================== */

body.np-theme a {
    color: #1d4ed8 !important;
    font-weight: 600 !important;
}

body.np-theme a:hover {
    color: #1e40af !important;
}

/* ========================================================
   BUTTON
======================================================== */

body.np-theme button {
    font-weight: 700 !important;
}

body.np-theme button:not(.np-theme-toggle) {
    color: #ffffff !important;
}

body.np-theme .btn-primary,
body.np-theme button.primary,
body.np-theme .btn-blue {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

body.np-theme .btn-primary:hover,
body.np-theme button.primary:hover,
body.np-theme .btn-blue:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

/* ========================================================
   BADGE - MODE SIANG
======================================================== */

/* Semua badge */
body.np-theme .badge,
body.np-theme .status-badge,
body.np-theme .tag,
body.np-theme .pill {
    font-weight: 800 !important;
}

/* WIP */
body.np-theme .badge-wip,
body.np-theme [class*="wip"] {
    color: #1e3a8a !important;
    background: #bfdbfe !important;
}

/* RAW MATERIAL */
body.np-theme .badge-raw,
body.np-theme [class*="raw-material"] {
    color: #78350f !important;
    background: #fde68a !important;
}

/* FINISHED GOODS */
body.np-theme .badge-finished,
body.np-theme [class*="finished"] {
    color: #065f46 !important;
    background: #a7f3d0 !important;
}

/* ACTIVE */
body.np-theme .badge-active,
body.np-theme .status-active,
body.np-theme [class*="status"] {
    font-weight: 800 !important;
}

/* ========================================================
   THEME TOGGLE
======================================================== */

body.np-theme .np-theme-toggle {
    color: #ffffff !important;
    background: #2563eb !important;
    border: 1px solid #1d4ed8 !important;
}

/* ========================================================
   ========================================================
   MODE MALAM
   ========================================================
======================================================== */

html.np-dark,
html.np-dark body,
body.np-theme.np-dark {
    background: #020617 !important;
    color: #f8fafc !important;
}

/* Semua teks utama */
body.np-theme.np-dark,
body.np-theme.np-dark p,
body.np-theme.np-dark span,
body.np-theme.np-dark div,
body.np-theme.np-dark label,
body.np-theme.np-dark td,
body.np-theme.np-dark th,
body.np-theme.np-dark li {
    color: #f8fafc !important;
}

/* ========================================================
   HEADER MALAM
======================================================== */

body.np-theme.np-dark .topbar,
body.np-theme.np-dark header.topbar {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-bottom: 1px solid #334155 !important;
}

body.np-theme.np-dark .topbar *,
body.np-theme.np-dark header.topbar * {
    color: #f8fafc !important;
}

/* ========================================================
   SIDEBAR MALAM
======================================================== */

body.np-theme.np-dark .sidebar {
    background: #020617 !important;
    color: #f8fafc !important;
    border-right: 1px solid #1e293b !important;
}

body.np-theme.np-dark .sidebar *,
body.np-theme.np-dark .sidebar span,
body.np-theme.np-dark .sidebar div,
body.np-theme.np-dark .sidebar a,
body.np-theme.np-dark .sidebar label {
    color: #e2e8f0 !important;
}

body.np-theme.np-dark .sidebar .nav-link,
body.np-theme.np-dark .sidebar .menu-item {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}

body.np-theme.np-dark .sidebar .nav-link:hover,
body.np-theme.np-dark .sidebar .menu-item:hover {
    color: #ffffff !important;
    background: #1e293b !important;
}

body.np-theme.np-dark .sidebar .nav-link.active,
body.np-theme.np-dark .sidebar .menu-item.active {
    color: #ffffff !important;
    background: #2563eb !important;
}

body.np-theme.np-dark .sidebar .section-title,
body.np-theme.np-dark .sidebar .menu-title,
body.np-theme.np-dark .sidebar .nav-section,
body.np-theme.np-dark .sidebar small {
    color: #94a3b8 !important;
    font-weight: 800 !important;
}

/* ========================================================
   MAIN MALAM
======================================================== */

body.np-theme.np-dark .main,
body.np-theme.np-dark .content {
    background: #020617 !important;
    color: #f8fafc !important;
}

body.np-theme.np-dark h1,
body.np-theme.np-dark h2,
body.np-theme.np-dark h3,
body.np-theme.np-dark h4,
body.np-theme.np-dark h5,
body.np-theme.np-dark h6 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* ========================================================
   CARD MALAM
======================================================== */

body.np-theme.np-dark .card,
body.np-theme.np-dark .panel,
body.np-theme.np-dark .box,
body.np-theme.np-dark .content-card,
body.np-theme.np-dark .stat-card,
body.np-theme.np-dark .quick-card {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.np-theme.np-dark .card *,
body.np-theme.np-dark .panel *,
body.np-theme.np-dark .box *,
body.np-theme.np-dark .content-card *,
body.np-theme.np-dark .stat-card *,
body.np-theme.np-dark .quick-card * {
    color: #f8fafc !important;
}

/* ========================================================
   LABEL MALAM
======================================================== */

body.np-theme.np-dark label,
body.np-theme.np-dark .form-label,
body.np-theme.np-dark .label,
body.np-theme.np-dark .field-label,
body.np-theme.np-dark .section-label {
    color: #f8fafc !important;
    font-weight: 800 !important;
}

/* ========================================================
   INPUT MALAM
======================================================== */

body.np-theme.np-dark input,
body.np-theme.np-dark select,
body.np-theme.np-dark textarea {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid #64748b !important;
    font-weight: 600 !important;
}

body.np-theme.np-dark input::placeholder,
body.np-theme.np-dark textarea::placeholder {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

body.np-theme.np-dark select option {
    background: #0f172a !important;
    color: #ffffff !important;
}

/* ========================================================
   TABLE MALAM
======================================================== */

body.np-theme.np-dark table {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.np-theme.np-dark table thead,
body.np-theme.np-dark table thead tr {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.np-theme.np-dark table thead th {
    background: #1e293b !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

body.np-theme.np-dark table tbody tr {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.np-theme.np-dark table tbody tr:nth-child(even) {
    background: #172033 !important;
}

body.np-theme.np-dark table tbody tr:nth-child(odd) {
    background: #0f172a !important;
}

body.np-theme.np-dark table tbody td {
    color: #f8fafc !important;
    font-weight: 600 !important;
}

body.np-theme.np-dark table tbody tr:hover {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

body.np-theme.np-dark table a {
    color: #93c5fd !important;
    font-weight: 700 !important;
}

/* ========================================================
   TEKS KECIL / RESEP / DESKRIPSI
======================================================== */

body.np-theme.np-dark small,
body.np-theme.np-dark .text-muted,
body.np-theme.np-dark .muted,
body.np-theme.np-dark .description,
body.np-theme.np-dark .subtext {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
}

/* ========================================================
   BADGE MALAM - KONTRAS TINGGI
======================================================== */

/* WIP */
body.np-theme.np-dark .badge-wip,
body.np-theme.np-dark [class*="wip"] {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
    font-weight: 800 !important;
}

/* RAW MATERIAL */
body.np-theme.np-dark .badge-raw,
body.np-theme.np-dark [class*="raw-material"] {
    background: #92400e !important;
    color: #ffffff !important;
    border-color: #fbbf24 !important;
    font-weight: 800 !important;
}

/* FINISHED GOODS */
body.np-theme.np-dark .badge-finished,
body.np-theme.np-dark [class*="finished"] {
    background: #047857 !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
    font-weight: 800 !important;
}

/* ========================================================
   STATUS AKTIF MALAM
======================================================== */

body.np-theme.np-dark .badge-active,
body.np-theme.np-dark .status-active {
    background: #047857 !important;
    color: #ffffff !important;
    border: 1px solid #34d399 !important;
    font-weight: 800 !important;
}

/*
   Jangan gunakan aturan [class*="status"] untuk
   mengubah semua status secara membabi-buta.
*/

/* ========================================================
   BUTTON MALAM
======================================================== */

body.np-theme.np-dark button {
    font-weight: 700 !important;
}

body.np-theme.np-dark button:not(.np-theme-toggle) {
    color: #ffffff !important;
}

body.np-theme.np-dark .btn-primary,
body.np-theme.np-dark button.primary,
body.np-theme.np-dark .btn-blue {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
}

body.np-theme.np-dark .btn-primary:hover,
body.np-theme.np-dark button.primary:hover,
body.np-theme.np-dark .btn-blue:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

/* ========================================================
   LINK MALAM
======================================================== */

body.np-theme.np-dark a {
    color: #93c5fd !important;
    font-weight: 700 !important;
}

body.np-theme.np-dark a:hover {
    color: #bfdbfe !important;
}

/* ========================================================
   THEME BUTTON MALAM
======================================================== */

body.np-theme.np-dark .np-theme-toggle {
    color: #ffffff !important;
    background: #2563eb !important;
    border: 1px solid #60a5fa !important;
}

/* ========================================================
   PLACEHOLDER / DISABLED
======================================================== */

body.np-theme.np-dark input:disabled,
body.np-theme.np-dark select:disabled,
body.np-theme.np-dark textarea:disabled {
    color: #cbd5e1 !important;
    background: #1e293b !important;
}

body.np-theme.np-dark button:disabled {
    color: #cbd5e1 !important;
}

/* ========================================================
   ICON
======================================================== */

body.np-theme.np-dark i,
body.np-theme.np-dark svg {
    color: inherit;
}

/* ========================================================
   OVERRIDE WARNA PALE YANG SERING MENYEBABKAN TIDAK TERLIHAT
======================================================== */

body.np-theme.np-dark [style*="color: #fff"],
body.np-theme.np-dark [style*="color:#fff"],
body.np-theme.np-dark [style*="color: white"],
body.np-theme.np-dark [style*="color:white"] {
    color: #ffffff !important;
}

/* ========================================================
   SCROLLBAR
======================================================== */

body.np-theme.np-dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.np-theme.np-dark ::-webkit-scrollbar-track {
    background: #020617;
}

body.np-theme.np-dark ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 8px;
}

body.np-theme.np-dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ========================================================
   MOBILE
======================================================== */

@media (max-width: 768px) {

    body.np-theme .sidebar {
        color: #e2e8f0 !important;
    }

    body.np-theme.np-dark .sidebar {
        color: #f8fafc !important;
    }

}