/* ==========================================================================
   Portal Orang Tua — tampilan aplikasi (mobile first).

   BERDIRI SENDIRI: berkas ini SENGAJA tidak memakai plugin.min.css /
   style.min.css milik tema. Dua berkas itu berukuran ~1,3 MB dan menahan
   render halaman, padahal portal ini cuma memakai segelintir utilitasnya.
   Mayoritas orang tua membuka portal dari HP, seringkali dengan sinyal
   seadanya, jadi seluruh gaya yang dibutuhkan ditulis di sini saja.

   Ikonnya pun inline SVG (lihat resources/views/ortu/ikon.blade.php), bukan
   font ikon dari CDN, supaya tidak ada permintaan jaringan pihak ketiga.

   Urutan penulisan mobile-first: gaya dasar = tampilan HP, layar besar
   ditangani di blok @media (min-width: ...) di bagian bawah.
   ========================================================================== */

:root {
    /* Biru langit. Dua tingkat sengaja dipisah: --ou-primary untuk bidang
       berteks putih (bilah atas, tombol, chip aktif) dan --ou-primary-ink
       untuk TEKS di atas latar terang. Biru langit yang lebih muda (#0ea5e9)
       terlalu pucat untuk teks putih (kontras ~2,8:1) sehingga judul dan
       label sulit dibaca di bawah terik matahari. */
    --ou-primary:      #0284c7;
    --ou-primary-dark: #0369a1;
    --ou-primary-ink:  #0369a1;
    --ou-primary-soft: #e0f2fe;
    --ou-primary-grad: linear-gradient(100deg, #0284c7 0%, #0ea5e9 65%, #38bdf8 100%);
    --ou-ink:          #0f172a;
    --ou-ink-2:        #475569;
    --ou-ink-3:        #6b7a90;
    --ou-line:         #e2e8f0;
    --ou-line-soft:    #eef2f7;
    --ou-bg:           #f1f6fb;
    --ou-card:         #ffffff;

    --ou-ok:   #17b26a;
    --ou-warn: #f79009;
    --ou-bad:  #f04438;
    --ou-info: #0ba5ec;

    --ou-radius:    14px;
    --ou-radius-sm: 10px;
    --ou-shadow:    0 1px 2px rgba(15,23,42,.05), 0 10px 24px -16px rgba(15,23,42,.30);

    /* Tinggi bilah atas & bawah dipakai banyak tempat (sticky offset, padding
       isi halaman), jadi disimpan sebagai variabel supaya selalu sinkron.
       env(safe-area-inset-*) menangani poni & indikator gestur di HP modern. */
    --ou-appbar:   56px;
    --ou-appbar-h: calc(56px + env(safe-area-inset-top, 0px));
    --ou-bottom:   60px;
    --ou-bottom-h: calc(60px + env(safe-area-inset-bottom, 0px));
}

/* ============================== Dasar ============================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;   /* Android Chrome kadang membesarkan teks sendiri */
    color-scheme: light;              /* cegah "force dark mode" mengacak warna kartu */
}

