/* ============================================================
   宽带运维系统 — 响应式样式 (PC + 手机端适配)
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", sans-serif; background: #f5f6fa; color: #333; line-height: 1.6; }

/* ========== Nav ========== */
.nav { background: #1a2a4a; color: #fff; padding: 0 12px; position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; height: 52px; flex-wrap: wrap; }
.nav-brand { color: #fff; font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nav-user { font-size: 13px; opacity: .85; white-space: nowrap; }
.nav-link { color: #fff; text-decoration: none; font-size: 13px; opacity: .7; white-space: nowrap; padding: 4px 0; }
.nav-link:hover { opacity: 1; }

/* Mobile nav — collapse links into dropdown */
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 4px 8px; }
.nav-links { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 768px) {
  .nav-inner { height: auto; padding: 8px 0; }
  .nav-toggle { display: block; }
  .nav-links { display: none; width: 100%; flex-direction: column; gap: 4px; padding: 8px 0; }
  .nav-links.open { display: flex; }
  .nav-right { width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; }
  .nav-link, .nav-user { font-size: 14px; padding: 6px 0; }
}

/* ========== Container ========== */
.container { max-width: 1200px; margin: 0 auto; padding: 20px 12px; }
@media (min-width: 768px) { .container { padding: 24px 20px; } }
@media (min-width: 1024px) { .container { padding: 28px 24px; } }

/* ========== Flash ========== */
.flash { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; word-break: break-word; }
.flash.success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.flash.error { background: #fbe9e7; color: #c62828; border: 1px solid #ef9a9a; }

/* ========== Buttons ========== */
.btn { display: inline-block; padding: 10px 20px; border-radius: 6px; font-size: 14px;
       text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.4;
       min-height: 44px; /* touch-friendly */ text-align: center;
       transition: background .15s, opacity .15s; }
.btn-primary { background: #1976d2; color: #fff; border-color: #1976d2; }
.btn-primary:hover { background: #1565c0; }
.btn-secondary { background: #fff; color: #555; border-color: #ddd; }
.btn-secondary:hover { background: #f5f5f5; }
.btn-success { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.btn-success:hover { background: #1b5e20; }
.btn-danger { background: #c62828; color: #fff; border-color: #c62828; }
.btn-sm { padding: 6px 14px; font-size: 13px; min-height: 36px; }
.btn-xs { padding: 3px 10px; font-size: 12px; min-height: auto; }
.btn-block { width: 100%; }
@media (max-width: 480px) {
  .btn { padding: 12px 16px; width: 100%; }
}

/* ========== Login ========== */
.login-box { max-width: 380px; margin: 40px auto; background: #fff; border-radius: 12px;
    padding: 36px 28px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.login-box h2 { text-align: center; margin-bottom: 24px; font-size: 20px; }
@media (max-width: 480px) {
  .login-box { margin: 20px 12px; padding: 28px 18px; }
}

/* ========== Form ========== */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 5px; color: #444; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 14px; outline: none; transition: border-color .2s; font-family: inherit;
  background: #fff; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: #1976d2; }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-row { display: flex; gap: 12px; }
@media (max-width: 640px) { .form-row { flex-direction: column; gap: 10px; } }

/* ========== Page Header ========== */
.page-header { display: flex; justify-content: space-between; align-items: center;
               margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.page-header h2 { font-size: 18px; }
.filter-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filter-group select, .filter-group input[type=date], .filter-group input[type=text] {
  padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; background: #fff; }
@media (max-width: 768px) {
  .page-header { flex-direction: column; align-items: flex-start; }
  .filter-group { width: 100%; }
  .filter-group select, .filter-group input { flex: 1; min-width: 100px; }
}

/* ========== Stats ========== */
.stats-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-card { flex: 1; min-width: 100px; background: #fff; border-radius: 10px; padding: 18px 14px;
    text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.stat-num { display: block; font-size: 26px; font-weight: 600; color: #1976d2; }
.stat-label { font-size: 12px; color: #888; margin-top: 4px; }
@media (max-width: 480px) {
  .stats-row { gap: 8px; }
  .stat-card { flex: 1 1 45%; padding: 14px 10px; }
  .stat-num { font-size: 22px; }
}

/* ========== Table — scrollable on mobile ========== */
.table-wrap { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
th { background: #fafafa; font-weight: 500; color: #666; font-size: 13px; position: sticky; top: 0; }
td { white-space: nowrap; }
td.wrap { white-space: normal; word-break: break-word; max-width: 200px; }
tr.clickable { cursor: pointer; transition: background .15s; }
tr.clickable:hover { background: #f8f9ff; }
.ticket-no { color: #1976d2; text-decoration: none; font-weight: 500; }
.time { color: #999; font-size: 12px; }
@media (max-width: 768px) {
  th, td { padding: 8px 10px; font-size: 13px; }
}

/* ========== Tags & Status ========== */
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
.tag-fault { background: #fbe9e7; color: #c62828; }
.tag-install { background: #e3f2fd; color: #1565c0; }

.status { font-size: 13px; font-weight: 500; white-space: nowrap; }
.status-pending { color: #e65100; }
.status-processing { color: #1565c0; }
.status-resolved { color: #2e7d32; }
.status-closed { color: #7b1fa2; }

.level { font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.level-high { background: #fbe9e7; color: #c62828; }
.level-normal { background: #e8f5e9; color: #2e7d32; }
.level-low { background: #f5f5f5; color: #888; }

/* ========== Pagination ========== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; font-size: 14px; flex-wrap: wrap; }
.pagination a { color: #1976d2; text-decoration: none; padding: 6px 10px; }
.pagination a:hover { text-decoration: underline; }

/* ========== Cards ========== */
.card { background: #fff; border-radius: 10px; padding: 16px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.card-header { font-size: 14px; font-weight: 600; color: #555; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
.card-ai { border-left: 4px solid #1976d2; }
.desc-text { font-size: 14px; line-height: 1.7; color: #444; word-break: break-word; }
@media (max-width: 480px) {
  .card { padding: 12px; }
}

/* ========== Detail Grid ========== */
.detail-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 768px) { .detail-grid-2col { grid-template-columns: 1fr; gap: 12px; } }
.info-table { width: 100%; }
.info-table td { padding: 5px 0; font-size: 14px; border: none; }
.info-table .label { color: #888; min-width: 70px; white-space: nowrap; }

/* ========== AI Result ========== */
.ai-result { font-size: 14px; }
.ai-section { margin-bottom: 10px; }
.ai-section label { font-size: 12px; color: #888; display: block; margin-bottom: 3px; }
.ai-section p { line-height: 1.6; color: #444; word-break: break-word; }

/* ========== Timeline ========== */
.timeline { padding-left: 18px; border-left: 2px solid #e0e0e0; }
.tl-item { position: relative; padding: 0 0 18px 14px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
    background: #1976d2; border: 2px solid #fff; box-shadow: 0 0 0 2px #1976d2; }
.tl-meta { font-size: 13px; margin-bottom: 3px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl-user { font-weight: 500; color: #333; }
.tl-stage { color: #666; font-size: 12px; }
.tl-time { color: #999; font-size: 11px; }
.tl-action { font-size: 12px; color: #1976d2; margin: 2px 0; }
.tl-content { font-size: 14px; color: #444; line-height: 1.6; word-break: break-word; }
.tl-duration { font-size: 12px; color: #e65100; margin-top: 3px; }

/* ========== Attachments ========== */
.attach-list { display: flex; flex-wrap: wrap; gap: 6px; }
.attach-link { display: inline-block; padding: 6px 14px; background: #f0f4ff; color: #1976d2;
    border-radius: 6px; font-size: 13px; text-decoration: none; border: 1px solid #d0ddf5;
    word-break: break-all; }
.attach-link:hover { background: #e3efff; }

/* ========== Empty ========== */
.empty { text-align: center; padding: 40px 0; color: #999; font-size: 14px; }

/* ========== Schedule (duty roster) page ========== */
.schedule-day-header { display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px; padding: 10px 14px; background: #f0f4f8; border-radius: 8px 8px 0 0; }
.schedule-section { padding: 10px 12px; }
.schedule-section h4 { font-size: 14px; color: #555; margin-bottom: 8px; }
@media (max-width: 768px) {
  .schedule-day-header { flex-direction: column; align-items: flex-start; }
  .schedule-section { padding: 8px; }
}

/* ========== Responsive table cards for mobile ========== */
@media (max-width: 640px) {
  .card-table-mobile tr { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 2px solid #e0e0e0; }
  .card-table-mobile th { display: none; }
  .card-table-mobile td { display: flex; justify-content: space-between; padding: 4px 8px; border: none; white-space: normal; }
  .card-table-mobile td::before { content: attr(data-label); font-weight: 500; color: #888; margin-right: 8px; min-width: 60px; }
}

/* ========== Misc ========== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.text-sm { font-size: 13px; }
.text-muted { color: #999; }
.text-danger { color: #c62828; }
.text-success { color: #2e7d32; }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }

/* ========== Print ========== */
@media print {
  .nav, .pagination, .btn, form { display: none; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}