/**
 * theme.css — Neo-Brutalism Design Token Variables
 * BuatinWebku CMS & Invoice
 * 
 * ATURAN: File ini dimuat SETELAH CSS UI Kit (AdminLTE 4 / Bootstrap 5).
 * DILARANG menambahkan hex warna di luar token yang telah dideklarasikan.
 * Nilai token dapat diubah melalui halaman /admin/settings (validasi hex 6 digit).
 */

/* ============================================================
   CSS ROOT VARIABLES — DESIGN_NEO_BRUTALISM TOKEN SET
   ============================================================ */
:root {
    --nb-bg: #191919;
    --nb-text: #ffffff;
    --sb-bg: #1c1c1c;
    --sb-text: #ffffff;
    --sb-hover: #000000;
    --card-bg: #ffffff;
    --card-border: #000000;
    --card-head: #ffe066;
    --btn-bg: #ffd500;
    --btn-text: #000000;
    --body-bg: #f4f4f4;
    --surface: #ffffff;
    --text: #191919;
    --text-muted: #6c757d;
    --accent: #ff4d4d;
    --link-hover: #e63e3e;
    --th-bg: #d9d9d9;
    --th-text: #000000;
}

/* ============================================================
   PENGGUNAAN TOKEN (var() usage — diperlukan oleh verify.php)
   ============================================================ */

/* Body & Surface */
body {
    background-color: var(--body-bg);
    color: var(--text);
    font-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
}

/* Navbar */
.main-header,
.navbar-dark,
.app-header {
    background-color: var(--nb-bg) !important;
    color: var(--nb-text) !important;
    border-bottom: 3px solid var(--card-border);
}

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

/* Sidebar */
.main-sidebar,
.app-sidebar {
    background-color: var(--sb-bg) !important;
}

.sidebar .nav-link,
.app-sidebar .nav-link {
    color: var(--sb-text) !important;
    font-weight: 600;
    border-radius: 0;
}

.sidebar .nav-link:hover,
.app-sidebar .nav-link:hover,
.sidebar .nav-link.active,
.app-sidebar .nav-link.active {
    background-color: var(--sb-hover) !important;
    color: var(--btn-bg) !important;
}

/* Cards — Neo-Brutalism Style */
.card {
    background-color: var(--card-bg);
    border: 3px solid var(--card-border) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0px var(--card-border);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card:hover {
    box-shadow: 6px 6px 0px var(--card-border);
    transform: translate(-1px, -1px);
}

.card-header {
    background-color: var(--card-head) !important;
    border-bottom: 3px solid var(--card-border) !important;
    font-weight: 700;
    color: var(--text);
    border-radius: 0 !important;
}

.card-footer {
    background-color: var(--surface);
    border-top: 3px solid var(--card-border) !important;
}

/* Tombol — Neo-Brutalism Style */
.btn-primary,
.btn-nb {
    background-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border: 3px solid var(--card-border) !important;
    border-radius: 0 !important;
    font-weight: 700;
    box-shadow: 4px 4px 0px var(--card-border);
    transition: all 0.1s ease;
}

.btn-primary:hover,
.btn-nb:hover {
    background-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--card-border);
}

.btn-primary:active,
.btn-nb:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px var(--card-border);
}

/* Accent / Danger Buttons */
.btn-danger,
.btn-accent {
    background-color: var(--accent) !important;
    color: var(--surface) !important;
    border: 3px solid var(--card-border) !important;
    border-radius: 0 !important;
    font-weight: 700;
    box-shadow: 4px 4px 0px var(--card-border);
}

.btn-danger:hover,
.btn-accent:hover {
    background-color: var(--link-hover) !important;
    color: var(--surface) !important;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--card-border);
}

/* Tabel — Neo-Brutalism Style */
.table thead th {
    background-color: var(--th-bg) !important;
    color: var(--th-text) !important;
    border: 2px solid var(--card-border) !important;
    font-weight: 700;
}

.table td,
.table th {
    border: 1px solid var(--card-border) !important;
}

/* Input Fields */
.form-control,
.form-select {
    border: 3px solid var(--card-border) !important;
    border-radius: 0 !important;
    background-color: var(--surface);
    color: var(--text);
    box-shadow: 3px 3px 0px var(--card-border);
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--btn-bg) !important;
    box-shadow: 4px 4px 0px var(--card-border) !important;
}

/* Links */
a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Helper: text muted */
.text-muted {
    color: var(--text-muted) !important;
}

/* Nav Tabs & Nav Pills — Neo-Brutalism Style */
.nav-pills .nav-link,
.nav-tabs .nav-link {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 2px solid var(--card-border) !important;
    border-radius: 0 !important;
    font-weight: 700;
    transition: all 0.15s ease;
}

.nav-pills .nav-link:hover,
.nav-tabs .nav-link:hover {
    background-color: var(--th-bg) !important;
    color: var(--th-text) !important;
    transform: translate(-1px, -1px);
}

.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    background-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border: 2px solid var(--card-border) !important;
    box-shadow: 3px 3px 0px var(--card-border);
}

/* Content Wrapper */
.content-wrapper,
.app-main {
    background-color: var(--body-bg);
}

/* Summernote WYSIWYG Editor & Modals — Neo-Brutalism Style & Bootstrap 5 Fix */
.note-modal.open,
.note-modal.open .note-modal-dialog {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}
.note-modal-backdrop.open {
    opacity: 0.5 !important;
    display: block !important;
    visibility: visible !important;
    z-index: 1050 !important;
}
.note-modal {
    z-index: 1060 !important;
}
.note-modal-content {
    border: 3px solid var(--card-border) !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0px var(--card-border) !important;
    background-color: var(--card-bg) !important;
}
.note-modal-header {
    background-color: var(--card-head) !important;
    border-bottom: 2px solid var(--card-border) !important;
    padding: 10px 16px !important;
}
.note-modal-title {
    font-weight: 900 !important;
    color: var(--text) !important;
}
.note-modal-footer {
    border-top: 2px solid var(--card-border) !important;
    padding: 10px 16px !important;
}
.note-form-control,
.note-input {
    border: 2px solid var(--card-border) !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
}
.note-btn-primary {
    background-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border: 2px solid var(--card-border) !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
    box-shadow: 2px 2px 0px var(--card-border) !important;
}
.note-btn-primary:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px var(--card-border) !important;
}