/* File: Web Stopwatch/style.css */
/* Updated: FINAL FIX - Nuclear Option for Zoom Button */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Tambahkan 'only' jika didukung browser, atau cukup 'light' */
    color-scheme: light only; 
    
    /* Paksa background dan text agar browser tidak bingung */
    background-color: #f9fafb !important;
    color: #1f2937 !important;
}

/* =========================================
   1. DASAR LAYOUT
   ========================================= */
html, body {
    background-color: #f9fafb;
    color: #1f2937;
    font-family: 'Inter', sans-serif;
    height: 100%; width: 100%;
    overflow: hidden;
    /* Mencegah overscroll pada HP */
    overscroll-behavior: none;
}

/* =========================================
   2. SCROLLBAR & UTILS (UPDATED: THIN & SHARP)
   ========================================= */
::-webkit-scrollbar { width: 4px; height: 4px; } /* Lebih tipis dari 6px */
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 2px; /* Sudut tajam */
}
::-webkit-scrollbar-thumb:hover { background: #64748b; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* =========================================
   3. DOCK NAVIGATION (UPDATED: SHARP & CLEAN)
   ========================================= */
.dock-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%; 
    z-index: 100;
    
    /* Style Bar: Hapus shadow blurry, gunakan Border Tegas */
    background-color: rgba(255, 255, 255, 0.95); /* Sedikit transparan untuk kesan modern */
    backdrop-filter: blur(10px);
    border-top: 1px solid #d1d5db; /* Border lebih kontras (Gray-300) */
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: none; /* Hilangkan shadow agar bersih */
}

.dock-container.dock-scrolled-down {
    transform: none !important;
    opacity: 1 !important;
}

.dock-wrapper {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0.25rem 1rem 0 1rem !important; /* Padding dikurangi agar lebih tipis */
    margin-bottom: 0 !important;
    width: 100%;
    height: 3.5rem; /* Tinggi total dikurangi (sebelumnya 4rem) */
    
    display: flex;
    align-items: flex-end; 
    justify-content: space-around; 
    gap: 0; 
}

.dock-btn {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    width: auto;
    flex: 1;
    height: 3rem; /* Tombol lebih pendek */
    border-radius: 6px; /* Radius lebih kotak (sebelumnya 0.75rem) */
    color: #9ca3af; /* Gray-400 */
    background: transparent; 
    transition: all 0.15s ease-out;
}

.dock-btn:hover { 
    background-color: #f3f4f6; 
    color: #4b5563; 
}

.dock-btn.active-dock {
    color: #2563EB; 
    background: transparent;
    font-weight: 600; /* Font lebih tebal saat aktif */
}

/* Indikator aktif: Garis atas tajam sebagai ganti efek naik */
.dock-btn.active-dock {
    position: relative;
}
.dock-btn.active-dock::after {
    content: '';
    position: absolute;
    top: -4px; /* Menempel di border atas container */
    width: 20px;
    height: 2px;
    background-color: #2563EB;
    border-radius: 0 0 2px 2px;
}

.dock-btn.active-dock .dock-icon-container {
    transform: none; /* Hapus animasi naik agar UI tenang */
}

.dock-label { 
    font-size: 0.6rem; 
    font-weight: 500; 
    margin-top: 2px;
    letter-spacing: -0.01em; /* Teks lebih rapat/tajam */
}

/* Tombol Plus (+) Tengah - Lebih Flat & Tajam */
.dock-plus-wrapper {
    position: relative;
    top: -1.25rem; /* Posisi sedikit disesuaikan */
    margin-bottom: -1.25rem;
    z-index: 101;
}

.btn-plus-main {
    width: 3.25rem; 
    height: 3.25rem; 
    border-radius: 12px; /* Ganti lingkaran (50%) jadi Squircle (kotak tumpul) */
    background: #2563EB; /* Solid color, hapus gradient agar lebih 'clean' */
    border: 2px solid #f9fafb; /* Border luar lebih tipis (sebelumnya 4px) */
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: white; 
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3); /* Shadow lebih tajam/pendek */
    transition: transform 0.15s;
}

