/*
 * Global dashboard color theme: dual LIGHT/DARK content theme, DARK NAVY
 * sidebar always on. Midnight Navy (#0A1120 / --header-navy-bg) accent is
 * reused on heading surfaces in the content area (card headers, table
 * headers, modal headers) in BOTH themes, so they read as one system with
 * the sidebar no matter which content theme is active.
 *
 * Theme switching: toggling `data-theme="dark"` on <html> (see
 * resources/views/partials/theme-toggle.blade.php, which also persists the
 * choice to localStorage under `jilbabshafi-theme`) swaps the token values
 * below. :root holds the LIGHT theme (also the default — no stored
 * preference means light). [data-theme="dark"] overrides the same token
 * names for DARK.
 *
 * Sidebar keeps its own dark palette (see the --sidebar-* tokens below,
 * consumed by resources/views/partials/sidebar-style.blade.php), defined
 * only once, outside both theme blocks, so it stays dark navy independent
 * of the content theme and is never touched by the toggle. Likewise
 * --header-navy-bg / --header-navy-text and the functional colors (blue /
 * success / warning / danger / info) are defined once and never
 * re-themed, so headers and functional button/badge colors stay identical
 * in both themes.
 *
 * Visual only — no HTML/layout/spacing/sizing/JS is touched by this file.
 * All colors are defined once as custom properties.
 *
 * Loaded last in <head> on every page (see
 * resources/views/vendor/adminlte/master.blade.php), so these rules take
 * effect over AdminLTE/Bootstrap's own CSS by source order / specificity.
 */

:root {
  --body-bg: #F4F5F7;
  --bg-content: #F4F5F7;

  --card-bg: #FFFFFF;
  --card-header-bg: #F8F9FA;
  --card-border: #E2E5EA;

  /* Midnight Navy header accent, matching the sidebar's --sidebar-bg.
     Used ONLY on heading/title surfaces (card headers, table headers,
     modal headers) — never on content, inputs, buttons or the sidebar
     itself, which keeps its own --sidebar-* tokens above. Identical in
     both themes (not redefined under [data-theme="dark"]). */
  --header-navy-bg: #0A1120;
  --header-navy-text: #FFFFFF;

  --topbar-bg: #FFFFFF;

  --table-bg: #FFFFFF;
  --table-header-bg: #0A1120;
  --table-header-text: #FFFFFF;
  --table-row: #FFFFFF;
  --table-row-alt: #FAFBFC;
  --table-row-hover: #F3F6FA;
  --table-text: #172033;

  --input-bg: #FFFFFF;
  --input-border: #D9DEE7;
  --input-placeholder: #8A94A6;
  --input-focus-shadow: rgba(22, 140, 245, .12);
  --label: #172033;

  --border: #E3E7ED;
  --header-border: #E3E7ED;

  /* Functional colors: fixed across both themes on purpose (buttons and
     status badges keep their meaning — filter/create stay blue, success
     stays green, etc. — regardless of light/dark). */
  --blue: #168CF5;
  --blue-hover: #0D78D5;
  --success: #20B486;
  --warning: #E5A93D;
  --danger: #E05260;
  --info: #38B2F6;
  --inactive: #8A94A6;

  /* Purple/indigo accent, added only for the Insight > Performa Produk
     title indicators (.pp-title--purple below, "Warna Terlaris") - no
     existing functional color covers purple. Fixed across both themes,
     same convention as the functional colors above. */
  --purple: #7C4DFF;

  /* Fixed dark-on-yellow text for anything using --warning as a
     background (btn-warning, badge-warning): warning's hue never changes
     between themes, so its "readable on top of it" text shouldn't either
     — using --text-primary there would go light-on-yellow in dark mode. */
  --on-warning: #172033;

  --link: #168CF5;
  --link-hover: #0D78D5;

  --text-primary: #172033;
  --text-secondary: #596579;
  --text-muted: #8A94A6;
  --icon: #596579;

  /* Sidebar keeps its own dark-navy palette, isolated from the themed
     content tokens above so it never gets pulled light/dark by the
     content theme toggle by mistake. Identical in both themes (not
     redefined under [data-theme="dark"]). */
  --sidebar-bg: #0A1120;
  --sidebar-hover: #121C33;
  --sidebar-border: #1F2A44;
  --sidebar-text: #A9B4C6;
  --sidebar-text-strong: #FFFFFF;
  --sidebar-icon: #A9B4C6;
}

/* ==========================================================================
   Dark theme token overrides
   ========================================================================== */

:root[data-theme="dark"] {
  --body-bg: #0B1220;
  --bg-content: #0B1220;

  --card-bg: #111827;
  --card-header-bg: #172033;
  --card-border: #2A3548;

  --topbar-bg: #111827;

  --table-bg: #111827;
  --table-row: #111827;
  --table-row-alt: #172033;
  --table-row-hover: #1E2A44;
  --table-text: #F8FAFC;

  --input-bg: #111827;
  --input-border: #2A3548;
  --input-placeholder: #AAB4C3;
  --input-focus-shadow: rgba(22, 140, 245, .25);
  --label: #F8FAFC;

  --border: #2A3548;
  --header-border: #2A3548;

  --text-primary: #F8FAFC;
  --text-secondary: #AAB4C3;
  --text-muted: #AAB4C3;
  --icon: #AAB4C3;
}

/* ==========================================================================
   Theme transition — smooths the light/dark switch without animating
   layout-affecting properties (no width/height/transform involved).
   ========================================================================== */

body,
.content-wrapper,
.main-header.navbar,
.card,
.card-header,
.card-body,
.card-footer,
.table,
.table thead th,
.table tbody tr,
.modal-content,
.modal-header,
.dropdown-menu,
.form-control,
.custom-select,
.custom-file-label,
.input-group-text,
.select2-container--bootstrap4 .select2-selection,
.page-link,
input,
select,
textarea {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ==========================================================================
   Page background
   ========================================================================== */

body {
  background-color: var(--body-bg);
  color: var(--text-primary);
}

.content-wrapper {
  background-color: var(--bg-content);
  color: var(--text-primary);
}

.content-header h1,
.content-header small {
  color: var(--text-primary);
}

.content-header .breadcrumb {
  background-color: transparent;
}

.content-header .breadcrumb-item a {
  color: var(--text-secondary);
}

.content-header .breadcrumb-item.active {
  color: var(--text-primary);
}

.content-header .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-secondary);
}

/* ==========================================================================
   Topbar / header
   ========================================================================== */

.main-header.navbar {
  background-color: var(--topbar-bg);
  border-bottom: 1px solid var(--header-border);
  /* Sticky, not fixed: keeps the existing sidebar-offset margin that makes
     this navbar line up next to the (separately) fixed sidebar, instead of
     needing its own width/margin recalculation like position:fixed would.
     Also the positioning anchor for .navbar-motivational below. */
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Stock AdminLTE never sets an explicit z-index on .main-sidebar — it
   relies on DOM order (sidebar markup comes after the navbar) to paint
   above it, e.g. for the mobile off-canvas sidebar overlay. Giving the
   navbar its own z-index above breaks that implicit ordering, so the
   sidebar needs an explicit z-index higher than the navbar's to keep
   stacking exactly like before (visual/behavior only, no design change). */
.main-sidebar {
  z-index: 1040;
}

/* ==========================================================================
   Sticky motivational message — centered between the hamburger (left navbar
   group) and the theme toggle (right navbar group). Absolutely positioned
   against .main-header.navbar itself (not the flex gap between the two
   <ul> groups) so it stays mathematically centered on the whole navbar
   regardless of how wide either side group is; pointer-events is off since
   it's a read-only message, not an interactive element.

   max-width uses calc(100% - Npx) rather than vw units: since it's
   centered via left:50%/translateX(-50%), that math guarantees N/2px of
   clearance from the hamburger/toggle on BOTH sides no matter how wide the
   navbar itself renders (it shrinks with the sidebar's margin-left offset,
   so vw — relative to the full viewport, not this element's actual
   containing block — was measuring the wrong box).

   font-size/font-weight/line-height on the base (desktop) rule are copied
   verbatim from adminlte.min.css's `h4, .h4 { font-size: 1.5rem; }` +the
   shared `h1..h6 { font-weight: 500; line-height: 1.2; }` rule — the exact
   rule rendering "Order Yang Belum Selesai" (a plain <h4>) in
   resources/views/order-details/index.blade.php:179 — so both are
   pixel-identical, not eyeballed. Smaller breakpoints scale the font back
   down purely so the (now much bigger) text still clips instead of
   colliding with the side buttons on narrow screens.
   ========================================================================== */

.navbar-motivational {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 220px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-secondary);
  pointer-events: none;
  text-align: center;
  transition: opacity .15s ease, color .2s ease;
}

@media (max-width: 991.98px) {
  .navbar-motivational {
    max-width: calc(100% - 170px);
    font-size: 1.15rem;
  }
}

@media (max-width: 575.98px) {
  .navbar-motivational {
    max-width: calc(100% - 120px);
    font-size: .9rem;
  }
}

.main-header.navbar .nav-link {
  color: var(--icon);
}

.main-header.navbar .nav-link:hover,
.main-header.navbar .nav-link:focus,
.main-header.navbar .nav-link.active {
  color: var(--text-primary);
}

