/* =============================================
   PesanMu — Custom CSS & Design Tokens
   Tailwind (CDN) mengurus utility classes.
   File ini: design tokens, aksesibilitas global,
   dan komponen kecil yang sulit ditangani Tailwind.
   ============================================= */

/* ---------------------------------------------
   Design tokens (CSS variables)
   --brand di-set oleh partial tailwind_theme.php agar mengikuti
   tema aktif. JANGAN definisikan --brand di :root file ini — file ini
   dimuat setelah tema sehingga akan menimpanya (fokus jadi salah warna).
   Fallback cukup lewat var(--brand, #2563eb).
--------------------------------------------- */
:root {
    --radius-sm: 0.5rem;   /* 8px  — kontrol kecil */
    --radius:    0.75rem;  /* 12px — tombol & input */
    --radius-lg: 1rem;     /* 16px — kartu */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow:    0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10);
    --ring:      color-mix(in srgb, var(--brand, #2563eb) 45%, transparent);
}

/* Sembunyikan elemen Alpine sebelum di-init */
[x-cloak] { display: none !important; }
[hidden] { display: none !important; }

/* ---------------------------------------------
   Skip link — muncul hanya saat difokus keyboard (WCAG 2.4.1)
--------------------------------------------- */
.skip-link {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 1000;
    background: #111827;
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* Teks khusus pembaca layar */
.sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Ikon garis (Heroicons v1) yang tidak menyetel stroke-width terlihat terlalu
   tipis/pudar. Beri ketebalan & ujung membulat default — tidak berlaku untuk
   SVG di dalam template halaman user (#page-content). */
svg[stroke="currentColor"]:not(#page-content svg) {
    stroke-linecap: round;
    stroke-linejoin: round;
}
svg[stroke="currentColor"]:not([stroke-width]):not(#page-content svg) {
    stroke-width: 1.8;
}

/* Inter font family */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }

/* Line clamp untuk text overflow */
.line-clamp-1,
.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* Transisi halus */
*, *::before, *::after {
    transition-property: background-color, border-color, color, opacity, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
}

/* Override transition untuk transform (hover effect) */
.group:hover .group-hover\:scale-105 { transition-duration: 300ms; }

/* ---------------------------------------------
   Aksesibilitas — focus visible (theme-aware)
--------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--brand, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Jangan tampilkan outline saat klik mouse pada elemen non-keyboard */
:focus:not(:focus-visible) { outline: none; }

/* Fokus konsisten untuk kontrol form */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand, #2563eb);
    outline-offset: 2px;
}

/* File input styling */
input[type="file"] { cursor: pointer; }

/* Color picker */
input[type="color"] {
    padding: 2px;
    cursor: pointer;
}

/* Audio player */
audio {
    width: 100%;
    height: 32px;
}

/* Shade abu-abu antara 700 dan 800 (tidak ada di palet Tailwind bawaan).
   WAJIB di-scope ke .dark — tanpa itu kelas dark:* ikut aktif di mode terang
   dan membuat baris header tabel jadi gelap. */
.dark .dark\:bg-gray-750 { background-color: #2d3748; }
.dark .dark\:hover\:bg-gray-750:hover { background-color: #2d3748; }

/* Hide scrollbar tapi tetap bisa scroll (mobile tab pills) */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Card hover shadow */
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------
   Touch target minimum di perangkat sentuh
   (WCAG 2.5.5) — tanpa mengganggu tampilan desktop
--------------------------------------------- */
@media (pointer: coarse) {
    button, a[role="button"], [type="submit"], [type="button"],
    .touch-target {
        min-height: 40px;
    }
    /* Tombol teks di dalam baris teks (mis. "Salin" di samping link): area sentuhnya
       diperluas lewat padding + margin negatif (kelas .tap-inline) agar baris tidak renggang */
    button.tap-inline {
        min-height: 0;
    }
}
.tap-inline {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: -10px;
    margin-bottom: -10px;
}

/* Landing page host - full screen */
#page-content { min-height: 100vh; }

/* Ruang untuk floating bar (hanya saat bar tampil, mis. preview template) */
body:has(.pesanmu-fab) { padding-bottom: 96px; }

/* Cegah overflow horizontal tak sengaja di seluruh halaman.
   Pakai 'clip' (bukan 'hidden') agar tidak membuat scroll container
   sehingga navbar position:sticky tetap berfungsi. */
body { overflow-x: clip; }

/* Animasi fade in */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.5s ease-out forwards; }

/* ---------------------------------------------
   Loading state tombol (double-submit guard)
--------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
.is-loading {
    opacity: .75;
    pointer-events: none;
    cursor: wait;
}
.btn-spinner {
    display: inline-block;
    width: .85em; height: .85em;
    margin-right: .45em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: spin .6s linear infinite;
}

/* ---------------------------------------------
   Hormati preferensi reduce-motion
--------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}