/* ==========================================================================
   MOBILE UX OVERHAUL - Dokja Publisher
   Separate file to avoid corrupting the main stylesheet.
   ========================================================================== */

/* ---- DASHBOARD HEADER MOBILE ---- */
@media (max-width: 768px) {
  .dash-header {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  .dash-brand {
    justify-content: center !important;
  }
  .dash-brand h1 {
    font-size: 17px !important;
  }
  .dash-brand p {
    font-size: 11px !important;
  }
  .dash-actions {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .dash-actions .divider-v {
    display: none !important;
  }
  .dash-actions .user-status-indicator {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 11px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--border-color) !important;
  }
  .dash-actions .btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  .dash-actions label.btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  .dash-main {
    padding: 20px 16px !important;
  }
  .dash-section {
    gap: 18px !important;
  }
  .empty-state {
    padding: 40px 20px !important;
  }
  .empty-icon {
    font-size: 48px !important;
  }

  /* Guide section mobile */
  .guide-container {
    flex-direction: column !important;
  }
  .guide-info {
    max-width: 100% !important;
  }
  .slide-viewer-card {
    max-width: 100% !important;
  }
}

/* ---- WORKSPACE HEADER MOBILE ---- */
@media (max-width: 768px) {
  .ws-header {
    height: auto !important;
    min-height: 50px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .ws-header-left {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .ws-header-left .divider-v {
    display: none !important;
  }
  .ws-header-left .btn-text-only {
    padding: 6px 8px !important;
    font-size: 13px !important;
  }
  /* Hide "대시보드" text on mobile, show only arrow icon */
  #btn-back-to-dash {
    font-size: 0 !important;
    padding: 6px 8px !important;
    gap: 0 !important;
  }
  #btn-back-to-dash i {
    font-size: 16px !important;
  }
  .ws-book-title {
    font-size: 13px !important;
    max-width: 120px !important;
  }

  /* Validator badge - compact on mobile */
  .validator-badge-wrap {
    padding: 4px 10px !important;
    gap: 5px !important;
    order: 3 !important;
  }
  .val-score-badge {
    font-size: 11px !important;
    padding: 1px 6px !important;
  }
  .val-status-text {
    display: none !important;
  }
  .validator-badge-wrap > i.fa-circle-info {
    display: none !important;
  }
  .validator-dropdown {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    width: 280px !important;
  }

  /* Header actions - wrap into second row */
  .ws-header-actions {
    width: 100% !important;
    order: 4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--border-color) !important;
  }

  /* Hide theme label text on mobile */
  .editor-theme-picker-label {
    display: none !important;
  }
  .editor-theme-picker-container {
    margin: 0 !important;
  }
  .editor-theme-picker {
    gap: 2px !important;
  }
  .theme-quick-btn {
    font-size: 0 !important;
    padding: 5px 8px !important;
    gap: 0 !important;
  }
  .theme-quick-btn i {
    font-size: 14px !important;
  }

  /* Compact export buttons - icons only */
  .ws-header-actions > .btn {
    font-size: 0 !important;
    padding: 7px 12px !important;
    gap: 0 !important;
  }
  .ws-header-actions > .btn i {
    font-size: 14px !important;
  }

  /* Fix ws-container height accounting for wrapped header */
  .ws-container {
    height: calc(100vh - 105px) !important;
  }
  .ws-sidebar {
    top: 105px !important;
    height: calc(100vh - 105px) !important;
  }
  .ws-preview-panel {
    top: 105px !important;
    height: calc(100vh - 105px) !important;
  }
}

/* ---- EVEN SMALLER SCREENS (320-480px) ---- */
@media (max-width: 480px) {
  .dash-header {
    padding: 10px 12px !important;
  }
  .dash-brand h1 {
    font-size: 15px !important;
  }
  .dash-actions .btn {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }

  /* Dashboard cards: vertical layout on very small screens */
  .book-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: 180px 1fr auto !important;
    grid-template-areas:
      "cover"
      "content"
      "actions" !important;
    height: auto !important;
  }
  .book-card-cover-wrap {
    border-right: none !important;
    border-bottom: 1px solid var(--border-color) !important;
  }

  /* Workspace - even more compact */
  .ws-header {
    padding: 6px 8px !important;
  }
  .ws-book-title {
    max-width: 80px !important;
    font-size: 12px !important;
  }
  .ws-header-actions > .btn {
    padding: 6px 10px !important;
  }

  /* Editor paper sheet - minimal padding */
  .editor-paper-sheet {
    padding: 20px 15px !important;
  }
  .editor-sheet-title-wrap input[type="text"] {
    font-size: 20px !important;
  }

  /* Quill toolbar compact */
  .ql-toolbar.ql-snow {
    padding: 6px 10px !important;
  }
  .ql-toolbar.ql-snow .ql-formats {
    margin-right: 4px !important;
  }

  /* Editor top bar compact */
  .editor-top-bar {
    padding: 6px 10px !important;
    height: 38px !important;
    gap: 8px !important;
  }
  .editor-breadcrumb {
    font-size: 10px !important;
  }

  /* Sidebar mobile even narrower */
  .ws-sidebar {
    width: 260px !important;
  }
  .ws-container.sidebar-collapsed .ws-sidebar {
    width: 260px !important;
  }
}