.btn-plus-main:active { transform: scale(0.95); }
.btn-plus-main:hover { background: #1d4ed8; box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4); }

/* Mobile Tweaks */
@media (max-width: 768px) {
    .dock-container { bottom: 0; } /* Reset bottom */
    .btn-plus-main { 
        width: 3rem; height: 3rem; 
        border-radius: 10px; /* Squircle di HP */
        transform: translateY(-0.75rem); 
    }
}

/* =========================================
   4. KALENDER WIDGET
   ========================================= */
#calendarContainer {
    display: flex; overflow-x: auto; gap: 12px; padding: 4px 4px 14px 4px;
    width: 100%; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.scroll-snap-align-center { scroll-snap-align: center; }

/* =========================================
   5. SISTEM FULLSCREEN KHUSUS (NUCLEAR FIX)
   ========================================= */

/* A. Container Utama */
.fullscreen-mode {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 99999 !important; /* Level Dewa */
    background-color: #ffffff !important;
    margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
}

/* B. Header Kartu */
.fullscreen-mode .card-header {
    flex-shrink: 0 !important;
    z-index: 100 !important;
    position: relative !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
    /* Beri padding kanan ekstra agar judul tidak menabrak tombol close */
    padding-right: 80px !important; 
    display: flex; align-items: center;
    min-height: 60px;
}

/* D. Konten Body */
.fullscreen-mode .card-body,
.fullscreen-mode #soapHistoryContainer,
.fullscreen-mode #calendarContainer,
.fullscreen-mode .chart-container,
.fullscreen-mode #tableSection .card-body {
    flex-grow: 1 !important;
    height: auto !important; max-height: none !important;
    overflow-y: auto !important; padding: 1.5rem !important;
    background-color: #fff !important;
    /* Padding bawah aman untuk HP */
    padding-bottom: max(5rem, env(safe-area-inset-bottom)) !important;
}

/* E. Fix Khusus Elemen */
.fullscreen-mode thead {
    position: sticky; top: 0; z-index: 10;
    background-color: #f9fafb; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.fullscreen-mode canvas {
    width: 100% !important; height: 100% !important; min-height: 400px !important;
}
/* Sembunyikan tombol lain jika perlu, tapi biarkan export dll tetap ada di flow normal */
.fullscreen-mode .card-header button:not([onclick*="toggleFullscreen"]) {
    position: static !important;
    z-index: 1 !important;
}

/* =========================================
   6. VIDEO CALL & VIP
   ========================================= */

/* --- UPDATE: MODE VIDEO CALL (JITSI) - MINIMIZED TOP --- */

/* 1. Container Modal Transparan */
#liveSessionModal.video-mode { 
    background: transparent !important; 
    pointer-events: none; /* Klik tembus ke video di belakangnya */
}

/* Sembunyikan Dock saat Modal dalam mode video call ATAU Jitsi Container Aktif */
#liveSessionModal.video-mode ~ .dock-container,
body:has(#liveSessionModal.video-mode) .dock-container,
body:has(#jitsi-container:not(.hidden)) .dock-container {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(100%); /* Geser ke bawah agar mulus */
    transition: all 0.4s ease;
}

/* Tambahan: Pastikan backdrop video call tidak terhalang */
#liveSessionModal.video-mode {
    z-index: 9999 !important;
}

/* 2. Header: Tetap terlihat tapi semi-transparan */
#liveSessionModal.video-mode #lsHeader { 
    pointer-events: auto; /* Header bisa diklik */
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(8px); 
    margin: 0 1rem; 
    border-radius: 0 0 1rem 1rem; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 3. Konten Utama (Timer): NAIK KE ATAS & MENGECIL */
#liveSessionModal.video-mode #lsBodyContent { 
    justify-content: flex-start !important; /* Pindah ke ATAS */
    padding-top: 1rem !important;           /* Jarak dari header */
    transform: scale(0.6);                  /* MENGECILKAN ukuran (60%) */
    transform-origin: top center;           /* Titik pengecilan dari atas tengah */
    gap: 1rem;                              /* Rapatkan jarak antar elemen */
}

/* 4. Pastikan Tombol Kontrol (Pause/Selesai) Bisa Diklik */
#liveSessionModal.video-mode button {
    pointer-events: auto; 
}

/* 5. Styling Teks agar terbaca di atas video gelap */
#liveSessionModal.video-mode #lsTimer { 
    color: #ffffff; 
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9); /* Bayangan teks kuat */
}

#liveSessionModal.video-mode #lsStatus { 
    color: #fbbf24; /* Kuning terang agar kontras */
    font-weight: bold;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    background: rgba(0,0,0,0.4);
    padding: 4px 12px;
    border-radius: 20px;
}

/* 6. Ring Progress dibuat lebih tipis/terang saat mode video */
#liveSessionModal.video-mode svg circle {
    stroke-width: 5;
    opacity: 0.8;
}
#liveSessionModal.video-mode #lsProgressRing {
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
}

