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


/* Page-specific sizing: keep the existing shell and other pages untouched. */
#sensors-page {
    height: var(--sensors-available-height, calc(100vh - 80px));
    height: var(--sensors-available-height, calc(100dvh - 80px));
    flex: 0 0 auto;
    min-height: 0;
    overflow: auto;
}
#sensors-page > .container-fluid { min-height: 0; }
#sensors-page .sensors-controller-row { height: clamp(150px, 23vh, 240px); min-height: 150px; flex: 0 0 auto !important; }
#sensors-page .sensors-table-row { min-height: 230px; flex: 1 1 0 !important; }
#sensors-page .sensors-controller-row > div,
#sensors-page .sensors-table-row > div { display: flex; flex-direction: column; min-height: 0; }
#sensors-page .card { display: flex; flex-direction: column; min-height: 0; }
#sensors-page .card-header { flex: 0 0 auto; }
#sensors-page .card-body { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#sensors-page .card-body > div { display: flex; flex-direction: column; min-height: 0; flex: 1 1 0; }
#sensors-page .sensors-table-row .card-body > div > div:not(.sensors-search-bar):not(#associate-sensor-output) {
    flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
}
#sensors-page #associate-sensor-output { flex: 0 0 auto; }
#sensors-page .dash-table-container { height: 100%; min-height: 0; }
#sensors-page .dash-spreadsheet-container { height: 100%; max-height: 100% !important; }
#sensors-page .dash-spreadsheet.dash-freeze-top { max-height: 100% !important; }
#sensors-page .sensors-search-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 8px; flex: 0 0 auto; }
#sensors-page #sensors-quick-search { width: 260px; max-width: 100%; font-size: .85rem; }
#sensors-page #sensors-selection-summary { color: #216b3c; font-weight: 600; white-space: nowrap; }
#sensors-page #sensors-active-context { color: #52665b; overflow-wrap: anywhere; font-size: .82rem; }
#sensors-page .sg-btns:disabled { opacity: .45; transform: none !important; }
#sensors-page .dash-spreadsheet th { text-transform: none !important; }

/* Give the sensor table a definite viewport, independent of nested flex sizes. */
#sensors-page #sensors-table-viewport {
    display: block;
    flex: 0 0 auto !important;
    height: var(--sensors-table-height, 420px) !important;
    min-height: 80px;
    overflow: hidden;
}
#sensors-page #sensors-sensors-data-table {
    height: var(--sensors-table-height, 420px) !important;
    min-height: 80px;
}
#sensors-page #sensors-sensors-data-table .dash-spreadsheet-container,
#sensors-page #sensors-sensors-data-table .dash-spreadsheet.dash-freeze-top {
    height: var(--sensors-table-height, 420px) !important;
    max-height: var(--sensors-table-height, 420px) !important;
}

/* Use standard sticky header cells instead of DataTable's frozen-row border
   matrices, which crash with native filters in the installed Dash version. */
#sensors-page #sensors-sensors-data-table .dash-spreadsheet-inner th {
    position: sticky;
    top: 0;
    z-index: 3;
}
#sensors-page #sensors-sensors-data-table .dash-spreadsheet-inner th.dash-filter {
    top: var(--sensors-header-height, 36px);
    z-index: 2;
}