/* ============================================
   FarmsWork Design System
   ============================================ */

:root {
  --fw-primary: #2B4C3F;
  --fw-primary-light: #3D6B5A;
  --fw-primary-subtle: #E8F0EC;
  --fw-accent: #C4762B;
  --fw-accent-light: #F5EDE3;
  --fw-gray-900: #1A1A1A;
  --fw-gray-700: #4A4A4A;
  --fw-gray-500: #8C8C8C;
  --fw-gray-300: #D1D1D1;
  --fw-gray-100: #F5F5F5;
  --fw-white: #FFFFFF;
  --fw-status-active: #2B7A4B;
  --fw-status-pending: #D4920B;
  --fw-status-danger: #C43D3D;
  --fw-status-info: #3B7FC4;
  --fw-status-neutral: #6B6B6B;
  --fw-radius-sm: 4px;
  --fw-radius-md: 8px;
  --fw-radius-lg: 12px;
  --fw-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --fw-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
}

/* ---- Base ---- */
body {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  color: var(--fw-gray-900);
  background: var(--fw-gray-100);
  line-height: 1.6;
}
a { color: var(--fw-primary); text-decoration: none; }
a:hover { color: var(--fw-primary-light); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.02em; color: var(--fw-gray-900); }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
h5 { font-size: 15px; }