.main-header.navbar .nav-link[data-widget="pushmenu"],
.main-header.navbar .nav-link[data-widget="fullscreen"] {
  border-radius: .35rem;
  transition: background-color .15s ease, color .15s ease;
}

.main-header.navbar .nav-link[data-widget="pushmenu"]:hover,
.main-header.navbar .nav-link[data-widget="fullscreen"]:hover {
  background-color: var(--blue);
  color: #fff;
}

/* Light/dark theme toggle — a <button> reusing .nav-link's icon styling,
   so it needs its default button chrome reset. Scoped to the top navbar,
   right side; never appears in the sidebar. */
.main-header.navbar .theme-toggle-btn {
  background: transparent;
  border: none;
  border-radius: .35rem;
  padding: .5rem .8rem;
  transition: background-color .15s ease, color .15s ease;
}

.main-header.navbar .theme-toggle-btn:hover,
.main-header.navbar .theme-toggle-btn:focus {
  background-color: var(--blue);
  color: #fff;
  outline: none;
}

.main-header .dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--border);
  color: var(--text-primary);
}

.main-header .dropdown-menu .dropdown-item {
  color: var(--text-secondary);
}

.main-header .dropdown-menu .dropdown-item:hover,
.main-header .dropdown-menu .dropdown-item:focus {
  background-color: var(--card-header-bg);
  color: var(--text-primary);
}

.main-header .dropdown-divider {
  border-top-color: var(--border);
}

/* Old default Laravel/Bootstrap navbar (layouts/app.blade.php), kept for
   contrast safety only — the app itself uses the AdminLTE topbar above. */
.navbar-light .navbar-nav .nav-link {
  color: var(--text-secondary) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--text-primary) !important;
}

.navbar-light .navbar-brand {
  color: var(--text-primary) !important;
}

/* ==========================================================================
   Cards / panels
   ========================================================================== */

.card {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--card-border);
}

.card-header {
  background-color: var(--header-navy-bg);
  border-bottom-color: var(--header-navy-bg);
  color: var(--header-navy-text);
}

.card-footer {
  background-color: var(--card-bg);
  border-top-color: var(--border);
  color: var(--text-secondary);
}

/* Bootstrap's .list-group-item hardcodes background-color:#fff with no
   dark-mode awareness at all (used only by the Telegram settings page's
   Bot ID / Username / Bot Token / Bot / Chat ID rows — grep confirms no
   other view in the app uses .list-group). Matched to --card-bg so these
   rows blend into their parent .card exactly like the rest of this file
   already does for card content, in both themes. */
.list-group-item {
  background-color: var(--card-bg);
  border-color: var(--border);
  color: var(--text-primary);
}

.list-group-item.disabled,
.list-group-item:disabled {
  background-color: var(--card-bg);
  color: var(--text-muted);
}

.card-title {
  color: var(--header-navy-text);
}

.card-text,
.card-body {
  color: var(--text-secondary);
}

.card.card-outline {
  background-color: var(--card-bg);
  border-top-color: var(--border);
}

.card-body .text-dark,
.card-body h1, .card-body h2, .card-body h3,
.card-body h4, .card-body h5, .card-body h6 {
  color: var(--text-primary);
}

.card-tools .btn-tool {
  color: var(--header-navy-text);
  opacity: .75;
}

.card-tools .btn-tool:hover {
  color: var(--header-navy-text);
  opacity: 1;
}

/* Contextual cards: header stays the same navy card-header as any other
   card (avoids turning every panel solid blue) but keeps a colored accent
   bar so the semantic meaning (primary / success / warning / danger) is
   still visible at a glance. */
.card-primary:not(.card-outline) > .card-header,
.card-dark:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header {
  background-color: var(--header-navy-bg);
  color: var(--header-navy-text);
  border-top: 3px solid var(--blue);
}

.card-primary:not(.card-outline) > .card-header a,
.card-dark:not(.card-outline) > .card-header a,
.card-info:not(.card-outline) > .card-header a {
  color: var(--header-navy-text);
}

.card-primary.card-outline,
.card-dark.card-outline,
.card-info.card-outline {
  border-top: 3px solid var(--blue);
}

.card-primary.card-outline-tabs > .card-header a.active,
.card-primary.card-outline-tabs > .card-header a.active:hover,
.card-dark.card-outline-tabs > .card-header a.active,
.card-dark.card-outline-tabs > .card-header a.active:hover {
  border-top: 3px solid var(--blue);
}

.card-success:not(.card-outline) > .card-header {
  background-color: var(--header-navy-bg);
  color: var(--header-navy-text);
  border-top: 3px solid var(--success);
}

.card-success.card-outline {
  border-top: 3px solid var(--success);
}

.card-warning:not(.card-outline) > .card-header {
  background-color: var(--header-navy-bg);
  color: var(--header-navy-text);
  border-top: 3px solid var(--warning);
}

.card-warning.card-outline {
  border-top: 3px solid var(--warning);
}

.card-danger:not(.card-outline) > .card-header {
  background-color: var(--header-navy-bg);
  color: var(--header-navy-text);
  border-top: 3px solid var(--danger);
}

.card-danger.card-outline {
  border-top: 3px solid var(--danger);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
  background-color: var(--table-bg);
  color: var(--table-text);
  border-color: var(--border);
}

.table td,
.table th {
  border-top-color: var(--border);
}

.table thead th {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  border-bottom-color: var(--border);
}

.table .thead-dark th {
  color: var(--table-header-text);
  background-color: var(--table-header-bg);
  border-color: var(--border);
}

.table tbody tr {
  background-color: var(--table-row);
  color: var(--table-text);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--table-row);
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--table-row-alt);
}

.table-hover tbody tr:hover {
  background-color: var(--table-row-hover);
  color: var(--table-text);
}

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

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text-secondary);
}

.page-link {
  background-color: var(--card-bg);
  border-color: var(--border);
  color: var(--blue);
}

.page-link:hover {
  background-color: var(--card-header-bg);
  border-color: var(--border);
  color: var(--blue-hover);
}

.page-item.active .page-link {
  background-color: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.page-item.disabled .page-link {
  background-color: var(--card-bg);
  border-color: var(--border);
  color: var(--inactive);
}

/* ==========================================================================
   Forms / inputs
   ========================================================================== */

.form-control,
.custom-select,
.custom-file-label,
.select2-container--bootstrap4 .select2-selection {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.form-control::placeholder {
  color: var(--input-placeholder);
}

.form-control:focus,
.custom-select:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
  background-color: var(--input-bg);
  border-color: var(--blue);
  color: var(--text-primary);
  box-shadow: 0 0 0 .15rem var(--input-focus-shadow);
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
  background-color: var(--card-header-bg);
  border-color: var(--input-border);
  color: var(--text-secondary);
  opacity: 1;
}

.input-group-text {
  background-color: var(--card-header-bg);
  border-color: var(--input-border);
  color: var(--text-secondary);
}

/* ==========================================================================
   Date filter trigger — shared "compact rounded pill" look for every date
   range/date input in the app (dashboard periods, order/return-order/
   reporting filters). Scoped to [data-date-filter-picker], a marker
   attribute added once in the shared Blade overrides
   (resources/views/vendor/adminlte/components/form/date-range.blade.php
   and input-date.blade.php) — never touches any other .form-control or
   .input-group in the app. Visual only: does not change the readonly/
   click-to-open behavior, the daterangepicker/TempusDominus plugin, or
   any page's date logic.
   ========================================================================== */

.input-group:has(> input[data-date-filter-picker]) {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.input-group:has(> input[data-date-filter-picker]:hover) {
  border-color: var(--blue);
}

.input-group:has(> input[data-date-filter-picker]:focus) {
  border-color: var(--blue);
  box-shadow: 0 0 0 .15rem var(--input-focus-shadow);
}

.input-group:has(> input[data-date-filter-picker]) .input-group-text {
  background-color: transparent;
  border: none;
  color: var(--icon);
  font-size: .85rem;
  padding-right: .35rem;
}

.input-group input[data-date-filter-picker] {
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 600;
  padding-left: 0;
}

.input-group input[data-date-filter-picker][readonly] {
  background-color: transparent;
  color: var(--text-primary);
  opacity: 1;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
  color: var(--input-placeholder);
}

.select2-container--bootstrap4 .select2-dropdown {
  background-color: var(--card-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.select2-container--bootstrap4 .select2-results__option {
  color: var(--text-primary);
}

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

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

/* ==========================================================================
   "Buat Order Baru" (#form-create-order) — dark theme select2 fix

   Nama Pelanggan (#customer), Kecamatan (#district), the "62" country-code
   dropdown (#country_code) and Produk (#product-*) all call $(...).select2()
   directly in resources/views/orders/create.blade.php WITHOUT
   `theme: 'bootstrap4'` (unlike e.g. $medium.select2({..., theme:
   'bootstrap4'}) a few lines above them in the same file) — confirmed by
   reading the actual .select2() calls, not guessed. That means they render
   with select2's own `select2-container--default` classes, styled by the
   base public/vendor/select2/css/select2.css (hardcoded white/#444/#aaa),
   which none of the --bootstrap4 dark-mode rules above ever match. That's
   the real reason these 4 fields stayed white in dark mode.

   The closed-state box lives inside the <select>'s own DOM, so it's scoped
   to just this page via the #form-create-order id added to the <form> in
   that view. The open dropdown panel/search/results, however, select2
   detaches and appends to <body> (not inside the original DOM subtree) —
   there's no page-scoping selector for that short of adding JS, so those
   few rules are written against `.select2-container--default` app-wide.
   That's still safe: `--default` never had ANY dark-mode styling before
   (only `--bootstrap4` did), so on any other page reusing the same
   unthemed select2() pattern this only fixes the identical latent bug,
   never changes anything that was already working. Light mode is
   untouched either way — every rule here is gated by [data-theme="dark"].
   ========================================================================== */

:root[data-theme="dark"] #form-create-order .select2-container--default .select2-selection--single,
:root[data-theme="dark"] #form-create-order .select2-container--default .select2-selection--multiple {
  background-color: var(--input-bg);
  border-color: var(--input-border);
}

:root[data-theme="dark"] #form-create-order .select2-container--default .select2-selection__rendered {
  color: var(--text-primary);
}

:root[data-theme="dark"] #form-create-order .select2-container--default .select2-selection__placeholder {
  color: var(--input-placeholder);
}

:root[data-theme="dark"] #form-create-order .select2-container--default .select2-selection__arrow b {
  border-color: var(--text-primary) transparent transparent transparent;
}

