/* =========================================================
   LIFTRIX PC Layout
   PC Shell / Main / Page Container

   Role:
   - PC app shell
   - PC sidebar offset
   - PC main area
   - PC page container
   - Admin / Trainer / Client PC frame start alignment

   Important:
   - Tablet layout is handled by tablet_foundation.css.
   - Page-specific visual design belongs to each page CSS.
   - This file owns PC outer layout only.
   - Do NOT duplicate appShell / appMain / pageContainer rules below.
========================================================= */

/* =========================================================
   PC Base Variables
========================================================= */

@media (min-width:1200px){
  :root{
    --admin-pc-frame-y:2px;
    --admin-pc-frame-x:var(--page-gutter);
    --admin-pc-frame-bottom:12px;
  }
}

/* =========================================================
   PC Shell Foundation
========================================================= */

@media (min-width:1200px){
  .appShell{
    display:flex;
    align-items:stretch;
  }

  .appMain{
    flex:1 1 auto;
  }
}

/* =========================================================
   PC Base Layout
========================================================= */

@media (min-width:1200px){

  .appShell{
    min-height:100dvh;
  }

  .appShell--plain{
    min-height:100dvh;
  }

  .appMain{
    min-width:0;
    min-height:100dvh;
    margin-left:var(--sidebar-w);
    padding:2px var(--page-gutter) clamp(20px, 2vw, 30px);
    display:flex;
    flex-direction:column;
  }

  .appMain--plain{
    margin-left:0;
    padding:0;
    min-height:100dvh;
  }

  .pageContainer{
    width:min(100%, var(--content-max));
    margin:0 auto;
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
}

/* =========================================================
   Page Container Modifiers
========================================================= */

.pageContainer--plain{
  width:100%;
  max-width:none;
}

.pageContainer--wide{
  width:min(100%, var(--content-wide));
}

.pageContainer--full{
  width:100%;
  max-width:none;
}

/* =========================================================
   Page Common
========================================================= */

.pageWrap{
  width:100%;
  min-width:0;
}

.pageHeader{
  margin-bottom:clamp(12px, 1.6vw, 20px);
}

.pageTitle{
  margin:0;
  font-size:var(--title-size);
  font-weight:var(--font-weight-title);
  line-height:1.2;
  letter-spacing:0.01em;
  color:var(--text-main);
}

.pageGrid{
  display:grid;
  gap:var(--section-gap);
}

/* =========================================================
   PC No Page Scroll Final Override
   Admin / Trainer / Client Desktop
========================================================= */

@media (min-width:1200px){

  body.adminDashboardScreenV2,
  body.adminGraphsPcScreen,
  body.calendarScreen,
  body.recordsScreen,
  body.adminClientsScreen,
  body.adminTrainersScreen,
  body.adminAssignmentsScreen,
  body.reportProgressScreen,
  body.adminLogsScreen,
  body.adminClientCreateScreen,
  body.trainerDashboardScreen,
  body.goalsScreen,
  body.trainerClientGraphsScreen,
  body.trainerTrainingProgramCreateScreen,
  body.trainerClientProgramScreen,
  body.clientDashboardDesktopScreen,
  body.clientCalendarDesktopScreen,
  body.clientGraphsDesktopScreen,
  body.clientRecordsDesktopScreen,
  body.clientInputDesktopScreen,
  body.clientSelfActivityDesktopScreen{
    height:100vh !important;
    max-height:100vh !important;
    overflow:hidden !important;
  }

  body.adminDashboardScreenV2 .appShell,
  body.adminGraphsPcScreen .appShell,
  body.calendarScreen .appShell,
  body.recordsScreen .appShell,
  body.adminClientsScreen .appShell,
  body.adminTrainersScreen .appShell,
  body.adminAssignmentsScreen .appShell,
  body.reportProgressScreen .appShell,
  body.adminLogsScreen .appShell,
  body.adminClientCreateScreen .appShell,
  body.trainerDashboardScreen .appShell,
  body.goalsScreen .appShell,
  body.trainerClientGraphsScreen .appShell,
  body.trainerTrainingProgramCreateScreen .appShell,
  body.trainerClientProgramScreen .appShell,
  body.clientDashboardDesktopScreen .appShell,
  body.clientCalendarDesktopScreen .appShell,
  body.clientGraphsDesktopScreen .appShell,
  body.clientRecordsDesktopScreen .appShell,
  body.clientInputDesktopScreen .appShell,
  body.clientSelfActivityDesktopScreen .appShell{
    display:flex !important;
    height:100vh !important;
    max-height:100vh !important;
    overflow:hidden !important;
  }

  body.adminDashboardScreenV2 .appMain,
  body.adminGraphsPcScreen .appMain,
  body.calendarScreen .appMain,
  body.recordsScreen .appMain,
  body.adminClientsScreen .appMain,
  body.adminTrainersScreen .appMain,
  body.adminAssignmentsScreen .appMain,
  body.reportProgressScreen .appMain,
  body.adminLogsScreen .appMain,
  body.adminClientCreateScreen .appMain,
  body.trainerDashboardScreen .appMain,
  body.goalsScreen .appMain,
  body.trainerClientGraphsScreen .appMain,
  body.trainerTrainingProgramCreateScreen .appMain,
  body.trainerClientProgramScreen .appMain,
  body.clientDashboardDesktopScreen .appMain,
  body.clientCalendarDesktopScreen .appMain,
  body.clientGraphsDesktopScreen .appMain,
  body.clientRecordsDesktopScreen .appMain,
  body.clientInputDesktopScreen .appMain,
  body.clientSelfActivityDesktopScreen .appMain{
    height:100vh !important;
    max-height:100vh !important;
    min-height:0 !important;
    padding-top:2px !important;
    overflow:hidden !important;
  }

  body.adminDashboardScreenV2 .pageContainer,
  body.adminGraphsPcScreen .pageContainer,
  body.calendarScreen .pageContainer,
  body.recordsScreen .pageContainer,
  body.adminClientsScreen .pageContainer,
  body.adminTrainersScreen .pageContainer,
  body.adminAssignmentsScreen .pageContainer,
  body.reportProgressScreen .pageContainer,
  body.adminLogsScreen .pageContainer,
  body.adminClientCreateScreen .pageContainer,
  body.trainerDashboardScreen .pageContainer,
  body.goalsScreen .pageContainer,
  body.trainerClientGraphsScreen .pageContainer,
  body.trainerTrainingProgramCreateScreen .pageContainer,
  body.trainerClientProgramScreen .pageContainer,
  body.clientDashboardDesktopScreen .pageContainer,
  body.clientCalendarDesktopScreen .pageContainer,
  body.clientGraphsDesktopScreen .pageContainer,
  body.clientRecordsDesktopScreen .pageContainer,
  body.clientInputDesktopScreen .pageContainer,
  body.clientSelfActivityDesktopScreen .pageContainer{
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
}