/* Custom Styles for TIKET-KU | Portal Maritim Executive & Premium */

:root {
    --primary: #0F172A;
    --primary-dark: #020617;
    --primary-teal: #0D9488;
    --primary-accent: #D97706;
    --accent: #F97316;
    --accent-hover: #EA580C;
    --sidebar-width: 260px;
    --header-height: 72px;
}

/* Base Smooth Styling & Mobile UX */
html, body {
    scroll-behavior: smooth;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Mencegah seleksi teks secara tak sengaja pada UI */
.no-select {
    user-select: none;
    -webkit-user-select: none;
}
input, textarea {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Absolute Luxury Background Overlay */
body,
#main-app,
#main-content-area,
#section-admin,
#section-kelola-speedboat,
#section-tambah-speedboat,
#section-kelola-jadwal,
#section-tambah-jadwal-single,
#section-buat-jadwal-bulk,
#section-kelola-promo,
#section-kelola-iklan,
#section-tambah-iklan,
#section-kelola-pengguna,
#section-kelola-kapten,
#section-kelola-agen,
#section-kelola-pelabuhan,
#section-tambah-pelabuhan,
#section-dashboard-agen,
#section-dashboard-dishub,
#section-dashboard-kapten,
#section-laporan-manifest {
    background-color: #CBD5E1 !important;
    background-image: 
        url('https://i.imgur.com/FX4mvZC.png'),
        radial-gradient(at 0% 0%, rgba(13, 148, 136, 0.12) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(30, 58, 138, 0.12) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(217, 119, 6, 0.08) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(15, 23, 42, 0.1) 0px, transparent 50%) !important;
    background-size: cover, auto, auto, auto, auto !important;
    background-position: center center, center, center, center, center !important;
    background-repeat: no-repeat, repeat, repeat, repeat, repeat !important;
    background-attachment: fixed !important;
}

/* Glassmorphism Design Tokens */
.glass-card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.08), 0 0 15px rgba(255, 255, 255, 0.6) inset !important;
    border-radius: 1.5rem !important;
}

.glass-card-dark {
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.3) !important;
    border-radius: 1.5rem !important;
}

.glass-header {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* Premium Gradients */
.gradient-ocean {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0d9488 100%) !important;
}

.gradient-gold {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
}

.gradient-teal {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #0f766e 100%) !important;
}

.gradient-emerald {
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #047857 100%) !important;
}

/* Glow Effects */
.glow-teal {
    box-shadow: 0 8px 25px -4px rgba(13, 148, 136, 0.35) !important;
}

.glow-amber {
    box-shadow: 0 8px 25px -4px rgba(217, 119, 6, 0.35) !important;
}

.glow-indigo {
    box-shadow: 0 8px 25px -4px rgba(30, 58, 138, 0.35) !important;
}

.glow-emerald {
    box-shadow: 0 8px 25px -4px rgba(16, 185, 129, 0.35) !important;
}

/* Interactive Card Elevate */
.hover-lift {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease !important;
}

.hover-lift:hover {
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow: 0 25px 45px -12px rgba(15, 23, 42, 0.12) !important;
}

/* Animations */
@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.animate-float {
    animation: float 3.5s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.shimmer-badge {
    position: relative;
    overflow: hidden;
}

.shimmer-badge::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    animation: shimmer 3s infinite;
}

/* Scrollbar Customization */
.custom-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.5);
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 9999px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Drawer Transitions */
.drawer {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(100%);
    box-shadow: -15px 0 35px rgba(15, 23, 42, 0.15);
}

.drawer.open {
    transform: translateX(0);
}

.overlay {
    transition: opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

.overlay.active {
    opacity: 0.5;
    pointer-events: auto;
}

/* Leaflet Container Overrides */
.leaflet-container {
    font-family: inherit !important;
    background-color: #cbd5e1 !important;
}

.leaflet-popup-content-wrapper {
    border-radius: 1.25rem !important;
    padding: 0.5rem !important;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.leaflet-popup-tip-container {
    display: none !important;
}

/* Card Hover States */
.hover-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -5px rgba(15, 23, 42, 0.08);
}

/* Responsive Hide for Number Inputs */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

input[type="number"] { 
    -moz-appearance: textfield; 
}

/* Live tracking markers custom style */
.boat-marker {
    background: transparent;
    border: none;
}

.boat-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--primary-teal);
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    box-shadow: 0 6px 15px rgba(13, 148, 136, 0.4);
    transition: transform 0.2s ease;
}

.boat-icon-container.moving {
    animation: float 2s ease-in-out infinite;
}

.boat-icon-container.selected {
    background-color: #f97316 !important;
    box-shadow: 0 6px 18px rgba(249, 115, 22, 0.5) !important;
    transform: scale(1.2);
    border-color: #fff;
    z-index: 1000 !important;
}

