/**
 * Extracted Layout Styles - Replacing Template
 * Clean, maintainable layout CSS without template dependencies
 */

/* ========================================
   Main Layout Structure
   ======================================== */

/* Main application container */
#app-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;  /* Ensure consistent background */
}

/* Main content area - replaces Template #main */
#main,
.app-main-content {
  margin-left: 250px;  /* Increased to match wider sidebar */
  margin-top: 70px;  /* Account for taller fixed header */
  min-height: calc(100vh - 70px);  /* Full viewport height minus header */
  padding: 0 0 52px;
  position: relative;
  flex: 1;
  transition: margin-left 0.3s ease;
  background: #f5f5f5;  /* Ensure background color extends full height */
  opacity: 1 !important;  /* Force visibility */
  visibility: visible !important;  /* Force visibility */
}

/* When sidebar is collapsed */
.app-sidebar-collapsed #main,
.app-sidebar-collapsed .app-main-content {
  margin-left: 48px;
}

/* Mobile responsive */
@media (max-width: 979px) {
  #main,
  .app-main-content {
    margin-left: 0;
  }
}

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

/* Sidebar container - includes #left-panel for compatibility */
#left-panel,
.app-sidebar,
aside nav {
  position: fixed !important;
  left: 0 !important;
  top: 70px !important;  /* Adjusted for taller header */
  bottom: 0 !important;  /* Extend all the way to bottom */
  width: 250px !important;  /* Increased from 220px */
  background: #3a3633 !important;
  z-index: 1049;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.3s ease;
}

/* Collapsed sidebar */
.app-sidebar-collapsed .app-sidebar,
.app-sidebar-collapsed aside nav {
  width: 48px;
}

/* Sidebar navigation */
#left-panel nav ul,
.app-sidebar nav ul,
aside nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Push the entire navigation menu down */
#left-panel nav,
.app-sidebar nav {
  padding-top: 40px !important;  /* Push menu down to align with content */
  margin-top: 0 !important;
}

/* Navigation menu links - white text with proper spacing */
#left-panel nav a,
#left-panel nav li a,
#left-panel nav span,
.app-sidebar nav a,
aside nav a {
  color: #c6c6c6 !important;
  text-decoration: none;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 12px 15px 12px 10px !important; /* Slightly more vertical padding for bigger icons */
  display: block;
  position: relative;
  white-space: nowrap !important; /* Keep text on one line */
  overflow: hidden !important;
  text-overflow: ellipsis !important; /* Add ellipsis if text is too long */
  text-indent: 28px !important; /* Adjusted for icon at 4px position + 24px width */
}

#left-panel nav a:hover,
#left-panel nav li:hover a,
.app-sidebar nav a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
  border: none !important;
}

/* Remove all borders from menu items */
#left-panel nav li,
#left-panel nav ul,
.app-sidebar nav li {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Active menu item */
#left-panel nav li.active > a,
.app-sidebar nav li.active > a {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15);
}

/* Menu icons - 50% bigger and properly positioned */
#left-panel nav i,
#left-panel nav a > i:first-child,
.app-sidebar nav i {
  color: #c6c6c6 !important;
  position: absolute !important;
  left: 4px !important; /* Half the distance from 8px */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;  /* 50% bigger */
  text-align: center !important;
  font-size: 24px !important;  /* 50% bigger from 16px */
}

/* Ensure menu text stays on one line */
#left-panel nav span,
#left-panel nav a span {
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Hover state for icons */
#left-panel nav a:hover > i,
.app-sidebar nav a:hover > i {
  color: #fff !important;
}

/* ========================================
   Header
   ======================================== */

/* Main header - dark to match sidebar */
#header,
.app-header,
header#header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;  /* Increased to accommodate larger logo */
  background: #3a3633 !important;
  border-bottom: none !important;
  z-index: 1050;
}

/* Header logo area - also dark */
#logo-group,
.app-header-logo {
  float: left;
  width: 250px;  /* Increased to match wider sidebar */
  height: 70px;  /* Match increased header height */
  background: #3a3633 !important;
  display: flex;
  align-items: center;
  justify-content: center;  /* Center the logo horizontally */
  padding: 0 20px;  /* Add horizontal padding for breathing room */
  border-right: none !important;
}

/* Logo text/image styling */
#logo-group span,
#logo-group a,
.app-header-logo a {
  color: #fff !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Logo image sizing - much larger */
#logo-group img,
.app-header-logo img {
  height: 68px !important;  /* Slightly smaller to fit in 70px header */
  width: auto !important;
  max-width: 240px !important;  /* Prevent overflow */
  display: block;
  margin: 0 auto;  /* Center the logo */
}

/* Ensure logo text is visible if no image */
#logo-group span#activity {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 49px !important;
}

/* ========================================
   Header Buttons Styling - FORCE RIGHT SIDE
   ======================================== */

/* Specific positioning for each button from right edge */
/* Header is 70px tall, buttons are 48px: (70-48)/2 = 11px from top */
#header #button-logout {
  position: fixed !important;
  right: 20px !important;
  top: 11px !important;  /* Vertically centered in 70px header */
  left: auto !important;
}

#header #button-help {
  position: fixed !important;
  right: 78px !important;  /* 48px button + 10px gap + 20px margin */
  top: 11px !important;  /* Vertically centered in 70px header */
  left: auto !important;
}

/* Toggle menu uses btn-top-collapse-menu as its ID */
#header #btn-top-collapse-menu {
  position: fixed !important;
  right: 136px !important;  /* 2*48px + 2*10px gap + 20px margin */
  top: 11px !important;  /* Vertically centered in 70px header */
  left: auto !important;
}

