/* ========================================
   移动端响应式样式
   适配全站所有页面
   ======================================== */

/* 基础响应式设置 */
@media (max-width: 768px) {
  /* 全局字体和间距调整 */
  body {
    font-size: 14px;
    padding-top: 50px; /* 为固定导航栏留出空间 */
  }

  /* 容器适配 */
  .container,
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* 导航栏移动端优化 */
  .navbar-brand {
    font-size: 16px;
    padding: 10px 15px;
  }

  .navbar-brand img {
    height: 20px !important;
    width: 20px !important;
  }

  .navbar-toggle {
    margin-right: 10px;
  }

  .navbar-collapse {
    max-height: 400px;
    overflow-y: auto;
  }

  /* 主题切换按钮 */
  .theme-toggle {
    padding: 10px 15px;
    font-size: 18px;
  }
}

/* 表格移动端优化 */
@media (max-width: 768px) {
  /* 表格响应式滚动 */
  .table-responsive {
    border: none;
    margin-bottom: 15px;
  }

  table {
    font-size: 12px;
  }

  table th,
  table td {
    padding: 8px 4px;
    white-space: nowrap;
  }

  /* 操作按钮组 */
  .btn-group-xs > .btn,
  .btn-xs {
    padding: 3px 8px;
    font-size: 11px;
  }

  /* 表格内的按钮 */
  table .btn {
    padding: 4px 8px;
    font-size: 11px;
    margin: 2px;
  }
}

/* 表单移动端优化 */
@media (max-width: 768px) {
  /* 表单控件 */
  .form-control {
    font-size: 14px;
    height: 38px;
  }

  .form-group {
    margin-bottom: 12px;
  }

  /* 表单标签 */
  .form-horizontal .control-label {
    text-align: left;
    margin-bottom: 5px;
  }

  /* 按钮 */
  .btn {
    padding: 8px 16px;
    font-size: 14px;
  }

  .btn-block {
    width: 100%;
    margin-bottom: 10px;
  }

  /* 输入组 */
  .input-group {
    width: 100%;
  }
}

/* 卡片和面板移动端优化 */
@media (max-width: 768px) {
  /* Panel 面板 */
  .panel {
    margin-bottom: 15px;
  }

  .panel-heading {
    padding: 10px 12px;
    font-size: 14px;
  }

  .panel-body {
    padding: 12px;
  }

  .panel-title {
    font-size: 15px;
  }

  /* 卡片 */
  .card {
    margin-bottom: 15px;
    padding: 12px;
  }

  /* 列表组 */
  .list-group-item {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* 模态框移动端优化 */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 10px;
    width: auto;
  }

  .modal-content {
    border-radius: 8px;
  }

  .modal-header {
    padding: 12px 15px;
  }

  .modal-body {
    padding: 15px;
    max-height: 60vh;
    overflow-y: auto;
  }

  .modal-footer {
    padding: 10px 15px;
  }

  .modal-title {
    font-size: 16px;
  }
}

/* 页面内容区域移动端优化 */
@media (max-width: 768px) {
  /* 页面标题 */
  h1 {
    font-size: 24px;
    margin-bottom: 15px;
  }

  h2 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  h4 {
    font-size: 16px;
  }

  /* 页面头部 */
  .page-header {
    padding-bottom: 10px;
    margin: 20px 0 15px;
  }

  /* 面包屑导航 */
  .breadcrumb {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* 网络列表页面移动端优化 */
@media (max-width: 768px) {
  /* 网络卡片 */
  .network-card {
    margin-bottom: 15px;
  }

  /* 网络信息 */
  .network-info {
    font-size: 13px;
  }

  /* 成员列表 */
  .member-list {
    font-size: 12px;
  }

  /* 统计卡片 */
  .stats-card {
    margin-bottom: 15px;
    padding: 15px;
  }

  .stats-value {
    font-size: 24px;
  }

  .stats-label {
    font-size: 12px;
  }
}

/* 登录页面移动端优化 */
@media (max-width: 768px) {
  /* 登录表单容器 */
  .login-container {
    padding: 20px 15px;
  }

  .login-box {
    max-width: 100%;
    padding: 20px 15px;
  }

  /* 登录表单 */
  .login-form {
    padding: 15px;
  }

  /* 登录按钮 */
  .login-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
  }
}

/* 仪表板移动端优化 */
@media (max-width: 768px) {
  /* 仪表板网格 */
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  /* 仪表板卡片 */
  .dashboard-card {
    padding: 15px;
  }

  /* 图表容器 */
  .chart-container {
    height: 250px;
    margin-bottom: 15px;
  }
}

/* 日志页面移动端优化 */
@media (max-width: 768px) {
  /* 日志条目 */
  .log-entry {
    font-size: 12px;
    padding: 8px;
    word-break: break-all;
  }

  /* 日志时间戳 */
  .log-timestamp {
    font-size: 11px;
  }

  /* 日志过滤器 */
  .log-filter {
    margin-bottom: 10px;
  }
}

/* 用户管理页面移动端优化 */
@media (max-width: 768px) {
  /* 用户列表 */
  .user-list-item {
    padding: 10px;
    font-size: 13px;
  }

  /* 用户头像 */
  .user-avatar {
    width: 40px;
    height: 40px;
  }

  /* 用户信息 */
  .user-info {
    font-size: 12px;
  }
}

/* 设置页面移动端优化 */
@media (max-width: 768px) {
  /* 设置选项卡 */
  .nav-tabs {
    font-size: 13px;
  }

  .nav-tabs > li > a {
    padding: 8px 12px;
  }

  /* 设置表单 */
  .settings-form {
    padding: 15px 10px;
  }
}

/* 网络详情页面移动端优化 */
@media (max-width: 768px) {
  /* 网络详情卡片 */
  .network-detail-card {
    padding: 12px;
    margin-bottom: 15px;
  }

  /* IP分配池 */
  .ip-pool-item {
    font-size: 12px;
    padding: 8px;
  }

  /* 成员详情 */
  .member-detail {
    padding: 12px;
  }

  /* 代码块 */
  pre, code {
    font-size: 11px;
    padding: 8px;
    overflow-x: auto;
  }
}

/* 通用工具类 */
@media (max-width: 768px) {
  /* 隐藏移动端不需要的元素 */
  .hidden-xs {
    display: none !important;
  }

  /* 移动端显示 */
  .visible-xs {
    display: block !important;
  }

  /* 文字对齐 */
  .text-center-xs {
    text-align: center;
  }

  /* 间距调整 */
  .mt-xs-10 {
    margin-top: 10px;
  }

  .mb-xs-10 {
    margin-bottom: 10px;
  }

  .p-xs-10 {
    padding: 10px;
  }
}

/* 小屏幕设备 (手机横屏) */
@media (min-width: 481px) and (max-width: 768px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  table {
    font-size: 13px;
  }
}

/* 超小屏幕设备 (手机竖屏) */
@media (max-width: 480px) {
  body {
    font-size: 13px;
  }

  .btn {
    padding: 6px 12px;
    font-size: 13px;
  }

  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 16px;
  }
}