/* ============================================================
   dacum-responsive.css  v2
   Responsive & PWA layer for DACUM Live Pro.
   Loaded AFTER dacum-styles.css.
   ============================================================ */

/* ── Safe-area insets (iPhone notch / home bar) ─────────── */
body {
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* ── Touch targets ──────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  button, a, input[type="radio"], input[type="checkbox"],
  select, .tab, .mode-option, .formula-option {
    min-height: 44px;
  }
  input[type="text"], input[type="date"],
  input[type="number"], textarea {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   FIX 1 — Toolbar button hover clipping
   Global button:hover in dacum-styles.css adds
   transform:translateY(-2px) which clips against the fixed
   toolbar's top edge / viewport boundary.
   ══════════════════════════════════════════════════════════ */
#dacumTopToolbar {
  overflow: visible !important;
}
#dacumTopToolbar button:hover,
#dacumTopToolbar .dtb-btn:hover,
#dacumTopToolbar .dtb-undo:hover,
#dacumTopToolbar .dtb-lens:hover,
#dacumTopToolbar .dtb-hamburger:hover {
  transform: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
}
#dacumTopToolbar button:active,
#dacumTopToolbar .dtb-btn:active {
  transform: scale(0.97) !important;
}

/* ══════════════════════════════════════════════════════════
   FIX 2 — Hamburger button base style
   Hidden by default; shown at breakpoints below.
   ══════════════════════════════════════════════════════════ */
/* .dtb-hamburger button removed */

/* Mobile sidebar overlay backdrop */
#dpsMobileBackdrop {
  display: none;
  position: fixed;
  inset: 60px 0 0 0;
  background: rgba(0,0,0,0.55);
  z-index: 299;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#dpsMobileBackdrop.dps-backdrop-visible { display: block; }

/* ════════════════════════════════════════════════════════
   1100 px — tablet landscape / small laptop
   Sidebar becomes a transform-based overlay drawer.
   ════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {

  /* ── Floating dpsToggle hidden (no longer used) ── */
  #dpsToggle { display: none !important; }

  /* ── Sidebar becomes transform-based overlay drawer ──────
   * Slides in from left over the content (no margin push).
   * dps-mobile-open class is toggled by dacum-mobile.js.   */
  .dps-sidebar {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    width: 260px !important;
    height: calc(100vh - 60px) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1) !important;
    z-index: 500 !important;
    box-shadow: none !important;
    overflow-y: auto !important;   /* sidebar scrolls as one unit on mobile too */
    overflow-x: hidden !important;
  }
  .dps-sidebar.dps-mobile-open {
    transform: translateX(0) !important;
    box-shadow: 2px 0 24px rgba(0,0,0,0.35) !important;
  }
  /* When sidebar is overlay, content never shifts */
  #dacumAppWrapper > .container,
  #dacumAppWrapper.dps-is-collapsed > .container {
    margin-left: 0 !important;
    transition: none !important;
  }

  .container { padding: 28px 24px; }

  /* Toolbar: hide text labels at this width, keep icons */
  #dacumTopToolbar .dtb-btn span { font-size: 0 !important; width: 0; overflow: hidden; }
  #dacumTopToolbar .dtb-btn  { padding: 7px 10px !important; gap: 0 !important; }
  #dacumTopToolbar .dtb-undo { padding: 7px 10px !important; font-size: 0 !important; }
  #dacumTopToolbar .dtb-undo svg { flex-shrink: 0; }
  #dacumTopToolbar .dtb-btn .dtb-icon { width: 18px; height: 18px; }
}

