/* =========================================================
   training_app_v3 / static/css/app_ui.css
   Core UI - all pages / all display responsive foundation
   LIFTRIX Blue System final unified edition
========================================================= */

/* =========================================================
   Root Variables
========================================================= */

:root{
  --bg-0:#04142F;
  --bg-1:#0F1A2B;
  --bg-2:#1A2742;
  --bg-3:#1F2F4D;
  --bg-4:#2A3F66;

  --bg:var(--bg-1);

  --panel:#14213A;
  --panel-2:#1A2945;
  --panel-3:#223556;

  --surface-0:rgba(15, 26, 43, 0.96);
  --surface-1:rgba(26, 39, 66, 0.92);
  --surface-2:rgba(31, 47, 77, 0.94);
  --surface-3:rgba(42, 63, 102, 0.94);

  --text:#F4F8FF;
  --text-main:#F4F8FF;
  --text-soft:#DCE9FF;
  --text-sub:rgba(226,236,255,0.78);
  --text-muted:rgba(226,236,255,0.55);
  --muted:#9FB0CB;

  --border:rgba(125,170,255,0.14);
  --border-strong:rgba(125,170,255,0.25);
  --border-soft:rgba(125,170,255,0.08);

  --primary:#3FA9FF;
  --primary-strong:#1E4FD8;
  --primary-soft:rgba(63,169,255,0.18);
  --primary-glow:rgba(63,169,255,0.25);

  --highlight:#3FA9FF;
  --highlight-soft:rgba(63,169,255,0.18);

  --success:#25B8AA;
  --success-bg:rgba(37,184,170,0.18);
  --success-border:rgba(89,224,206,0.28);

  --info:#6E9BF3;
  --info-bg:rgba(110,155,243,0.25);
  --info-border:rgba(154,191,255,0.36);

  --warn:#FFC45C;
  --warn-bg:rgba(255,196,92,0.16);
  --warn-border:rgba(255,210,125,0.24);

  --danger:#FF5C5C;
  --danger-soft:#FF7D87;
  --danger-bg:rgba(255,92,92,0.16);
  --danger-border:rgba(255,120,120,0.24);

  --radius-xs:10px;
  --radius-sm:12px;
  --radius:16px;
  --radius-lg:20px;
  --radius-pill:999px;

  --shadow:
    0 20px 48px rgba(5, 10, 20, 0.34),
    0 8px 20px rgba(10, 24, 52, 0.22);

  --shadow-soft:
    0 12px 28px rgba(5, 10, 20, 0.22),
    0 4px 12px rgba(10, 24, 52, 0.16);

  --shadow-card:
    0 10px 24px rgba(7, 18, 41, 0.18),
    0 4px 10px rgba(7, 18, 41, 0.10);

  --shadow-focus:
    0 0 0 3px rgba(63, 169, 255, 0.16);

  --sidebar-w:clamp(200px, 15vw, 230px);

  --page-gutter:clamp(12px, 1.8vw, 24px);
  --page-gutter-tight:clamp(8px, 1.2vw, 16px);

  --content-max:1200px;
  --content-wide:1440px;
  --content-full:none;

  --header-gap:clamp(8px, 1vw, 18px);
  --section-gap:clamp(12px, 1.2vw, 20px);
  --card-pad:clamp(12px, 1.2vw, 18px);

  --title-size:clamp(20px, 1.5vw, 24px);
  --title-size-compact:clamp(18px, 1.3vw, 20px);

  --sidebar-z:100;

  --space-0:4px;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:24px;

  --text-title:18px;
  --text-section:15px;
  --text-body:13px;
  --text-caption:12px;

  --font-weight-body:400;
  --font-weight-label:600;
  --font-weight-button:700;
  --font-weight-title:800;

  --control-h:40px;
  --control-radius:10px;

  --page-bg-gradient:
    linear-gradient(
      180deg,
      #1A2F66 0%,
      #10244F 45%,
      #04142F 100%
    );

  --page-overlay-top:
    radial-gradient(
      circle at 50% 18%,
      rgba(63, 169, 255, 0.10) 0%,
      rgba(63, 169, 255, 0.04) 18%,
      rgba(63, 169, 255, 0.00) 42%
    );

  --page-overlay-depth:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.015) 0%,
      rgba(255,255,255,0.00) 30%,
      rgba(0,0,0,0.08) 100%
    );
}

