/* =========================================================
   TradeHive Homeowner Dashboard – Refined UI
   Scope: .tha-* only (won't affect rest of site)
   ========================================================= */

/* ---------- Dashboard shell & hero ---------- */

.tha-dash{
  max-width:1100px;
  margin:24px auto 40px;
  padding:0 16px;
}

@media (min-width:960px){
  .tha-dash{padding:0;}
}

.tha-dash-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:20px 22px;
  border-radius:20px;
  background:linear-gradient(120deg,#1d4ed8,#0ea5e9);
  color:#e5f0ff;
  box-shadow:0 18px 40px rgba(15,23,42,.28);
  margin-bottom:18px;
}

.tha-dash-title{
  margin:0 0 4px;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#f9fafb;
}

.tha-dash-sub{
  margin:0;
  font-size:14px;
  line-height:1.5;
  max-width:460px;
  opacity:.9;
}

.tha-dash-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  min-width:0;
}

.tha-dash-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.32);
  font-size:12px;
  color:#e5f0ff;
  white-space:nowrap;
}

.tha-dash-link{
  font-size:13px;
  color:#eff6ff;
  text-decoration:none;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(191,219,254,.7);
  background:rgba(15,23,42,.18);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.tha-dash-link:hover{
  background:rgba(15,23,42,.35);
}

/* Small icon-style chevron (text-only) */
.tha-dash-link::after{
  content:"›";
  font-size:14px;
  line-height:1;
}

@media (max-width:720px){
  .tha-dash-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .tha-dash-meta{
    align-items:flex-start;
  }
  .tha-dash-title{
    font-size:24px;
  }
}

/* ---------- Inline alerts (using tha_ok / tha_err) ---------- */

.tha-alert{
  margin-bottom:16px;
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.tha-alert::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:999px;
  margin-top:2px;
}

.tha-alert--ok{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#065f46;
}

.tha-alert--ok::before{
  background:#22c55e;
}

.tha-alert--err{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
}

.tha-alert--err::before{
  background:#ef4444;
}

/* ---------- Tabs — pill style ---------- */

.tha-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:18px;
  border-bottom:2px solid #e5e7eb;
  padding-bottom:6px;
}

.tha-tab{
  --th-tab-bg:#fff;
  --th-tab-fg:#111827;
  --th-tab-bd:#d0d7de;
  --th-tab-active:#2563eb;
  --th-tab-hover:#f3f4f6;

  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border:1px solid var(--th-tab-bd);
  border-radius:999px;
  background:var(--th-tab-bg);
  color:var(--th-tab-fg);
  text-decoration:none;
  font-weight:600;
  line-height:1;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .06s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  font-size:14px;
}

.tha-tab:hover{
  background:var(--th-tab-hover);
}

.tha-tab:active{
  transform:translateY(1px);
}

.tha-tab:focus-visible{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

.tha-tab.active{
  background:var(--th-tab-active);
  color:#fff;
  border-color:var(--th-tab-active);
  box-shadow:0 6px 14px rgba(37,99,235,.28);
}

@media (max-width:520px){
  .tha-tabs{
    overflow-x:auto;
    padding-bottom:8px;
    scrollbar-width:thin;
    gap:8px;
  }
  .tha-tabs::-webkit-scrollbar{height:6px}
  .tha-tabs::-webkit-scrollbar-thumb{
    background:#d1d5db;
    border-radius:999px;
  }
}

/* ---------- Generic cards & text ---------- */

.tha-card{
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#ffffff;
  padding:18px 18px 16px;
  margin-bottom:18px;
  box-shadow:0 4px 10px rgba(15,23,42,.04);
}

.tha-card h3{
  margin-top:0;
  margin-bottom:10px;
  font-size:18px;
  font-weight:700;
}

.tha-dash-title-small{
  margin:0 0 10px;
  font-size:20px;
  font-weight:700;
}

.tha-btn{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius:10px;
  border:1px solid #1d4ed8;
  background:#1d4ed8;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
}

.tha-btn:hover{
  background:#1e40af;
  border-color:#1e40af;
}

.tha-btn-outline{
  display:inline-block;
  padding:.5rem .85rem;
  border-radius:10px;
  border:1px solid #d0d7de;
  background:#fff;
  text-decoration:none;
  font-size:14px;
}

.tha-btn-outline:hover{
  background:#f9fafb;
}

.tha-small{
  color:#6b7280;
  font-size:12px;
}

/* ---------- Directory-like business cards (Likes tab) ---------- */

.th-grid-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

@media (max-width:760px){
  .th-grid-cards{grid-template-columns:1fr;}
}

.th-card{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:12px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#ffffff;
  padding:12px;
  box-shadow:0 2px 6px rgba(15,23,42,.03);
}

.th-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #e5e7eb;
  aspect-ratio:1/1;
}

