/* ============================================================
   dacum-responsive.css  v3
   Responsive layer for DACUM Live Pro — MEDIA QUERIES ONLY.

   Phase 3 of the CSS ownership consolidation. Ten base rules that
   had accumulated here were moved to the sheet that owns their
   component. The one deliberate exception is the safe-area block
   below, which is viewport-driven by nature.

   THE CONTRACT: if a rule is not inside an @media block, it does
   not belong in this file. A sheet named "responsive" that also
   carries base styling is a sheet whose load order becomes
   load-bearing by accident — which is how the oval buttons, the
   dead toolbar scroll and the two-row rating scale all happened.
   ============================================================ */

/* Safe-area insets moved to dacum-styles.css (Phase 4) — not a media
   query, so it does not belong in this sheet. */

/* ── Touch targets ──────────────────────────────────────── */
/* This selector MUST stay at element-level specificity (0,0,1).
   An earlier version excluded icon buttons with a chain of
   :not(.tab-help-btn):not(.dcv-close-btn)… — which backfired badly.
   `:not()` takes the specificity of its own argument, so seven of
   them pushed this rule to (0,7,1), higher than any single class
   selector. The result was the exact opposite of the intent: instead
   of sparing the round buttons, it overrode every `min-height` those
   buttons declared for themselves, and stretched ALL of them into
   vertical ovals on touch devices.

   The rule is therefore back to plain element selectors, and the
   contract is inverted: any button that must keep a fixed shape
   declares its own `min-height` in a class rule, which outranks this
   one automatically. Nothing needs to be listed here, and a newly
   added icon button is protected the moment it sizes itself. */
@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;
  }
}

/* Toolbar hover/active behaviour and container overflow moved to
   dacum-components.css (Phase 2). They were duplicated here and in
   dacum-fixes.css, and the two copies merged property-by-property,
   which is exactly the failure mode this consolidation removes. */

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

/* #dpsMobileBackdrop moved to dacum-components.css (Phase 3). */

/* ════════════════════════════════════════════════════════
   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;
  }
  /* The action group is now three 34px icons plus one short labelled
     button — about 175px in total. It fits on one line at every width
     this app supports, so it must never wrap. The h3 is the flexible
     element: it shrinks, and truncates if it has to. */
  .section-header-editable { flex-wrap: nowrap; gap: 8px; }
  /* The heading WRAPS rather than truncating. Truncating held the row
     to one line but cost the user the section name — "Knowledge
     Requirements" became "Knowledge Req...", and the Arabic headings
     are longer still. The row height is set by the buttons anyway, so
     a two-line heading costs almost nothing and keeps the label. */
  .section-header-editable h3 {
    min-width: 0; flex: 1 1 auto;
    overflow-wrap: break-word; line-height: 1.35;
  }
  .section-header-editable > div {
    flex-wrap: nowrap; gap: 6px; flex: 0 0 auto;
  }
  .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; }
  /* One row, always. Wrapping split the 0-1-2-3 scale into two rows of
     two, which reads as two separate controls and doubles the row
     height of every task. The rating cells scroll horizontally with
     the table instead. */
  .rating-scale {
    gap: 10px !important;
    flex-wrap: nowrap !important;
    justify-content: center;
  }
  .rating-option { flex: 0 0 auto; }
  .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;
  }

  /* Was: width:100% on the group and flex:1 on each button, which
     stretched four buttons across the full row and produced the wide
     gaps in the PWA. Written when all four carried text labels; with
     three of them now fixed-size icons it only distorted them. */
  .section-header-editable > div { width: auto; }
  .section-header-editable > div button {
    flex: 0 0 auto; justify-content: center;
  }
  /* Only Clear still has a label, so it is the only one worth
     tightening. It keeps its text — a control that wipes a section
     should stay the clearest thing in the row. */
  .section-header-editable > div .btn-clear-section {
    padding: 8px 12px !important; font-size: 0.8em !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; }

  /* This 2x2 grid is what the phone screenshot showed. It was the
     right answer for four text buttons on a 380px screen; it is the
     wrong one for three icons and a short label, which together need
     about 165px here. Back to a single row. */
  /* Phone layout: heading on its own full-width line, action buttons
     on a single full-width line beneath it.

     Sharing one line was the desktop arrangement and it does not
     survive here: the buttons need ~180px of a 380px screen, leaving
     the heading so narrow that "Attitudes et comportements
     professionnels" broke mid-word. Stacking gives the heading the
     full width and still puts all four buttons on ONE row, which is
     what the 2x2 grid this replaces failed to do. */
  .section-header-editable {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .section-header-editable h3 {
    flex: 1 1 100% !important;
    padding: 4px 2px !important;
    overflow-wrap: normal;
  }
  .section-header-editable > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }
  .section-header-editable > div .btn-icon {
    width: 34px !important; height: 34px !important; padding: 0 !important;
  }
  .section-header-editable > div .btn-clear-section {
    padding: 8px 12px !important; font-size: 0.78em !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; }
}

/* #dpsToggle, .dps-sidebar transition, .dps-force-hidden and the
   wrapper margin moved to dacum-components.css (Phase 3): none of them
   is a media query, and a "responsive" sheet that carries base rules is
   a sheet nobody can reason about. */