/**
 * SP低空履约平台 - 布局系统
 * 基于 Google Material Design 风格
 * 
 * 本文件定义页面布局样式，包括：
 * - 页面容器样式
 * - 顶部导航栏样式（64px 高度）
 * - 左侧导航抽屉样式（256px 宽度）
 * - 主内容区域样式
 * - 响应式断点媒体查询
 * 
 * Requirements: 2.1, 2.2, 2.3, 13.1-13.6
 */

/* ========================================
 * 页面容器 - Page Container
 * ======================================== */

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-bg-secondary);
}

.app-wrapper {
  display: flex;
  flex: 1;
  padding-top: var(--nav-height);
}

/* ========================================
 * 顶部导航栏 - Top Navigation Bar
 * (Requirements: 2.1, 2.2)
 * ======================================== */

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-4);
  z-index: var(--z-fixed);
  box-shadow: var(--shadow-1);
}

.top-nav-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.top-nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: 720px;
  margin: 0 var(--spacing-6);
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

/* 菜单切换按钮 */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: var(--transition-color);
}

.menu-toggle:hover {
  background-color: var(--color-hover-overlay);
}

.menu-toggle:focus {
  outline: none;
  background-color: var(--color-focus-overlay);
}

/* 菜单图标 - 汉堡菜单样式 */
.menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  gap: 4px;
}

.menu-icon-bar {
  display: block;
  width: 18px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform 200ms var(--easing-standard), opacity 200ms var(--easing-standard);
}

/* 菜单打开时的动画 */
.menu-toggle.active .menu-icon-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle.active .menu-icon-bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active .menu-icon-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Logo 区域 */
.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.logo img {
  height: 32px;
  width: auto;
}

.logo-text {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

/* 全局搜索框 */
.search-box {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px;
  height: 48px;
  padding: 0 var(--spacing-4);
  background-color: var(--color-bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: var(--transition-normal);
}

.search-box:hover {
  background-color: var(--color-bg-tertiary);
}

.search-box:focus-within {
  background-color: var(--color-bg-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-focus);
}

.search-box .search-icon {
  color: var(--color-text-secondary);
  margin-right: var(--spacing-3);
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  outline: none;
}

.search-box input::placeholder {
  color: var(--color-text-hint);
}

.search-box kbd {
  display: none;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* 图标按钮 */
.icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: var(--transition-color);
}

.icon-btn:hover {
  background-color: var(--color-hover-overlay);
  color: var(--color-text-primary);
}

.icon-btn:focus {
  outline: none;
  background-color: var(--color-focus-overlay);
}

/* 移动端搜索按钮 - 默认隐藏 */
.mobile-search-btn {
  display: none;
}

/* 移动端搜索框展开状态 */
.search-box.mobile-visible {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-width: none;
  margin: 0;
  border-radius: 0;
  border-top: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-4);
  z-index: var(--z-dropdown);
}

/* 徽章 */
.badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-inverse);
  background-color: var(--color-error);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 用户菜单 */
.user-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition-normal);
}

.user-menu:hover {
  box-shadow: 0 0 0 2px var(--color-border);
}

.user-menu:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
}

.user-menu img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* 用户头像占位符 */
.user-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* ========================================
 * 左侧导航抽屉 - Side Navigation Drawer
 * (Requirements: 2.3, 2.4)
 * ======================================== */

.side-nav {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background-color: var(--color-bg-primary);
  border-right: 1px solid var(--color-border-light);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--z-sticky);
  transition: transform var(--duration-normal) var(--easing-standard),
              width var(--duration-normal) var(--easing-standard);
}

.side-nav::-webkit-scrollbar {
  width: 4px;
}

.side-nav::-webkit-scrollbar-track {
  background: transparent;
}

.side-nav::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
}

.side-nav::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-disabled);
}

/* 导航分组 */
.nav-section {
  padding: var(--spacing-2) 0;
}

.nav-section:not(:last-child) {
  border-bottom: 1px solid var(--color-divider-light);
}

