/*! Web Sekolah — © 2026 sharecode.id (https://sharecode.id) | Lisensi Member PRO sharecode.id — lihat LICENSE.md. Header ini tidak boleh dihapus. */
/* Panel admin Web Sekolah */
:root {
  --ad-primary: #3f6e94;
  --ad-primary-soft: #e8f0f7;
  --ad-sidebar: #1f2d3a;
  --ad-sidebar-text: #b8c4cf;
  --ad-bg: #f4f6f9;
  --ad-line: #e3e7ec;
  --bs-primary: #3f6e94;
  --bs-primary-rgb: 63, 110, 148;
  --bs-link-color: #3f6e94;
  --bs-link-color-rgb: 63, 110, 148;
  --bs-body-font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body { background: var(--ad-bg); font-size: .94rem; }
.icon { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.17em; flex-shrink: 0; }
.btn-primary { --bs-btn-bg: var(--ad-primary); --bs-btn-border-color: var(--ad-primary); --bs-btn-hover-bg: #335b7b; --bs-btn-hover-border-color: #335b7b; --bs-btn-active-bg: #2c4f6b; }
.btn-outline-primary { --bs-btn-color: var(--ad-primary); --bs-btn-border-color: var(--ad-primary); --bs-btn-hover-bg: var(--ad-primary); --bs-btn-hover-border-color: var(--ad-primary); }

/* Layout */
.ad-sidebar { position: fixed; inset: 0 auto 0 0; width: 250px; background: var(--ad-sidebar); color: var(--ad-sidebar-text); overflow-y: auto; z-index: 1040; transition: transform .25s; }
.ad-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.2rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.ad-brand img { width: 36px; height: 36px; object-fit: contain; }
.ad-brand strong { font-size: .95rem; line-height: 1.2; display: block; }
.ad-brand small { font-size: .72rem; color: var(--ad-sidebar-text); }
.ad-nav { padding: .6rem 0 2rem; }
.ad-nav .ad-group { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #7f8e9c; padding: 1rem 1.3rem .35rem; }
.ad-nav a { display: flex; align-items: center; gap: .7rem; padding: .5rem 1.3rem; color: var(--ad-sidebar-text); text-decoration: none; font-size: .9rem; border-left: 3px solid transparent; }
.ad-nav a:hover { color: #fff; background: rgba(255,255,255,.04); }
.ad-nav a.active { color: #fff; background: rgba(255,255,255,.07); border-left-color: #7fb0d6; }
.ad-nav .badge { margin-left: auto; }
.ad-main { margin-left: 250px; min-height: 100vh; display: flex; flex-direction: column; }
.ad-topbar { background: #fff; border-bottom: 1px solid var(--ad-line); padding: .7rem 1.5rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 1030; }
.ad-topbar h1 { font-size: 1.1rem; margin: 0; font-weight: 600; }
.ad-content { padding: 1.5rem; flex: 1; }
.ad-footer { padding: 1rem 1.5rem; color: #8a96a3; font-size: .8rem; }
.ad-toggle { display: none; border: 0; background: none; padding: .25rem; }
.ad-backdrop { display: none; }

@media (max-width: 991.98px) {
  .ad-sidebar { transform: translateX(-100%); }
  .ad-sidebar.open { transform: none; }
  .ad-main { margin-left: 0; }
  .ad-toggle { display: inline-flex; }
  .ad-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1035; }
}

/* Komponen */
.card { border-color: var(--ad-line); border-radius: .6rem; }
.card-header { background: #fff; border-bottom-color: var(--ad-line); font-weight: 600; }
.stat-card { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; }
.stat-card .stat-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--ad-primary-soft); color: var(--ad-primary); display: flex; align-items: center; justify-content: center; }
.stat-card .stat-icon .icon { width: 24px; height: 24px; }
.stat-card b { font-size: 1.6rem; display: block; line-height: 1.1; }
.table > :not(caption) > * > * { padding: .7rem .8rem; vertical-align: middle; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7785; background: #fafbfc; }
.thumb { width: 64px; height: 44px; object-fit: cover; border-radius: .35rem; background: #eef1f4; }
.thumb-round { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.form-label { font-weight: 600; font-size: .88rem; }
.form-text { font-size: .8rem; }
.img-current { max-height: 120px; border-radius: .4rem; border: 1px solid var(--ad-line); }
.nav-pills .nav-link { color: #4b5866; }
.nav-pills .nav-link.active { background: var(--ad-primary); }

/* Ikon pilihan */
.icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: .4rem; }
.icon-picker label { border: 1px solid var(--ad-line); border-radius: .5rem; padding: .55rem .2rem; text-align: center; cursor: pointer; font-size: .68rem; color: #6b7785; background: #fff; }
.icon-picker label .icon { width: 22px; height: 22px; display: block; margin: 0 auto .3rem; color: #4b5866; }
.icon-picker input { position: absolute; opacity: 0; pointer-events: none; }
.icon-picker input:checked + label { border-color: var(--ad-primary); background: var(--ad-primary-soft); color: var(--ad-primary); }
.icon-picker input:focus-visible + label { outline: 2px solid var(--ad-primary); }

/* Tema */
.theme-card { overflow: hidden; }
.theme-card .theme-preview { height: 150px; background-size: cover; background-position: center right; position: relative; border-bottom: 1px solid var(--ad-line); }
.theme-card .theme-swatch { position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.theme-card.active { border: 2px solid var(--ad-primary); box-shadow: 0 6px 20px rgba(63,110,148,.15); }
.preview-bar { background: #1f2d3a; color: #fff; font-size: .85rem; padding: .5rem 1rem; display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 2000; }
.preview-bar a { color: #ffd88a; }

/* Trix */
trix-editor { min-height: 260px; background: #fff; border-color: var(--bs-border-color) !important; border-radius: .375rem; }
trix-toolbar .trix-button-group--file-tools { display: none; }
trix-editor h1 { font-size: 1.4rem; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e8f0f7, #f4f1ea); padding: 1rem; }
.login-card { width: 100%; max-width: 400px; }

/* ==========================================================================
   Formulir ala WordPress klasik (berita, pengumuman, halaman)
   ========================================================================== */
.wp-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 991.98px) { .wp-editor-layout { grid-template-columns: 1fr; } }

.wp-title input { width: 100%; font-size: 1.6rem; line-height: 1.4; padding: .35rem .7rem; border: 1px solid #8c8f94; border-radius: 0; background: #fff; box-shadow: 0 0 0 transparent; }
.wp-title input:focus { outline: 0; border-color: var(--ad-primary); box-shadow: 0 0 0 1px var(--ad-primary); }
.wp-title input.is-invalid { border-color: #d63638; }
.wp-permalink { font-size: .82rem; color: #646970; margin: .45rem 0 1.1rem; word-break: break-all; }

.wp-body { margin-bottom: 20px; }
.wp-body trix-toolbar { background: #f6f7f7; border: 1px solid #dcdcde; border-bottom: 0; padding: 6px 8px 0; }
.wp-body trix-toolbar .trix-button-row { flex-wrap: wrap; }
.wp-body trix-toolbar .trix-button-group { border-color: #c3c4c7; margin-bottom: 6px; }
.wp-body trix-editor.wp-trix { min-height: 420px; border: 1px solid #dcdcde !important; border-radius: 0; padding: 1rem 1.1rem; background: #fff; font-size: 1rem; line-height: 1.75; }
.wp-body trix-editor.wp-trix:focus { outline: 0; border-color: var(--ad-primary) !important; }
.wp-wordcount { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #f6f7f7; border: 1px solid #dcdcde; border-top: 0; padding: .3rem .7rem; font-size: .78rem; color: #50575e; }

.postbox { background: #fff; border: 1px solid #c3c4c7; box-shadow: 0 1px 1px rgba(0,0,0,.04); margin-bottom: 20px; }
.postbox-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #c3c4c7; min-height: 40px; padding: 0 4px 0 12px; }
.postbox-header h2 { font-size: .9rem; font-weight: 600; margin: 0; color: #1d2327; }
.postbox-toggle { border: 0; background: none; width: 36px; height: 36px; color: #787c82; display: inline-flex; align-items: center; justify-content: center; }
.postbox-toggle:hover { color: #1d2327; }
.postbox-toggle .icon { transition: transform .15s; }
.postbox .inside { padding: 12px; font-size: .88rem; }
.postbox .inside .form-label { font-size: .82rem; }
.postbox .inside .form-control, .postbox .inside .form-select { font-size: .88rem; }
.postbox-footer { display: flex; align-items: center; gap: .5rem; background: #f6f7f7; border-top: 1px solid #dcdcde; padding: 10px 12px; }
.postbox.closed .inside, .postbox.closed .postbox-footer { display: none; }
.postbox.closed .postbox-header { border-bottom: 0; }
.postbox.closed .postbox-toggle .icon { transform: rotate(180deg); }

.wp-misc li { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; color: #50575e; }
.wp-misc li .icon { color: #8c8f94; }
.wp-trash { border: 0; background: none; padding: 0; color: #b32d2e; text-decoration: underline; font-size: .82rem; }
.wp-trash:hover { color: #8a1f1f; }

.wp-checklist { max-height: 210px; overflow-y: auto; border: 1px solid #dcdcde; padding: .5rem .75rem; background: #fff; }
.wp-checklist .form-check { margin-bottom: .2rem; }

.wp-featured-pick { display: block; cursor: pointer; color: var(--ad-primary); text-decoration: underline; font-size: .88rem; }
.wp-featured-pick img { width: 100%; height: auto; border: 1px solid #dcdcde; text-decoration: none; }
.wp-featured-pick:hover img { opacity: .9; }

/* ---------- Scrollbar halus ---------- */
/* Firefox (browser tanpa ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #c3cad3 transparent; }
  .ad-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
  .ad-sidebar:hover { scrollbar-color: rgba(255,255,255,.28) transparent; }
}
.ad-sidebar { scroll-behavior: smooth; overscroll-behavior: contain; }

/* Chrome, Edge, Safari */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3cad3; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #a7b0bb; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

.ad-sidebar::-webkit-scrollbar { width: 8px; }
.ad-sidebar::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.12); border: 2px solid transparent; background-clip: padding-box; }
.ad-sidebar:hover::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.26); }
.ad-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.4); }

/* ---------- Sidebar: grup menu lipat ---------- */
.ad-group-toggle { display: flex; align-items: center; gap: .7rem; width: 100%; border: 0; background: none; color: var(--ad-sidebar-text); padding: .6rem 1.3rem; font-size: .9rem; text-align: left; border-left: 3px solid transparent; margin-top: .15rem; }
.ad-group-toggle:hover { color: #fff; background: rgba(255,255,255,.04); }
.ad-group-toggle:focus-visible { outline: 2px solid #7fb0d6; outline-offset: -2px; }
.ad-group-toggle[aria-expanded="true"] { color: #fff; }
.ad-group-toggle .ad-caret { margin-left: auto; width: .9em; height: .9em; transition: transform .2s; opacity: .7; }
.ad-group-toggle[aria-expanded="true"] .ad-caret { transform: rotate(180deg); }
.ad-group-toggle .ad-group-badge { margin-left: auto; }
.ad-group-toggle .ad-group-badge + .ad-caret { margin-left: .4rem; }
.ad-group-toggle[aria-expanded="true"] .ad-group-badge { display: none; }
.ad-group-toggle[aria-expanded="true"] .ad-group-badge + .ad-caret { margin-left: auto; }
.ad-subnav { padding: .1rem 0 .4rem; }
.ad-subnav a { padding-left: 2.6rem !important; font-size: .87rem; }
.ad-subnav a .icon { width: 1em; height: 1em; opacity: .85; }

/* ---------- Statistik pengunjung (dashboard) ---------- */
.stat-tile-label { font-size: .82rem; color: #52514e; }
.stat-tile-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin: .15rem 0; color: #0b0b0b; }
.stat-tile-delta { font-size: .78rem; color: #52514e; }
.stat-tile-delta.up { color: #006300; }
.stat-tile-delta.down { color: #b42318; }

.viz-root {
  --surface-1: #ffffff;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --series-1: #2a78d6;   /* Pengunjung */
  --series-2: #eb6834;   /* Tayangan halaman */
  position: relative;
}
.viz-legend { display: flex; gap: 1.2rem; font-size: .8rem; color: var(--text-secondary); margin-bottom: .4rem; }
.viz-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.viz-key { display: inline-block; width: 16px; height: 2px; border-radius: 2px; background: var(--key); }
.viz-plot { width: 100%; height: 280px; outline: none; }
.viz-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.viz-plot:focus-visible { box-shadow: 0 0 0 2px var(--ad-primary); border-radius: 4px; }
.viz-plot .tick text { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.viz-plot .end-label { font-size: 12px; fill: var(--text-secondary); }
.viz-plot .end-label tspan.v { font-weight: 600; fill: var(--text-primary); }
.viz-tooltip { position: absolute; pointer-events: none; background: #fff; border: 1px solid rgba(11,11,11,.10); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.08); padding: .45rem .65rem; font-size: .8rem; min-width: 150px; z-index: 5; }
.viz-tooltip .tt-date { color: var(--text-secondary); margin-bottom: .2rem; }
.viz-tooltip .tt-row { display: flex; align-items: center; gap: .45rem; }
.viz-tooltip .tt-row b { color: var(--text-primary); font-variant-numeric: tabular-nums; min-width: 2.5ch; }
.viz-tooltip .tt-row span { color: var(--text-secondary); }
.viz-table td, .viz-table th { font-variant-numeric: tabular-nums; }

.top-page { margin-bottom: .85rem; }
.top-page:last-child { margin-bottom: 0; }
.top-page-value { font-variant-numeric: tabular-nums; color: #0b0b0b; }
.top-page-track { height: 8px; margin-top: .3rem; }
.top-page-track span { display: block; height: 100%; background: #2a78d6; border-radius: 0 4px 4px 0; }

/* Moderasi komentar */
.comment-item.is-pending { background: #fffbeb; }
.comment-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 700; background: #e7edf6; color: #2c4a73; }
.comment-avatar.is-admin { background: #2a78d6; color: #fff; }
.comment-text { white-space: normal; overflow-wrap: anywhere; }
.min-w-0 { min-width: 0; }