/* ---- Navbar ---- */
.navbar.fw-navbar { background: var(--fw-primary) !important; padding: 0.4rem 0; border-bottom: 2px solid rgba(0,0,0,0.15); }
.fw-navbar .navbar-brand { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.fw-navbar .navbar-brand .brand-accent { color: var(--fw-accent); }
.fw-navbar .nav-link {
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  padding: 0.6rem 0.8rem !important; color: rgba(255,255,255,0.75) !important; transition: color 0.15s;
}
.fw-navbar .nav-link:hover, .fw-navbar .nav-link.active { color: #fff !important; }
.fw-navbar .dropdown-menu { font-size: 13px; border: 1px solid var(--fw-gray-300); box-shadow: var(--fw-shadow-md); border-radius: var(--fw-radius-md); }

/* ---- Page Header ---- */
.fw-page-header {
  background: var(--fw-white); border-bottom: 1px solid var(--fw-gray-300);
  padding: 16px 0; margin-bottom: 24px;
}
.fw-page-header h1 { margin: 0; font-size: 20px; }

/* ---- Cards ---- */
.card { border: 1px solid var(--fw-gray-300); border-radius: var(--fw-radius-md); box-shadow: var(--fw-shadow-sm); }
.card-header {
  background: var(--fw-white) !important; border-bottom: 1px solid var(--fw-gray-300);
  font-weight: 600; font-size: 14px; color: var(--fw-gray-900) !important; padding: 12px 16px;
}
.card-body { padding: 16px; }

/* ---- Buttons ---- */
.btn { font-size: 13px; font-weight: 600; border-radius: var(--fw-radius-md); }
.btn-success, .btn-primary { background: var(--fw-primary) !important; border-color: var(--fw-primary) !important; color: #fff !important; }
.btn-success:hover, .btn-primary:hover { background: var(--fw-primary-light) !important; border-color: var(--fw-primary-light) !important; }
.btn-outline-success, .btn-outline-primary { color: var(--fw-primary) !important; border-color: var(--fw-primary) !important; background: transparent !important; }
.btn-outline-success:hover, .btn-outline-primary:hover { background: var(--fw-primary) !important; color: #fff !important; }
.btn-accent { background: var(--fw-accent); border-color: var(--fw-accent); color: #fff; font-weight: 700; padding: 10px 24px; border-radius: var(--fw-radius-md); }
.btn-accent:hover { background: #B06A25; border-color: #B06A25; color: #fff; }
.btn-outline-light { color: #fff !important; border-color: rgba(255,255,255,0.6) !important; padding: 10px 24px; font-weight: 700; }
.btn-outline-light:hover { background: rgba(255,255,255,0.15) !important; color: #fff !important; border-color: #fff !important; }

/* ---- Tables ---- */
.table { font-size: 13px; }
.table > thead > tr > th {
  background: var(--fw-gray-100) !important; color: var(--fw-gray-700) !important;
  font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 2px solid var(--fw-gray-300) !important; padding: 10px 12px;
}
.table > tbody > tr > td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid var(--fw-gray-300); }
.table > tbody > tr:hover { background: var(--fw-primary-subtle) !important; }
.table-dark, .table-dark th { background: var(--fw-gray-100) !important; color: var(--fw-gray-700) !important; }

/* ---- Badges ---- */
.badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.badge.bg-success { background: var(--fw-status-active) !important; }
.badge.bg-warning { background: var(--fw-status-pending) !important; color: #fff !important; }
.badge.bg-danger { background: var(--fw-status-danger) !important; }
.badge.bg-info { background: var(--fw-status-info) !important; color: #fff !important; }
.badge.bg-secondary { background: var(--fw-status-neutral) !important; }
.badge.bg-primary { background: var(--fw-primary) !important; }

.fw-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 12px; line-height: 1.5; }
.fw-badge--active { background: #E3F2E8; color: var(--fw-status-active); }
.fw-badge--pending { background: #FFF3D6; color: #8B6914; }
.fw-badge--danger { background: #FDEAEA; color: var(--fw-status-danger); }
.fw-badge--info { background: #E3F0FA; color: var(--fw-status-info); }
.fw-badge--neutral { background: var(--fw-gray-100); color: var(--fw-gray-700); }

/* ---- Forms ---- */
.form-control, .form-select {
  font-size: 14px; border: 1px solid var(--fw-gray-300); border-radius: var(--fw-radius-md); padding: 8px 12px;
}
.form-control:focus, .form-select:focus { border-color: var(--fw-primary); box-shadow: 0 0 0 2px var(--fw-primary-subtle); }
label, .form-label { font-size: 13px; font-weight: 600; color: var(--fw-gray-700); margin-bottom: 4px; }

/* ---- Alerts ---- */
.alert { border: none; border-left: 4px solid; border-radius: 0 var(--fw-radius-sm) var(--fw-radius-sm) 0; font-size: 13px; padding: 12px 16px; }
.alert-success { border-left-color: var(--fw-status-active); background: #E3F2E8; color: #1A5C33; }
.alert-warning { border-left-color: var(--fw-status-pending); background: #FFF8E7; color: #6B4D0A; }
.alert-danger { border-left-color: var(--fw-status-danger); background: #FDEAEA; color: #8B2020; }
.alert-info { border-left-color: var(--fw-status-info); background: #E3F0FA; color: #1A4C7A; }

/* ---- Hero ---- */
.fw-hero {
  background: linear-gradient(135deg, var(--fw-primary) 0%, #1D3A2E 100%);
  color: #fff; padding: 80px 0; margin-bottom: 32px; display: flex; align-items: center; min-height: 420px;
  position: relative;
}
.fw-hero::before {
  content: ''; position: absolute; inset: 0; opacity: 0.04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.fw-hero h1 { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -0.03em; margin-bottom: 12px; }
.fw-hero .lead { color: rgba(255,255,255,0.7); font-size: 16px; font-weight: 400; }

/* ---- Dashboard ---- */
.fw-welcome-bar {
  background: var(--fw-primary-subtle); border: 1px solid rgba(43,76,63,0.15); border-radius: var(--fw-radius-md);
  padding: 16px 24px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;
}
.fw-welcome-bar h5 { margin: 0; font-size: 15px; }
.fw-stat-card {
  background: var(--fw-white); border: 1px solid var(--fw-gray-300); border-radius: var(--fw-radius-md);
  padding: 24px; text-align: center;
}
.fw-stat-card .stat-number { font-size: 28px; font-weight: 800; color: var(--fw-primary); line-height: 1; margin-bottom: 4px; }
.fw-stat-card .stat-label { font-size: 12px; color: var(--fw-gray-500); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---- Row-style Listings ---- */
.fw-list-item {
  display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--fw-white);
  border-bottom: 1px solid var(--fw-gray-300); transition: background 0.1s;
}
.fw-list-item:first-child { border-top: 1px solid var(--fw-gray-300); border-radius: var(--fw-radius-md) var(--fw-radius-md) 0 0; }
.fw-list-item:last-child { border-radius: 0 0 var(--fw-radius-md) var(--fw-radius-md); }
.fw-list-item:only-child { border-radius: var(--fw-radius-md); }
.fw-list-item:hover { background: var(--fw-primary-subtle); }
.fw-list-item .item-thumb {
  width: 56px; height: 56px; border-radius: var(--fw-radius-md); background: var(--fw-gray-100);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--fw-gray-500); font-size: 22px;
}
.fw-list-item .item-body { flex: 1; min-width: 0; }
.fw-list-item .item-body h6 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.fw-list-item .item-body h6 a { color: var(--fw-gray-900); }
.fw-list-item .item-body h6 a:hover { color: var(--fw-primary); text-decoration: none; }
.fw-list-item .item-body .item-meta { font-size: 12px; color: var(--fw-gray-500); }
.fw-list-item .item-body .item-desc { font-size: 13px; color: var(--fw-gray-700); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-list-item .item-end { flex-shrink: 0; text-align: right; }

/* ---- Avatar ---- */
.fw-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--fw-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.fw-avatar--sm { width: 32px; height: 32px; font-size: 12px; }

/* ---- Chat ---- */
.fw-chat-area { max-height: 500px; overflow-y: auto; padding: 16px; background: var(--fw-gray-100); border-radius: var(--fw-radius-md); }
.fw-chat-bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; margin-bottom: 8px; font-size: 14px; line-height: 1.5; }
.fw-chat-bubble--sent { background: var(--fw-primary); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.fw-chat-bubble--received { background: var(--fw-white); color: var(--fw-gray-900); border: 1px solid var(--fw-gray-300); border-bottom-left-radius: 4px; }
.fw-chat-time { font-size: 11px; color: var(--fw-gray-500); margin-top: 2px; }

/* ---- Auth ---- */
.fw-auth-wrapper { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 32px; }
.fw-auth-card {
  background: var(--fw-white); border: 1px solid var(--fw-gray-300); border-radius: var(--fw-radius-lg);
  box-shadow: var(--fw-shadow-md); padding: 32px; width: 100%; max-width: 420px;
}
.fw-auth-card .brand { font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 24px; color: var(--fw-primary); }
.fw-auth-card .brand .brand-accent { color: var(--fw-accent); }

/* ---- Section ---- */
.fw-section-title { font-size: 16px; font-weight: 700; padding-bottom: 8px; margin-bottom: 16px; border-bottom: 2px solid var(--fw-gray-300); }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size: 12px; margin-bottom: 4px; }
.breadcrumb-item a { color: var(--fw-gray-500); }
.breadcrumb-item.active { color: var(--fw-gray-700); }

/* ---- Footer ---- */
.fw-footer {
  background: var(--fw-gray-900); color: var(--fw-gray-500); padding: 48px 0 24px; margin-top: 48px; font-size: 13px;
}
.fw-footer a { color: var(--fw-gray-500); }
.fw-footer a:hover { color: #fff; text-decoration: none; }
.fw-footer .footer-brand { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.fw-footer h6 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); margin-bottom: 16px; }

/* ---- Empty State ---- */
.fw-empty-state { text-align: center; padding: 48px; color: var(--fw-gray-500); }
.fw-empty-state i { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }

/* ---- KV List ---- */
.fw-kv-list dt { font-size: 12px; color: var(--fw-gray-500); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; padding: 8px 0 2px; }
.fw-kv-list dd { font-size: 14px; color: var(--fw-gray-900); padding-bottom: 8px; margin-bottom: 0; border-bottom: 1px solid var(--fw-gray-100); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .fw-hero h1 { font-size: 24px; }
  .fw-list-item { flex-wrap: wrap; }
  .fw-list-item .item-end { width: 100%; text-align: left; margin-top: 8px; }
  .fw-chat-bubble { max-width: 85%; }
}