.nav-section-title {
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

/* 导航项 */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  margin: var(--spacing-1) var(--spacing-2);
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  border-radius: var(--radius-full);
  transition: var(--transition-color);
  cursor: pointer;
}

.nav-item:hover {
  background-color: var(--color-hover-overlay);
  color: var(--color-text-primary);
}

.nav-item:focus {
  outline: none;
  background-color: var(--color-focus-overlay);
}

/* 当前选中项 (Requirements: 2.5) */
.nav-item.active {
  background-color: var(--color-primary-hover);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.nav-item.active:hover {
  background-color: var(--color-primary-focus);
}

.nav-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.nav-item-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item-badge {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  background-color: var(--color-primary-hover);
  border-radius: var(--radius-full);
}

/* 收起状态的侧边栏 */
.side-nav.collapsed {
  width: var(--sidebar-width-collapsed);
}

.side-nav.collapsed .nav-section-title,
.side-nav.collapsed .nav-item-text,
.side-nav.collapsed .nav-item-badge {
  display: none;
}

.side-nav.collapsed .nav-item {
  justify-content: center;
  padding: var(--spacing-3);
  margin: var(--spacing-1) var(--spacing-2);
}

/* 导航底部 */
.nav-footer {
  margin-top: auto;
  padding: var(--spacing-4);
  border-top: 1px solid var(--color-divider-light);
}

.system-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.system-status .status-indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  flex-shrink: 0;
}

.system-status .status-indicator.online {
  background-color: var(--color-success);
}

.system-status .status-indicator.offline {
  background-color: var(--color-text-disabled);
}

.system-status .status-indicator.warning {
  background-color: var(--color-warning);
}

.system-status .status-text {
  white-space: nowrap;
}

.side-nav.collapsed .nav-footer {
  padding: var(--spacing-2);
}

.side-nav.collapsed .system-status .status-text {
  display: none;
}

/* ========================================
 * 主内容区域 - Main Content Area
 * ======================================== */

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: calc(100vh - var(--nav-height));
  background-color: var(--color-bg-secondary);
  transition: margin-left var(--duration-normal) var(--easing-standard);
}

.main-content.sidebar-collapsed {
  margin-left: var(--sidebar-width-collapsed);
}

.main-content.sidebar-hidden {
  margin-left: 0;
}

/* 页面头部 */
.page-header {
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-4);
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-light);
}

.page-header-inner {
  max-width: var(--container-2xl);
  margin: 0 auto;
}

/* 面包屑导航 (Requirements: 2.6) */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.breadcrumb-item {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-color);
}

.breadcrumb-item:hover {
  color: var(--color-primary);
}

.breadcrumb-separator {
  color: var(--color-text-disabled);
}

.breadcrumb-item.current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  pointer-events: none;
}

/* 页面标题 */
.page-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-1) 0;
}

.page-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
}

/* 页面内容 */
.page-content {
  padding: var(--spacing-6);
  max-width: var(--container-2xl);
  margin: 0 auto;
}

/* ========================================
 * 内容布局 - Content Layouts
 * ======================================== */

/* 网格布局 */
.grid {
  display: grid;
  gap: var(--spacing-4);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* 弹性布局 */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }

/* 多栏布局 */
.layout-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-6);
}

.layout-three-column {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-6);
}

.layout-sidebar-main {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--spacing-6);
}

.layout-main-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--spacing-6);
}

/* 三栏布局（左侧表单、中间流程、右侧日志） */
.layout-form-flow-log {
  display: grid;
  grid-template-columns: 300px 1fr 320px;
  gap: var(--spacing-6);
}

/* ========================================
 * 响应式断点媒体查询
 * (Requirements: 1.5, 13.1-13.6)
 * ======================================== */

/* 超大屏幕 1920px+ (Requirements: 13.1) */
@media (min-width: 1920px) {
  .page-content {
    max-width: 1800px;
  }
  
  .search-box kbd {
    display: inline-flex;
  }
}

