/* Palet X (Twitter) — light */
:root {
    --pp-canvas: #ffffff;
    --pp-surface: #ffffff;
    --pp-soft: #f7f9f9;
    --pp-ink: #0f1419;
    --pp-muted: #536471;
    --pp-line: #e6ecf0;
    --pp-accent: #1d9bf0;
    --pp-shadow: none;
    --pp-btn: #0f1419;
    --pp-btn-text: #ffffff;
    --pp-btn-hover: #272c30;
    --pp-hover: #f7f9f9;
    --pp-pill: 9999px;
}
/* Palet X — dark ("lights out") */
html[data-theme='dark'] {
    --pp-canvas: #000000;
    --pp-surface: #000000;
    --pp-soft: #16181c;
    --pp-ink: #e7e9ea;
    --pp-muted: #71767b;
    --pp-line: #2f3336;
    --pp-accent: #1d9bf0;
    --pp-shadow: none;
    --pp-btn: #eff3f4;
    --pp-btn-text: #0f1419;
    --pp-btn-hover: #d7dbdc;
    --pp-hover: #16181c;
}
body.c-app {
    --surface-1: var(--pp-surface);
    --surface-2: var(--pp-soft);
    --text-main: var(--pp-ink);
    --text-muted: var(--pp-muted);
    --border-soft: var(--pp-line);
    background: var(--pp-canvas);
    color: var(--pp-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body.c-app .content-wrapper {
    min-width: 0;
    background: var(--pp-canvas) !important;
    padding: 4.5rem 2rem 2rem;
}
body.c-app .page-title { font-size: clamp(1.4rem, 2.5vw, 1.85rem); letter-spacing: -.035em; line-height: 1.25; color: var(--pp-ink); }
body.c-app .page-subtitle { font-size: .9375rem; color: var(--pp-muted); line-height: 1.6; }
body.c-app .text-muted, body.c-app .form-text { color: var(--pp-muted) !important; }
body.c-app .card, body.c-app .listing-shell, body.c-app .modal-content {
    border-radius: 14px;
    border-color: var(--pp-line);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow);
}
body.c-app .card.shadow-sm { box-shadow: var(--pp-shadow) !important; }
body.c-app .card-header, body.c-app .listing-toolbar {
    background: var(--pp-surface);
    border-color: var(--pp-line);
    padding: 1rem 1.25rem;
}
body.c-app .listing-toolbar-danger { background: rgba(229, 83, 83, .07); }
body.c-app .card-header h5, body.c-app .listing-toolbar h5 { font-size: 1rem; font-weight: 650; line-height: 1.4; }
body.c-app .card-body { padding: 1.25rem; }
body.c-app .stat-card { height: 100%; transition: none; }
body.c-app .stat-card:hover { transform: none; box-shadow: var(--pp-shadow); }
body.c-app .card-title { font-variant-numeric: tabular-nums; }
body.c-app .form-control, body.c-app .form-select {
    min-height: 42px;
    border-radius: 9px;
    background-color: var(--pp-surface);
    border-color: var(--pp-line);
    color: var(--pp-ink);
    padding: .6rem .8rem;
    box-shadow: none;
}
body.c-app .form-control:focus, body.c-app .form-select:focus {
    border-color: var(--pp-accent);
    box-shadow: 0 0 0 3px rgba(100, 92, 220, .12);
}
body.c-app .form-control::placeholder { color: var(--pp-muted); opacity: .85; }
body.c-app .form-highlight { border-color: var(--pp-line) !important; }
body.c-app .form-highlight:focus { border-color: var(--pp-accent) !important; }
body.c-app .form-label { font-size: .875rem; font-weight: 550; margin-bottom: .45rem; }
body.c-app .input-group-text { border-color: var(--pp-line); background: var(--pp-soft); }
body.c-app .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.c-app .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.c-app textarea.form-control { line-height: 1.6; }
body.c-app .form-check-label { line-height: 1.5; }
body.c-app .btn { line-height: 1.3; }
body.c-app .btn:not(.btn-sm) { min-height: 42px; }
body.c-app .btn > .bi { flex-shrink: 0; }
body.c-app .btn:disabled { transform: none; }
body.c-app .btn-group { flex-direction: row; gap: 0; }
body.c-app .btn-group .btn { width: auto; }
body.c-app .table-responsive {
    height: auto;
    min-height: 0;
    max-height: 480px;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pp-line) transparent;
}
body.c-app .table { font-size: .875rem; font-variant-numeric: tabular-nums; }
body.c-app .table > :not(caption) > * > * { padding: .85rem .85rem; border-color: var(--pp-line); }
body.c-app .table thead th { font-size: .75rem; font-weight: 600; color: var(--pp-muted); white-space: nowrap; }
body.c-app .table-responsive .table thead th { background: var(--pp-soft) !important; }
body.c-app .table-responsive:focus-visible { outline-offset: -2px; }
body.c-app .action-stack { gap: .5rem; }
body.c-app .badge { font-weight: 550; line-height: 1.35; }
body.c-app .alert { border-radius: 10px; line-height: 1.6; overflow-wrap: anywhere; }
body.c-app .modal-content { overflow: hidden; }
body.c-app .modal-header, body.c-app .modal-footer { padding: 1rem 1.25rem; background: var(--pp-surface); border-color: var(--pp-line); }
body.c-app .modal-title { font-size: 1.125rem; font-weight: 650; }
body.c-app .modal-body { padding: 1.25rem; }
body.c-app .modal-dialog { padding: .5rem; }
body.c-app .btn-close { box-sizing: border-box; width: 40px; height: 40px; padding: 12px; background-size: 14px; flex-shrink: 0; }
body.c-app .modal-header .btn-close { margin: -.5rem -.5rem -.5rem auto; }
body.c-app .sidebar { background: var(--pp-surface) !important; border-right: 1px solid var(--pp-line); }
body.c-app .sidebar-brand { font-size: 1.35rem; min-height: 72px; letter-spacing: -.025em; color: var(--pp-ink); }
body.c-app .sidebar-menu { padding: .5rem .75rem; }
body.c-app .sidebar-menu li a { min-height: 44px; font-size: .9375rem; font-weight: 600; color: var(--pp-ink); border-radius: var(--pp-pill); margin: 2px 0; padding: 10px 16px; transition: background-color 140ms ease; }
body.c-app .sidebar-menu li a:hover { background: var(--pp-hover); }
body.c-app .sidebar-menu li a.active { background: transparent; color: var(--pp-ink); font-weight: 800; box-shadow: none; }
body.c-app .sidebar-menu li a.active i { color: var(--pp-accent); }
body.c-app .sidebar-menu li a i { color: var(--pp-muted); }
body.c-app .sidebar-menu li:last-child { margin-top: 1.25rem; padding-top: .65rem; border-top: 1px solid var(--pp-line); }
body.c-app.mobile-menu-open { touch-action: auto; }
body.c-app .sidebar { overscroll-behavior: contain; }
body.c-app .sidebar-close { display: none; background: transparent; color: var(--pp-ink); border: 1px solid var(--pp-line); border-radius: 8px; width: 40px; height: 40px; }
body.c-app .theme-toggle, body.c-app .mobile-menu-toggle { height: 40px; min-width: 40px; padding: 8px 12px; top: 16px; border-radius: 10px; box-shadow: var(--pp-shadow); }
body.c-app .theme-toggle { right: 24px; background: var(--pp-surface); }
body.c-app .theme-toggle:hover { transform: none; }
body.c-app .auto-check-status { font-size: .8125rem; padding: .55rem .85rem; right: 20px; left: auto; bottom: 16px; pointer-events: none; }
body.c-app .panel-footer-credit { font-size: .75rem; padding: 1.25rem 0 0; color: var(--pp-muted); }
body.c-app :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 3px; }
body.c-app .sidebar :focus-visible { outline-color: #c4c0ff; }
body.c-app .btn:focus-visible { transform: none; }
@media (min-width: 992px) {
    body.c-app .main-shell { flex-wrap: nowrap; }
    body.c-app .sidebar.col-md-2 { flex: 0 0 256px; width: 256px; max-width: 256px; }
    body.c-app .content-wrapper.col-md-10 { flex: 1 1 auto; width: auto; max-width: calc(100% - 256px); }
    body.c-app .sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
}
@media (max-width: 991px) {
    body.c-app .main-shell { flex-wrap: nowrap; }
    body.c-app .sidebar.col-md-2 { position: fixed; top: 0; left: 0; width: min(280px, 86vw); max-width: 86vw; height: 100dvh; min-height: 0; z-index: 1040; transform: translateX(calc(-100% - 12px)); overflow-y: auto; transition: transform 200ms ease-out; }
    body.c-app .sidebar.show { transform: translateX(0); }
    body.c-app .sidebar-close { display: inline-grid; place-items: center; }
    body.c-app .mobile-menu-toggle { display: inline-grid; place-items: center; left: 16px; font-size: 1.25rem; }
    body.c-app .mobile-overlay.show { display: block; z-index: 1030; }
    body.c-app .content-wrapper.col-md-10 { width: 100%; max-width: 100%; flex: 1 1 100%; padding: 5rem 1.25rem 1.5rem; }
    body.c-app .btn, body.c-app .btn:not(.btn-sm), body.c-app .theme-toggle, body.c-app .mobile-menu-toggle, body.c-app .btn-close, body.c-app .sidebar-close { min-height: 44px; }
    body.c-app .btn.btn-icon { min-width: 44px; min-height: 44px; }
    body.c-app .form-control, body.c-app .form-select { min-height: 44px; font-size: 16px; }
    body.c-app .theme-toggle { right: 16px; }
}
@media (max-width: 575px) {
    body.c-app .content-wrapper.col-md-10 { padding-left: 1rem; padding-right: 1rem; }
    body.c-app .card-body, body.c-app .card-header, body.c-app .listing-toolbar, body.c-app .modal-body, body.c-app .modal-header, body.c-app .modal-footer { padding: 1rem; }
    body.c-app .content-wrapper > .d-flex:has(.page-title) { gap: 1rem !important; }
    body.c-app .page-title { font-size: 1.4rem; }
    body.c-app .table-responsive { max-height: 360px; }
    body.c-app .modal-dialog { margin: .25rem; padding: .25rem; }
    body.c-app .modal-footer { gap: .5rem; }
    body.c-app .modal-footer > * { margin: 0; }
    body.c-app .auto-check-status { top: 22px; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 136px); padding: .4rem .5rem; gap: .35rem; font-size: .7rem; }
    body.c-app .form-control[type='file'] { padding: .5rem; font-size: .875rem; }
}
body.c-app .manual-shell, body.c-app .manual-content, body.c-app .manual-grid { min-width: 0; }
body.c-app .manual-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
body.c-app .manual-hero { background: var(--pp-surface); border-color: var(--pp-line); padding: 1.5rem; }
body.c-app .manual-hero h1 { font-size: 1.65rem; letter-spacing: -.03em; }
body.c-app .manual-toc, body.c-app .manual-content { background: var(--pp-surface); border-color: var(--pp-line); }
body.c-app .manual-toc { position: static; max-height: none; }
body.c-app .manual-toc a { min-height: 44px; font-size: .875rem; }
body.c-app .manual-content { padding: 1.5rem; overflow-wrap: anywhere; }
body.c-app .manual-section { padding: 1.25rem 0; scroll-margin-top: 5rem; }
body.c-app .manual-section h3 { font-size: 1.15rem; margin-bottom: .85rem; }
body.c-app .manual-section p, body.c-app .manual-section li { line-height: 1.75; }
body.c-app .manual-content pre { max-width: 100%; overflow-x: auto; }
body.c-app .manual-lang-switch button { min-height: 44px; padding: .6rem 1rem; }
body.c-app .manual-meta .badge { white-space: normal; text-align: left; }
@media (min-width: 1200px) {
    body.c-app .manual-grid { grid-template-columns: 230px minmax(0, 1fr); }
    body.c-app .manual-toc { position: sticky; top: 1.25rem; max-height: calc(100dvh - 2.5rem); }
}
@media (max-width: 575px) {
    body.c-app .manual-hero, body.c-app .manual-content { padding: 1rem; }
}
body.c-app:has(.login-card) { padding: 5rem 1rem 2rem; min-height: 100dvh; height: auto !important; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
body.c-app .login-card { border-color: var(--pp-line); border-radius: 18px; box-shadow: 0 12px 40px rgba(24,35,58,.08); }
body.c-app .login-header { background: var(--pp-surface); padding: 1.5rem 2rem; }
body.c-app .login-header h1 { font-size: 1.6rem; letter-spacing: -.03em; }
body.c-app .login-header p { color: var(--pp-muted); font-size: .875rem; }
body.c-app .login-body { padding: 1.5rem 2rem 2rem; }
body.c-app .btn-login { min-height: 46px; border-radius: 9px; transition: background-color 160ms ease; }
body.c-app .btn-login:hover { transform: none; }
body.c-app .footer-credit { position: static; font-size: .75rem; color: var(--pp-muted); }
@media (prefers-reduced-motion: reduce) {
    body.c-app .sidebar, body.c-app .modal.fade .modal-dialog { transition: none; }
    body.c-app .pulse { animation: none; }
    body.c-app .btn:hover, body.c-app .btn:active, body.c-app .theme-toggle:hover { transform: none; }
}

body.c-app .btn-outline-success { --cui-btn-color: #187849; --cui-btn-border-color: #389768; --cui-btn-hover-bg: #187849; --cui-btn-hover-border-color: #187849; --cui-btn-hover-color: #fff; }
body.c-app .btn-outline-danger { --cui-btn-color: #f4212e; --cui-btn-border-color: #f4212e; --cui-btn-hover-bg: #f4212e; --cui-btn-hover-border-color: #f4212e; --cui-btn-hover-color: #fff; --cui-btn-active-bg: #f4212e; --cui-btn-active-color: #fff; }
html[data-theme='dark'] body.c-app .btn-outline-success { --cui-btn-color: #79dfad; --cui-btn-border-color: #459d72; }
html[data-theme='dark'] body.c-app .btn-outline-danger { --cui-btn-color: #f4212e; --cui-btn-border-color: #f4212e; }
html[data-theme='dark'] body.c-app .btn-outline-primary { --cui-btn-color: #b7b3ff; --cui-btn-border-color: #847deb; }
@media (max-width: 359px) {
    body.c-app .dashboard-range-form > div { grid-column: 1 / -1; }
    body.c-app .login-body, body.c-app .login-header { padding: 1.25rem; }
}

/* ═══════════ Aksen X (Twitter) — lapisan akhir, menang urutan ═══════════ */
body.c-app .btn { border-radius: var(--pp-pill); font-weight: 700; letter-spacing: -.01em; }
body.c-app .btn-primary {
    --cui-btn-bg: var(--pp-btn); --cui-btn-border-color: var(--pp-btn); --cui-btn-color: var(--pp-btn-text);
    --cui-btn-hover-bg: var(--pp-btn-hover); --cui-btn-hover-border-color: var(--pp-btn-hover); --cui-btn-hover-color: var(--pp-btn-text);
    --cui-btn-active-bg: var(--pp-btn-hover); --cui-btn-active-border-color: var(--pp-btn-hover); --cui-btn-active-color: var(--pp-btn-text);
    --cui-btn-disabled-bg: var(--pp-btn); --cui-btn-disabled-border-color: var(--pp-btn); --cui-btn-disabled-color: var(--pp-btn-text);
}
body.c-app .btn-outline-primary {
    --cui-btn-color: var(--pp-ink); --cui-btn-border-color: var(--pp-line);
    --cui-btn-hover-bg: var(--pp-hover); --cui-btn-hover-border-color: var(--pp-line); --cui-btn-hover-color: var(--pp-ink);
    --cui-btn-active-bg: var(--pp-hover); --cui-btn-active-border-color: var(--pp-line); --cui-btn-active-color: var(--pp-ink);
}
html[data-theme='dark'] body.c-app .btn-outline-primary { --cui-btn-color: var(--pp-ink); --cui-btn-border-color: var(--pp-line); }
body.c-app .btn-link { color: var(--pp-accent); }
body.c-app .badge { border-radius: var(--pp-pill); font-weight: 700; }
body.c-app .badge.bg-primary { background-color: var(--pp-accent) !important; }
body.c-app a:not(.btn):not(.nav-link):not(.page-link) { color: var(--pp-accent); }
body.c-app .form-control:focus, body.c-app .form-select:focus { border-color: var(--pp-accent); box-shadow: 0 0 0 1px var(--pp-accent); }
body.c-app :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline-color: var(--pp-accent); }
body.c-app .form-check-input:checked { background-color: var(--pp-accent); border-color: var(--pp-accent); }
body.c-app .form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
/* paginasi — jarak lega + tombol bulat (fix "prev 1 2 mepet") */
body.c-app .pagination { gap: 6px; flex-wrap: wrap; }
body.c-app .pagination .page-link {
    border-radius: var(--pp-pill); border: 1px solid var(--pp-line); color: var(--pp-ink); background: var(--pp-surface);
    min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0 12px;
}
body.c-app .pagination .page-item.active .page-link { background: var(--pp-btn); border-color: var(--pp-btn); color: var(--pp-btn-text); }
body.c-app .pagination .page-item.disabled .page-link { opacity: .5; }
body.c-app .pagination .page-link:hover { background: var(--pp-hover); }
/* login — kartu datar, tombol pill hitam */
body.c-app .login-card { box-shadow: none; border-radius: 20px; }
body.c-app .login-header { border-bottom: 1px solid var(--pp-line); }
body.c-app .btn-login { border-radius: var(--pp-pill); background: var(--pp-btn); border-color: var(--pp-btn); color: var(--pp-btn-text); font-weight: 700; }
body.c-app .btn-login:hover { background: var(--pp-btn-hover); border-color: var(--pp-btn-hover); color: var(--pp-btn-text); }

/* Font Inter (paling dekat & nyaman ala X-Chirp) */
body.c-app, body.c-app .btn, body.c-app .form-control, body.c-app .form-select, body.c-app .page-title, body.c-app h1, body.c-app h2, body.c-app h3, body.c-app h4, body.c-app h5, body.c-app .sidebar-menu li a, body.c-app .table, body.c-app .badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: 'cv02','cv03','cv04','cv11';
}

/* Mobile: label tombol jangan pecah 2 baris (parent sudah flex-wrap) */
body.c-app .btn { white-space: nowrap; }

/* Fix switch inline: Bootstrap kasih margin-left -2.5em (butuh padding parent);
   karena kita pakai d-inline-flex + ps-0, reset biar nggak nabrak kolom sebelah */
body.c-app .form-switch.d-inline-flex .form-check-input { margin-left: 0; }

/* Switch + label rapi: satu baris flex, rata tengah, gap konsisten (fix crowd/nabrak) */
body.c-app .form-check.form-switch { display: flex; align-items: center; gap: .55rem; padding-left: 0; min-height: 0; margin-bottom: 0; }
body.c-app .form-check.form-switch .form-check-input { margin-left: 0; margin-top: 0; float: none; flex-shrink: 0; }
body.c-app .form-check.form-switch .form-check-label { margin: 0; line-height: 1.3; }

/* Accordion (Advanced Setting) → X, buang ungu CoreUI */
body.c-app .accordion-button { font-weight: 700; color: var(--pp-ink); background: var(--pp-surface); border-radius: 12px !important; }
body.c-app .accordion-button:not(.collapsed) { background: var(--pp-soft); color: var(--pp-ink); box-shadow: none; }
body.c-app .accordion-button:focus { box-shadow: 0 0 0 2px rgba(29,155,240,.3); border-color: var(--pp-line); }
body.c-app .accordion-item { border-color: var(--pp-line); background: var(--pp-surface); }

/* Filter "Mode | Allow/Block": kasih jarak (boss minta), bukan nempel */
body.c-app .mode-group { gap: .5rem; flex-wrap: nowrap; }
body.c-app .mode-group > .input-group-text { border-radius: 9px !important; flex: 0 0 auto; }
body.c-app .mode-group > .form-select { border-radius: 9px !important; }