/* Lapisan tema di atas Bootstrap 5.3. Warna utama = --hd-primary (diatur Leader lewat dashboard; di-set oleh app.js). */
:root {
  --hd-primary: #c1121f;
  --hd-primary-dark: #8f0d17;
  --hd-primary-soft: #fdecee;
  --hd-ink: #101113;
  --hd-bg: #f4f5f7;
  --hd-nav-h: 62px;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Color Emoji", "Segoe UI Emoji", sans-serif;
  --bs-body-bg: var(--hd-bg);
  --bs-body-color: #1d1f23;
  --bs-border-radius: .75rem;
}
body { background: var(--hd-bg); color: #1d1f23; font-family: var(--bs-body-font-family); -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--hd-ink); font-family: inherit; font-weight: 700; }
.text-secondary, .text-muted, .small.text-secondary { color: #626b75 !important; }
.hd-hero .small, .hd-hero .text-secondary { color: rgba(255,255,255,.8) !important; }
a { color: var(--hd-primary); }
a:hover { color: var(--hd-primary-dark); }
.text-primary { color: var(--hd-primary) !important; }
.bg-primary { background-color: var(--hd-primary) !important; }
.border-primary { border-color: var(--hd-primary) !important; }

/* Tombol */
.btn { border-radius: .65rem; font-weight: 600; }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--hd-primary); --bs-btn-border-color: var(--hd-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--hd-primary-dark); --bs-btn-hover-border-color: var(--hd-primary-dark); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--hd-primary-dark); --bs-btn-active-border-color: var(--hd-primary-dark); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--hd-primary); --bs-btn-disabled-border-color: var(--hd-primary); --bs-btn-focus-shadow-rgb: 193, 18, 31; }
.btn-outline-primary { --bs-btn-color: var(--hd-primary); --bs-btn-border-color: var(--hd-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--hd-primary); --bs-btn-hover-border-color: var(--hd-primary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--hd-primary-dark); --bs-btn-active-border-color: var(--hd-primary-dark); --bs-btn-disabled-color: var(--hd-primary); --bs-btn-disabled-border-color: var(--hd-primary); }
.btn-dark { --bs-btn-color: #fff; --bs-btn-bg: var(--hd-ink); --bs-btn-border-color: var(--hd-ink); --bs-btn-hover-bg: #2b2d31; --bs-btn-hover-border-color: #2b2d31; --bs-btn-hover-color: #fff; }
.btn-success { --bs-btn-color: #fff; --bs-btn-bg: #198754; --bs-btn-border-color: #198754; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #146c43; --bs-btn-hover-border-color: #146c43; }
.btn-danger { --bs-btn-color: #fff; --bs-btn-bg: #b42318; --bs-btn-border-color: #b42318; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #912018; --bs-btn-hover-border-color: #912018; }
.btn-outline-secondary { --bs-btn-color: #495057; --bs-btn-border-color: #ced4da; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #495057; --bs-btn-hover-border-color: #495057; }
.btn-link { color: var(--hd-primary); }


/* Tema Cerulean memberi gradien + warna literal pada tombol; kita paksa mengikuti --hd-primary */
.btn-primary, .btn-primary:focus { background: var(--hd-primary) !important; background-image: none !important; border-color: var(--hd-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:active, .btn-primary.active { background: var(--hd-primary-dark) !important; background-image: none !important; border-color: var(--hd-primary-dark) !important; color: #fff !important; }
.btn-primary:disabled, .btn-primary.disabled { opacity: .6; }
.btn-outline-primary { background: transparent !important; background-image: none !important; border-color: var(--hd-primary) !important; color: var(--hd-primary) !important; }
.btn-outline-primary:hover, .btn-outline-primary:active { background: var(--hd-primary) !important; color: #fff !important; }
.btn-success { background: #198754 !important; background-image: none !important; border-color: #198754 !important; color: #fff !important; }
.btn-danger { background: #b42318 !important; background-image: none !important; border-color: #b42318 !important; color: #fff !important; }
.btn-dark { background: var(--hd-ink) !important; background-image: none !important; border-color: var(--hd-ink) !important; color: #fff !important; }
.btn-outline-secondary { background: #fff !important; background-image: none !important; border-color: #b6bcc4 !important; color: #3c4349 !important; }
.btn-outline-secondary:hover { background: #3c4349 !important; color: #fff !important; }
.btn-link { background: none !important; border-color: transparent !important; color: var(--hd-primary) !important; }
.hd-topbar .btn-menu { background: transparent !important; border-color: #4a4d55 !important; color: #fff !important; }
.modal-title, .modal-body, .modal-header { color: #1d1f23; }
.card h1, .card h2, .card h3, .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6 { color: var(--hd-ink); }
.hd-hero h1, .hd-hero h2, .hd-hero .h1, .hd-hero .h3 { color: #fff !important; }
.hd-hero .hd-meta { color: rgba(255,255,255,.75); }
.hd-auth h1 { color: var(--hd-ink); }
.form-text { color: #626b75; }

/* Form */
.form-control, .form-select { border-radius: .65rem; border: 1.5px solid #ced4da; background-color: #fff; color: #1d1f23; padding: .6rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--hd-primary); box-shadow: 0 0 0 .22rem rgba(var(--hd-primary-rgb, 193, 18, 31), .22); background-color: #fff; color: #1d1f23; }
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; color: #1d1f23; }
.form-text { color: #6c757d; font-size: .82rem; }
.form-check-input:checked { background-color: var(--hd-primary); border-color: var(--hd-primary); }
.form-check-input:focus { border-color: var(--hd-primary); box-shadow: 0 0 0 .22rem rgba(var(--hd-primary-rgb, 193, 18, 31), .22); }
.form-label.fw-normal { font-weight: 400; }

/* Kartu */
.card { border: 1px solid #e6e8ec; border-radius: 1rem; background: #fff; color: #1d1f23; --bs-card-cap-bg: #fff; }
.card .card-body { padding: 1rem; }
.hd-hero { background: linear-gradient(135deg, var(--hd-ink) 0%, var(--hd-primary-dark) 62%, var(--hd-primary) 100%); color: #fff; border: 0; }
.hd-hero h1, .hd-hero h2 { color: #fff; }
.hd-hero .text-muted, .hd-hero .small { color: rgba(255,255,255,.78) !important; }
.hd-kv { display: grid; grid-template-columns: 112px 1fr; gap: .4rem .75rem; margin: .75rem 0 0; }
.hd-kv dt { font-weight: 400; opacity: .78; font-size: .88rem; }
.hd-kv dd { margin: 0; font-weight: 600; word-break: break-word; }
.hd-stat { text-align: center; padding: .75rem .5rem; }
.hd-stat b { display: block; font-size: 1.3rem; color: var(--hd-primary); }
.hd-stat small { color: #6c757d; }

/* Badge (Cerulean mengubah warnanya; kita kembalikan) */
.badge { font-weight: 700; border-radius: 999px; padding: .38em .7em; }
.badge.hd-leader { background: var(--hd-primary) !important; color: #fff; }
.badge.hd-co-leader { background: var(--hd-ink) !important; color: #fff; }
.badge.hd-member, .badge.hd-neutral { background: #e9ecef !important; color: #343a40; }
.badge.hd-active { background: #dff5e7 !important; color: #14633a; }
.badge.hd-nonactive { background: #fff1cc !important; color: #6b4a00; }
.badge.hd-deactive { background: #e9ecef !important; color: #6c757d; }
.badge.hd-live { background: var(--hd-primary) !important; color: #fff; }
.badge.hd-warn { background: #fff1cc !important; color: #6b4a00; }
.badge.hd-bad { background: #fde8e7 !important; color: #912018; }

/* Navigasi */
.hd-topbar { background: var(--hd-ink); border-bottom: 3px solid var(--hd-primary); padding: .55rem .9rem; padding-top: calc(.55rem + env(safe-area-inset-top, 0px)); }
.hd-logo { width: 36px; height: 36px; border-radius: .6rem; background: var(--hd-primary); color: #fff; display: grid; place-items: center; font-weight: 900; flex: none; }
.hd-topbar .navbar-brand { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.15; margin: 0; min-width: 0; }
.hd-topbar .navbar-brand small { display: block; font-weight: 400; color: #b8bcc4; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-topbar .btn-menu { color: #fff; border: 1.5px solid #4a4d55; background: transparent; }
.dropdown-menu { border-radius: .8rem; border: 1px solid #e6e8ec; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.dropdown-item { padding: .6rem 1rem; color: #1d1f23; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--hd-primary-soft); color: #1d1f23; }
.hd-shell { min-height: 100vh; padding-bottom: calc(var(--hd-nav-h) + env(safe-area-inset-bottom, 0px) + 12px); }
.hd-main { max-width: 980px; }
.hd-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid #e6e8ec; display: flex; padding-bottom: env(safe-area-inset-bottom, 0px); }
.hd-bottomnav a { flex: 1; text-align: center; padding: .5rem .1rem .45rem; text-decoration: none; color: #6c757d; font-size: .7rem; font-weight: 600; min-width: 0; }
.hd-bottomnav a .ic { display: block; font-size: 1.25rem; line-height: 1.15; }
.hd-bottomnav a.on { color: var(--hd-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--hd-primary); --bs-nav-pills-link-active-color: #fff; --bs-nav-link-color: var(--hd-primary); --bs-nav-link-hover-color: var(--hd-primary-dark); gap: .35rem; }
.nav-pills .nav-link { border-radius: 999px; font-weight: 600; border: 1.5px solid var(--hd-primary); padding: .35rem .9rem; background: #fff; color: var(--hd-primary); }
.nav-pills .nav-link.active { background: var(--hd-primary); color: #fff; }
.nav-pills .nav-link .badge { margin-left: .3rem; }

/* Item daftar */
.hd-item { background: #fff; border: 1px solid #e6e8ec; border-radius: .9rem; padding: .8rem .9rem; margin-bottom: .55rem; display: block; color: inherit; text-decoration: none; }
a.hd-item:hover { border-color: var(--hd-primary); color: inherit; }
.hd-item.mine { border-color: var(--hd-primary); box-shadow: inset 4px 0 0 var(--hd-primary); }
.hd-name { font-weight: 700; word-break: break-word; }
.hd-meta { color: #6c757d; font-size: .84rem; margin-top: .15rem; word-break: break-word; }
.hd-pre { white-space: pre-wrap; word-break: break-word; }
.hd-empty { text-align: center; color: #6c757d; padding: 1.6rem .5rem; }
.hd-skel { height: 62px; border-radius: .9rem; background: linear-gradient(90deg, #eceef1, #f8f9fa, #eceef1); background-size: 200% 100%; animation: hdsk 1.2s infinite; margin-bottom: .55rem; }
@keyframes hdsk { to { background-position: -200% 0; } }
.hd-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--hd-nav-h) + 22px); background: var(--hd-ink); color: #fff; padding: .6rem 1rem; border-radius: 999px; z-index: 2000; max-width: 92%; font-size: .92rem; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.hd-chart { width: 100%; height: auto; display: block; }
.table { --bs-table-bg: transparent; color: #1d1f23; }
.table > :not(caption) > * > * { border-bottom-color: #e6e8ec; }
.table th { font-size: .76rem; text-transform: uppercase; color: #6c757d; }
.hd-swatch { width: 44px; height: 44px; border-radius: .7rem; border: 1.5px solid #ced4da; flex: none; }
input[type=color].form-control-color { width: 56px; height: 44px; padding: .2rem; }
.alert { border-radius: .75rem; }
.modal-content { border-radius: 1rem; color: #1d1f23; }

/* Login */
.hd-auth { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 1.25rem; background: linear-gradient(160deg, var(--hd-ink) 0%, #26090c 52%, var(--hd-primary-dark) 100%); }
.hd-auth .card { max-width: 430px; width: 100%; margin: 0 auto; box-shadow: 0 14px 44px rgba(0,0,0,.45); }

@media (min-width: 992px) {
  .hd-bottomnav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 62px; background: var(--hd-ink); border-bottom: 3px solid var(--hd-primary); }
  .hd-shell { padding-bottom: 24px; padding-left: 208px; }
  .hd-bottomnav { top: 0; bottom: auto; right: auto; width: 208px; flex-direction: column; border-top: 0; border-right: 1px solid #e6e8ec; padding-top: 76px; }
  .hd-bottomnav a { text-align: left; padding: .85rem 1.2rem; font-size: .95rem; }
  .hd-bottomnav a .ic { display: inline-block; margin-right: .55rem; font-size: 1.1rem; }
  .hd-topbar { margin-left: -208px; padding-left: calc(208px + .9rem); }
  .hd-toast { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .hd-skel { animation: none; } }