/* Page styles of templates/views/phones and phone_keys */

.phones-assign-form { display: inline-flex; gap: 6px; align-items: center; }
.phones-assign-form select { max-width: 180px; }
.phones-codecs { display: flex; flex-wrap: wrap; gap: 12px; }

.phone-keys-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.phone-keys-toolbar .form-group { margin-bottom: 0; min-width: 200px; }

.phone-keys-page { margin-bottom: 20px; }
.phone-keys-page h4 { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.phone-keys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}
.phone-key {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.phone-key.is-set { border-color: var(--primary); }
.phone-key .phone-key-no { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.phone-key select, .phone-key input { font-size: 12px; padding: 4px 6px; }