/* Shared responsive layout. The large-screen display retains its TV layout. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
a, button, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 3px solid #f5d66b; outline-offset: 3px; }

/* Admin and Bendahara */
.admin-page { min-width: 0; }
.admin-page .sidebar { top: 0; bottom: 0; overflow-y: auto; }
.admin-page .sidebar-brand { overflow-wrap: anywhere; }
.admin-page .mobile-menu-toggle { display: none; }
.admin-page .main-content { min-width: 0; }
.admin-page .main-content > .row { --bs-gutter-y: 24px; row-gap: 0; }
.admin-page .row > *, .admin-page .card, .admin-page form { min-width: 0; }
.admin-page .card { overflow-wrap: anywhere; }
.admin-page .header-title { max-width: 100%; line-height: 1.35; overflow-wrap: anywhere; }
.admin-page .form-control { min-width: 0; max-width: 100%; min-height: 46px; font-size: 16px; }
.admin-page .form-control::placeholder { color: #9fb5af; opacity: 1; }
.admin-page input[type=date] { color-scheme: dark; }
.admin-page textarea.form-control { min-height: 120px; }
.admin-page .form-label { line-height: 1.5; }
.admin-page .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: normal; }
.admin-page .table-responsive { max-width: 100%; border-radius: 10px; }
.admin-page .table { width: 100%; }
.admin-page .table td { overflow-wrap: anywhere; }
.admin-page .table td:last-child .btn { margin: 3px 1px; min-width: 44px; }
.admin-page .cash-pagination { flex-wrap: wrap; }
.admin-page .cash-pagination a { min-height: 44px; display: inline-flex; align-items: center; color: #f5d66b; }
.admin-page .photo-actions { flex-wrap: wrap; }
.admin-page #previewFoto { width: auto; max-width: 100% !important; object-fit: contain; }
.admin-page .cash-summary strong { font-size: clamp(1rem, 1.4vw, 1.25rem) !important; font-variant-numeric: tabular-nums; }
.admin-page .cash-summary { height: 100%; }
@media (min-width: 992px) and (max-width: 1199.98px) {
    .admin-page .main-content { padding: 28px; }
    .admin-page .header-title { font-size: 1.65rem; }
}
@media (max-width: 991.98px) {
    .admin-page .sidebar { position: sticky; top: 0; bottom: auto; width: 100%; min-height: 0; padding: 12px 16px !important; max-height: 85dvh; z-index: 200; border-right: 0; border-bottom: 1px solid var(--glass-border); background: #001e19; }
    .admin-page .sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 !important; text-align: left !important; }
    .admin-page .brand-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .admin-page .brand-identity > i { font-size: 1.6rem; margin: 0 !important; }
    .admin-page .brand-details { min-width: 0; }
    .admin-page .brand-details h5 { font-size: .9rem; margin: 0 0 3px; }
    .admin-page .brand-details small { display: block; font-size: .75rem; line-height: 1.3; }
    .admin-page .mobile-menu-toggle { display: inline-flex; flex-shrink: 0; padding: 8px 12px; color: #f5d66b; border: 1px solid #877530; border-radius: 10px; background: transparent; }
    .admin-page .sidebar .nav { display: none; margin-top: 14px; }
    .admin-page .sidebar.is-open .nav { display: flex; }
    .admin-page .sidebar .nav-link { margin-bottom: 4px; padding: 12px 14px; min-height: 46px; }
    .admin-page .sidebar .nav .my-3 { margin-top: 8px !important; margin-bottom: 8px !important; }
    .admin-page .sidebar .nav .mt-4 { margin-top: 8px !important; }
    .admin-page .main-content { margin-left: 0; padding: 24px 20px; }
}
@media (max-width: 600px) {
    .admin-page .main-content { padding: 22px 14px max(24px, env(safe-area-inset-bottom)); }
    .admin-page .header-title { font-size: 1.45rem; margin-bottom: 20px !important; }
    .admin-page .main-content .card.p-4 { padding: 18px !important; border-radius: 18px; }
    .admin-page .main-content > .row { --bs-gutter-y: 18px; row-gap: 0; }
    .admin-page .main-content .row { --bs-gutter-x: 16px; }
    .admin-page .main-content > .row.cash-grid { --bs-gutter-y: 12px; }
    .admin-page .cash-grid > * { width: 100%; }
    .admin-page .cash-summary { flex-direction: row; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; }
    .admin-page .cash-summary strong { margin-top: 0 !important; font-size: 1.05rem !important; }
    .admin-page .form-label { font-size: .75rem; letter-spacing: .6px; }
    .admin-page input[type=file] { font-size: 14px; }
    .admin-page .photo-actions > .btn { flex: 1; }
    .admin-page #transaksiForm > button { width: 100%; }
    /* JS adds labels from the actual column headings; without JS use native scrolling. */
    .admin-page .table.mobile-ready { display: block; margin-bottom: 0; }
    .admin-page .table.mobile-ready thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .admin-page .table.mobile-ready tbody { display: grid; gap: 12px; }
    .admin-page .table.mobile-ready tr { display: block; border: 1px solid rgba(212,175,55,.3); border-radius: 12px; padding: 6px 12px; background: rgba(0,0,0,.16); }
    .admin-page .table.mobile-ready td { display: grid; grid-template-columns: minmax(75px, 32%) minmax(0,1fr); align-items: start; gap: 12px; padding: 10px 0; text-align: left !important; white-space: normal !important; border-bottom-color: rgba(255,255,255,.08); font-size: .9rem; }
    .admin-page .table.mobile-ready td::before { content: attr(data-label); font-size: .78rem; font-weight: 600; color: #d6c584; padding-top: 2px; }
    .admin-page .table.mobile-ready td:last-child { border-bottom: 0; }
    .admin-page .table.mobile-ready td[colspan] { display: block; }
    .admin-page .table.mobile-ready td[colspan]::before { content: none; }
    .admin-page .table.mobile-ready .cell-value { min-width: 0; overflow-wrap: anywhere; }
}

/* Login remains scrollable with the mobile keyboard open. */
.login-page { min-height: 100vh; min-height: 100dvh; height: auto; padding: max(24px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom)); }
.login-page .login-card { margin: auto; }
.login-page input { font-size: 16px; min-height: 48px; }
.login-page button { min-height: 48px; }
@media (max-width: 600px) {
    .login-page .container { padding: 0 16px; }
    .login-page .login-card { padding: 28px 22px; border-radius: 18px; }
}
@media (max-height: 500px) { .login-page { align-items: flex-start; } }

/* Phone/tablet display: vertically scrollable cards, all sections visible. */
.display-page .logo-text, .display-page .logo-text > div, .display-page .p-teks-wrapper { min-width: 0; }
@media (max-width: 1199.98px) {
    .display-page { height: auto; min-height: 100vh; min-height: 100dvh; overflow: auto; background-attachment: scroll; }
    .display-page::after { position: fixed; }
    .display-page .top-header { height: auto; min-height: 100px; padding: 20px 24px; gap: 20px; }
    .display-page .logo-text h1 { font-size: clamp(1.2rem, 3vw, 1.8rem); letter-spacing: 1px; overflow-wrap: anywhere; }
    .display-page .logo-text p { font-size: .8rem; letter-spacing: .8px; overflow-wrap: anywhere; }
    .display-page .clock-container { flex-shrink: 0; }
    .display-page #clock { font-size: 1.8rem; }
    .display-page #date { font-size: .8rem; }
    .display-page .slide-area { height: auto; display: grid; gap: 20px; padding: 24px 20px; }
    .display-page .slide { display: block; padding: 0; animation: none; min-width: 0; }
    .display-page .glass-card { padding: 24px; }
    .display-page .title-gold { font-size: 1.5rem; line-height: 1.4; }
    .display-page .kas-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .display-page .kas-box { min-width: 0; }
    .display-page .text-success { color: #63d497 !important; }
    .display-page .text-danger { color: #ff858a !important; }
    .display-page .kas-box h3, .display-page .kas-total h1 { overflow-wrap: anywhere; }
    .display-page .bagan-row, .display-page .level-3-wrap { flex-wrap: wrap !important; gap: 14px; }
    .display-page .org-card, .display-page .level-3-wrap .org-card { min-width: 0; flex: 1 1 240px; max-width: 100%; }
    .display-page .p-nama, .display-page .p-jabatan { overflow-wrap: anywhere; }
    .display-page .prayer-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
    .display-page .prayer-card { min-width: 0; }
    .display-page .prayer-card.next { transform: none; }
    .display-page .footer-news { position: relative; height: auto; min-height: 64px; align-items: stretch; margin-bottom: calc(80px + env(safe-area-inset-bottom)); }
    .display-page .news-label { height: auto; padding: 12px 20px; font-size: 1rem; }
    .display-page marquee { min-width: 0; align-self: center; font-size: 1.15rem; }
    .display-page .float-btn { bottom: calc(16px + env(safe-area-inset-bottom)); width: 48px; height: 48px; color: #f5d66b; background: #002d24; border-color: #d4af37; }
    .display-page .btn-admin { right: 18px; }
    .display-page .btn-fullscreen { left: 18px; }
    .display-page .adzan-content { max-width: calc(100% - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 32px 24px; border-radius: 24px; }
    .display-page .adzan-waktu { font-size: clamp(1.4rem,5vw,2.5rem); letter-spacing: 3px; overflow-wrap: anywhere; }
    .display-page .adzan-pesan { font-size: 1.8rem; padding: 12px 24px; }
}
@media (max-width: 600px) {
    .display-page .top-header { flex-direction: column; align-items: stretch; padding: 20px 16px; gap: 18px; }
    .display-page .logo-text { align-items: flex-start !important; }
    .display-page .logo-text > i { font-size: 1.6rem; margin-right: 10px !important; margin-top: 4px; }
    .display-page .logo-text h1 { font-size: 1.25rem; }
    .display-page .logo-text p { font-size: .75rem; line-height: 1.6; margin-top: 6px; }
    .display-page .clock-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
    .display-page #clock { font-size: 1.65rem; }
    .display-page #date { font-size: .8rem; text-align: left; }
    .display-page .slide-area { padding: 18px 12px; gap: 18px; }
    .display-page .glass-card { padding: 20px 16px; border-radius: 18px; }
    .display-page .title-gold { font-size: 1.25rem; margin-bottom: 16px; }
    .display-page .badge { white-space: normal; line-height: 1.7; max-width: 100%; font-size: .8rem !important; }
    .display-page .kas-grid { grid-template-columns: minmax(0,1fr); gap: 10px; margin-bottom: 12px; }
    .display-page .kas-box { padding: 14px; }
    .display-page .kas-box h3 { font-size: 1.2rem; }
    .display-page .kas-total { padding: 18px 10px; }
    .display-page .kas-total h1 { font-size: clamp(1.25rem,5.6vw,1.9rem); }
    .display-page .kas-total h5 { font-size: .75rem; letter-spacing: 1px; }
    .display-page .bagan-row { gap: 12px; }
    .display-page .org-card, .display-page .level-3-wrap .org-card { flex-basis: 100%; padding: 12px; gap: 10px; }
    .display-page .bagan-wrapper { gap: 20px; }
    .display-page .p-foto-wrapper { width: 45px; height: 45px; }
    .display-page .p-jabatan { font-size: .7rem; }
    .display-page .p-nama { font-size: .9rem; line-height: 1.5; }
    .display-page .theme-jumat .col-4 { width: 100%; }
    .display-page .theme-jumat > h5 { font-size: .9rem !important; padding: 10px 14px !important; line-height: 1.6; }
    .display-page .jumat-box { padding: 18px 14px; }
    .display-page .jumat-title { font-size: .85rem; }
    .display-page .jumat-name { font-size: 1.2rem; line-height: 1.5; }
    .display-page .prayer-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .display-page .prayer-card { padding: 16px 8px; border-radius: 14px; }
    .display-page .prayer-card h5 { font-size: .8rem; letter-spacing: .3px; }
    .display-page .prayer-card h2 { font-size: 1.6rem; }
    .display-page .next-badge { font-size: .6rem; padding: 4px 6px; letter-spacing: .2px; }
    .display-page #shalat-lokasi { font-size: .85rem !important; overflow-wrap: anywhere; }
    .display-page .news-label { padding: 12px; font-size: .8rem; letter-spacing: .4px; flex-shrink: 0; }
    .display-page marquee { font-size: 1rem; }
    .display-page .adzan-title { font-size: .95rem; letter-spacing: 1px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .display-page .slide { animation: none; }
}

/* Application identity and installation entry points */
.admin-page .brand-logo { width:64px; height:64px; border-radius:16px; margin-bottom:14px; }
.login-page .install-login-link { display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:16px;font-size:.9rem;color:#005c49;text-align:center; }
.display-page .display-logo { flex-shrink:0;border-radius:14px; }
.display-page .btn-install { right:85px;width:auto;min-width:64px;padding:0 12px;border-radius:24px;font-size:.9rem; }
@media(max-width:991.98px) { .admin-page .brand-logo {width:38px;height:38px;border-radius:10px;margin-bottom:0;} }
@media(max-width:600px) { .display-page .display-logo {width:42px;height:42px;border-radius:10px;margin-right:10px!important;} .display-page .btn-install {right:80px;} }