/* ===== 妃枝 FEIZHI - 数字果园系统 ===== */
/* ===== CSS Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: #f5f5f0; color: #333; line-height: 1.6; min-height: 100vh; }
a { color: #2d5a27; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ===== Frontend Nav ===== */
.site-nav { background: #1a3a1a; color: #fff; padding: 0 20px; position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 56px; }
.nav-logo { font-size: 1.3em; text-decoration: none; }
.logo-fei { color: #e8c547; font-weight: bold; }
.logo-en { color: #8fc785; font-size: 0.8em; margin-left: 4px; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { color: #ccc; padding: 8px 16px; border-radius: 6px; font-size: 0.9em; text-decoration: none; transition: background 0.2s; }
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,0.1); color: #fff; }
.nav-admin { border: 1px solid rgba(255,255,255,0.2); }
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.5em; cursor: pointer; padding: 8px; }
.site-main { min-height: calc(100vh - 56px - 120px); }

/* ===== Frontend Footer ===== */
.site-footer { background: #1a3a1a; color: #aaa; text-align: center; padding: 30px 20px; font-size: 0.85em; line-height: 1.8; }
.site-footer a { color: #8fc785; }

/* ===== ===== Admin Layout ===== ===== */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar { width: 220px; background: #1a3a1a; color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0; }
.sidebar-brand { padding: 20px; font-size: 1.1em; font-weight: bold; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar-nav { padding: 10px 0; flex: 1; }
.sidebar-nav a { display: block; padding: 10px 20px; color: #b8c7e0; text-decoration: none; font-size: 0.9em; transition: all 0.2s; }
.sidebar-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-nav a.on { background: #2d5a27; color: #fff; }
.sidebar-nav hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 8px 20px; }
.admin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.admin-topbar { background: #fff; padding: 16px 24px; border-bottom: 1px solid #e0e0e0; }
.admin-topbar h1 { font-size: 1.3em; color: #2d5a27; }
.admin-content { padding: 24px; flex: 1; }

/* ===== Admin Components ===== */
.toolbar { margin-bottom: 20px; }
.btn { display: inline-block; padding: 10px 20px; background: #2d5a27; color: #fff; border: none; border-radius: 8px; font-size: 0.9em; cursor: pointer; text-decoration: none; }
.btn:hover { background: #1a3a1a; text-decoration: none; }
.btn-sm { display: inline-block; padding: 5px 12px; background: #e8f0e6; color: #2d5a27; border: none; border-radius: 4px; font-size: 0.8em; cursor: pointer; text-decoration: none; }
.btn-sm:hover { background: #d0e0cc; text-decoration: none; }
.btn-danger { background: #f8d7da; color: #721c24; }
.btn-danger:hover { background: #f5c6cb; }

/* Table */
.table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #f0f0f0; font-size: 0.9em; }
.table th { background: #f8faf8; font-weight: 600; color: #555; }
.table tr:hover { background: #f9fbf9; }
.table .unread { background: #fff8e1; font-weight: bold; }
.thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 6px; }
.preview { max-width: 200px; margin-top: 8px; border-radius: 6px; }

/* Tags */
.tag { display: inline-block; padding: 2px 10px; background: #e8f0e6; color: #2d5a27; border-radius: 12px; font-size: 0.8em; }
.tag-施肥 { background: #c8e6c9; color: #2e7d32; }
.tag-打药 { background: #fff3e0; color: #e65100; }
.tag-修枝 { background: #e3f2fd; color: #1565c0; }
.tag-浇水 { background: #e0f7fa; color: #00838f; }
.tag-除草 { background: #f3e5f5; color: #7b1fa2; }

/* Grids */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.stat-card.warn { border-left: 3px solid #ff9800; }
.stat-num { display: block; font-size: 2em; font-weight: bold; color: #2d5a27; }
.stat-label { display: block; font-size: 0.85em; color: #888; margin-top: 4px; }

/* Form */
.form { background: #fff; padding: 24px; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); max-width: 700px; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.9em; color: #555; }
.form input[type="text"], .form input[type="number"], .form input[type="date"], .form input[type="password"], .form select, .form textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.95em; box-sizing: border-box; }
.form textarea { font-family: inherit; }
.form-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; padding: 16px; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 20px; }
.form-inline input, .form-inline select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9em; flex: 1; min-width: 120px; }

/* Pagination */
.pagination { margin-top: 20px; text-align: center; display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.page-current, .page-link { display: inline-block; padding: 6px 14px; border-radius: 4px; font-size: 0.9em; }
.page-current { background: #2d5a27; color: #fff; }
.page-link { background: #fff; color: #2d5a27; border: 1px solid #ddd; text-decoration: none; }

/* Misc */
.text-muted { color: #999; font-size: 0.9em; }
.mb-20 { margin-bottom: 20px; }
.float-right { float: right; }
.msg-ok { background: #d4edda; color: #155724; padding: 12px; border-radius: 6px; margin-bottom: 16px; }
.msg-error { background: #f8d7da; color: #721c24; padding: 12px; border-radius: 6px; margin-bottom: 16px; }

/* Login page */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f5f5f0; }
.login-box { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.1); width: 360px; max-width: 90%; }
.login-box h1 { text-align: center; color: #2d5a27; margin-bottom: 24px; font-size: 1.4em; }
.login-box input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1em; margin-bottom: 14px; box-sizing: border-box; }
.login-box button { width: 100%; padding: 12px; background: #2d5a27; color: #fff; border: none; border-radius: 8px; font-size: 1em; cursor: pointer; }

/* SOP Grid */
.sop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sop-card { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.sop-category { display: inline-block; padding: 2px 10px; background: #e8f0e6; color: #2d5a27; border-radius: 10px; font-size: 0.8em; margin-bottom: 8px; }
.sop-card h3 { font-size: 1em; margin-bottom: 12px; }
.sop-actions { display: flex; gap: 8px; }

/* Problem Cases */
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.case-card { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); line-height: 1.7; }
.case-category { display: inline-block; padding: 2px 10px; background: #fff3e0; color: #e65100; border-radius: 10px; font-size: 0.8em; margin-bottom: 8px; }
.case-card h3 { font-size: 1em; margin-bottom: 8px; color: #2d5a27; }

/* Cards */
.card { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.card h3 { margin-bottom: 8px; }

/* Task list */
.task-list { list-style: none; }
.task-item { background: #fff; padding: 10px 16px; border-radius: 8px; margin-bottom: 6px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.task-item strong { flex: 1; }
.task-item.priority-high { border-left: 3px solid #e53935; }
.task-item.priority-normal { border-left: 3px solid #ff9800; }
.task-item.priority-low { border-left: 3px solid #8bc34a; }

/* Contact button */
.contact-btn { display: inline-block; padding: 12px 30px; background: #2d5a27; color: #fff; border-radius: 8px; margin-top: 10px; text-decoration: none; }
.contact-btn:hover { background: #1a3a1a; text-decoration: none; }


/* ===== Drone Management ===== */
.drone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.drone-card { padding: 20px; }
.drone-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.drone-header h3 { margin: 0; font-size: 1.05em; }
.drone-status { font-size: 0.8em; padding: 3px 10px; border-radius: 12px; }
.status-available { background: #e8f5e9; color: #2e7d32; }
.status-in_use { background: #ffebee; color: #c62828; }
.status-maintenance { background: #fff3e0; color: #e65100; }
.status-retired { background: #f5f5f5; color: #666; }
.drone-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0; font-size: 0.85em; color: #555; }
.drone-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; }
@media (max-width: 768px) {
    .drone-grid { grid-template-columns: 1fr; }
}

.sidebar-overlay { display: none; }
.menu-btn { display: none; }
.admin-bottom-nav { display: none; }
/* ===== Mobile Admin ===== */
@media (max-width: 768px) {
    /* ===== Frontend Nav ===== */
    .nav-links { display: none; position: absolute; top: 56px; left: 0; right: 0; background: #1a3a1a; flex-direction: column; padding: 10px; z-index: 200; }
    .nav-links.show { display: flex; }
    .nav-links a { padding: 14px 16px; border-radius: 0; font-size: 1em; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .nav-toggle { display: block; }
    .site-nav { position: sticky; }
    
    /* ===== Admin Layout ===== */
    .admin-layout { flex-direction: column; padding-bottom: 64px; }
    
    /* Sidebar: slide-out overlay */
    .admin-sidebar { position: fixed; top: 0; left: -260px; width: 260px; height: 100vh; z-index: 1000; transition: left 0.25s ease; box-shadow: 2px 0 12px rgba(0,0,0,0.2); }
    .admin-sidebar.open { left: 0; }
    .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 999; }
    .sidebar-overlay.show { display: block; }
    .sidebar-nav a { padding: 14px 20px; font-size: 0.95em; }
    .sidebar-nav hr { margin: 6px 20px; }
    
    /* Top bar with hamburger */
    .admin-topbar { padding: 12px 16px; display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 100; background: #fff; }
    .admin-topbar h1 { font-size: 1.05em; flex: 1; }
    .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: #f0f2ed; border-radius: 10px; font-size: 1.2em; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
    .menu-btn:active { background: #e0e4da; }
    
    /* Content */
    .admin-content { padding: 12px; }
    
    /* ===== Bottom Navigation ===== */
    .admin-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e8e8e8; display: flex; padding: 4px 0 env(safe-area-inset-bottom,4px); z-index: 100; box-shadow: 0 -2px 8px rgba(0,0,0,0.06); }
    .admin-bottom-nav a { flex: 1; text-align: center; padding: 6px 2px; color: #888; text-decoration: none; font-size: 0.62em; -webkit-tap-highlight-color: transparent; }
    .admin-bottom-nav a .bn-icon { font-size: 1.4em; display: block; margin-bottom: 1px; }
    .admin-bottom-nav a.active { color: #2d5a27; }
    
    /* ===== Tables ===== */
    .table { display: block; overflow-x: auto; white-space: nowrap; font-size: 0.82em; -webkit-overflow-scrolling: touch; }
    .table th, .table td { padding: 8px 10px; }
    
    /* ===== Grids ===== */
    .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-card { padding: 14px; }
    .stat-num { font-size: 1.4em; }
    
    /* ===== Forms ===== */
    .form-inline { flex-direction: column; }
    .form-inline input, .form-inline select { width: 100%; min-height: 44px; }
    .form { padding: 16px; }
    .form input[type="text"], .form input[type="number"], .form input[type="date"], .form input[type="password"], .form select, .form textarea { min-height: 44px; font-size: 1em; }
    .form-row { margin-bottom: 14px; }
    
    /* ===== Buttons ===== */
    .btn { padding: 12px 20px; font-size: 0.95em; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-sm { padding: 8px 14px; font-size: 0.85em; min-height: 36px; display: inline-flex; align-items: center; }
    .btn-danger { min-height: 36px; }
    
    /* ===== Special grids ===== */
    .sop-grid, .case-grid, .drone-grid { grid-template-columns: 1fr; }
    .two-col, .three-col { grid-template-columns: 1fr; }
    
    /* ===== Boss page exclusão bottom nav ===== */
    .boss-wrap { padding: 10px; }
}