/* 大屏幕 1440px-1919px */
@media (min-width: 1440px) and (max-width: 1919px) {
  .page-content {
    max-width: var(--container-2xl);
  }
  
  .search-box kbd {
    display: inline-flex;
  }
}

/* 中大屏幕 1280px-1439px (Requirements: 13.2) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .page-content {
    max-width: var(--container-xl);
  }
  
  .layout-form-flow-log {
    grid-template-columns: 280px 1fr 280px;
  }
}

/* 中等屏幕 1024px-1279px (Requirements: 13.3) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .page-content {
    max-width: var(--container-lg);
    padding: var(--spacing-4);
  }
  
  .layout-two-column {
    grid-template-columns: 1fr 1fr;
  }
  
  .layout-three-column {
    grid-template-columns: 1fr 1fr;
  }
  
  .layout-form-flow-log {
    grid-template-columns: 1fr 1fr;
  }
  
  .layout-form-flow-log > :nth-child(3) {
    grid-column: 1 / -1;
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 平板屏幕 768px-1023px (Requirements: 13.4, 2.8) */
@media (min-width: 768px) and (max-width: 1023px) {
  .side-nav {
    transform: translateX(-100%);
  }
  
  .side-nav.open {
    transform: translateX(0);
    box-shadow: var(--shadow-6);
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .page-content {
    padding: var(--spacing-4);
  }
  
  .layout-two-column,
  .layout-three-column,
  .layout-sidebar-main,
  .layout-main-sidebar,
  .layout-form-flow-log {
    grid-template-columns: 1fr;
  }
  
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .top-nav-center {
    display: none;
  }
  
  /* 移动端搜索按钮 */
  .mobile-search-btn {
    display: flex;
  }
}

/* 小屏幕 <768px (Requirements: 13.5) */
@media (max-width: 767px) {
  :root {
    --nav-height: 56px;
  }
  
  .side-nav {
    transform: translateX(-100%);
    width: 280px;
  }
  
  .side-nav.open {
    transform: translateX(0);
    box-shadow: var(--shadow-6);
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .page-header {
    padding: var(--spacing-4);
  }
  
  .page-title {
    font-size: var(--font-size-lg);
  }
  
  .page-content {
    padding: var(--spacing-3);
  }
  
  .layout-two-column,
  .layout-three-column,
  .layout-sidebar-main,
  .layout-main-sidebar,
  .layout-form-flow-log {
    grid-template-columns: 1fr;
  }
  
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-6 {
    grid-template-columns: 1fr;
  }
  
  .top-nav {
    padding: 0 var(--spacing-2);
  }
  
  .top-nav-center {
    display: none;
  }
  
  .logo-text {
    display: none;
  }
  
  /* 增大触摸区域 */
  .nav-item {
    padding: var(--spacing-4);
    min-height: 48px;
  }
  
  .icon-btn {
    width: 44px;
    height: 44px;
  }
}

/* 遮罩层 - 移动端侧边栏打开时 */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-overlay-light);
  z-index: calc(var(--z-sticky) - 1);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-standard);
}

.sidebar-overlay.visible {
  display: block;
  opacity: 1;
}

/* ========================================
 * 表格响应式 (Requirements: 13.6)
 * ======================================== */

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  /* 卡片式表格展示 */
  .table-card-view {
    display: block;
  }
  
  .table-card-view thead {
    display: none;
  }
  
  .table-card-view tbody {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
  }
  
  .table-card-view tr {
    display: block;
    padding: var(--spacing-4);
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
  }
  
  .table-card-view td {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border-light);
  }
  
  .table-card-view td:last-child {
    border-bottom: none;
  }
  
  .table-card-view td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
  }
}

/* ========================================
 * 打印样式
 * ======================================== */

@media print {
  .top-nav,
  .side-nav,
  .sidebar-overlay {
    display: none !important;
  }
  
  .main-content {
    margin-left: 0 !important;
  }
  
  .page-content {
    max-width: none;
    padding: 0;
  }
}