/* =====================================================================
   Layout admin panel: sidebar (grup menu, profil, mode ikon) + topbar + breadcrumb
   ===================================================================== */
:root { --sb-w: 260px; --sb-mini: 76px; --tb-h: 68px; }
.ap-shell { display: flex; min-height: 100vh; }

/* ---------- sidebar ---------- */
.ap-sidebar {
    width: var(--sb-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh; z-index: 50;
    display: flex; flex-direction: column; color: rgba(255,255,255,.78);
    background: linear-gradient(180deg, #0d6764 0%, #0a5451 60%, #08443f 100%);
    transition: width .22s ease, transform .22s ease;
}
.ap-brand { height: var(--tb-h); display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.ap-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; min-width: 0; }
.ap-logo:hover { color: #fff; }
.ap-brand:has(.ap-logo-full) { height: 96px; justify-content: center; border-bottom: 0; }
.ap-logo-full { height: 58px; width: auto; display: block; }
.ap-logo-mini { display: none; height: 34px; width: auto; }
.ap-shell.mini .ap-brand { height: var(--tb-h); }
.ap-shell.mini .ap-logo-full { display: none; }
.ap-shell.mini .ap-logo-mini { display: block; }
.ap-logo-mark {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
    font-size: 22px; font-weight: 800; font-style: italic; color: var(--teal-800);
    background: linear-gradient(135deg, #fff, #d9f0ed); box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.ap-logo-text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.ap-logo-text b { font-size: 20px; font-weight: 800; font-style: italic; letter-spacing: -.5px; }
.ap-logo-text small { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; }

.ap-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 14px 16px; }
.ap-nav::-webkit-scrollbar { width: 5px; }
.ap-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.ap-label { font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255,255,255,.42); padding: 18px 12px 8px; white-space: nowrap; }
.ap-link {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 2px;
    border-radius: 10px; color: rgba(255,255,255,.78); text-decoration: none; font-size: 14px; font-weight: 500;
    white-space: nowrap; cursor: pointer; list-style: none; transition: background .15s, color .15s;
}
.ap-link::-webkit-details-marker { display: none; }
.ap-link > i:first-child { font-size: 20px; width: 22px; text-align: center; flex-shrink: 0; }
.ap-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.ap-link.active, .ap-link.parent-active { color: #fff; font-weight: 600; }
.ap-link.active { background: rgba(255,255,255,.14); }
.ap-link.active::before {
    content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #f3d49b, #c99a4b);
}
.ap-caret { margin-left: auto; font-size: 13px; opacity: .7; transition: transform .2s; }
.ap-group[open] > summary .ap-caret { transform: rotate(180deg); }
.ap-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 23px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.14); }
.ap-sub a { position: relative; padding: 8px 12px; border-radius: 8px; color: rgba(255,255,255,.68); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.ap-sub a::before { content: ''; position: absolute; left: -17.5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: rgba(255,255,255,.3); }
.ap-sub a:hover { color: #fff; background: rgba(255,255,255,.07); }
.ap-sub a.active { color: #fff; font-weight: 600; background: rgba(255,255,255,.12); }
.ap-sub a.active::before { background: #f3d49b; box-shadow: 0 0 0 3px rgba(243,212,155,.25); }

.ap-user { display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.ap-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 13.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #c99a4b, #7d4f0c); }
.ap-avatar.sm { width: 34px; height: 34px; font-size: 12.5px; }
.ap-user-info { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.ap-user-info strong { color: #fff; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-user-info small { color: rgba(255,255,255,.55); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-user form { margin: 0; }
.ap-logout { border: 0; background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; }
.ap-logout:hover { background: rgba(224,67,79,.85); color: #fff; }

/* mode ikon (desktop) */
.ap-shell.mini .ap-sidebar { width: var(--sb-mini); }
.ap-shell.mini .ap-brand { padding: 0; justify-content: center; }
.ap-shell.mini .ap-logo-text, .ap-shell.mini .ap-link span, .ap-shell.mini .ap-caret, .ap-shell.mini .ap-sub,
.ap-shell.mini .ap-user-info, .ap-shell.mini .ap-user form { display: none; }
.ap-shell.mini .ap-label { padding: 14px 0 6px; }
.ap-shell.mini .ap-label span { display: none; }
.ap-shell.mini .ap-label::after { content: ''; display: block; width: 18px; height: 1px; margin: 0 auto; background: rgba(255,255,255,.25); }
.ap-shell.mini .ap-link { justify-content: center; padding: 11px 0; }
.ap-shell.mini .ap-link.parent-active { background: rgba(255,255,255,.14); }
.ap-shell.mini .ap-user { justify-content: center; margin: 0 10px 12px; padding: 8px 0; }
.ap-shell.mini .ap-link[data-tip]:hover::after {
    content: attr(data-tip); position: fixed; left: calc(var(--sb-mini) + 8px);
    background: #10232a; color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 7px; white-space: nowrap; z-index: 100;
}

/* ---------- area utama & topbar ---------- */
.ap-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ap-topbar {
    height: var(--tb-h); position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 0 28px;
    background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line);
}
.ap-icon-btn {
    width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; font-size: 20px; color: var(--ink-2);
    background: #fff; border: 1px solid var(--line); border-radius: 10px; transition: all .15s;
}
.ap-icon-btn:hover { color: var(--teal-700); border-color: var(--teal-200); background: var(--teal-50); }
.ap-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ap-title h1 { font-size: 19px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -.02em; white-space: nowrap; }
.ap-divider { width: 1px; height: 22px; background: var(--line-2); flex-shrink: 0; }
.ap-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; min-width: 0; }
.ap-crumbs a { color: var(--muted) !important; text-decoration: none; }
.ap-crumbs a:hover { color: var(--teal-700) !important; }
.ap-crumbs > a:first-child { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #f1f5f5; font-size: 14px; flex-shrink: 0; }
.ap-crumbs > a:first-child:hover { background: var(--teal-50); }
.ap-crumbs .sep { font-size: 11px; color: var(--faint); }
.ap-crumbs .current { color: var(--teal-700); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ap-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ap-profile { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--muted); transition: all .15s; }
.ap-profile:hover { border-color: var(--teal-200); background: var(--teal-50); }
.ap-profile-text { flex-direction: column; align-items: flex-start; line-height: 1.2; }
.ap-profile-text strong { font-size: 13px; color: var(--ink); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-profile-text small { font-size: 11px; color: var(--muted); }
.ap-backdrop { display: none; }
.preview-pane, .sticky-side { top: calc(var(--tb-h) + 16px); }

/* =====================================================================
   Skala ringkas (~95%): ukuran font, jarak, dan tinggi elemen sedikit dikecilkan
   ===================================================================== */
:root { --sb-w: 244px; --sb-mini: 72px; --tb-h: 62px; }
body { font-size: 13.5px; }

.ap-brand:has(.ap-logo-full) { height: 86px; }
.ap-logo-full { height: 52px; }
.ap-nav { padding: 6px 12px 14px; }
.ap-label { padding: 16px 12px 6px; font-size: 10px; }
.ap-link { padding: 9px 12px; font-size: 13.5px; gap: 11px; }
.ap-link > i:first-child { font-size: 19px; }
.ap-link.active::before { left: -12px; }
.ap-sub a { padding: 7px 12px; font-size: 13px; }
.ap-user { margin: 0 12px 12px; padding: 8px; }
.ap-avatar { width: 34px; height: 34px; font-size: 12.5px; }
.ap-avatar.sm { width: 30px; height: 30px; font-size: 11.5px; }
.ap-topbar { padding: 0 24px; }
.ap-icon-btn { width: 36px; height: 36px; font-size: 18px; }
.ap-title h1 { font-size: 17.5px; }
.ap-crumbs { font-size: 12.5px; }
.ap-crumbs > a:first-child { width: 24px; height: 24px; font-size: 13px; }

.hits-content { padding: 22px 26px 56px; }
.hits-card { margin-bottom: 18px; }
.hits-card-head { padding: 13px 18px; }
.hits-card-head h2 { font-size: 14.5px; }
.hits-card-head > i:first-child { width: 30px; height: 30px; font-size: 16px; }
.hits-card-body { padding: 17px 18px; }
.form-hits .hits-card-body { padding: 20px 22px 6px; }

.stat-card { padding: 15px 17px; gap: 12px; }
.stat-card .ic { width: 40px; height: 40px; font-size: 20px; }
.stat-card .lbl { font-size: 12px; }
.stat-card .val { font-size: 26px; }

.btn { font-size: 13.5px; }
.btn i { font-size: 16px; }
.btn-hits, .btn-hits-outline { padding: 8px 15px; }
.btn-sm { font-size: 12.5px; }
.btn-icon { width: 32px; height: 32px; font-size: 17px; }

.form-label, .fh-label { font-size: 13px; }
.form-control, .form-select, .link-box { min-height: 38px; font-size: 13.5px; }
.form-control, .form-select { padding: 7px 13px; }
.fh-row { grid-template-columns: 150px minmax(0, 1fr); margin-bottom: 16px; }
.fh-label { padding-top: 8px; }
.ts-wrapper .ts-control, .ts-wrapper.single .ts-control, .ts-wrapper.form-select.single .ts-control, .ts-wrapper.single.input-active .ts-control { min-height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; }
.ts-dropdown { font-size: 13.5px; }
.ts-dropdown .option { padding: 8px 11px; }
.hs-select-btn { min-height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; }

.hits-table thead th { font-size: 13.5px; padding: 13px 12px 10px; }
.hits-table thead tr.filters th { padding: 0 6px 12px; }
.hits-table thead .form-control, .hits-table thead .form-select,
.hits-table thead .ts-wrapper.single .ts-control, .hits-table thead .ts-wrapper.single.input-active .ts-control { height: 34px; min-height: 34px; font-size: 12.5px; }
.hits-table tbody td { padding: 11px 12px; }

.day-bars { height: 150px; }
.sum-card, .role-card { padding: 16px 18px; }
.sum-title { font-size: 14px; }
.score-box { width: 108px; padding: 12px 8px 10px; }
.score-box .big { font-size: 27px; }
.nav-hits .nav-link { padding: 7px 18px; font-size: 13px; }
.q-head { padding: 9px 12px; }
.phone { max-width: 340px; }

/* filter per kolom di tabel Data Respon */
.resp-table thead tr.filters input[type=search], .resp-table thead tr.filters input[type=date] { min-width: 150px; }
.resp-table thead tr.filters .form-select { min-width: 150px; }
.resp-table thead tr.filters input[type=date] { height: 34px; min-height: 34px; border: 0; font-size: 12.5px; }

/* ---------- login ---------- */
.login-wrap { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.login-logo { height: 92px; width: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.18)); }

/* ---------- HP / tablet ---------- */
@media (max-width: 991px) {
    .ap-sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.3); }
    .ap-shell.open .ap-sidebar { transform: none; }
    .ap-shell.open .ap-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(8,30,32,.45); backdrop-filter: blur(2px); }
    .ap-topbar { padding: 0 16px; gap: 10px; }
    .ap-title h1 { font-size: 17px; }
}
@media (max-width: 767px) {
    .ap-divider, .ap-crumbs { display: none; }
}