/* ════════════════════════════════════════════════════════
   900 px — tablet portrait
   Sidebar overlay already handled by ≤1100px rule above.
   ════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* .tabs are now in sidebar — no horizontal scroll needed here */
  .tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  .two-column { flex-direction: column !important; gap: 16px !important; }
  .hc-grid { grid-template-columns: 1fr !important; }
  .hc-card-full { grid-column: auto !important; }
  .hc-steps-compact { grid-template-columns: 1fr !important; }
  .image-upload-container { flex-direction: column; align-items: flex-start; gap: 10px; }

  .duty-header, .ks-header, .behavior-header {
    flex-direction: column; align-items: flex-start; gap: 8px;
  }
  .section-header-editable { flex-wrap: wrap; gap: 8px; }
  .section-header-editable h3 { min-width: 0; flex: 1; }
  .section-header-editable > div { flex-wrap: wrap; gap: 6px; }
  .cluster-header, .module-header, .lo-block-header { flex-wrap: wrap; gap: 8px; }
  .cluster-actions, .module-actions, .lo-actions { flex-wrap: wrap; }
  .skills-level-checkboxes { margin-left: 0 !important; gap: 12px !important; }
  .skills-competency-input-row { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════
   768 px — mobile landscape / large phone
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #dacumTopToolbar { padding: 0 8px !important; gap: 3px !important; }
  .dtb-divider { margin: 0 2px !important; }

  .container { padding: 18px 14px !important; border-radius: 12px !important; }
  h1 { font-size: 1.6em !important; }
  h2 { font-size: 1.3em !important; }
  h3 { font-size: 1.1em !important; }
  .tab { padding: 9px 13px !important; font-size: 0.82em !important; }

  /* Card view: stack vertically */
  .dcv-row { flex-direction: column !important; padding: 12px 4px 10px !important; }
  .dcv-duty-card { width: 100% !important; min-width: 0 !important; }
  .dcv-tasks-area { margin-left: 0 !important; margin-top: 10px !important; }
  .dcv-task-card  { width: 160px !important; min-width: 160px !important; }

  .task-list { margin-left: 8px !important; }
  .task-item { flex-wrap: wrap; gap: 6px !important; }
  .task-label { width: auto !important; }

  #verificationAccordionContainer, .workflow-extended { overflow-x: auto; }
  .verification-table th,
  .verification-table td { font-size: 0.82em; padding: 8px 6px !important; }
  .rating-scale { gap: 8px !important; flex-wrap: wrap; }
  .rating-option label { font-size: 0.75em !important; }

  .results-dashboard-inner { overflow-x: auto; }
  .dashboard-table { font-size: 0.82em; }
  .dashboard-table th, .dashboard-table td { padding: 8px 6px !important; }
  .dashboard-summary { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .summary-card { padding: 10px !important; }

  .skills-competency-row { padding: 10px !important; }
  .skills-competency-input-row { flex-direction: column; }
  .skills-competency-id { text-align: left !important; min-width: auto; }
  .skills-competency-text { width: 100% !important; }
  .skills-level-checkboxes {
    margin-left: 0 !important; gap: 10px !important; flex-wrap: wrap !important;
  }

  .section-header-editable > div { width: 100%; }
  .section-header-editable > div button {
    flex: 1; min-width: 0; justify-content: center;
    padding: 8px 10px !important; font-size: 0.82em !important;
  }
  .duty-header > div { flex-wrap: wrap; gap: 6px; }
  .duty-header button { font-size: 0.82em !important; padding: 8px 10px !important; }

  .mode-options { flex-direction: column !important; align-items: stretch !important; }
  .formula-options { flex-direction: column !important; }

  .workshop-participants {
    text-align: left !important; display: flex !important;
    flex-direction: column !important; gap: 10px !important;
    align-items: flex-start !important;
  }
  .count-input-grid { flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
  #snapModalBox {
    top: 68px !important; right: 8px !important;
    left: 8px !important; width: auto !important;
  }

  #lwStep1-finalize > div[style*="justify-content"] {
    flex-direction: column !important; align-items: stretch !important;
  }
  #lwStep2-session > div[style*="justify-content"] {
    flex-direction: column !important; align-items: stretch !important;
  }
  #lwStep2-session > div[style*="justify-content"] button { width: 100% !important; }
  #lwParticipantLink { display: block !important; margin-bottom: 8px; }
  #btnLWCopyLink, #btnLWShowQR {
    margin-left: 0 !important; margin-top: 8px !important;
    display: block !important; width: 100% !important;
  }
  #lwExportButtons > div[style*="grid"] { grid-template-columns: 1fr !important; }

  .info-box { padding: 14px !important; }
  .available-tasks-list, .module-lo-list { max-height: 280px !important; }
  .cluster-task-item, .module-lo-assigned {
    flex-direction: column; align-items: flex-start; gap: 8px;
  }
  .task-dropdown-container { margin-left: 0 !important; }
  .skills-level-category-header { flex-wrap: wrap; gap: 6px; }
  .verification-instructions { padding: 12px 14px !important; }
  .scale-legend {
    flex-direction: column !important; gap: 8px !important;
    align-items: flex-start !important;
  }
  .loading-content { padding: 28px 20px !important; }
  .copyright { font-size: 0.85em !important; }
  .status { font-size: 0.9em !important; }
  .btn-export-dashboard, .btn-create-cluster,
  .btn-create-lo, .btn-create-module {
    max-width: 100% !important; width: 100% !important;
  }
  .qrm-url-text { font-size: 0.65em !important; }
  .hc-header { padding: 18px 16px !important; gap: 12px !important; }
  .hc-title { font-size: 1.25em !important; }
  .hc-card  { padding: 18px 16px !important; }
  .hc-creator { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════
   480 px — small phone
   ════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  body { padding-top: 56px !important; }
  #dacumTopToolbar { height: 56px !important; }
  .container { padding: 14px 10px !important; border-radius: 10px !important; }
  h1 { font-size: 1.3em !important; }
  h2 { font-size: 1.15em !important; }
  .tab { padding: 8px 11px !important; font-size: 0.78em !important; }
  .dcv-task-card { width: 140px !important; min-width: 140px !important; }
  .dcv-duty-input, .dcv-task-input {
    font-size: 0.82em !important; min-height: 60px !important;
  }
  #dacumTopToolbar { padding: 0 6px !important; gap: 2px !important; }
  #dacumTopToolbar .dtb-btn { padding: 6px 8px !important; }
  #snapModalBox { top: 60px !important; right: 4px !important; left: 4px !important; }
  .dashboard-summary { grid-template-columns: 1fr !important; }

  .section-header-editable > div {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important;
  }
  .section-header-editable > div button {
    font-size: 0.76em !important; padding: 7px 6px !important;
  }
  .duty-header > div {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 4px !important; width: 100% !important;
  }
  .mode-option  { padding: 10px 14px !important; }
  .formula-option { padding: 8px 12px !important; }
  #btnSaveSnapshot span, #btnSaveJSON span, #btnLoadImport span,
  #btnExportPDF span, #btnExportWord span, #btnClearAll span { display: none !important; }
  .info-box { padding: 12px !important; }
  .skills-level-category { padding: 12px !important; }
  .hc-header { padding: 14px 12px !important; flex-direction: column; gap: 8px; }
  .hc-card  { padding: 14px 12px !important; }
  .hc-btn-row { flex-direction: column !important; }
  .hc-btn { justify-content: center !important; text-align: center !important; }
}

