/* =========================================================================
 * Al-Qur'an BM — UI Stylesheet (Full, Final)
 * Owner : IMS / UX
 * Ref   : UI-ALQ-APPCSS-01
 * ========================================================================= */

/* ------------------------------
   Theme Variables (Light Default)
   ------------------------------ */
:root{
  --pp-primary:#2d8cff;         /* Light blue brand */
  --pp-primary-600:#1c6dde;     /* Darker shade */
  --pp-bg:#f4f9ff;              /* App background */
  --pp-card:#ffffff;            /* Card surface */
  --pp-border:#e6f0ff;          /* Soft borders */
  --pp-muted:#6b7a90;           /* Muted text */
  --pp-text:#0b274a;            /* Primary text */

  /* Layout metrics */
  --pp-radius:16px;
  --pp-shadow:0 10px 24px rgba(0,56,112,.06);
  --pp-shadow-strong:0 10px 24px rgba(0,56,112,.22);

  /* Safe-area (for iOS notch) */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top,    0px);

  /* Controls */
  --ring: 0 0 0 .2rem rgba(45,140,255,.25);
}

/* Dark mode tokens */
@media (prefers-color-scheme: dark){
  :root{
    --pp-bg:#0e1726;
    --pp-card:#121e31;
    --pp-border:#22324a;
    --pp-text:#e7eefc;
    --pp-muted:#9ab0cb;
    --pp-shadow:0 10px 24px rgba(0,0,0,.35);
    --pp-shadow-strong:0 10px 24px rgba(0,0,0,.5);
  }
}

/* ------------------------------
   Base / Resets
   ------------------------------ */
