/* PestScope — legacy page CSS.
   App shell, sidebar, nav, main-content, btn, breadcrumb, tabs are now owned by
   components.css. This file only keeps page-specific patterns that haven't been
   migrated yet to the generic primitives. */

/* ── Legacy class aliases (until pages migrate to .btn--primary etc.) ── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background-color: var(--primary);
    color: var(--text-on-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 0 var(--space-base);
    height: 36px;
    font-family: inherit;
    font-weight: 600;
    font-size: var(--text-14);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-fast, 150ms) var(--ease-out, ease);
}
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-primary:active { background-color: var(--primary-pressed, var(--primary)); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-base);
    height: 36px;
    font-family: inherit;
    font-weight: 600;
    font-size: var(--text-14);
    cursor: pointer;
    transition: background-color var(--dur-fast, 150ms) var(--ease-out, ease);
}
.btn-outline:hover { background-color: var(--surface-hover); }

/* ── Auth Page (Login) ── */
.auth-container { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; padding: var(--space-lg); }
.auth-logo { margin-bottom: var(--space-xl); }
.auth-logo img { width: 180px; height: auto; }
.auth-logo-light { display: block; }
.auth-logo-dark { display: none; }
[data-theme="dark"] .auth-logo-light { display: none; }
[data-theme="dark"] .auth-logo-dark { display: block; }
.auth-card { width: 100%; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 40px 32px; box-shadow: var(--shadow-lg); margin-bottom: var(--space-xl); }
.auth-title { color: var(--text-primary); font-size: 24px; font-weight: 700; text-align: center; margin-bottom: var(--space-xs); }
.auth-subtitle { color: var(--text-secondary); font-size: 14px; text-align: center; margin-bottom: var(--space-xl); }
.auth-link { color: var(--primary); font-size: 13px; font-weight: 500; text-decoration: none; transition: color 200ms ease; }
.auth-link:hover { color: var(--primary-hover); text-decoration: underline; }
.auth-submit { margin-top: var(--space-md); padding: 12px; font-size: 15px; }
.auth-footer { text-align: center; color: var(--text-tertiary); font-size: 12px; }

/* ── Form layouts (legacy form-card pattern) ── */
.form-group { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); }
.form-label { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.label-row { display: flex; justify-content: space-between; align-items: center; }
.form-input { width: 100%; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; color: var(--text-primary); font-family: inherit; font-size: 14px; transition: border-color 200ms ease, box-shadow 200ms ease; }
.form-input::placeholder { color: var(--text-tertiary); }
.form-input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 2px rgba(46, 148, 132, 0.2); }
.form-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; max-width: 800px; }
.form-section-title { color: var(--text-primary); font-size: 16px; font-weight: 600; margin-bottom: var(--space-md); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--border-subtle); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--border-subtle); }

/* ── Search (legacy — components.css uses .search) ── */
.search-container { position: relative; margin-bottom: var(--space-lg); width: 100%; }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; }
.search-input { width: 100%; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px 12px 40px; color: var(--text-primary); font-family: inherit; font-size: 14px; transition: border-color 200ms ease, box-shadow 200ms ease; }
.search-input::placeholder { color: var(--text-tertiary); }
.search-input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 2px rgba(46, 148, 132, 0.2); }

/* ── Data cards & summary cards (legacy — components.css uses .list-row + .kpi) ── */
.data-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.data-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 200ms ease; text-decoration: none; }
.data-card:hover { background-color: var(--surface-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.card-info { display: flex; flex-direction: column; gap: 4px; }
.card-title { color: var(--text-primary); font-size: 15px; font-weight: 600; }
.card-subtitle { color: var(--text-secondary); font-size: 13px; }
.card-actions { display: flex; align-items: center; gap: var(--space-md); }
.badge { background-color: var(--surface-accent); color: var(--primary); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); }

/* ── Stats footer ── */
.stats-footer { display: flex; gap: 48px; margin-top: auto; padding-top: var(--space-lg); border-top: 1px solid var(--border-subtle); }
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat-value { font-size: 24px; font-weight: 700; color: var(--text-primary); }
.stat-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.stat-item.green .stat-value { color: var(--status-green); }
.stat-item.orange .stat-value { color: var(--status-orange); }
.stat-item.red .stat-value { color: var(--status-red); }

/* ── Detail screens ── */
.header-left { display: flex; flex-direction: column; }

/* ── Grids ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-xl); }

/* ── Summary card (legacy — see .kpi in components.css) ── */
.summary-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.summary-label { color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.summary-value { color: var(--text-primary); font-size: 24px; font-weight: 700; }
.summary-sub { color: var(--text-tertiary); font-size: 12px; }

/* ── Reconnect modal ── */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.reconnect-animation { display: none; }

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .reconnect-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .reconnect-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible { display: block; }

#components-reconnect-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--surface);
    color: var(--text-primary);
    width: 22rem;
    max-width: calc(100vw - 2rem);
    margin: 0;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    z-index: 10000;
    animation: reconnect-fadeOut 0.5s both;
}
#components-reconnect-modal[open] {
    animation: reconnect-slideUp 0.5s cubic-bezier(.05, .89, .25, 1.02),
               reconnect-fadeIn 0.4s ease-in-out;
    animation-fill-mode: both;
}
#components-reconnect-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    animation: reconnect-fadeIn 0.4s ease-in-out;
    opacity: 1;
}

@keyframes reconnect-slideUp { 0% { transform: translate(-50%, calc(-50% + 30px)) scale(0.95); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes reconnect-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes reconnect-fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }

.reconnect-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
#components-reconnect-modal p { margin: 0; text-align: center; color: var(--text-primary); font-size: 14px; line-height: 1.5; }
#components-reconnect-modal button {
    border: 0; background-color: var(--primary); color: white; padding: 8px 24px;
    border-radius: var(--radius-md); font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 200ms ease;
}
#components-reconnect-modal button:hover { background-color: var(--primary-hover); }
#components-reconnect-modal button:active { background-color: var(--primary); }

.reconnect-animation { position: relative; width: 60px; height: 60px; }
.reconnect-animation div {
    position: absolute; border: 3px solid var(--primary); opacity: 1;
    border-radius: 50%; animation: reconnect-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.reconnect-animation div:nth-child(2) { animation-delay: -0.5s; }
@keyframes reconnect-ripple {
    0% { top: 30px; left: 30px; width: 0; height: 0; opacity: 0; }
    4.9% { top: 30px; left: 30px; width: 0; height: 0; opacity: 0; }
    5% { top: 30px; left: 30px; width: 0; height: 0; opacity: 1; }
    100% { top: 0; left: 0; width: 60px; height: 60px; opacity: 0; }
}