/*
 * EPTMIS Django Admin shell layout
 *
 * This file intentionally loads after eptmis_admin.css and owns only the
 * responsive page shell: header, sidebar, main content width, dashboard
 * columns, and mobile drawer placement. Keep visual theming in
 * eptmis_admin.css.
 */

body:not(.eptmis-admin-login),
body:not(.eptmis-admin-login) #container {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

body:not(.eptmis-admin-login) #header {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
}

body:not(.eptmis-admin-login) #branding {
  min-width: 0;
  text-align: left;
}

body:not(.eptmis-admin-login) .main,
body:not(.eptmis-admin-login) .main.shifted {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex !important;
  align-items: flex-start;
  padding-left: 0 !important;
  box-sizing: border-box;
}

body:not(.eptmis-admin-login) .main > #nav-sidebar + .content,
body:not(.eptmis-admin-login) .main.shifted > #nav-sidebar + .content,
body:not(.eptmis-admin-login) .content {
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  box-sizing: border-box;
}

body:not(.eptmis-admin-login) #content,
body:not(.eptmis-admin-login) #content-main {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body:not(.eptmis-admin-login) #toggle-nav-sidebar {
  display: none !important;
}

/* Desktop: persistent full sidebar with optional compact rail. */
@media (min-width: 1280px) {
  body:not(.eptmis-admin-login) #header {
    min-height: 77px;
    padding: 0 24px;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
  }

  body:not(.eptmis-admin-login) #branding {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }

  body:not(.eptmis-admin-login) #header > #user-tools {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  body:not(.eptmis-admin-login) #nav-sidebar {
    position: sticky !important;
    inset: auto !important;
    top: 77px !important;
    z-index: 20;
    flex: 0 0 17rem !important;
    width: 17rem !important;
    min-width: 17rem !important;
    max-width: 17rem !important;
    height: calc(100vh - 77px) !important;
    max-height: calc(100vh - 77px) !important;
    margin: 0 !important;
    transform: none !important;
    visibility: visible !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }

  body:not(.eptmis-admin-login).eptmis-admin-sidebar-collapsed #nav-sidebar {
    flex-basis: 4.75rem !important;
    width: 4.75rem !important;
    min-width: 4.75rem !important;
    max-width: 4.75rem !important;
  }

  body:not(.eptmis-admin-login) .main > #nav-sidebar + .content,
  body:not(.eptmis-admin-login) .main.shifted > #nav-sidebar + .content,
  body:not(.eptmis-admin-login) .content {
    flex: 1 1 0 !important;
    width: auto !important;
  }

  body.eptmis-admin-dashboard #content.colMS {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 22px;
  }

  body.eptmis-admin-dashboard #content-main {
    width: auto !important;
    max-width: none !important;
    float: none !important;
  }

  body.eptmis-admin-dashboard #content-related.eptmis-admin-activity {
    position: static !important;
    width: auto !important;
    max-width: 320px !important;
    margin: 0 !important;
    float: none !important;
  }
}

/* Tablet: persistent narrower sidebar, dashboard activity stacks below. */
@media (min-width: 768px) and (max-width: 1279px) {
  body:not(.eptmis-admin-login) #header {
    min-height: 70px;
    padding: 10px 16px;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px;
  }

  body:not(.eptmis-admin-login) #branding {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }

  body:not(.eptmis-admin-login) #header > #user-tools {
    width: auto !important;
    max-width: 46%;
    flex: 0 1 auto !important;
    display: flex !important;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  body:not(.eptmis-admin-login) #nav-sidebar {
    position: sticky !important;
    inset: auto !important;
    top: 70px !important;
    z-index: 20;
    flex: 0 0 15rem !important;
    width: 15rem !important;
    min-width: 15rem !important;
    max-width: 15rem !important;
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    margin: 0 !important;
    transform: none !important;
    visibility: visible !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }

  body:not(.eptmis-admin-login) .main > #nav-sidebar + .content,
  body:not(.eptmis-admin-login) .main.shifted > #nav-sidebar + .content,
  body:not(.eptmis-admin-login) .content {
    flex: 1 1 0 !important;
    width: auto !important;
  }

  body.eptmis-admin-dashboard #content.colMS {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
  }

  body.eptmis-admin-dashboard #content-main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  body.eptmis-admin-dashboard #content-related.eptmis-admin-activity {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 0 !important;
    float: none !important;
  }
}

/* Mobile: header is left-aligned and sidebar becomes an off-canvas drawer. */
@media (max-width: 767px) {
  body:not(.eptmis-admin-login) #header {
    min-height: 64px;
    padding:
      10px max(10px, env(safe-area-inset-right))
      10px max(10px, env(safe-area-inset-left));
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 9px;
    text-align: left !important;
  }

  body:not(.eptmis-admin-login) #branding {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body:not(.eptmis-admin-login) .eptmis-admin-shell-brand {
    min-width: 0;
    margin: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body:not(.eptmis-admin-login) #header > #user-tools {
    display: none !important;
  }

  body:not(.eptmis-admin-login) .main,
  body:not(.eptmis-admin-login) .main.shifted {
    display: block !important;
  }

  body:not(.eptmis-admin-login) #nav-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    top: 0 !important;
    z-index: 1250;
    width: min(19rem, calc(100vw - 0.8rem)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 0.8rem) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    transform: translateX(-105%) !important;
    visibility: visible !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box;
  }

  body:not(.eptmis-admin-login).eptmis-admin-nav-open #nav-sidebar {
    transform: translateX(0) !important;
  }

  body:not(.eptmis-admin-login) .main > #nav-sidebar + .content,
  body:not(.eptmis-admin-login) .main.shifted > #nav-sidebar + .content,
  body:not(.eptmis-admin-login) .content,
  body:not(.eptmis-admin-login) #content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.eptmis-admin-dashboard #content.colMS {
    display: block !important;
    margin: 0 !important;
  }

  body.eptmis-admin-dashboard #content-main,
  body.eptmis-admin-dashboard #content-related.eptmis-admin-activity {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  body.eptmis-admin-dashboard #content-related.eptmis-admin-activity {
    margin: 20px 0 0 !important;
  }
}