:root[data-theme="dark"] #form-create-order .select2-container--default.select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent var(--text-primary) transparent;
}

:root[data-theme="dark"] .select2-container--default .select2-dropdown {
  background-color: var(--card-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

:root[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--table-row-hover);
  color: var(--text-primary);
}

:root[data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled="true"] {
  color: var(--text-muted);
}

:root[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

:root[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
  color: var(--input-placeholder);
}

.custom-control-label::before {
  background-color: var(--input-bg);
  border-color: var(--input-border);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--blue);
  border-color: var(--blue);
}

label,
.form-check-label {
  color: var(--label);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary {
  background-color: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--blue-hover);
  border-color: var(--blue-hover);
  color: #fff;
}

.btn-secondary {
  background-color: var(--card-header-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--border);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.btn-success {
  background-color: var(--success);
  border-color: var(--success);
  color: #fff;
}

.btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--on-warning);
}

.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-info {
  background-color: var(--info);
  border-color: var(--info);
  color: #fff;
}

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

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

.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--input-border);
}

.btn-outline-secondary:hover {
  background-color: var(--card-header-bg);
  color: var(--text-primary);
}

.btn-outline-success {
  color: var(--success);
  border-color: var(--success);
}

.btn-outline-success:hover {
  background-color: var(--success);
  color: #fff;
}

.btn-outline-warning {
  color: var(--warning);
  border-color: var(--warning);
}

.btn-outline-warning:hover {
  background-color: var(--warning);
  color: var(--on-warning);
}

.btn-outline-danger {
  color: var(--danger);
  border-color: var(--danger);
}

.btn-outline-danger:hover {
  background-color: var(--danger);
  color: #fff;
}

.btn-outline-info {
  color: var(--info);
  border-color: var(--info);
}

.btn-outline-info:hover {
  background-color: var(--info);
  color: #fff;
}

.btn-default,
.btn-light {
  background-color: var(--card-header-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.btn-default:hover,
.btn-light:hover {
  background-color: var(--border);
  color: var(--text-primary);
}

/* ==========================================================================
   Badges / status
   ========================================================================== */

.badge-primary {
  background-color: var(--blue);
  color: #fff;
}

.badge-info {
  background-color: var(--info);
  color: #fff;
}

.badge-success {
  background-color: var(--success);
  color: #fff;
}

.badge-warning {
  background-color: var(--warning);
  color: var(--on-warning);
}

.badge-danger {
  background-color: var(--danger);
  color: #fff;
}

.badge-secondary,
.badge-dark {
  background-color: var(--inactive);
  color: #fff;
}

.badge-light {
  background-color: var(--card-header-bg);
  color: var(--text-primary);
}

/* ==========================================================================
   Links / icons
   ========================================================================== */

a {
  color: var(--link);
}

a:hover,
a:focus {
  color: var(--link-hover);
}

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

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

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

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

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

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

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

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

/* Generic light-theme utility backgrounds used here and there in views
   (badges, form sections, old default navbar) — repointed to the navy
   surfaces so nothing renders as a stray white/light box. */
.bg-white {
  background-color: var(--card-bg) !important;
}

.bg-light {
  background-color: var(--card-header-bg) !important;
}

.bg-secondary {
  background-color: var(--inactive) !important;
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
  border-color: var(--border) !important;
}

/* ==========================================================================
   Dropdowns / modals / alerts
   ========================================================================== */

.dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--border);
  color: var(--text-primary);
}

.dropdown-item {
  color: var(--text-secondary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--card-header-bg);
  color: var(--text-primary);
}

.dropdown-divider {
  border-top-color: var(--border);
}

.modal-content {
  background-color: var(--card-bg);
  border-color: var(--border);
  color: var(--text-primary);
}

.modal-header {
  background-color: var(--header-navy-bg);
  color: var(--header-navy-text);
  border-color: var(--header-navy-bg);
}

.modal-header .modal-title {
  color: var(--header-navy-text);
}

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

.close {
  color: var(--text-primary);
  text-shadow: none;
}

.modal-header .close {
  color: var(--header-navy-text);
  opacity: .75;
}

.modal-header .close:hover,
.modal-header .close:focus {
  color: var(--header-navy-text);
  opacity: 1;
}

.alert-primary {
  background-color: rgba(22, 140, 245, .12);
  border-color: var(--blue);
  color: var(--text-primary);
}

.alert-success {
  background-color: rgba(32, 180, 134, .12);
  border-color: var(--success);
  color: var(--text-primary);
}

.alert-warning {
  background-color: rgba(229, 169, 61, .14);
  border-color: var(--warning);
  color: var(--text-primary);
}

.alert-danger {
  background-color: rgba(224, 82, 96, .12);
  border-color: var(--danger);
  color: var(--text-primary);
}

.alert-info {
  background-color: rgba(56, 178, 246, .12);
  border-color: var(--info);
  color: var(--text-primary);
}

/* ==========================================================================
   Date range picker — global visual system (both themes)

   Restyles bootstrap-daterangepicker's own popup markup (rounded panel,
   spaced-out preset list, cleaner calendar cells, visible "today" marker)
   using the same tokens as the rest of the app, so it now adapts to
   dark/light automatically instead of needing a separate dark-only patch.
   Structure/behavior (month+year navigation, range selection, the preset
   list itself, Custom Range, Apply/Cancel) is entirely the plugin's own —
   nothing here changes what it does, only how it looks. Every existing
   [data-theme="dark"] fix this section used to carry is folded into these
   token-based rules (light and dark now share one rule set).
   ========================================================================== */

.daterangepicker {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: .75rem;
  box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .16);
  color: var(--text-primary);
  font-family: inherit;
  max-width: calc(100vw - 1.5rem);
}

.daterangepicker:after {
  border-bottom-color: var(--card-bg);
}

.daterangepicker.drop-up:after {
  border-top-color: var(--card-bg);
}

.daterangepicker .drp-calendar {
  padding: .85rem;
}

.daterangepicker .calendar-table {
  background-color: var(--card-bg);
  border-color: var(--card-bg);
  padding: 0;
}

.daterangepicker th.month {
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 700;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  color: var(--text-primary);
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  border-color: var(--icon);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: var(--card-bg);
  color: var(--text-muted);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: var(--table-row-hover);
  border-radius: .35rem;
}

.daterangepicker td.in-range {
  background-color: var(--table-row-hover);
  color: var(--text-primary);
}

.daterangepicker td.start-date {
  border-radius: .35rem 0 0 .35rem;
}

.daterangepicker td.end-date {
  border-radius: 0 .35rem .35rem 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: .35rem;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--blue);
  border-radius: .35rem;
  color: #fff;
}

/* "Today" has no built-in style at all in the vendor CSS (confirmed: the
   plugin's JS adds the .today class, but daterangepicker.css never
   consumes it) — this is a pure addition, not a behavior change. Skipped
   when today is also selected/in-range so it never fights that
   highlight. */
.daterangepicker td.today:not(.active):not(.in-range) {
  box-shadow: inset 0 0 0 1px var(--blue);
  border-radius: .35rem;
  font-weight: 700;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
  color: var(--text-muted);
  text-decoration: line-through;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: .35rem;
  color: var(--text-primary);
}

.daterangepicker .calendar-time select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.daterangepicker .ranges {
  padding: .5rem;
}

.daterangepicker .ranges ul {
  width: 100%;
}

.daterangepicker .ranges li {
  border-radius: .5rem;
  color: var(--text-primary);
  font-size: .85rem;
  margin-bottom: .1rem;
  padding: .45rem .75rem;
}

.daterangepicker .ranges li:hover {
  background-color: var(--table-row-hover);
}

.daterangepicker .ranges li.active {
  background-color: var(--blue);
  color: #fff;
  font-weight: 600;
}

.daterangepicker .drp-buttons {
  border-top: 1px solid var(--border);
  padding: .6rem .75rem;
}

.daterangepicker .drp-selected {
  color: var(--text-secondary);
  font-size: .8rem;
}

.daterangepicker .drp-buttons .btn {
  border-radius: .4rem;
  font-size: .8rem;
  padding: .3rem .8rem;
}

@media (min-width: 564px) {
  .daterangepicker .ranges ul {
    width: 155px;
  }
}