/* --- VIP STYLES --- */
.gold-gradient-text { background: linear-gradient(to bottom, #ca8a04, #eab308, #ca8a04); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.luxury-card { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); border: 1px solid rgba(255, 215, 0, 0.3); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2); }
.shiny-border::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, #fbbf24, #fef3c7, #b45309); z-index: -1; border-radius: 1rem; opacity: 0.5; filter: blur(5px); }

/* --- ANIMATIONS & UTILS --- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-pulse-soft { animation: 2s infinite alternate; }
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.red-flag-check:checked { background-color: #ef4444; border-color: #ef4444; }

/* Mobile Tweaks */
@media (max-width: 768px) {
    .dock-container { bottom: 1.5rem; }
    .dock-btn { width: 2.75rem; }
    .btn-plus-main { width: 3rem; height: 3rem; transform: translateY(-1rem); }
    /* Pastikan fullscreen padding 0 */
    .fullscreen-mode { padding: 0 !important; }
}
/* Saat mode fullscreen aktif pada kartu history... */
.fullscreen-mode #logHistoryList {
    max-height: none !important;      /* Hapus batasan tinggi */
    height: auto !important;          /* Tinggi otomatis mengikuti isi */
    overflow-y: auto !important;      /* Aktifkan scroll */
    padding-bottom: 80px !important;  /* Ruang nafas di bawah agar tidak mentok */
}

/* FIX TOMBOL CLOSE KALENDER */
/* Sembunyikan tombol close secara default */
.fullscreen-close-btn {
    display: none; 
}

/* Munculkan tombol HANYA jika elemen induknya sedang mode fullscreen */
.fullscreen-mode .fullscreen-close-btn {
    display: flex !important; /* Paksa muncul */
    position: fixed !important; /* Tempel di layar */
    top: max(20px, env(safe-area-inset-top)) !important;
    right: 20px !important;
    z-index: 2147483647 !important; /* Paling depan */
    width: 45px !important;
    height: 45px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

/* Styling Tombol Geser Slider (Thumb) */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px; /* Lebih kecil */
    width: 18px;
    border-radius: 4px; /* Kotak dengan sudut sedikit tumpul (bukan bulat penuh) */
    background: #ffffff;
    border: 1px solid #9ca3af; /* Border tegas */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    margin-top: -7px; /* Sesuaikan posisi */
}

/* Khusus Firefox (Opsional, untuk kompatibilitas) */
input[type=range]::-moz-range-thumb {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* =========================================
   7. FIX FINAL KALENDER FULLSCREEN (GRID 7 KOLOM)
   ========================================= */

/* A. CONTAINER UTAMA: Hapus Flex, Gunakan Block */
.fullscreen-mode #calendarContainer {
    display: block !important; /* Reset dari flex */
    padding: 0 !important;
    overflow-y: auto !important;
    height: 100% !important;
}

/* B. HEADER INTERNAL (YANG BIKIN DOUBLE) */
/* Sembunyikan header yang digenerate oleh Javascript */
.fullscreen-mode .calendar-internal-header,
.fullscreen-mode #calendarContainer > div.flex.justify-between {
    display: none !important;
}

/* C. GRID KALENDER (YANG MEMANJANG KE BAWAH) */
/* Paksa Wrapper Hari menjadi Grid 7 Kolom */
.fullscreen-mode .calendar-grid-wrapper {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important; /* KUNCI: 7 Kolom Rata */
    gap: 8px !important; 
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* D. ITEM TANGGAL (KOTAK HARI) */
.fullscreen-mode .calendar-day-item {
    width: 100% !important;
    min-height: 100px !important;
    height: 100% !important;
    margin: 0 !important;
    
    /* Style Kotak */
    display: flex !important;
    flex-direction: column !important;
    /* UBAH DARI space-between KE flex-start */
    justify-content: flex-start !important; 
    
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    padding: 8px !important;
    box-shadow: none !important;
    overflow: visible !important; 
}

/* Efek Hover untuk interaksi tajam */
.fullscreen-mode .calendar-day-item:active {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
}

/* Pastikan container tombol di dalamnya tidak memaksa scroll */
.fullscreen-mode .calendar-day-item > div {
    overflow: visible !important;
}

/* E. HEADER NAMA HARI (SEN, SEL, RAB) */
.fullscreen-mode .calendar-day-names {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 16px;
}

/* F. ADJUSTMENT TEXT DI HP */
@media (max-width: 640px) {
    .fullscreen-mode .calendar-grid-wrapper { gap: 4px !important; padding: 8px !important; }
    .fullscreen-mode .calendar-day-item { min-height: 80px !important; font-size: 0.7rem !important; }
}

/* G. HEADER FULLSCREEN (YANG HARUS MUNCUL) */
.fullscreen-mode #fsCalendarHeader { display: flex !important; }
.fullscreen-mode .zoom-toggle-btn { display: none !important; }

/* =========================================
   8. HEADER TOGGLE (FOCUS MODE)
   ========================================= */
.header-collapsed {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    opacity: 0;
    overflow: hidden;
    margin-top: -1px; /* Hilangkan sisa garis pixel jika ada */
}

/* =========================================
   8. FIX KALENDER DOKTER FULLSCREEN (MOBILE SPLIT VIEW)
   ========================================= */

/* Pastikan saat mode fullscreen, container dokter menggunakan logika Flex dari JS */
.fullscreen-mode #doctorCalendarContainer {
    display: flex !important; /* Timpa display:block bawaan fullscreen-mode */
    flex-direction: column;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Pastikan internal header JS yang kita buat tetap muncul */
.fullscreen-mode #doctorCalendarContainer .flex {
    display: flex !important;
}

