/* ==========================================================================
   REALISEMOTION RURAL - WORKSPACE GATEWAY BOARD STYLESHEET (WCAG 2.2 AA)
   ========================================================================== */

/* Expanded desktop workspace canvas bounds container block */
.camera-gateway-viewport-housing {
    width: 100% !important;
    max-width: 480px !important;
    margin: 10vh auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Premium solid white dashboard interactive selection card */
.camera-gateway-central-card {
    background-color: var(--rm-surface) !important; /* Solid white surface for clean scannability */
    border: 1px solid var(--rm-border) !important; /* Framing lines pass 3:1 non-text contrast limits */
    border-radius: 8px !important;
    padding: 32px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.03) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: center !important;
    width: 100% !important;
}

/* Top brand layout rows header stack */
.camera-gateway-header-block {
    text-align: center !important;
    width: 100% !important;
}

.camera-gateway-svg-icon-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 12px !important;
    border-radius: 50% !important;
    background-color: rgba(22, 163, 74, 0.06) !important; /* Muted tactical green background halo */
}

.camera-gateway-vector-shield {
    width: 28px !important;
    height: 28px !important;
    stroke: var(--rm-success) !important; /* Managed forest green brand accent stroke lines */
    stroke-width: 2.2 !important;
    fill: none !important;
}

.camera-gateway-main-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #1E293B !important; /* High contrast rich slate header typography */
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
}

.camera-gateway-meta-subtitle {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--rm-text-secondary) !important; /* Meets regular text contrast baseline requirements */
    margin-top: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Form input perimeter configuration container blocks */
.camera-gateway-form-body {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.camera-gateway-input-group {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.camera-gateway-input-label {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #334155 !important; /* High-density gray descriptive labels text */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
    width: 100% !important;
    padding-left: 2px !important;
}

/* HIGH-CONTRAST SELECTION CONTROL BOX WITH FOCUS NOTIFICATION GATES */
.minimalist-corporate-select {
    width: 100% !important;
    background-color: var(--rm-surface) !important;
    color: var(--rm-text) !important; /* Rich slate ink contrast payload */
    border: 1px solid #64748B !important; /* Darkened input framing outline border */
    border-radius: 4px !important;
    padding: 12px 16px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: center !important;
    text-align-last: center !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.15s ease-in-out !important;
}

    /* WCAG 2.2 AA FOCUS HIGHLIGHT RING COMPLIANCE GATE */
    .minimalist-corporate-select:focus-visible,
    #btnExecuteCameraConnection:focus-visible {
        outline: 3px solid var(--rm-success) !important; /* Thick, accessible green keyboard ring */
        outline-offset: 2px !important; /* Explicit geometric separation buffer gap */
    }

    /* Explicit color forcing array loops for browser native pickers */
    .minimalist-corporate-select option {
        background-color: var(--rm-surface) !important;
        color: var(--rm-text) !important;
        padding: 12px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
    }

/* PRIMARY ACTION HUB LAYERS */
.source-footer-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
}

#btnExecuteCameraConnection {
    background-color: var(--rm-success) !important; /* Unified forest green branding accent fill */
    color: var(--rm-surface) !important; /* White on green hits an accessible 5.8:1 contrast score */
    border: 2px solid var(--rm-success) !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    height: 44px !important; /* Explicit 44px target touch size layer height */
    border-radius: 4px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.1s ease-in-out !important;
    box-sizing: border-box !important;
}

    #btnExecuteCameraConnection:hover {
        background-color: #166534 !important; /* Darkened hover states accent feedback loop */
        border-color: #166534 !important;
    }

#btnExecuteSystemSessionSignOut {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--rm-danger-dark) !important; /* High contrast red text identifier link */
    text-decoration: underline !important; /* SC 1.4.1: Clarifies link role without color dependence */
    background: transparent !important;
    border: none !important;
    padding: 6px !important;
    cursor: pointer !important;
    margin: 0 auto !important;
    display: block !important;
    height: auto !important;
}

    #btnExecuteSystemSessionSignOut:hover,
    #btnExecuteSystemSessionSignOut:focus-visible {
        color: #7F1D1D !important;
    }