/* TempusDominus widget already carries Bootstrap's own .dropdown-menu
   class, so its container/background/text are themed by the
   .dropdown-menu rule above — only its internal day/hour/minute cells
   (which hardcode their own colors) need patching here. */
:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td.old,
:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td.new,
:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td.cw,
:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td span.old {
  color: var(--text-muted);
}

:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day:hover,
:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td.hour:hover,
:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td.minute:hover,
:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td.second:hover,
:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td span:hover,
:root[data-theme="dark"] .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
  background-color: var(--table-row-hover);
}

:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active,
:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active:hover,
:root[data-theme="dark"] .bootstrap-datetimepicker-widget table td span.active {
  background-color: var(--blue);
  color: #fff;
}

/* ==========================================================================
   SweetAlert2 (delete/confirm dialogs) — dark theme only

   SweetAlert2 injects its own <style> tag into <head> at runtime (it ships
   JS-only, no CSS file in the plugin config), *after* this stylesheet's
   <link>. That makes it win same-specificity ties by source order, so
   these need !important to reliably override it — a deliberate exception
   to this file's normal no-!important style, forced by that load-order
   quirk rather than by convenience.
   ========================================================================== */

:root[data-theme="dark"] .swal2-popup {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .swal2-title,
:root[data-theme="dark"] .swal2-html-container {
  color: var(--text-primary) !important;
}

/* ==========================================================================
   Daftar Order (#table-order) — dark theme "Status" column contrast fix

   The Status column (resources/views/orders/index.blade.php, the
   `columns` renderer around "container-status-") prints plain
   `<span class="btn-block ... bg-white|bg-success|bg-danger">` pills for
   Selesai / Siap Kirim / Belum — not Bootstrap .badge, so none of the
   .badge-* rules elsewhere in this file ever touched it.

   Root cause of "Selesai" staying dark even after the first pass at this:
   adminlte.min.css itself (not just Bootstrap) ships
     .bg-white, .bg-white > a { color: #1f2d3d !important; }
   — a hardcoded dark navy, !important, meant to keep text readable on a
   WHITE background in light mode. In dark mode .bg-white's background is
   already repointed to --card-bg (dark) further up this file, but that
   adminlte.css color:#1f2d3d !important still wins over a plain (non-
   !important) override, however specific the selector, which is why the
   very first fix here (color:#fff without !important) had no visible
   effect. This needs its own !important to win the tie, and does — its
   ID-scoped selector (#table-order …) is already more specific than
   adminlte.css's bare `.bg-white`, so !important vs !important resolves
   by specificity in our favor. (.bg-success/.bg-danger already force
   `color:#fff !important` in adminlte.css itself, so Siap Kirim / Belum
   were never actually broken — only the bg-white "Selesai" pill was.)

   Backgrounds are left exactly as dark mode already renders them — only
   text color is forced, only for this one table by ID, so no other
   table/page/state is affected and light mode (no [data-theme="dark"] on
   <html>) is untouched.
   ========================================================================== */

:root[data-theme="dark"] #table-order .btn-block {
  color: #FFFFFF !important;
}

/* ==========================================================================
   Insight > Performa Produk — mini "cards" for each ranked list

   The 7 Performa Produk lists (Produk Terlaris, Warna Terlaris, Produk Baru
   (Sudah Terjual), Kombinasi Terbaik, Produk + Warna Terlaris/Naik/Turun)
   render via renderPerformanceRankList() in
   resources/views/dashboard/insight/index.blade.php. Visual only: gives
   each list its own bordered/rounded panel and restyles its rows/badge -
   no data, ordering, or row count is touched by this file or by the
   Blade/JS markup changes that pair with it. Uses the same theme tokens as
   the rest of this file so it matches both the light and dark theme.
   ========================================================================== */

.pp-mini-card {
  height: 100%;
  padding: 1rem;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: .5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  overflow: hidden;
}

/* Wraps 2+ .pp-mini-card panels stacked in a single Performa Produk column
   (e.g. "Produk Baru Terjual" + "Analisa Produk Baru + Warna Baru Terjual").
   Takes the height:100% the lone .pp-mini-card above relies on to match its
   sibling columns, and lets each stacked card size to its own content
   instead of each trying to fill 100% of the column on its own. */
.pp-mini-card-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.pp-mini-card-stack .pp-mini-card {
  height: auto;
}

.pp-mini-card__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-primary);
}

/* Small colored bar + icon accent per title, so each of the 7 Performa
   Produk lists reads as a distinct sub-heading at a glance. Only the bar
   and icon carry the accent color - the title text itself stays
   --text-primary (dark/tegas), per the "warna lebih gelap/tegas untuk
   teks, aksen warna hanya pada icon/garis" spec. */
.pp-title__bar {
  flex: 0 0 4px;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background-color: var(--text-muted);
}

.pp-title__icon {
  flex: 0 0 auto;
  font-size: 1rem;
  color: var(--text-muted);
}

.pp-title__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}

.pp-title--blue .pp-title__bar { background-color: var(--blue); }
.pp-title--blue .pp-title__icon { color: var(--blue); }

.pp-title--purple .pp-title__bar { background-color: var(--purple); }
.pp-title--purple .pp-title__icon { color: var(--purple); }

.pp-title--green .pp-title__bar { background-color: var(--success); }
.pp-title--green .pp-title__icon { color: var(--success); }

.pp-title--amber .pp-title__bar { background-color: var(--warning); }
.pp-title--amber .pp-title__icon { color: var(--warning); }

.pp-title--red .pp-title__bar { background-color: var(--danger); }
.pp-title--red .pp-title__icon { color: var(--danger); }

.pp-row {
  display: flex;
  align-items: flex-start;
  margin: 0 -1rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background-color .15s ease;
}

.pp-row:last-child {
  border-bottom: none;
}

.pp-row:hover {
  background-color: var(--table-row-hover);
}

.pp-row__rank {
  flex: 0 0 22px;
  width: 22px;
  font-size: .75rem;
  color: var(--text-muted);
}

.pp-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

.pp-row__name {
  color: var(--text-primary);
  font-weight: 500;
  overflow-wrap: break-word;
}

.pp-row__sub {
  font-size: .75rem;
  color: var(--text-muted);
}

.pp-row__value {
  flex: 0 0 auto;
  margin-left: .5rem;
  text-align: right;
  white-space: nowrap;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.pp-badge {
  display: inline-block;
  border-radius: 10rem;
  padding: .2rem .55rem;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ==========================================================================
   Konten Kreator > Content Playbook modal ("JENIS KONTEN" button)

   Static internal knowledge base opened from
   resources/views/dashboard/content-creator/_content-playbook-modal.blade.php
   via the "Jenis Konten" button next to the period label
   (resources/views/dashboard/content-creator/index.blade.php). Purely
   additive/new - no rule here touches an existing selector, and every
   color reuses the same tokens defined at the top of this file so the
   modal matches both the light and dark theme automatically. No data,
   scoring, table, sidebar or header markup is affected.
   ========================================================================== */

.cp-open-btn {
  white-space: nowrap;
}

/* Header: reuses .modal-header's existing navy background (see the
   .modal-header rule above) - only lays out the icon + title/subtitle
   group next to the existing close button, no color is redefined here. */
.cp-modal__header {
  align-items: center;
}

.cp-modal__title-group {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

.cp-modal__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  background-color: rgba(255, 255, 255, .12);
  color: var(--header-navy-text);
  font-size: 1.15rem;
}

.cp-modal__subtitle {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .72);
}

/* Modal shell: fixed viewport-relative height so the header stays put and
   only the two panes below (nav / content) scroll independently. */
@media (min-width: 768px) {
  .cp-modal .modal-dialog {
    max-width: 1200px;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

.cp-modal .modal-content {
  height: 88vh;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.cp-modal .modal-header {
  flex: 0 0 auto;
}

.cp-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.cp-layout {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* Sidebar / table of contents - own scroll region, stays put while the
   content pane on the right scrolls. */
.cp-nav {
  flex: 0 0 250px;
  width: 250px;
  overflow-y: auto;
  background-color: var(--card-header-bg);
  border-right: 1px solid var(--border);
  padding: .75rem 0;
}

.cp-nav__link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.1rem;
  font-size: .78125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-secondary);
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.cp-nav__link i {
  flex: 0 0 auto;
  width: 1em;
  text-align: center;
  color: var(--text-muted);
  transition: color .15s ease;
}

.cp-nav__link:hover,
.cp-nav__link:focus {
  color: var(--text-primary);
  background-color: var(--table-row-hover);
  text-decoration: none;
}

.cp-nav__link.active {
  color: var(--blue);
  background-color: var(--card-bg);
  border-left-color: var(--blue);
}

.cp-nav__link.active i {
  color: var(--blue);
}

.cp-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 1.75rem 2rem;
}

.cp-section {
  margin-bottom: 2.5rem;
}

.cp-section:last-child {
  margin-bottom: 0;
}

.cp-section__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .5rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--border);
}

.cp-section__lead {
  color: var(--text-secondary);
  font-size: .875rem;
  margin-bottom: 1.25rem;
  max-width: 900px;
}

/* Funnel badges - reuse the same functional color tokens as the rest of
   the app (--blue / --purple / --success), just at low opacity for a
   badge fill instead of a solid background. */
.cp-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 10rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.cp-badge--tofu { background-color: rgba(22, 140, 245, .14); color: var(--blue); }
.cp-badge--mofu { background-color: rgba(124, 77, 255, .14); color: var(--purple); }
.cp-badge--bofu { background-color: rgba(32, 180, 134, .14); color: var(--success); }

.cp-funnel-grid,
.cp-funnel-formula-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cp-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--border);
  border-radius: .5rem;
  padding: 1.1rem;
}

