/* ── Agency Panel — Dark Theme ──
 * Dark theme variables are defined in style.css [data-theme="dark"]
 * selector which includes body.agency-dark. This file contains
 * only agency-specific component styles.
 * Design System: RankMyGEO (forest green / lime)
 */

body.agency-dark {
  margin: 0;
  font-family: 'Inter', sans-serif;
}

.ag-page {
  min-height: 100vh;
}

.ag-center-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 20px;
}

.ag-center-card h2 {
  color: var(--text-primary);
  margin: 8px 0;
}

.ag-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 4px 0;
}

/* ── Form inputs — override light-theme hardcoded colors ── */

body.agency-dark {
  --ag-input-bg: #132110;
  --ag-input-text: #E8EDE5;
  --ag-input-placeholder: #7B8874;
  --ag-input-border: #243420;
  --ag-input-focus: #5EEBC2;
  --ag-input-focus-glow: rgba(94, 235, 194, 0.18);
  --ag-label: #8B9A83;
}

body.agency-dark .form-group label {
  color: var(--ag-label);
}

body.agency-dark .form-group input,
body.agency-dark .form-group select,
body.agency-dark .form-group textarea,
body.agency-dark input,
body.agency-dark select,
body.agency-dark textarea {
  background: var(--ag-input-bg);
  color: var(--ag-input-text);
  border: 1px solid var(--ag-input-border);
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

body.agency-dark .form-group input::placeholder,
body.agency-dark .form-group textarea::placeholder,
body.agency-dark input::placeholder,
body.agency-dark textarea::placeholder {
  color: var(--ag-input-placeholder);
  opacity: 1;
}

body.agency-dark .form-group input:focus,
body.agency-dark .form-group select:focus,
body.agency-dark .form-group textarea:focus,
body.agency-dark input:focus,
body.agency-dark select:focus,
body.agency-dark textarea:focus {
  border-color: var(--ag-input-focus);
  box-shadow: 0 0 0 3px var(--ag-input-focus-glow);
  outline: none;
}

body.agency-dark .form-group input:hover,
body.agency-dark .form-group select:hover,
body.agency-dark .form-group textarea:hover,
body.agency-dark input:hover,
body.agency-dark select:hover,
body.agency-dark textarea:hover {
  border-color: #2D4225;
}

body.agency-dark input:disabled,
body.agency-dark select:disabled,
body.agency-dark textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body.agency-dark select option {
  background: var(--ag-input-bg);
  color: var(--ag-input-text);
}

body.agency-dark input:-webkit-autofill,
body.agency-dark textarea:-webkit-autofill,
body.agency-dark select:-webkit-autofill {
  -webkit-text-fill-color: var(--ag-input-text);
  -webkit-box-shadow: 0 0 0px 1000px var(--ag-input-bg) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Form grid for client form ── */

body.agency-dark .empty-state-card {
  max-width: 980px;
}

body.agency-dark .empty-state-card > div[style*="grid"] {
  max-width: 100%;
}

@media (max-width: 768px) {
  body.agency-dark .empty-state-card > div[style*="grid"] {
    display: flex !important;
    flex-direction: column;
  }
}

/* ── Buttons — ensure legibility ── */

body.agency-dark .btn {
  color: var(--text-primary);
  border-color: var(--ag-input-border);
}

body.agency-dark .btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

body.agency-dark .btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* ── Message/alert within agency panel ── */

body.agency-dark .message.error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error);
}

body.agency-dark .message.success {
  background: rgba(47, 191, 113, 0.08);
  border-color: rgba(47, 191, 113, 0.2);
  color: var(--success);
}

/* ── Skeleton shimmer dark ── */
body.agency-dark .skeleton {
  background: linear-gradient(90deg, #132110 25%, #1A2B16 50%, #132110 75%);
  background-size: 800px 100%;
}

/* Hide all ag-pages by default; JS controls visibility */