/* Desktop-only layout overrides (desktop/overrides.css).
   Load after styles.css from index.html. */

@media (min-width: 1024px) {
  :root {
    --desktop-content-max-width: 1440px;
    --desktop-content-padding-x: 1.5rem;
    --desktop-content-padding-y: 1.25rem;
  }

  .main-content {
    /* Preserve base top/bottom spacing (header + FAB) and only widen horizontal gutters on desktop. */
    padding-left: var(--desktop-content-padding-x);
    padding-right: var(--desktop-content-padding-x);
  }

  .view-container .content-panel {
    margin-left: auto;
    margin-right: auto;
  }

  /* Dashboard: keep search and status area from stretching too wide. */
  #dashboardView .search-container,
  #dashboardView .status-cards,
  #dashboardView .job-sites-section,
  #dashboardView .recent-activity {
    max-width: var(--desktop-content-max-width);
    margin-left: auto;
    margin-right: auto;
  }

  /* Keep all dashboard status cards in one desktop row. */
  #dashboardView .status-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-sm);
  }

  #dashboardView .status-cards .status-card:first-child {
    grid-column: auto;
  }

  /* Financial section: centered desktop viewport for better scanability. */
  #financialView .financial-overview,
  #financialView .financial-panel,
  #financialView .financial-report {
    max-width: var(--desktop-content-max-width);
    margin-left: auto;
    margin-right: auto;
  }

  body.desktop-side-menu-mode {
    --desktop-side-menu-collapsed-width: 84px;
    --desktop-side-menu-expanded-width: 304px;
  }

  /* Web desktop only: no solid header / sidebar panel tint (native uses slide menu; unchanged). */
  body.desktop-side-menu-mode .header,
  body.light-theme.desktop-side-menu-mode .header {
    background: transparent !important;
    background-color: transparent !important;
    justify-content: flex-end;
    position: fixed;
  }

  /* Menu button is hidden on desktop rail — center sync status in the header bar. */
  body.desktop-side-menu-mode .header .header-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: max-content;
    max-width: min(420px, calc(100% - 200px));
    justify-content: center;
    pointer-events: none;
  }

  body.desktop-side-menu-mode .header .sync-indicator {
    margin-left: 0;
  }

  body.desktop-side-menu-mode .side-menu,
  body.light-theme.desktop-side-menu-mode .side-menu {
    background: transparent !important;
    background-color: transparent !important;
  }

  body.desktop-side-menu-mode .app {
    padding-left: var(--desktop-side-menu-collapsed-width);
    transition: padding-left 0.2s ease;
  }

  /* Sidebar rail replaces the mobile pill nav — hide it and drop the FAB gutter. */
  body.desktop-side-menu-mode .floating-bottom-menu {
    display: none !important;
  }

  body.desktop-side-menu-mode .main-content {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  body.desktop-side-menu-mode.desktop-side-menu-expanded .app {
    padding-left: var(--desktop-side-menu-expanded-width);
  }

  body.desktop-side-menu-mode .side-menu,
  body.light-theme.desktop-side-menu-mode .side-menu {
    width: var(--desktop-side-menu-collapsed-width);
    -webkit-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
    transition: width 0.2s ease;
    overflow: hidden;
    border: none !important;
    display: flex;
    flex-direction: column;
  }

  body.desktop-side-menu-mode .side-menu.desktop-expanded {
    width: var(--desktop-side-menu-expanded-width);
  }

  body.desktop-side-menu-mode #menuBtn {
    display: none;
  }

  body.desktop-side-menu-mode .menu-header,
  body.light-theme.desktop-side-menu-mode .menu-header {
    min-height: 72px;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 0.7rem;
    border-bottom: none !important;
  }

  /* Collapsed: do not use only opacity/max-width on labels — flex min-width:auto still reserves text width. */
  body.desktop-side-menu-mode:not(.desktop-side-menu-expanded) .menu-header h3 {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    width: 0;
    min-width: 0;
    flex: 0 0 0;
  }

  body.desktop-side-menu-mode:not(.desktop-side-menu-expanded) .menu-item .menu-item-label,
  body.desktop-side-menu-mode:not(.desktop-side-menu-expanded) .menu-item .premium-badge {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.desktop-side-menu-mode .menu-header-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 0;
  }

  body.desktop-side-menu-mode .menu-close {
    opacity: 1;
    max-width: 44px;
    overflow: visible;
    margin: 0;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 12px;
    border: none;
    background: transparent;
  }

  body.desktop-side-menu-mode .menu-content {
    padding: 0.65rem 0.45rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overflow-y: auto;
  }

  body.desktop-side-menu-mode .menu-item {
    justify-content: center;
    gap: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    min-height: 48px;
    border-radius: 12px;
    margin: 0;
  }

  body.desktop-side-menu-mode .desktop-create-jobsite-menu-item {
    display: flex;
  }

  body.desktop-side-menu-mode .menu-item i {
    margin-right: 0;
    font-size: 1.06rem;
  }

  body.desktop-side-menu-mode .overlay {
    display: none !important;
  }

  body.desktop-side-menu-mode .menu-close:hover {
    background: transparent;
    transform: none;
    border-color: transparent;
  }

  body.desktop-side-menu-mode.desktop-side-menu-expanded .menu-header {
    justify-content: space-between;
    padding: 1rem 1rem;
  }

  body.desktop-side-menu-mode.desktop-side-menu-expanded .menu-item {
    justify-content: flex-start;
    gap: 0.78rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body.desktop-side-menu-mode.desktop-side-menu-expanded .menu-item i {
    margin-right: 0;
  }

  body.desktop-side-menu-mode.desktop-side-menu-expanded .menu-header h3,
  body.desktop-side-menu-mode.desktop-side-menu-expanded .menu-close {
    opacity: 1;
    max-width: 200px;
  }

  body.desktop-side-menu-mode.desktop-side-menu-expanded .menu-item .menu-item-label {
    display: inline !important;
    opacity: 1;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
  }

  body.desktop-side-menu-mode.desktop-side-menu-expanded .menu-item .premium-badge {
    display: inline-block !important;
    opacity: 1;
    max-width: none;
  }

  body.desktop-side-menu-mode.desktop-side-menu-expanded .menu-header h3 {
    width: auto;
    min-width: 0;
    flex: initial;
    padding: 0.6rem;
  }

  /* Workshop: center the card rail like other views; no extra top/bottom margin — .main-content
     gutters + .content-panel padding already provide vertical rhythm. */
  body.desktop-side-menu-mode #workshopView > .content-panel.workshop-view-panel {
    margin-left: auto;
    margin-right: auto;
  }

  /* Desktop: show News & Updates as bell-dropdown panel (not full centered view). */
  body.desktop-side-menu-mode #announcementsView.active {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px));
    right: 1rem;
    left: auto;
    width: min(430px, calc(100vw - 2rem));
    max-height: min(76vh, 760px);
    z-index: 1200;
    overflow: visible;
    display: block;
    opacity: 1;
  }

  body.desktop-side-menu-mode #announcementsView.active .content-panel {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.75rem 0.75rem 0.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    max-height: inherit;
    overflow-y: auto;
  }

  body.light-theme.desktop-side-menu-mode #announcementsView.active .content-panel {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  }

  body.desktop-side-menu-mode #announcementsView .view-title {
    display: none;
  }

  body.desktop-side-menu-mode #announcementsView .announcements-container {
    padding-top: 0;
  }

  /* Floating modals: draggable panels without backdrop overlay. */
  body.desktop-side-menu-mode .modal.desktop-modal-float {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    background: transparent !important;
    pointer-events: none;
    overflow: visible;
    z-index: 1230;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
    touch-action: none;
  }

  body.desktop-side-menu-mode .modal.desktop-modal-float::before,
  body.desktop-side-menu-mode .modal.desktop-modal-float.active::before {
    display: none !important;
  }

  body.desktop-side-menu-mode .modal.desktop-modal-float.active {
    display: block;
  }

  /* PDF viewer panel sizing: services/pdf-custom-viewer.css (loads after this file) */
  body.desktop-side-menu-mode .modal.desktop-modal-float .modal-content:not(.pdf-viewer-modal-content) {
    position: fixed;
    pointer-events: auto;
    width: min(520px, calc(100vw - var(--desktop-side-menu-collapsed-width) - 48px));
    max-width: min(560px, calc(100vw - 48px));
    max-height: min(84vh, 860px);
    margin: 0;
    align-self: auto;
    border: 1px solid var(--border-color);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
    animation: none !important;
    -webkit-animation: none !important;
    will-change: left, top;
  }

  body.desktop-side-menu-mode .modal.desktop-modal-float .modal-content.pdf-viewer-modal-content {
    position: fixed;
    pointer-events: auto;
    margin: 0;
    align-self: auto;
    border: 1px solid var(--border-color);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
    animation: none !important;
    -webkit-animation: none !important;
    will-change: left, top, height;
  }

  body.desktop-side-menu-mode #invoiceModal.desktop-modal-float .modal-content,
  body.desktop-side-menu-mode #estimateModal.desktop-modal-float .modal-content {
    width: min(760px, calc(100vw - var(--desktop-side-menu-collapsed-width, 72px) - 48px));
    max-width: min(820px, calc(100vw - 48px));
    max-height: min(88vh, 920px);
  }

  body.desktop-side-menu-mode #jobSiteDetailModal.desktop-modal-float .modal-content {
    width: min(640px, calc(100vw - var(--desktop-side-menu-collapsed-width, 72px) - 48px));
    max-width: min(680px, calc(100vw - 48px));
    max-height: min(88vh, 920px);
  }

  /* New project form: 2–3 column rows need more width than default 520px float */
  body.desktop-side-menu-mode #newJobSiteModal.desktop-modal-float .modal-content {
    width: min(720px, calc(100vw - var(--desktop-side-menu-collapsed-width, 72px) - 48px));
    max-width: min(760px, calc(100vw - 48px));
    max-height: min(88vh, 920px);
  }

  body.desktop-side-menu-mode #editJobSiteModal.desktop-modal-float .modal-content {
    width: min(560px, calc(100vw - var(--desktop-side-menu-collapsed-width, 72px) - 48px));
    max-width: min(600px, calc(100vw - 48px));
  }

  body.light-theme.desktop-side-menu-mode .modal.desktop-modal-float .modal-content {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
  }

  body.desktop-side-menu-mode .modal.desktop-modal-float .modal-header {
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

  body.desktop-side-menu-mode .modal.desktop-modal-float .modal-header:active {
    cursor: grabbing;
  }

  body.desktop-side-menu-mode .modal.desktop-modal-float.slide-in .modal-content,
  body.desktop-side-menu-mode .modal.desktop-modal-float.slide-out .modal-content {
    animation: none !important;
  }

  body.desktop-side-menu-mode .modal.desktop-modal-float .modal-content::before {
    display: none;
  }

  body.desktop-side-menu-mode #newJobSiteModal.desktop-modal-float { z-index: 1235; }
  body.desktop-side-menu-mode #editJobSiteModal.desktop-modal-float { z-index: 1236; }
  body.desktop-side-menu-mode #invoiceModal.desktop-modal-float { z-index: 1240; }
  body.desktop-side-menu-mode #estimateModal.desktop-modal-float { z-index: 1241; }
  body.desktop-side-menu-mode #invoiceViewModal.desktop-modal-float { z-index: 1242; }
  body.desktop-side-menu-mode #addPaymentModal.desktop-modal-float { z-index: 1245; }
  body.desktop-side-menu-mode #addSpendingModal.desktop-modal-float { z-index: 1246; }
  body.desktop-side-menu-mode #addMeasurementModal.desktop-modal-float { z-index: 1247; }
  body.desktop-side-menu-mode #addNoteModal.desktop-modal-float { z-index: 1248; }
  body.desktop-side-menu-mode #addChecklistModal.desktop-modal-float,
  body.desktop-side-menu-mode #editChecklistModal.desktop-modal-float { z-index: 1249; }
  body.desktop-side-menu-mode #addChecklistEnhancedModal.desktop-modal-float,
  body.desktop-side-menu-mode #editChecklistEnhancedModal.desktop-modal-float { z-index: 1250; }
  body.desktop-side-menu-mode #photoCaptionModal.desktop-modal-float { z-index: 1251; }
  body.desktop-side-menu-mode #pdfViewerModal.desktop-modal-float { z-index: 1255; }
  body.desktop-side-menu-mode #pdfPagePickerModal.desktop-modal-float { z-index: 1256; }

  body.desktop-side-menu-mode #invoiceViewModal.desktop-modal-float .modal-content {
    max-width: min(760px, calc(100vw - 48px));
    max-height: min(88vh, 920px);
  }

  body.desktop-side-menu-mode #addChecklistEnhancedModal.desktop-modal-float .modal-content,
  body.desktop-side-menu-mode #editChecklistEnhancedModal.desktop-modal-float .modal-content {
    max-width: min(560px, calc(100vw - 48px));
    max-height: min(86vh, 880px);
  }

  body.desktop-side-menu-mode #photoCaptionModal.desktop-modal-float .modal-content {
    max-width: min(420px, calc(100vw - 48px));
  }
}