.cp-card--tofu { border-top-color: var(--blue); }
.cp-card--mofu { border-top-color: var(--purple); }
.cp-card--bofu { border-top-color: var(--success); }

.cp-card__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.cp-card__headname {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cp-card__goal {
  font-size: .8125rem;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: .85rem;
}

.cp-card__block {
  margin-bottom: .85rem;
}

.cp-card__block--last {
  margin-bottom: 0;
}

.cp-card__blocklabel {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: .4rem;
}

.cp-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.cp-chip {
  display: inline-block;
  background-color: var(--card-header-bg);
  border: 1px solid var(--border);
  border-radius: .35rem;
  padding: .2rem .55rem;
  font-size: .75rem;
  color: var(--text-secondary);
}

.cp-chip--cta {
  color: var(--blue);
  border-color: var(--blue);
  background-color: rgba(22, 140, 245, .08);
  font-weight: 600;
}

.cp-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .8125rem;
  color: var(--text-secondary);
}

.cp-list li {
  margin-bottom: .3rem;
}

.cp-list li:last-child {
  margin-bottom: 0;
}

.cp-list--inline {
  padding-left: 1rem;
}

.cp-list--quote li {
  font-style: italic;
}

.cp-list--numbered {
  padding-left: 1.25rem;
}

.cp-table-wrap {
  margin-top: 1.25rem;
}

/* 02 / 03 / 04 - Jenis Konten / Foto / Video catalog rows */
.cp-catalog-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.cp-catalog-item:last-child {
  border-bottom: none;
}

.cp-catalog-item__no {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: .5rem;
  background-color: var(--card-header-bg);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .875rem;
}

.cp-catalog-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.cp-catalog-item__title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .5rem;
  font-size: .9375rem;
}

.cp-catalog-item__duration {
  font-weight: 500;
  color: var(--text-muted);
  font-size: .75rem;
}

.cp-catalog-item__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: .75rem;
  font-size: .8125rem;
  color: var(--text-secondary);
  padding: .2rem 0;
}

.cp-catalog-item__key {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--text-muted);
}

.cp-catalog-item__cta {
  color: var(--blue);
  font-weight: 600;
}

/* 05 - Formula Hook bank */
.cp-hook-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.cp-hook-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: .5rem;
  padding: 1rem 1.1rem;
}

.cp-hook-card__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--blue);
  margin-bottom: .5rem;
}

/* Subtle "· 15 HOOK" count next to each Section 05 category label - reuses
   the muted text token, no layout/size change to .cp-hook-card itself. */
.cp-hook-card__count {
  font-weight: 500;
  font-size: .625rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted);
}

/* 06 - Formula Script flow + per-funnel breakdown */
.cp-formula-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.cp-formula-flow__step {
  background-color: var(--card-header-bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: .45rem 1rem;
  border-radius: 10rem;
  font-size: .8125rem;
  font-weight: 700;
}

.cp-formula-flow__arrow {
  color: var(--text-muted);
  font-size: .75rem;
}

.cp-example-box {
  background-color: var(--card-header-bg);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: .8125rem;
  color: var(--text-secondary);
}

.cp-example-box__title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .6rem;
}

.cp-example-box p {
  margin-bottom: .5rem;
}

.cp-example-box p:last-child {
  margin-bottom: 0;
}

/* 07 - 10 Script Siap Pakai */
.cp-script-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cp-script-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: .5rem;
  overflow: hidden;
}

.cp-script-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  background-color: var(--card-header-bg);
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.cp-script-card__number {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.cp-script-card__title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: .9375rem;
  flex: 1 1 auto;
}

.cp-script-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.5rem;
  padding: .7rem 1.1rem 0;
  font-size: .75rem;
  color: var(--text-secondary);
}

.cp-script-card__body {
  padding: .5rem 1.1rem 1.1rem;
}

.cp-script-card__block {
  padding-top: .75rem;
  font-size: .8125rem;
  color: var(--text-secondary);
}

.cp-script-card__block p {
  margin-bottom: 0;
}

.cp-script-card__block--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cp-script-card__label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: .3rem;
}

/* 09 - Ide Konten grid */
.cp-idea-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.cp-idea-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: .5rem;
  padding: 1rem 1.1rem;
}

.cp-idea-card__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: .5rem;
}

/* 10 - Checklist */
.cp-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem 1.5rem;
}

.cp-checklist li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .8438rem;
  color: var(--text-primary);
  padding: .3rem 0;
}

.cp-checklist li i {
  margin-top: .2rem;
  color: var(--text-muted);
}

/* Golden Rule callout - deliberately reuses --header-navy-bg/text (same
   "navy for important headings" token already used by card/table/modal
   headers) so it reads as the premium closing statement of the modal. */
.cp-golden-rule {
  background-color: var(--header-navy-bg);
  color: var(--header-navy-text);
  border-radius: .6rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.cp-golden-rule__icon {
  font-size: 1.5rem;
  color: var(--warning);
  margin-bottom: .75rem;
}

.cp-golden-rule__quote {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.cp-golden-rule__desc {
  max-width: 720px;
  margin: 0 auto 1.25rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .78);
}

.cp-formula-flow--golden .cp-formula-flow__step {
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  color: var(--header-navy-text);
}

.cp-formula-flow--golden .cp-formula-flow__arrow {
  color: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   Content Playbook modal - Section 11 "TikTok Playbook"

   Purely additive, reuses every existing .cp-* component (card, badge,
   chip, list, table, example-box, formula-flow, script-card, checklist,
   golden-rule) exactly like sections 01-10. Only a handful of small new
   classes are introduced here, all built from the same tokens as the rest
   of this file:
     .cp-tiktok-accent / .cp-badge--tiktok - a single hardcoded TikTok
       brand-color touch (cyan), used sparingly (section icon + lifecycle
       badges) per the "very limited TikTok accent" requirement - not a
       new global theme token, so the app palette above is untouched.
     .cp-highlight - lighter opening callout (Golden Principle), kept
       distinct from the navy .cp-golden-rule so the whole section never
       reads as "all black".
     .cp-subhead / .cp-block - the sub-heading + spacing unit used to
       break Section 11 into its ~25 topic blocks.
     .cp-chip--danger - reuses --danger for the "Apa yang Tidak Boleh
       Dilakukan" chip list.
   ========================================================================== */

.cp-tiktok-accent {
  color: #25F4EE;
  -webkit-text-stroke: .5px rgba(0, 0, 0, .25);
}

.cp-badge--tiktok {
  background-color: rgba(37, 244, 238, .14);
  color: #0694A2;
}

:root[data-theme="dark"] .cp-badge--tiktok {
  color: #25F4EE;
}

.cp-block {
  margin-bottom: 1.85rem;
}

.cp-block:last-child {
  margin-bottom: 0;
}

.cp-subhead {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 .65rem;
}

.cp-subhead i {
  color: var(--text-muted);
  font-size: .85rem;
}

.cp-highlight {
  background-color: var(--card-header-bg);
  border: 1px solid var(--border);
  border-left: 4px solid #25F4EE;
  border-radius: .5rem;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.75rem;
}

.cp-highlight__title {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: .5rem;
}

.cp-highlight__quote {
  color: var(--text-primary);
  background: none;
  padding: 0;
  margin-bottom: .75rem;
}

.cp-highlight p {
  font-size: .8125rem;
  color: var(--text-secondary);
  margin-bottom: .75rem;
}

.cp-highlight p:last-of-type {
  margin-bottom: 0;
}

.cp-formula-flow--tight {
  margin-bottom: 1rem;
  justify-content: flex-start;
}

.cp-formula-flow--tight .cp-formula-flow__step {
  padding: .35rem .8rem;
  font-size: .75rem;
}

.cp-checklist--compact {
  grid-template-columns: 1fr;
}

.cp-chip--danger {
  color: var(--danger);
  border-color: var(--danger);
  background-color: rgba(224, 82, 96, .08);
}

/* ==========================================================================
   Content Playbook modal - responsive (tablet / mobile)
   ========================================================================== */

@media (max-width: 991.98px) {
  .cp-nav {
    flex-basis: 200px;
    width: 200px;
  }

  .cp-content {
    padding: 1.5rem;
  }

  .cp-funnel-grid,
  .cp-funnel-formula-grid,
  .cp-hook-grid,
  .cp-idea-grid {
    grid-template-columns: 1fr;
  }

  .cp-catalog-item__row {
    grid-template-columns: 130px 1fr;
  }
}

@media (max-width: 767.98px) {
  .cp-modal .modal-content {
    height: 92vh;
    max-height: 92vh;
  }

  .cp-layout {
    flex-direction: column;
  }

  .cp-nav {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: .5rem;
    -webkit-overflow-scrolling: touch;
  }

  .cp-nav__link {
    flex: 0 0 auto;
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: .35rem;
  }

  .cp-nav__link.active {
    border-left-color: transparent;
    border-bottom-color: var(--blue);
  }

  .cp-content {
    padding: 1.25rem 1rem;
  }

  .cp-catalog-item {
    flex-direction: column;
    gap: .5rem;
  }

  .cp-catalog-item__row {
    grid-template-columns: 1fr;
    gap: .15rem;
  }

  .cp-script-card__block--split {
    grid-template-columns: 1fr;
  }

  .cp-checklist {
    grid-template-columns: 1fr;
  }

  .cp-modal__subtitle {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .cp-modal .modal-dialog {
    margin: .5rem;
  }
}

/* ==========================================================================
   Buat Order Baru (#form-create-order) - "Total Pembayaran" price warning

   Visual-only hint shown next to the Total Pembayaran label
   (resources/views/orders/create.blade.php) when the typed amount is below
   Rp120.000 - purely a nudge to double-check the price, never a validation
   error, so it reuses --danger (the same token badges/alerts already use
   for danger states) rather than introducing a new color. Scoped to its
   own .tp-* classes so nothing here touches any other label/input on this
   or any other form.
   ========================================================================== */

.tp-label-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.tp-price-warning {
  color: var(--danger);
  font-weight: 700;
  font-size: .8125rem;
  animation: tpPriceWarningBlink 1.4s ease-in-out infinite;
}

@keyframes tpPriceWarningBlink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-price-warning {
    animation: none;
  }
}

/* ==========================================================================
   ANALISA PRODUKSI 30 HARI (Proses Produksi page, dashboard/process/index)
   KPI tiles + highlight cards for the rolling 30-day cutting/QC analysis.
   Same design language as .pp-mini-card above (theme tokens, border, radius,
   shadow) - a new component because the KPI shape (label + big value, not a
   ranked row list) is different from .pp-row.
   ========================================================================== */

.pa-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
}

.pa-kpi-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--text-muted);
  border-radius: .5rem;
  padding: .75rem .9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.pa-kpi-card--blue { border-left-color: var(--blue); }
