/* ══════════════════════════════════════════════════════
   Content Plan Management — Mobile CSS
   Hanya berlaku di layar <= 767px
   SEMUA rule ada di dalam @media (max-width: 767px)
══════════════════════════════════════════════════════ */

/* ── CSS Variables (global, boleh di luar media query) ── */
:root {
  --mob-primary:       #10b981;
  --mob-primary-dark:  #059669;
  --mob-primary-light: #d1fae5;
  --mob-nav-height:    64px;
  --mob-topbar-height: 56px;
  --mob-shadow:        0 2px 12px rgba(0,0,0,.08);
  --mob-shadow-lg:     0 8px 32px rgba(0,0,0,.14);
}

/* Hide browser built-in password reveal (Edge/Chrome/IE) — global */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
}

/* ══════════════════════════════════════════
   NAV VISIBILITY — berlaku di semua ukuran
   (nav bars hidden by default, shown via JS)
══════════════════════════════════════════ */

/* Mobile nav: hidden by default everywhere */
#mobile-bottom-nav { display: none !important; }
#mob-filter-sheet  { display: none !important; }
#mob-cal-filter-btn { display: none !important; }
#mob-fab-popup     { display: none !important; }

/* Mobile nav tampil hanya setelah login (class ditambah JS) */
/* Tapi tidak pernah di desktop */
@media (min-width: 768px) {
  #mobile-bottom-nav,
  #mobile-bottom-nav.mob-nav-visible { display: none !important; }
  #mob-cal-filter-btn                { display: none !important; }
  #mob-fab-popup,
  #mob-fab-popup.fab-open            { display: none !important; }
}

/* Desktop nav: hidden di mobile apapun classnya */
@media (max-width: 767px) {
  #desktop-float-nav,
  #desktop-float-nav.nav-visible,
  #dnav-settings-float,
  #dnav-settings-float.nav-visible { display: none !important; }

  #mob-cal-filter-btn { display: flex !important; }
}

