.gatelink-action-allow,
.gatelink-action-block,
.gatelink-action-edit,
.gatelink-action-delete {
    text-decoration: none;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
}

.gatelink-action-allow {
    background-color: #16a34a; /* Green 600 */
}
.gatelink-action-allow:hover {
    background-color: #15803d; /* Green 700 */
}

.gatelink-action-block {
    background-color: #d97706; /* Amber 600 */
}
.gatelink-action-block:hover {
    background-color: #b45309; /* Amber 700 */
}

.gatelink-action-edit {
    background-color: #2563eb; /* Blue 600 */
}
.gatelink-action-edit:hover {
    background-color: #1d4ed8; /* Blue 700 */
}

.gatelink-action-delete {
    background-color: #dc2626; /* Red 600 */
}
.gatelink-action-delete:hover {
    background-color: #b91c1c; /* Red 700 */
}

.gatelink-state {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: capitalize;
}

.gatelink-state-allowed {
    background-color: #dcfce7; /* Green 100 */
    color: #166534; /* Green 800 */
}

.gatelink-state-pending {
    background-color: #fef9c3; /* Yellow 100 */
    color: #854d0e; /* Yellow 800 */
}

.gatelink-state-blocked {
    background-color: #fee2e2; /* Red 100 */
    color: #991b1b; /* Red 800 */
}

#gatelink-manual-pairing-box {
    background-color: #f8fafc; /* Slate 50 */
    border: 1px solid #e2e8f0; /* Slate 200 */
    border-radius: 4px;
    padding: 12px;
}

#gatelink-manual-pairing-box .label {
    font-size: 0.75rem;
    color: #64748b; /* Slate 500 */
    margin-bottom: 4px;
}

#gatelink-manual-pairing-box .value {
    font-family: monospace;
    word-break: break-all;
    background-color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
}

.gatelink-copy-input {
    width: 400px;
    background: #f0f0f1;
}

.gatelink-monospace {
    font-family: monospace;
}

.gatelink-copy-button {
    margin-left: 10px;
}

.gatelink-version-footer {
    margin-top: 15px;
    text-align: right;
    color: #777;
}

.gatelink-connection-info-table {
    background: white;
    padding: 15px;
    border-radius: 4px;
}

.gatelink-submit-left {
    text-align: left;
}

.gatelink-action-buttons {
    display: flex;
    gap: 10px;
}