/* =========================================================
   Reset
========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  height:100%;
  min-height:100%;
}

html{
  background:var(--bg-1);
}

body{
  margin:0;
  position:relative;
  overflow-x:hidden;

  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Noto Sans JP",
    Meiryo,
    sans-serif;

  background:var(--page-bg-gradient);
  color:var(--text-main);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:var(--page-overlay-top);
  opacity:.85;
  z-index:0;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:var(--page-overlay-depth);
  z-index:0;
}

.appShell,
.appMain,
.pageContainer,
.pageWrap,
.sidebar{
  position:relative;
  z-index:1;
}

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

.appShell{
  min-height:100vh;
}

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

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

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

.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;
}

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

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

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

.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);
}

/* =========================================================
   Sidebar
========================================================= */

.sidebar{
  position:fixed;
  top:0;
  left:0;
  z-index:var(--sidebar-z);

  width:var(--sidebar-w);
  height:100vh;

  background:
    linear-gradient(
      180deg,
      rgba(26, 39, 66, 0.96) 0%,
      rgba(20, 33, 58, 0.98) 45%,
      rgba(15, 26, 43, 0.995) 100%
    );
  border-right:1px solid var(--border);
  box-shadow:18px 0 40px rgba(6, 10, 20, 0.22);
  padding:14px;

  overflow-y:auto;
  overflow-x:hidden;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.sidebar__inner{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
}

.sidebar__brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:12px 0 20px;
  border:none;
  border-radius:0;
  background:none;
  box-shadow:none;
  text-decoration:none;
}

.sidebar__brandLogoWide{
  width:142px;
  height:auto;
  max-height:36px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
  filter:drop-shadow(0 6px 16px rgba(63,169,255,0.18));
}

.sidebar__brand:hover .sidebar__brandLogoWide{
  filter:drop-shadow(0 8px 18px rgba(63,169,255,0.24));
}

.sidebar__logo,
.sidebar__brandText,
.sidebar__brandTitle{
  display:none !important;
}

.sidebar__section{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.sidebar__footer{
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:10px;
}

.sidebar__footer .sideLink{
  justify-content:center;
  text-align:center;
}

.sidebar__tenantId,
.sidebar__loginId{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  letter-spacing:0.02em;
  word-break:break-word;
}

.sidebar__tenantId{
  margin:0 0 6px 0;
  padding:0 4px;
}

.sidebar__loginId{
  margin:0 0 10px 0;
  padding:0 4px;
}

/* =========================================================
   Sidebar Links
========================================================= */

.sideLink{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:0 14px;

  border-radius:10px;
  border:1px solid transparent;

  color:var(--text-soft);
  text-decoration:none;
  font-size:15px;
  font-weight:700;

  transition:
    background .16s ease,
    border-color .16s ease,
    transform .12s ease,
    box-shadow .16s ease,
    color .16s ease;
}

.sideLink:hover{
  background:
    linear-gradient(
      180deg,
      rgba(42, 63, 102, 0.34) 0%,
      rgba(31, 47, 77, 0.38) 100%
    );
  border-color:var(--border);
  color:var(--text-main);
  transform:translateX(1px);
}

.sideLink.is-active{
  background:
    linear-gradient(
      180deg,
      rgba(30, 79, 216, 0.22) 0%,
      rgba(24, 63, 175, 0.18) 100%
    );
  border-color:rgba(63, 169, 255, 0.26);
  color:var(--text-main);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 16px rgba(7, 18, 41, 0.22);
}

/* =========================================================
   Cards
========================================================= */

.card{
  background:
    linear-gradient(
      180deg,
      rgba(26, 41, 69, 0.92) 0%,
      rgba(20, 33, 58, 0.96) 100%
    );
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--card-pad);
  box-shadow:var(--shadow-card);

  display:flex;
  flex-direction:column;
  gap:var(--space-2);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.card:hover{
  box-shadow:var(--shadow-soft);
  border-color:var(--border-strong);
}

.cardTitle{
  margin:0 0 var(--space-1);
  font-size:16px;
  font-weight:var(--font-weight-title);
  line-height:1.3;
  color:var(--text-main);
}

.cardHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
}