/* ══════════════════════════════════════════
   SEMUA RULE MOBILE — hanya di dalam media query
══════════════════════════════════════════ */
@media (max-width: 767px) {

  body { overflow-x: hidden; }

  /* ─── LOGIN PAGE ─────────────────────────── */

  /* Paksa hidden kalau sudah login */
  #login-page.hidden {
    display: none !important;
  }

  /* FAB popup: hidden by default */
  #mob-fab-popup {
    display: none !important;
  }

  /* Pastikan backdrop tersembunyi dengan class hidden */
  #mob-fab-backdrop.hidden {
    display: none !important;
  }

  #login-page {
    background: linear-gradient(160deg, #047857 0%, #059669 40%, #10b981 100%) !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 20px 40px !important;
  }

  /* Wrapper utama: transparent, column, centered */
  #login-page > div {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 400px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    align-items: center !important;
  }

  /* Panel kiri (desktop branding): sembunyikan total */
  #login-page > div > div:first-child {
    display: none !important;
  }

  /* Panel kanan (form): full width, transparent bg, teks putih */
  #login-page > div > div:last-child {
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Hapus pseudo-element drag handle */
  #login-page > div > div:last-child::before {
    display: none !important;
  }

  /* Logo mobile: sembunyikan versi desktop kecil */
  #login-page > div > div:last-child > div.md\\:hidden {
    display: none !important;
  }

  /* Icon kalender besar di tengah */
  #login-page::before {
    content: '' !important;
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 22px !important;
    margin: 0 auto 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='white'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm80 64c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16h96c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 36px !important;
    flex-shrink: 0 !important;
  }

  /* Judul "Selamat Datang" — putih, centered */
  #login-page > div > div:last-child > h2,
  #login-page h2 {
    color: #ffffff !important;
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
    width: 100% !important;
  }

  /* Subtitle — putih transparan, centered */
  #login-page > div > div:last-child > p:not(#login-error),
  #login-page p:not(#login-error) {
    color: rgba(255,255,255,0.85) !important;
    text-align: center !important;
    font-size: 13px !important;
    margin-bottom: 28px !important;
    width: 100% !important;
  }

  /* Form — full width */
  #login-form {
    width: 100% !important;
  }

  /* Label Username & Password — putih */
  #login-form label {
    color: rgba(255,255,255,0.9) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* Input boxes — putih dengan opacity */
  #login-form input[type="text"],
  #login-form input[type="password"] {
    background: rgba(255,255,255,0.15) !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    padding: 14px 14px 14px 44px !important;
    font-size: 15px !important;
    min-height: 52px !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* Override browser autofill yellow background */
  #login-form input:-webkit-autofill,
  #login-form input:-webkit-autofill:hover,
  #login-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(16,185,129,0.4) inset !important;
    caret-color: #ffffff !important;
  }

  #login-form input::placeholder {
    color: rgba(255,255,255,0.5) !important;
  }

  #login-form input:focus {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.6) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.15) !important;
  }

  /* Icon di dalam input */
  #login-form .relative > span i,
  #login-form .relative > button i {
    color: rgba(255,255,255,0.7) !important;
  }

  /* Checkbox remember me */
  #login-form #remember-me {
    accent-color: #fff !important;
    min-height: auto !important;
    width: 16px !important;
    height: 16px !important;
  }

  #login-form label[for="remember-me"] {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
  }

  /* Tombol login — putih dengan teks hijau */
  #login-btn {
    background: #ffffff !important;
    color: #059669 !important;
    font-weight: 800 !important;
    border-radius: 16px !important;
    padding: 15px !important;
    font-size: 15px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    min-height: auto !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  #login-btn:active {
    background: #f0fdf4 !important;
    transform: scale(0.98) !important;
  }

  /* Error message */
  #login-error {
    background: rgba(239,68,68,0.2) !important;
    border-color: rgba(239,68,68,0.4) !important;
    color: #fff !important;
  }

  /* Notice internal mobile */
  #login-form + p,
  #login-page p.md\\:hidden {
    color: rgba(255,255,255,0.6) !important;
  }

  #login-page p.md\\:hidden span {
    color: rgba(255,255,255,0.85) !important;
  }

  /* Copyright mobile — sedikit lebih redup */
  #login-page p.mob-copyright {
    color: rgba(255,255,255,0.45) !important;
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  /* ─── APP LAYOUT ─────────────────────────── */
  #app-layout {
    flex-direction: column !important;
    min-height: 100dvh !important;
  }

  #app-layout > aside { display: none !important; }

  #app-layout > main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* ─── TOP BAR ────────────────────────────── */
  #app-header {
    height: var(--mob-topbar-height) !important;
    padding: 0 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
  }

  #page-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    display: block !important;
    position: static !important;
    transform: none !important;
  }

  #header-avatar { width: 34px !important; height: 34px !important; font-size: 12px !important; }
  #header-nama   { font-size: 12px !important; }

  /* ─── SCROLLABLE CONTENT AREA ────────────── */
  #main-content-area {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 14px calc(var(--mob-nav-height) + 16px) !important;
    background: #f8fafc !important;
  }

  /* ─── BOTTOM NAV BAR ─────────────────────── */
  #mobile-bottom-nav.mob-nav-visible {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mob-nav-height) !important;
    background: #fff !important;
    border-top: 1px solid #f0f0f0 !important;
    align-items: stretch !important;
    z-index: 40 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }

  .mob-nav-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 6px 4px 4px !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mob-nav-btn i    { font-size: 18px !important; color: #9ca3af !important; line-height: 1 !important; }
  .mob-nav-btn span { font-size: 10px !important; font-weight: 600 !important; color: #9ca3af !important; line-height: 1 !important; white-space: nowrap !important; }

  .mob-nav-btn.active i,
  .mob-nav-btn.active span { color: var(--mob-primary) !important; }

  .mob-nav-btn.active::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 32px !important;
    height: 3px !important;
    background: var(--mob-primary) !important;
    border-radius: 0 0 4px 4px !important;
  }

  .mob-nav-fab {
    flex: 0 0 64px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  .mob-nav-fab button {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    background: var(--mob-primary) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(16,185,129,.4) !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 41 !important;
  }

  .mob-nav-fab button i { color: #fff !important; font-size: 18px !important; }

  /* ── FAB Popup menu ── */
  #mob-fab-popup {
    display: none !important;
    position: fixed !important;
    bottom: calc(var(--mob-nav-height) + 12px) !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: max-content !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 42 !important;
    align-items: center !important;
    transform-origin: bottom center !important;
  }

  /* Tampil saat FAB diklik */
  #mob-fab-popup.fab-open {
    display: flex !important;
    animation: fabPopIn .22s ease forwards !important;
  }

  @keyframes fabPopIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  /* Tiap item popup */
  .mob-fab-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 8px 16px 8px 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.18) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    -webkit-tap-highlight-color: transparent !important;
    min-height: auto !important;
  }

  .mob-fab-item:active {
    transform: scale(.96) !important;
  }

  .mob-fab-item-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .mob-fab-item-icon i {
    color: #fff !important;
    font-size: 14px !important;
  }

  .mob-fab-item-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    line-height: 1 !important;
  }

  /* ─── DASHBOARD ──────────────────────────── */
  #page-dashboard .grid.grid-cols-2 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #page-dashboard .grid.grid-cols-2 > div,
  #page-dashboard .grid.grid-cols-4 > div { padding: 14px 12px !important; }
  #page-dashboard .grid > div p.text-3xl { font-size: 26px !important; }

  /* ─── KALENDER ───────────────────────────── */
  /* Header bar kalender */
  #page-calendar > div:first-child {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* Layout utama: main + sidebar jadi column */
  #page-calendar > div.flex.items-start {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Sidebar filter: sembunyikan, pakai filter sheet */
  #page-calendar .flex-shrink-0 { display: none !important; }

  /* Calendar cells lebih kecil */
  #calendar-grid > div {
    height: 70px !important;
    padding: 2px !important;
    font-size: 9px !important;
  }

  #cal-month-view, #cal-list-view { width: 100% !important; }

  /* ─── PILAR KONTEN ───────────────────────── */
  #page-pillar .bg-white.rounded-xl.border { overflow-x: auto !important; }
  #page-pillar table { min-width: 480px !important; font-size: 12px !important; }
  #page-pillar table th, #page-pillar table td { padding: 10px 12px !important; }

  /* Detail pilar: stats 3-col tetap, konten list compact */
  #modal-pillar-detail .grid.grid-cols-3 { gap: 8px !important; }
  #modal-pillar-detail .grid.grid-cols-3 > div { padding: 10px 8px !important; }
  #modal-pillar-detail .grid.grid-cols-1.sm\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 12px !important; }
  #pillar-detail-content-list { max-height: 180px !important; }

  /* ─── ANALISIS ───────────────────────────── */
  #page-analisis .grid.grid-cols-2 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #page-analisis .grid > div { padding: 12px !important; }

  /* ─── SETTINGS & PROFILE ─────────────────── */
  #page-settings { max-width: 100% !important; }
  #page-settings .grid.grid-cols-1.md\:grid-cols-2 { grid-template-columns: 1fr !important; }
  #page-profile  { max-width: 100% !important; }
  #page-profile .grid.grid-cols-2 { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Form user management: 2-col → 1-col di mobile */
  #form-add-user .grid.grid-cols-2 { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Preview logo: ukuran lebih kecil di mobile */
  #logo-preview-box { width: 52px !important; height: 52px !important; }
  #favicon-preview-box { width: 28px !important; height: 28px !important; }

  /* ─── MODALS ─────────────────────────────── */
  .fixed.inset-0[id^="modal-"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .fixed.inset-0[id^="modal-"] > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
  }

  .fixed.inset-0[id^="modal-"] > div::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 4px !important;
    background: #d1d5db !important;
    border-radius: 2px !important;
    margin: 12px auto 0 !important;
    flex-shrink: 0 !important;
  }

  #modal-detail-content > div {
    flex-direction: column !important;
    height: auto !important;
    max-height: 94dvh !important;
  }

  #modal-detail-content > div > div.flex.flex-1 {
    flex-direction: column !important;
    overflow: visible !important;
  }

  #detail-info-panel {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  #status-timeline { overflow-x: auto !important; padding-bottom: 6px !important; }

  /* Modal form grid 2-col → 1-col */
  #modal-add-content .grid.grid-cols-2,
  #modal-siap-posting .grid.grid-cols-2,
  #modal-metrics .grid.grid-cols-2,
  #modal-add-pillar .grid.grid-cols-2,
  .fixed.inset-0[id^="modal-"] .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #form-add-account .grid.grid-cols-3,
  #form-add-platform .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Lightbox: fullscreen */
  #modal-lightbox { align-items: center !important; padding: 0 !important; }
  #modal-lightbox > div { border-radius: 0 !important; max-height: 100dvh !important; }
  #modal-lightbox > div::before { display: none !important; }

  /* Confirm & status info: stay centered */
  #modal-confirm, #modal-status-info {
    align-items: center !important;
    padding: 20px !important;
  }
  #modal-confirm > div     { border-radius: 20px !important; max-width: 320px !important; }
  #modal-status-info > div { border-radius: 20px !important; max-width: 340px !important; }
  #modal-confirm > div::before,
  #modal-status-info > div::before { display: none !important; }

  /* ─── TOAST ──────────────────────────────── */
  .toast {
    right: 50% !important;
    bottom: calc(var(--mob-nav-height) + 12px) !important;
    transform: translateX(50%) !important;
    left: auto !important;
  }

  .toast > div {
    font-size: 13px !important;
    padding: 10px 18px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
  }

  /* ─── INPUT TAP TARGETS ──────────────────── */
  input[type="text"],
  input[type="password"],
  input[type="date"],
  input[type="url"],
  input[type="number"],
  input[type="email"],
  select, textarea {
    font-size: 16px !important;
    min-height: 44px !important;
  }
  /* Custom date sub-inputs: JANGAN di-override sama sekali */
  .cd-sub {
    font-size: 15px !important;
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
  }

  button { min-height: 36px !important; }

  /* Input & select di dalam modal: lebih kompak */
  .fixed.inset-0[id^="modal-"] input[type="text"],
  .fixed.inset-0[id^="modal-"] input[type="date"],
  .fixed.inset-0[id^="modal-"] input[type="url"],
  .fixed.inset-0[id^="modal-"] input[type="number"],
  .fixed.inset-0[id^="modal-"] input[type="email"],
  .fixed.inset-0[id^="modal-"] select,
  .fixed.inset-0[id^="modal-"] textarea {
    font-size: 14px !important;
    min-height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Form di dalam modal-cal-settings (tambah akun/platform): compact */
  #form-add-account input,
  #form-add-account select,
  #form-add-platform input,
  #form-add-platform select {
    font-size: 13px !important;
    min-height: 34px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Tombol di dalam modal: sesuaikan */
  .fixed.inset-0[id^="modal-"] button {
    min-height: 32px !important;
  }

  /* ─── FILTER SHEET ───────────────────────── */
  #mob-filter-sheet.open {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.5) !important;
    z-index: 50 !important;
    align-items: flex-end !important;
    touch-action: none !important;   /* blok semua touch di backdrop */
    pointer-events: auto !important;
  }

  /* Lock scroll background saat sheet/modal terbuka */
  body:has(#mob-filter-sheet.open) #main-content-area,
  body:has(#modal-cal-settings.flex) #main-content-area,
  body.sheet-open #main-content-area {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Backdrop sheet juga tidak scroll */
  body.sheet-open #mob-filter-sheet,
  body.sheet-open #modal-cal-settings {
    touch-action: none !important;
  }

  #mob-filter-sheet > div {
    width: 100% !important;
    background: #fff !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 80dvh !important;
    overflow-y: auto !important;
    padding: 20px 16px 32px !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
    position: relative !important;
    z-index: 51 !important;
    will-change: transform;
  }

  /* Inner div modal-cal-settings juga support swipe */
  #modal-cal-settings > div {
    will-change: transform;
  }

  #mob-filter-sheet > div button,
  #mob-filter-sheet > div a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  #mob-filter-sheet > div::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 4px !important;
    background: #d1d5db !important;
    border-radius: 2px !important;
    margin: 0 auto 20px !important;
  }

  /* ─── SCROLLBAR HIDE ─────────────────────── */
  ::-webkit-scrollbar { display: none !important; }
  * { scrollbar-width: none !important; }

  /* ─── TOUCH FEEDBACK ─────────────────────── */
  [onclick]:not(button):active { background: #f0fdf4 !important; }

} /* END @media (max-width: 767px) */