.boat-icon-container.sos {
    background-color: #ef4444 !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.8) !important;
    border-color: #fff;
    z-index: 1001 !important;
    animation: sos-pulse 0.8s ease-in-out infinite alternate !important;
}

@keyframes sos-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.3); }
}

/* ==========================================
   ULTRA-SHEER SEE-THROUGH GLASS RADAR UI
   ========================================== */
.glass-panel {
    background: rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
    backdrop-filter: blur(8px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
}

.glass-card-inner {
    background: rgba(255, 255, 255, 0.05) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.glass-card-inner:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.glass-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.glass-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

.glass-item-normal {
    background: rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.glass-item-normal:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: #0d9488 !important;
}

.glass-item-selected {
    background: rgba(255, 247, 237, 0.18) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    border: 1.5px solid rgba(249, 115, 22, 0.9) !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25) !important;
}

.glass-item-sos {
    background: rgba(254, 242, 242, 0.20) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    border: 1.5px solid rgba(239, 68, 68, 0.9) !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25) !important;
}

/* Explicit Layout Positioning for Tracking Overlay Elements */
#tracking-bottom-sheet {
    position: fixed !important;
    bottom: 105px !important;
    left: 14px !important;
    right: 14px !important;
    max-height: calc(100vh - 220px) !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

@media (min-width: 640px) {
    #tracking-bottom-sheet {
        bottom: 117px !important;
        left: auto !important;
        right: 24px !important;
        width: 384px !important;
    }
}

@media (min-width: 1024px) {
    #tracking-bottom-sheet {
        bottom: 24px !important;
        left: auto !important;
        right: 24px !important;
        width: 384px !important;
    }
}

#tracking-top-panel {
    position: fixed !important;
    top: 84px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 1002 !important;
}

@media (min-width: 640px) {
    #tracking-top-panel {
        top: 88px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        width: 384px !important;
    }
}

#tracking-floating-tools {
    position: fixed !important;
    top: 84px !important;
    right: 14px !important;
    z-index: 1001 !important;
}

@media (min-width: 640px) {
    #tracking-floating-tools {
        top: 88px !important;
        right: 24px !important;
    }
}

/* Custom Modern Leaflet Controls (Top-Left Clean Placement) */
.leaflet-top.leaflet-left {
    top: 84px !important;
    left: 14px !important;
    z-index: 1001 !important;
}

@media (min-width: 640px) {
    .leaflet-top.leaflet-left {
        top: 88px !important;
        left: 24px !important;
    }
}

.leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin: 0 !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    background-color: #ffffff !important;
    color: #1e293b !important;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
    transition: all 0.2s ease !important;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
    background-color: #f8fafc !important;
    color: #0d9488 !important;
}

/* Immersive Mode Overrides */
body.radar-immersive #tracking-bottom-sheet {
    bottom: 16px !important;
}
body.radar-immersive #tracking-top-panel {
    top: 16px !important;
}
body.radar-immersive #tracking-floating-tools {
    top: 16px !important;
}
body.radar-immersive .leaflet-top.leaflet-left {
    top: 16px !important;
}

/* Clean Bottom Nav */
#floating-bottom-nav {
    background: rgba(15, 23, 42, 0.75) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4) !important;
}

/* Clean Header */
#app-header {
    background: rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(12px) saturate(200%) !important;
    backdrop-filter: blur(12px) saturate(200%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
    
    /* Immersive Edge-to-Edge Safe Area Support */
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: calc(72px + env(safe-area-inset-top, 0px)) !important;
}

/* Edge-to-Edge Safe Area Adjustments */
#floating-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

#tracking-top-panel {
    top: calc(84px + env(safe-area-inset-top, 0px)) !important;
}
@media (min-width: 640px) {
    #tracking-top-panel {
        top: calc(88px + env(safe-area-inset-top, 0px)) !important;
    }
}

#notification-modal-popover {
    top: calc(70px + env(safe-area-inset-top, 0px)) !important;
}