.pa-kpi-card--purple { border-left-color: var(--purple); }
.pa-kpi-card--green { border-left-color: var(--success); }
.pa-kpi-card--amber { border-left-color: var(--warning); }
.pa-kpi-card--red { border-left-color: var(--danger); }

.pa-kpi-label {
  font-size: .75rem;
  color: var(--text-muted);
  margin-bottom: .25rem;
}

.pa-kpi-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.pa-kpi-unit {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: .2rem;
}

.pa-kpi-sub {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .2rem;
}

/* ==========================================================================
   TREN PRODUKSI 30 HARI - visual redesign only (Proses Produksi page).
   Scoped entirely to `.production-trend-30d` (added on this one card only)
   so nothing else - including every other .card-primary on this same page
   (Pemotongan, QC, Analisa Produksi 30 Hari) and on every other page - is
   affected by these overrides. Collapse widget, overlay loading and the
   canvas element itself are untouched DOM/JS; only shape/color/spacing.
   ========================================================================== */

.production-trend-30d.card {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  overflow: hidden;
}

.production-trend-30d.card-primary:not(.card-outline) > .card-header {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-top: none;
  border-bottom: 1px solid var(--card-border);
  padding: 1.1rem 1.25rem;
}

/* AdminLTE lays .card-title/.card-tools out with float (not flexbox, see
   .card-title{float:left}/.card-header>.card-tools{float:right} in
   adminlte.css) - this wrapper keeps that same float so the collapse
   button stays inline top-right instead of dropping below a block title. */
.production-trend-30d .pa-trend-header-titles {
  float: left;
}

.production-trend-30d.card-primary:not(.card-outline) > .card-header .card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0;
}

.production-trend-30d .pa-trend-period {
  margin-top: .25rem;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--text-muted);
}

.production-trend-30d .card-tools .btn-tool {
  color: var(--text-muted);
}

.production-trend-30d .card-tools .btn-tool:hover {
  color: var(--text-primary);
}

.production-trend-30d .card-body {
  padding: 1.25rem;
}

.pa-trend-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.pa-trend-summary-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 180px;
  min-width: 160px;
  padding: .7rem .9rem;
  border-radius: 10px;
  background-color: var(--body-bg);
  border: 1px solid var(--card-border);
}

.pa-trend-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.pa-trend-dot--cutting {
  background-color: #1687F7;
}

.pa-trend-dot--qc {
  background-color: #7C4DFF;
}

.pa-trend-summary-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.pa-trend-summary-label {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .1rem;
}

.pa-trend-chart-wrapper {
  position: relative;
}

.pa-trend-tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .1s ease;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 9px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
  padding: .6rem .75rem;
  min-width: 150px;
  font-size: .8125rem;
}

.pa-trend-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.pa-trend-tooltip-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .4rem;
  font-size: .8125rem;
}

.pa-trend-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pa-trend-tooltip-row + .pa-trend-tooltip-row {
  margin-top: .3rem;
}

.pa-trend-tooltip-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--text-muted);
}

.pa-trend-tooltip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
}

.pa-trend-tooltip-value {
  font-weight: 600;
  color: var(--text-primary);
}

@media (max-width: 575.98px) {
  .pa-trend-summary-item {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   PRODUKTIVITAS OPERATOR 30 HARI / PRODUKTIVITAS QC 30 HARI (Proses Produksi
   page) - visual redesign only, scoped to `.productivity-card`/
   `.productivity-table` (added on these two cards only) so no other card or
   table on this page - or any other page - is affected. The card-header
   keeps the exact same navy background/text color every other .card-primary
   on this site already uses (that global rule near the top of this file is
   untouched) - only made more compact here. The <thead> itself had no
   special styling before this change (plain Bootstrap default) and stays
   light/white here too - only alignment/weight/spacing/hover are new.
   ========================================================================== */

.productivity-card {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  overflow: hidden;
}

.productivity-card.card-primary:not(.card-outline) > .card-header {
  padding: .65rem 1.1rem;
}

.productivity-card .card-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  font-weight: 600;
}

.productivity-header-icon {
  font-size: .9em;
  opacity: .9;
}

.productivity-table thead th {
  background-color: var(--card-bg);
  color: var(--text-secondary, var(--text-muted));
  font-size: .78rem;
  font-weight: 600;
  padding: .6rem 1rem;
  border-bottom: 2px solid var(--card-border);
  white-space: nowrap;
}

.productivity-table tbody td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--card-border);
}

.productivity-table tbody tr:last-child td {
  border-bottom: none;
}

.productivity-table tbody tr {
  transition: background-color .12s ease;
}

.productivity-table tbody tr:hover {
  background-color: var(--body-bg);
}

.productivity-name {
  font-weight: 500;
  color: var(--text-primary);
}

.productivity-value {
  font-weight: 700;
  color: var(--text-primary);
  font-size: .95rem;
}

.productivity-avg {
  font-size: .8125rem;
  color: var(--text-muted);
}

/* QC's table can run long (many operators) - contained in a scrollable
   region with the header pinned, so all rows stay in the DOM/visible via
   scroll instead of growing the whole page. The Operator card deliberately
   gets no max-height, so it sizes to its own (usually much shorter)
   content rather than artificially matching QC's height. */
.productivity-table-scroll {
  max-height: 420px;
  overflow-y: auto;
}

.productivity-table-scroll .productivity-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

@media (max-width: 991.98px) {
  .productivity-table-scroll {
    max-height: 360px;
  }
}

/* ==========================================================================
   Drill-down detail (Detail Pemotongan/QC modal, dashboard/process/index
   .blade.php) - scrollable table body with a sticky header.

   Deliberately NOT using DataTables' own `scrollY` option here: scrollY
   splits the table into two independent <table> elements (a cloned header
   table + a separate scrolling body table), each sizing its columns from
   its own content - with a long value like "Etnik Black Wolfis" in the
   body, the two tables drift apart and header/body columns stop lining
   up. This is the exact same single-<table>-plus-CSS-sticky-header
   pattern already proven above for .productivity-table-scroll - one real
   <table> (thead+tbody together, one <colgroup> governing both), so
   header and body can never disagree on column width.
   ========================================================================== */

#pbd_table_scroll {
  max-height: 55vh;
  overflow-x: auto;
  overflow-y: auto;
}

/* ROOT CAUSE of the header going blank: the generic `.table thead th`
   rule above (line 514) pairs `--table-header-bg` (dark navy) with
   `--table-header-text` (white). This ID-scoped rule has higher
   specificity, so it was winning ONLY the background-color property
   (overriding it to `--card-bg`, white in light mode) while the
   `color: var(--table-header-text)` (also white) from that generic rule
   still applied untouched - white text on a white background, both
   equally "there", just invisible. Fix: set background AND text color
   together here, matching the SAME dark-navy/white pairing every other
   .table in the app already uses - never leave one half of a color pair
   to fall back to a different rule. */
#pbd_table thead th {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  position: sticky;
  top: 0;
  z-index: 1;
}

@media (max-width: 767.98px) {
  #pbd_table_scroll {
    max-height: 60vh;
  }
}