/* =========================================================
   Typography
========================================================= */

.h1{
  font-size:22px;
  font-weight:var(--font-weight-title);
  line-height:1.2;
  color:var(--text-main);
}

.h2{
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  color:var(--text-main);
}

.h3{
  font-size:15px;
  font-weight:700;
  line-height:1.35;
  color:var(--text-main);
}

.bodyText{
  font-size:13px;
  line-height:1.55;
  color:var(--text-soft);
}

.captionText{
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.muted{
  color:var(--muted);
}

.emptyNote{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* =========================================================
   Alerts
========================================================= */

.alertSuccess,
.alertError{
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

.alertSuccess{
  background:rgba(34, 197, 94, 0.10);
  border-color:rgba(120, 220, 160, 0.22);
  color:var(--text-main);
}

.alertError{
  background:rgba(239, 68, 68, 0.10);
  border-color:rgba(255, 125, 135, 0.20);
  color:var(--text-main);
}

/* =========================================================
   Top Toast
========================================================= */

.topToast{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:4000;

  display:flex;
  justify-content:center;
  align-items:flex-start;

  padding:
    calc(env(safe-area-inset-top, 0px) + 8px)
    12px
    0;

  pointer-events:none;
  opacity:0;
  transform:translateY(-18px);
  animation:topToastInOut var(--toast-duration, 1.3s) ease forwards;
  box-sizing:border-box;
}

.topToast__inner{
  width:min(100%, 420px);
  min-height:44px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:12px 16px;
  border-radius:16px;
  border:1px solid var(--toast-border, rgba(63, 169, 255, 0.28));

  background:
    linear-gradient(
      180deg,
      var(--toast-bg-top, rgba(83, 150, 255, 0.98)) 0%,
      var(--toast-bg-bottom, rgba(30, 79, 216, 0.96)) 100%
    );

  color:#F8FBFF;
  font-size:13px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:0.01em;
  text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,0.18);

  box-shadow:
    0 14px 30px rgba(6, 16, 34, 0.28),
    0 6px 18px rgba(10, 24, 52, 0.22);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.topToast.is-success{
  --toast-bg-top:rgba(83, 150, 255, 0.98);
  --toast-bg-bottom:rgba(30, 79, 216, 0.96);
  --toast-border:rgba(63, 169, 255, 0.30);
  --toast-duration:1.25s;
}

.topToast.is-error{
  --toast-bg-top:rgba(196, 69, 80, 0.98);
  --toast-bg-bottom:rgba(176, 54, 64, 0.96);
  --toast-border:rgba(255, 125, 135, 0.28);
  --toast-duration:1.7s;
}

.topToast.is-delete{
  --toast-bg-top:rgba(143, 58, 67, 0.98);
  --toast-bg-bottom:rgba(124, 49, 57, 0.96);
  --toast-border:rgba(255, 125, 135, 0.24);
  --toast-duration:1.3s;
}

.topToast.is-cancel{
  --toast-bg-top:rgba(78, 97, 132, 0.98);
  --toast-bg-bottom:rgba(63, 80, 112, 0.96);
  --toast-border:rgba(159, 176, 203, 0.24);
  --toast-duration:1.3s;
}

.topToast.is-info{
  --toast-bg-top:rgba(54, 78, 124, 0.98);
  --toast-bg-bottom:rgba(42, 63, 102, 0.96);
  --toast-border:rgba(136, 167, 220, 0.24);
  --toast-duration:1.4s;
}

@keyframes topToastInOut{
  0%{
    opacity:0;
    transform:translateY(-18px);
  }
  12%{
    opacity:1;
    transform:translateY(0);
  }
  78%{
    opacity:1;
    transform:translateY(0);
  }
  100%{
    opacity:0;
    transform:translateY(-14px);
  }
}

/* =========================================================
   Buttons
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  height:var(--control-h);
  padding:0 14px;

  border-radius:var(--control-radius);
  border:1px solid var(--border);

  background:
    linear-gradient(
      180deg,
      rgba(30, 44, 72, 0.90) 0%,
      rgba(20, 33, 58, 0.96) 100%
    );
  color:var(--text-main);

  cursor:pointer;
  text-decoration:none;
  font:inherit;
  font-size:13px;
  font-weight:var(--font-weight-button);
  line-height:1;

  white-space:nowrap;

  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);

  transition:
    background .18s ease,
    transform .12s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.btn:hover{
  background:
    linear-gradient(
      180deg,
      rgba(34, 53, 87, 0.94) 0%,
      rgba(26, 41, 69, 0.98) 100%
    );
  border-color:var(--border-strong);
  transform:translateY(-1px);
}

.btn:focus-visible{
  outline:none;
  box-shadow:var(--shadow-focus);
}

.btnPrimary,
.btn-primary{
  background:
    linear-gradient(
      180deg,
      #56B9FF 0%,
      var(--primary) 42%,
      var(--primary-strong) 100%
    );
  border-color:rgba(63, 169, 255, 0.34);
  color:#F8FBFF;
  box-shadow:
    0 10px 24px rgba(13, 33, 76, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.btnPrimary:hover,
.btn-primary:hover{
  background:
    linear-gradient(
      180deg,
      #6BC3FF 0%,
      #49B1FF 42%,
      #245BE5 100%
    );
  border-color:rgba(63, 169, 255, 0.44);
}

.btn-danger{
  background:
    linear-gradient(
      180deg,
      rgba(116, 36, 45, 0.94) 0%,
      rgba(82, 28, 35, 0.98) 100%
    );
  border-color:rgba(255, 125, 135, 0.18);
}

.btn-danger:hover{
  background:
    linear-gradient(
      180deg,
      rgba(138, 43, 54, 0.96) 0%,
      rgba(98, 33, 41, 1) 100%
    );
  border-color:rgba(255, 125, 135, 0.28);
}

/* =========================================================
   Badges
========================================================= */

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
}

.badge-success{
  color:var(--success);
  border-color:rgba(120, 220, 160, 0.20);
}

.badge-danger{
  color:var(--danger-soft);
  border-color:rgba(255, 125, 135, 0.20);
}

/* =========================================================
   Forms
========================================================= */

input,
select,
textarea{
  width:100%;
  border-radius:var(--control-radius);
  border:1px solid var(--border);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045) 0%,
      rgba(255,255,255,0.022) 100%
    );
  color:var(--text-main);
  font:inherit;
  font-size:13px;
  outline:none;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

input,
select{
  height:var(--control-h);
  padding:0 12px;
}

textarea{
  min-height:96px;
  padding:10px 12px;
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:var(--muted);
}

input:hover,
select:hover,
textarea:hover{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.060) 0%,
      rgba(255,255,255,0.032) 100%
    );
  border-color:rgba(136, 167, 220, 0.22);
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--highlight);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.070) 0%,
      rgba(255,255,255,0.036) 100%
    );
  box-shadow:
    0 0 0 3px rgba(63, 169, 255, 0.16),
    0 8px 20px rgba(10, 24, 52, 0.16);
}

input:disabled,
select:disabled,
textarea:disabled{
  opacity:.65;
  cursor:not-allowed;
}

select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  color-scheme:dark;
  padding-right:34px;
}

select option{
  background:#172643;
  color:#ffffff;
}

.formGrid{
  display:grid;
  gap:12px;
}

.formField{
  display:grid;
  gap:6px;
}

.formLabel{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  line-height:1.4;
}

/* =========================================================
   Tables
========================================================= */

.tableWrap{
  overflow-x:auto;
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.table td{
  padding:12px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
}

.table th{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.table td{
  color:var(--text-soft);
}

/* =========================================================
   Utilities
========================================================= */

.sectionStack{
  display:grid;
  gap:16px;
}

.actionRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pageSubtle{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.grid2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.stackXs{
  display:grid;
  gap:var(--space-1);
}

.stackSm{
  display:grid;
  gap:var(--space-2);
}

.stackMd{
  display:grid;
  gap:var(--space-3);
}

.row{
  display:flex;
  align-items:center;
  gap:var(--space-2);
}

.rowBetween{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
}

.alignStart{
  align-items:flex-start;
}

.alignCenter{
  align-items:center;
}

/* =========================================================
   Workspace Screens
   page scroll OFF
========================================================= */

body.graphsScreen,
body.clientGraphsScreen,
body.trainerGraphsScreen,
body.adminGraphsScreen,
body.recordsScreen,
body.adminClientsScreen{
  overflow:hidden;
  min-height:100vh;
}

body.graphsScreen .appShell,
body.clientGraphsScreen .appShell,
body.trainerGraphsScreen .appShell,
body.adminGraphsScreen .appShell,
body.recordsScreen .appShell,
body.adminClientsScreen .appShell{
  min-height:100vh;
  height:100vh;
  overflow:hidden;
}

body.graphsScreen .appMain,
body.clientGraphsScreen .appMain,
body.trainerGraphsScreen .appMain,
body.adminGraphsScreen .appMain,
body.recordsScreen .appMain,
body.adminClientsScreen .appMain{
  min-width:0;
  min-height:0;
  height:100vh;
  margin-left:var(--sidebar-w);
  padding:0 var(--page-gutter-tight) clamp(16px, 1.8vw, 20px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

body.graphsScreen .pageContainer,
body.clientGraphsScreen .pageContainer,
body.trainerGraphsScreen .pageContainer,
body.adminGraphsScreen .pageContainer,
body.recordsScreen .pageContainer,
body.adminClientsScreen .pageContainer{
  width:100%;
  max-width:none;
  margin:0;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

body.graphsScreen .pageWrap,
body.clientGraphsScreen .pageWrap,
body.trainerGraphsScreen .pageWrap,
body.adminGraphsScreen .pageWrap,
body.recordsScreen .pageWrap,
body.adminClientsScreen .pageWrap{
  width:100%;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* =========================================================
   Calendar Screen Layout
========================================================= */

body.calendarScreen{
  overflow:hidden;
  min-height:100vh;
  height:100vh;
}

body.calendarScreen .appShell{
  min-height:100vh;
  height:100vh;
  overflow:hidden;
}

body.calendarScreen .appMain{
  min-width:0;
  min-height:0;
  height:100vh;
  margin-left:var(--sidebar-w);
  padding:4px var(--page-gutter-tight) 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

body.calendarScreen .pageContainer{
  width:100%;
  max-width:none;
  margin:0;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:0 0 clamp(16px, 1.8vw, 20px);
  overflow:hidden;
}

body.calendarScreen .pageWrap,
body.calendarScreen .calendarPage,
body.calendarScreen .clientCalendarPage{
  width:100%;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

body.calendarScreen .pageHeader{
  margin-bottom:6px;
  flex:0 0 auto;
}

body.calendarScreen .pageTitle{
  font-size:var(--title-size-compact);
  line-height:1.08;
}

body.calendarScreen .pageGrid{
  gap:8px;
  flex:1 1 auto;
  min-height:0;
}

body.calendarScreen .card{
  padding:clamp(10px, 1vw, 14px);
}

/* =========================================================
   Shared compact workspace typography
========================================================= */

body.graphsScreen .pageHeader,
body.clientGraphsScreen .pageHeader,
body.trainerGraphsScreen .pageHeader,
body.adminGraphsScreen .pageHeader,
body.recordsScreen .pageHeader,
body.adminClientsScreen .pageHeader{
  margin-bottom:var(--header-gap);
}

body.graphsScreen .pageTitle,
body.clientGraphsScreen .pageTitle,
body.trainerGraphsScreen .pageTitle,
body.adminGraphsScreen .pageTitle,
body.recordsScreen .pageTitle,
body.adminClientsScreen .pageTitle{
  font-size:var(--title-size-compact);
  line-height:1.1;
}

body.graphsScreen .pageGrid,
body.clientGraphsScreen .pageGrid,
body.trainerGraphsScreen .pageGrid,
body.adminGraphsScreen .pageGrid,
body.recordsScreen .pageGrid,
body.adminClientsScreen .pageGrid{
  gap:var(--header-gap);
  flex:1 1 auto;
  min-height:0;
}

body.graphsScreen .card,
body.clientGraphsScreen .card,
body.trainerGraphsScreen .card,
body.adminGraphsScreen .card,
body.recordsScreen .card,
body.adminClientsScreen .card{
  padding:clamp(10px, 1vw, 14px);
}

/* =========================================================
   Detail / Document Style Screens
========================================================= */

body.trainerClientDetailScreen{
  overflow-y:auto;
  min-height:100vh;
}

body.trainerClientDetailScreen .appShell{
  min-height:100vh;
  overflow:visible;
}

body.trainerClientDetailScreen .appMain{
  min-width:0;
  min-height:100vh;
  height:auto;
  margin-left:var(--sidebar-w);
  padding:0 var(--page-gutter) clamp(22px, 2vw, 30px);
  display:block;
  overflow:visible;
}

body.trainerClientDetailScreen .pageContainer{
  width:min(100%, var(--content-max));
  margin:0 auto;
  min-height:auto;
  display:block;
  overflow:visible;
}

/* =========================================================
   Large Desktop
========================================================= */

@media (min-width:1600px){
  :root{
    --content-max:1320px;
    --content-wide:1560px;
  }
}

/* =========================================================
   Standard Laptop / Small Desktop
========================================================= */

@media (max-width:1280px){
  :root{
    --sidebar-w:clamp(190px, 15vw, 215px);
    --content-max:1160px;
  }
}

/* =========================================================
   Tablet Landscape / Narrow Laptop
========================================================= */

@media (max-width:980px){
  :root{
    --sidebar-w:100%;
    --page-gutter:16px;
    --page-gutter-tight:10px;
  }

  .sidebar{
    position:static;
    width:100%;
    height:auto;
    border-right:none;
    border-bottom:1px solid var(--border);
    box-shadow:none;
    padding:14px;
  }

  .sidebar__brand{
    padding:4px 2px 8px;
  }

  .sidebar__brandLogoWide{
    width:140px;
    max-height:34px;
  }

  .appMain,
  body.graphsScreen .appMain,
  body.clientGraphsScreen .appMain,
  body.trainerGraphsScreen .appMain,
  body.adminGraphsScreen .appMain,
  body.recordsScreen .appMain,
  body.adminClientsScreen .appMain,
  body.calendarScreen .appMain,
  body.trainerClientDetailScreen .appMain{
    margin-left:0;
    width:auto;
    min-height:auto;
    height:auto;
    padding:0 var(--page-gutter) 24px;
  }

  .pageContainer,
  body.trainerClientDetailScreen .pageContainer{
    width:100%;
    max-width:none;
  }

  body.graphsScreen,
  body.clientGraphsScreen,
  body.trainerGraphsScreen,
  body.adminGraphsScreen,
  body.recordsScreen,
  body.adminClientsScreen,
  body.calendarScreen{
    overflow:auto;
    height:auto;
  }

  body.graphsScreen .appShell,
  body.clientGraphsScreen .appShell,
  body.trainerGraphsScreen .appShell,
  body.adminGraphsScreen .appShell,
  body.recordsScreen .appShell,
  body.adminClientsScreen .appShell,
  body.calendarScreen .appShell{
    height:auto;
    min-height:100vh;
    overflow:visible;
  }

  body.graphsScreen .appMain,
  body.clientGraphsScreen .appMain,
  body.trainerGraphsScreen .appMain,
  body.adminGraphsScreen .appMain,
  body.recordsScreen .appMain,
  body.adminClientsScreen .appMain,
  body.calendarScreen .appMain{
    overflow:visible;
  }

  body.graphsScreen .pageContainer,
  body.clientGraphsScreen .pageContainer,
  body.trainerGraphsScreen .pageContainer,
  body.adminGraphsScreen .pageContainer,
  body.recordsScreen .pageContainer,
  body.adminClientsScreen .pageContainer,
  body.calendarScreen .pageContainer{
    overflow:visible;
  }

  body.graphsScreen .pageWrap,
  body.clientGraphsScreen .pageWrap,
  body.trainerGraphsScreen .pageWrap,
  body.adminGraphsScreen .pageWrap,
  body.recordsScreen .pageWrap,
  body.adminClientsScreen .pageWrap,
  body.calendarScreen .pageWrap,
  body.calendarScreen .calendarPage,
  body.calendarScreen .clientCalendarPage{
    overflow:visible;
  }

  .grid2,
  .grid3{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   Mobile / Very Narrow
========================================================= */

@media (max-width:640px){
  :root{
    --page-gutter:14px;
    --page-gutter-tight:8px;
    --card-pad:12px;
    --control-h:38px;
  }

  .sidebar__brand{
    padding:2px 0 6px;
  }

  .sidebar__brandLogoWide{
    width:128px;
    max-height:32px;
  }

  .appMain,
  body.graphsScreen .appMain,
  body.clientGraphsScreen .appMain,
  body.trainerGraphsScreen .appMain,
  body.adminGraphsScreen .appMain,
  body.recordsScreen .appMain,
  body.adminClientsScreen .appMain,
  body.calendarScreen .appMain,
  body.trainerClientDetailScreen .appMain{
    padding:0 var(--page-gutter) 22px;
  }

  .pageTitle{
    font-size:clamp(18px, 4.8vw, 22px);
  }

  .sideLink{
    min-height:38px;
    font-size:13px;
  }

  .btn{
    width:100%;
  }

  .actionRow{
    flex-direction:column;
    align-items:stretch;
  }

  .topToast{
    padding:
      calc(env(safe-area-inset-top, 0px) + 6px)
      10px
      0;
  }

  .topToast__inner{
    width:100%;
    min-height:42px;
    padding:11px 14px;
    border-radius:14px;
    font-size:12px;
  }
}

/* =========================================================
   Login Screen
========================================================= */

body.loginBody{
  overflow:hidden;
  min-height:100vh;
  height:100vh;
}

body.loginBody .appShell{
  height:100vh;
  min-height:100vh;
}

body.loginBody .appMain{
  margin-left:0 !important;
  padding:0 !important;
  height:100vh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body.loginBody .pageContainer{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  height:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
}

body.loginBody .pageWrap{
  height:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* =========================================================
   App WebView Mode
========================================================= */

body.isAppWebView .mobileBottomNavWrap,
body.isAppWebView .mobileBottomNav,
body.isAppWebView .mobileBottomNav__item,
body.isAppWebView .mobileBottomNav__icon,
body.isAppWebView .mobileBottomNav__label,
body.isAppWebView .mobile-bottom-nav,
body.isAppWebView .bottomNav,
body.isAppWebView .bottom-nav,
body.isAppWebView .clientBottomNav,
body.isAppWebView .client-bottom-nav,
body.isAppWebView .mobileTabBar,
body.isAppWebView .mobile-tab-bar,
body.isAppWebView .clientMobileBottomNav,
body.isAppWebView .client-mobile-bottom-nav,
body.isAppWebView nav[aria-label="モバイルナビゲーション"],
body.isAppWebView nav[aria-label="mobile bottom navigation"],
body.isAppWebView nav[aria-label="bottom navigation"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

body.isAppWebView{
  padding-bottom:0 !important;
}

body.isAppWebView .appShell,
body.isAppWebView .appMain,
body.isAppWebView .pageContainer,
body.isAppWebView .pageWrap{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}