/* ---- MOBILE SIDEBAR TABS COMPACT ---- */
@media (max-width: 768px) {
  .ws-tabs {
    flex-wrap: nowrap !important;
  }
  .ws-tab-btn {
    font-size: 10px !important;
    padding: 8px 2px !important;
    gap: 2px !important;
  }
  .ws-tab-btn i {
    font-size: 14px !important;
  }
  .ws-tab-content-wrap {
    padding: 12px 6px 12px 12px !important;
  }
  .ws-tab-pane h3 {
    font-size: 13px !important;
  }

  /* Sub-tabs inside sidebar */
  .ws-sub-tab-nav {
    gap: 4px !important;
  }
  .ws-sub-tab-btn {
    font-size: 10px !important;
    padding: 6px 2px !important;
  }

  /* Form elements in sidebar */
  .form-group label {
    font-size: 11px !important;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Preset grid in sidebar */
  .preset-selector-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .preset-btn {
    padding: 8px 4px !important;
    font-size: 11px !important;
  }
}

/* ---- MOBILE EDITOR IMPROVEMENTS ---- */
@media (max-width: 768px) {
  /* Better touch targets for chapter items */
  .chapter-item {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  .chapter-item-controls {
    opacity: 1 !important;
  }
  .chapter-btn-move,
  .chapter-btn-delete {
    padding: 4px 8px !important;
  }

  /* Editor main wrap - reduce padding */
  .editor-main-wrap {
    padding: 10px 8px !important;
  }

  /* Editor chapter meta bar compact */
  .editor-chapter-meta {
    padding: 10px 15px !important;
    gap: 10px !important;
  }
  .editor-chapter-meta input[type="text"] {
    font-size: 14px !important;
  }
  .chapter-actions {
    gap: 6px !important;
  }
  .lbl-chapter-size {
    display: none !important;
  }

  /* Preview panel improvements for mobile */
  .preview-header h3 {
    font-size: 12px !important;
  }
  .preview-footer-pagination {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  /* Mobile overlay backdrop for sidebar */
  .ws-container:not(.sidebar-collapsed)::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 998 !important;
    pointer-events: auto !important;
  }
  .ws-container.sidebar-collapsed::before {
    display: none !important;
  }

  /* Helpers dropdown position fix */
  .helpers-dropdown-menu {
    position: fixed !important;
    bottom: 60px !important;
    right: 10px !important;
    top: auto !important;
    z-index: 1001 !important;
    max-width: 200px !important;
  }
}

/* ---- LANDING PAGE MOBILE ENHANCEMENTS ---- */
@media (max-width: 768px) {
  .landing-nav-container {
    padding: 0 !important;
  }
  .landing-auth-buttons {
    gap: 6px !important;
  }
  .landing-auth-buttons .btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .landing-hero-section {
    padding: 100px 20px 60px !important;
    min-height: auto !important;
  }
  .landing-hero-badge {
    font-size: 11px !important;
    padding: 6px 14px !important;
  }
  .landing-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .landing-hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Compliance section mobile */
  .compliance-visual-widget {
    max-width: 100% !important;
  }
  .validator-dropdown-mockup {
    padding: 15px !important;
  }

  /* Bottom CTA mobile */
  .landing-bottom-cta {
    padding: 50px 20px !important;
  }
  .cta-inner-container h2 {
    font-size: 24px !important;
  }
}

/* ---- TOUCH-FRIENDLY IMPROVEMENTS ---- */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn {
    min-height: 40px !important;
  }
  .btn-small {
    min-height: 34px !important;
  }
  .ws-tab-btn {
    min-height: 44px !important;
  }
  .chapter-item {
    min-height: 44px !important;
  }

  /* Always show controls on touch devices */
  .chapter-item-controls {
    opacity: 1 !important;
  }
  .book-card:hover {
    transform: none !important;
  }
}

/* ---- SAFE AREA FOR NOTCH DEVICES ---- */
@supports (padding: env(safe-area-inset-top)) {
  .landing-header,
  .dash-header,
  .ws-header {
    padding-left: max(env(safe-area-inset-left), 12px) !important;
    padding-right: max(env(safe-area-inset-right), 12px) !important;
  }
}