/* admin.css - Amigo Pet Services admin console (tabs, tables, forms).
   Uses account.css's --aps-* tokens (own fixed light palette, deliberately
   NOT the public site's --bg/--text/--accent, which flip dark under
   [data-theme="dark"] -- the admin console always stays light/readable). */

.admin-header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:#111;color:#fff}
.admin-brand{color:#fff;font-weight:700;letter-spacing:.02em;font-size:16px}
.admin-signout-btn{width:auto;padding:8px 16px;color:#fff;border-color:rgba(255,255,255,.5)}

.admin-shell{max-width:1100px;margin:0 auto;padding:24px 20px 80px;background:var(--aps-bg)}

.admin-tabs{display:flex;gap:6px;margin-bottom:22px;border-bottom:1px solid var(--aps-border)}
.admin-tab{padding:10px 18px;font-size:14px;font-weight:600;color:var(--aps-muted);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer}
.admin-tab:hover{color:var(--aps-accent)}
.admin-tab.is-active{color:var(--aps-accent);border-bottom-color:var(--aps-accent)}

.admin-tabpanel{display:none}
.admin-tabpanel.is-active{display:block}

.admin-section{margin-bottom:36px}
.admin-section-title{color:var(--aps-heading);font-weight:600;font-size:19px;margin:0 0 6px}
.admin-section-hint{color:var(--aps-muted);font-size:13.5px;margin:0 0 16px;max-width:720px;line-height:1.5}

.admin-toolbar{margin-bottom:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.admin-search{padding:9px 12px;font-size:14px;border:1px solid var(--aps-border);border-radius:6px;background:var(--aps-bg);color:var(--aps-text);min-width:220px}
#clientSearch{min-width:275px}

.admin-pill{padding:8px 16px;font-size:13px;font-weight:600;border:1px solid var(--aps-border);border-radius:999px;background:var(--aps-bg);color:var(--aps-muted);cursor:pointer}
.admin-pill:hover{border-color:var(--aps-accent);color:var(--aps-accent)}
.admin-pill.is-active{background:var(--aps-accent);border-color:var(--aps-accent);color:#fff}

.admin-form{background:var(--aps-surface);border:1px solid var(--aps-border);border-radius:8px;padding:16px;margin-bottom:18px}
/* [hidden] override needed because .admin-form-grid's own display:grid
   (an author style) otherwise beats the browser's default
   [hidden]{display:none} -- without it, a form with both classes (every
   form in this console) stays visible despite the hidden attribute. */
.admin-form-grid[hidden]{display:none}
.admin-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:start}
.admin-input,.admin-textarea{padding:9px 10px;font-size:14px;border:1px solid var(--aps-border);border-radius:6px;background:var(--aps-bg);color:var(--aps-text);width:100%}
.admin-input:focus,.admin-textarea:focus{outline:none;border-color:var(--aps-accent)}
.admin-textarea{grid-column:1/-1;resize:vertical;font-family:inherit}
.admin-check{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--aps-text)}
.admin-form-actions{grid-column:1/-1;display:flex;gap:10px;align-items:center}
.admin-form-btn{width:auto;padding:9px 20px}
.admin-form-msg{grid-column:1/-1;font-size:13px;color:var(--aps-muted);min-height:18px}
.admin-form-msg.error{color:#c0392b}
.admin-form-msg.success{color:#1f7a44}

.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:13.5px}
.admin-table th{text-align:left;padding:8px 10px;color:var(--aps-muted);font-weight:600;border-bottom:1px solid var(--aps-border);white-space:nowrap}
.admin-table td{padding:9px 10px;border-bottom:1px solid var(--aps-border);color:var(--aps-text);vertical-align:top}
.admin-table tr:hover td{background:var(--aps-surface)}
.admin-row-btn{background:var(--aps-bg);border:1px solid var(--aps-border);color:var(--aps-text);border-radius:5px;padding:4px 10px;font-size:12.5px;cursor:pointer;margin-right:4px}
.admin-row-btn:hover{border-color:var(--aps-accent);color:var(--aps-accent)}
.admin-row-btn.danger:hover{border-color:#c0392b;color:#c0392b}

.admin-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600}
.admin-badge.pending,.admin-badge.unpaid{background:#fdf0d5;color:#a5670b}
.admin-badge.confirmed,.admin-badge.partial{background:#dcecfb;color:#1a63b0}
.admin-badge.completed,.admin-badge.paid{background:#dcf3e3;color:#1f7a44}
.admin-badge.cancelled,.admin-badge.waived{background:#eceef1;color:#5a6270}

.hub-loading{color:var(--aps-muted);font-style:italic}

/* CRM master-detail (Clients tab) */
.crm-list-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.admin-back-btn{background:transparent;border:none;color:var(--aps-accent);font-size:14px;cursor:pointer;padding:0 0 12px;display:inline-block}
.admin-back-btn:hover{text-decoration:underline}
.admin-inline-label{grid-column:span 1;display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--aps-muted)}
/* Single-column, label-above-field layout -- mobile-first forms (e.g.
   Settings tab) where every field gets its own full-width row instead of
   flowing into side-by-side columns on wider screens. */
.admin-form-stacked{grid-template-columns:1fr}
.crm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:16px}
.crm-card{background:var(--aps-surface);border:1px solid var(--aps-border);border-radius:8px;padding:16px}
.crm-card-title{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--aps-heading)}
.crm-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13.5px}
.crm-dl dt{color:var(--aps-muted)}
.crm-dl dd{margin:0;color:var(--aps-text)}
.admin-form-compact{padding:12px;margin-bottom:14px}

/* Collapsible sections (contract photo, access items) -- <details class="crm-card"> */
details.crm-card{margin-bottom:16px}
details.crm-card summary.crm-card-title{cursor:pointer;list-style:none;margin:0;user-select:none}
details.crm-card summary.crm-card-title::-webkit-details-marker{display:none}
details.crm-card summary.crm-card-title::before{content:'\25B8';display:inline-block;margin-right:6px;transition:transform .15s ease}
details.crm-card[open] summary.crm-card-title::before{transform:rotate(90deg)}
details.crm-card[open] summary.crm-card-title{margin-bottom:12px}
details.crm-card .admin-toolbar:last-child,details.crm-card .admin-table-wrap:last-child{margin-bottom:0}

/* Metrics tab -- line chart (see admin.js's renderHitsChart) */
.metrics-chart-wrap{position:relative;margin-top:14px}
.metrics-chart-wrap svg{display:block;width:100%;height:auto;overflow:visible}
.metrics-chart-line{fill:none;stroke:var(--aps-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.metrics-chart-grid{stroke:var(--aps-border);stroke-width:1}
.metrics-chart-axis-label{fill:var(--aps-muted);font-size:11px}
.metrics-chart-crosshair{stroke:var(--aps-muted);stroke-width:1;opacity:0}
.metrics-chart-dot{fill:var(--aps-accent);stroke:var(--aps-bg);stroke-width:2;opacity:0}
.metrics-chart-bar{opacity:.85}
.metrics-chart-bar:hover{opacity:1}
.metrics-chart-bar-label{fill:var(--aps-text);font-size:12px;font-weight:600;text-anchor:middle}
.metrics-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:4px;font-size:12.5px;color:var(--aps-text)}
.metrics-legend-item{display:flex;align-items:center;gap:6px}
.metrics-legend-swatch{width:10px;height:10px;border-radius:2px;display:inline-block;flex:none}
.metrics-tooltip{position:absolute;pointer-events:none;background:var(--aps-heading);color:#fff;font-size:12px;padding:6px 10px;border-radius:6px;transform:translate(-50%,-115%);white-space:nowrap;opacity:0;transition:opacity .1s ease}
.metrics-tooltip strong{font-size:13px}

@media (max-width: 700px){
  .admin-shell{padding:16px 12px 60px}
  .admin-tabs{overflow-x:auto}
}