/* ═════════════════════════════════════════════════════════════════
   Workfast HR — Theme Buttons + Visual Polish (Phase 60.8 PA-A)
   Shared CSS file dùng chung cho mọi page có forms/buttons.
   Apply: <link rel="stylesheet" href="./dist/theme-buttons.css">
   ═════════════════════════════════════════════════════════════════ */

/* ═══ BUTTON HIERARCHY (4 cấp độ) ═══ */

/* HERO — chỉ 1 button main mỗi dialog/page (Lưu form, Submit) */
.btn.hero{
  background:linear-gradient(180deg,#E85D3A 0%,#D14A2A 100%);
  color:#fff;border:none;
  padding:10px 24px;font-size:14px;font-weight:700;
  border-radius:8px;cursor:pointer;
  box-shadow:0 2px 8px rgba(232,93,58,.25);
  transition:all .15s;
  white-space:nowrap;
}
.btn.hero:hover{box-shadow:0 4px 12px rgba(232,93,58,.35);transform:translateY(-1px)}
.btn.hero:active{transform:translateY(0);box-shadow:0 1px 4px rgba(232,93,58,.3)}
.btn.hero:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* OUTLINE — sub-action, border cam fill trắng */
.btn.outline{
  background:#fff;color:#E85D3A;
  border:1.5px solid #E85D3A;
  padding:7px 14px;font-size:12px;font-weight:600;
  border-radius:6px;cursor:pointer;transition:all .12s;
}
.btn.outline:hover{background:#fff8f5}
.btn.outline.sm{padding:4px 10px;font-size:11px}

/* DANGER OUTLINE — xoá nguy hiểm, đỏ outline thay vì solid */
.btn.danger.outline{color:#dc2626;border-color:#dc2626;background:#fff;border-width:1.5px;border-style:solid}
.btn.danger.outline:hover{background:#fef2f2}

/* DANGER GHOST — danger nhẹ (cho table row actions) */
.btn.danger.ghost{color:#dc2626;background:transparent;border:1px solid transparent}
.btn.danger.ghost:hover{background:#fef2f2}

/* GHOST polish — minor action */
.btn.ghost{
  background:transparent;color:#64748b;
  border:1px solid transparent;
  padding:6px 12px;border-radius:6px;cursor:pointer;
  transition:all .12s;
}
.btn.ghost:hover{background:#f5f5f5;color:#333}

/* ═══ SECTION TITLE — card với border-left accent cam ═══ */
.section-title{
  font-size:11px;font-weight:700;color:#1f2937;
  text-transform:uppercase;letter-spacing:.6px;
  padding:8px 12px;
  border-left:3px solid #E85D3A;
  background:#fff8f5;
  margin:18px 0 10px;
  border-radius:0 6px 6px 0;
  border-bottom:none;
}
.section-title:first-child{margin-top:0}

/* ═══ STICKY FOOTER cho dialog forms ═══ */
.form-actions{
  position:sticky;bottom:0;
  background:#fff;
  padding:14px 16px;
  margin:18px -16px -16px;
  border-top:1px solid #e5e7eb;
  box-shadow:0 -4px 12px rgba(0,0,0,.04);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  z-index:5;
}

/* ═══ REQUIRED indicator ═══ */
label .req,label sup{color:#dc2626;font-weight:700;margin-left:2px}

/* ═══ STATUS PILL — fill bg theo state ═══ */
select[data-status="active"],select[data-status="working"]{
  background:#ecfdf5;color:#065f46;font-weight:600;border-color:#86efac
}
select[data-status="inactive"],select[data-status="quit"]{
  background:#fef2f2;color:#dc2626;font-weight:600;border-color:#fca5a5
}
select[data-status="pending"]{
  background:#fffbeb;color:#92400e;font-weight:600;border-color:#fde68a
}

/* ═══ STATS CARD — hover lift + accent color ═══ */
.stat{
  text-align:center;padding:14px 12px;border-radius:8px;
  background:#fff;border:1px solid #e5e7eb;
  cursor:pointer;transition:all .15s;
  position:relative;overflow:hidden;
}
.stat:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  border-color:#cbd5e1;
}
.stat .stat-value{font-size:22px;font-weight:700;line-height:1.2;margin:4px 0 0}
.stat .stat-label{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.4px}
.stat.active{border-color:#E85D3A;background:#fff8f5}
.stat.active::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:#E85D3A;
}
/* Color accents per stat type */
.stat.accent-blue::before{background:#1565c0}
.stat.accent-green::before{background:#22c55e}
.stat.accent-red::before{background:#ef4444}
.stat.accent-orange::before{background:#f59e0b}
.stat.accent-blue.active{border-color:#1565c0;background:#eff6ff}
.stat.accent-green.active{border-color:#22c55e;background:#f0fdf4}
.stat.accent-red.active{border-color:#ef4444;background:#fef2f2}
.stat.accent-orange.active{border-color:#f59e0b;background:#fffbeb}
.stat .stat-icon{font-size:20px;margin-bottom:4px;display:block}

/* ═══ TOOLBAR DIVIDER (page header) ═══ */
.toolbar-divider{
  width:1px;height:24px;background:#e5e7eb;margin:0 4px;
  align-self:center;
}

/* ═══ ACTIVE FILTER indicator ═══ */
input.has-value:not([type="hidden"]),
select.has-value{
  border-color:#fcd9c4;background:#fffaf7;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 60.9 — Search/Filter Polish (general)
   ═══════════════════════════════════════════════════════════════════ */

/* SEARCH INPUT với icon prefix + clear button */
.search-input{
  position:relative;display:inline-block;width:100%;
}
.search-input input,
.search-input input[type="text"],
.search-input input[type="search"]{
  padding-left:34px !important;
  padding-right:32px !important;
  border:1.5px solid #e0e0e0 !important;
  border-radius:8px;
  transition:border-color .15s, box-shadow .15s;
}
.search-input input:focus{
  border-color:#E85D3A !important;
  box-shadow:0 0 0 3px rgba(232,93,58,.1);
  outline:none;
}
.search-input::before{
  content:'🔍';position:absolute;left:10px;top:50%;
  transform:translateY(-50%);font-size:13px;opacity:.55;
  pointer-events:none;
}
.search-input.has-value input{
  border-color:#fcd9c4 !important;
  background:#fffaf7 !important;
}
.search-input .clear-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:#e5e7eb;border:none;cursor:pointer;color:#475569;
  width:20px;height:20px;border-radius:50%;display:none;
  font-size:11px;line-height:1;padding:0;
  align-items:center;justify-content:center;
}
.search-input.has-value .clear-btn{display:inline-flex}
.search-input .clear-btn:hover{background:#dc2626;color:#fff}

/* SELECT ACTIVE STATE — viền + bg cam khi có value */
select.flt.has-value,
select.filter-select.has-value{
  border-color:#E85D3A !important;
  background:#fff8f5 !important;
  color:#E85D3A;font-weight:600;
}

/* DATE INPUT polish — icon prefix optional via wrapper */
.date-field{
  position:relative;display:inline-block;
}
.date-field::before{
  content:'📅';position:absolute;left:8px;top:50%;
  transform:translateY(-50%);font-size:12px;opacity:.5;
  pointer-events:none;
}
.date-field input[type="date"]{
  padding-left:28px !important;
  border:1.5px solid #e0e0e0;border-radius:8px;
  transition:border-color .15s;
}
.date-field input[type="date"]:focus{
  border-color:#E85D3A;outline:none;
  box-shadow:0 0 0 3px rgba(232,93,58,.08);
}
.date-field.has-value input[type="date"]{
  border-color:#fcd9c4;background:#fffaf7;
}

/* FILTER COUNT BADGE — báo số filter active */
.filter-badge{
  display:none;
  background:#E85D3A;color:#fff;
  padding:3px 10px;border-radius:12px;
  font-size:11px;font-weight:700;
  align-items:center;gap:4px;
}
.filter-badge.show{display:inline-flex}
.filter-badge::before{content:'●';font-size:8px;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}

/* CLEAR ALL FILTERS — chỉ hiện khi có filter active */
.btn.clear-filters{
  display:none;
  font-size:11px;color:#dc2626;background:transparent;
  border:1px solid #fca5a5;padding:4px 10px;border-radius:6px;cursor:pointer;
}
.btn.clear-filters.show{display:inline-block}
.btn.clear-filters:hover{background:#fef2f2}

/* FILTER BAR layout — flex compact */
.filter-bar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:8px 0;
}
.filter-bar > label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:#64748b;margin:0;
}
.filter-bar select,
.filter-bar input[type="date"]{
  font-size:12px;padding:6px 10px;
  border:1.5px solid #e0e0e0;border-radius:6px;
}

/* ═══ TABLE ROW ACTION buttons (icon-only compact) ═══ */
.row-action{
  background:transparent;border:1px solid transparent;
  padding:4px 6px;border-radius:4px;cursor:pointer;
  font-size:13px;color:#64748b;
  transition:all .1s;
}
.row-action:hover{background:#f1f5f9;color:#1e293b}
.row-action.danger{color:#dc2626}
.row-action.danger:hover{background:#fef2f2}