.sip-chat-bell {
    position: relative;
}

.sip-chat-bell b {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
}

.sip-toast-wrap {
    position: fixed;
    right: 18px;
    bottom: 78px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sip-toast {
    min-width: 260px;
    max-width: 380px;
    background: #111827;
    color: #fff;
    border-left: 5px solid #14b8a6;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25);
    animation: sipSlideIn 0.25s ease;
}

.sip-toast strong {
    display: block;
    margin-bottom: 4px;
}

@keyframes sipSlideIn {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.sip-map,
.sip-map-editor,
.sip-map-view {
    width: 100%;
    height: 380px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #e2e8f0;
    z-index: 1;
}

.sip-map-editor-card {
    margin-top: 16px;
}

.sip-map-empty p {
    color: #64748b;
}

.sip-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.88);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sip-lightbox-overlay.active {
    display: flex;
}

.sip-lightbox-content {
    position: relative;
    max-width: min(1100px, 94vw);
    max-height: 88vh;
    background: #0f172a;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.sip-lightbox-media {
    display: grid;
    place-items: center;
    min-height: 260px;
    background: #020617;
}

.sip-lightbox-media img {
    max-width: 100%;
    max-height: 78vh;
    display: block;
}

.sip-lightbox-media video {
    max-width: 100%;
    max-height: 78vh;
    display: block;
    background: #000;
}

.sip-lightbox-caption {
    padding: 14px 16px;
    color: #e5e7eb;
    font-weight: 700;
}

.sip-lightbox-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.sip-video-thumb {
    position: relative;
    display: block;
}

.sip-video-thumb video {
    width: 100%;
    border-radius: 10px;
    display: block;
    background: #000;
}

.sip-video-thumb .sip-lightbox {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    font-size: 42px;
    text-decoration: none;
}

table.sip-datatable {
    width: 100% !important;
}

.dataTables_wrapper {
    margin-top: 10px;
}

@media (max-width: 768px) {
    .sip-map,
    .sip-map-editor,
    .sip-map-view {
        height: 300px;
    }

    .sip-toast-wrap {
        left: 12px;
        right: 12px;
        bottom: 86px;
    }

    .sip-toast {
        max-width: none;
    }
}

/* ============================================================
   AVATAR CROP + PREVIEW (Profil & Chat Setting)
   ============================================================ */
.chat-profile-avatar-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.chat-profile-avatar-col {
    text-align: center;
}

.chat-profile-avatar-col small {
    display: block;
    margin-top: 6px;
    color: var(--admin-muted, #64748b);
    font-size: 12px;
}

.chat-profile-avatar-preview img {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border: 3px solid var(--admin-primary, #0f766e);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
}

.chat-profile-avatar-preview .btn {
    margin-top: 8px;
}

.sip-avatar-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 4px;
}

.sip-avatar-filename {
    color: var(--admin-muted, #64748b);
    font-size: 13px;
}

/* Modal crop */
.sip-crop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.74);
    backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.sip-crop-overlay[hidden] {
    display: none;
}

.sip-crop-dialog {
    width: min(440px, 100%);
    background: var(--admin-surface, #ffffff);
    color: var(--admin-text, #0f172a);
    border: 1px solid var(--admin-border, #e2e8f0);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
    overflow: hidden;
    animation: sipCropIn 0.18s ease-out;
}

@keyframes sipCropIn {
    from { transform: translateY(10px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.sip-crop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--admin-border, #e2e8f0);
}

.sip-crop-x {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.sip-crop-stage {
    background: #0b1220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.sip-crop-box {
    position: relative;
    width: 280px;            /* = konstanta CROP di avatar-crop.js */
    height: 280px;           /* = konstanta CROP di avatar-crop.js */
    overflow: hidden;
    border: 2px dashed rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    touch-action: none;
    cursor: grab;
    background: #020617;
}

.sip-crop-box:active {
    cursor: grabbing;
}

.sip-crop-box img {
    position: absolute;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}

.sip-crop-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
    background-size: 33.333% 33.333%;
    opacity: 0.55;
}

.sip-crop-controls {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sip-crop-controls label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin: 0;
}

.sip-crop-controls input[type="range"] {
    flex: 1;
}

.sip-crop-hint {
    font-size: 12px;
    color: var(--admin-muted, #64748b);
}

.sip-crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--admin-border, #e2e8f0);
}

@media (max-width: 480px) {
    .sip-crop-box {
        width: 240px;
        height: 240px;
    }
}

/* ============================================================
   OVERRIDE CHAT: KONTRAS ADAPTIF (DARK/LIGHT) + MEDIA + UNDUH
   Dimuat terakhir => menang cascade atas app.css & dashboard.css
   ============================================================ */

.chat-layout,
.chat-sidebar,
.chat-main {
    color: var(--admin-text);
}

.chat-sidebar,
.chat-main {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
}

.chat-sidebar h2, .chat-sidebar h3,
.chat-main h2, .chat-main h3 {
    color: var(--admin-text);
}

.chat-sidebar p,
.chat-main p {
    color: var(--admin-text);
}

/* Daftar percakapan */
.chat-item {
    background: transparent;
    color: var(--admin-text);
    border: 1px solid var(--admin-border);
}
.chat-item:hover {
    background: var(--admin-surface-2);
}
.chat-item-body strong { color: var(--admin-text); }
.chat-item-body small  { color: var(--admin-muted); }

/* Kartu identitas akun (di bawah tombol Kembali) */
.chat-peer strong { color: var(--admin-text); }
.chat-peer small  { color: var(--admin-muted); }
.chat-peer .btn   { margin-top: 10px; }

/* wadah percakapan */
.chat-messages {
    background: var(--admin-surface-2);
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
}

/* Bubble pesan */
.chat-bubble {
    background: var(--admin-surface);
    color: var(--admin-text);
    border: 1px solid var(--admin-border);
}
.chat-bubble.theirs {
    background: var(--admin-surface);
    color: var(--admin-text);
}
.chat-bubble.mine {
    background: var(--admin-primary);
    color: #ffffff;
    border-color: var(--admin-primary);
}
.chat-bubble-meta { color: var(--admin-muted); }
.chat-bubble.mine .chat-bubble-meta { color: rgba(255, 255, 255, 0.85); }
.chat-bubble-body { color: inherit; }

/* Placeholder & form */
.chat-placeholder { color: var(--admin-muted); }
.chat-placeholder h3 { color: var(--admin-text); }
.chat-form label { color: var(--admin-text); }

/* ---------- Lampiran (foto / video / dokumen) ---------- */
.sip-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.sip-attach-item {
    background: var(--admin-surface-2);
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-bubble.mine .sip-attach-item {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
}

.sip-attach-photo img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    cursor: zoom-in;
    background: #000;
}

.sip-attach-video {
    width: 100%;
    max-height: 240px;
    border-radius: 10px;
    background: #000;
    display: block;
}

.sip-attach-doc {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--admin-text);
}
.chat-bubble.mine .sip-attach-doc { color: #ffffff; }
.sip-attach-doc-icon { font-size: 22px; line-height: 1; }
.sip-attach-doc-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.sip-attach-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--admin-primary);
    color: #ffffff !important;
    border: 1px solid var(--admin-primary);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    align-self: flex-start;
}
.sip-attach-dl:hover { filter: brightness(0.95); text-decoration: none; }

/* Tombol unduh di dalam bubble "mine" (latar teal) -> putih agar kontras */
.chat-bubble.mine .sip-attach-dl {
    background: #ffffff;
    color: var(--admin-primary, #0f766e) !important;
    border-color: #ffffff;
}

.attach-delete {
    color: var(--admin-muted);
    font-size: 12px;
    font-weight: 600;
}
.chat-bubble.mine .attach-delete { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 768px) {
    .sip-attachments { grid-template-columns: 1fr; }
    .sip-attach-video { max-height: 200px; }
}

/* ============================================================
   DRAF PRATINJAU LAMPIRAN CHAT (sebelum Kirim Pesan)
   ============================================================ */
.sip-draft-bubble {
    border-style: dashed !important;
    position: relative;
    margin-top: 14px;
}

.sip-draft-tag {
    position: absolute;
    top: -10px;
    left: 12px;
    background: #f59e0b;
    color: #111827;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.sip-draft-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.sip-draft-attachments {
    margin-top: 10px;
}

.sip-draft-att {
    position: relative;
}

.sip-draft-media {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    background: #000;
}

.sip-draft-video {
    object-fit: contain;
}

.sip-draft-meta {
    font-size: 11px;
    color: var(--admin-muted);
    margin-top: 5px;
    word-break: break-all;
}

.chat-bubble.mine .sip-draft-meta {
    color: rgba(255, 255, 255, 0.82);
}

.sip-draft-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.sip-draft-remove:hover {
    background: #b91c1c;
}

@media (max-width: 768px) {
    .sip-draft-media { max-height: 180px; }
}

/* ============================================================
   CHAT LOG / BACKUP / CLEAR
   ============================================================ */
.chat-peer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--admin-border, #e2e8f0);
}
.chat-peer-actions form { display: contents; }
.chat-peer-actions .btn { width: 100%; }

.sip-clear-note {
    margin-top: 10px;
    color: var(--admin-muted, #64748b);
    line-height: 1.5;
}
.sip-clear-note code {
    background: var(--admin-surface-2, #f1f5f9);
    padding: 1px 5px;
    border-radius: 6px;
}

.sip-log-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.sip-log-actions form { display: inline; }

.sip-log-view {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--admin-surface-2, #0b1220);
    color: var(--admin-text, #e5e7eb);
    border: 1px solid var(--admin-border, #334155);
    border-radius: 12px;
    max-height: 70vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.55;
}

/* ============================================================
   PAGINATION SERVER-SIDE + SORT HEADER (kontras dark/light)
   ============================================================ */
.sip-table-server {
    width: 100%;
    border-collapse: collapse;
    background: var(--admin-surface, #ffffff);
}
.sip-table-server th,
.sip-table-server td {
    border-bottom: 1px solid var(--admin-border, #e2e8f0);
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    color: var(--admin-text, #0f172a);
}
.sip-table-server thead th {
    background: var(--admin-surface-2, #f8fafc);
    font-size: 13px;
    white-space: nowrap;
}
.sip-table-server tbody tr:hover {
    background: var(--admin-surface-2, #f8fafc);
}

.sip-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--admin-text, #0f172a);
    font-weight: 700;
    text-decoration: none;
}
.sip-sort:hover { color: var(--admin-primary, #0f766e); text-decoration: none; }
.sip-sort-arrow { font-size: 11px; opacity: 0.8; }

.sip-pager {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--admin-border, #e2e8f0);
    border-radius: 14px;
    background: var(--admin-surface-2, #f8fafc);
}
.sip-pager-info {
    color: var(--admin-muted, #64748b);
    font-size: 13px;
    font-weight: 600;
}
.sip-pager-pages {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.sip-pg {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--admin-border, #e2e8f0);
    background: var(--admin-surface, #ffffff);
    color: var(--admin-text, #0f172a);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}
.sip-pg:hover { border-color: var(--admin-primary, #0f766e); color: var(--admin-primary, #0f766e); text-decoration: none; }
.sip-pg.active {
    background: var(--admin-primary, #0f766e);
    border-color: var(--admin-primary, #0f766e);
    color: #ffffff;
}
.sip-pg.disabled { opacity: 0.45; pointer-events: none; }
.sip-pg.gap { border: 0; background: transparent; pointer-events: none; }

.sip-pager-perpage {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--admin-muted, #64748b);
}
.sip-pager-perpage select {
    min-height: 34px;
    border-radius: 10px;
    border: 1px solid var(--admin-border, #e2e8f0);
    background: var(--admin-surface, #ffffff);
    color: var(--admin-text, #0f172a);
    padding: 0 8px;
}

@media (max-width: 768px) {
    .sip-pager { flex-direction: column; align-items: stretch; }
    .sip-pager-perpage { margin-left: 0; }
    .sip-table-wrap { overflow-x: auto; }
}

/* ============================================================
   PORTAL: filter bidang + galeri cover (kontras dark/light)
   ============================================================ */
.portal-hero { background: linear-gradient(135deg, var(--admin-primary, #0f766e), #134e4a); color: #fff; border: 0; }
.portal-hero h1 { color: #fff; }
.portal-hero p { color: rgba(255,255,255,0.9); }
.portal-hero-badge { display:inline-block; background: rgba(255,255,255,0.18); color:#fff; border:1px solid rgba(255,255,255,0.3); padding:4px 12px; border-radius:999px; font-size:12px; font-weight:700; margin-bottom:10px; }
.portal-hero .btn { background:#fff; color: var(--admin-primary, #0f766e); border-color:#fff; }
.portal-hero .btn-outline { background:transparent; color:#fff; border-color: rgba(255,255,255,0.6); }

.sip-portal-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; color: var(--admin-muted, #64748b); font-size:13px; font-weight:600; }
.sip-portal-filters .btn.active { background: var(--admin-primary, #0f766e); color:#fff !important; border-color: var(--admin-primary, #0f766e); }

.sip-portal-gal { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sip-portal-gal-card { padding:0; overflow:hidden; }
.sip-portal-gal-cover { width:100%; height:160px; object-fit:cover; display:block; background:#020617; }
.sip-portal-gal-empty { display:grid; place-items:center; font-size:42px; color:#94a3b8; }
.sip-portal-gal-card h3, .sip-portal-gal-card p, .sip-portal-gal-card small { padding-left:14px; padding-right:14px; }
.sip-portal-gal-card h3 { padding-top:12px; }
.sip-portal-gal-card small { display:block; padding-bottom:14px; color: var(--admin-muted, #64748b); }

.portal-cta { background: var(--admin-surface-2, #f8fafc); }

/* ============================================================
   SURAT MENYURAT - TAMPILAN MS OUTLOOK 2019 (3-PANE + RIBBON)
   ============================================================ */
.sip-out-app { display:flex; flex-direction:column; gap:10px; }
.sip-out-title h2 { margin:0; }
.sip-out-title small { color:var(--admin-muted,#64748b); }

.sip-out-ribbon {
    display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start;
    padding:10px 12px; border:1px solid var(--admin-border,#e2e8f0);
    border-radius:14px; background:var(--admin-surface,#fff);
    box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.sip-out-rbg { display:flex; flex-direction:column; gap:6px; }
.sip-out-rbg-t { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--admin-muted,#64748b); }
.sip-out-rbg form { display:inline; }
.sip-out-rbg .btn[disabled], .sip-out-rbg a.btn[disabled] { opacity:.45; pointer-events:none; }

.sip-out-body { display:grid; grid-template-columns:210px minmax(280px,360px) 1fr; gap:12px; align-items:start; }

.sip-out-folders { border:1px solid var(--admin-border,#e2e8f0); border-radius:14px; background:var(--admin-surface,#fff); overflow:hidden; }
.sip-out-fold-head { padding:10px 12px; font-weight:800; border-bottom:1px solid var(--admin-border,#e2e8f0); background:var(--admin-surface-2,#f8fafc); }
.sip-out-folder { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; color:var(--admin-text,#0f172a); text-decoration:none; border-bottom:1px solid var(--admin-border,#e2e8f0); }
.sip-out-folder:hover { background:var(--admin-surface-2,#f8fafc); text-decoration:none; }
.sip-out-folder.active { background:var(--admin-primary,#0f766e); color:#fff; }
.sip-out-unread { background:#dc2626; color:#fff; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:800; }
.sip-out-count { color:var(--admin-muted,#64748b); font-size:12px; font-weight:700; }
.sip-out-folder.active .sip-out-count { color:rgba(255,255,255,.85); }

.sip-out-list { border:1px solid var(--admin-border,#e2e8f0); border-radius:14px; background:var(--admin-surface,#fff); display:flex; flex-direction:column; min-height:60vh; }
.sip-out-search { display:flex; gap:6px; padding:10px; border-bottom:1px solid var(--admin-border,#e2e8f0); }
.sip-out-search input[type=search] { flex:1; min-height:36px; border-radius:10px; border:1px solid var(--admin-border,#e2e8f0); padding:0 10px; background:var(--admin-surface-2,#f8fafc); color:var(--admin-text,#0f172a); }
.sip-out-rows { overflow:auto; flex:1; }
.sip-out-row { display:block; padding:10px 12px; border-bottom:1px solid var(--admin-border,#e2e8f0); color:var(--admin-text,#0f172a); text-decoration:none; }
.sip-out-row:hover { background:var(--admin-surface-2,#f8fafc); text-decoration:none; }
.sip-out-row.active { background:rgba(15,118,110,.12); box-shadow:inset 3px 0 0 var(--admin-primary,#0f766e); }
.sip-out-row.unread .sip-out-row-subj strong { font-weight:800; }
.sip-out-row.unread .sip-out-who { font-weight:800; }
.sip-out-row-top { display:flex; justify-content:space-between; gap:8px; }
.sip-out-who { font-size:12px; color:var(--admin-muted,#64748b); }
.sip-out-date { font-size:11px; color:var(--admin-muted,#64748b); white-space:nowrap; }
.sip-out-row-subj { margin:2px 0; }
.sip-out-row-subj strong { font-size:13px; }
.sip-out-clip { font-size:12px; }
.sip-out-row-meta { font-size:11px; color:var(--admin-muted,#64748b); display:flex; gap:6px; align-items:center; }
.sip-out-empty { padding:24px 14px; text-align:center; color:var(--admin-muted,#64748b); }

.sip-out-read, .sip-out-compose, .sip-out-log { border:1px solid var(--admin-border,#e2e8f0); border-radius:14px; background:var(--admin-surface,#fff); padding:14px 16px; min-height:60vh; }
.sip-out-read-empty { display:grid; place-items:center; }
.sip-out-placeholder { text-align:center; color:var(--admin-muted,#64748b); }
.sip-out-read-head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; border-bottom:1px solid var(--admin-border,#e2e8f0); padding-bottom:8px; margin-bottom:8px; }
.sip-out-read-head h3 { margin:0; }
.sip-out-read-no { font-size:12px; color:var(--admin-muted,#64748b); }
.sip-out-head-tbl { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:10px; }
.sip-out-head-tbl th { text-align:left; width:120px; color:var(--admin-muted,#64748b); font-weight:700; padding:3px 8px 3px 0; vertical-align:top; }
.sip-out-head-tbl td { padding:3px 0; color:var(--admin-text,#0f172a); }
.sip-out-body-text, .sip-out-body { white-space:pre-wrap; word-break:break-word; color:var(--admin-text,#0f172a); }
.sip-out-lamp-desc, .sip-out-ket { margin-top:10px; padding:10px; border-radius:10px; background:var(--admin-surface-2,#f8fafc); font-size:13px; }
.sip-out-att { margin-top:12px; }
.sip-out-att h4, .sip-out-thread h4, .sip-out-log h4 { margin:12px 0 6px; }
.sip-out-thread { margin-top:14px; border-top:1px dashed var(--admin-border,#e2e8f0); padding-top:10px; }
.sip-out-th-bubble { border:1px solid var(--admin-border,#e2e8f0); border-radius:12px; padding:8px 10px; margin-bottom:8px; background:var(--admin-surface-2,#f8fafc); }
.sip-out-th-bubble.mine { background:rgba(15,118,110,.10); }
.sip-out-th-meta { font-size:11px; color:var(--admin-muted,#64748b); display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.sip-out-th-subj { font-weight:700; margin:2px 0; }
.sip-out-th-body { white-space:pre-wrap; font-size:13px; }

.sip-out-comp-head { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--admin-border,#e2e8f0); padding-bottom:8px; margin-bottom:10px; }
.sip-out-comp-head h3 { margin:0; }
.sip-out-comp-row { margin-bottom:10px; }
.sip-out-comp-row > label { display:block; font-weight:700; font-size:12px; margin-bottom:4px; color:var(--admin-muted,#64748b); }
.sip-out-comp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sip-out-comp-row select[multiple] { height:auto; }
.sip-out-comp-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

.sip-out-log-head { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--admin-border,#e2e8f0); padding-bottom:8px; margin-bottom:8px; }
.sip-out-log-head h3 { margin:0; }
.sip-out-log-sum { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--admin-muted,#64748b); margin-bottom:8px; }
.sip-out-log-sum strong { color:var(--admin-text,#0f172a); }
.sip-out-log-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.sip-out-mainfull { grid-column:2 / -1; }

@media (max-width: 1100px) {
    .sip-out-body { grid-template-columns:1fr; }
    .sip-out-folders { display:flex; flex-wrap:wrap; }
    .sip-out-fold-head { width:100%; }
    .sip-out-folder { flex:1 1 auto; border-bottom:0; border-right:1px solid var(--admin-border,#e2e8f0); }
    .sip-out-mainfull { grid-column:auto; }
    .sip-out-comp-grid { grid-template-columns:1fr; }
}

/* ============================================================
   GALLERY KANTOR (list/upload/view/log + banner kedaluwarsa)
   ============================================================ */
.gk-banner { border-left:5px solid #f59e0b !important; background:#fffbeb !important; }
.gk-banner h3 { margin:0 0 6px; color:#92400e; }
.gk-banner p { margin:0 0 8px; color:#78350f; }
.gk-banner-list { margin:0 0 10px; padding-left:18px; color:#92400e; font-size:13px; }
.gk-banner-list code { background:rgba(146,64,14,.10); padding:1px 5px; border-radius:6px; }
@media (prefers-color-scheme: dark){ /* netral: pakai var tema bila ada */ }
:root .gk-banner, body[data-theme="dark"] .gk-banner { background:rgba(245,158,11,.12) !important; }
:root .gk-banner h3, body[data-theme="dark"] .gk-banner h3 { color:#fbbf24; }
:root .gk-banner p, body[data-theme="dark"] .gk-banner p { color:#fde68a; }
:root .gk-banner-list, body[data-theme="dark"] .gk-banner-list { color:#fcd34d; }

.gk-cell-file { display:flex; align-items:center; gap:10px; }
.gk-thumb { width:64px; height:48px; object-fit:cover; border-radius:8px; border:1px solid var(--admin-border,#e2e8f0); background:#020617; flex:0 0 auto; }
.gk-preview { width:100%; max-height:340px; object-fit:contain; border-radius:12px; border:1px solid var(--admin-border,#e2e8f0); background:#020617; display:block; }
.gk-badge-expired { display:inline-block; background:#dc2626; color:#fff; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:800; margin-left:6px; }

.gk-note { color:var(--admin-muted,#64748b); font-size:13px; }
.gk-drop { display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px; border:2px dashed var(--admin-border,#cbd5e1); border-radius:14px; background:var(--admin-surface-2,#f8fafc); cursor:pointer; text-align:center; }
.gk-drop small { color:var(--admin-muted,#64748b); }
.gk-drop:hover { border-color:var(--admin-primary,#0f766e); }

.gk-up-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin-top:14px; }
.gk-up-item { border:1px solid var(--admin-border,#e2e8f0); border-radius:12px; padding:10px; background:var(--admin-surface,#fff); display:flex; flex-direction:column; gap:8px; }
.gk-up-head { display:flex; align-items:center; gap:10px; }
.gk-up-thumb { width:72px; height:54px; object-fit:cover; border-radius:8px; background:#020617; border:1px solid var(--admin-border,#e2e8f0); flex:0 0 auto; }
.gk-up-info { flex:1; min-width:0; }
.gk-up-info strong { display:block; font-size:13px; word-break:break-all; }
.gk-up-x { flex:0 0 auto; width:28px; height:28px; border-radius:999px; border:1px solid var(--admin-border,#e2e8f0); background:#fee2e2; color:#b91c1c; font-weight:800; cursor:pointer; line-height:1; }
.gk-up-x:hover { background:#dc2626; color:#fff; border-color:#dc2626; }
.gk-up-meta { display:flex; flex-direction:column; gap:8px; }
.gk-up-meta .form-field { margin:0; }
.gk-up-meta .form-field label { font-size:12px; font-weight:700; color:var(--admin-muted,#64748b); display:block; margin-bottom:3px; }
.gk-up-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gk-up-msg { margin:10px 0 0; font-size:13px; color:var(--admin-primary,#0f766e); font-weight:600; }
.gk-up-msg.bad { color:#b91c1c; }

.gk-edit-wrap { display:grid; grid-template-columns:minmax(220px,320px) 1fr; gap:16px; align-items:start; }
.gk-edit-prev { background:#020617; border-radius:12px; padding:8px; }
.gk-view-grid { display:grid; grid-template-columns:minmax(240px,420px) 1fr; gap:16px; align-items:start; margin-bottom:14px; }
.gk-view-prev { background:#020617; border-radius:12px; padding:8px; }
@media (max-width: 860px){ .gk-edit-wrap, .gk-view-grid { grid-template-columns:1fr; } .gk-up-meta-grid { grid-template-columns:1fr; } }

/* ============================================================
   TOOLS PENGUNJUNG (list / detail / laporan / log / config)
   ============================================================ */
.vp-head .vp-kpis, .vp-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:10px 0 4px; }
.vp-kpis-lg { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.vp-kpi { background:var(--admin-surface-2,#f8fafc); border:1px solid var(--admin-border,#e2e8f0); border-radius:12px; padding:10px 12px; }
.vp-kpi span { display:block; font-size:12px; color:var(--admin-muted,#64748b); font-weight:600; }
.vp-kpi strong { display:block; font-size:22px; color:var(--admin-primary,#0f766e); }
.vp-filter { flex-wrap:wrap; gap:8px; align-items:end; }
.vp-filter label { display:flex; flex-direction:column; font-size:12px; font-weight:700; color:var(--admin-muted,#64748b); gap:3px; }
.vp-filter input[type="date"], .vp-filter input[type="search"], .vp-filter select { font:inherit; padding:7px 9px; border:1px solid var(--admin-border,#cbd5e1); border-radius:9px; background:var(--admin-surface,#fff); color:var(--admin-text,#0f172a); }

.vp-dev { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:800; }
.vp-dev-desktop { background:#e0f2fe; color:#075985; }
.vp-dev-mobile  { background:#dcfce7; color:#166534; }
.vp-dev-tablet  { background:#fef9c3; color:#854d0e; }
.vp-dev-bot     { background:#fee2e2; color:#991b1b; }
.vp-dev-unknown { background:#e2e8f0; color:#334155; }
tr.vp-bot td { opacity:.62; }

.vp-tabs { display:flex; flex-wrap:wrap; gap:4px; border-bottom:2px solid var(--admin-border,#e2e8f0); margin:8px 0 14px; }
.vp-tab { padding:8px 12px; border-radius:9px 9px 0 0; text-decoration:none; font-weight:700; font-size:13px; color:var(--admin-muted,#64748b); border:1px solid transparent; border-bottom:none; }
.vp-tab:hover { background:var(--admin-surface-2,#f1f5f9); }
.vp-tab.active { color:var(--admin-primary,#0f766e); background:var(--admin-surface,#fff); border-color:var(--admin-border,#e2e8f0); margin-bottom:-2px; }

.vp-bars { display:flex; flex-direction:column; gap:6px; margin:6px 0 14px; }
.vp-bar-row { display:grid; grid-template-columns:minmax(120px,200px) 1fr 90px; align-items:center; gap:10px; font-size:13px; }
.vp-bar-day { grid-template-columns:110px 1fr 150px; }
.vp-bar-lab { color:var(--admin-text,#0f172a); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vp-bar-track { background:var(--admin-surface-2,#eef2f7); border-radius:999px; height:14px; overflow:hidden; }
.vp-bar-fill { display:block; height:100%; background:linear-gradient(90deg,var(--admin-primary,#0f766e),#14b8a6); border-radius:999px; min-width:2px; transition:width .4s ease; }
.vp-bar-num { text-align:right; font-variant-numeric:tabular-nums; color:var(--admin-muted,#64748b); font-weight:700; }

.vp-heat { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; margin:8px 0; }
.vp-heat-cell { aspect-ratio:1.6/1; display:grid; place-items:center; border-radius:7px; background:var(--admin-primary,#0f766e); color:#fff; font-size:11px; font-weight:800; }

.vp-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:900px){ .vp-detail-grid { grid-template-columns:1fr; } .vp-bar-row { grid-template-columns:90px 1fr 70px; } }

.vp-danger { border-left:5px solid #dc2626 !important; }
.vp-danger h3 { color:#b91c1c; margin:0 0 6px; }
.vp-danger-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.vp-chk { display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--admin-muted,#64748b); }
.btn-warning { background:#f59e0b; color:#1f2937; border-color:#f59e0b; }
.btn-warning:hover { background:#d97706; border-color:#d97706; color:#fff; }

/* ============================================================
   RBAC (Setting Role / User Akses)
   ============================================================ */
.rbac-note { color:var(--admin-muted,#64748b); font-size:13px; margin:2px 0 12px; }
.rbac-addform { background:var(--admin-surface-2,#f8fafc); border:1px solid var(--admin-border,#e2e8f0); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.rbac-inline { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.rbac-inline .form-control-sm { padding:5px 8px; font-size:13px; }
.rbac-chk { display:inline-flex; gap:4px; align-items:center; font-size:12px; font-weight:700; color:var(--admin-muted,#64748b); }
.btn-tiny { padding:2px 7px; font-size:12px; border-radius:7px; border:1px solid var(--admin-border,#cbd5e1); background:var(--admin-surface,#fff); color:var(--admin-text,#0f172a); cursor:pointer; line-height:1.4; }
.btn-tiny:hover { border-color:var(--admin-primary,#0f766e); }
.rbac-matrix td code { background:rgba(15,118,110,.08); padding:1px 6px; border-radius:6px; font-size:12px; }
.rbac-lab { color:var(--admin-text,#0f172a); font-weight:600; }
tr.rbac-grp td { background:var(--admin-surface-2,#eef2f7); font-weight:800; color:var(--admin-primary,#0f766e); letter-spacing:.2px; }
.rbac-pill { display:inline-flex; border:1px solid var(--admin-border,#cbd5e1); border-radius:999px; overflow:hidden; }
.rbac-seg { padding:4px 12px; font-size:12px; font-weight:700; cursor:pointer; color:var(--admin-muted,#64748b); background:var(--admin-surface,#fff); border-right:1px solid var(--admin-border,#e2e8f0); user-select:none; }
.rbac-seg:last-child { border-right:none; }
.rbac-seg input { position:absolute; opacity:0; pointer-events:none; }
.rbac-seg-d.on { background:#e2e8f0; color:#334155; }
.rbac-seg-y.on { background:#16a34a; color:#fff; }
.rbac-seg-n.on { background:#dc2626; color:#fff; }
.rbac-seg:hover { filter:brightness(.97); }
.rbac-yes { color:#15803d; font-weight:800; }
.rbac-no  { color:#b91c1c; font-weight:800; }
@media (max-width:760px){ .rbac-pill { flex-direction:column; border-radius:10px; } .rbac-seg { border-right:none; border-bottom:1px solid var(--admin-border,#e2e8f0); text-align:center; } }

/* RBAC 3-state: legenda + reaktivitas */
.rbac-legend { background:var(--admin-surface-2,#f8fafc); border:1px solid var(--admin-border,#e2e8f0); border-radius:10px; padding:8px 12px; margin:0 0 12px; font-size:13px; color:var(--admin-muted,#64748b); }
.rbac-lg { display:inline-block; padding:1px 9px; border-radius:999px; font-weight:800; font-size:12px; margin-right:2px; }
.rbac-lg-d { background:#e2e8f0; color:#334155; }
.rbac-lg-y { background:#16a34a; color:#fff; }
.rbac-lg-n { background:#dc2626; color:#fff; }
.rbac-sep { opacity:.5; margin:0 6px; }
/* fallback tanpa-JS: segmen terpilih tetap berwarna via :has() (browser modern) */
.rbac-pill:has(input[value=d]:checked) .rbac-seg-d { background:#e2e8f0; color:#334155; }
.rbac-pill:has(input[value=y]:checked) .rbac-seg-y { background:#16a34a; color:#fff; }
.rbac-pill:has(input[value=n]:checked) .rbac-seg-n { background:#dc2626; color:#fff; }

/* Profil: radio kewarganegaraan & kondisional wilayah */
.pf-radio-row { display:flex; gap:18px; flex-wrap:wrap; margin-top:4px; }
.pf-radio { display:inline-flex; align-items:center; gap:7px; font-weight:600; cursor:pointer; }
.pf-radio input { accent-color:var(--admin-primary,#0f766e); width:17px; height:17px; }
.pf-cond[hidden] { display:none !important; }
#pf-wilayah-block .form-grid { gap:10px; }
@media (max-width:760px){ .pf-radio-row { flex-direction:column; gap:8px; } }

/* Profil: toggle wilayah berbasis class (tahan-browser-lama & anti-kalah-spesifisitas) */
.pf-wilayah-box { transition: opacity .15s ease, max-height .2s ease; overflow: hidden; }
.pf-wilayah-box.pf-hidden { display: none !important; }
.pf-wilayah-box.pf-visible { display: block !important; }
@media (max-width:760px){ .pf-wilayah-box .form-grid { grid-template-columns:1fr; } }

.vp-src-profil { background:#dbeafe; color:#1e40af; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; }

/* Tools Pengunjung: Tab Aktivitas & Widget Ringkasan */
.vp-tabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:16px; border-bottom:2px solid var(--admin-border,#e2e8f0); padding-bottom:8px; }
.vp-tabs .btn.active { background:var(--admin-primary,#0f766e); color:#fff; border-color:var(--admin-primary,#0f766e); box-shadow:0 2px 8px rgba(15,118,110,.25); }
.badge-role { font-size:11px; padding:2px 8px; border-radius:999px; background:#dbeafe; color:#1e40af; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.badge-action { font-size:11px; padding:2px 8px; border-radius:999px; background:#fef3c7; color:#92400e; font-weight:700; }
.vp-activity-page table td code { background:rgba(15,118,110,.08); padding:1px 6px; border-radius:6px; font-size:12px; color:var(--admin-text,#0f172a); }
.vp-activity-page .vp-filter { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.vp-activity-page .vp-filter label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--admin-muted,#64748b); }
.vp-activity-page .vp-filter input[type=date], .vp-activity-page .vp-filter select, .vp-activity-page .vp-filter input[type=search] { min-width:120px; padding:6px 10px; border:1px solid var(--admin-border,#cbd5e1); border-radius:8px; font-size:13px; }
@media (max-width:760px){ .vp-tabs { overflow-x:auto; white-space:nowrap; } .vp-activity-page .vp-filter { flex-direction:column; align-items:stretch; } }