/* CRM admin styles for Frank's Handyman Services.
 * Builds on styles.css variables (--accent, --radius, etc.). */

.crm-body { background: #f5f5f7; }

/* shared card / field / button bits (login + editor) */
.admin-wrap { max-width: 560px; margin: 0 auto; padding: 80px 18px 60px; }
.admin-card {
  background: #fff; border: 1px solid #e5e5ea; border-radius: var(--radius);
  padding: 24px; margin-bottom: 20px; box-shadow: 0 6px 24px rgba(0,0,0,0.04);
}
.admin-card h2 { font-size: 1.2rem; margin: 0 0 16px; letter-spacing: -0.01em; }
.admin-card h2 .muted-inline { font-weight: 400; font-size: 0.82rem; color: var(--text-secondary); }
.muted { color: var(--text-secondary); font-size: 0.95rem; margin: 0 0 18px; }
.admin-field { margin-bottom: 14px; }
.admin-field label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 0.92rem; }
.admin-field input, .admin-field select, .admin-field textarea {
  width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit;
  border: 1px solid #d2d2d7; border-radius: var(--radius-sm); background: #fff;
  box-sizing: border-box; color: inherit; resize: vertical;
}
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.admin-btn {
  padding: 14px 22px; font-size: 1rem; font-weight: 600; cursor: pointer; border: none;
  border-radius: var(--radius-sm); background: var(--accent); color: #fff;
  transition: background 0.2s, opacity 0.2s;
}
.admin-btn:hover { background: var(--accent-hover); }
.admin-btn:disabled { opacity: 0.5; cursor: default; }
.admin-btn.ghost { background: #eef0f3; color: #1d1d1f; }
.admin-btn.small { padding: 9px 16px; font-size: 0.9rem; }
.admin-btn.inline { padding: 11px 18px; font-size: 0.95rem; }
.admin-btn.convert { background: #1d8a3f; }
.admin-btn.convert:hover { background: #187936; }
.admin-btn.danger { background: #fff; color: #c0392b; border: 1px solid #e7b8b2; }
.admin-btn.danger:hover { background: #fdf2f1; }

.status { margin-top: 12px; font-size: 0.94rem; min-height: 1.1em; }
.status.ok { color: #1d8a3f; }
.status.err { color: #c0392b; }
.hidden { display: none !important; }

.brand { text-align: center; margin-bottom: 22px; }
.brand a { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: #1d1d1f; }
.brand a span { color: var(--accent); }

/* sidebar layout */
.crm-brand { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; color: #1d1d1f; }
.crm-brand span { color: var(--accent); }
.who { color: var(--text-secondary); font-size: 0.82rem; word-break: break-all; }
.crm-link { color: var(--accent); cursor: pointer; font-size: 0.9rem; }

.crm-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 40;
  background: #fff; border-right: 1px solid #e5e5ea;
  display: flex; flex-direction: column; padding: 22px 16px;
}
.crm-sidebar .crm-brand { display: block; margin: 0 8px 24px; }
.crm-nav { display: flex; flex-direction: column; gap: 4px; }
.crm-tab {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; background: none; border: none; border-radius: 10px;
  font-size: 0.98rem; font-weight: 500; color: var(--text-secondary); cursor: pointer;
  font-family: inherit; transition: background 0.15s, color 0.15s;
}
.crm-tab:hover { background: #f0f1f4; color: #1d1d1f; }
.crm-tab.active { background: #eaf3ff; color: var(--accent); }
.crm-tab .ic { width: 20px; height: 20px; flex-shrink: 0; }
.crm-sidebar-foot {
  margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid #eee;
  display: flex; flex-direction: column; gap: 8px;
}

/* mobile top bar + overlay (hidden on desktop) */
.crm-topbar { display: none; }
.crm-overlay { display: none; }
.crm-menu-btn {
  width: 42px; height: 42px; border: none; background: none; cursor: pointer; padding: 9px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.crm-menu-btn span { display: block; height: 2px; background: #1d1d1f; border-radius: 2px; }
.crm-topbar-title { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }

.crm-main { margin-left: 240px; padding: 32px 24px 80px; }
.crm-main > section { max-width: 820px; margin: 0 auto; }
.crm-main h1 { font-size: 1.6rem; letter-spacing: -0.02em; margin: 0; }

@media (max-width: 860px) {
  .crm-sidebar {
    width: 264px; transform: translateX(-100%); transition: transform 0.25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.18);
  }
  .crm-sidebar.open { transform: translateX(0); }
  .crm-main { margin-left: 0; padding: 18px 16px 80px; }
  .crm-topbar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
    background: #fff; padding: 8px 12px; border-bottom: 1px solid #e5e5ea;
  }
  .crm-overlay.show {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 35;
  }
}

/* list */
.list-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.list-search {
  width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit; margin-bottom: 18px;
  border: 1px solid #d2d2d7; border-radius: var(--radius-sm); background: #fff; box-sizing: border-box;
}
.doc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.doc-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #e5e5ea; border-radius: var(--radius-sm);
  cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.doc-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.12); transform: translateY(-4px); }

/* cover: first job photo, or a deterministic gradient when there is none */
.doc-card .dc-cover {
  position: relative; height: 150px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.doc-card .dc-cover img { display: none; }
.doc-card .dc-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.40), rgba(0,0,0,0) 55%);
}
.doc-card .dc-cover .badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
.doc-card .dc-total {
  position: absolute; bottom: 10px; right: 12px; z-index: 1;
  color: #fff; font-weight: 700; font-size: 1.05rem; text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.doc-card .dc-body { padding: 12px 14px 14px; min-width: 0; }
.doc-card .dc-name { font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-card .dc-sub { color: var(--text-secondary); font-size: 0.85rem; margin-top: 3px; }

/* gradient fallbacks (no photo) */
.grad-1 { background-image: linear-gradient(135deg, #0071e3, #00c6fb); }
.grad-2 { background-image: linear-gradient(135deg, #667eea, #764ba2); }
.grad-3 { background-image: linear-gradient(135deg, #11998e, #38ef7d); }
.grad-4 { background-image: linear-gradient(135deg, #f0932b, #eb4d4b); }
.grad-5 { background-image: linear-gradient(135deg, #ee5253, #341f97); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; }
.badge.quote { background: #eaf3ff; color: #0058b0; }
.badge.invoice { background: #e7f6ec; color: #187936; }

/* leads */
.lead-card {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  background: #fff; border: 1px solid #e5e5ea; border-left: 4px solid var(--accent); border-radius: var(--radius-sm);
  padding: 14px 16px; transition: box-shadow 0.15s;
}
.lead-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.lead-card.called { border-left-color: #1d8a3f; background: #fafdfb; opacity: 0.85; }
.lead-card .lc-main { min-width: 0; }
.lead-card .lc-name { font-weight: 600; font-size: 1rem; }
.lead-card .lc-sub { color: var(--text-secondary); font-size: 0.85rem; margin-top: 2px; }
.lead-card .lc-msg { font-size: 0.9rem; margin-top: 6px; white-space: pre-wrap; word-break: break-word; }
.lead-card .lc-call { display: inline-block; margin-top: 8px; font-size: 0.88rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.lead-card .lc-right { flex-shrink: 0; }
.lead-toggle {
  border: 1px solid #d2d2d7; background: #fff; border-radius: 99px; padding: 7px 14px;
  font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lead-toggle.is-new { color: var(--accent); border-color: var(--accent); }
.lead-toggle.is-new:hover { background: var(--accent); color: #fff; }
.lead-toggle.is-called { color: #1d8a3f; border-color: #bfe6cb; background: #eaf8ef; }
.lead-toggle:disabled { opacity: 0.5; cursor: default; }

/* clients */
.client-list { display: flex; flex-direction: column; gap: 12px; }
.client-card {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e5e5ea; border-radius: var(--radius-sm);
  padding: 14px 16px; transition: box-shadow 0.15s;
}
.client-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.client-card .cl-main { min-width: 0; flex: 1; cursor: pointer; }
.client-card .cl-name { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.cl-badge { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; flex-shrink: 0; }
.cl-badge.person { background: #eaf3ff; color: #0058b0; }
.cl-badge.business { background: #f3eaff; color: #6b2bb0; }
.client-card .cl-sub {
  color: var(--text-secondary); font-size: 0.85rem; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-actions { display: flex; gap: 8px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.client-card:hover .cl-actions, .client-card:focus-within .cl-actions { opacity: 1; }
.cl-act {
  border: 1px solid #d2d2d7; background: #fff; border-radius: 99px; padding: 7px 14px;
  font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cl-act.quote { color: var(--accent); border-color: var(--accent); }
.cl-act.quote:hover { background: var(--accent); color: #fff; }
.cl-act.invoice { color: #1d8a3f; border-color: #bfe6cb; }
.cl-act.invoice:hover { background: #1d8a3f; color: #fff; }
.cl-act.edit { color: var(--text-secondary); }
.cl-act.edit:hover { background: #f0f1f4; color: #1d1d1f; }

/* person / business toggle in the client editor */
.type-toggle { display: flex; gap: 10px; margin-bottom: 18px; }
.type-opt {
  flex: 1; padding: 13px; border: 1px solid #d2d2d7; background: #fff; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.98rem; font-weight: 600; color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.type-opt span { font-size: 0.68rem; font-weight: 600; opacity: 0.65; }
.type-opt:hover { border-color: var(--accent); }
.type-opt.active { border-color: var(--accent); background: #eaf3ff; color: var(--accent); }

@media (max-width: 860px) {
  /* touch devices: actions are always visible, card can wrap */
  .cl-actions { opacity: 1; }
}
@media (max-width: 560px) {
  .client-card { flex-wrap: wrap; }
  .client-card .cl-sub { white-space: normal; }
}

/* line items */
.items-head, .item-row {
  display: grid; grid-template-columns: 1fr 56px 96px 84px 30px; gap: 8px; align-items: center;
}
.items-head { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 8px; padding: 0 2px; }
.item-row { margin-bottom: 8px; }
.item-row input {
  padding: 10px; font-size: 0.95rem; font-family: inherit; border: 1px solid #d2d2d7;
  border-radius: 9px; box-sizing: border-box; width: 100%; background: #fff;
}
.item-row .line-total { font-size: 0.92rem; text-align: right; color: #1d1d1f; }
.item-row .rm {
  border: none; background: none; color: #c0392b; font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.totals { margin-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.gst-toggle { font-size: 0.92rem; display: flex; align-items: center; gap: 8px; color: #1d1d1f; }
.totals-rows { margin-left: auto; min-width: 220px; }
.totals-rows > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.95rem; }
.totals-rows .grand { border-top: 1px solid #e5e5ea; margin-top: 4px; padding-top: 8px; font-size: 1.1rem; }

/* photos */
.drop-zone {
  border: 2px dashed #c7c7cc; border-radius: var(--radius-sm); padding: 26px 18px; text-align: center;
  color: var(--text-secondary); cursor: pointer; transition: border-color 0.2s, background 0.2s; margin-bottom: 14px;
}
.drop-zone:hover, .drop-zone.drag { border-color: var(--accent); background: #f5f9ff; }
.drop-zone strong { display: block; color: #1d1d1f; font-size: 1.02rem; margin-bottom: 3px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.photo-grid:empty { display: none; }
.photo-grid figure { position: relative; margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; background: #eee; }
.photo-grid .del {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.6); color: #fff; font-size: 15px; cursor: pointer; line-height: 1;
}
.photo-grid .cap { font-size: 0.76rem; color: var(--text-secondary); margin-top: 4px; }

.editor-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.crm-link.back { display: inline-block; margin-bottom: 14px; }
.bar { height: 6px; background: #e5e5ea; border-radius: 99px; overflow: hidden; margin-top: 12px; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s; }

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .items-head { display: none; }
  .item-row { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "desc desc desc" "qty unit total"; gap: 6px; }
  .item-row .desc { grid-area: desc; }
  .item-row .qty { grid-area: qty; }
  .item-row .unit { grid-area: unit; }
  .item-row .line-total { grid-area: total; text-align: right; align-self: center; }
  .item-row .rm { position: absolute; top: -2px; right: -2px; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}