.th-card-title{
  margin:.2rem 0 .1rem;
  font-size:18px;
}

.th-card-title a{
  text-decoration:none;
  color:#0f172a;
}

.th-card-title a:hover{
  text-decoration:underline;
}

.th-card-meta{
  color:#475569;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
  font-size:13px;
}

.th-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.th-like-btn{
  padding:.45rem .7rem;
  border:1px solid #d0d7de;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  font-size:14px;
}

.th-like-btn.is-liked{
  background:#fee2e2;
  border-color:#fecaca;
  color:#991b1b;
}

/* Initials fallback block when no logo */
.th-logo-fallback{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1/1;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
  font-weight:800;
  letter-spacing:.5px;
  font-size:28px;
  color:#374151;
}

/* ---------- Reviews list (cards) ---------- */

.tha-reviews-cards{
  display:grid;
  gap:12px;
}

.tha-review-card{
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  padding:12px 14px;
}

.tha-review-hd{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:6px;
  font-size:14px;
}

.tha-review-title{
  font-weight:700;
  margin-bottom:4px;
}

.tha-stars::before{
  content:attr(data-stars) "★";
  font-weight:700;
  color:#f59e0b;
}

.tha-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

/* ---------- Spreadsheet-like tables (Invoices + Leads) ---------- */

.tha-xltable{
  display:grid;
  gap:0;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.tha-xltable .tha-tr{
  display:grid;
  grid-template-columns:130px 1fr 110px 160px 120px;
  align-items:center;
  font-size:13px;
}

@media (max-width:920px){
  .tha-xltable .tha-tr{
    grid-template-columns:110px 1fr 90px 140px 100px;
  }
}

.tha-xltable .tha-tr > div{
  padding:10px 12px;
  border-bottom:1px solid #eef2f7;
}

.tha-xltable .tha-tr:nth-child(even) > div{
  background:#fafbfc;
}

.tha-xltable .tha-th > div{
  background:#f3f4f6;
  font-weight:700;
  border-bottom:2px solid #e5e7eb;
}

.tha-chip{
  display:inline-block;
  padding:.15rem .45rem;
  border:1px solid #d1fae5;
  border-radius:999px;
  background:#ecfdf5;
  color:#065f46;
  font-size:12px;
}

/* Leads tab extra layout comes from inline <style> in PHP */

/* ---------- Forms/layout ---------- */

.tha-form .tha-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (max-width:720px){
  .tha-form .tha-grid{
    grid-template-columns:1fr;
  }
}

.tha-form label{
  font-size:13px;
  color:#111827;
  display:block;
}

.tha-form input[type="text"],
.tha-form input[type="email"],
.tha-form input[type="password"],
.tha-form input[type="date"],
.tha-form input[type="number"],
.tha-form select,
.tha-form textarea{
  width:100%;
  margin-top:4px;
  padding:.55rem .6rem;
  border:1px solid #d0d7de;
  border-radius:10px;
  background:#fff;
  font-size:14px;
}

.tha-form textarea{
  resize:vertical;
  min-height:110px;
}

.tha-form input:focus,
.tha-form select:focus,
.tha-form textarea:focus{
  outline:2px solid rgba(37,99,235,.25);
  outline-offset:1px;
  border-color:#2563eb;
}

.tha-error{
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca;
  border-radius:10px;
  padding:.6rem .75rem;
  margin-bottom:10px;
  font-size:14px;
}

/* ---------- Grey delete buttons (Reviews + Leads only) ---------- */

.tha-review-card .tha-btn.danger,
.tha-leads-ho .tha-btn.danger{
  background:#6b7280;      /* gray-500 */
  border-color:#6b7280;
  color:#fff;
}

.tha-review-card .tha-btn.danger:hover,
.tha-leads-ho .tha-btn.danger:hover{
  background:#4b5563;      /* gray-600 */
}