/* Tracker-specific styles. Reuses the design tokens from style.css. */
:root { --color-warning: #9a5a00; --color-error: #9a2c2c; }
[data-theme="dark"] { --color-warning: #f0b35c; --color-error: #f18a8a; }

.icon-btn{width:44px;height:44px;border-radius:var(--radius-full);background:var(--color-surface);border:1px solid color-mix(in srgb, var(--color-text) 10%, transparent);display:grid;place-items:center;color:var(--color-text);cursor:pointer}
.btn-danger{background:var(--color-error);color:#fff}

.hero{padding:clamp(2.5rem,5vw,4.5rem) 0 var(--space-8)}
.hero-grid{display:grid;gap:var(--space-8);grid-template-columns:1.2fr .8fr;align-items:end}
h1,h2,h3{margin:0;line-height:1.08}
.hero h1{font-family:var(--font-display);font-size:var(--text-2xl);max-width:14ch}
h2{font-size:var(--text-lg)} h3{font-size:var(--text-base)}
.hero-copy p{max-width:58ch;margin-top:var(--space-4);color:var(--color-text-muted)}
.hero-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:var(--space-6)}

.hero-panel,.card,.table-shell,.form-shell,.empty-state{background:var(--color-surface);border:1px solid color-mix(in srgb, var(--color-text) 8%, transparent);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.hero-panel{padding:var(--space-6)}
.hero-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.stat-kpi{padding:var(--space-4);background:var(--color-surface-2);border-radius:var(--radius-md)}
.stat-kpi strong{display:block;font-size:var(--text-xl);color:var(--color-text)}
.stat-kpi span{font-size:var(--text-sm);color:var(--color-text-muted)}

.main{padding-bottom:var(--space-16)}
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--space-6);align-items:center}
.toolbar .search{flex:1 1 260px}
.toolbar .select{flex:0 0 auto}
.toolbar #seedBtn{flex:0 0 auto;margin-left:auto;padding:.45rem .9rem;min-height:0;font-size:var(--text-sm)}
.select,.search{display:flex;align-items:center;gap:.5rem;background:var(--color-surface);border:1px solid color-mix(in srgb, var(--color-text) 12%, transparent);border-radius:var(--radius-full);padding:.45rem .85rem;min-height:0;font-size:var(--text-sm)}
.select select,.search input{width:100%;border:none;background:transparent;color:var(--color-text);outline:none;font-size:var(--text-sm)}
.search input{min-width:0}

.summary-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(4,1fr);margin-bottom:var(--space-6)}
.card{padding:var(--space-5)}
.card small{display:block;color:var(--color-text-muted);font-size:var(--text-sm)}
.card strong{font-size:var(--text-xl)}

.tracker-grid{display:block}
/* Let the history table break out of the centered container to use the full screen width,
   staying horizontally centered with equal gutters on both sides. */
.table-shell{overflow:hidden;width:calc(100vw - 3rem);margin-left:50%;transform:translateX(-50%)}
@media (max-width:1240px){.table-shell{width:auto;margin-left:0;transform:none}}
.table-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:var(--space-5);border-bottom:1px solid color-mix(in srgb, var(--color-text) 10%, transparent)}
.table-head p{color:var(--color-text-muted)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:1700px}
th,td{padding:.7rem .85rem;vertical-align:top;text-align:left;border-bottom:1px solid color-mix(in srgb, var(--color-text) 8%, transparent);font-size:var(--text-sm);white-space:nowrap}
td .wrap{white-space:normal}
th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);background:color-mix(in srgb, var(--color-surface) 65%, var(--color-surface-2));position:sticky;top:0;z-index:1}
tbody tr{cursor:pointer;transition:background .18s ease}
tbody tr:hover{background:color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))}

