/* ============================================================
   SIDIK — Custom CSS
   Sistem Informasi Kedisiplinan & Perizinan Santri
   ============================================================ */

:root {
    --sidik-teal:   #1D9E75;
    --sidik-putra:  #185FA5;
    --sidik-putri:  #993556;
    --sidik-dark:   #1a1a2e;
    --sidik-light:  #f8f9fa;
}

/* ============================================================
   GLOBAL
   ============================================================ */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #f0f2f5;
    color: #333;
}

a {
    text-decoration: none;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidik-sidebar {
    width: 250px;
    height: 100vh;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Brand tetap di atas */
.sidik-sidebar .sidebar-brand {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex: 0 0 auto;
}

/* Wrapper scroll — bukan ul-nya langsung */
.sidebar-nav-scroll {
    /* Flexbox constraint */
    flex: 1;
    min-height: 0;
    /* Paksa tinggi maksimal = sisa ruang setelah sidebar-brand (~73px) */
    max-height: calc(100vh - 73px);
    overflow-y: scroll;                /* scroll (bukan auto) agar selalu aktif */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(29,158,117,0.4) transparent;
}

.sidebar-nav-scroll::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav-scroll::-webkit-scrollbar-thumb {
    background: rgba(29,158,117,0.45);
    border-radius: 2px;
}
.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(29,158,117,0.75);
}

.sidik-sidebar .sidebar-brand h5 {
    color: var(--sidik-teal);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}

.sidik-sidebar .sidebar-brand small {
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
}

.sidik-sidebar .nav-link {
    color: rgba(255,255,255,0.7);
    padding: 0.65rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    border-radius: 0;
    transition: background 0.2s, color 0.2s, border-color 0.15s;
    /* Border transparan permanen — cegah layout shift 3px saat active */
    border-left: 3px solid transparent;
}

.sidik-sidebar .nav-link:hover {
    color: #fff;
    background: rgba(29, 158, 117, 0.12);
    border-left-color: rgba(29, 158, 117, 0.5);
}

.sidik-sidebar .nav-link.active {
    color: #fff;
    background: rgba(29, 158, 117, 0.22);
    border-left-color: var(--sidik-teal);
    font-weight: 600;
}

.sidik-sidebar .nav-section {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.35);
    padding: 1rem 1.5rem 0.25rem;
    font-weight: 600;
}

/* Divider tipis antara grup nav */
.sidik-sidebar .nav-section-divider {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 0.35rem 1.25rem;
}

/* Label sub-seksi superadmin — sedikit berbeda warna */
.sidik-sidebar .nav-section-super {
    color: rgba(255,200,100,0.45);
    padding-top: 0.6rem;
}

/* Badge angka di link sidebar (mis: jumlah santri kritis) */
.sidik-sidebar .nav-link .badge {
    font-size: 0.65rem;
    padding: 0.2em 0.45em;
    min-width: 1.35rem;
    text-align: center;
    margin-left: auto;      /* dorong ke kanan */
    flex-shrink: 0;
}

/* Link bahaya (reset data) — merah redup, jelas tapi tidak mencolok */
.sidik-sidebar .nav-link-danger {
    color: rgba(255,130,130,0.75) !important;
}
.sidik-sidebar .nav-link-danger:hover,
.sidik-sidebar .nav-link-danger.active {
    color: #fff !important;
    background: rgba(220, 53, 69, 0.18) !important;
    border-left-color: #dc3545 !important;
}

