/* TaxFlow Pro — WordPress Plugin Styles */
#taxflow-root {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  background: #f5f6fa;
  min-height: 100vh;
  margin: 0 -20px; /* override WP content padding */
}
#taxflow-app {
  display: flex;
  height: 100vh;
  min-height: 650px;
  overflow: hidden;
}

/* ── Sidebar ── */
.tf-sidebar {
  width: 260px;
  min-width: 260px;
  background: #fff;
  border-right: 1px solid #e8eaf0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}
.tf-logo {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8eaf0;
}
.tf-logo span {
  color: #378ADD;
  font-size: 11px;
  display: block;
  font-weight: 400;
  margin-top: 2px;
}
.tf-search input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #e0e3ed;
  border-radius: 7px;
  font-size: 12px;
  background: #f5f6fa;
  color: #333;
  margin-bottom: 10px;
  outline: none;
}
.tf-search input:focus { border-color: #378ADD; }
.tf-client-list { flex: 1; overflow-y: auto; }
.tf-ci {
  padding: 10px 10px;
  border-radius: 7px;
  cursor: pointer;
  margin-bottom: 4px;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.tf-ci:hover { background: #f0f4ff; border-color: #d0d9f0; }
.tf-ci.active { background: #e8f0fe; border-color: #378ADD; }
.tf-cn { font-size: 12px; font-weight: 600; color: #1a1a2e; }
.tf-ct { font-size: 10px; color: #888; margin-top: 2px; }
.tf-add-btn {
  margin-top: 12px;
  width: 100%;
  padding: 8px;
  border: 1px dashed #c0c8e0;
  border-radius: 7px;
  background: transparent;
  color: #378ADD;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.tf-add-btn:hover { background: #e8f0fe; }
.tf-storage-bar {
  font-size: 10px;
  color: #aaa;
  text-align: center;
  padding: 6px 0 0;
  border-top: 1px solid #f0f0f0;
  margin-top: 8px;
}

/* ── Main area ── */
.tf-main { flex: 1; overflow-y: auto; padding: 20px 24px; background: #f5f6fa; }
.tf-top-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tf-top-bar h2 { font-size: 17px; font-weight: 600; color: #1a1a2e; flex: 1; margin: 0; }
.tf-tab-row { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tf-tab {
  padding: 6px 15px;
  border: 1px solid #d0d9f0;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  background: #fff;
  color: #555;
  transition: all 0.15s;
}
.tf-tab.active { background: #378ADD; border-color: #378ADD; color: #fff; }
.tf-tab:hover:not(.active) { background: #e8f0fe; }

/* ── Section Card ── */
.tf-sc {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.tf-sc h3 {
  font-size: 10px;
  font-weight: 600;
  color: #999;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tf-fg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tf-fg.three { grid-template-columns: 1fr 1fr 1fr; }
.tf-f { display: flex; flex-direction: column; gap: 4px; }
.tf-f.full { grid-column: 1 / -1; }
.tf-f label { font-size: 10px; color: #888; font-weight: 500; }
.tf-f input, .tf-f select, .tf-f textarea {
  padding: 7px 9px;
  border: 1px solid #e0e3ed;
  border-radius: 6px;
  font-size: 12px;
  background: #f9faff;
  color: #333;
  outline: none;
  transition: border-color 0.15s;
}
.tf-f input:focus, .tf-f select:focus, .tf-f textarea:focus { border-color: #378ADD; }
.tf-f textarea { resize: vertical; min-height: 65px; }

/* ── Buttons ── */
.tf-save-btn {
  padding: 8px 20px;
  background: #378ADD;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.tf-save-btn:hover { background: #185FA5; }
.tf-save-btn.teal { background: #0F6E56; }
.tf-save-btn.teal:hover { background: #085041; }
.tf-back-btn {
  padding: 6px 12px;
  border: 1px solid #d0d9f0;
  border-radius: 6px;
  background: #fff;
  color: #666;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.tf-back-btn:hover { background: #f0f4ff; }

/* ── Badge ── */
.tf-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.tf-badge.gst   { background: #E1F5EE; color: #085041; }
.tf-badge.mca   { background: #E6F1FB; color: #0C447C; }
.tf-badge.partner { background: #FAEEDA; color: #633806; }
.tf-badge.trust { background: #EAF3DE; color: #27500A; }
.tf-badge.rent  { background: #FAECE7; color: #712B13; }

/* ── Document Grid ── */
.tf-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tf-dc {
  border: 1px solid #e8eaf0;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s;
}
.tf-dc:hover { box-shadow: 0 4px 12px rgba(56,138,221,0.12); border-color: #c0d4f0; }
.tf-di { font-size: 22px; margin-bottom: 7px; }
.tf-dt { font-size: 12px; font-weight: 600; color: #1a1a2e; margin-bottom: 3px; }
.tf-ds { font-size: 10px; color: #999; }
.tf-da { display: flex; gap: 4px; margin-top: 9px; flex-wrap: wrap; }
.tf-da button {
  padding: 3px 8px;
  font-size: 10px;
  border: 1px solid #d0d9f0;
  border-radius: 5px;
  background: #f5f6fa;
  color: #444;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
}
.tf-da button:hover { background: #e8f0fe; }
.tf-da .pdf-btn  { background: #FCEBEB; color: #A32D2D; border-color: #F09595; }
.tf-da .doc-btn  { background: #E6F1FB; color: #185FA5; border-color: #85B7EB; }
.tf-da .print-btn{ background: #EAF3DE; color: #3B6D11; border-color: #97C459; }
.tf-da .copy-btn { background: #FAEEDA; color: #854F0B; border-color: #EF9F27; }

/* ── Preview Box ── */
.tf-pbox {
  border: 1px solid #e8eaf0;
  border-radius: 10px;
  padding: 20px;
  background: #fff;
  margin-top: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.tf-pcontent {
  font-size: 12px;
  color: #222;
  line-height: 1.8;
  white-space: pre-wrap;
  width: 100%;
  min-height: 420px;
  border: none;
  background: transparent;
  font-family: 'Courier New', monospace;
  resize: vertical;
  outline: none;
}
.tf-pactions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; flex-wrap: wrap; }
.tf-pactions button {
  padding: 7px 14px;
  font-size: 11px;
  border: 1px solid #d0d9f0;
  border-radius: 6px;
  background: #f5f6fa;
  color: #444;
  cursor: pointer;
  font-weight: 500;
}
.tf-pactions button:hover { background: #e8f0fe; }
.tf-pactions .pdf-btn  { background: #FCEBEB; color: #A32D2D; border-color: #F09595; }
.tf-pactions .doc-btn  { background: #E6F1FB; color: #185FA5; border-color: #85B7EB; }
.tf-pactions .print-btn{ background: #EAF3DE; color: #3B6D11; border-color: #97C459; }
.tf-pactions .copy-btn { background: #FAEEDA; color: #854F0B; border-color: #EF9F27; }

/* ── Stats ── */
.tf-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.tf-stat {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 8px;
  padding: 14px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.tf-sv { font-size: 24px; font-weight: 700; color: #185FA5; }
.tf-sl { font-size: 10px; color: #999; margin-top: 3px; }

/* ── Notice ── */
.tf-notice {
  padding: 9px 12px;
  background: #E6F1FB;
  border-radius: 7px;
  font-size: 11px;
  color: #185FA5;
  margin-bottom: 14px;
  border-left: 3px solid #378ADD;
}

/* ── Toast ── */
.tf-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0F6E56;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  z-index: 99999;
  display: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* ── Dashboard table ── */
.tf-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f5;
  cursor: pointer;
}
.tf-client-row:hover { background: #f8faff; margin: 0 -4px; padding-left: 4px; border-radius: 6px; }
.tf-client-row:last-child { border-bottom: none; }

/* ── Responsive ── */
@media (max-width: 768px) {
  #taxflow-app { flex-direction: column; height: auto; }
  .tf-sidebar { width: 100%; min-width: unset; border-right: none; border-bottom: 1px solid #e8eaf0; }
  .tf-stat-row { grid-template-columns: repeat(2, 1fr); }
  .tf-fg { grid-template-columns: 1fr; }
  .tf-fg.three { grid-template-columns: 1fr 1fr; }
  .tf-doc-grid { grid-template-columns: repeat(2, 1fr); }
}