/* ── PWA standalone display mode ────────────────────────── */
@media (display-mode: standalone) {
  body {
    padding-top: calc(60px + env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
  }
  #dacumTopToolbar {
    top: env(safe-area-inset-top);
    height: calc(60px + env(safe-area-inset-top));
  }
  .dps-sidebar { top: calc(60px + env(safe-area-inset-top)); }
}

/* ── Landscape phones ───────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .container { padding: 12px 14px !important; }
  h1 { font-size: 1.4em !important; }
  .tab { padding: 8px 14px !important; font-size: 0.85em !important; }
  .dcv-row { padding: 8px 4px 6px !important; }
  .dcv-duty-card { min-height: 90px !important; }
  .available-tasks-list, .module-lo-list { max-height: 180px !important; }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  #dacumTopToolbar, #dacumProjectsSidebar, #dpsToggle,
  .dtb-hamburger, #dpsMobileBackdrop { display: none !important; }
  #dacumAppWrapper > .container,
  #dacumAppWrapper.dps-is-collapsed > .container { margin-left: 0 !important; }
  .container {
    padding: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  }
  body { background: white !important; padding-top: 0 !important; }
}

/* ── Hide dpsToggle globally (collapse btn is now inside sidebar header) */
#dpsToggle { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   Sidebar: desktop transition base
   ═══════════════════════════════════════════════════════════ */
.dps-sidebar {
  transition: width 0.25s cubic-bezier(.4,0,.2,1),
              transform 0.28s cubic-bezier(.4,0,.2,1) !important;
}

/* dps-force-hidden: width→0 for legacy compatibility only.
   overflow kept hidden since the sidebar has no width anyway. */
.dps-sidebar.dps-force-hidden {
  width: 0 !important;
  min-width: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;   /* OK at width:0, no content visible */
}
#dacumAppWrapper.dps-force-hidden-wrapper > .container {
  margin-left: 0 !important;
}