.sidik-sidebar .nav-link i {
    font-size: 1.1rem;
    width: 1.2rem;
    flex-shrink: 0;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.sidik-topbar {
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    position: fixed;
    top: 0;
    left: 250px;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.sidik-content {
    margin-left: 250px;
    margin-top: 60px;
    padding: 1.5rem;
    min-height: calc(100vh - 60px);
    transition: margin-left 0.3s ease;
}

/* ============================================================
   SIDEBAR COLLAPSE — mode "rail" ikon-saja (desktop/tablet)
   Toggle via #desktopSidebarToggle, status disimpan di localStorage
   (lihat sidik.js). Sengaja dibatasi ke >=768px supaya tidak bentrok
   dengan perilaku overlay/drawer di mobile.

   PENTING: popup label/submenu TIDAK dibuat pakai CSS :hover di dalam
   sidebar — sidebar punya .sidebar-nav-scroll dgn overflow-y:scroll,
   dan begitu satu sumbu overflow di-set non-visible, browser otomatis
   memaksa sumbu satunya jadi clipping juga (spec CSS overflow-x/y),
   jadi popup absolute di dalamnya PASTI ketutup/kepotong scroll box-nya
   walau overflow-x sudah "visible". Solusinya: popup di-render lewat
   JS sbg elemen terpisah yang ditempel ke <body> (di luar sidebar sama
   sekali, posisi dihitung dgn getBoundingClientRect() — lihat sidik.js,
   fungsi initSidebarRailPopup()), pola yg sama dipakai shadcn/ui dkk
   utk kasus persis ini. CSS di sini cuma tugas menyembunyikan label
   asli & submenu di posisi normalnya.
   ============================================================ */
:root {
    --sidik-rail-w: 64px;
}
@media (min-width: 768px) {
    body.sidebar-collapsed .sidik-sidebar {
        width: var(--sidik-rail-w);
    }
    body.sidebar-collapsed .sidik-content {
        margin-left: var(--sidik-rail-w);
    }
    body.sidebar-collapsed .sidik-topbar {
        left: var(--sidik-rail-w);
    }
    body.sidebar-collapsed .sidik-sidebar .sidebar-brand,
    body.sidebar-collapsed .sidik-sidebar .nav-section {
        display: none;
    }
    /* Link jadi kotak ikon tetap — ukuran & posisi TIDAK berubah sama
       sekali saat hover/klik. font-size:0 menghilangkan label teks total
       (ikon aman krn font-size sendiri, lihat .nav-link i di atas).

       PENTING: centering ikon TIDAK dilakukan lewat justify-content —
       tiap menu punya struktur internal beda-beda (ada yg cuma <i>+teks,
       ada yg bungkus dalam <span>, ada yg punya <span> kedua utk
       badge/chevron), dan Bootstrap juga pasang utility class
       justify-content-between/!important di beberapa toggle grup — jadi
       hasil centering-nya selalu beda-beda tergantung strukturnya. Ikon
       utama sekarang dipaksa center pakai position:absolute (lihat
       aturan "i" di bawah), yang HASILNYA SAMA PERSIS di semua struktur
       karena diambil sepenuhnya dari alur flex, murni geometri kotak. */
    body.sidebar-collapsed .sidik-sidebar .nav-link {
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        padding: 0;
        /* Tinggi tetap eksplisit — krn ikon sekarang position:absolute
           (keluar dari alur normal) & teks font-size:0, tidak ada lagi
           konten in-flow yang menentukan tinggi link, jadi harus diberi
           angka pasti supaya jarak antar menu tidak collapse mepet. */
        height: 44px;
        font-size: 0;
    }
    body.sidebar-collapsed .sidik-sidebar .nav-link .badge,
    body.sidebar-collapsed .sidik-sidebar .nav-link .ti-chevron-down,
    body.sidebar-collapsed .sidik-sidebar .nav-link > span + span {
        display: none;
    }
    body.sidebar-collapsed .sidik-sidebar .nav-link i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    /* Submenu (Izin Keluar, Uang Saku, dst) disembunyikan di posisi
       normalnya — isinya dipakai ulang oleh JS utk mengisi popup body. */
    body.sidebar-collapsed .sidik-sidebar .nav-item > .collapse {
        display: none !important;
    }
}

/* ============================================================
   Popup rail sidebar — elemen di luar sidebar (ditempel ke <body>
   oleh sidik.js), jadi tidak mungkin ketutup scroll box sidebar.
   ============================================================ */
.sidik-rail-popup {
    display: none;
    position: fixed;
    z-index: 1060;
    min-width: 190px;
    max-width: 260px;
    background: #16213e;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    padding: 0.4rem 0;
    font-size: 0.88rem;
}
.sidik-rail-popup.show {
    display: block;
}
.sidik-rail-popup .rail-popup-title {
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
}
.sidik-rail-popup .rail-popup-title:hover {
    background: rgba(29,158,117,0.18);
}
.sidik-rail-popup .rail-popup-sub {
    display: block;
    padding: 0.45rem 1rem;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
    text-decoration: none;
}
.sidik-rail-popup .rail-popup-sub:hover {
    background: rgba(29,158,117,0.18);
    color: #fff;
}
.sidik-rail-popup .rail-popup-divider {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 0.25rem 0;
}

/* ============================================================
   BOTTOM NAV (Mobile)
   ============================================================ */
.sidik-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e9ecef;
    z-index: 1001;
    height: 60px;
}

.sidik-bottom-nav .nav-item {
    flex: 1;
    text-align: center;
}

.sidik-bottom-nav .nav-link {
    color: #6c757d;
    font-size: 0.7rem;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sidik-bottom-nav .nav-link i {
    font-size: 1.3rem;
}

.sidik-bottom-nav .nav-link.active {
    color: var(--sidik-teal);
}

/* ============================================================
   DASHBOARD — KPI 4-KOLOM COMPACT
   ============================================================ */

/* Kolom pembeda kategori */
.kpi-col {
    padding: .6rem .75rem .5rem;
    border-right: 1px solid rgba(0,0,0,.07);
    display: flex;
    flex-direction: column;
}
.kpi-col:last-child { border-right: none; }

/* Warna background per kategori */
.kpi-col-santri      { background: rgba(29,158,117,.07); }
.kpi-col-pelanggaran { background: rgba(230,126,34,.07); }
.kpi-col-izin        { background: rgba(8,66,152,.07);   }
.kpi-col-sakit       { background: rgba(198,40,40,.06);  }

/* Header kolom */
.kpi-col-header {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .4rem;
    opacity: .65;
}
.kpi-col-santri      .kpi-col-header { color: #1D9E75; }
.kpi-col-pelanggaran .kpi-col-header { color: #c0590a; }
.kpi-col-izin        .kpi-col-header { color: #084298; }
.kpi-col-sakit       .kpi-col-header { color: #c62828; }

/* Baris metric dalam kolom */
.kpi-row {
    display: block;
    padding: .3rem .4rem;
    border-radius: 8px;
    margin-bottom: .2rem;
    transition: background .15s;
    color: inherit;
}
.kpi-row:hover { background: rgba(0,0,0,.05); }
.kpi-row-alert { background: rgba(198,40,40,.07); }
.kpi-row-warn  { background: rgba(255,193,7,.08); }

.kpi-row-num {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    display: block;
}
.kpi-row-label {
    font-size: .7rem;
    color: #6c757d;
    display: block;
    line-height: 1.2;
}

/* Mobile: susun 2x2 */
@media (max-width: 767px) {
    .kpi-col {
        border-right: 1px solid rgba(0,0,0,.07);
        border-bottom: 1px solid rgba(0,0,0,.07);
    }
    .kpi-col:nth-child(even) { border-right: none; }
}

/* ============================================================
   DASHBOARD GROUP LABEL (legacy)
   ============================================================ */
.dash-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6c757d;
    padding: 0.1rem 0.1rem 0.4rem;
    margin-bottom: 0;
    border-left: 3px solid var(--sidik-teal);
    padding-left: 0.6rem;
    margin-top: 0.25rem;
}

/* ============================================================
   KARTU IDENTITAS USER
   ============================================================ */
.sidik-user-card {
    background: linear-gradient(135deg, var(--sidik-teal), #157a5a);
    border-radius: 12px;
    color: #fff;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.sidik-user-card.putra {
    background: linear-gradient(135deg, var(--sidik-putra), #0f4280);
}

.sidik-user-card.putri {
    background: linear-gradient(135deg, var(--sidik-putri), #6e2340);
}

/* ============================================================
   STAT CARDS (legacy — masih dipakai halaman lain)
   ============================================================ */
.stat-card {
    border: none;
    border-radius: 12px;
    padding: 1.25rem;
    transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* ============================================================
   KPI CARDS — Dashboard compact metric cards
   ============================================================ */
.kpi-card {
    border-radius: 10px;
    border: none !important;
    border-left: 4px solid !important;
    padding: .875rem 1rem .75rem;
    background: #fff;
    transition: transform 0.18s, box-shadow 0.18s;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.10) !important;
}
.kpi-num {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: .15rem;
}
.kpi-label {
    font-size: .73rem;
    color: #6c757d;
    margin-bottom: .2rem;
    line-height: 1.3;
}
.kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.kpi-bk {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    font-size: .68rem;
    line-height: 1.3;
}
.kpi-bk-l { color: var(--sidik-putra); font-weight: 600; }
.kpi-bk-p { color: var(--sidik-putri); font-weight: 600; }

/* ============================================================
   BADGE STATUS POIN
   ============================================================ */
.badge-hijau  { background: var(--sidik-teal) !important; }
.badge-kuning { background: #ffc107 !important; color: #000 !important; }
.badge-merah  { background: #dc3545 !important; }
.badge-hitam  { background: #212529 !important; }

/* ============================================================
   TABLE
   ============================================================ */
.table-sidik th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    border-top: none;
    background: #f8f9fa;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, var(--sidik-teal) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-card {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.login-logo {
    font-size: 3rem;
    color: var(--sidik-teal);
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 768px) {
    .sidik-sidebar {
        transform: translateX(-100%);
    }

    .sidik-sidebar.show {
        transform: translateX(0);
    }

    .sidik-topbar {
        left: 0;
    }

    .sidik-content {
        margin-left: 0;
        padding: 1rem;
        padding-bottom: 4.5rem; /* buat bottom nav */
    }

    .sidik-bottom-nav {
        display: flex;
    }
}

/* ============================================================
   OVERLAY (untuk mobile sidebar)
   ============================================================ */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.sidebar-overlay.show {
    display: block;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.rounded-xl { border-radius: 12px !important; }
.rounded-2xl { border-radius: 16px !important; }
.text-teal { color: var(--sidik-teal) !important; }
.bg-teal { background-color: var(--sidik-teal) !important; }
.border-teal { border-color: var(--sidik-teal) !important; }

/* Button teal */
.btn-teal {
    background-color: var(--sidik-teal);
    border-color: var(--sidik-teal);
    color: #fff;
}
.btn-teal:hover, .btn-teal:focus {
    background-color: #17805e;
    border-color: #17805e;
    color: #fff;
}
.btn-outline-teal {
    border-color: var(--sidik-teal);
    color: var(--sidik-teal);
}
.btn-outline-teal:hover {
    background-color: var(--sidik-teal);
    color: #fff;
}

/* Table header teal */
.table-teal th {
    background-color: var(--sidik-teal);
    color: #fff;
    border-color: #17805e;
}

/* Card hover effect */
.card-hover {
    transition: transform 0.2s, box-shadow 0.2s;
}
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* Min width 0 for flex truncate */
.min-width-0 { min-width: 0; }

/* ============================================================
   DASHBOARD — breakdown putra/putri per stat card
   ============================================================ */
.dash-bk {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    font-size: .7rem;
    margin-top: .18rem;
    line-height: 1.3;
}
.dash-bk-putra { color: var(--sidik-putra); font-weight: 600; }
.dash-bk-putri { color: var(--sidik-putri); font-weight: 600; }

/* ============================================================
   STATUS FILTER CARDS (sakit, izin, pelanggaran)
   ============================================================ */
.sfc-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .85rem;
}
.sfc {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 50px;
    border: 2px solid transparent;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    line-height: 1.4;
}
.sfc:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.sfc-count {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}
/* inactive: outlined with color */
.sfc-danger   { border-color:#dc3545; color:#dc3545; background:#fff; }
.sfc-warning  { border-color:#ffc107; color:#856404; background:#fff; }
.sfc-success  { border-color:#198754; color:#198754; background:#fff; }
.sfc-info     { border-color:#0dcaf0; color:#055160; background:#fff; }
.sfc-secondary{ border-color:#6c757d; color:#6c757d; background:#fff; }
.sfc-dark     { border-color:#212529; color:#212529; background:#fff; }
.sfc-primary  { border-color:#0d6efd; color:#0d6efd; background:#fff; }
/* active: filled */
.sfc-danger.sfc-active   { background:#dc3545; color:#fff; }
.sfc-warning.sfc-active  { background:#ffc107; color:#212529; }
.sfc-success.sfc-active  { background:#198754; color:#fff; }
.sfc-info.sfc-active     { background:#0dcaf0; color:#055160; }
.sfc-secondary.sfc-active{ background:#6c757d; color:#fff; }
.sfc-dark.sfc-active     { background:#212529; color:#fff; }
.sfc-primary.sfc-active  { background:#0d6efd; color:#fff; }
/* all card = show all */
.sfc-all { border-color:#adb5bd; color:#495057; background:#fff; }
.sfc-all.sfc-active { background:#495057; color:#fff; border-color:#495057; }

/* Collapse toggle: tanpa active → tidak dapat highlight, hanya hover */
.sidik-sidebar .nav-link[data-bs-toggle='collapse'].collapsed {
    color: rgba(255,255,255,0.7) !important;
    background: transparent !important;
    border-left-color: transparent !important;
    font-weight: normal !important;
}

/* Sidebar submenu chevron */
#submenuIzinKeluar.show + * #chevronIzinKeluar,
[aria-expanded='true'] #chevronIzinKeluar { transform: rotate(180deg); }
.nav-link[data-bs-toggle='collapse'] #chevronIzinKeluar { transition: transform .2s; }

/* ── Mention chips (pengumuman detail view) ─────────────────────────── */
.mention-chip {
    display: inline-block;
    padding: 1px 8px 2px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .88em;
    white-space: nowrap;
    cursor: default;
    transition: opacity .15s;
}
.mention-chip:hover { opacity: .8; }

.mention-chip.mention-user {
    background: #fff3cd;
    color: #7c5400;
    border: 1px solid #ffc107;
}
.mention-chip.mention-santri {
    background: #d0f0fd;
    color: #004a6e;
    border: 1px solid #38bdf8;
}
.mention-chip.mention-alumni {
    background: #e9ecef;
    color: #495057;
    border: 1px solid #adb5bd;
}
.mention-chip.mention-deleted {
    background: #fde8e8;
    color: #842029;
    border: 1px solid #f8a0a0;
    text-decoration: line-through;
}

/* Mention dropdown (autocomplete) */
.mention-dropdown {
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden;
}
.mention-dropdown-item:first-child { border-radius: 8px 8px 0 0; }
.mention-dropdown-item:last-child  { border-radius: 0 0 8px 8px; border-bottom: none !important; }
.mention-dropdown-item { padding: 10px 14px !important; }
.mention-dropdown-item:hover, .mention-dropdown-item.active { background: #f3f4f6 !important; }
.mention-item-name { font-size: .9rem; }
.mention-item-detail { font-size: .78rem; color: #9ca3af; margin-top: 2px; }
.mention-item-type { font-size: .7rem; padding: 1px 6px; border-radius: 8px; margin-left: 6px; font-weight: 700; }
.mention-item-type.user    { background: #fef3c7; color: #92400e; }
.mention-item-type.santri  { background: #e0f2fe; color: #0369a1; }

/* Isi pengumuman — preserve newlines, wrap mention chips inline */
.pengumuman-isi { white-space: pre-wrap; word-break: break-word; }
.pengumuman-isi .mention-chip { white-space: nowrap; }

/* mention-chip sebagai link (santri) — jangan hilangkan styling */
a.mention-chip { text-decoration: none; }
a.mention-chip:hover { opacity: .85; text-decoration: none; }
a.mention-chip.mention-santri:hover { background: #bae6fd; }

/* Sembunyikan tombol hapus chip saat editor locked */
[contenteditable="false"] .mention-remove { display: none !important; }
[contenteditable="true"]  .mention-remove { display: inline-flex; }