/*
  =========================================================
  ACROV CONTROL

  FILE:
  shell/shell.css

  SYSTEM:
  MASTER APPLICATION SHELL

  PURPOSE:
  - Creates permanent ACROV CONTROL application geometry
  - Places Header Region across the top
  - Places Director Navigation on the left
  - Gives Dashboard Region all remaining workspace
  - Prevents application-level page scrolling
  - Keeps dashboard scrolling inside Dashboard Host
  - Matches the current index.php hardware exactly

  ARCHITECTURE:

  ACROV CONTROL
       │
       ├── HEADER REGION
       │      └── HEADER
       │
       ├── NAVIGATION
       │
       └── DASHBOARD REGION
              └── DASHBOARD HOST
                     └── DASHBOARD PAGE

  IMPORTANT:
  - Shell owns geometry only
  - Header owns internal appearance
  - Navigation owns internal appearance
  - Dashboard Host owns dashboard rendering
  - Dashboards own their own content
  =========================================================
*/


/* =========================================================
   SHELL VARIABLES
========================================================= */

:root {

  --acrov-header-height:
    56px;

  --acrov-navigation-width:
    196px;

  --acrov-navigation-height:
    64px;

}


/* =========================================================
   ACROV APPLICATION
========================================================= */

.acrov-control {

  width:
    100%;

  height:
    100vh;

  height:
    100dvh;

  min-width:
    0;

  min-height:
    0;

  position:
    relative;

  display:
    grid;

  grid-template-columns:
    var(--acrov-navigation-width)
    minmax(
      0,
      1fr
    );

  grid-template-rows:
    var(--acrov-header-height)
    minmax(
      0,
      1fr
    );

  grid-template-areas:
    "header header"
    "navigation dashboard";

  overflow:
    hidden;

  background:
    var(--acrov-background);

  color:
    var(--acrov-text);

}


/* =========================================================
   HEADER REGION

   CURRENT INDEX STRUCTURE:

   .acrov-control
       ↓
   .acrov-control-header-region
       ↓
   .acrov-control-header
========================================================= */

.acrov-control >
.acrov-control-header-region {

  grid-area:
    header;

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  position:
    relative;

  display:
    flex;

  align-items:
    stretch;

  overflow:
    hidden;

  z-index:
    var(--acrov-layer-header);

}


/* =========================================================
   HEADER INSIDE REGION
========================================================= */

.acrov-control-header-region >
.acrov-control-header {

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  position:
    relative;

  flex:
    1 1 auto;

}


/* =========================================================
   NAVIGATION POSITION
========================================================= */

.acrov-control >
.acrov-control-navigation {

  grid-area:
    navigation;

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  position:
    relative;

  overflow:
    hidden;

  z-index:
    var(--acrov-layer-navigation);

}


/* =========================================================
   DASHBOARD REGION POSITION
========================================================= */

.acrov-control >
.acrov-control-dashboard-region {

  grid-area:
    dashboard;

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  position:
    relative;

  display:
    flex;

  overflow:
    hidden;

}


/* =========================================================
   DASHBOARD HOST SAFETY
========================================================= */

.acrov-control-dashboard-region >
.acrov-control-dashboard-host {

  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  flex:
    1 1 auto;

}


/* =========================================================
   APPLICATION READY
========================================================= */

.acrov-control[
  data-acrov-control-ready="true"
] {

  visibility:
    visible;

}


/* =========================================================
   APPLICATION LOADING
========================================================= */

.acrov-control[
  data-acrov-loading="true"
] {

  cursor:
    progress;

}


/* =========================================================
   APPLICATION LOCK
========================================================= */

.acrov-control[
  data-acrov-locked="true"
] {

  pointer-events:
    none;

  user-select:
    none;

}


/* =========================================================
   TABLET
========================================================= */

@media (
  max-width: 900px
) {

  :root {

    --acrov-navigation-width:
      76px;

  }


  .acrov-control {

    grid-template-columns:
      var(--acrov-navigation-width)
      minmax(
        0,
        1fr
      );

  }

}


/* =========================================================
   MOBILE

   HEADER:
   TOP

   DASHBOARD:
   CENTER

   NAVIGATION:
   BOTTOM
========================================================= */

@media (
  max-width: 600px
) {

  :root {

    --acrov-header-height:
      52px;

    --acrov-navigation-height:
      64px;

  }


  .acrov-control {

    grid-template-columns:
      minmax(
        0,
        1fr
      );

    grid-template-rows:
      var(--acrov-header-height)
      minmax(
        0,
        1fr
      )
      var(--acrov-navigation-height);

    grid-template-areas:
      "header"
      "dashboard"
      "navigation";

  }


  .acrov-control >
  .acrov-control-navigation {

    width:
      100%;

    height:
      100%;

  }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (
  max-width: 380px
) {

  :root {

    --acrov-header-height:
      50px;

    --acrov-navigation-height:
      60px;

  }

}


/* =========================================================
   SAFE AREA SUPPORT
========================================================= */

@supports (
  padding:
    env(
      safe-area-inset-bottom
    )
) {

  @media (
    max-width: 600px
  ) {

    :root {

      --acrov-navigation-height:
        calc(
          64px +
          env(
            safe-area-inset-bottom
          )
        );

    }

  }

}


/* =========================================================
   PRINT
========================================================= */

@media print {

  .acrov-control {

    display:
      none !important;

  }

}