/* components.css — cards, forms, tables, badges, tabs, alerts, flash, typeahead */
.card { background:#fff;border-radius:16px;padding:20px 24px 24px;box-shadow:0 1px 3px rgba(0,0,0,.04);
  border:1px solid #eef2f6;transition:box-shadow .15s; }
.card:hover { box-shadow:0 4px 12px rgba(0,0,0,.05); }
.card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.card-header h3 { font-size:16px;font-weight:600;color:#1a2a3a; }
.card-header .sub { font-size:13px;color:#6b7f94;font-weight:400; }
.card-header .action-link { font-size:13px;color:#1a7f5e;font-weight:500;text-decoration:none; }
.card-header .action-link:hover { text-decoration:underline; }
.stat-value { font-size:28px;font-weight:700;color:#0f2b1f; }
.stat-label { font-size:13px;color:#6b7f94;margin-top:2px; }
.status-badge { display:inline-block;padding:4px 12px;border-radius:30px;font-size:12px;font-weight:600; }
.status-badge.green{background:#e3f5ec;color:#0f7a53}.status-badge.yellow{background:#fef7e0;color:#a87d2b}
.status-badge.red{background:#fde8e8;color:#b33c3c}.status-badge.gray{background:#eef1f5;color:#5a6d80}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:600;color:#1a2a3a;margin-bottom:4px}
.form-group .hint{font-size:12px;color:#7a8b9e;font-weight:400;margin-top:4px}
.form-control{width:100%;padding:10px 14px;border:1px solid #dce3eb;border-radius:10px;font-size:14px;
  font-family:'Inter',sans-serif;background:#fff;transition:.15s;color:#1a2a3a}
.form-control:focus{border-color:#1a7f5e;box-shadow:0 0 0 3px rgba(26,127,94,.15);outline:none}
textarea.form-control{resize:vertical}
.btn{padding:10px 22px;border-radius:10px;font-weight:600;font-size:14px;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;transition:.15s;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-primary{background:#1a7f5e;color:#fff}.btn-primary:hover{background:#0f6a4d}
.btn-outline{background:transparent;color:#1a2a3a;border:1px solid #dce3eb}.btn-outline:hover{background:#f0f4fa}
.btn-sm{padding:6px 14px;font-size:12px}
.btn:disabled{opacity:.6;cursor:not-allowed}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
table th{text-align:left;padding:12px 10px 10px 0;font-weight:600;color:#2d3748;border-bottom:2px solid #e9edf2;
  font-size:12px;text-transform:uppercase;letter-spacing:.4px}
table td{padding:10px 10px 10px 0;border-bottom:1px solid #eef2f6;color:#1a2a3a}
table tr:last-child td{border-bottom:none}
.tabs{display:flex;gap:4px;border-bottom:2px solid #e9edf2;margin-bottom:20px;flex-wrap:wrap}
.tabs .tab{padding:10px 18px;font-weight:500;font-size:14px;color:#6b7f94;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-2px;text-decoration:none}
.tabs .tab.active{color:#1a7f5e;border-bottom-color:#1a7f5e;font-weight:600}
.alert-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #f0f4fa}
.alert-item:last-child{border-bottom:none}
.alert-item .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.alert-item .dot.green{background:#2ecc71}.alert-item .dot.yellow{background:#f1c40f}.alert-item .dot.red{background:#e74c3c}
.alert-item .title{font-weight:600;font-size:14px}
.alert-item .desc{font-size:13px;color:#4a5a6e;margin-top:2px}
.alert-item .meta{font-size:12px;color:#8e9aab;margin-top:4px}
.progress-bar{height:6px;background:#e9edf2;border-radius:10px;overflow:hidden;margin-top:8px}
.progress-bar .fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#1a7f5e,#2ecc71);transition:width .4s}
.pill{display:inline-block;padding:2px 12px;border-radius:30px;font-size:12px;font-weight:500;background:#eef1f5;color:#2d3748}
.pill.green{background:#e3f5ec;color:#0f7a53}.pill.yellow{background:#fef7e0;color:#a87d2b}
.pill.red{background:#fde8e8;color:#b33c3c}.pill.blue{background:#e2ecf9;color:#1a5a8a}.pill.gray{background:#eef1f5;color:#5a6d80}
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14px;font-weight:500}
.flash-success{background:#e3f5ec;color:#0f7a53}
.flash-warning{background:#fef7e0;color:#a87d2b}
.flash-error{background:#fde8e8;color:#b33c3c}
.typeahead{position:relative}
.typeahead .ta-item{padding:8px 12px;border:1px solid #eef2f6;border-top:none;background:#fff;cursor:pointer;font-size:14px}
.typeahead .ta-item:hover{background:#f0f4fa}