/* FrontOfHouseConfiguration.css
 *
 * Minimal module-specific styles. The view uses standard
 * atomic components (Panel, Modal, Button, Badge, FormField,
 * EmptyState) which carry their own styles.
 *
 * Only custom styles here are for:
 * - Desk add row (input + button inline)
 * - Desk list rows (info + actions layout)
 * - QR modal body (image + URL display)
 */

/* ===================
   ADD DESK ROW
   Input + button in a single line.
   =================== */

.foh-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.foh-add-desk {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width-1) solid var(--border-subtle);
}

.foh-desk-name-input {
    flex: 1;
}

/* ===================
   DESK LIST
   =================== */

.foh-desk-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.foh-desk-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

.foh-desk-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.foh-desk-name {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.foh-desk-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.foh-desk-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.foh-desk-status--online {
    color: var(--color-success);
}

.foh-desk-status--offline {
    color: var(--text-muted);
}

.foh-desk-status--pinging {
    color: var(--text-muted);
    font-style: italic;
}

.foh-desk-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ===================
   QR MODAL BODY
   The Modal organism handles the overlay,
   header, footer, and positioning. These
   styles are for the body content only.
   =================== */

.foh-qr-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.foh-qr-image-container {
    padding: var(--space-4);
    background: var(--bg-surface);
    border-radius: var(--border-radius-md);
    border: var(--border-width-1) solid var(--border-subtle);
}

.foh-qr-image {
    display: block;
    image-rendering: pixelated;
}

.foh-qr-url {
    width: 100%;
    text-align: center;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border-radius: var(--border-radius-sm);
    border: var(--border-width-1) solid var(--border-subtle);
    word-break: break-all;
}

.foh-qr-url code {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ===================
   COMPLAINTS CONFIG ROWS
   =================== */

.foh-config-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.foh-config-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

.foh-config-name {
    flex: 1;
    font-weight: var(--font-weight-medium);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.foh-config-detail {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.foh-config-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.foh-config-category {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.foh-config-nested-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-left: var(--space-5);
}

.foh-config-row-nested {
    background: var(--bg-layer-2);
    border-style: dashed;
}

.foh-config-add-nested {
    padding-left: var(--space-5);
}