/* ==========================================================================
   Menu Penjualan - "Per Bulan"/"Per Tahun" custom period picker
   (dashboard/selling/index.blade.php only - these classes are never
   rendered by any other page's date filter, so this cannot affect them).

   Appended as a sibling "panel kanan" alongside the existing .ranges
   preset list ("panel kiri") inside the SAME daterangepicker dropdown
   container - not a separate popup/component. Positioning itself
   (bottom-start: flush below and left-aligned with the date field,
   replacing the plugin's own opens:'center' placement, for EVERY state
   of this picker - initial calendar view, Custom Range, Per Bulan, Per
   Tahun alike, on desktop AND mobile, so switching between them never
   jumps) is computed in JS (see dashboard/selling/index.blade.php,
   applyAnchoredPosition()) - only the plugin's own arrow/pointer, which
   would otherwise still point at wherever opens:'center' would have put
   the box, is hidden here, scoped to the .pj-anchored marker class that
   page adds ONCE, permanently, to its own picker container only (never
   toggled per-mode, since positioning is overridden in every mode, not
   just Per Bulan/Per Tahun). Uses the exact same design tokens as the
   rest of this date filter system (--card-border/--input-border/
   --text-primary/--text-secondary/--blue/--table-row-hover) - no new
   colors introduced.
   ========================================================================== */

.daterangepicker.pj-anchored:before,
.daterangepicker.pj-anchored:after {
  display: none;
}

.pj-period-picker {
  float: left;
  min-width: 220px;
  padding: .85rem;
}

.pj-period-picker-nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.pj-period-nav-btn {
  background-color: transparent;
  border: 1px solid var(--input-border);
  border-radius: .4rem;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .75rem;
  height: 28px;
  line-height: 1;
  width: 28px;
}

.pj-period-nav-btn:hover {
  background-color: var(--table-row-hover);
  border-color: var(--blue);
  color: var(--blue);
}

.pj-period-nav-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.pj-period-picker-year {
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 700;
}

.pj-period-picker-grid {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(3, 1fr);
}

.pj-period-cell {
  background-color: transparent;
  border: 1px solid var(--input-border);
  border-radius: .5rem;
  color: var(--text-primary);
  cursor: pointer;
  font-size: .8rem;
  padding: .5rem .25rem;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pj-period-cell:hover {
  background-color: var(--table-row-hover);
  border-color: var(--blue);
}

.pj-period-cell.active {
  background-color: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700;
}

.pj-period-cell:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

@media (max-width: 575.98px) {
  .pj-period-picker {
    float: none;
    min-width: 0;
    width: 100%;
  }
}


/* ===================================================================
   Telegram Notification Settings redesign (Pengaturan > Telegram)
   Scoped to `.tg-*` classes only, used in
   resources/views/telegram-settings/index.blade.php,
   resources/views/telegram-settings/_event-checkboxes.blade.php and
   resources/views/telegram-settings/_target-fields.blade.php.

   IMPORTANT (Telegram UX light-mode fix): AdminLTE's `.card-dark` variant
   only darkens the `.card-header` - see adminlte.css around
   `.card-dark:not(.card-outline) > .card-header` - it never styles
   `.card-body` at all. This app also never activates AdminLTE's own
   generic `body.dark-mode` toggle on this page (no widget wired to it in
   config/adminlte.php - `layout_dark_mode` is null). The practical result:
   this page's card BODIES are always a plain white Bootstrap card body
   with dark text, in every real rendering of this page - there is no
   "dark body" state to design for by default.

   The block below is written LIGHT-FIRST or that reason (dark text on a
   light body, matching Bootstrap's own defaults). A `body.dark-mode`
   override further down restores a dark-appropriate palette *only* if
   AdminLTE's own dark-mode toggle is ever wired up on this page later -
   scoped strictly under `body.dark-mode .tg-*` so it can never affect any
   other page or any other class.
   =================================================================== */

.tg-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}

.tg-summary-item {
  min-width: 140px;
}

.tg-summary-value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: #172033;
}

.tg-summary-label {
  font-size: .82rem;
  color: #5a6472;
  font-weight: 500;
}

.tg-badge {
  display: inline-block;
  padding: .3em .65em;
  border-radius: .5rem;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
}

/* Solid-ish, saturated badge backgrounds with white/dark text chosen for
   contrast - these read correctly on ANY background (light or dark),
   unlike a translucent pastel badge would. */
.tg-badge-ok { background: #198754; color: #ffffff; }
.tg-badge-warn { background: #ffc107; color: #664d03; }
.tg-badge-off { background: #dc3545; color: #ffffff; }
.tg-badge-muted { background: #e9ecef; color: #495057; }
.tg-badge-manual { background: #6c757d; color: #ffffff; font-weight: 500; margin-left: .3rem; }

.tg-glossary {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.75rem;
  padding: 1rem 1.1rem;
  border-radius: .5rem;
  background: #f4f6f9;
  border: 1px solid #dfe4ea;
}

.tg-glossary-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .88rem;
  color: #2b3446;
  max-width: 320px;
}

.tg-glossary-item b {
  color: #172033;
}

.tg-glossary-item i {
  margin-top: .2rem;
  color: #1687f7;
  width: 1.1rem;
  text-align: center;
}

.tg-wizard-step-title {
  font-weight: 600;
  color: #172033;
  margin-bottom: .6rem;
}

.tg-wizard-step {
  margin-bottom: 1.25rem;
}

.tg-wizard-choice {
  margin-bottom: 0;
}

.tg-wizard-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #dfe4ea;
}

.tg-help-box {
  background: #f4f6f9;
  border: 1px solid #dfe4ea;
  border-radius: .4rem;
  padding: .75rem 1rem;
  font-size: .84rem;
  color: #3c4655;
}

.tg-bot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .88rem;
  margin-bottom: .9rem;
  color: #3c4655;
  font-weight: 500;
}

.tg-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .tg-target-grid {
    grid-template-columns: 1fr;
  }
}

.tg-target-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e6ea;
  border-radius: .5rem;
  padding: 1rem 1.1rem;
  background: #fbfcfd;
}

.tg-target-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
}

.tg-target-head .font-weight-bold {
  color: #172033;
  font-size: 1rem;
}

.tg-target-events,
.tg-target-card .text-muted.small {
  color: #5a6472 !important;
  font-size: .85rem;
}

.tg-target-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
  padding-top: .5rem;
}

.tg-bot-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-top: .75rem;
  margin-top: .25rem;
  border-top: 1px dashed #dfe4ea;
}

.tg-bot-card .card-body {
  padding: 1.25rem 1.25rem 1rem;
}

.tg-event-picker {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #dfe4ea;
  border-radius: .4rem;
  padding: .6rem .85rem;
  background: #ffffff;
}

.tg-event-category {
  margin-bottom: .9rem;
}

.tg-event-category-title {
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #6c7686;
  margin-bottom: .4rem;
}

.tg-event-row {
  margin-bottom: .6rem;
}

.tg-event-row .custom-control-label {
  color: #2b3446;
}

.tg-event-desc {
  font-size: .8rem;
  color: #6c7686;
  margin-left: 1.6rem;
}

.tg-catalog-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px solid #eef0f3;
  color: #2b3446;
}

.tg-catalog-row:last-child {
  border-bottom: none;
}

.tg-empty-state {
  text-align: center;
  padding: 1.75rem 1rem;
  color: #3c4655;
}

.tg-empty-state p {
  color: inherit;
}

/* ---- Defensive dark-mode variant, scoped strictly to body.dark-mode ----
   Only takes effect if AdminLTE's own dark-mode toggle is ever wired up on
   this page (it is not, today - see note above). Restores a
   dark-background-appropriate palette without touching any other class or
   page. */
