/* ==========================================================================
   SmartHire — Components
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.4rem; border-radius: var(--radius-pill); border:1.5px solid transparent;
  font-weight:600; font-size:.92rem; white-space:nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn:active{ transform: scale(0.97); }
.btn--primary{ background: var(--color-primary); color:#fff; box-shadow: var(--shadow-primary); }
.btn--primary:hover{ background: var(--color-primary-dark); }
.btn--dark{ background: var(--color-ink); color:#fff; }
.btn--dark:hover{ background:#000; }
.btn--outline{ background: transparent; border-color: var(--color-border-strong); color: var(--color-ink); }
.btn--outline:hover{ border-color: var(--color-primary); color: var(--color-primary); }
.btn--ghost{ background: transparent; color: var(--color-ink); }
.btn--ghost:hover{ background: var(--color-bg-alt); }
.btn--danger{ background: var(--color-danger-bg); color: var(--color-danger); }
.btn--danger:hover{ background:#f8d6d6; }
.btn--sm{ padding:.5rem .95rem; font-size:.82rem; }
.btn--lg{ padding:1rem 2rem; font-size:1rem; }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }
.btn--icon{ width:42px; height:42px; padding:0; border-radius:50%; }

/* ---------- Cards ---------- */
.card{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med);
}
.card--pad{ padding: var(--sp-lg); }
.card--hover:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Service card */
.service-card{ overflow:hidden; display:flex; flex-direction:column; }
.service-card__media{ position:relative; aspect-ratio: 4/3; overflow:hidden; background:var(--color-bg-alt); }
.service-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease-out); }
.service-card:hover .service-card__media img{ transform: scale(1.06); }
.service-card__badge{ position:absolute; top:.7rem; left:.7rem; }
.service-card__body{ padding: var(--sp-md) var(--sp-lg) var(--sp-lg); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.service-card__cat{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-primary); font-weight:600; }
.service-card__title{ font-size:1.08rem; font-weight:600; font-family:var(--font-body); color:var(--color-ink); }
.service-card__meta{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.6rem; border-top:1px solid var(--color-border); }
.service-card__price{ font-family:var(--font-mono); font-weight:600; color:var(--color-ink); }
.service-card__price span{ font-weight:400; color:var(--color-slate-light); font-size:.78rem; }

/* Provider card */
.provider-card{ padding: var(--sp-lg); text-align:center; }
.provider-card__avatar{ width:76px; height:76px; border-radius:50%; margin:0 auto .8rem; background:var(--color-primary-light); color:var(--color-primary-dark); display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:700; }
.provider-card__name{ font-weight:600; font-size:1.05rem; }
.provider-card__role{ font-size:.82rem; color:var(--color-slate-light); margin-top:.15rem; }
.provider-card__stats{ display:flex; justify-content:center; gap:1.2rem; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--color-border); }
.provider-card__stat b{ display:block; font-family:var(--font-mono); font-size:1rem; }
.provider-card__stat span{ font-size:.7rem; color:var(--color-slate-light); text-transform:uppercase; letter-spacing:.05em; }