body {
    margin: 0;
    background: var(--ou-bg);
    color: var(--ou-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    /* Sorotan biru bawaan Android saat menyentuh tautan diganti umpan balik
       sendiri (:active pada masing-masing komponen) supaya terasa seperti app. */
    -webkit-tap-highlight-color: transparent;
}

a    { color: var(--ou-primary-ink); text-decoration: none; }
img  { max-width: 100%; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; color: var(--ou-ink); }
p    { margin: 0 0 10px; }
hr   { border: 0; border-top: 1px solid var(--ou-line); margin: 12px 0; }

button { font: inherit; }

/* Ikon SVG mengikuti warna teks induknya. */
.ou-ic { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
.ou-ic--sm { width: 16px; height: 16px; }
.ou-ic--lg { width: 24px; height: 24px; }

/* ============================== Bilah atas ============================== */

.ou-appbar {
    position: sticky; top: 0; z-index: 40;
    height: var(--ou-appbar-h);
    padding: env(safe-area-inset-top, 0px) 4px 0;
    background: var(--ou-primary);
    background: var(--ou-primary-grad);
    color: #fff;
    display: flex; align-items: center;
    box-shadow: 0 2px 8px rgba(15,23,42,.16);
}

.ou-appbar__in {
    width: 100%; max-width: 1180px; margin: 0 auto;
    height: var(--ou-appbar);
    display: flex; align-items: center; gap: 4px; padding: 0 4px;
}

/* Tombol ikon di bilah atas: 44px agar nyaman disentuh. */
.ou-iconbtn {
    width: 44px; height: 44px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 50%;
    color: inherit; cursor: pointer; padding: 0;
}
.ou-iconbtn:active { background: rgba(255,255,255,.18); }

.ou-appbar__judul {
    flex: 1; min-width: 0;
    font-size: 17px; font-weight: 600; color: #fff;
    /* Judul halaman bisa panjang ("Data Mahasiswa"); potong, jangan membungkus,
       supaya tinggi bilah tetap. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-left: 4px;
}
.ou-appbar__judul a { color: #fff; }

.ou-appbar__aksi { display: flex; align-items: center; gap: 6px; padding-right: 4px; }

/* Tombol kecil putih transparan di bilah atas (mis. "Kembali ke Admin"). */
.ou-appbar__btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.16); color: #fff;
    border: 0; border-radius: 999px; padding: 7px 12px;
    font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ou-appbar__btn:active { background: rgba(255,255,255,.3); }

/* ============================== Kerangka ============================== */

.ou-shell {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: flex-start; gap: 22px;
}

.ou-main {
    flex: 1; min-width: 0;
    padding: 14px 12px;
    /* Ruang untuk bilah bawah yang mengambang; tanpa ini kartu terakhir tertutup. */
    padding-bottom: calc(var(--ou-bottom-h) + 18px);
}

/* ============================== Laci menu ==============================
   Satu markup dipakai dua rupa: laci geser di HP, sidebar tetap di layar
   lebar. Menyalin menunya jadi dua blok hanya akan membuatnya gampang beda. */

.ou-nav {
    position: fixed; z-index: 60; top: 0; left: 0; bottom: 0;
    width: 84vw; max-width: 310px;
    background: #fff;
    display: flex; flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .22s ease;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.ou-nav.buka { transform: translateX(0); box-shadow: 0 0 40px rgba(15,23,42,.3); }

/* Latar gelap di belakang laci. Atribut hidden dilepas lewat JS supaya elemen
   ini tidak pernah menghalangi sentuhan saat laci tertutup. */
.ou-scrim {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(15,23,42,.45);
    opacity: 0; transition: opacity .22s ease;
}
.ou-scrim.tampil { opacity: 1; }

.ou-nav__hd {
    background: var(--ou-primary);
    background: var(--ou-primary-grad);
    color: #fff;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 18px;
}
.ou-nav__nama  { font-size: 16px; font-weight: 600; color: #fff; word-break: break-word; }
.ou-nav__sub   { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 2px; }
.ou-nav__ava {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 600; margin-bottom: 10px;
}

.ou-nav__grup {
    padding: 14px 18px 6px;
    font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
    color: var(--ou-ink-3); font-weight: 700;
}

/* Kepala kelompok per anak di dalam menu. */
.ou-nav__anak {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px 8px; margin-top: 6px;
    border-top: 1px solid var(--ou-line-soft);
}
.ou-nav__anak .nm  { font-weight: 600; font-size: 14px; line-height: 1.3; }
.ou-nav__anak .sub { font-size: 12px; color: var(--ou-ink-3); }

.ou-nav a,
.ou-nav__keluar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    color: var(--ou-ink-2); font-size: 14.5px;
    background: none; border: 0; width: 100%; text-align: left;
    font-family: inherit; cursor: pointer;
}
.ou-nav a:active { background: var(--ou-line-soft); }
.ou-nav a.on {
    background: var(--ou-primary-soft);
    color: var(--ou-primary-ink); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--ou-primary);
}
.ou-nav__keluar { color: var(--ou-bad); }
.ou-nav__keluar:active { background: #fff1f3; }

/* ============================== Modal ==============================
   Portal ini tidak memuat Bootstrap, jadi modal ditulis sendiri — pola yang
   sama dengan laci menu di atas (scrim + panel, dibuka/ditutup lewat class
   "buka"). Dipakai untuk rincian presensi per mata kuliah. */

.ou-modal-scrim {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(15,23,42,.45);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.ou-modal-scrim.buka { opacity: 1; visibility: visible; transition-delay: 0s; }

.ou-modal {
    position: fixed; z-index: 66; left: 50%; top: 50%;
    transform: translate(-50%, -46%);
    width: min(640px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    background: #fff; border-radius: var(--ou-radius);
    box-shadow: 0 20px 50px -12px rgba(15,23,42,.35);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.ou-modal.buka {
    opacity: 1; visibility: visible; transform: translate(-50%, -50%);
    transition-delay: 0s;
}

.ou-modal__bd    { overflow-y: auto; }
.ou-modal__tutup {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; color: var(--ou-ink-3); cursor: pointer;
}
.ou-modal__tutup:active { background: var(--ou-line-soft); }

/* ============================== Bilah bawah ==============================
   Lima tab tetap seperti aplikasi Android. Tab selain Beranda menunjuk ke
   anak yang sedang/terakhir dilihat — lihat Ortu::anakUntukTab(). */

.ou-bottom {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    height: var(--ou-bottom-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid var(--ou-line);
    display: flex;
    box-shadow: 0 -2px 14px rgba(15,23,42,.07);
}

.ou-bottom a {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 2px 7px;
    color: var(--ou-ink-3); font-size: 10.5px; font-weight: 500;
    -webkit-user-select: none; user-select: none;
}
.ou-bottom a span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Kapsul di belakang ikon menandai tab aktif — pola Material 3. */
.ou-bottom .pil {
    display: flex; align-items: center; justify-content: center;
    width: 50px; height: 28px; border-radius: 999px;
    transition: background .15s ease;
}
.ou-bottom a.on            { color: var(--ou-primary-ink); font-weight: 600; }
.ou-bottom a.on .pil       { background: var(--ou-primary-soft); }
.ou-bottom a:active .pil   { background: var(--ou-line-soft); }

/* ============================== Bilah anak ==============================
   Menempel di bawah bilah atas; menunjukkan anak yang sedang dilihat, dan
   menjadi pemilih bila anaknya lebih dari satu. */

.ou-anakbar {
    position: sticky; top: var(--ou-appbar-h); z-index: 30;
    background: #fff; border-bottom: 1px solid var(--ou-line);
}
.ou-anakbar__satu {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
}
.ou-anakbar__satu .nm  { font-size: 14px; font-weight: 600; line-height: 1.25;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ou-anakbar__satu .sub { font-size: 12px; color: var(--ou-ink-3); }

/* Deretan chip anak, digeser mendatar. */
.ou-anakbar__chips { display: flex; gap: 8px; overflow-x: auto; padding: 9px 12px;
                     scrollbar-width: none; }
.ou-anakbar__chips::-webkit-scrollbar { display: none; }
.ou-anakbar__chips a {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--ou-line); border-radius: 999px;
    padding: 5px 14px 5px 6px; background: #fff;
    color: var(--ou-ink-2); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.ou-anakbar__chips a .teks { display: flex; flex-direction: column;
                             line-height: 1.25; text-align: left; }
.ou-anakbar__chips a .nim  { font-size: 11px; font-weight: 400; opacity: .7; }
.ou-anakbar__chips a.on {
    background: var(--ou-primary); border-color: var(--ou-primary); color: #fff;
}
.ou-anakbar__chips a.on .ou-ava { background: rgba(255,255,255,.25); color: #fff; }

/* Avatar inisial (dipakai di chip, menu, dan kartu anak). */
.ou-ava {
    width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
    background: var(--ou-primary-soft); color: var(--ou-primary-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; overflow: hidden;
}
.ou-ava img { width: 100%; height: 100%; object-fit: cover; }
.ou-ava--lg { width: 46px; height: 46px; font-size: 17px; }

/* ============================== Kartu ============================== */

.ou-card {
    background: var(--ou-card);
    border-radius: var(--ou-radius);
    box-shadow: var(--ou-shadow);
    margin-bottom: 14px;
    overflow: hidden;
}
.ou-card__hd {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 15px;
    font-size: 14px; font-weight: 600;
    border-bottom: 1px solid var(--ou-line-soft);
}
.ou-card__bd    { padding: 15px; }
.ou-card__bd--0 { padding: 0; }

/* Judul halaman di dalam isi (bukan di bilah atas). */
.ou-judul     { margin: 2px 0 12px; }
.ou-judul h2  { font-size: 18px; }
.ou-judul p   { margin: 2px 0 0; font-size: 13px; color: var(--ou-ink-3); }

/* ============================== Daftar & baris ============================== */

/* Baris label/nilai — biodata, rincian tagihan. */
.ou-kv        { display: flex; flex-direction: column; }
.ou-kv__baris {
    display: flex; gap: 12px; align-items: baseline;
    padding: 10px 15px; border-bottom: 1px solid var(--ou-line-soft);
}
.ou-kv__baris:last-child { border-bottom: 0; }
.ou-kv__k { flex: 0 0 40%; font-size: 12.5px; color: var(--ou-ink-3); }
.ou-kv__v { flex: 1; min-width: 0; font-size: 14px; word-break: break-word; }

/* Baris yang bisa disentuh, dengan panah di kanan. */
.ou-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px; border-bottom: 1px solid var(--ou-line-soft);
    color: var(--ou-ink);
}
.ou-item:last-child  { border-bottom: 0; }
.ou-item:active      { background: var(--ou-line-soft); }
.ou-item__isi        { flex: 1; min-width: 0; }
.ou-item__jdl        { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.ou-item__sub        { font-size: 12.5px; color: var(--ou-ink-3); margin-top: 2px; }
.ou-item__panah      { color: var(--ou-ink-3); }
.ou-item.on          { background: var(--ou-primary-soft); }

/* ============================== Petak aksi ==============================
   Pintasan per anak di Beranda. Tiga kolom: lima aksi jadi 3 + 2, tetap
   rapi dan sasaran sentuhnya besar. */

.ou-tiles {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; padding: 12px 12px 14px;
}
.ou-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; padding: 13px 6px;
    background: var(--ou-bg); border-radius: var(--ou-radius-sm);
    color: var(--ou-ink-2); font-size: 11.5px; font-weight: 600; text-align: center;
    line-height: 1.25;
    transition: transform .1s ease, background .1s ease;
}
.ou-tile:active { transform: scale(.96); background: var(--ou-primary-soft); }
.ou-tile .bulat {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; color: var(--ou-primary-ink);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(15,23,42,.10);
}

/* ============================== Chip semester ============================== */

.ou-chips {
    display: flex; gap: 8px; overflow-x: auto;
    padding: 12px; margin: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.ou-chips::-webkit-scrollbar { display: none; }
.ou-chips a {
    flex: 0 0 auto; scroll-snap-align: start;
    border: 1px solid var(--ou-line); border-radius: 999px;
    padding: 7px 15px; background: #fff;
    color: var(--ou-ink-2); font-size: 13px; font-weight: 500; white-space: nowrap;
    line-height: 1.3;
}
.ou-chips a.on {
    background: var(--ou-primary); border-color: var(--ou-primary);
    color: #fff; font-weight: 600;
}
.ou-chips a small { display: block; font-size: 10.5px; opacity: .75; }

/* ============================== Lencana & statistik ============================== */

.ou-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
    background: var(--ou-line-soft); color: var(--ou-ink-2);
}
.ou-badge--ok   { background: #e7f8f0; color: #0b7a48; }
.ou-badge--warn { background: #fef4e6; color: #a35c00; }
.ou-badge--bad  { background: #feeceb; color: #b42318; }
.ou-badge--info { background: #e6f6fe; color: #026aa2; }

/* Kotak angka besar (IPS/IPK, ringkasan tagihan).
   auto-fit + minmax: tiga kotak tetap sebaris di layar 360px, dan jumlah
   kotak yang berbeda (dua, empat) ikut menyesuaikan tanpa aturan tambahan. */
.ou-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 10px; margin-bottom: 14px; }
.ou-stat {
    background: #fff; border-radius: var(--ou-radius);
    box-shadow: var(--ou-shadow); padding: 13px 14px;
}
.ou-stat__k { font-size: 11.5px; color: var(--ou-ink-3); text-transform: uppercase;
              letter-spacing: .3px; font-weight: 600; }
.ou-stat__v { font-size: 22px; font-weight: 700; line-height: 1.25; margin-top: 2px; }
.ou-stat__v--primary { color: var(--ou-primary-ink); }
.ou-stat__sub { font-size: 12px; color: var(--ou-ink-3); }

/* Batang kehadiran / pelunasan. */
.ou-bar    { background: #e2e8f0; border-radius: 999px; height: 7px; overflow: hidden; }
.ou-bar i  { display: block; height: 100%; border-radius: 999px; background: var(--ou-primary); }
.ou-bar--ok   i { background: var(--ou-ok); }
.ou-bar--warn i { background: var(--ou-warn); }
.ou-bar--bad  i { background: var(--ou-bad); }

/* ============================== Pesan ============================== */

.ou-alert {
    display: flex; gap: 10px; align-items: flex-start;
    border-radius: var(--ou-radius-sm);
    padding: 12px 14px; margin-bottom: 14px;
    font-size: 13.5px; line-height: 1.45;
}
.ou-alert > .ou-ic { margin-top: 1px; }
.ou-alert__isi { flex: 1; min-width: 0; }
.ou-alert--info { background: #e6f6fe; color: #0b4a6f; }
.ou-alert--warn { background: #fef4e6; color: #7a4c00; }
.ou-alert--bad  { background: #feeceb; color: #912018; }
.ou-alert--ok   { background: #e7f8f0; color: #05603a; }
.ou-alert a     { color: inherit; font-weight: 600; text-decoration: underline; }
.ou-alert ul    { margin: 0; padding-left: 18px; }
.ou-alert__tutup {
    background: none; border: 0; padding: 0 2px; cursor: pointer;
    color: inherit; opacity: .6; line-height: 1;
}

/* Keadaan kosong. */
.ou-kosong {
    text-align: center; color: var(--ou-ink-3);
    padding: 30px 18px; font-size: 13.5px;
}
.ou-kosong .ou-ic { width: 34px; height: 34px; margin: 0 auto 10px; opacity: .45; }

/* ============================== Tombol & form ============================== */

.ou-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 18px; border-radius: var(--ou-radius-sm);
    border: 1px solid var(--ou-line); background: #fff; color: var(--ou-ink-2);
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: transform .1s ease;
}
.ou-btn:active         { transform: scale(.98); }
.ou-btn--primary       { background: var(--ou-primary); border-color: var(--ou-primary); color: #fff; }
.ou-btn--primary:active{ background: var(--ou-primary-dark); }
.ou-btn--blok          { display: flex; width: 100%; }

.ou-field       { margin-bottom: 14px; }
.ou-label       { display: block; font-size: 13px; color: var(--ou-ink-2);
                  font-weight: 600; margin-bottom: 6px; }
.ou-label small { font-weight: 400; color: var(--ou-ink-3); }
.ou-input {
    display: block; width: 100%;
    padding: 12px 13px;
    /* 16px wajib: di bawah itu Safari/iOS otomatis memperbesar (zoom) halaman
       begitu input difokuskan, dan tata letak jadi kacau. */
    font-size: 16px; font-family: inherit;
    color: var(--ou-ink); background: #fff;
    border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm);
}
.ou-input:focus { outline: none; border-color: var(--ou-primary);
                  box-shadow: 0 0 0 3px rgba(2,132,199,.18); }

/* ============================== Tabel ==============================
   Dasar (HP): tiap baris jadi kartu, judul kolom diambil dari data-label.
   Tabel 5-7 kolom mustahil muat di layar 360px tanpa terpotong.
   Mulai 768px barulah tampil sebagai tabel sungguhan. */

.ou-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }

.ou-tabel,
.ou-tabel tbody,
.ou-tabel tfoot,
.ou-tabel tr,
.ou-tabel td { display: block; width: 100%; }
.ou-tabel thead { display: none; }

.ou-tabel tbody tr {
    border-bottom: 1px solid var(--ou-line-soft);
    padding-bottom: 6px;
}
.ou-tabel tbody tr:last-child { border-bottom: 0; }

.ou-tabel td {
    border: 0; padding: 4px 15px;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; text-align: right;
}
.ou-tabel td::before {
    content: attr(data-label);
    flex: 0 0 38%; text-align: left;
    font-size: 12.5px; font-weight: 500; color: var(--ou-ink-3);
}
/* Sel yang isinya lebih dari satu elemen (jadwal, lencana + keterangan)
   wajib dibungkus .nilai — tanpa itu tiap elemen jadi flex-item sendiri
   dan berjajar mendatar alih-alih bertumpuk. */
.ou-tabel td .nilai { flex: 1; min-width: 0; }

/* Sel utama (nama mata kuliah / kode tagihan) menjadi judul kartu. */
.ou-tabel td.sel-utama {
    display: block; text-align: left;
    padding: 12px 15px 6px;
    font-size: 14.5px; font-weight: 600; color: var(--ou-ink);
}
.ou-tabel td.sel-utama::before { content: none; }
.ou-tabel td.sel-no            { display: none; }  /* nomor urut tak berguna sebagai kartu */

/* Sel yang memenuhi seluruh lebar tabel (pesan "belum ada data"). Tanpa ini
   pseudo-label ::before tetap memakan 38% lebar dan pesannya terhimpit. */
.ou-tabel td.sel-penuh         { display: block; padding: 0; text-align: center; }
.ou-tabel td.sel-penuh::before { content: none; }

.ou-tabel tbody tr.on { background: var(--ou-primary-soft); }

/* Baris total: th tidak ikut di-blok-kan, jadi ditata sebagai satu baris. */
.ou-tabel tfoot tr {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--ou-bg); border-top: 1px solid var(--ou-line);
}
.ou-tabel tfoot th { display: block; border: 0; padding: 12px 15px; font-size: 14px; }
.ou-tabel tfoot th:empty { display: none; }

/* ============================== Utilitas kecil ============================== */

.ou-muted   { color: var(--ou-ink-3); }
.ou-sm      { font-size: 12.5px; }
.ou-b       { font-weight: 600; }
.ou-center  { text-align: center; }
.ou-right   { text-align: right; }
.ou-row     { display: flex; align-items: center; gap: 10px; }
.ou-grow    { flex: 1; min-width: 0; }
.ou-mt      { margin-top: 12px; }
.ou-trunc   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ou-foot {
    text-align: center; color: var(--ou-ink-3); font-size: 12px;
    padding: 4px 12px 18px;
}


/* ==========================================================================
   Halaman login — berdiri sendiri, tanpa kerangka aplikasi.
   ========================================================================== */

.ou-login {
    min-height: 100vh;
    /* dvh menghitung bilah alamat browser HP yang muncul-hilang; tanpa ini
       kotak login bisa terdorong sebagian keluar layar di Chrome Android. */
    min-height: 100dvh;
    display: flex; flex-direction: column;
    padding: env(safe-area-inset-top, 0px) 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
/* margin:auto (bukan align-items:center) supaya saat kotaknya lebih tinggi
   dari layar, bagian atasnya tetap bisa digulir dan tidak terpotong. */
.ou-login__kotak {
    width: 100%; max-width: 400px; margin: auto;
    background: #fff; border-radius: var(--ou-radius);
    box-shadow: var(--ou-shadow); padding: 26px 22px;
}
.ou-login__logo {
    width: 58px; height: 58px; border-radius: 18px; margin: 0 auto 14px;
    background: var(--ou-primary-grad); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.ou-login__logo .ou-ic { width: 30px; height: 30px; }
.ou-login h1   { font-size: 20px; text-align: center; }
.ou-login__sub { text-align: center; font-size: 13px; color: var(--ou-ink-3);
                 margin: 4px 0 20px; }
.ou-login__bantu {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ou-line-soft);
    font-size: 12.5px; color: var(--ou-ink-3); text-align: center; line-height: 1.5;
}

/* Tombol mata pada isian password. Dibungkus .ou-inputwrap.
   Dipakai di halaman login dan ganti password: mengetik password panjang di
   papan ketik HP mudah salah, dan tanpa cara melihatnya orang tua terjebak. */
.ou-inputwrap { position: relative; }
.ou-inputwrap .ou-input { padding-right: 46px; }
.ou-inputwrap button {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 38px; height: 38px; border: 0; background: none; cursor: pointer;
    color: var(--ou-ink-3);
    display: flex; align-items: center; justify-content: center;
}
/* Dua ikon ditumpuk di dalam tombol; class .lihat (dipasang JS) menentukan
   yang mana yang tampil, jadi tidak ada markup ikon yang diutak-atik JS. */
.ou-inputwrap button .ou-ic:nth-of-type(2)       { display: none; }
.ou-inputwrap button.lihat .ou-ic:nth-of-type(1) { display: none; }
.ou-inputwrap button.lihat .ou-ic:nth-of-type(2) { display: block; }

/* ==========================================================================
   Tablet ke atas (>= 768px): tabel kembali menjadi tabel sungguhan.
   ========================================================================== */

@media (min-width: 768px) {
    .ou-main { padding: 18px 16px calc(var(--ou-bottom-h) + 20px); }

    .ou-tabel         { display: table; }
    .ou-tabel thead   { display: table-header-group; }
    .ou-tabel tbody   { display: table-row-group; }
    .ou-tabel tfoot   { display: table-footer-group; }
    .ou-tabel tr      { display: table-row; }
    .ou-tabel td,
    .ou-tabel th      { display: table-cell; }

    .ou-tabel th, .ou-tabel td {
        padding: 10px 12px; border-bottom: 1px solid var(--ou-line-soft);
        text-align: left; vertical-align: top;
    }
    .ou-tabel thead th {
        background: var(--ou-bg); color: var(--ou-ink-3);
        font-size: 12px; font-weight: 600; text-transform: uppercase;
        letter-spacing: .3px; white-space: nowrap;
    }
    .ou-tabel td::before        { content: none; }
    .ou-tabel td.sel-utama      { padding: 10px 12px; font-weight: 500; font-size: 14px; }
    .ou-tabel td.sel-no         { display: table-cell; width: 40px; color: var(--ou-ink-3); }
    .ou-tabel td.sel-penuh      { display: table-cell; }
    .ou-tabel tbody tr          { padding-bottom: 0; }
    .ou-tabel tbody tr:last-child td { border-bottom: 0; }
    .ou-tabel tfoot tr          { display: table-row; }
    .ou-tabel tfoot th          { display: table-cell; background: var(--ou-bg);
                                  border-top: 1px solid var(--ou-line); }
    .ou-tabel tfoot th:empty    { display: table-cell; }

    .ou-tiles  { grid-template-columns: repeat(5, 1fr); }
}

/* ==========================================================================
   Layar lebar (>= 992px): menu jadi sidebar tetap, bilah bawah dilepas.
   ========================================================================== */

@media (min-width: 992px) {
    .ou-shell { padding: 20px 16px; gap: 22px; align-items: flex-start; }

    /* Laci berhenti menjadi laci: kembali ke alur normal sebagai sidebar. */
    .ou-nav {
        position: sticky; top: calc(var(--ou-appbar-h) + 20px);
        transform: none; box-shadow: var(--ou-shadow);
        width: 256px; max-width: 256px; flex: 0 0 256px;
        border-radius: var(--ou-radius);
        max-height: calc(100vh - var(--ou-appbar-h) - 40px);
        padding-bottom: 8px;
        transition: none;
    }
    .ou-nav__hd { padding: 16px 18px; }

    .ou-main   { padding: 0 0 40px; }

    /* Bilah bawah, latar laci, dan tombol hamburger tidak berlaku di sini. */
    .ou-bottom,
    .ou-scrim,
    .ou-iconbtn--menu { display: none !important; }


    /* Dua kolom untuk halaman yang punya daftar + rincian. */
    .ou-kolom      { display: grid; grid-template-columns: 300px 1fr; gap: 18px;
                     align-items: start; }
    .ou-kolom--rata{ grid-template-columns: 5fr 7fr; }

    /* Chip semester kembali menjadi daftar menurun di kolom kiri. */
    .ou-chips--sisi          { flex-direction: column; overflow: visible;
                               max-height: 420px; overflow-y: auto; padding: 10px; }
    .ou-chips--sisi a        { width: 100%; text-align: left; border-radius: var(--ou-radius-sm); }

    /* Bilah anak tidak diperlukan lagi: sidebar sudah memperlihatkan anak mana
       yang sedang dibuka, sekaligus menjadi tempat berpindah anak. */
    .ou-anakbar { display: none; }
}