/* ========================================
   WorldTool - Layout Structure
   Main Application Layout
   ======================================== */

/* ========== GLOBAL LAYOUT ========== */
body {
  min-height: 100dvh;
  min-width: 0;
  padding-top: var(--navbar-height);
  display: flex;
  flex-direction: column;
}

/* ========== MAIN CONTENT ========== */
#main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  background: var(--bg-primary);
  min-height: calc(100dvh - var(--app-shell-offset));
  transition: background-color 0.3s ease, margin-left 0.3s ease;
}

body.sidebar-hidden #main { margin-left: 0; }
body:not(.sidebar-hidden).sidebar-collapsed #main { margin-left: var(--sidebar-collapsed-width); }

#app-root { min-width: 0; max-width: 100%; }
html.route-auth-bootstrap body, body.route-auth { padding-top: 0; }

/* ========== DISPLAY UTILITIES ========== */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }

@media (max-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
}

@media (min-width: 769px) {
  .md\:flex { display: flex; }
}

/* ========== POSITION UTILITIES ========== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* Main margin rules for mobile */
@media (max-width: 1024px){
  #main{ margin-left: 0 !important; }
}