/* 
  Staff Hub Mobile Overrides 
  Strict No-Horizontal-Scroll & Complete View Optimization
*/

@media (max-width: 768px) {
  /* ABSOLUTE PREVENT PAGE HORIZONTAL SCROLL (CLIPPING ALL MAJOR LAYOUT WRAPPERS) */
  html, 
  body, 
  .page-frame, 
  .app-shell, 
  .theme-container, 
  main {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
  }

  /* HIGH SPECIFICITY TO OVERRIDE INLINE OVERFLOW:VISIBLE RULE */
  html[data-page='admin'] #admin.admin-section,
  html[data-page='admin'] .section#admin,
  body[data-page='admin'] #admin.admin-section {
    overflow-x: hidden !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* REMOVE MASSIVE GLOW DECORATIONS THAT BLEED 200PX OFF-SCREEN */
  .admin-bg-glow-1, 
  .admin-bg-glow-2 {
    display: none !important;
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* FIX FOR HORIZONTAL PAGE SCROLL (TOPBAR & HEADERS OVERFLOW) */
  .topbar, 
  .topbar-inner,
  .mobile-page-rail,
  .breadcrumbs {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ==========================================
     DEFINITIVE ROOT CAUSE FIX: EMPIRE PANEL SHELL 
     Stack 3-column desktop layout to 1-column flex layout
     ========================================== */
  body[data-page='admin'] .admin-shell,
  html[data-page='admin'] .admin-shell,
  .empire-panel-shell-premium,
  html[data-page='admin'] .empire-panel-layout,
  html[data-page='admin'] .staffhub-v2 .empire-panel-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Hero header banner wrap */
  .empire-panel-hero {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .empire-panel-hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .empire-panel-status-pill {
    margin: 0 !important;
    font-size: 0.75rem !important;
  }

  /* MAIN CONTAINERS */
  .miraculous-dashboard,
  .staff-layout,
  .sn-layout,
  .sn-page,
  #app {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  aside, 
  .sidebar, 
  .staff-sidebar, 
  .sn-sidebar,
  .dashboard-sidebar,
  .dashboard-content,
  .sn-content,
  .content,
  .main-content,
  .empire-panel-main,
  .empire-panel-rail,
  .empire-panel-stage {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    transform: none !important;
    border-right: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ==========================================
     BUG FIX: STAFF CONSOLE / SIDEBAR RAIL
     ========================================== */
  .admin-rail, 
  .empire-panel-rail, 
  .guide-card {
    padding: 12px !important;
    border-radius: 16px !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
    max-height: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* Hide unnecessary heavy descriptions on mobile rail */
  .admin-rail-head p.card-copy,
  .admin-rail-head p.card-kicker,
  .admin-rail-card {
    display: none !important;
  }
  
  .admin-rail-head h3 {
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
  }

  /* ==========================================
     MOBILE ADMIN NAVIGATION - COMPACT SNAP SCROLL FIX
     ========================================== */
  html[data-page='admin'] .empire-panel-tabs {
    padding-bottom: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE */
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 10px !important;
  }
  
  html[data-page='admin'] .empire-panel-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none !important;
  }
  
  html[data-page='admin'] .empire-panel-tab-group {
    display: flex !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  
  html[data-page='admin'] .empire-panel-tab-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding: 0 10px 10px 10px !important;
    min-width: 0 !important;
    width: auto !important;
  }
  
  html[data-page='admin'] .empire-panel-tab {
    scroll-snap-align: start !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    min-width: 0 !important; /* OVERRIDE DESKTOP 245px/220px/190px MIN-WIDTH */
    max-width: none !important;
    width: auto !important;
    padding: 6px 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    gap: 6px !important;
  }

  html[data-page='admin'] .empire-panel-tab.is-active {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  }

  html[data-page='admin'] .empire-panel-tab-mark {
    font-size: 1rem !important;
    margin-right: 0 !important;
    opacity: 0.8 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
  }
  
  html[data-page='admin'] .empire-panel-tab.is-active .empire-panel-tab-mark {
    opacity: 1 !important;
  }

  html[data-page='admin'] .empire-panel-tab-title {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
  }

  /* ==========================================
     DASHBOARD VIEW OPTIMIZATION
     ========================================== */
  .admin-overview-preview,
  .admin-live-preview {
    grid-template-columns: 1fr !important; /* Stack 2-column preview cards into 1 column */
    gap: 16px !important;
    width: 100% !important;
  }

  /* ==========================================
     MAILBOX VIEW OPTIMIZATION
     ========================================== */
  html[data-page='admin'] .admin-section-card-head,
  html[data-page='admin'] .empire-mailbox-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  html[data-page='admin'] .admin-section-card-head > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html[data-page='admin'] .primary-action,
  html[data-page='admin'] .secondary-action,
  html[data-page='admin'] [data-mail-compose-focus] {
    flex-shrink: 0 !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
    height: auto !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .empire-mailbox-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .empire-mailbox-list,
  .empire-mail-detail,
  .empire-mail-composer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .empire-mailbox-list {
    max-height: 400px !important; /* Cap height on mobile so detail is accessible underneath */
  }

  /* Mail Compose Modal Form Elements */
  .empire-mail-composer-modal-body input,
  .empire-mail-composer-modal-body textarea,
  .empire-mail-composer-modal-body select,
  .empire-mail-composer input,
  .empire-mail-composer textarea,
  .empire-mail-composer select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ==========================================
     STAFF ACTIVITY VIEW OPTIMIZATION
     ========================================== */
  html[data-page='admin'] .staff-activity-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html[data-page='admin'] .staff-activity-ranges {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--surface-strong) 82%, transparent) !important;
    padding: 3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  html[data-page='admin'] .staff-activity-ranges::-webkit-scrollbar {
    display: none !important;
  }

  html[data-page='admin'] .staff-activity-ranges .category-button {
    flex: 1 1 0px !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
    min-height: 32px !important;
    height: 32px !important;
    font-size: 0.78rem !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .activity-item-premium {
    flex-direction: column !important; /* Ensure column stacking on all mobile/tablet views */
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* ==========================================
     STAFF NOTES SPECIFIC FIXES
     ========================================== */
  .sn-page {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .sn-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .sn-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .sn-card-inner {
    padding: 12px !important;
  }

  .sn-card-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .sn-card-date {
    white-space: normal !important;
    font-size: 10px !important;
    word-break: break-word !important;
  }

  /* FILTERS: WRAP CLEANLY WITHOUT ANY SCROLLBARS */
  .sn-filters,
  .archives-filters,
  .filter-group,
  .button-group {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .sn-filter-btn,
  .archives-filter-pill {
    flex: 0 1 auto !important;
    white-space: normal !important;
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .sn-header button,
  .sn-page > button,
  .sn-add-btn {
    width: 100% !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
  }

  /* Staff Note Card Actions (Edit & Delete buttons side-by-side) */
  html[data-page='admin'] .sn-card-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
  }

  html[data-page='admin'] .sn-card-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  html[data-page='admin'] .sn-card-actions button,
  html[data-page='admin'] .sn-card-actions .secondary-action,
  html[data-page='admin'] .sn-card-actions .ghost-button,
  html[data-page='admin'] .sn-card-actions .sn-delete-btn {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 6px 14px !important;
    min-height: 34px !important;
    height: auto !important;
    font-size: 0.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* STAFF NOTES SEARCH INPUT & BUTTON WRAPPER */
  .sn-filters > div:last-child {
    width: 100% !important;
    margin-left: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .sn-filters > div:last-child > div {
    width: 100% !important;
  }
  #snNameFilterInput {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ==========================================
     EMPIRE ARCHIVES SPECIFIC FIXES
     ========================================== */
  .archive-hero-container {
    height: 240px !important;
    padding: 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .clock-assembly {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 auto !important;
    width: 200px !important;
    height: 200px !important;
    transform: none !important;
    z-index: 5 !important;
  }

  .clock-gear--large {
    width: 170px !important;
    height: 170px !important;
  }

  .clock-face {
    width: 120px !important;
    height: 120px !important;
    border-width: 6px !important;
  }

  .clock-face::before {
    width: 100px !important;
    height: 100px !important;
  }

  .clock-numeral {
    font-size: 0.75rem !important;
  }

  .clock-numeral--12 { transform: scale(1.01) !important; /* Fixed jitter */ }
  .clock-numeral--1  { transform: scale(1.01) !important; /* Fixed jitter */ }
  .clock-numeral--2  { transform: scale(1.01) !important; /* Fixed jitter */ }
  .clock-numeral--3  { transform: scale(1.01) !important; /* Fixed jitter */ }
  .clock-numeral--4  { transform: scale(1.01) !important; /* Fixed jitter */ }
  .clock-numeral--5  { transform: scale(1.01) !important; /* Fixed jitter */ }
  .clock-numeral--6  { transform: scale(1.01) !important; /* Fixed jitter */ }
  .clock-numeral--7  { transform: scale(1.01) !important; /* Fixed jitter */ }
  .clock-numeral--8  { transform: scale(1.01) !important; /* Fixed jitter */ }
  .clock-numeral--9  { transform: scale(1.01) !important; /* Fixed jitter */ }
  .clock-numeral--10 { transform: scale(1.01) !important; /* Fixed jitter */ }
  .clock-numeral--11 { transform: scale(1.01) !important; /* Fixed jitter */ }

  .clock-gear--left {
    width: 90px !important;
    height: 90px !important;
    left: -25px !important;
    top: 15px !important;
  }

  .clock-gear--right {
    width: 65px !important;
    height: 65px !important;
    right: -15px !important;
    top: 5px !important;
  }

  .clock-pendulum-rod {
    height: 100px !important;
  }

  /* EMPIRE ARCHIVES SEARCH CONTAINER */
  .archives-search-container {
    padding: 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .archives-search-input-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .archives-search-input-wrap input {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    height: 42px !important;
    box-sizing: border-box !important;
  }

  .archives-search-input-wrap button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    font-size: 0.88rem !important;
    border-radius: 8px !important;
    height: 42px !important;
    box-sizing: border-box !important;
  }

  .archives-results-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .archive-item-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .archive-item-left,
  .archive-item-right {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .archive-item-right {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  /* DECORATIONS THAT CAUSE OVERFLOW */
  .archives-writing-desks,
  .archive-perspective-floor,
  .archive-background-arches {
    display: none !important;
  }

  /* PRE & CODE BLOCK WRAPPING */
  pre, code, .log-output {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  /* ==========================================
     MOBILE TOUCH & CLICK OPTIMIZATIONS
     ========================================== */
  a, button, input, select, textarea, .category-button, .sn-card, .primary-action, .secondary-action {
    touch-action: manipulation !important; /* Removes 300ms tap delay */
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Prevent iOS hover-shift bug where button moves away from finger */
  .support-link:hover,
  .primary-action:hover,
  .secondary-action:hover,
  .ghost-button:hover,
  .category-button:hover,
  .copy-button:hover,
  .theme-toggle:hover,
  .search-toggle:hover,
  .nav-group-toggle:hover,
  .mobile-nav-close:hover,
  .mobile-page-rail a:hover,
  .mobile-page-rail-more:hover,
  .back-to-top:hover,
  .patreon-popover-link:hover,
  .patreon-popover-close:hover {
    transform: none !important;
  }

  /* Allow slight active scaling but not translateY */
  .support-link:active,
  .primary-action:active,
  .secondary-action:active,
  .ghost-button:active,
  .category-button:active,
  .copy-button:active,
  .theme-toggle:active,
  .search-toggle:active,
  .nav-group-toggle:active,
  .mobile-nav-close:active,
  .mobile-page-rail a:active,
  .mobile-page-rail-more:active,
  .back-to-top:active,
  .patreon-popover-link:active,
  .patreon-popover-close:active {
    transform: scale(0.96) !important;
  }

  /* Ensure decorative layers NEVER block clicks */
  .sparkle-container,
  .admin-bg-glow-1,
  .admin-bg-glow-2,
  #admin-particle-canvas {
    pointer-events: none !important;
  }
}

@media (max-width: 480px) {
  .miraculous-dashboard {
    gap: 10px !important;
  }
  .kwami-card-premium {
    padding: 10px !important;
  }
  .sn-card-inner {
    padding: 10px 8px !important;
  }
}

@media (max-width: 1000px) {
  html[data-page='admin'] .empire-panel-layout,
  html[data-page='admin'] .staffhub-v2 .empire-panel-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 24px !important;
  }
  html[data-page='admin'] .empire-panel-sidebar,
  html[data-page='admin'] .empire-panel-rail,
  html[data-page='admin'] .staffhub-v2 .empire-panel-rail,
  html[data-page='admin'] .empire-panel-main,
  html[data-page='admin'] .staffhub-v2 .empire-panel-main {
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: 0 !important;
  }
}