/* My Apiaries cockpit + Key-apiary coverage (ADR 0011).
 * Explicit colours: the precompiled Tailwind build no-ops ad-hoc dark:* utilities
 * in custom admin templates, so cockpit chips / form fields are styled here. */

.cockpit-chip-green { background: #dcfce7; color: #15803d; }
.cockpit-chip-red   { background: #fee2e2; color: #b91c1c; }
.cockpit-chip-key   { background: #fef9c3; color: #a16207; }

.dark .cockpit-chip-green { background: rgb(20 83 45 / 0.3);  color: #86efac; }
.dark .cockpit-chip-red   { background: rgb(127 29 29 / 0.3); color: #fca5a5; }
.dark .cockpit-chip-key   { background: rgb(113 63 18 / 0.3); color: #fde047; }

.cockpit-input {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
}
.cockpit-input::placeholder { color: #9ca3af; }
.dark .cockpit-input {
    border-color: #374151;
    background: #1f2937;
    color: #f9fafb;
}

.cockpit-btn-primary {
    background: #d97706;
    color: #ffffff;
    border: none;
    cursor: pointer;
}
.cockpit-btn-primary:hover { background: #b45309; }

.cockpit-btn-muted {
    background: #e5e7eb;
    color: #374151;
    border: none;
    cursor: pointer;
}
.cockpit-btn-muted:hover { background: #d1d5db; }
.dark .cockpit-btn-muted { background: rgb(55 65 81 / 0.5); color: #d1d5db; }
.dark .cockpit-btn-muted:hover { background: rgb(55 65 81 / 0.8); }

/* ── Key-apiary star toggle (apiary detail + list) ───────────────────────────
 * Colour is driven by aria-pressed so the AJAX flip recolours in place without
 * touching Tailwind classes. Not-key = grey star; Key = gold star. */
.js-key-toggle { cursor: pointer; }
.js-key-star { color: #9ca3af; transition: color 0.15s; }
.js-key-toggle:hover .js-key-star { color: #f59e0b; }
.js-key-toggle[aria-pressed="true"] .js-key-star { color: #f5a623; }   /* gold */
.dark .js-key-star { color: #6b7280; }
.dark .js-key-toggle[aria-pressed="true"] .js-key-star { color: #fbbf24; }

/* Pill variant on the apiary detail header. */
.key-btn-pill {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
}
.key-btn-pill:hover { background: #f9fafb; }
.key-btn-pill[aria-pressed="true"] {
    border-color: #f5a623;
    background: #fef9c3;
    color: #92400e;
}
.dark .key-btn-pill { border-color: #374151; background: transparent; color: #e5e7eb; }
.dark .key-btn-pill:hover { background: rgb(55 65 81 / 0.4); }
.dark .key-btn-pill[aria-pressed="true"] { border-color: #b45309; background: rgb(113 63 18 / 0.3); color: #fde047; }

/* Brief failure flash (AJAX error). */
.js-key-error { outline: 2px solid #ef4444; outline-offset: 1px; border-radius: 0.5rem; }