body.dark-mode .tg-summary-value { color: #f8fafc; }
body.dark-mode .tg-summary-label { color: rgba(255, 255, 255, .6); }
body.dark-mode .tg-badge-muted { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); }
body.dark-mode .tg-glossary { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
body.dark-mode .tg-glossary-item { color: rgba(255, 255, 255, .85); }
body.dark-mode .tg-glossary-item b { color: #ffffff; }
body.dark-mode .tg-wizard-step-title { color: #ffffff; }
body.dark-mode .tg-wizard-panel { border-top-color: rgba(255, 255, 255, .12); }
body.dark-mode .tg-help-box { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); }
body.dark-mode .tg-bot-meta { color: rgba(255, 255, 255, .7); }
body.dark-mode .tg-target-card { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .1); }
body.dark-mode .tg-target-head .font-weight-bold { color: #ffffff; }
body.dark-mode .tg-target-events,
body.dark-mode .tg-target-card .text-muted.small { color: rgba(255, 255, 255, .65) !important; }
body.dark-mode .tg-bot-footer { border-top-color: rgba(255, 255, 255, .12); }
body.dark-mode .tg-event-picker { background: transparent; border-color: rgba(255, 255, 255, .1); }
body.dark-mode .tg-event-category-title { color: rgba(255, 255, 255, .55); }
body.dark-mode .tg-event-row .custom-control-label { color: rgba(255, 255, 255, .9); }
body.dark-mode .tg-event-desc { color: rgba(255, 255, 255, .55); }
body.dark-mode .tg-catalog-row { border-bottom-color: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); }
body.dark-mode .tg-empty-state { color: rgba(255, 255, 255, .75); }

.tg-target-card.tg-just-added {
  animation: tgJustAdded 2.4s ease-out;
}

@keyframes tgJustAdded {
  0% { box-shadow: 0 0 0 3px rgba(25, 135, 84, .6); background: #eaf7ef; }
  100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); background: #fbfcfd; }
}

/* ---- Bot card username display (Telegram verified_username render fix) ---- */
.tg-bot-username {
  font-weight: 600;
  color: #1687f7;
}

.tg-bot-meta-sep {
  color: #9aa4b2;
}

.tg-bot-meta-secondary {
  color: #5a6472;
}

body.dark-mode .tg-bot-username { color: #7dd3fc; }
body.dark-mode .tg-bot-meta-sep { color: rgba(255, 255, 255, .4); }
body.dark-mode .tg-bot-meta-secondary { color: rgba(255, 255, 255, .7); }

/* ---- Notification Template Manager (additive feature) ---- */
.tg-catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.tg-catalog-toolbar .tg-catalog-search-group {
  max-width: 280px;
}

/* ---- Notification catalog modernization (UI-only pass) ---- */
.tg-notif-catalog-title {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.tg-notif-catalog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  background: #eef6ff;
  color: #1687f7;
  flex-shrink: 0;
}

/* Segmented-pill filter (Bagian 6) - independent pills instead of a fused
   btn-group, so `.rounded-pill` on each button renders as a real pill
   instead of Bootstrap's btn-group squaring off the shared inner edges. */
.tg-catalog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.tg-catalog-filter .btn {
  font-size: .78rem;
}

.tg-catalog-filter .btn.active {
  background: #eef6ff;
  color: #1687f7;
  border-color: #bfe0ff;
  font-weight: 600;
}

body.dark-mode .tg-catalog-filter .btn.active { background: rgba(56, 189, 248, .15); color: #7dd3fc; border-color: rgba(56, 189, 248, .35); }

/* Distinct "informational" badge colour for Template Original (Bagian 16:
   blue = Original/informational) - reuses the same blue already used by
   .tg-template-status-line/.tg-bot-username elsewhere on this page, no new
   colour introduced. */
.tg-badge-info { background: #1687f7; color: #ffffff; }
body.dark-mode .tg-badge-info { background: rgba(56, 189, 248, .25); color: #7dd3fc; }

/* Category header separator (Bagian 7) - subtle, no redesign. */
.tg-event-category-title {
  border-bottom: 1px solid #eef0f3;
  padding-bottom: .35rem;
}

body.dark-mode .tg-event-category-title { border-bottom-color: rgba(255, 255, 255, .08); }

/* Notification item card (Bagian 8/14/15/17) - restyles the existing
   .tg-catalog-row (search/filter JS still targets this exact class,
   unchanged) into a modern row: icon, then name/description/status
   stacked with a clear size/weight hierarchy, then the action button. */
.tg-catalog-row.tg-notif-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .8rem .9rem;
  border: 1px solid #eef0f3;
  border-radius: .6rem;
  margin-bottom: .5rem;
  background: #ffffff;
}

.tg-catalog-row.tg-notif-item:last-child { margin-bottom: 0; }

body.dark-mode .tg-catalog-row.tg-notif-item { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }

.tg-notif-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .5rem;
  background: #f3f6fa;
  color: #5a6472;
  font-size: .95rem;
  flex-shrink: 0;
}

body.dark-mode .tg-notif-icon { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7); }

.tg-notif-body {
  flex: 1 1 auto;
  min-width: 0;
}

.tg-notif-name {
  font-size: .95rem;
  font-weight: 700;
  color: #172033;
}

body.dark-mode .tg-notif-name { color: #f8fafc; }

.tg-notif-desc {
  font-size: .8rem;
  color: #6c7686;
  margin-top: .1rem;
}

.tg-notif-status {
  margin-top: .45rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.tg-notif-action {
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 576px) {
  .tg-catalog-row.tg-notif-item {
    flex-wrap: wrap;
  }
  .tg-notif-action {
    align-self: stretch;
    width: 100%;
  }
  .tg-notif-action .btn {
    width: 100%;
  }
}

.tg-template-status-line {
  font-size: .78rem;
  color: #1687f7;
  font-weight: 600;
  margin-top: .2rem;
}

.tg-template-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.tg-template-row {
  border: 1px solid #e2e6ea;
  border-radius: .5rem;
  padding: .85rem 1rem;
  background: #fbfcfd;
}

.tg-template-row-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}

.tg-template-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .5rem;
}

.tg-variable-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

.tg-variable-btn {
  font-family: monospace;
  font-size: .78rem;
}

.tg-telegram-preview {
  white-space: pre-wrap;
  word-break: break-word;
  background: #eef6ff;
  border: 1px solid #cfe3fb;
  border-radius: .6rem;
  padding: .9rem 1rem;
  font-size: .88rem;
  color: #1a2b42;
  min-height: 3rem;
}

.tg-template-textarea {
  font-family: monospace;
  font-size: .86rem;
}

body.dark-mode .tg-template-status-line { color: #7dd3fc; }
body.dark-mode .tg-template-row { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .1); }
body.dark-mode .tg-telegram-preview { background: rgba(56, 189, 248, .08); border-color: rgba(56, 189, 248, .25); color: rgba(255, 255, 255, .9); }

/* ---- Sidebar "TRANSAKSI" children indentation (Order/Return Order/
   Pemotongan/QC) ----
   These 4 items are still flat top-level <li> in config/adminlte.php
   (NOT nested inside TRANSAKSI's 'submenu' - see the long comment there
   for why: the package only recurses filters into 'submenu' for items
   that pass isSubmenu(), which requires a 'text' key TRANSAKSI
   deliberately doesn't have, so href/active/permission filtering must
   keep running on them as flat items exactly as it already does today).
   To still LOOK like Insight's indented submenu children, this class
   reproduces the exact padding/color/hover/active values AdminLTE itself
   uses for '.nav-treeview > .nav-item > .nav-link' (audited directly from
   public/vendor/adminlte/dist/css/adminlte.css - base .nav-link padding
   0.5rem 1rem, plus the 1rem left indent .nav-child-indent .nav-treeview
   normally adds via the wrapping <ul>, i.e. 1rem + 1rem = 2rem here since
   there is no such wrapping <ul> for these flat items). Sidebar is always
   the dark navy theme (see file header) - no light-sidebar variant to
   account for. */
.nav-sidebar > .nav-item > .nav-link.tg-transaction-child {
  padding-left: 2rem;
  color: #c2c7d0;
}

.nav-sidebar > .nav-item > .nav-link.tg-transaction-child:hover,
.nav-sidebar > .nav-item > .nav-link.tg-transaction-child:focus {
  background-color: rgba(255, 255, 255, .1);
  color: #fff;
}

/* Minimized/icon-only sidebar (body.sidebar-mini.sidebar-collapse, large
   screens - see config('adminlte.sidebar_mini') = 'lg'): the extra 2rem
   indent above must NOT persist here, or these 4 icons sit visibly further
   right than every other top-level icon (Beranda/Insight/Master
   Data/Pengaturan/Transaksi), which all keep the base .nav-link padding
   (0.5rem 1rem - adminlte.css line ~4308). AdminLTE itself does the exact
   same reset for REAL treeview children when collapsed
   (".sidebar-collapse .main-sidebar .nav-sidebar.nav-child-indent
   .nav-treeview { padding: 0; }" - adminlte.css line ~11779) - this rule
   is the equivalent for these flat (non-treeview) items. Only padding-left
   changes; text is already hidden by AdminLTE's own collapsed-sidebar CSS
   (.nav-link p { width: 0 }), and the active blue background (#007bff,
   see the earlier active-state fix) is unaffected by padding, so it still
   fills the row and stays centered on the icon exactly like every other
   active top-level item. */
body.sidebar-collapse .nav-sidebar > .nav-item > .nav-link.tg-transaction-child {
  padding-left: 1rem;
}

/* Bug fix: active state was WRONGLY overridden here to copy
   ".nav-treeview > .nav-item > .nav-link.active"'s white/gray colors
   (rgba(255,255,255,.9) bg + #343a40 text) - but Order/Return Order/
   Pemotongan/QC are NOT inside .nav-treeview (deliberately kept as flat
   .nav-sidebar > .nav-item children, see the note above), so the rule that
   was ALREADY correctly matching them all along is
   ".sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active"
   (background:#007bff, color:#fff - adminlte.css line ~12946, the exact
   blue used by every other active top-level sidebar item) - my override
   above had equal CSS specificity and loaded later, so it was silently
   winning and hiding the real blue. Removed entirely: no .active rule
   needed here at all, the vendor rule now applies again untouched. */

/* Bug fix (Reporting Jobdesk click audit, 2026-09): vendor adminlte.min.css
   ships `.tooltip{...}` WITHOUT `pointer-events:none` - verified by
   grepping every `pointer-events` occurrence in that file: all 12 are for
   unrelated disabled-state elements, none for .tooltip/.tooltip-inner/
   .bs-tooltip-*. Standard Bootstrap 4 sets pointer-events:none on .tooltip
   specifically so a popup positioned over its own trigger (or a neighbor)
   never blocks a click - without it, any Bootstrap tooltip anywhere in the
   app can physically intercept a click meant for whatever is underneath
   it. Root cause of "Isi Hari Ini" appearing unclickable on Reporting
   Jobdesk NUMBER cells (data-toggle="tooltip" on the whole <td>, history
   popup can land over its own "Isi Hari Ini" button/"Kemarin" chip
   depending on table layout/placement) - not tied to any specific jobdesk
   item, so which row is affected shifts whenever the page layout changes
   (rows added/reordered), matching the reported symptom exactly. This
   file loads last (see header comment), so plain source-order is enough
   to win over the vendor rule - no !important needed. Fixes tooltips
   app-wide, not just Reporting Jobdesk. */
.tooltip {
  pointer-events: none;
}