/* =====================================================================
   SENSORS SETTINGS PAGE — Agro Insights Professional Theme
   Design tokens are defined globally in app.css (:root)
   ===================================================================== */

/* ---------- Page shell ---------- */
.sensors-setting-page-container {
    height:        95vh;
    width:         100%;
    max-width:     100%;
    display:       flex;
    flex-direction: column;
    box-sizing:    border-box;
    overflow:      hidden;
    min-width:     0;
    align-self:    stretch;
    background:    var(--agro-bg);
    font-family:   var(--agro-font-body);
}

/* ---------- Section wrapper ---------- */
.sensors-setting-section-div {
    height:        100%;
    width:         100%;
    display:       flex;
    flex-direction: column;
    min-height:    0;
}

/* ---------- Card body table wrapper ---------- */
.sensors-setting-controllers-data-table-div-body {
    width:         100%;
    position:      relative;
    flex:          1 1 auto;
    min-height:    0;
    display:       flex;
    flex-direction: column;
    box-sizing:    border-box;
    background:    var(--agro-surface);
}

/* ---------- Card header strip ---------- */
.sensors-setting-header-div {
    height:        auto !important;
    min-height:    0 !important;
    padding:       0 !important;
    display:       flex;
    align-items:   center;
}

/* =====================================================================
   TOP PAGE NAVBAR
   ===================================================================== */
/* sg-page-content-top-navbar background/color intentionally not overridden here —
   app.css sets the global colour (#689cbe) shared across all pages. */
.sg-page-content-top-navbar {
    padding-top:   0 !important;
    padding-bottom:0 !important;
    min-height:    var(--header-height);
}

.sg-page-content-top-navbar h2 {
    font-family:   var(--agro-font-display) !important;
    font-size:     1.25rem !important;
    font-weight:   700 !important;
    letter-spacing: -0.01em !important;
    margin:        0 !important;
    padding-left:  4px !important;
    display:       flex;
    align-items:   center;
    gap:           8px;
}

/* ---------- Card section headers (Controllers / Sensors) ---------- */
.card-header .navbar,
.card-header .sg-page-content-top-navbar {
    background:    #c6d8cc !important;
    border-bottom: 1px solid #aec7b5 !important;
    box-shadow:    none !important;
    min-height:    44px;
}

.card-header .navbar h3,
.card-header h3 {
    font-family:   var(--agro-font-display) !important;
    font-size:     0.95rem !important;
    font-weight:   600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color:         #27500A !important;
    margin:        0 !important;
    padding-left:  4px !important;
}

/* =====================================================================
   BOOTSTRAP CARDS — professional Agro look
   ===================================================================== */
.card {
    border:        1px solid var(--agro-border) !important;
    border-radius: var(--agro-radius-md) !important;
    box-shadow:    var(--agro-shadow-sm) !important;
    background:    var(--agro-surface) !important;
    overflow:      hidden;
    transition:    box-shadow 0.2s ease;
}

.card:hover {
    box-shadow:    var(--agro-shadow-md) !important;
}

.card-header {
    background:    #c6d8cc !important;
    border-bottom: 1px solid #aec7b5 !important;
    padding:       0 !important;
}

.card-body {
    padding:       0 !important;
    background:    var(--agro-surface);
}

/* =====================================================================
   BUTTONS — sg-btns
   ===================================================================== */
/* Shared layout for ALL sg-btns regardless of color */
.sg-btns,
.btn.sg-btns {
    border-radius: var(--agro-radius-sm) !important;
    font-size:     0.82rem !important;
    font-weight:   600 !important;
    padding:       6px 12px !important;
    transition:    background 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease !important;
    box-shadow:    0 1px 4px rgba(15,43,26,.18) !important;
    line-height:   1 !important;
}

/* Green style only for btn-success */
.btn-success.sg-btns {
    background:    var(--agro-green-500) !important;
    border:        1px solid var(--agro-green-600) !important;
    color:         #ffffff !important;
}