#tracking-bottom-sheet {
    bottom: calc(105px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 640px) {
    #tracking-bottom-sheet {
        bottom: calc(117px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
@media (min-width: 1024px) {
    #tracking-bottom-sheet {
        bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* SVG Chart Line Animation */
.chart-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 2s ease-out forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Captain Dark Mode Override */
.dark-mode-captain.bg-slate-50,
.dark-mode-captain {
    background-color: #0f172a !important; 
    color: #e2e8f0 !important;
}
.dark-mode-captain .bg-white, 
.dark-mode-captain .bg-slate-50,
.dark-mode-captain .bg-slate-50\/50,
.dark-mode-captain .bg-slate-100 {
    background-color: #1e293b !important; 
    border-color: #334155 !important;
}
.dark-mode-captain .text-slate-800, 
.dark-mode-captain .text-slate-700 {
    color: #f8fafc !important; 
}
.dark-mode-captain .border,
.dark-mode-captain .border-slate-100,
.dark-mode-captain .border-slate-200 {
    border-color: #334155 !important;
}
.dark-mode-captain .text-slate-400,
.dark-mode-captain .text-slate-500 {
    color: #94a3b8 !important;
}
.dark-mode-captain .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}
.dark-mode-captain .text-emerald-600 {
    color: #34d399 !important;
}
.dark-mode-captain .bg-teal-50 {
    background-color: rgba(20, 184, 166, 0.1) !important;
}
.dark-mode-captain .text-teal-600 {
    color: #2dd4bf !important;
}

/* High Contrast Dark Slate Override for Muted Text & Labels */
.text-slate-400 {
    color: #334155 !important; /* Dark Slate Grey (Slate-700) for maximum legibility */
}

.text-slate-300 {
    color: #475569 !important; /* Dark Slate Grey (Slate-600) */
}

.text-slate-500 {
    color: #1e293b !important; /* Deep Slate (Slate-800) */
}

/* Sidebar Nav Links High Contrast (Dark Navy Fix) */
#admin-sidebar {
    color: #cbd5e1 !important;
}

#admin-sidebar nav button:not(.bg-gradient-to-r) {
    background-color: transparent !important;
    color: #cbd5e1 !important;
}

#admin-sidebar nav button:not(.bg-gradient-to-r) i {
    color: #94a3b8 !important;
}

#admin-sidebar nav button:not(.bg-gradient-to-r):hover,
#admin-sidebar nav button:not(.bg-gradient-to-r):hover i {
    color: #ffffff !important;
    background-color: rgba(30, 41, 59, 0.7) !important;
}

/* Active tab inside sidebar (Dark Teal Gradient Pill with Pure White Text) */
#admin-sidebar nav button.bg-gradient-to-r,
#admin-sidebar nav button.bg-gradient-to-r * {
    background-image: linear-gradient(to right, #0d9488, #0f766e) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

#admin-sidebar .text-teal-400 {
    color: #2DD4BF !important;
}

#admin-sidebar .text-amber-400 {
    color: #FBBF24 !important;
}

#admin-sidebar .text-rose-400 {
    color: #FB7185 !important;
}

#admin-sidebar p.text-slate-500 {
    color: #94A3B8 !important;
}

[class*="bg-slate-900"] .text-slate-400,
[class*="bg-slate-800"] .text-slate-400,
[class*="bg-slate-950"] .text-slate-400,
.glass-card-dark .text-slate-400,
#floating-bottom-nav .text-slate-400,
#notification-modal-popover .text-slate-400 {
    color: #cbd5e1 !important;
}

[class*="bg-slate-900"] .text-slate-300,
[class*="bg-slate-800"] .text-slate-300,
[class*="bg-slate-950"] .text-slate-300,
.glass-card-dark .text-slate-300,
#floating-bottom-nav .text-slate-300,
#notification-modal-popover .text-slate-300 {
    color: #e2e8f0 !important;
}

[class*="bg-slate-900"] .text-slate-500,
[class*="bg-slate-800"] .text-slate-500,
[class*="bg-slate-950"] .text-slate-500,
.glass-card-dark .text-slate-500,
#floating-bottom-nav .text-slate-500,
#notification-modal-popover .text-slate-500 {
    color: #94a3b8 !important;
}


/* Offset for fixed transparent header */
main#main-content-area > section:not(#section-beranda):not(#section-tracking):not(#section-tiket-berhasil) {
    
}

/* Interactive Port Map Expander & Fullscreen Mode */
#port-map-section-wrapper.is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    z-index: 99999 !important;
    background: #0f172a !important;
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%) !important;
    padding: 1rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#port-map-section-wrapper.is-fullscreen .port-map-normal-header {
    display: none !important;
}

#port-map-section-wrapper.is-fullscreen .port-map-fullscreen-header {
    display: flex !important;
}

#port-map-section-wrapper.is-fullscreen #port-form-map {
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    border-radius: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

#port-map-section-wrapper.is-fullscreen #port-map-search-results {
    max-height: 380px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
}

#port-map-section-wrapper.is-fullscreen input#port-map-search-input {
    background-color: rgba(255, 255, 255, 0.95) !important;
}


/* CAPACITOR NATIVE OVERRIDES */
body.capacitor-native #app-header {
    padding-top: 48px !important;
    height: 120px !important;
}
body.capacitor-native main#main-content-area > section:not(#section-beranda):not(#section-tracking):not(#section-tiket-berhasil) {
    
}


body.capacitor-native .leaflet-top,
body.capacitor-native #tracking-floating-tools,
body.capacitor-native #tracking-top-panel {
    top: 135px !important;
}
body.capacitor-native #section-beranda > div:first-child {
    padding-top: 192px !important;
}


.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }