/**
 * Strict UI Layout Standard — shared grid shell
 * Link from every staff page UI (Admin, 2D Main, 3D Main, …).
 */

@import url("./typography-standard.css");
@import url("./ui-smoothness.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 1. Full-screen responsive frame */
.app-fullscreen-frame {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

/* 2. 20 × 15 grid container */
.grid-20x15-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(15, 1fr);
  gap: 4px;
  padding: 4px;
}

/* 3. Base structure — three zones only */
.my-header,
.my-sidebar,
.my-workspace {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.my-header {
  grid-column: 1 / 21;
  grid-row: 1 / 2;
}

.my-sidebar {
  grid-column: 1 / 5;
  grid-row: 2 / 16;
}

.my-workspace {
  grid-column: 5 / 21;
  grid-row: 2 / 16;
}

@media (max-width: 1024px) {
  .my-sidebar {
    grid-column: 1 / 6;
  }

  .my-workspace {
    grid-column: 6 / 21;
  }
}

@media (max-width: 680px) {
  html,
  body {
    overflow-y: auto;
  }

  .app-fullscreen-frame {
    height: auto;
    min-height: 100vh;
  }

  .grid-20x15-container {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .my-header,
  .my-sidebar,
  .my-workspace {
    grid-column: unset;
    grid-row: unset;
    width: 100%;
  }

  .my-sidebar {
    max-height: 240px;
  }
}

/* Legacy parity — toggle visibility (division list, pause banner, modals, …) */
.hidden {
  display: none !important;
}