/* =====================================================================
   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 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);
}



/* =====================================================================
   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;
}

/* =====================================================================
   DASH DATATABLE — professional agro table
   ===================================================================== */

/* Override Dash inline styles via CSS specificity boost */
.dash-spreadsheet-container .dash-spreadsheet.dash-freeze-top,
.dash-spreadsheet-container .dash-spreadsheet {
    font-family: var(--agro-font-body) !important;
}

/* Header row */
.dash-spreadsheet-container .dash-header {
    background-color: var(--agro-green-700) !important;
    color:            #ffffff !important;
    font-size:        0.8rem !important;
    font-weight:      700 !important;
    letter-spacing:   0.04em !important;
    text-transform:   uppercase !important;
    border-bottom:    2px solid var(--agro-green-600) !important;
}

.dash-spreadsheet-container .dash-header th,
.dash-spreadsheet-container .dash-header td {
    border-color: var(--agro-green-600) !important;
}

/* Data cells */
.dash-spreadsheet-container .dash-cell {
    font-size:   0.82rem !important;
    color:       var(--agro-text-primary) !important;
    border-color: var(--agro-border-soft) !important;
}

/* Even rows */
.dash-spreadsheet-container tr:nth-child(even) .dash-cell {
    background-color: var(--agro-surface) !important;
}

/* Odd rows (via style_data_conditional override cascade) */
.dash-spreadsheet-container tr.odd-row .dash-cell,
.dash-spreadsheet-container tr:nth-child(odd) .dash-cell {
    background-color: var(--agro-green-50) !important;
}

/* Selected row */
.dash-spreadsheet-container .dash-cell.cell--selected,
.dash-spreadsheet-container td.cell--selected {
    background-color: var(--agro-green-100) !important;
    border:           1px solid var(--agro-green-500) !important;
}

/* Editable cell */
.dash-spreadsheet-container .dash-cell.focused {
    outline:    2px solid var(--agro-green-400) !important;
    outline-offset: -1px !important;
    background: #f0faf4 !important;
}

/* Row select checkbox column */
.dash-spreadsheet-container td[data-dash-column="__dash_select__"],
.dash-spreadsheet-container th[data-dash-column="__dash_select__"] {
    background: var(--agro-green-800) !important;
    border-color: var(--agro-green-700) !important;
}

/* Scrollbar styling */
.dash-spreadsheet-container ::-webkit-scrollbar {
    width:  6px;
    height: 6px;
}

.dash-spreadsheet-container ::-webkit-scrollbar-track {
    background: var(--agro-bg);
}

.dash-spreadsheet-container ::-webkit-scrollbar-thumb {
    background:    var(--agro-green-300);
    border-radius: 3px;
}

/* Tooltip */
.dash-tooltip {
    background:   var(--agro-green-900) !important;
    color:        var(--agro-green-100) !important;
    border-radius: var(--agro-radius-sm) !important;
    font-size:    0.78rem !important;
    box-shadow:   var(--agro-shadow-md) !important;
    padding:      6px 10px !important;
    border:       1px solid var(--agro-green-700) !important;
}

/* =====================================================================
   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;
}

/* =====================================================================
   GENERAL BODY / AUTH MESSAGE
   ===================================================================== */
.sg-in-body-message {
    display:     flex;
    align-items: center;
    justify-content: center;
    height:      100%;
    font-size:   1rem;
    color:       var(--agro-text-muted);
    font-family: var(--agro-font-body);
}