/* Pastikan grid kalender di dalam dokterContainer tidak dipaksa grid 7 kolom besar */
.fullscreen-mode #doctorCalendarContainer .grid {
    display: grid !important; 
    /* Biarkan JS mengatur cols-nya (mini grid), jangan ditimpa CSS global */
}

/* Tombol close fullscreen agar tidak tertutup header kalender */
.fullscreen-mode .zoom-toggle-btn {
    z-index: 50 !important;
    background-color: #ef4444 !important;
    color: white !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

/* Animasi untuk Peregangan Pintar */
@keyframes slowPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

.animate-slow-pulse {
    animation: slowPulse 3s infinite ease-in-out;
}

/* =========================================
   9. TIKTOK STYLE VIDEO PLAYER (FULL IMMERSIVE FIX)
   ========================================= */

/* Paksa View Explore untuk menutupi SELURUH layar (termasuk Dock & Header Global) */
#view-explore {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 200 !important; /* Di atas Dock (z-100) dan Header (z-40) */
    background-color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Container Scroll Video */
.tiktok-scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
    background-color: #000;
    
    /* Pastikan tidak ada padding yang menghalangi video full screen */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Slide Video Individu */
.tiktok-video-slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100%; /* Full Height 100vh */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #000;
}

/* Header Internal Explore (Upload & Tabs) - Agar mengapung di atas video */
#view-explore .absolute.top-0 {
    z-index: 210 !important; /* Paling atas, lebih tinggi dari video */
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%) !important;
    padding-top: max(1rem, env(safe-area-inset-top)); /* Aman untuk Poni HP */
}

/* Sembunyikan scrollbar */
.tiktok-scroll-container::-webkit-scrollbar {
    display: none;
}
.tiktok-scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- Tambahan untuk Video Player Controls --- */
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* Sesuaikan dengan rasio Shorts */
    height: 80vh;
}

.video-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 10000;
}

.control-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* =========================================
   10. PROFILE PAGE UTILS (MODERN UI)
   ========================================= */
/* Hilangkan marker panah default pada details/summary */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* Background Pattern Halus untuk Header Profil */
.bg-pattern-sparkle {
    background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.15) 1px, transparent 0);
    background-size: 20px 20px;
}

/* Elegan VIP Styles */

.animate-shimmer {
    background-size: 200% auto;
    animation: shimmer-gold 3s linear infinite;
}

@keyframes shimmer-gold {
    to {
        background-position: 200% center;
    }
}

/* Penyesuaian warna biru malam yang mewah */
.bg-vip-card {
    background: radial-gradient(circle at top left, #1e1b4b, #0f172a);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* Sentuhan emas untuk teks penting */
.gold-gradient-text {
    background: linear-gradient(to right, #fde047, #ca8a04, #fde047);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* =========================================
   11. NOTIFICATION ANIMATIONS (ADDON)
   ========================================= */

/* Animasi untuk Badge agar lebih heboh tapi sopan */
@keyframes bounce-subtle {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
.animate-bounce {
  animation: bounce-subtle 1s infinite;
}

/* Animasi Gradient Berjalan untuk Toast */
.toast-vip-bg {
    background-size: 200% auto;
    animation: gradientMove 3s linear infinite;
}
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}