/* Category tile */
.cat-tile{ padding: var(--sp-lg); display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.cat-tile__icon{ width:48px; height:48px; border-radius: var(--radius-sm); background:var(--color-primary-light); display:flex; align-items:center; justify-content:center; font-size:1.35rem; }
.cat-tile__name{ font-weight:600; }
.cat-tile__count{ font-size:.8rem; color:var(--color-slate-light); }

/* Badges */
.badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .7rem; border-radius: var(--radius-pill); font-size:.72rem; font-weight:600; letter-spacing:.02em; text-transform:capitalize; }
.badge--pending{ background:var(--color-warning-bg); color:var(--color-warning); }
.badge--accepted{ background:var(--color-info-bg); color:var(--color-info); }
.badge--completed{ background:var(--color-success-bg); color:var(--color-success); }
.badge--cancelled, .badge--rejected{ background:var(--color-danger-bg); color:var(--color-danger); }
.badge--active{ background:var(--color-success-bg); color:var(--color-success); }
.badge--inactive{ background:var(--color-bg-alt); color:var(--color-slate); }
.badge--verified{ background:var(--color-primary-light); color:var(--color-primary-dark); }
.badge--paid{ background:var(--color-success-bg); color:var(--color-success); }
.badge--failed{ background:var(--color-danger-bg); color:var(--color-danger); }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--sp-md); text-align:left; }
.field-row-2col{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem; color:var(--color-ink); }
.field .hint{ font-size:.78rem; color:var(--color-slate-light); margin-top:.35rem; }
.field .error-msg{ font-size:.78rem; color:var(--color-danger); margin-top:.35rem; display:none; }
.field.has-error .error-msg{ display:block; }
.field.has-error input, .field.has-error textarea, .field.has-error select{ border-color: var(--color-danger); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="search"], textarea, select{
  width:100%; padding:.78rem 1rem; border:1.5px solid var(--color-border); border-radius: var(--radius-sm);
  background:#fff; color:var(--color-ink); transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--color-primary); box-shadow:0 0 0 4px var(--color-primary-light); }
textarea{ resize:vertical; min-height:110px; }

.input-icon-group{ position:relative; }
.input-icon-group input{ padding-left:2.7rem; }
.input-icon-group svg{ position:absolute; left:.95rem; top:50%; transform:translateY(-50%); color:var(--color-slate-light); }

.checkbox-row{ display:flex; align-items:center; gap:.55rem; font-size:.88rem; color:var(--color-slate); }
.checkbox-row input{ width:auto; accent-color: var(--color-primary); }

.role-select{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.role-option{ border:1.5px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-md); cursor:pointer; transition: all var(--dur-fast); text-align:center; }
.role-option input{ display:none; }
.role-option.is-selected{ border-color: var(--color-primary); background: var(--color-primary-light); }
.role-option__icon{ font-size:1.6rem; margin-bottom:.4rem; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--color-border); border-radius: var(--radius-md); background:#fff; }
table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th{ text-align:left; padding: .9rem 1.1rem; background: var(--color-bg-alt); color:var(--color-slate); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
td{ padding: .9rem 1.1rem; border-top:1px solid var(--color-border); vertical-align:middle; }
tr:hover td{ background: rgba(21,94,239,0.02); }

/* ---------- Stat tile ---------- */
.stat-tile{ padding: var(--sp-lg); }
.stat-tile b{ display:block; font-family:var(--font-mono); font-size:1.9rem; color:var(--color-ink); }
.stat-tile span{ font-size:.82rem; color:var(--color-slate-light); }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding: var(--sp-3xl) var(--sp-lg); color:var(--color-slate); }
.empty-state__icon{ font-size:2.6rem; margin-bottom:.8rem; }
.empty-state h3{ margin-bottom:.4rem; }

/* ---------- Skeleton / loading ---------- */
.skeleton{ background: linear-gradient(90deg, var(--color-bg-alt) 25%, #E4EAF6 37%, var(--color-bg-alt) 63%); background-size:400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); }
.spinner{ width:22px; height:22px; border:3px solid var(--color-primary-light); border-top-color: var(--color-primary); border-radius:50%; animation: spin .7s linear infinite; }
.page-loader{ position:fixed; inset:0; background:#fff; display:flex; align-items:center; justify-content:center; z-index:2000; transition:opacity .3s; }

/* ---------- Toasts ---------- */
.toast-stack{ position:fixed; top:20px; right:20px; z-index:3000; display:flex; flex-direction:column; gap:.6rem; max-width:340px; }
.toast{ background:#fff; border:1px solid var(--color-border); border-left:4px solid var(--color-primary); border-radius: var(--radius-sm); padding:.85rem 1.1rem; box-shadow: var(--shadow-lg); font-size:.87rem; display:flex; gap:.6rem; align-items:flex-start; animation: slideIn .3s var(--ease-out); }
.toast--success{ border-left-color: var(--color-success); }
.toast--error{ border-left-color: var(--color-danger); }
.toast--warning{ border-left-color: var(--color-warning); }

/* ---------- Modal ---------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(11,18,32,0.55); backdrop-filter:blur(2px); z-index:1500; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; visibility:hidden; transition: all var(--dur-med); }
.modal-backdrop.is-open{ opacity:1; visibility:visible; }
.modal{ background:#fff; border-radius: var(--radius-lg); max-width:520px; width:100%; max-height:90vh; overflow-y:auto; box-shadow: var(--shadow-lg); transform:translateY(14px) scale(.98); transition: transform var(--dur-med) var(--ease-out); }
.modal-backdrop.is-open .modal{ transform:translateY(0) scale(1); }
.modal__head{ display:flex; align-items:center; justify-content:space-between; padding: var(--sp-lg); border-bottom:1px solid var(--color-border); }
.modal__body{ padding: var(--sp-lg); }
.modal__close{ background:none; border:none; font-size:1.3rem; color:var(--color-slate); }

/* ---------- Rating stars ---------- */
.stars{ color: var(--color-accent); letter-spacing:2px; font-size:.95rem; }
.stars .dim{ color: var(--color-border-strong); }

/* ---------- Avatar upload / auth card ---------- */
.auth-shell{ min-height: calc(100vh - var(--nav-height)); display:grid; grid-template-columns:1fr 1fr; }
.auth-shell__visual{ background: linear-gradient(160deg, var(--color-primary-darker), var(--color-primary)); position:relative; display:flex; align-items:flex-end; padding: var(--sp-2xl); color:#fff; overflow:hidden; }
.auth-shell__form{ display:flex; align-items:center; justify-content:center; padding: var(--sp-2xl); }
.auth-card{ width:100%; max-width:420px; }
.auth-card h1{ font-size: var(--fs-h3); }
.auth-divider{ display:flex; align-items:center; gap:.8rem; color:var(--color-slate-light); font-size:.8rem; margin:1.2rem 0; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--color-border); }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:.4rem; border-bottom:1px solid var(--color-border); margin-bottom: var(--sp-lg); overflow-x:auto; }
.tabs button{ background:none; border:none; padding:.8rem 1.1rem; font-weight:600; font-size:.9rem; color:var(--color-slate-light); border-bottom:2px solid transparent; white-space:nowrap; }
.tabs button.is-active{ color:var(--color-primary); border-color: var(--color-primary); }

/* ---------- Misc ---------- */
.divider{ height:1px; background:var(--color-border); border:none; margin: var(--sp-lg) 0; }
.tag-chip{ display:inline-flex; padding:.3rem .75rem; border-radius: var(--radius-pill); background:var(--color-bg-alt); font-size:.78rem; color:var(--color-slate); }
.avatar-lg{ width:96px; height:96px; border-radius:50%; background:var(--color-primary-light); color:var(--color-primary-dark); display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; }