html, body{ height:100%; }
body{
  margin:0; /* penting untuk hilangkan jalur putih atas mobile */
  background:
    radial-gradient(1000px 600px at 10% -10%, #e6f1ff 0%, transparent 60%),
    radial-gradient(800px 500px at 110% -10%, #eaf4ff 0%, transparent 60%),
    var(--pp-bg);
  font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--pp-text);
  /* Reserve space for bottom nav + audio + safe area */
  padding-bottom: calc(76px + var(--safe-bottom));
}

/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Focus visibility */
:focus { outline: none; }
:focus-visible { box-shadow: var(--ring) !important; outline: 0; }

/* Visually hidden but focusable (for skip link) */
.visually-hidden-focusable:not(:focus):not(:focus-within){
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* ------------------------------
   App Bar (final stable fix)
   ------------------------------ */
.appbar{
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  backdrop-filter: saturate(180%) blur(10px);
  background: linear-gradient(135deg, #5db2ff, #3a8bff);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.15);

  /* gunakan safe-area & fallback tetap untuk elak jalur putih */
  padding-top: env(safe-area-inset-top, 8px);
  padding-bottom: 6px;
}
.appbar::before{
  content:"";
  position: fixed;
  top:0; left:0; right:0;
  height: env(safe-area-inset-top, 8px);
  background: linear-gradient(135deg, #5db2ff, #3a8bff);
  z-index:-1; /* di bawah kandungan appbar */
}
@supports (padding: max(0px)) {
  .appbar{ padding-top: max(env(safe-area-inset-top, 8px), 8px); }
}
.appbar .brand{font-weight:700; letter-spacing:.3px;}
.appbar .search-wrap{display:none;}     /* dikawal oleh atribut [hidden] */
.search-wrap[hidden]{display:none!important;}
.search-input{border:none; border-radius:9999px; padding:.55rem .9rem;}
.search-input:focus{box-shadow:var(--ring);}

/* ------------------------------
   Layout Grid
   ------------------------------ */
.layout{
  display:grid; grid-template-columns: 320px 1fr; gap:16px;
}
@media (max-width: 992px){
  .layout{grid-template-columns: 1fr;}
}

/* ------------------------------
   Sidebar / Drawer
   ------------------------------ */
.sidebar{
  background:var(--pp-card);
  border:1px solid var(--pp-border);
  border-radius:var(--pp-radius); overflow:hidden;
  box-shadow: var(--pp-shadow);
  height: calc(100vh - 120px);
  position: sticky; top:88px;
}
@media (max-width: 992px){
  .sidebar{
    position: fixed; top:56px; left:0; right:0;
    height:auto; max-height:65vh; margin: 0 12px;
    transform: translateY(-110%);
    transition: transform .28s ease;
    z-index:1031;
  }
  .sidebar.open{ transform: translateY(0); }
}

.sidebar-header{
  padding:12px 12px 8px;
  border-bottom:1px solid var(--pp-border);
  background:linear-gradient(180deg, #fbfdff 0%, #fff 100%);
}
@media (prefers-color-scheme: dark){
  .sidebar-header{
    background: linear-gradient(180deg, #15233a 0%, #121e31 100%);
  }
}

.list-surah{ overflow:auto; max-height: calc(100% - 64px); }
.list-group-item{
  border:0; border-bottom:1px solid var(--pp-border);
  padding:.75rem .75rem; color: var(--pp-text);
  background: transparent;
}
.list-group-item:hover{ background: rgba(45,140,255,.06); }
.list-group-item.active{
  background: rgba(45,140,255,.12);
  color:#0b274a; font-weight:600;
}
@media (prefers-color-scheme: dark){
  .list-group-item.active{ color:#d7e6ff; }
}

/* ------------------------------
   Card
   ------------------------------ */
.card-soft{
  background:var(--pp-card);
  border:1px solid var(--pp-border);
  border-radius:var(--pp-radius);
  box-shadow: var(--pp-shadow);
}

/* ------------------------------
   Surah Header & Meta
   ------------------------------ */
.surah-meta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  color: var(--pp-muted);
}
.badge-soft{
  background: rgba(45,140,255,.12); color:#1c6dde;
  border-radius:9999px; padding:.2rem .6rem; font-size:.78rem;
}

/* ------------------------------
   Ayah (Teks Arab + Terjemahan)
   ------------------------------ */
.ayah{
  padding:18px 16px;
  border-bottom:1px dashed var(--pp-border);
  background: transparent;
}
.ayah:last-child{ border-bottom:0; }
.ayah:hover{ background: rgba(45,140,255,.04); }

.ayah .ar{
  font-family:'Amiri Quran', serif;
  font-size:26px; line-height:1.9;
  direction:rtl; text-align:right;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 576px){
  .ayah .ar{ font-size:22px; line-height:1.8; }
}

.ayah .ms{
  font-size:16px; color: var(--pp-text);
  margin-top:6px;
}
@media (max-width: 576px){
  .ayah .ms{ font-size:15px; }
}

/* Tools row (copy, share, link) */
.ayah .tools{ display:flex; gap:10px; align-items:center; margin-top:10px; }
.ayah .tools .btn{ border-radius:9999px; padding:.25rem .6rem; }

/* Nombor ayat */
.ayah .num{
  font-family:'Amiri Quran', serif;
  font-size:18px; padding:0 6px; border-radius:9999px;
  background:rgba(45,140,255,.08);
}

/* Ayat aktif (contoh: sedang dimainkan) */
.ayah.active{
  background: linear-gradient(0deg, rgba(45,140,255,.08), rgba(45,140,255,.08));
}

/* Penanda/Buku tanda */
.bookmark-active,
.ayah.bookmarked{
  position: relative;
  background: linear-gradient(0deg, rgba(255,206,84,.18), rgba(255,206,84,.18));
}
.bookmark-active::after,
.ayah.bookmarked::after{
  content:"★";
  position:absolute; right:10px; top:10px;
  font-size:14px; opacity:.8;
}

/* ------------------------------
   Bottom Tab Bar (Mobile)
   ------------------------------ */
.tabbar{
  position: fixed; bottom:0; left:0; right:0;
  background:#fff; border-top:1px solid var(--pp-border);
  height:56px; z-index:1032; display:flex;
  padding-bottom: var(--safe-bottom);
}
@media (prefers-color-scheme: dark){
  .tabbar{ background:#0f1a2b; }
}
.tabbar a{
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  font-size:12px; color:#36506b; text-decoration:none;
}
.tabbar a.active{ color: var(--pp-primary-600); }

/* ------------------------------
   Audio Footer (stabil mobile + desktop)
   ------------------------------ */
/* Mobile/Default: sticky agar tidak terapung di tengah */
.audio-wrap{
  position: sticky;
  bottom: 0;
  background: var(--pp-card);
  border-top: 1px solid var(--pp-border);
  padding: 6px 10px;
  box-shadow: 0 -4px 12px rgba(0, 56, 112, .06);
  border-radius: 12px 12px 0 0;
  z-index: 1032;
}
audio{ width:100%; height:40px; }

/* Desktop: fixed kemas di bawah viewport */
@media (min-width: 992px){
  .audio-wrap{
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 12px;
    border-radius: 14px;
    border:1px solid var(--pp-border);
    padding: 4px 8px;
    box-shadow: 0 10px 24px rgba(0,56,112,.08);
    background:#fff;
  }
  @media (prefers-color-scheme: dark){
    .audio-wrap{ background:#0f1a2b; }
  }
}

/* ------------------------------
   Floating Actions
   ------------------------------ */
.fab{
  position: fixed; right:16px; bottom: calc(128px + var(--safe-bottom));
  z-index:1032;
}
.btn-fab{
  border-radius:9999px; padding:.75rem .95rem;
  box-shadow: var(--pp-shadow-strong);
}

/* ------------------------------
   Skeleton / Loading
   ------------------------------ */
.skeleton{
  background: linear-gradient(90deg, #eef5ff 25%, #f6faff 37%, #eef5ff 63%);
  background-size:400% 100%; animation:shimmer 1.2s infinite; border-radius:10px;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ------------------------------
   Scrollbar (WebKit)
   ------------------------------ */
.list-surah::-webkit-scrollbar{ width: 10px; }
.list-surah::-webkit-scrollbar-thumb{
  background: rgba(45,140,255,.25); border-radius:9999px;
}
.list-surah::-webkit-scrollbar-track{ background: transparent; }

/* ------------------------------
   Print (ringkas)
   ------------------------------ */
@media print{
  .appbar, .tabbar, .audio-wrap, .fab, .sidebar { display:none !important; }
  body{ padding:0; background:#fff; }
  .card-soft{ border:0; box-shadow:none; }
}