.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700}
.pill-pass{background:color-mix(in srgb, var(--color-success) 14%, var(--color-surface));color:var(--color-success)}
.pill-fail{background:color-mix(in srgb, var(--color-error) 14%, var(--color-surface));color:var(--color-error)}
.pill-due{background:color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));color:var(--color-warning)}
.pill-neutral{background:var(--color-surface-2);color:var(--color-text-muted)}
.muted{color:var(--color-text-muted)} .amount{font-weight:700}

.form-note{margin:.35rem 0 var(--space-5);color:var(--color-text-muted)}
.form-grid{display:grid;gap:var(--space-4);grid-template-columns:1fr 1fr}

/* Add / edit record modal */
.modal{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:1.5rem}
.modal-backdrop{position:absolute;inset:0;background:color-mix(in srgb, var(--color-text) 55%, transparent);backdrop-filter:blur(2px)}
.modal-card{position:relative;z-index:1;width:min(100%,720px);max-height:90vh;overflow:auto;background:var(--color-surface);border:1px solid color-mix(in srgb, var(--color-text) 10%, transparent);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:var(--space-5)}
.modal-head h2{margin:0}
.modal-close{width:40px;height:40px;flex:0 0 auto;border-radius:var(--radius-full);border:1px solid color-mix(in srgb, var(--color-text) 12%, transparent);background:var(--color-bg);color:var(--color-text);font-size:1.6rem;line-height:1;cursor:pointer}
.modal-close:hover{background:var(--color-surface-2)}
.form-group{display:flex;flex-direction:column;gap:.45rem}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:var(--text-sm);font-weight:600}
.form-group input,.form-group select,.form-group textarea{width:100%;border:1px solid color-mix(in srgb, var(--color-text) 12%, transparent);background:var(--color-bg);color:var(--color-text);border-radius:var(--radius-md);padding:.85rem .95rem;outline:none;min-height:48px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:2px solid var(--color-primary);outline-offset:1px}
.form-group textarea{min-height:96px;resize:vertical}
.form-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:var(--space-5)}

.empty-state{padding:var(--space-8);text-align:center}
.empty-state p{max-width:42ch;margin:.5rem auto 0;color:var(--color-text-muted)}
.footer-note{padding:var(--space-6) 0;color:var(--color-text-muted);font-size:var(--text-sm)}

.logo-img{width:auto;height:40px;border-radius:10px;object-fit:contain}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .85rem;border-radius:var(--radius-full);background:var(--color-accent);color:var(--color-primary);font-size:var(--text-sm);font-weight:600}

/* Login gate */
[hidden]{display:none!important}
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--color-bg);padding:1.5rem}
.gate-card{width:min(100%,420px);background:var(--color-surface);border:1px solid color-mix(in srgb, var(--color-text) 10%, transparent);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-8)}
.gate-card h1{font-family:var(--font-display);font-size:var(--text-xl);margin:0 0 .4rem}
.gate-card p{color:var(--color-text-muted);margin:0 0 1.25rem}
.gate-card label{font-weight:600;font-size:var(--text-sm);display:block;margin-bottom:.4rem}
.gate-card input{width:100%;padding:.9rem 1rem;border-radius:var(--radius-md);border:1px solid color-mix(in srgb, var(--color-text) 12%, transparent);background:var(--color-bg);color:var(--color-text)}
.gate-error{color:var(--color-error);font-size:var(--text-sm);margin-top:.75rem;min-height:1.2em}
.toast{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);background:var(--color-text);color:var(--color-bg);padding:.8rem 1.2rem;border-radius:var(--radius-full);font-size:var(--text-sm);box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:150}
.toast.show{opacity:1}

@media (max-width: 1100px){.hero-grid,.summary-grid{grid-template-columns:1fr}.hero-panel-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 700px){.header-inner{align-items:flex-start;flex-direction:column}.hero-actions,.form-actions{flex-direction:column}.btn{width:100%}.hero-panel-grid,.form-grid{grid-template-columns:1fr}.summary-grid{grid-template-columns:1fr 1fr}.toolbar #seedBtn{margin-left:0}.modal{padding:.75rem}}