#header #button-fullscreen {
  position: fixed !important;
  right: 194px !important;  /* 3*48px + 3*10px gap + 20px margin */
  top: 11px !important;  /* Vertically centered in 70px header */
  left: auto !important;
}

/* Style header buttons - 20% bigger (48px from 40px) */
#header .btn-header,
#header button.btn-header,
#header a.btn-header,
#button-help,
#button-logout,
#button-fullscreen,
#btn-top-collapse-menu {
  display: inline-flex !important;  /* Use flex for perfect centering */
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;  /* 20% bigger than 40px */
  width: 48px !important;  /* Square buttons */
  line-height: 48px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  color: #c6c6c6 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 !important;
  float: none !important;
  position: relative !important;
}

/* Header button icons - scale up proportionally */
#header .btn-header i,
#header button.btn-header i,
#header a.btn-header i,
#button-help i,
#button-logout i,
#button-fullscreen i,
#btn-top-collapse-menu i {
  font-size: 24px !important;  /* 20% bigger than 20px */
  color: #c6c6c6 !important;
  line-height: 1 !important;
}

/* Header button hover state */
#header .btn-header:hover,
#header .pull-right > div:hover,
#button-help:hover,
#button-logout:hover,
#button-fullscreen:hover,
#btn-top-collapse-menu:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

#header .btn-header:hover i,
#header .pull-right > div:hover i {
  color: #fff !important;
}

/* ========================================
   Ribbon/Breadcrumb Bar
   ======================================== */

#ribbon,
.app-ribbon {
  background: #474544;
  min-height: 40px;
  padding: 0 13px;
  position: relative;
  display: flex;
  align-items: center;
}

/* Breadcrumbs in ribbon */
#ribbon ol.breadcrumb,
.app-ribbon .breadcrumb {
  background: transparent;
  margin: 0;
  padding: 8px 0;
}

/* ========================================
   Footer
   ======================================== */

.page-footer,
.app-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;  /* Changed to 0 to cover entire bottom including under sidebar */
  right: 0 !important;
  height: 52px !important;
  background: #3a3633 !important;
  color: #c6c6c6 !important;
  padding: 10px 14px 10px 264px !important;  /* Add left padding to account for sidebar */
  border-top: none !important;
  z-index: 999;  /* Lower than sidebar so it goes under */
  transition: padding-left 0.3s ease;
  display: block !important;
}

/* Footer when sidebar collapsed */
.app-sidebar-collapsed .app-footer,
.app-sidebar-collapsed .page-footer {
  padding-left: 62px !important;  /* Adjust padding instead of left position */
}

/* Mobile footer */
@media (max-width: 979px) {
  .app-footer,
  .page-footer {
    left: 0;
    padding-left: 14px !important;  /* Reset to normal padding on mobile */
  }
}

/* ========================================
   Content Container
   ======================================== */

#content {
  padding: 13px;
  animation: fadeIn 0.5s;
  min-height: calc(100vh - 101px);  /* Full height minus header and footer */
  background: #f5f5f5;  /* Consistent background */
  opacity: 1 !important;  /* Force visibility */
  visibility: visible !important;  /* Force visibility */
  display: block !important;  /* Ensure it's displayed */
}

/* Content animations - faster for route transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ========================================
   FOUC Prevention for Route Transitions & Login
   ======================================== */

/* Hide content initially until React hydrates */
#main:empty,
#content:empty {
  min-height: calc(100vh - 101px); /* viewport minus header and footer */
  background: #f5f5f5;
}

/* Prevent layout shift by maintaining structure during transitions */
#main {
  min-height: calc(100vh - 101px);
  transition: opacity 0.15s ease-in-out;
}

/* Faster content fade-in for route changes */
#content {
  animation: fadeIn 0.2s ease-in-out;
}

/* Keep layout stable during route transitions */
#left-panel,
#header,
.page-footer {
  transition: none !important; /* Prevent these from animating during route changes */
}

/* Hide content during auth initialization */
body.auth-initializing #main,
body.auth-initializing #content,
body.auth-initializing .app-widget {
  opacity: 0 !important;
  transition: opacity 0.3s ease;
}

/* Smooth fade-in when app is ready */
body.app-ready #main,
body.app-ready #content {
  opacity: 1 !important;
  transition: opacity 0.3s ease;
}

/* Prevent white flash during auth redirect */
#app.authenticating {
  background: #f5f5f5 !important;
  min-height: 100vh !important;
}

/* Removed - was causing content to be hidden */

/* Show loading spinner during auth initialization */
body.auth-initializing::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #4c7686;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 9999;
}

/* Also add loading text */
body.auth-initializing::after {
  content: "Loading...";
  position: fixed;
  top: calc(50% + 40px);
  left: 50%;
  transform: translateX(-50%);
  color: #4c7686;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
}

/* Spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Preload critical layout dimensions */
.app-widget {
  min-height: 200px; /* Prevents collapse before content loads */
}

/* Maintain minimum heights for common containers */
.widget-body {
  min-height: 300px;
}

/* Skeleton loading for content areas */
#content.loading::before {
  content: "";
  display: block;
  width: 100%;
  height: 200px;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 20px;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ========================================
   Utility Classes
   ======================================== */

/* Clearfix */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Hidden elements */
.hidden {
  display: none !important;
}

/* Text alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Spacing utilities */
.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

/* Responsive utilities */
@media (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-desktop {
    display: none !important;
  }
}