.btn-success.sg-btns:hover {
    background:    var(--agro-green-600) !important;
    border-color:  var(--agro-green-700) !important;
    box-shadow:    0 3px 8px rgba(15,43,26,.28) !important;
    transform:     translateY(-1px) !important;
}

/* Non-success: lift on hover, keep Bootstrap color */
.sg-btns:not(.btn-success):hover,
.btn.sg-btns:not(.btn-success):hover {
    box-shadow:    0 3px 8px rgba(15,23,42,.2) !important;
    transform:     translateY(-1px) !important;
}

.sg-btns:active,
.btn.sg-btns:active {
    transform:     translateY(0) !important;
    box-shadow:    0 1px 3px rgba(15,43,26,.15) !important;
}

.sg-btns i,
.btn.sg-btns i {
    font-size: 1rem;
}

/* =====================================================================
   INPUT GROUPS & SELECTS
   ===================================================================== */
.input-group-text {
    background:    var(--agro-green-100) !important;
    border:        1px solid var(--agro-border) !important;
    color:         var(--agro-text-primary) !important;
    font-size:     0.82rem !important;
    font-weight:   600 !important;
    white-space:   nowrap;
    letter-spacing: 0.01em;
}

.input-group .form-select,
.input-group select {
    border:        1px solid var(--agro-border) !important;
    border-left:   none !important;
    font-size:     0.83rem !important;
    color:         var(--agro-text-primary) !important;
    background:    var(--agro-surface) !important;
    box-shadow:    none !important;
    border-radius: 0 var(--agro-radius-sm) var(--agro-radius-sm) 0 !important;
    transition:    border-color 0.18s ease !important;
}

.input-group .form-select:focus,
.input-group select:focus {
    border-color:  var(--agro-green-500) !important;
    outline:       none !important;
    box-shadow:    0 0 0 3px rgba(58,158,92,.18) !important;
}

/* =====================================================================
   RADIO ITEMS & CHECKLIST — sensor filter bar
   ===================================================================== */
.form-check-input:checked {
    background-color: var(--agro-green-500) !important;
    border-color:     var(--agro-green-600) !important;
}

.form-check-label {
    font-size:  0.83rem;
    color:      var(--agro-text-secondary);
    cursor:     pointer;
}

/* RadioItems rendered by Dash */
#sensors-setting-sensors-filter-select label {
    font-size:   0.82rem !important;
    font-weight: 500 !important;
    color:       var(--agro-text-primary) !important;
    padding:     3px 8px 3px 4px;
    border-radius: 4px;
    transition:  background 0.14s ease;
}

#sensors-setting-sensors-filter-select label:hover {
    background:  var(--agro-green-50);
}

#sensors-setting-sensors-select-all label {
    font-size:   0.82rem !important;
    font-weight: 600 !important;
    color:       var(--agro-text-primary) !important;
}

/* Counter badge */
#sensors-setting-sensors-filter-count {
    font-family:  var(--agro-font-mono) !important;
    font-size:    0.85rem !important;
    font-weight:  700 !important;
    color:        var(--agro-green-600) !important;
    background:   var(--agro-green-100);
    padding:      2px 10px;
    border-radius: 20px;
    border:       1px solid var(--agro-border);
    margin-bottom: 0 !important;
    white-space:  nowrap;
}


/* =====================================================================
   MISC / HOVER OUTPUT
   ===================================================================== */
#sensors-setting-table-hover-output {
    font-size:    0.8rem;
    color:        var(--agro-text-secondary);
    font-style:   italic;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
    max-width:    240px;
}

#associate-sensor-output {
    font-size:    0.78rem;
    color:        var(--agro-text-muted);
    padding:      4px 6px;
    font-family:  var(--agro-font-mono);
}

/* =====================================================================
   SPACING UTILITIES — applied around section rows
   ===================================================================== */
.g-0 > .col,
.g-0 > [class*="col-"] {
    padding: 0 !important;
}

.mt-1 {
    margin-top: 6px !important;
}