/*
==========================================================
AI AGENTS SECTION (admin dashboard)
==========================================================
Styles the "AI Agents" area (data-area="ai-agents"): the explainer shown to
non-agents AND the embedded agent operator dashboard (lib/uxc_agent_admin.php)
shown to agents. Theme-aware: text/border colors use an admin CSS variable with
a light-mode fallback, so the same rule renders in light and dark (variables are
defined under .uxc-dark-mode in admin.css). Design: sharp corners (radius 0),
transparent card surfaces (border-only), gold #a37a29 brand accent constant
across themes; gold buttons use white text in light mode, black in dark mode.
==========================================================
*/

.uxc-agent-dashboard {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
    color: var(--uxc-text-primary, #1f2328);
}
.uxc-agent-dashboard h1 {
    font-size: 22px;
    margin: 0 0 4px;
    color: var(--uxc-text-primary, #1f2328);
}
.uxc-agent-dashboard h2 {
    font-size: 16px;
    margin: 0 0 12px;
    color: var(--uxc-text-primary, #1f2328);
}
.uxc-agent-dashboard h3 {
    font-size: 15px;
    margin: 0 0 8px;
    color: var(--uxc-text-primary, #1f2328);
}
.uxc-agent-dashboard p {
    color: var(--uxc-text-secondary, #59616e);
}
.uxc-agent-dashboard a {
    color: #a37a29;
}
.uxc-agent-dashboard code {
    font-family: monospace;
    font-size: 13px;
}

/* Explainer (non-agents) */
.uxc-agent-lead {
    font-size: 14px;
    max-width: 640px;
    margin: 0 0 20px;
}
.uxc-agent-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 28px;
}
.uxc-agent-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 0 0 24px;
}
.uxc-agent-card {
    border: 1px solid var(--uxc-border-color, #e3e6ea);
    border-radius: 0;
    padding: 20px;
}
.uxc-agent-card p {
    font-size: 13px;
    margin: 0;
}
.uxc-agent-note {
    border: 1px solid var(--uxc-border-color, #e3e6ea);
    border-radius: 0;
    padding: 20px;
    max-width: 640px;
}
.uxc-agent-note p {
    font-size: 13px;
    margin: 0;
}

/* Buttons (brand gold). Filled primary + outline ghost. Sharp corners.
   Gold buttons: white text in light mode, black text in dark mode. */
.uxc-agent-btn {
    display: inline-block;
    font-size: 14px;
    line-height: 1.2;
    padding: 10px 20px;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--uxc-accent);
    transition: background-color .2s, color .2s, opacity .2s;
    white-space: nowrap;
}
.uxc-agent-btn-primary {
    background: #a37a29;
    color: #fff;
}
.uxc-dark-mode .uxc-agent-btn-primary {
    color: #000;
}
.uxc-agent-btn-primary:hover {
    background: #8f6a22;
}
.uxc-agent-btn-ghost {
    background: transparent;
    color: #a37a29;
}
.uxc-agent-btn-ghost:hover {
    background: rgba(163, 122, 41, 0.1);
}
.uxc-agent-btn-sm {
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 0;
}

/* Success / notice banner (transparent, green left accent) */
.uxc-agent-msg {
    border: 1px solid var(--uxc-border-color, #e3e6ea);
    border-left: 4px solid var(--uxc-success);
    border-radius: 0;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: var(--uxc-text-primary, #2e7d32);
    font-weight: 600;
}

/* Agent dashboard panels + grids (transparent, border-only) */
.uxc-agent-panel {
    border: 1px solid var(--uxc-border-color, #e3e6ea);
    border-radius: 0;
    padding: 20px;
    margin-bottom: 20px;
}
.uxc-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.uxc-agent-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) {
    .uxc-agent-grid-2 {
        grid-template-columns: 1fr;
    }
}
.uxc-agent-label {
    color: var(--uxc-text-muted, #8a929a);
    font-size: 12px;
}
.uxc-agent-muted {
    color: var(--uxc-text-muted, #8a929a);
    font-size: 13px;
}

/* Tables */
.uxc-agent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--uxc-text-primary, #1f2328);
}
.uxc-agent-table th {
    text-align: left;
    border-bottom: 2px solid var(--uxc-border-color, #e3e6ea);
    padding: 8px;
    color: var(--uxc-text-secondary, #59616e);
    font-weight: 600;
}
.uxc-agent-table td {
    padding: 8px;
    border-bottom: 1px solid var(--uxc-border-color, #f0f2f4);
}
.uxc-dark-mode .uxc-agent-table td {
    border-bottom-color: var(--uxc-border-color, #3d3d3d);
}

/* Forms + inputs (inputs keep a fill so they remain usable type fields) */
.uxc-agent-form-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 16px;
}
.uxc-agent-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.uxc-agent-field {
    display: flex;
    flex-direction: column;
}
.uxc-agent-field > span,
.uxc-agent-field > label {
    font-size: 12px;
    color: var(--uxc-text-muted, #8a929a);
    margin-bottom: 2px;
}
.uxc-agent-input {
    padding: 8px;
    border: 1px solid var(--uxc-border-color, #d0d4d9);
    border-radius: 0;
    background: var(--uxc-input-bg, #ffffff);
    color: var(--uxc-text-primary, #1f2328);
    font-size: 13px;
    font-family: inherit;
}
.uxc-agent-input::placeholder {
    color: var(--uxc-text-muted, #8a929a);
}
.uxc-agent-input-mono {
    font-family: monospace;
}
.uxc-agent-input-flex {
    flex: 1;
    min-width: 120px;
}
.uxc-agent-asset-tag {
    width: 60px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--uxc-text-primary, #1f2328);
}